More footer links (#1322)

* tweaked footer layout

* add more links

* source links from content file

content/footer.json

@@ -0,0 +1,16 @@
+{
+  "links": [
+    {
+      "name": "Docs",
+      "url": "https://docs.oceanprotocol.com"
+    },
+    {
+      "name": "GitHub",
+      "url": "https://github.com/oceanprotocol"
+    },
+    {
+      "name": "Discord",
+      "url": "https://discord.gg/TnXjkR5"
+    }
+  ]
+}

src/components/Footer/BuildId.module.css

@@ -1,6 +1,7 @@
 .buildId {
-  display: inline-block;
+  display: block;
   font-size: var(--font-size-mini);
   margin-bottom: var(--spacer);
   font-family: var(--font-family-monospace);
+  text-align: center;
 }

src/components/Footer/Footer.module.css

@@ -1,38 +1,57 @@
-.content {
+.footer {
   padding: var(--spacer) calc(var(--spacer) / 2);
   margin-left: auto;
   margin-right: auto;
   max-width: var(--layout-max-width);
+  color: var(--brand-grey-light);
+  font-size: var(--font-size-small);
 }
 
-.content a,
-.content button {
+.footer a,
+.footer button {
   color: inherit;
 }
 
-.content button {
+.footer button {
   text-transform: none;
   transform: none !important;
   font-weight: var(--font-weight-normal);
 }
 
-.content a:hover,
-.content a:focus,
-.content button:hover,
-.content button:focus {
+.footer a:hover,
+.footer a:focus,
+.footer button:hover,
+.footer button:focus {
   color: var(--color-primary);
 }
 
-.content p {
+.copyright > div,
+.copyright > div > p {
   display: inline;
 }
 
-.copyright div {
-  display: inline-block;
-}
-
-.footer {
-  color: var(--brand-grey-light);
-  font-size: var(--font-size-small);
+.copyright,
+.grid > div:first-child {
   text-align: center;
 }
+
+.grid {
+  display: grid;
+  gap: var(--spacer);
+}
+
+@media (min-width: 40rem) {
+  .grid {
+    display: grid;
+    gap: var(--spacer);
+    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+  }
+
+  .grid > div:first-child {
+    text-align: left;
+  }
+
+  .copyright {
+    text-align: right;
+  }
+}

src/components/Footer/Footer.tsx

@@ -2,56 +2,23 @@ import React, { ReactElement } from 'react'
 import styles from './Footer.module.css'
 import Markdown from '@shared/Markdown'
 import { useSiteMetadata } from '@hooks/useSiteMetadata'
-import Link from 'next/link'
 import MarketStats from './MarketStats'
 import BuildId from './BuildId'
-import { useUserPreferences } from '@context/UserPreferences'
-import Button from '@shared/atoms/Button'
-import { useGdprMetadata } from '@hooks/useGdprMetadata'
+import Links from './Links'
 
 export default function Footer(): ReactElement {
-  const { copyright, appConfig } = useSiteMetadata()
-  const { setShowPPC } = useUserPreferences()
-  const { privacyPolicySlug } = useUserPreferences()
-
-  const cookies = useGdprMetadata()
-
+  const { copyright } = useSiteMetadata()
   const year = new Date().getFullYear()
 
   return (
     <footer className={styles.footer}>
-      <div className={styles.content}>
       <BuildId />
       <MarketStats />
+
+      <div className={styles.grid}>
+        <Links />
         <div className={styles.copyright}>
           © {year} <Markdown text={copyright} />
-          <br />
-          <Link href="/imprint">
-            <a>Imprint</a>
-          </Link>
-          {' — '}
-          <Link href="/terms">
-            <a>Terms</a>
-          </Link>
-          {' — '}
-          <Link href={privacyPolicySlug}>
-            <a>Privacy</a>
-          </Link>
-          {appConfig.privacyPreferenceCenter === 'true' && (
-            <>
-              {' — '}
-              <Button
-                style="text"
-                size="small"
-                className="link"
-                onClick={() => {
-                  setShowPPC(true)
-                }}
-              >
-                {cookies.optionalCookies ? 'Cookie Settings' : 'Cookies'}
-              </Button>
-            </>
-          )}
         </div>
       </div>
     </footer>

src/components/Footer/Links.module.css

@@ -0,0 +1,12 @@
+.links a {
+  text-transform: none;
+  font-family: var(--font-family-base);
+  font-weight: var(--font-weight-base);
+}
+
+.links svg {
+  display: inline;
+  fill: currentColor;
+  width: 0.6em;
+  height: 0.6em;
+}

src/components/Footer/Links.tsx

@@ -0,0 +1,55 @@
+import { useUserPreferences } from '@context/UserPreferences'
+import { useGdprMetadata } from '@hooks/useGdprMetadata'
+import { useSiteMetadata } from '@hooks/useSiteMetadata'
+import Button from '@shared/atoms/Button'
+import Link from 'next/link'
+import React from 'react'
+import content from '../../../content/footer.json'
+import External from '@images/external.svg'
+import styles from './Links.module.css'
+
+export default function Links() {
+  const { appConfig } = useSiteMetadata()
+  const { setShowPPC, privacyPolicySlug } = useUserPreferences()
+  const cookies = useGdprMetadata()
+
+  return (
+    <div className={styles.links}>
+      {content.links.map(({ name, url }) => (
+        <>
+          <Button style="text" size="small" href={url}>
+            {name} <External />
+          </Button>
+          {' — '}
+        </>
+      ))}
+
+      <Link href="/imprint">
+        <a>Imprint</a>
+      </Link>
+      {' — '}
+      <Link href="/terms">
+        <a>Terms</a>
+      </Link>
+      {' — '}
+      <Link href={privacyPolicySlug}>
+        <a>Privacy</a>
+      </Link>
+      {appConfig.privacyPreferenceCenter === 'true' && (
+        <>
+          {' — '}
+          <Button
+            style="text"
+            size="small"
+            className="link"
+            onClick={() => {
+              setShowPPC(true)
+            }}
+          >
+            {cookies.optionalCookies ? 'Cookie Settings' : 'Cookies'}
+          </Button>
+        </>
+      )}
+    </div>
+  )
+}

src/components/Footer/MarketStats/index.module.css

@@ -1,5 +1,6 @@
 .stats {
   margin-bottom: calc(var(--spacer) * 2);
+  text-align: center;
 }
 
 /* specificity sledgehammer override without !important */