a taste of desktop friendliness

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>

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'
+    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'
-    return (<nav class='bg-black fixed bottom-0 shadow-lg z-40 w-full safe-bottom'>
+    const inactiveStyle = "md:p-2 md:hover:bg-white/10 md:rounded-xl"
-        <ul class='h-16 flex justify-between px-16 items-center'>
+    return (
-            <li class={props.activeTab === "home" ? activeStyle : ""}>
+        <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'>
-                <A href="/">
+            <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'>
-                    <img src={mutiny_m} alt="home" />
+                <li class={props.activeTab === "home" ? activeStyle : inactiveStyle}>
-                </A>
+                    <A href="/">
-            </li>
+                        <img src={mutiny_m} alt="home" />
-            <li class={props.activeTab === "scan" ? activeStyle : ""}>
+                    </A>
-                <A href="/scanner">
+                </li>
-                    <img src={scan} alt="scan" />
+                <li class={props.activeTab === "scan" ? activeStyle : inactiveStyle}>
-                </A>
+                    <A href="/scanner">
-            </li>
+                        <img src={scan} alt="scan" />
-            <li class={props.activeTab === "settings" ? activeStyle : ""}>
+                    </A>
-                <A href="/settings">
+                </li>
-                    <img src={settings} alt="settings" />
+                <li class={props.activeTab === "settings" ? activeStyle : inactiveStyle}>
-                </A>
+                    <A href="/settings">
-            </li>
+                        <img src={settings} alt="settings" />
-        </ul>
+                    </A>
-    </nav>)
+                </li>
+            </ul>
+        </nav >
+    )
 }

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'

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 >

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>
         </>
     );

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>