From 657d583b28d3992065c1af7d8f91c1a091bffeed Mon Sep 17 00:00:00 2001
From: Stepan Usatiuk <stepanusatiuk@gmail.com>
Date: Tue, 19 Apr 2022 16:44:04 +0200
Subject: [PATCH] A less terrible UI

---
 door-thing-app/src/App.tsx   | 41 +++++++++++++++++++++---------------
 door-thing-app/src/index.css | 19 ++++++++++++++++-
 2 files changed, 42 insertions(+), 18 deletions(-)

diff --git a/door-thing-app/src/App.tsx b/door-thing-app/src/App.tsx
index 43165a6..4549c8f 100644
--- a/door-thing-app/src/App.tsx
+++ b/door-thing-app/src/App.tsx
@@ -120,23 +120,30 @@ export function App() {
   };
 
   return (
-    <div>
-      <input
-        onChange={onAutoConnectChange}
-        checked={autoConnect}
-        type="checkbox"
-      />
-      {connecting && !device && <span>Trying to connect</span>}
-      {device == null && !connecting && (
-        <button onClick={tryConnect}>Connect</button>
-      )}
-      {device && (
-        <>
-          <span>connected</span>
-          <button onClick={onDisconnectClick}>Disconnect</button>
-          {doorOpen != null && <span>{doorOpen ? "open" : "closed"}</span>}
-        </>
-      )}
+    <div class="connectionBar">
+      <div class="autoconnectSwitch">
+        Autoconnect:
+        <input
+          onChange={onAutoConnectChange}
+          checked={autoConnect}
+          type="checkbox"
+        />
+      </div>
+      <div class="connectionStatus">
+        {connecting && !device && <span>Trying to connect</span>}
+        {device == null && !connecting && (
+          <button onClick={tryConnect}>Connect</button>
+        )}
+        {device && (
+          <>
+            <span>Connected </span>
+            <button onClick={onDisconnectClick}>Disconnect</button>
+          </>
+        )}
+      </div>
+      <div>
+        {doorOpen != null && <span>Door: {doorOpen ? "open" : "closed"}</span>}
+      </div>
     </div>
   );
 }
diff --git a/door-thing-app/src/index.css b/door-thing-app/src/index.css
index 8856f90..9f6f7e5 100644
--- a/door-thing-app/src/index.css
+++ b/door-thing-app/src/index.css
@@ -1,7 +1,24 @@
 body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
     Arial, sans-serif;
   margin: auto;
   max-width: 38rem;
   padding: 2rem;
 }
+
+.connectionBar {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.autoconnectSwitch {
+  width: 100%;
+}
+
+.connectionStatus {
+  width: 100%;
+}
+
+.connectionBar >* {
+  height: 2rem;
+}