From cbe199ccdd2a6b3c6f9f4889f3da144449159ebb Mon Sep 17 00:00:00 2001
From: CoolElectronics <me@coolelectronics.me>
Date: Mon, 14 Aug 2023 18:50:39 -0400
Subject: [PATCH] improve visuals for dev ui

---
 frontend/src/App.svelte | 27 ++++++++++++++++++---------
 1 file changed, 18 insertions(+), 9 deletions(-)

diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte
index 562bf89..076d30f 100644
--- a/frontend/src/App.svelte
+++ b/frontend/src/App.svelte
@@ -210,15 +210,21 @@
     </div>
   </div>
 {:else}
-  <h1>Adrift dev menu</h1>
-  <Button type="tonal" on:click={connectDevHttp}
-    >Connect with WebRTC transport over localhost HTTP signaling</Button
-  >
-  <br />
-  <br />
-  <Button type="tonal" on:click={connectDevWS}
-    >Connect with localhost websocket transport</Button
-  >
+  <div class="flex items-center justify-center h-full">
+    <Card type="elevated">
+      <div class="flex flex-col h-full">
+        <h2 class="m3-font-headline-large m-3">Adrift DEV</h2>
+        <div class="flex space-evenly pad-children">
+          <Button type="filled" on:click={connectDevHttp}
+            >Connect with WebRTC transport over localhost HTTP signaling</Button
+          >
+          <Button type="filled" on:click={connectDevWS}
+            >Connect with localhost websocket transport</Button
+          >
+        </div>
+      </div>
+    </Card>
+  </div>
 {/if}
 
 <StyleFromScheme
@@ -303,6 +309,9 @@
 />
 
 <style>
+  :global(.pad-children > *) {
+    margin: 2rem;
+  }
   #loginpage {
     padding: 2.5em;
   }