From 15c3bf80b7db9dfe333c49bba0183082c65dbe20 Mon Sep 17 00:00:00 2001
From: Paul Miller <paul@paul.lol>
Date: Mon, 10 Apr 2023 17:34:28 -0500
Subject: [PATCH] a taste of desktop friendliness

---
 src/components/App.tsx      |  2 +-
 src/components/NavBar.tsx   | 43 ++++++++++++++++++++-----------------
 src/components/Reload.tsx   |  2 --
 src/components/SafeArea.tsx |  2 +-
 src/routes/Scanner.tsx      |  8 +++----
 src/routes/Settings.tsx     |  2 +-
 6 files changed, 29 insertions(+), 30 deletions(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index f621694..563f673 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -10,7 +10,7 @@ import KitchenSink from './KitchenSink';
 export default function App() {
     return (
         <SafeArea>
-            <main class='flex flex-col gap-4 py-8 px-4'>
+            <main class='flex flex-col gap-4 py-8 px-4 max-w-[800px] mx-auto'>
                 <header>
                     <img src={logo} class="App-logo" alt="logo" />
                 </header>
diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
index 61b5d52..9c6e97d 100644
--- a/src/components/NavBar.tsx
+++ b/src/components/NavBar.tsx
@@ -7,24 +7,27 @@ import { A } from "solid-start";
 type ActiveTab = 'home' | 'scan' | 'settings' | 'none';
 
 export default function NavBar(props: { activeTab: ActiveTab }) {
-    const activeStyle = 'h-full border-t-2 border-b-2 border-b-black flex flex-col justify-center'
-    return (<nav class='bg-black fixed bottom-0 shadow-lg z-40 w-full safe-bottom'>
-        <ul class='h-16 flex justify-between px-16 items-center'>
-            <li class={props.activeTab === "home" ? activeStyle : ""}>
-                <A href="/">
-                    <img src={mutiny_m} alt="home" />
-                </A>
-            </li>
-            <li class={props.activeTab === "scan" ? activeStyle : ""}>
-                <A href="/scanner">
-                    <img src={scan} alt="scan" />
-                </A>
-            </li>
-            <li class={props.activeTab === "settings" ? activeStyle : ""}>
-                <A href="/settings">
-                    <img src={settings} alt="settings" />
-                </A>
-            </li>
-        </ul>
-    </nav>)
+    const activeStyle = 'h-full border-t-2 border-b-2 border-b-black flex flex-col justify-center md:border-t-0 md:border-b-0 md:p-2 md:bg-white/20 md:rounded-xl'
+    const inactiveStyle = "md:p-2 md:hover:bg-white/10 md:rounded-xl"
+    return (
+        <nav class='bg-black fixed bottom-0 shadow-lg z-40 w-full safe-bottom md:top-0 md:bottom-auto md:left-0 md:w-auto md:h-full'>
+            <ul class='h-16 flex justify-between px-16 items-center md:flex-col md:justify-start md:gap-4 md:px-4 md:mt-4'>
+                <li class={props.activeTab === "home" ? activeStyle : inactiveStyle}>
+                    <A href="/">
+                        <img src={mutiny_m} alt="home" />
+                    </A>
+                </li>
+                <li class={props.activeTab === "scan" ? activeStyle : inactiveStyle}>
+                    <A href="/scanner">
+                        <img src={scan} alt="scan" />
+                    </A>
+                </li>
+                <li class={props.activeTab === "settings" ? activeStyle : inactiveStyle}>
+                    <A href="/settings">
+                        <img src={settings} alt="settings" />
+                    </A>
+                </li>
+            </ul>
+        </nav >
+    )
 }
\ No newline at end of file
diff --git a/src/components/Reload.tsx b/src/components/Reload.tsx
index a5d6aba..0b2de17 100644
--- a/src/components/Reload.tsx
+++ b/src/components/Reload.tsx
@@ -1,7 +1,5 @@
 import type { Component } from 'solid-js'
 import { Show } from 'solid-js'
-// pwa-register doesn't have types apparently
-// @ts-ignore
 import { useRegisterSW } from 'virtual:pwa-register/solid'
 import Card from './Card'
 import { Button } from './Button'
diff --git a/src/components/SafeArea.tsx b/src/components/SafeArea.tsx
index af411b2..64832d0 100644
--- a/src/components/SafeArea.tsx
+++ b/src/components/SafeArea.tsx
@@ -3,7 +3,7 @@ import { JSX } from "solid-js";
 export default function SafeArea(props: { children: JSX.Element }) {
     return (
         <div class="safe-top safe-left safe-right safe-bottom">
-            <div class="disable-scrollbars max-h-screen h-full overflow-y-scroll">
+            <div class="disable-scrollbars max-h-screen h-full overflow-y-scroll md:pl-[8rem] md:pr-[6rem]">
                 {props.children}
             </div>
         </div >
diff --git a/src/routes/Scanner.tsx b/src/routes/Scanner.tsx
index 5f3c231..f607702 100644
--- a/src/routes/Scanner.tsx
+++ b/src/routes/Scanner.tsx
@@ -27,19 +27,17 @@ export default function Scanner() {
                     </div>
                 </div>
             </Show>
-            <div class="w-full flex flex-col fixed bottom-[2rem] gap-8 px-8">
+            <div class="w-full flex flex-col items-center fixed bottom-[2rem] gap-8 px-8 bg-pink-500">
                 <Show when={scanResult()}
                     fallback={
-                        <>
+                        <div class="w-full max-w-[800px] flex flex-col gap-2">
                             <Button intent="blue" onClick={exit}>Paste Something</Button>
                             <Button onClick={exit}>Cancel</Button>
-                        </>
+                        </div>
                     }>
                     <Button intent="red" onClick={() => setScanResult(null)}>Try Again</Button>
                     <Button onClick={exit}>Cancel</Button>
-
                 </Show>
-
             </div>
         </>
     );
diff --git a/src/routes/Settings.tsx b/src/routes/Settings.tsx
index b9e9def..dc1e065 100644
--- a/src/routes/Settings.tsx
+++ b/src/routes/Settings.tsx
@@ -32,7 +32,7 @@ export default function Settings() {
 
     return (
         <SafeArea>
-            <main class='flex flex-col gap-4 py-8 px-4'>
+            <main class='flex flex-col gap-4 py-8 px-4 max-w-[800px] mx-auto'>
                 <Button onClick={clearWaitlistId}>Clear waitlist_id</Button>
                 <Button onClick={setTestWaitlistId}>Use test waitlist_id</Button>
                 <Button onClick={resetNode}>Reset node</Button>