styling fixes

MutinyWallet · Mar 8, 2024 · 9401d65 · 9401d65
1 parent 4c96feb
commit 9401d65
Show file tree

Hide file tree

Showing 9 changed files with 44 additions and 46 deletions.
diff --git a/src/components/Fab.tsx b/src/components/Fab.tsx
@@ -50,7 +50,7 @@ export function FabMenu(props: {
             class="fixed rounded-xl bg-neutral-700/30 px-2 backdrop-blur-lg"
             classList={{
                 "right-8 bottom-[calc(2rem+5rem)]": props.right,
-                "bottom-[calc(2rem+2rem)]": props.left
+                "left-2 bottom-[calc(2rem+2rem)]": props.left
             }}
         >
             {props.children}

diff --git a/src/components/HomeBalance.tsx b/src/components/HomeBalance.tsx
@@ -44,8 +44,7 @@ export function HomeBalance() {
                     </Match>
                     <Match when={state.balanceView === "hidden"}>
                         <div class="flex items-center gap-2">
-                            <Zap class="w-[18px]" />
-                            <span>***</span>
+                            <span>*****</span>
                         </div>
                     </Match>
                 </Switch>

diff --git a/src/components/OverlayScanner.tsx b/src/components/OverlayScanner.tsx
@@ -52,7 +52,7 @@ export function OverlayScanner(props: { onClose: () => void }) {
     });
 
     return (
-        <div class="fixed left-0 top-0 z-50 h-screen w-screen bg-black/30 backdrop-blur-lg transition-opacity">
+        <div class="fixed left-0 top-0 z-50 h-full w-full bg-black/30 backdrop-blur-lg transition-opacity">
             <Reader onResult={onResult} />
             <div class="fixed bottom-[2rem] flex w-full flex-col items-center gap-8 px-8">
                 <div class="flex w-full max-w-[400px] flex-col gap-2">

diff --git a/src/components/SetupErrorDisplay.tsx b/src/components/SetupErrorDisplay.tsx
@@ -1,5 +1,6 @@
 import { MutinyWallet } from "@mutinywallet/mutiny-wasm";
 import { Title } from "@solidjs/meta";
+import { MonitorSmartphone } from "lucide-solid";
 import { createResource, Match, Switch } from "solid-js";
 
 import nodevice from "~/assets/no-device.png";
@@ -126,15 +127,7 @@ export function SetupErrorDisplay(props: {
                         <LargeHeader>
                             {i18n.t("error.on_boot.existing_tab.title")}
                         </LargeHeader>
-                        <img
-                            src={nodevice}
-                            alt="no device"
-                            class="mx-auto w-1/4 max-w-[25vh] flex-shrink"
-                        />
-                        <p class="rounded-xl bg-white/10 p-4 font-mono">
-                            <span class="font-bold">{error.name}</span>:{" "}
-                            {error.message}
-                        </p>
+                        <MonitorSmartphone class="mx-auto h-1/4 w-1/4 max-w-[25vh]" />
                         <NiceP>
                             {i18n.t("error.on_boot.existing_tab.description")}
                         </NiceP>

diff --git a/src/components/layout/Misc.tsx b/src/components/layout/Misc.tsx
@@ -134,7 +134,7 @@ export const Collapser: ParentComponent<{
 
 export const SafeArea: ParentComponent = (props) => {
     return (
-        <div class="safe-left safe-right h-device">
+        <div class="flex flex-1 flex-col safe-left safe-right h-device">
             {/* <div class="flex-1 disable-scrollbars overflow-y-scroll md:pl-[8rem] md:pr-[6rem]"> */}
             {props.children}
             {/* </div> */}

diff --git a/src/root.css b/src/root.css
@@ -2,19 +2,24 @@
 @tailwind components;
 @tailwind utilities;
 
-body {
-    @apply text-white;
-    @apply flex min-h-[100dvh] flex-col overflow-y-scroll overscroll-none safe-top safe-bottom disable-scrollbars;
-    /* After load we need to remove the bg so the qr scanner can show through */
-    @apply !bg-transparent;
+* {
+    touch-action: manipulation;
 }
 
 html {
-    @apply h-[100dvh] overscroll-none;
+    @apply overscroll-none disable-scrollbars;
     @apply bg-m-grey-975;
+    /* @apply bg-pink-500; */
     /* @apply bg-black; */
 }
 
+body {
+    @apply text-white;
+    @apply flex flex-col safe-top safe-bottom;
+    /* After load we need to remove the bg so the qr scanner can show through */
+    @apply !bg-transparent;
+}
+
 #root {
     @apply flex flex-1 flex-col;
 }

diff --git a/src/routes/Chat.tsx b/src/routes/Chat.tsx
@@ -326,13 +326,13 @@ export function Chat() {
                     const a_time = isDirectMessage(a.content)
                         ? a.content.date
                         : isActivityItem(a.content)
-                        ? a.content.last_updated
-                        : 0;
+                          ? a.content.last_updated
+                          : 0;
                     const b_time = isDirectMessage(b.content)
                         ? b.content.date
                         : isActivityItem(b.content)
-                        ? b.content.last_updated
-                        : 0;
+                          ? b.content.last_updated
+                          : 0;
 
                     return b_time - a_time; // Descending order
                 });
@@ -452,7 +452,8 @@ export function Chat() {
 
     return (
         <MutinyWalletGuard>
-            <main class="mx-auto grid h-[100dvh] w-full max-w-[600px] grid-cols-1 grid-rows-[minmax(10px,1fr)_4rem] flex-col overflow-y-hidden safe-top safe-bottom">
+            {/* TODO: just make this a normal page with a fixed header and fixed footer */}
+            <main class="mx-auto grid w-full max-w-[600px] grid-cols-1 grid-rows-[minmax(10px,1fr)_4rem] flex-col overflow-y-hidden">
                 <div class="overflow-y-auto">
                     <div class="fixed top-0 z-50 flex w-full max-w-[600px] flex-col gap-2 bg-m-grey-975/70 p-4 backdrop-blur-lg">
                         <div class="flex w-full flex-col gap-2">
@@ -547,7 +548,7 @@ export function Chat() {
                         </Suspense>
                     </div>
                 </div>
-                <div class="grid grid-cols-[auto_1fr_auto] grid-rows-1 items-center gap-2 p-2">
+                <div class="fixed bottom-0 grid w-full max-w-[600px] grid-cols-[auto_1fr_auto] grid-rows-1 items-center gap-2 bg-m-grey-975/70 px-2 pb-4 pt-2 backdrop-blur-lg">
                     <MiniFab
                         onScan={() => navigate("/scanner")}
                         onSend={() => {

diff --git a/src/routes/Main.tsx b/src/routes/Main.tsx
@@ -81,7 +81,7 @@ export function Main() {
     const [scanner, setScanner] = createSignal(false);
 
     return (
-        <SafeArea>
+        <>
             <DefaultMain zeroBottomPadding={true}>
                 {/* <LoadingIndicator /> */}
                 <Show when={state.load_stage !== "done"}>
@@ -120,6 +120,6 @@ export function Main() {
             <DecryptDialog />
             <HomePrompt />
             <NavBar activeTab="home" />
-        </SafeArea>
+        </>
     );
 }
diff --git a/src/routes/Search.tsx b/src/routes/Search.tsx
@@ -51,24 +51,22 @@ import {
 export function Search() {
     return (
         <MutinyWalletGuard>
-            <SafeArea>
-                <DefaultMain zeroBottomPadding={true}>
-                    <div class="flex items-center justify-between">
-                        <BackLink />
-                        <A
-                            class="rounded-lg p-2 hover:bg-white/5 active:bg-m-blue md:hidden"
-                            href="/scanner"
-                        >
-                            <Scan class="h-6 w-6" />
-                        </A>{" "}
-                    </div>
-                    {/* Need to put the search view in a supsense so it loads list on first nav */}
-                    <Suspense>
-                        <ActualSearch />
-                    </Suspense>
-                </DefaultMain>
-                <NavBar activeTab="send" />
-            </SafeArea>
+            <DefaultMain zeroBottomPadding={true}>
+                <div class="flex items-center justify-between">
+                    <BackLink />
+                    <A
+                        class="rounded-lg p-2 hover:bg-white/5 active:bg-m-blue md:hidden"
+                        href="/scanner"
+                    >
+                        <Scan class="h-6 w-6" />
+                    </A>{" "}
+                </div>
+                {/* Need to put the search view in a supsense so it loads list on first nav */}
+                <Suspense>
+                    <ActualSearch />
+                </Suspense>
+            </DefaultMain>
+            <NavBar activeTab="send" />
         </MutinyWalletGuard>
     );
 }
@@ -279,6 +277,8 @@ function ActualSearch(props: { initialValue?: string }) {
                     onInput={(e) => setSearchValue(e.currentTarget.value)}
                     placeholder="Name, address, invoice..."
                     autofocus
+                    autocomplete="off"
+                    autocorrect="off"
                     ref={(el) => (searchInputRef = el)}
                 />
                 <Show when={!searchValue()}>