diff --git a/content/site.json b/content/site.json
index 0845ea8a5..55bd0c925 100644
--- a/content/site.json
+++ b/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",
diff --git a/src/components/Layout.module.css b/src/components/Layout.module.css
index 609f8ad4d..8baa0a8ba 100644
--- a/src/components/Layout.module.css
+++ b/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;
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 99871a894..6913169bb 100644
--- a/src/components/Layout.tsx
+++ b/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 (
@@ -29,7 +31,11 @@ export default function Layout({
{title && !noPageHeader && (
-
+
)}
{children}
diff --git a/src/components/atoms/Container.tsx b/src/components/atoms/Container.tsx
index 1d80a1167..706ace6ae 100644
--- a/src/components/atoms/Container.tsx
+++ b/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 (
-
- {children}
-
- )
+ const styleClasses = cx({
+ container: true,
+ narrow: narrow,
+ [className]: className
+ })
+
+ return {children}
}
diff --git a/src/components/molecules/PageHeader.module.css b/src/components/molecules/PageHeader.module.css
index 2cd697c68..fd6bea38f 100644
--- a/src/components/molecules/PageHeader.module.css
+++ b/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;
+}
diff --git a/src/components/molecules/PageHeader.tsx b/src/components/molecules/PageHeader.tsx
index b3f627a6e..fb11fb7f9 100644
--- a/src/components/molecules/PageHeader.tsx
+++ b/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 (
diff --git a/src/components/organisms/Header.module.css b/src/components/organisms/Header.module.css
index a31e4e918..75001c2c6 100644
--- a/src/components/organisms/Header.module.css
+++ b/src/components/organisms/Header.module.css
@@ -1,3 +1,2 @@
.header {
- background-color: var(--brand-white);
}
diff --git a/src/components/pages/Home.module.css b/src/components/pages/Home.module.css
index 8b1378917..da9107e40 100644
--- a/src/components/pages/Home.module.css
+++ b/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);
+}
diff --git a/src/components/pages/Home.tsx b/src/components/pages/Home.tsx
index 34475f8f3..e85c0e72f 100644
--- a/src/components/pages/Home.tsx
+++ b/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()
+ const [loading, setLoading] = useState(true)
useEffect(() => {
async function init() {
const results = await getLatestAssets()
setQueryResult(results)
+ setLoading(false)
}
init()
}, [])
return (
<>
-
- Latest Data Sets
- {queryResult && }
+
+
+
+
+
+ Latest Data Sets
+ {loading ? (
+
+ ) : (
+ queryResult &&
+ )}
+
>
)
}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 169ede960..ac4490d5c 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -8,7 +8,12 @@ export default function PageGatsbyHome(props: PageProps): ReactElement {
const { siteTitle, siteTagline } = useSiteMetadata()
return (
-
+
)