style updates

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 !== '' && (

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;
+  padding: var(--spacer) 0;
-  justify-content: center;
-  align-items: center;
 }
 
 .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;

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)