front page styling

content/site.json

@@ -1,7 +1,7 @@
 {
   "site": {
     "siteTitle": "Ocean Market",
-    "siteTagline": "A marketplace to find and publish open data sets in the Ocean Network.",
+    "siteTagline": "A marketplace to find, publish and trade data sets in the Ocean Network.",
     "siteUrl": "https://market.oceanprotocol.now.sh",
     "siteIcon": "node_modules/@oceanprotocol/art/logo/favicon-white.png",
     "siteImage": "../src/images/share.png",

src/components/Layout.module.css

@@ -1,5 +1,7 @@
 .app {
   height: 100%;
+  background: url('../../node_modules/@oceanprotocol/art/waves/waves.svg')
+    no-repeat center 10rem;
 
   /* sticky footer technique */
   display: flex;

src/components/Layout.tsx

@@ -12,6 +12,7 @@ export interface LayoutProps {
   uri: string
   description?: string
   noPageHeader?: boolean
+  headerCenter?: boolean
 }
 
 export default function Layout({
@@ -19,7 +20,8 @@ export default function Layout({
   title,
   uri,
   description,
-  noPageHeader
+  noPageHeader,
+  headerCenter
 }: LayoutProps): ReactElement {
   return (
     <div className={styles.app}>
@@ -29,7 +31,11 @@ export default function Layout({
       <main className={styles.main}>
         <Container>
           {title && !noPageHeader && (
-            <PageHeader title={title} description={description} />
+            <PageHeader
+              title={title}
+              description={description}
+              center={headerCenter}
+            />
           )}
           {children}
         </Container>

src/components/atoms/Container.tsx

@@ -1,6 +1,9 @@
 import React, { ReactElement, ReactNode } from 'react'
+import classNames from 'classnames/bind'
 import styles from './Container.module.css'
 
+const cx = classNames.bind(styles)
+
 export default function Container({
   children,
   narrow,
@@ -10,13 +13,11 @@ export default function Container({
   narrow?: boolean
   className?: string
 }): ReactElement {
-  return (
-    <div
-      className={`${styles.container} ${narrow && styles.narrow} ${
-        className && className
-      }`}
-    >
-      {children}
-    </div>
-  )
+  const styleClasses = cx({
+    container: true,
+    narrow: narrow,
+    [className]: className
+  })
+
+  return <div className={styleClasses}>{children}</div>
 }

src/components/molecules/PageHeader.module.css

@@ -14,3 +14,9 @@
   margin-top: calc(var(--spacer) / 4);
   margin-bottom: 0;
 }
+
+.center {
+  margin-left: auto;
+  margin-right: auto;
+  text-align: center;
+}

src/components/molecules/PageHeader.tsx

@@ -6,14 +6,16 @@ const cx = classNames.bind(styles)
 
 export default function PageHeader({
   title,
-  description
+  description,
+  center
 }: {
   title: string
   description?: string
   center?: boolean
 }): ReactElement {
   const styleClasses = cx({
-    header: true
+    header: true,
+    center: center
   })
 
   return (

src/components/organisms/Header.module.css

@@ -1,3 +1,2 @@
 .header {
-  background-color: var(--brand-white);
 }

src/components/pages/Home.module.css

@@ -1 +1,14 @@
+.searchWrap {
+  display: flex;
+  justify-content: center;
+  margin-top: calc(var(--spacer) * var(--line-height));
+}
 
+.latest {
+  margin-top: calc(var(--spacer) * 2);
+}
+
+.latest h3 {
+  font-size: var(--font-size-large);
+  color: var(--color-secondary);
+}

src/components/pages/Home.tsx

@@ -1,12 +1,12 @@
 import React, { ReactElement, useEffect, useState } from 'react'
 import SearchBar from '../molecules/SearchBar'
-import { ServiceMetaDataMarket } from '../../@types/MetaData'
-import AssetTeaser from '../molecules/AssetTeaser'
 import styles from './Home.module.css'
 import { oceanConfig } from '../../../app.config'
 import { MetadataStore, Logger } from '@oceanprotocol/lib'
 import AssetList from '../organisms/AssetList'
 import { QueryResult } from '@oceanprotocol/lib/dist/node/metadatastore/MetadataStore'
+import Container from '../atoms/Container'
+import Loader from '../atoms/Loader'
 
 async function getLatestAssets() {
   try {
@@ -30,20 +30,31 @@ async function getLatestAssets() {
 
 export default function HomePage(): ReactElement {
   const [queryResult, setQueryResult] = useState<QueryResult>()
+  const [loading, setLoading] = useState(true)
 
   useEffect(() => {
     async function init() {
       const results = await getLatestAssets()
       setQueryResult(results)
+      setLoading(false)
     }
     init()
   }, [])
 
   return (
     <>
-      <SearchBar large />
-      <h3>Latest Data Sets</h3>
-      {queryResult && <AssetList queryResult={queryResult} />}
+      <Container narrow className={styles.searchWrap}>
+        <SearchBar large />
+      </Container>
+
+      <section className={styles.latest}>
+        <h3>Latest Data Sets</h3>
+        {loading ? (
+          <Loader />
+        ) : (
+          queryResult && <AssetList queryResult={queryResult} />
+        )}
+      </section>
     </>
   )
 }

src/pages/index.tsx

@@ -8,7 +8,12 @@ export default function PageGatsbyHome(props: PageProps): ReactElement {
   const { siteTitle, siteTagline } = useSiteMetadata()
 
   return (
-    <Layout title={siteTitle} description={siteTagline} uri={props.uri}>
+    <Layout
+      title={siteTitle}
+      description={siteTagline}
+      uri={props.uri}
+      headerCenter
+    >
       <PageHome />
     </Layout>
   )