From c396d21633751c98bc5a039972cccd3005e6fc7a Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Wed, 19 Oct 2022 20:56:12 +0100
Subject: [PATCH] contracts styling

---
 src/pages/index.tsx        | 13 ++++++++++---
 src/styles/Home.module.css | 38 +++++++++++++++++++++++++++++++++++---
 2 files changed, 45 insertions(+), 6 deletions(-)

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 5c20f92..b66082a 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -153,12 +153,19 @@ export default function HomePage(): ReactElement {
                   </summary>
                   <ul>
                     {Object.entries((addresses as any)[networkName]).map(
-                      ([key, value]) =>
+                      ([key, value]: [
+                        key: string,
+                        value: string | { [key: number]: string }
+                      ]) =>
                         key !== 'chainId' &&
                         key !== 'startBlock' && (
                           <li key={key}>
-                            <code className={styles.key}>{key}</code>:{' '}
-                            <code>{JSON.stringify(value)}</code>
+                            <code className={styles.key}>{key}</code>
+                            <code>
+                              {typeof value === 'string'
+                                ? value
+                                : JSON.stringify(value, null, 2)}
+                            </code>
                           </li>
                         )
                     )}
diff --git a/src/styles/Home.module.css b/src/styles/Home.module.css
index e6f06d6..6f3d2ae 100644
--- a/src/styles/Home.module.css
+++ b/src/styles/Home.module.css
@@ -47,7 +47,9 @@
 
 .networkName {
   margin-top: calc(var(--spacer) * 3);
+  margin-bottom: var(--spacer);
   text-transform: capitalize;
+  line-height: 1;
 }
 
 .card {
@@ -155,17 +157,47 @@
 
 .contracts {
   margin-top: var(--spacer);
-  margin-left: 1rem;
 }
 
 .contracts summary {
-  margin-left: -1rem;
   cursor: pointer;
 }
 
 .contracts .titleComponent {
   display: inline-block;
   width: auto;
+  margin-bottom: calc(var(--spacer) / 2);
+}
+
+.contracts li {
+  padding: calc(var(--spacer) / 6) calc(var(--spacer) / 2);
+  border-top: 1px solid var(--border-color);
+}
+
+.contracts li:hover {
+  background: var(--background-highlight);
+}
+
+.contracts li:last-child {
+  border-bottom: 1px solid var(--border-color);
+}
+
+.contracts li code {
+  display: block;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  white-space: pre-wrap;
+}
+
+@media screen and (min-width: 55rem) {
+  .contracts li {
+    display: grid;
+    grid-template-columns: 2fr 4fr;
+  }
+}
+
+.contracts .key {
+  font-weight: var(--font-weight-bold);
 }
 
 .loading {
@@ -174,7 +206,7 @@
 }
 
 .date {
-  display: inline-block;
+  display: inline;
   margin-left: calc(var(--spacer) / 4);
   font-size: var(--font-size-small);
   color: var(--color-secondary);