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 (
-
-
- {connecting && !device &&
Trying to connect}
- {device == null && !connecting && (
-
- )}
- {device && (
- <>
-
connected
-
- {doorOpen != null &&
{doorOpen ? "open" : "closed"}}
- >
- )}
+
+
+ Autoconnect:
+
+
+
+ {connecting && !device && Trying to connect}
+ {device == null && !connecting && (
+
+ )}
+ {device && (
+ <>
+ Connected
+
+ >
+ )}
+
+
+ {doorOpen != null && Door: {doorOpen ? "open" : "closed"}}
+
);
}
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;
+}