From b561578cb78d044595de95b5687f2657fc318a1d Mon Sep 17 00:00:00 2001
From: Dustin Carlino <dabreegster@gmail.com>
Date: Sun, 18 Aug 2024 12:54:27 +0100
Subject: [PATCH] Show component size colors

---
 web/src/App.svelte                | 2 +-
 web/src/DisconnectionsMode.svelte | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/web/src/App.svelte b/web/src/App.svelte
index bd1a33b..c4ced02 100644
--- a/web/src/App.svelte
+++ b/web/src/App.svelte
@@ -88,7 +88,7 @@
     <button class="outline" on:click={() => ($showAbout = true)}>
       <img src={logoDark} style="height: 6vh;" alt="A/B Street logo" />
     </button>
-    <span bind:this={topDiv} style="width: 100%" />
+    <span bind:this={topDiv} style="margin-left: 4px; width: 100%" />
   </div>
   <div slot="left">
     <h1>Severance Snape</h1>
diff --git a/web/src/DisconnectionsMode.svelte b/web/src/DisconnectionsMode.svelte
index 93ec82e..217798d 100644
--- a/web/src/DisconnectionsMode.svelte
+++ b/web/src/DisconnectionsMode.svelte
@@ -64,8 +64,8 @@
 
     <p>Component sizes:</p>
     <ul>
-      {#each gj.components as size}
-        <li>{size}</li>
+      {#each gj.components as size, idx}
+        <li style:color={colors[idx % colors.length]}>{size}</li>
       {/each}
     </ul>
   </div>