ui consistency

package-lock.json

@@ -8,6 +8,7 @@
       "name": "status-frontend",
       "version": "0.1.0",
       "dependencies": {
+        "@oceanprotocol/art": "^3.2.0",
         "@oceanprotocol/contracts": "^1.1.7",
         "@oceanprotocol/typographies": "^0.1.0",
         "@svgr/webpack": "^6.5.0",
@@ -2833,6 +2834,11 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@oceanprotocol/art": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@oceanprotocol/art/-/art-3.2.0.tgz",
+      "integrity": "sha512-aUQtg4m5hJlQ0u8C29O9TXJWcAenO3G9vP+vf6LNFkpTDOCMycN/F0SzHS89VNrvGUha8oTDEg7FAkfZBPv2WA=="
+    },
     "node_modules/@oceanprotocol/contracts": {
       "version": "1.1.7",
       "resolved": "https://registry.npmjs.org/@oceanprotocol/contracts/-/contracts-1.1.7.tgz",
@@ -8494,6 +8500,11 @@
         "fastq": "^1.6.0"
       }
     },
+    "@oceanprotocol/art": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@oceanprotocol/art/-/art-3.2.0.tgz",
+      "integrity": "sha512-aUQtg4m5hJlQ0u8C29O9TXJWcAenO3G9vP+vf6LNFkpTDOCMycN/F0SzHS89VNrvGUha8oTDEg7FAkfZBPv2WA=="
+    },
     "@oceanprotocol/contracts": {
       "version": "1.1.7",
       "resolved": "https://registry.npmjs.org/@oceanprotocol/contracts/-/contracts-1.1.7.tgz",

package.json

@@ -11,6 +11,7 @@
     "test": "npm run lint"
   },
   "dependencies": {
+    "@oceanprotocol/art": "^3.2.0",
     "@oceanprotocol/contracts": "^1.1.7",
     "@oceanprotocol/typographies": "^0.1.0",
     "@svgr/webpack": "^6.5.0",

src/pages/index.tsx

@@ -29,11 +29,14 @@ function statusStyle(state: State) {
 
 export default function HomePage(): ReactElement {
   const [data, setData] = useState<{ [key: string]: Status }>()
+  const [isLoading, setIsloading] = useState<boolean>()
 
   useEffect(() => {
     async function getStatuses() {
+      setIsloading(true)
       const data = await getData()
       setData(data)
+      setIsloading(false)
     }
     getStatuses()
   }, [])
@@ -60,7 +63,10 @@ export default function HomePage(): ReactElement {
       </header>
 
       <main>
-        {Object.entries(data || {}).map(([key, value]) => {
+        {isLoading ? (
+          <div className={styles.loading}>Loading...</div>
+        ) : (
+          Object.entries(data || {}).map(([key, value]) => {
             const networkKey = key
 
             return (
@@ -120,7 +126,9 @@ export default function HomePage(): ReactElement {
 
                 <details className={styles.contracts}>
                   <summary>
-                  <h3 className={styles.titleComponent}>Deployed Contracts</h3>
+                    <h3 className={styles.titleComponent}>
+                      Deployed Contracts
+                    </h3>
                   </summary>
                   <ul>
                     {Object.entries((addresses as any)[networkKey]).map(
@@ -137,7 +145,8 @@ export default function HomePage(): ReactElement {
                 </details>
               </Fragment>
             )
-        })}
+          })
+        )}
       </main>
 
       <footer className={styles.footer}></footer>

src/styles/Home.module.css

@@ -1,6 +1,8 @@
 .container {
   padding: var(--spacer);
   margin: 0 auto;
+  background: url('../../node_modules/@oceanprotocol/art/waves/waves.svg')
+    no-repeat center 13.5rem;
 }
 
 @media screen and (min-width: 50rem) {
@@ -36,7 +38,7 @@
 }
 
 .networkName {
-  margin-top: calc(var(--spacer) * 2);
+  margin-top: calc(var(--spacer) * 3);
   text-transform: capitalize;
 }
 
@@ -45,8 +47,10 @@
   text-align: left;
   color: inherit;
   text-decoration: none;
+  background: var(--background-content);
   border-radius: var(--border-radius);
-  border: 2px solid var(--border-color);
+  box-shadow: 0 6px 17px 0 var(--box-shadow-color);
+  border: 1px solid var(--border-color);
 }
 
 .titleComponent {
@@ -72,7 +76,7 @@
   fill: var(--font-color-heading);
   height: 4rem;
   width: 4rem;
-  margin: 0 auto;
+  margin: 0 auto calc(var(--spacer) / 2) auto;
 }
 
 .icon {
@@ -110,3 +114,8 @@
 .contracts .titleComponent {
   display: inline-block;
 }
+
+.loading {
+  margin-top: 30vh;
+  text-align: center;
+}