From 9dca4a09677dd2d865ada4724a039619953012ed Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Tue, 18 Oct 2022 19:14:49 +0100
Subject: [PATCH] style updates

---
 src/pages/index.tsx        | 10 ++++++----
 src/styles/Home.module.css | 17 ++++++++++++-----
 src/utils/getData.ts       |  1 +
 3 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index c7c491f..5995ee8 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -8,11 +8,11 @@ import CheckAsset from '../images/check.svg'
 
 function statusIcon(state: State): ReactElement {
   if (state === State.Up) {
-    return <CheckAsset className={styles.check} />
+    return <CheckAsset className={`${styles.icon} ${styles.check}`} />
   } else if (state === State.Down) {
-    return <>🚨</>
+    return <span className={styles.icon}>🚨</span>
   } else {
-    return <>🚧</>
+    return <span className={styles.icon}>🚧</span>
   }
 }
 
@@ -85,7 +85,9 @@ export default function HomePage(): ReactElement {
                           : value.status
                       )}{' '}
                       {key}
-                      <code className={styles.version}>{value.version}</code>
+                      <code className={styles.version} title="deployed version">
+                        {value.version}
+                      </code>
                     </h2>
 
                     {value.statusMessages && value.statusMessages !== '' && (
diff --git a/src/styles/Home.module.css b/src/styles/Home.module.css
index 2da5a5f..b9c81b9 100644
--- a/src/styles/Home.module.css
+++ b/src/styles/Home.module.css
@@ -3,10 +3,14 @@
   margin: 0 auto;
 }
 
+@media screen and (min-width: 50rem) {
+  .container {
+    padding: calc(var(--spacer) * 2);
+  }
+}
+
 .footer {
-  padding: 2rem 0;
-  justify-content: center;
-  align-items: center;
+  padding: var(--spacer) 0;
 }
 
 .title {
@@ -71,12 +75,15 @@
   margin: 0 auto;
 }
 
-.check {
+.icon {
   display: inline-block;
-  fill: var(--brand-alert-green);
   margin-right: calc(var(--spacer) / 6);
 }
 
+.check {
+  fill: var(--brand-alert-green);
+}
+
 .messages {
   list-style-type: square;
   margin-left: 1rem;
diff --git a/src/utils/getData.ts b/src/utils/getData.ts
index 6e0a6de..1ee7be6 100644
--- a/src/utils/getData.ts
+++ b/src/utils/getData.ts
@@ -12,6 +12,7 @@ export async function getData(): Promise<{ [key: string]: Status }> {
     const output = Object.fromEntries(
       response.data?.map((item) => [item.network, item])
     )
+    console.log('Got new data', output)
     return output
   } catch (error) {
     console.error(error.message)