my css war ends in cease fire

MutinyWallet · Mar 11, 2024 · 256953b · 256953b
1 parent e669a96
commit 256953b
Show file tree

Hide file tree

Showing 8 changed files with 60 additions and 491 deletions.
diff --git a/src/components/ActualSearch.tsx b/src/components/ActualSearch.tsx
diff --git a/src/components/ErrorDisplay.tsx b/src/components/ErrorDisplay.tsx
@@ -5,10 +5,10 @@ import { onMount } from "solid-js";
 import { ExternalLink } from "~/components";
 import {
     Button,
+    DefaultMain,
     LargeHeader,
     NiceP,
-    SmallHeader,
-    VStack
+    SmallHeader
 } from "~/components/layout";
 import { useI18n } from "~/i18n/context";
 
@@ -27,7 +27,7 @@ export function ErrorDisplay(props: { error: Error }) {
         console.error(props.error);
     });
     return (
-        <VStack>
+        <DefaultMain>
             <Title>{i18n.t("error.general.oh_no")}</Title>
             <LargeHeader>{i18n.t("error.title")}</LargeHeader>
             <SmallHeader>
@@ -53,6 +53,6 @@ export function ErrorDisplay(props: { error: Error }) {
             <Button onClick={() => (window.location.href = "/")} intent="red">
                 {i18n.t("common.dangit")}
             </Button>
-        </VStack>
+        </DefaultMain>
     );
 }
