output asset teasers, basic styling

src/components/atoms/Box.module.css

@@ -1,14 +1,16 @@
 .box {
+  display: block;
   background: var(--brand-white);
-  padding: var(--spacer);
   border-radius: var(--border-radius);
-  border: 1px solid var(--brand-grey-light);
+  border: 1px solid var(--brand-grey-lighter);
+  box-shadow: 0 6px 15px 0 rgba(0, 0, 0, 0.05);
+  overflow: hidden;
+  padding: var(--spacer);
 }
 
 a.box:hover,
 a.box:focus {
   outline: 0;
-  border-color: var(--brand-pink);
+  transform: translate3d(0, -0.1rem, 0);
-  /* box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); */
+  box-shadow: 0 10px 25px 0 rgba(0, 0, 0, 0.07);
-  /* transform: translate3d(0, -2px, 0); */
 }

src/components/atoms/Dropzone.module.css

@@ -1,12 +1,16 @@
 .dropzone {
-  padding: 22px;
+  padding: var(--spacer);
   text-align: center;
   color: var(--color-secondary);
-  border: 2px dashed var(--color-primary);
+  border: 0.1rem dashed var(--color-secondary);
+  font-size: var(--font-size-small);
+  border-radius: var(--border-radius);
 }
+
 .dragover {
-  border-color: var(--color-secondary);
+  border-color: var(--color-primary);
 }
+
 .disabled {
 }
 

src/components/atoms/Price.module.css

@@ -7,10 +7,10 @@
 .price span {
   font-weight: var(--font-weight-base);
   color: var(--color-secondary);
-  font-size: var(--font-size-small);
+  font-size: var(--font-size-base);
 }
 
 .small {
-  transform: scale(0.8);
+  transform: scale(0.7);
   transform-origin: left 80%;
 }

src/components/atoms/Price.tsx

@@ -1,7 +1,10 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import Web3 from 'web3'
+import classNames from 'classnames/bind'
 import styles from './Price.module.css'
 
