metadata display tweaks

* new lock icon for private algos
* visual updates for asset details

src/components/atoms/AssetType.module.css

@@ -1,9 +1,9 @@
 .icon {
-  fill: var(--brand-grey-light);
-  width: 1.1em;
-  height: 1.1em;
+  fill: currentColor;
+  width: 1em;
+  height: 1em;
   vertical-align: baseline;
-  margin-bottom: -0.2em;
+  margin-bottom: -0.1em;
   display: inline-block;
 }
 

src/components/atoms/AssetType.tsx

@@ -3,6 +3,7 @@ import styles from './AssetType.module.css'
 import classNames from 'classnames/bind'
 import { ReactComponent as Compute } from '../../images/compute.svg'
 import { ReactComponent as Download } from '../../images/download.svg'
+import { ReactComponent as Lock } from '../../images/lock.svg'
 
 const cx = classNames.bind(styles)
 
@@ -25,6 +26,8 @@ export default function AssetType({
       </div>
       {accessType === 'access' ? (
         <Download role="img" aria-label="Download" className={styles.icon} />
+      ) : accessType === 'compute' && type === 'algorithm' ? (
+        <Lock role="img" aria-label="Private" className={styles.icon} />
       ) : (
         <Compute role="img" aria-label="Compute" className={styles.icon} />
       )}

src/components/organisms/AssetContent/MetaMain.module.css

@@ -1,25 +1,18 @@
 .meta {
   margin-bottom: calc(var(--spacer) / 1.5);
   color: var(--color-secondary);
+  font-size: var(--font-size-small);
 }
 
 .meta p {
   margin-bottom: 0;
 }
 
-.date {
+.published {
+  margin-top: calc(var(--spacer) / 2);
   font-size: var(--font-size-small);
 }
 
-.typeAndDate {
-  margin-bottom: calc(var(--spacer) / 12);
-  display: flex;
-}
-
-.typeDetails {
-  border-right: 1px solid var(--border-color);
-  padding-right: calc(var(--spacer) / 3.5);
-  margin-right: calc(var(--spacer) / 4);
-  width: auto;
-  font-size: var(--font-size-small);
+.updated {
+  font-size: var(--font-size-mini);
 }

src/components/organisms/AssetContent/MetaMain.tsx

@@ -15,22 +15,7 @@ export default function MetaMain(): ReactElement {
 
   return (
     <aside className={styles.meta}>
-      <div className={styles.typeAndDate}>
-        <AssetType
-          type={type}
-          accessType={accessType}
-          className={styles.typeDetails}
-        />
-        <p className={styles.date}>
-          <Time date={ddo?.created} relative />
-          {ddo?.created !== ddo?.updated && (
-            <>
-              {' — '}
-              updated <Time date={ddo?.updated} relative />
-            </>
-          )}
-        </p>
-      </div>
+      <AssetType type={type} accessType={accessType} />
       <p>
         <ExplorerLink
           networkId={networkId}
@@ -43,7 +28,21 @@ export default function MetaMain(): ReactElement {
           {`${ddo?.dataTokenInfo.name} — ${ddo?.dataTokenInfo.symbol}`}
         </ExplorerLink>
       </p>
+
+      <div className={styles.published}>
         Published By <Publisher account={owner} />
+        <p>
+          <Time date={ddo?.created} relative />
+          {ddo?.created !== ddo?.updated && (
+            <>
+              {' — '}
+              <span className={styles.updated}>
+                updated <Time date={ddo?.updated} relative />
+              </span>
+            </>
+          )}
+        </p>
+      </div>
     </aside>
   )
 }

src/images/lock.svg

@@ -0,0 +1,4 @@
+<svg width="15" height="20" viewBox="0 0 15 20" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 13.9146C8.5826 13.7087 9 13.1531 9 12.5C9 11.6716 8.32843 11 7.5 11C6.67157 11 6 11.6716 6 12.5C6 13.1531 6.4174 13.7087 7 13.9146V17H8V13.9146Z" />
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13 8V5.18395C13 2.33746 10.3486 0 7.5 0C4.65139 0 2 2.33746 2 5.18395V8H0.775862C0.347365 8 0 8.56848 0 8.99331V19.2308C0 19.6556 0.347365 20 0.775862 20H14.2241C14.6526 20 15 19.6556 15 19.2308V8.99331C15 8.56848 14.6526 8 14.2241 8H13ZM7.5 2C5.54204 2 4 3.15337 4 5.18395V8H11V5.18395C11 3.15337 9.45796 2 7.5 2ZM2 10V18H13V10H2Z" />
+</svg>