diff --git a/src/components/SetupErrorDisplay.tsx b/src/components/SetupErrorDisplay.tsx
@@ -6,14 +6,14 @@ import { createResource, Match, Switch } from "solid-js";
 import nodevice from "~/assets/no-device.png";
 import {
     Button,
+    DefaultMain,
     DeleteEverything,
     ExternalLink,
     ImportExport,
     LargeHeader,
     Logs,
     NiceP,
-    SmallHeader,
-    VStack
+    SmallHeader
 } from "~/components";
 import { useI18n } from "~/i18n/context";
 import {
@@ -75,9 +75,11 @@ export function SetupErrorDisplay(props: {
     }
 
     return (
-        <Switch>
-            <Match when={error.message.startsWith("Network connection closed")}>
-                <VStack>
+        <DefaultMain>
+            <Switch>
+                <Match
+                    when={error.message.startsWith("Network connection closed")}
+                >
                     <LargeHeader>
                         {i18n.t("error.on_boot.loading_failed.header")}
                     </LargeHeader>
@@ -109,11 +111,9 @@ export function SetupErrorDisplay(props: {
                     </NiceP>
 
                     <ErrorFooter />
-                </VStack>
-            </Match>
-            <Match when={error.message.startsWith("Existing tab")}>
-                <Title>{i18n.t("error.on_boot.existing_tab.title")}</Title>
-                <VStack>
+                </Match>
+                <Match when={error.message.startsWith("Existing tab")}>
+                    <Title>{i18n.t("error.on_boot.existing_tab.title")}</Title>
                     <LargeHeader>
                         {i18n.t("error.on_boot.existing_tab.title")}
                     </LargeHeader>
@@ -125,11 +125,13 @@ export function SetupErrorDisplay(props: {
                         {i18n.t("error.reload")}
                     </Button>
                     <ErrorFooter />
-                </VStack>
-            </Match>
-            <Match when={error.message.startsWith("Mutiny is already running")}>
-                <Title>{i18n.t("error.on_boot.already_running.title")}</Title>
-                <VStack>
+                </Match>
+                <Match
+                    when={error.message.startsWith("Mutiny is already running")}
+                >
+                    <Title>
+                        {i18n.t("error.on_boot.already_running.title")}
+                    </Title>
                     <LargeHeader>
                         {i18n.t("error.on_boot.already_running.title")}
                     </LargeHeader>
@@ -154,13 +156,11 @@ export function SetupErrorDisplay(props: {
                         {i18n.t("error.reload")}
                     </Button>
                     <ErrorFooter />
-                </VStack>
-            </Match>
-            <Match when={error.message.startsWith("Browser error")}>
-                <Title>
-                    {i18n.t("error.on_boot.incompatible_browser.title")}
-                </Title>
-                <VStack>
+                </Match>
+                <Match when={error.message.startsWith("Browser error")}>
+                    <Title>
+                        {i18n.t("error.on_boot.incompatible_browser.title")}
+                    </Title>
                     <LargeHeader>
                         {i18n.t("error.on_boot.incompatible_browser.header")}
                     </LargeHeader>
@@ -190,11 +190,11 @@ export function SetupErrorDisplay(props: {
                     </ExternalLink>
 
                     <ErrorFooter />
-                </VStack>
-            </Match>
-            <Match when={true}>
-                <Title>{i18n.t("error.on_boot.loading_failed.title")}</Title>
-                <VStack>
+                </Match>
+                <Match when={true}>
+                    <Title>
+                        {i18n.t("error.on_boot.loading_failed.title")}
+                    </Title>
                     <LargeHeader>
                         {i18n.t("error.on_boot.loading_failed.header")}
                     </LargeHeader>
@@ -229,8 +229,8 @@ export function SetupErrorDisplay(props: {
                     </div>
 
                     <ErrorFooter />
-                </VStack>
-            </Match>
-        </Switch>
+                </Match>
+            </Switch>
+        </DefaultMain>
     );
 }
diff --git a/src/components/index.ts b/src/components/index.ts
@@ -53,7 +53,6 @@ export * from "./SharpButton";
 export * from "./HomeSubnav";
 export * from "./OverlayScanner";
 export * from "./SocialActionRow";
-export * from "./ActualSearch";
 export * from "./ContactButton";
 export * from "./GenericItem";
 export * from "./HomeBalance";
diff --git a/src/components/layout/Misc.tsx b/src/components/layout/Misc.tsx
@@ -134,10 +134,16 @@ export const Collapser: ParentComponent<{
 
 export const DefaultMain = (props: { children?: JSX.Element }) => {
     return (
-        <main class="flex h-full flex-1 flex-col gap-4">
-            {props.children}
-            <div class="h-4" />
-        </main>
+        <>
+            {/* blur content that goes under the notification bar */}
+            <div class="relative">
+                <div class="backgrop-blur-lg fixed left-0 right-0 top-0 z-50 bg-m-grey-975/70 safe-top" />
+            </div>
+            <main class="flex h-full flex-1 flex-col gap-4 px-4 pb-8 pt-4">
+                {props.children}
+                <div class="h-4" />
+            </main>
+        </>
     );
 };
 
@@ -173,7 +179,9 @@ export const MutinyWalletGuard: ParentComponent = (props) => {
                     {props.children}
                 </Match>
                 <Match when={true}>
-                    <LoadingIndicator />
+                    <DefaultMain>
+                        <LoadingIndicator />
+                    </DefaultMain>
                 </Match>
             </Switch>
             <DecryptDialog />

diff --git a/src/root.css b/src/root.css
@@ -7,15 +7,16 @@
 }
 
 html {
-    @apply overscroll-none disable-scrollbars;
+    @apply disable-scrollbars;
     @apply bg-m-grey-975;
 }
 
 body {
+    -webkit-overflow-scrolling: touch;
     /* After load we need to remove the bg so the qr scanner can show through */
     @apply text-white;
     @apply !bg-transparent;
-    @apply mx-auto flex w-full max-w-[600px] flex-1 flex-col px-4 pb-8 pt-4 min-h-device h-device;
+    @apply mx-auto flex w-full max-w-[600px] flex-1 flex-col safe-top safe-left safe-right safe-bottom min-h-device h-device;
 }
 
 #root {

diff --git a/src/routes/Chat.tsx b/src/routes/Chat.tsx
@@ -307,7 +307,8 @@ function FixedChatHeader(props: {
     }
 
     return (
-        <div class="fixed top-0 z-50 -ml-4 flex w-full max-w-[600px] flex-col gap-2 bg-m-grey-975/70 p-4 backdrop-blur-lg">
+        <div class="fixed top-0 z-50 flex w-full max-w-[600px] flex-col gap-2 bg-m-grey-975/70 px-4 py-4 backdrop-blur-lg">
+            <div class="backgrop-blur-lg z-50 bg-m-grey-975/70 safe-top" />
             <div class="flex w-full flex-col gap-2">
                 <div class="flex items-center gap-2">
                     <BackPop default="/" title="" />
@@ -556,7 +557,7 @@ export function Chat() {
                     </Show>
                 </Suspense>
             </div>
-            <div class="fixed bottom-0 -ml-4 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-8 pt-2 backdrop-blur-lg">
+            <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-4 py-2 backdrop-blur-lg">
                 <MiniFab
                     onScan={() => navigate("/scanner")}
                     onSend={() => {
@@ -593,6 +594,7 @@ export function Chat() {
                         </Button>
                     </Show>
                 </div>
+                <div class="backgrop-blur-lg z-50 bg-m-grey-975/70 safe-bottom" />
             </div>
         </MutinyWalletGuard>
     );

diff --git a/src/routes/Search.tsx b/src/routes/Search.tsx
@@ -28,7 +28,8 @@ import {
     ContactFormValues,
     LoadingShimmer,
     NavBar,
-    showToast
+    showToast,
+    VStack
 } from "~/components";
 import {
     BackLink,
@@ -282,7 +283,7 @@ function ActualSearch(props: { initialValue?: string }) {
                 />
                 <Show when={!searchValue()}>
                     <button
-                        class="bg-m-grey- absolute right-1 top-1/2 flex -translate-y-1/2 items-center gap-1 py-1 pr-4"
+                        class="absolute right-1 top-1/2 flex -translate-y-1/2 items-center gap-1 py-1 pr-4"
                         onClick={handlePaste}
                     >
                         <LucideClipboard class="h-4 w-4" />
@@ -304,11 +305,9 @@ function ActualSearch(props: { initialValue?: string }) {
                 </Button>
             </Show>
             <Show when={searchState() !== "sendable"}>
-                <div class="relative flex h-full max-h-[100svh] flex-col gap-3 overflow-y-scroll">
+                <VStack>
                     <Suspense>
-                        <div class="sticky top-0 z-50 bg-m-grey-975/90 py-2 backdrop-blur-sm">
-                            <h2 class="text-xl font-semibold">Contacts</h2>
-                        </div>
+                        <h2 class="text-xl font-semibold">Contacts</h2>
                         <Show when={contacts() && contacts().length > 0}>
                             <For each={filteredContacts()}>
                                 {(contact) => (
@@ -335,7 +334,7 @@ function ActualSearch(props: { initialValue?: string }) {
                         </Show>
                     </Suspense>
                     <div class="h-4" />
-                </div>
+                </VStack>
             </Show>
         </>
     );