+const cx = classNames.bind(styles)
+
 export default function Price({
   price,
   className,
@@ -10,11 +13,15 @@ export default function Price({
   price: string
   className?: string
   small?: boolean
-}) {
+}): ReactElement {
-  const classes = small
+  const styleClasses = cx({
-    ? `${styles.price} ${styles.small} ${className}`
+    price: true,
-    : `${styles.price} ${className}`
+    small: small,
+    [className]: className
+  })
+
   const isFree = price === '0'
+
   const displayPrice = isFree ? (
     'Free'
   ) : (
@@ -23,5 +30,5 @@ export default function Price({
     </>
   )
 
-  return <div className={classes}>{displayPrice}</div>
+  return <div className={styleClasses}>{displayPrice}</div>
 }

src/components/atoms/Status.module.css

@@ -1,10 +1,10 @@
 /* default: success, green circle */
 .status {
-  width: var(--font-size-small);
+  width: var(--font-size-mini);
-  height: var(--font-size-small);
+  height: var(--font-size-mini);
   border-radius: 50%;
   display: inline-block;
-  background: var(--green);
+  background: var(--brand-alert-green);
 }
 
 /* yellow triangle */
@@ -14,15 +14,15 @@
   background: none;
   width: 0;
   height: 0;
-  border-left: calc(var(--font-size-small) / 1.7) solid transparent;
+  border-left: calc(var(--font-size-mini) / 1.7) solid transparent;
-  border-right: calc(var(--font-size-small) / 1.7) solid transparent;
+  border-right: calc(var(--font-size-mini) / 1.7) solid transparent;
-  border-bottom: var(--font-size-small) solid var(--orange);
+  border-bottom: var(--font-size-mini) solid var(--brand-alert-orange);
 }
 
 /* red square */
 .error {
   composes: status;
   border-radius: 0;
-  background: var(--red);
+  background: var(--brand-alert-red);
   text-transform: capitalize;
 }

src/components/atoms/Status.tsx

@@ -1,7 +1,7 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import styles from './Status.module.css'
 
-export default function Status({ state }: { state?: string }) {
+export default function Status({ state }: { state?: string }): ReactElement {
   const classes =
     state === 'error'
       ? styles.error

src/components/molecules/AssetTeaser.module.css

@@ -7,7 +7,7 @@
   composes: box from '../atoms/Box.module.css';
   font-size: var(--font-size-small);
   height: 100%;
-  color: var(--brand-grey-dark);
+  color: var(--color-secondary);
   position: relative;
   /* for sticking footer to bottom */
   display: flex;
@@ -18,59 +18,35 @@
   overflow-wrap: break-word;
   word-wrap: break-word;
   word-break: break-all;
-  margin-top: calc(var(--spacer) / 2);
 
   /* for sticking footer to bottom */
   flex: 1;
 }
 
 .title {
-  font-size: var(--font-size-h4);
+  font-size: var(--font-size-large);
-  color: var(--color-primary);
+  margin-bottom: calc(var(--spacer) / 4);
-  margin-bottom: calc(var(--spacer) / 6);
-}
-
-.tags > * {
-  font-size: var(--font-size-mini);
 }
 
 .foot {
-  color: var(--color-secondary);
   font-weight: var(--font-weight-bold);
   margin-top: calc(var(--spacer) / 1.5);
-  border-top: 1px solid var(--brand-grey-light);
+  border-top: 1px solid var(--brand-grey-lighter);
   padding-top: calc(var(--spacer) / 3);
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  align-items: center;
 }
 
 .foot p {
   margin: 0;
 }
 
-.price {
-  text-align: right;
-}
-
-p.copyright {
-  width: 100%;
-  font-weight: var(--font-weight-base);
-  margin-bottom: 0;
-  font-size: var(--font-size-mini);
-  text-align: center;
-  margin-top: calc(var(--spacer) / 3);
-}
-
 .accessLabel {
-  font-size: var(--font-size-small);
+  font-size: var(--font-size-mini);
   width: auto;
   position: absolute;
   top: 0;
   right: 0;
   color: var(--brand-black);
   background: var(--brand-grey-lighter);
-  padding: 0.1px 0.5px 0.1px 0.5px;
+  padding: 0.2rem 0.5rem;
-  border-radius: 2px;
+  border-bottom-left-radius: var(--border-radius);
 }

src/components/molecules/AssetTeaser.tsx

@@ -48,13 +48,7 @@ const AssetTeaser: React.FC<AssetTeaserProps> = ({
         </div>
 
         <footer className={styles.foot}>
-          {categories && <p className={styles.type}>{categories[0]}</p>}
+          <Price price={price} small />
-
-          <Price price={price} className={styles.price} />
-
-          <p className={styles.copyright}>
-            Provided by <strong>{copyrightHolder}</strong>
-          </p>
         </footer>
       </Link>
     </article>

src/components/molecules/PageHeader.module.css

@@ -4,6 +4,7 @@
 }
 
 .title {
+  font-size: var(--font-size-h2);
   margin-top: 0;
   margin-bottom: 0;
 }

src/components/molecules/PageHeader.tsx

@@ -1,15 +1,23 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
+import classNames from 'classnames/bind'
 import styles from './PageHeader.module.css'
 
+const cx = classNames.bind(styles)
+
 export default function PageHeader({
   title,
   description
 }: {
   title: string
   description?: string
-}) {
+  center?: boolean
+}): ReactElement {
+  const styleClasses = cx({
+    header: true
+  })
+
   return (
-    <header className={styles.header}>
+    <header className={styleClasses}>
       <h1 className={styles.title}>{title}</h1>
       {description && <p className={styles.description}>{description}</p>}
     </header>

src/components/molecules/Web3Feedback/index.module.css

@@ -10,9 +10,6 @@
 .statuscontainer {
   flex-grow: 1;
 }
-.statuscontainer h3 {
-  margin-top: 0;
-}
 
 .walletcontainer {
   width: 35%;

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

@@ -3,7 +3,7 @@
   font-size: var(--font-size-small);
   padding: var(--spacer);
   border-radius: var(--border-radius);
-  border: 1px solid var(--brand-grey-light);
+  background: var(--brand-grey-dimmed);
   display: grid;
   gap: var(--spacer);
   grid-template-columns: 1fr 1fr;
@@ -11,5 +11,5 @@
 
 .metaFull code {
   /* magic number cause the code font has a bigger visual weight */
-  font-size: 0.7rem;
+  font-size: 0.8rem;
 }

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

@@ -2,6 +2,7 @@
   display: grid;
   gap: calc(var(--spacer) * 1.5);
   position: relative;
+  margin-top: -1rem;
 }
 
 @media (min-width: 55rem) {
@@ -27,11 +28,6 @@
   margin-bottom: 0;
 }
 
-.sectionTitle {
-  font-size: var(--font-size-large);
-  color: var(--color-secondary);
-}
-
 .buttonGroup {
   margin-top: var(--spacer);
   margin-bottom: var(--spacer);

src/components/organisms/AssetContent/index.tsx

@@ -51,10 +51,7 @@ export default function AssetContent({
     <article className={styles.grid}>
       <div>
         <aside className={styles.meta}>
-          <p>
+          <p>{datePublished && <Time date={datePublished} />}</p>
-            <span title="Copyright Holder">{copyrightHolder}</span> -{' '}
-            {datePublished && <Time date={datePublished} />}
-          </p>
           {categories && (
             <p>
               <Link to={`/search?categories=["${categories[0]}"]`}>
@@ -65,7 +62,6 @@ export default function AssetContent({
           {/* <Rating curation={{ rating, numVotes }} readonly /> */}
         </aside>
 
-        <h2 className={styles.sectionTitle}>Summary</h2>
         <Markdown text={description || ''} />
 
         {tags && tags.length > 0 && <Tags items={tags} />}

src/components/organisms/AssetList.tsx

@@ -38,7 +38,7 @@ const AssetList: React.FC<AssetListProps> = ({ queryResult }) => {
   return (
     <>
       <div className={styles.assetList}>
-        {queryResult.results &&
+        {queryResult &&
           queryResult.results.map((ddo: DDO) => {
             const { attributes }: MetaDataMarket = new DDO(
               ddo

src/components/organisms/Compute.module.css

@@ -6,7 +6,7 @@
   width: 100%;
   margin-top: var(--spacer);
   padding-top: var(--spacer);
-  border-top: 1px solid var(--color-secondary);
+  border-top: 1px solid var(--brand-grey-lighter);
 }
 
 .compute {
@@ -14,22 +14,18 @@
   display: flex;
   flex-wrap: wrap;
 }
+
 .compute button {
   margin-left: var(--spacer);
 }
+
 .compute button:first {
   margin-left: 0px;
 }
-.price {
-  font-size: var(--font-size-h2);
-  /* padding-bottom: var(--spacer); */
-}
 
 .info {
+  margin-top: var(--spacer);
   display: flex;
   flex-direction: column;
   width: 100%;
-  /* padding-top: calc(var(--spacer) * 0.5);
-  padding-bottom: var(--spacer);
-  border-top: 1px solid var(--color-secondary); */
 }

src/components/organisms/Compute.tsx

@@ -96,7 +96,7 @@ export default function Compute({
 
   return (
     <div className={styles.compute}>
-      <Price price={price} className={styles.price} />
+      <Price price={price} />
 
       <div className={styles.info}>
         <div className={styles.selectType}>

src/components/organisms/Consume.module.css

@@ -13,9 +13,6 @@
   flex-shrink: 0;
 }
 
-.pricewrapper {
-}
-
 .consume button {
   margin-left: calc(var(--spacer) / 4);
 }
@@ -25,18 +22,13 @@
 }
 
 .price {
-  font-size: var(--font-size-h2);
   margin-top: calc(var(--spacer) / 4);
   margin-bottom: calc(var(--spacer) / 2);
 }
 
-.price span {
-  font-size: var(--font-size-large);
-}
-
 .feedback {
   width: 100%;
   margin-top: calc(var(--spacer) / 1.5);
   padding-top: calc(var(--spacer) / 1.5);
-  border-top: 1px solid var(--brand-grey-light);
+  border-top: 1px solid var(--brand-grey-lighter);
 }

src/components/organisms/Header.tsx

@@ -1,11 +1,11 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import { Link } from 'gatsby'
 import Menu from '../molecules/Menu'
 import styles from './Header.module.css'
 import { ReactComponent as Logo } from '@oceanprotocol/art/logo/logo.svg'
 import { useSiteMetadata } from '../../hooks/useSiteMetadata'
 
-export default function Header() {
+export default function Header(): ReactElement {
   const { siteTitle } = useSiteMetadata()
 
   return (

src/components/pages/Home.module.css

@@ -0,0 +1,3 @@
+.grid {
+  composes: assetList from '../organisms/AssetList.module.css';
+}

src/components/pages/Home.tsx

@@ -1,9 +1,9 @@
 import React, { ReactElement } from 'react'
 import SearchBar from '../molecules/SearchBar'
-import { DID } from '@oceanprotocol/squid'
-import { Link } from 'gatsby'
 import shortid from 'shortid'
 import { OceanAsset } from '../../@types/MetaData'
+import AssetTeaser from '../molecules/AssetTeaser'
+import styles from './Home.module.css'
 
 export default function HomePage({
   assets
@@ -16,13 +16,15 @@ export default function HomePage({
     <>
       <SearchBar large />
       {assets && (
-        <ul>
+        <div className={styles.grid}>
-          {assets.map(({ node }: { node: { did: DID } }) => (
+          {assets.map(({ node }: { node: OceanAsset }) => (
-            <li key={shortid.generate()}>
+            <AssetTeaser
-              <Link to={`/asset/${node.did}`}>{node.did}</Link>
+              key={shortid.generate()}
-            </li>
+              did={node.did}
+              metadata={node}
+            />
           ))}
-        </ul>
+        </div>
       )}
     </>
   )

src/components/templates/Search/index.tsx

@@ -25,11 +25,11 @@ export default function SearchPage({
 
   useEffect(() => {
     async function initSearch() {
-      const results = await getResults(parsed)
+      const queryResult = await getResults(parsed)
-      setQueryResult(results)
+      setQueryResult(queryResult)
     }
     initSearch()
-  }, [])
+  }, [parsed])
 
   return (
     <section className={styles.grid}>

src/components/templates/Search/utils.ts

@@ -25,7 +25,7 @@ export function getSearchQuery(
       created: -1
     }
 
-    // Something in squid-js is weird when using 'categories: [type]'
+    // Something in squid-js is weird when using 'tags: [tag]'
     // which is the only way the query actually returns desired results.
     // But it doesn't follow 'SearchQuery' interface so we have to assign
     // it here.

src/global/_variables.css

@@ -18,7 +18,6 @@
   --brand-alert-orange: #b35f36;
   --brand-alert-yellow: #eac146;
 
-  /* Buttons */
   --color-primary: #ff4092;
   --color-secondary: #8b98a9;
 
@@ -34,30 +33,26 @@
   --font-size-large: 1.2rem;
   --font-size-small: 0.85rem;
   --font-size-mini: 0.65rem;
-
   --font-size-text: 1rem;
   --font-size-label: 1rem;
   --font-size-title: 1.4rem;
-
   --font-size-h1: 3rem;
-  --font-size-h2: 1.7rem;
+  --font-size-h2: 2.5rem;
-  --font-size-h3: 1.4rem;
+  --font-size-h3: 1.7rem;
-  --font-size-h4: 1.2rem;
+  --font-size-h4: 1.3rem;
   --font-size-h5: 1.1rem;
-
+  --font-weight-base: 500;
-  --font-weight-base: 400;
   --font-weight-bold: 600;
   --line-height: 1.6;
 
-  --break-point--small: 640px;
-  --break-point--medium: 860px;
-  --break-point--large: 1140px;
-  --break-point--huge: 1400px;
-
   --spacer: 2rem;
   --border-radius: 0.2rem;
 
   --layout-max-width: 85rem;
-
   --checkbox-size: 1.6em;
+
+  --break-point--small: 640px;
+  --break-point--medium: 860px;
+  --break-point--large: 1140px;
+  --break-point--huge: 1400px;
 }

src/pages/index.tsx

@@ -21,6 +21,18 @@ export const pageQuery = graphql`
       edges {
         node {
           did
+          main {
+            type
+            name
+            dateCreated
+            author
+            price
+            datePublished
+          }
+          additionalInformation {
+            description
+            access
+          }
         }
       }
     }