From ca46f15d13f154a741de394708a93c40b7238b7a Mon Sep 17 00:00:00 2001
From: Jamie Hewitt <jamie.hewitt15@gmail.com>
Date: Mon, 10 Oct 2022 15:04:38 +0300
Subject: [PATCH] Displaying available networks and updating styling

---
 src/pages/index.tsx        |  4 ++--
 src/styles/Home.module.css | 20 +++++++++++++++++++-
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 9746f2d..78adda3 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -56,8 +56,8 @@ export default function HomePage(): ReactElement {
           {networks && (
             <>
               {networks.map((value: string) => (
-                <div key={value} className={`${styles.card}`}>
-                  <h2>{value}</h2>
+                <div key={value} className={`${styles.network}`}>
+                  {value}
                 </div>
               ))}
             </>
diff --git a/src/styles/Home.module.css b/src/styles/Home.module.css
index c5f343b..5cf38c4 100644
--- a/src/styles/Home.module.css
+++ b/src/styles/Home.module.css
@@ -86,7 +86,25 @@
   max-width: 300px;
   min-width: 150px;
 }
-
+.network {
+  display: inline-block;
+  border: 1px solid #e2e2e2;
+  border-radius: 0.2rem;
+  margin-right: calc(2rem / 6);
+  margin-bottom: calc(2rem / 6);
+  color: #8b98a9;
+  background: #fff;
+  padding: calc(2rem / 6) !important;
+  box-shadow: none;
+  cursor: pointer;
+  width: fit-content;
+  min-width: auto;
+  text-align: center;
+  text-transform: uppercase;
+  font-size: 0.85rem;
+  font-weight: 600;
+  transition: 0.2s ease-out;
+}
 .up {
   border: 2px solid #5fb359;
 }