AssetType changes, moved to MetaMain

src/components/atoms/AssetType.module.css

@@ -1,11 +1,3 @@
-.typeDetails {
-  position: absolute;
-  top: calc(var(--spacer) / 3);
-  right: calc(var(--spacer) / 3);
-  width: auto;
-  font-size: var(--font-size-mini);
-}
-
 .icon {
   fill: var(--brand-grey-light);
   width: 1.1em;

src/components/atoms/AssetType.tsx

@@ -1,17 +1,25 @@
 import React, { ReactElement } from 'react'
-import styles from './AssetTypeDetails.module.css'
+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'
 
-export default function AssetTypeDetails({
+const cx = classNames.bind(styles)
+
+export default function AssetType({
   type,
-  accessType
+  accessType,
+  className
 }: {
   type: string
   accessType: string
+  className?: string
 }): ReactElement {
+  const styleClasses = cx({
+    [className]: className
+  })
   return (
-    <aside className={styles.typeDetails}>
+    <div className={styleClasses}>
       <div className={styles.typeLabel}>
         {type === 'dataset' ? 'data set' : 'algorithm'}
       </div>
@@ -20,6 +28,6 @@ export default function AssetTypeDetails({
       ) : (
         <Compute role="img" aria-label="Compute" className={styles.icon} />
       )}
-    </aside>
+    </div>
   )
 }

src/components/molecules/AssetTeaser.module.css

@@ -61,3 +61,11 @@
   font-size: var(--font-size-mini);
   margin-top: calc(var(--spacer) / 2);
 }
+
+.typeDetails {
+  position: absolute;
+  top: calc(var(--spacer) / 3);
+  right: calc(var(--spacer) / 3);
+  width: auto;
+  font-size: var(--font-size-mini);
+}

src/components/molecules/AssetTeaser.tsx

@@ -8,7 +8,7 @@ import removeMarkdown from 'remove-markdown'
 import Publisher from '../atoms/Publisher'
 import { useMetadata } from '@oceanprotocol/react'
 import Time from '../atoms/Time'
-import AssetTypeDetails from '../atoms/AssetTypeDetails'
+import AssetType from '../atoms/AssetType'
 
 declare type AssetTeaserProps = {
   ddo: DDO
@@ -32,7 +32,11 @@ const AssetTeaser: React.FC<AssetTeaserProps> = ({ ddo }: AssetTeaserProps) => {
           <Publisher account={owner} minimal className={styles.publisher} />
         </header>
 
-        <AssetTypeDetails type={type} accessType={accessType} />
+        <AssetType
+          type={type}
+          accessType={accessType}
+          className={styles.typeDetails}
+        />
 
         <div className={styles.content}>
           <Dotdotdot tagName="p" clamp={3}>

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

@@ -9,5 +9,17 @@
 
 .date {
   font-size: var(--font-size-mini);
-  margin-top: calc(var(--spacer) / 2);
+}
+
+.typeAndDate {
+  margin-top: calc(var(--spacer) / 2);
+  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-mini);
 }

src/components/organisms/AssetContent/MetaMain.tsx

@@ -5,10 +5,12 @@ import EtherscanLink from '../../atoms/EtherscanLink'
 import Publisher from '../../atoms/Publisher'
 import Time from '../../atoms/Time'
 import styles from './MetaMain.module.css'
+import AssetType from '../../atoms/AssetType'
 
 export default function MetaMain(): ReactElement {
-  const { ddo, owner } = useAsset()
+  const { ddo, owner, type } = useAsset()
   const { networkId } = useOcean()
+  const accessType = ddo.service[1].type
 
   return (
     <aside className={styles.meta}>
@@ -20,15 +22,22 @@ export default function MetaMain(): ReactElement {
       <div>
         Published By <Publisher account={owner} />
       </div>
-      <p className={styles.date}>
-        <Time date={ddo?.created} relative />
-        {ddo?.created !== ddo?.updated && (
-          <>
-            {' — '}
-            updated <Time date={ddo?.updated} relative />
-          </>
-        )}
-      </p>
+      <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>
     </aside>
   )
 }

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

@@ -42,7 +42,3 @@
   margin-left: calc(var(--spacer) / 4);
   margin-right: calc(var(--spacer) / 4);
 }
-
-.content [class*='typeDetails'] {
-  right: calc(var(--spacer) * 2) !important;
-}

src/components/organisms/AssetContent/index.tsx

@@ -15,7 +15,6 @@ import Button from '../../atoms/Button'
 import Edit from '../AssetActions/Edit'
 import DebugOutput from '../../atoms/DebugOutput'
 import MetaMain from './MetaMain'
-import AssetTypeDetails from '../../atoms/AssetTypeDetails'
 // import EditHistory from './EditHistory'
 
 export interface AssetContentProps {
@@ -47,9 +46,8 @@ export default function AssetContent(props: AssetContentProps): ReactElement {
   const { owner, isInPurgatory, purgatoryData } = useAsset()
   const [showPricing, setShowPricing] = useState(false)
   const [showEdit, setShowEdit] = useState<boolean>()
-  const { ddo, price, metadata, type } = useAsset()
+  const { ddo, price, metadata } = useAsset()
   const isOwner = accountId === owner
-  const accessType = ddo.service[1].type
 
   useEffect(() => {
     if (!price) return
@@ -69,7 +67,6 @@ export default function AssetContent(props: AssetContentProps): ReactElement {
       <div>
         {showPricing && <Pricing ddo={ddo} />}
         <div className={styles.content}>
-          <AssetTypeDetails type={type} accessType={accessType} />
           <MetaMain />
           <Bookmark did={ddo.id} />