Displaying available networks and updating styling

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>
               ))}
             </>

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;
 }