Context warnings, more terms links (#199)

* move general banner to publish screen

* modify main banner

* move banner contents into content files

* simple footer links

* consistent links

* specificity

content/pages/publish.json

@@ -1,6 +1,7 @@
 {
   "title": "Publish",
   "description": "Highlight the important features of your data set to make it more discoverable and catch the interest of data consumers.",
+  "warning": "Given the beta status, publishing on Rinkeby first is strongly recommended. Please familiarize yourself with [the market](https://oceanprotocol.com/technology/marketplaces), [the risks](https://blog.oceanprotocol.com/on-staking-on-data-in-ocean-market-3d8e09eb0a13), and the [Terms of Use](/terms).",
   "form": {
     "title": "Publish",
     "data": [

content/site.json

@@ -15,6 +15,7 @@
         "name": "History",
         "link": "/history"
       }
-    ]
+    ],
+    "warning": "We are in beta. Please familiarize yourself with [the market](https://oceanprotocol.com/technology/marketplaces), [the risks](https://blog.oceanprotocol.com/on-staking-on-data-in-ocean-market-3d8e09eb0a13), and the [Terms of Use](/terms)."
   }
 }

src/components/Layout.module.css

@@ -14,8 +14,12 @@
 }
 
 .main {
-  padding: var(--spacer) 0 calc(var(--spacer) * 2) 0;
+  padding: calc(var(--spacer) * 2) 0;
 
   /* sticky footer technique */
   flex: 1;
 }
+
+.banner {
+  margin-bottom: -2rem !important;
+}

src/components/Layout.tsx

@@ -6,6 +6,7 @@ import styles from './Layout.module.css'
 import Seo from './atoms/Seo'
 import Container from './atoms/Container'
 import Alert from './atoms/Alert'
+import { useSiteMetadata } from '../hooks/useSiteMetadata'
 
 export interface LayoutProps {
   children: ReactNode
@@ -24,16 +25,17 @@ export default function Layout({
   noPageHeader,
   headerCenter
 }: LayoutProps): ReactElement {
+  const { warning } = useSiteMetadata()
+
   return (
     <div className={styles.app}>
       <Seo title={title} description={description} uri={uri} />
 
       <Header />
 
-      <Alert
+      {uri === '/' && (
-        text="Given the beta status, publishing on Rinkeby first is strongly recommended. [Learn about the market](https://oceanprotocol.com/technology/marketplaces)."
+        <Alert text={warning} state="info" className={styles.banner} />
-        state="info"
+      )}
-      />
 
       <main className={styles.main}>
         <Container>

src/components/organisms/Footer.tsx

@@ -2,6 +2,7 @@ import React, { ReactElement } from 'react'
 import styles from './Footer.module.css'
 import Markdown from '../atoms/Markdown'
 import { useSiteMetadata } from '../../hooks/useSiteMetadata'
+import { Link } from 'gatsby'
 
 export default function Footer(): ReactElement {
   const { copyright } = useSiteMetadata()
@@ -10,7 +11,9 @@ export default function Footer(): ReactElement {
   return (
     <footer className={styles.footer}>
       <div className={styles.content}>
-        © {year} <Markdown text={copyright} />
+        © {year} <Markdown text={copyright} /> — <Link to="/terms">Terms</Link>
+        {' — '}
+        <a href="https://oceanprotocol.com/privacy">Privacy</a>
       </div>
     </footer>
   )

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

@@ -4,6 +4,12 @@
   position: relative;
 }
 
+.alert,
+div.alert {
+  margin-bottom: var(--spacer);
+  margin-left: 0;
+}
+
 @media (min-width: 55rem) {
   .grid {
     /* lazy golden ratio */

src/components/pages/Publish/index.tsx

@@ -14,13 +14,14 @@ import { DDO, Logger, Metadata } from '@oceanprotocol/lib'
 import { Persist } from '../../atoms/FormikPersist'
 import Debug from './Debug'
 import Feedback from './Feedback'
+import Alert from '../../atoms/Alert'
 
 const formName = 'ocean-publish-form'
 
 export default function PublishPage({
   content
 }: {
-  content: { form: FormContent }
+  content: { warning: string; form: FormContent }
 }): ReactElement {
   const { debug } = useUserPreferences()
   const { publish, publishError, isLoading, publishStepText } = usePublish()
@@ -97,15 +98,23 @@ export default function PublishPage({
               setError={setError}
             />
           ) : (
-            <article className={styles.grid}>
+            <>
-              <FormPublish content={content.form} />
+              <Alert
-              <aside>
+                text={content.warning}
-                <div className={styles.sticky}>
+                state="info"
-                  <Preview values={values} />
+                className={styles.alert}
-                  <Web3Feedback />
+              />
-                </div>
+              <article className={styles.grid}>
-              </aside>
+                <FormPublish content={content.form} />
-            </article>
+
+                <aside>
+                  <div className={styles.sticky}>
+                    <Preview values={values} />
+                    <Web3Feedback />
+                  </div>
+                </aside>
+              </article>
+            </>
           )}
 
           {debug === true && <Debug values={values} />}

src/hooks/useSiteMetadata.ts

@@ -13,6 +13,7 @@ const query = graphql`
           name
           link
         }
+        warning
         appConfig {
           infuraProjectId
           network

src/pages/publish.tsx

@@ -22,6 +22,7 @@ export const contentQuery = graphql`
           childPagesJson {
             title
             description
+            warning
             form {
               title
               data {