metadata display tweaks

content/pages/publish.json

@@ -57,7 +57,8 @@
       {
         "name": "copyrightHolder",
         "label": "Copyright Holder",
-        "placeholder": "e.g. Marine Institute of Jellyfish"
+        "placeholder": "e.g. Marine Institute of Jellyfish",
+        "help": "Add this if the holder of the copyright is different from the author."
       },
       {
         "name": "tags",

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

@@ -1,5 +1,5 @@
 .metaFull {
-  margin-top: calc(var(--spacer) * 2);
+  margin-top: var(--spacer);
   font-size: var(--font-size-small);
   display: grid;
   gap: var(--spacer);

src/components/organisms/AssetContent/MetaFull.tsx

@@ -4,8 +4,6 @@ import MetaItem from './MetaItem'
 import styles from './MetaFull.module.css'
 import { MetadataMarket } from '../../../@types/MetaData'
 import { DDO } from '@oceanprotocol/lib'
-import EtherscanLink from '../../atoms/EtherscanLink'
-import { useOcean, usePricing } from '@oceanprotocol/react'
 
 export default function MetaFull({
   ddo,
@@ -14,15 +12,12 @@ export default function MetaFull({
   ddo: DDO
   metadata: MetadataMarket
 }): ReactElement {
-  const { networkId } = useOcean()
-  const { id, dataToken } = ddo
-  const { dateCreated, datePublished, author, license } = metadata.main
-  const { dtSymbol, dtName } = usePricing(ddo)
+  const { id } = ddo
+  const { dateCreated, datePublished, license } = metadata.main
 
   return (
     <div className={styles.metaFull}>
-      <MetaItem title="Author" content={author} />
-
+      <MetaItem title="Author" content={metadata?.main.author} />
       {metadata?.additionalInformation?.copyrightHolder && (
         <MetaItem
           title="Copyright Holder"
@@ -40,21 +35,7 @@ export default function MetaFull({
       )}
 
       <MetaItem title="Data Created" content={<Time date={dateCreated} />} />
-
-      <MetaItem
-        title="Data Published"
-        content={<Time date={datePublished} />}
-      />
-
-      <MetaItem
-        title="Datatoken"
-        content={
-          <EtherscanLink networkId={networkId} path={`token/${dataToken}`}>
-            {dtName ? `${dtName} - ${dtSymbol}` : <code>{dataToken}</code>}
-          </EtherscanLink>
-        }
-      />
-
+      <MetaItem title="Published" content={<Time date={datePublished} />} />
       <MetaItem title="DID" content={<code>{id}</code>} />
     </div>
   )

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

@@ -14,3 +14,7 @@
 .samples {
   margin-top: var(--spacer);
 }
+
+.date {
+  color: var(--color-secondary);
+}

src/components/organisms/AssetContent/MetaSecondary.tsx

@@ -4,6 +4,7 @@ import styles from './MetaSecondary.module.css'
 import { MetadataMarket } from '../../../@types/MetaData'
 import Tags from '../../atoms/Tags'
 import Button from '../../atoms/Button'
+import Time from '../../atoms/Time'
 
 export default function MetaSecondary({
   metadata
@@ -12,10 +13,6 @@ export default function MetaSecondary({
 }): ReactElement {
   return (
     <aside className={styles.metaSecondary}>
-      {metadata?.additionalInformation?.tags?.length > 0 && (
-        <Tags items={metadata?.additionalInformation?.tags} />
-      )}
-
       {metadata?.additionalInformation?.links?.length && (
         <div className={styles.samples}>
           <MetaItem
@@ -35,6 +32,14 @@ export default function MetaSecondary({
           />
         </div>
       )}
+
+      {metadata?.additionalInformation?.tags?.length > 0 && (
+        <Tags items={metadata?.additionalInformation?.tags} />
+      )}
+
+      <p className={styles.date}>
+        Published <Time date={metadata?.main.datePublished} relative />
+      </p>
     </aside>
   )
 }

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

@@ -29,13 +29,20 @@
 .meta {
   margin-bottom: var(--spacer);
   color: var(--color-secondary);
-  font-weight: var(--font-weight-bold);
 }
 
 .meta p {
   margin-bottom: 0;
 }
 
+.author {
+  font-weight: var(--font-weight-bold);
+}
+
+.datatoken a {
+  color: var(--color-secondary);
+}
+
 .buttonGroup {
   margin-top: var(--spacer);
   margin-bottom: var(--spacer);

src/components/organisms/AssetContent/index.tsx

@@ -10,7 +10,9 @@ import AssetActions from '../AssetActions'
 import { DDO } from '@oceanprotocol/lib'
 import { useUserPreferences } from '../../../providers/UserPreferences'
 import Pricing from './Pricing'
-import { useOcean } from '@oceanprotocol/react'
+import { useOcean, usePricing } from '@oceanprotocol/react'
+import EtherscanLink from '../../atoms/EtherscanLink'
+import MetaItem from './MetaItem'
 
 export interface AssetContentProps {
   metadata: MetadataMarket
@@ -22,9 +24,9 @@ export default function AssetContent({
   metadata,
   ddo
 }: AssetContentProps): ReactElement {
-  const { datePublished } = metadata.main
   const { debug } = useUserPreferences()
-  const { accountId } = useOcean()
+  const { accountId, networkId } = useOcean()
+  const { dtSymbol, dtName } = usePricing(ddo)
 
   const isOwner = accountId === ddo.publicKey[0].owner
   const hasNoPrice = ddo.price.type === ''
@@ -37,7 +39,24 @@ export default function AssetContent({
 
         <div className={styles.content}>
           <aside className={styles.meta}>
-            <p>{datePublished && <Time date={datePublished} />}</p>
+            <p className={styles.author}>
+              {metadata?.additionalInformation?.copyrightHolder ||
+                metadata?.main.author}
+            </p>
+
+            <p className={styles.datatoken}>
+              <EtherscanLink
+                networkId={networkId}
+                path={`token/${ddo.dataToken}`}
+              >
+                {dtName ? (
+                  `${dtName} - ${dtSymbol}`
+                ) : (
+                  <code>{ddo.dataToken}</code>
+                )}
+              </EtherscanLink>
+            </p>
+
             {metadata?.additionalInformation?.categories?.length && (
               <p>
                 <Link

src/components/pages/Publish/Preview.module.css

@@ -21,7 +21,14 @@
 }
 
 .title {
-  margin-bottom: calc(var(--spacer) / 2);
+  margin: 0;
+}
+
+.author {
+  margin-top: calc(var(--spacer) / 8);
+  margin-bottom: 0;
+  color: var(--color-secondary);
+  font-weight: var(--font-weight-bold);
 }
 
 .preview [class*='MetaItem-module--metaItem'] h3 {
@@ -30,6 +37,7 @@
 
 .description {
   position: relative;
+  margin-top: calc(var(--spacer) / 4);
 }
 
 .toggle {

src/components/pages/Publish/Preview.tsx

@@ -34,6 +34,7 @@ export default function Preview({
       <h2 className={styles.previewTitle}>Preview</h2>
       <header>
         {values.name && <h3 className={styles.title}>{values.name}</h3>}
+        {values.author && <p className={styles.author}>{values.author}</p>}
 
         {values.description && (
           <div className={styles.description}>
@@ -81,6 +82,7 @@ export default function Preview({
           .filter(
             ([key, value]) =>
               !(
+                key.includes('author') ||
                 key.includes('name') ||
                 key.includes('description') ||
                 key.includes('tags') ||