layout & style updates

next.config.js

@@ -1,7 +1,28 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {
-  reactStrictMode: true,
-  swcMinify: true,
-}
+module.exports = (phase, { defaultConfig }) => {
+  /**
+   * @type {import('next').NextConfig}
+   */
+  const nextConfig = {
+    webpack: (config, options) => {
+      config.module.rules.push(
+        {
+          test: /\.svg$/,
+          issuer: /\.(tsx|ts)$/,
+          use: [{ loader: '@svgr/webpack', options: { icon: true } }]
+        },
+        {
+          test: /\.gif$/,
+          // yay for webpack 5
+          // https://webpack.js.org/guides/asset-management/#loading-images
+          type: 'asset/resource'
+        }
+      )
 
-module.exports = nextConfig
+      return typeof defaultConfig.webpack === 'function'
+        ? defaultConfig.webpack(config, options)
+        : config
+    }
+  }
+
+  return nextConfig
+}

package.json

@@ -9,6 +9,8 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@oceanprotocol/typographies": "^0.1.0",
+    "@svgr/webpack": "^6.5.0",
     "axios": "^0.27.2",
     "dotenv": "^16.0.3",
     "next": "12.3.1",

src/pages/_app.tsx

@@ -1,3 +1,4 @@
+import '@oceanprotocol/typographies/css/ocean-typo.css'
 import '../styles/globals.css'
 import type { AppProps } from 'next/app'
 

src/pages/index.tsx

@@ -3,40 +3,33 @@ import React, { ReactElement, useEffect, useState } from 'react'
 import { Status, State, Summary, NetworkSummary } from '../@types'
 import styles from '../styles/Home.module.css'
 import { getData, getNetworkSUmmary, getSummary } from '../utils/getData'
-import Logo from '../images/logo.svg'
-import Image from 'next/image'
+import LogoAsset from '../images/logo.svg'
+
+function statusIcon(state: State): string {
+  if (state === State.Up) {
+    return '✅'
+  } else if (state === State.Down) {
+    return '🚨'
+  } else {
+    return '🚧'
+  }
+}
+
+function statusStyle(state: State) {
+  if (state === State.Down) {
+    return styles.down
+  } else if (state === State.Warning) {
+    return styles.warning
+  } else {
+    return styles.up
+  }
+}
 
 export default function HomePage(): ReactElement {
-  const [network, setNetwork] = useState<string>('mainnet')
+  const [network, setNetwork] = useState('mainnet')
   const [summary, setSummary] = useState<Summary[]>()
   const [networks, setNetworks] = useState<NetworkSummary[]>()
 
-  function statusIcon(state: State): string {
-    if (state === State.Up) {
-      return '✅'
-    } else if (state === State.Down) {
-      return '🚨'
-    } else {
-      return '🚧'
-    }
-  }
-
-  function statusStyle(state: State) {
-    if (state === State.Down) {
-      return styles.down
-    } else if (state === State.Warning) {
-      return styles.warning
-    } else {
-      return styles.up
-    }
-  }
-
-  function networkStyle(currentNet: string) {
-    if (currentNet === network) {
-      return styles.networkSelected
-    } else return styles.networkUnselected
-  }
-
   useEffect(() => {
     async function getStatuses() {
       const statusData = await getData()
@@ -56,33 +49,19 @@ export default function HomePage(): ReactElement {
         <link rel="icon" href="/favicon.ico" />
       </Head>
       <main className={styles.main}>
-        <Image src={Logo} height="80rem" />
-        {/* <img src={require('../images/logo.svg')} alt="Ocean Protocol Logo" /> */}
+        <LogoAsset className={styles.logo} />
+
         <h1 className={styles.title}>Ocean Status</h1>
         <p className={styles.description}>
           Current Status of Ocean Components{' '}
         </p>
-        <div className={styles.grid}>
-          {networks && (
-            <>
-              {networks.map((network: NetworkSummary, i: number) => (
-                <button
-                  key={i}
-                  className={`${styles.network} ${networkStyle(network.name)}`}
-                  onClick={() => setNetwork(network.name)}
-                >
-                  <span>
-                    {network.name} {statusIcon(network.status)}
-                  </span>
-                </button>
-              ))}
-            </>
-          )}
-        </div>
-        <div className={styles.grid}>
-          {summary && (
-            <>
-              {summary.map((value: Summary) => (
+
+        {networks?.map((network: NetworkSummary, i: number) => (
+          <>
+            <h2>{network.name}</h2>
+
+            <div className={styles.grid}>
+              {summary?.map((value: Summary) => (
                 <div
                   key={value.component}
                   className={`${styles.card} ${statusStyle(value.status)}`}
@@ -91,9 +70,18 @@ export default function HomePage(): ReactElement {
                   <p>{value?.status}</p>
                 </div>
               ))}
-            </>
-          )}
-        </div>
+            </div>
+          </>
+          // <button
+          //   key={i}
+          //   className={`${styles.network} ${networkStyle(network.name)}`}
+          //   onClick={() => setNetwork(network.name)}
+          // >
+          //   <span>
+          //     {network.name} {statusIcon(network.status)}
+          //   </span>
+          // </button>
+        ))}
       </main>
 
       <footer className={styles.footer}></footer>

src/styles/Home.module.css

@@ -1,38 +1,27 @@
 .container {
   padding: 0 2rem;
+  margin: 0 auto;
+  max-width: 40rem;
 }
 
 .main {
   min-height: 100vh;
   padding: 2rem 0;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
   font-family: 'Sharp Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
     Helvetica, Arial, sans-serif;
 }
 
 .footer {
-  display: flex;
-  flex: 1;
   padding: 2rem 0;
   border-top: 1px solid #eaeaea;
   justify-content: center;
   align-items: center;
 }
 
-.footer a {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-grow: 1;
-}
-
 .title {
   margin: 0;
   line-height: 1.15;
-  font-size: 4rem;
+  font-size: 3rem;
 }
 
 .title,
@@ -132,8 +121,10 @@
 }
 
 .logo {
-  height: 1em;
-  margin-left: 0.5rem;
+  fill: var(--font-color-heading);
+  height: 3rem;
+  width: 3rem;
+  margin: 0 auto;
 }
 
 @media (max-width: 600px) {
@@ -142,16 +133,3 @@
     flex-direction: column;
   }
 }
-
-@media (prefers-color-scheme: dark) {
-  .card,
-  .footer {
-    border-color: #222;
-  }
-  .code {
-    background: #111;
-  }
-  .logo img {
-    filter: invert(1);
-  }
-}

src/utils/getData.ts

@@ -15,7 +15,7 @@ export async function getData(): Promise<Status[][]> {
 
     return data
   } catch (error) {
-    console.log(error)
+    console.error(error.message)
   }
 }
 
@@ -56,7 +56,7 @@ export function getSummary(network: string, data: Status[][]): Summary[] {
       return summary
     }
   } catch (error) {
-    console.log(error)
+    console.error(error.message)
   }
 }
 
@@ -66,11 +66,12 @@ export function getNetworkSUmmary(data: Status[][]): NetworkSummary[] {
   networks.forEach((network) => {
     const summary = getSummary(network, data)
     let status = State.Up
-    summary.forEach((service) => {
+
+    summary?.forEach((service) => {
       if (service.status === State.Down) return (status = State.Down)
     })
     if (status === State.Up) {
-      summary.forEach((service) => {
+      summary?.forEach((service) => {
         if (service.status === State.Warning) return (status = State.Warning)
       })
     }