Skip to content
This repository was archived by the owner on Apr 21, 2025. It is now read-only.

Commit 256953b

Browse files
futurepaulfuturepaul
committed
my css war ends in cease fire
1 parent e669a96 commit 256953b

File tree

8 files changed

+60
-491
lines changed

8 files changed

+60
-491
lines changed

‎src/components/ActualSearch.tsx

Lines changed: 0 additions & 440 deletions
This file was deleted.

‎src/components/ErrorDisplay.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@ import { onMount } from "solid-js";
55
import { ExternalLink } from "~/components";
66
import {
77
Button,
8+
DefaultMain,
89
LargeHeader,
910
NiceP,
10-
SmallHeader,
11-
VStack
11+
SmallHeader
1212
} from "~/components/layout";
1313
import { useI18n } from "~/i18n/context";
1414

@@ -27,7 +27,7 @@ export function ErrorDisplay(props: { error: Error }) {
2727
console.error(props.error);
2828
});
2929
return (
30-
<VStack>
30+
<DefaultMain>
3131
<Title>{i18n.t("error.general.oh_no")}</Title>
3232
<LargeHeader>{i18n.t("error.title")}</LargeHeader>
3333
<SmallHeader>
@@ -53,6 +53,6 @@ export function ErrorDisplay(props: { error: Error }) {
5353
<Button onClick={() => (window.location.href = "/")} intent="red">
5454
{i18n.t("common.dangit")}
5555
</Button>
56-
</VStack>
56+
</DefaultMain>
5757
);
5858
}

‎src/components/SetupErrorDisplay.tsx

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,14 @@ import { createResource, Match, Switch } from "solid-js";
66
import nodevice from "~/assets/no-device.png";
77
import {
88
Button,
9+
DefaultMain,
910
DeleteEverything,
1011
ExternalLink,
1112
ImportExport,
1213
LargeHeader,
1314
Logs,
1415
NiceP,
15-
SmallHeader,
16-
VStack
16+
SmallHeader
1717
} from "~/components";
1818
import { useI18n } from "~/i18n/context";
1919
import {
@@ -75,9 +75,11 @@ export function SetupErrorDisplay(props: {
7575
}
7676

7777
return (
78-
<Switch>
79-
<Match when={error.message.startsWith("Network connection closed")}>
80-
<VStack>
78+
<DefaultMain>
79+
<Switch>
80+
<Match
81+
when={error.message.startsWith("Network connection closed")}
82+
>
8183
<LargeHeader>
8284
{i18n.t("error.on_boot.loading_failed.header")}
8385
</LargeHeader>
@@ -109,11 +111,9 @@ export function SetupErrorDisplay(props: {
109111
</NiceP>
110112

111113
<ErrorFooter />
112-
</VStack>
113-
</Match>
114-
<Match when={error.message.startsWith("Existing tab")}>
115-
<Title>{i18n.t("error.on_boot.existing_tab.title")}</Title>
116-
<VStack>
114+
</Match>
115+
<Match when={error.message.startsWith("Existing tab")}>
116+
<Title>{i18n.t("error.on_boot.existing_tab.title")}</Title>
117117
<LargeHeader>
118118
{i18n.t("error.on_boot.existing_tab.title")}
119119
</LargeHeader>
@@ -125,11 +125,13 @@ export function SetupErrorDisplay(props: {
125125
{i18n.t("error.reload")}
126126
</Button>
127127
<ErrorFooter />
128-
</VStack>
129-
</Match>
130-
<Match when={error.message.startsWith("Mutiny is already running")}>
131-
<Title>{i18n.t("error.on_boot.already_running.title")}</Title>
132-
<VStack>
128+
</Match>
129+
<Match
130+
when={error.message.startsWith("Mutiny is already running")}
131+
>
132+
<Title>
133+
{i18n.t("error.on_boot.already_running.title")}
134+
</Title>
133135
<LargeHeader>
134136
{i18n.t("error.on_boot.already_running.title")}
135137
</LargeHeader>
@@ -154,13 +156,11 @@ export function SetupErrorDisplay(props: {
154156
{i18n.t("error.reload")}
155157
</Button>
156158
<ErrorFooter />
157-
</VStack>
158-
</Match>
159-
<Match when={error.message.startsWith("Browser error")}>
160-
<Title>
161-
{i18n.t("error.on_boot.incompatible_browser.title")}
162-
</Title>
163-
<VStack>
159+
</Match>
160+
<Match when={error.message.startsWith("Browser error")}>
161+
<Title>
162+
{i18n.t("error.on_boot.incompatible_browser.title")}
163+
</Title>
164164
<LargeHeader>
165165
{i18n.t("error.on_boot.incompatible_browser.header")}
166166
</LargeHeader>
@@ -190,11 +190,11 @@ export function SetupErrorDisplay(props: {
190190
</ExternalLink>
191191

192192
<ErrorFooter />
193-
</VStack>
194-
</Match>
195-
<Match when={true}>
196-
<Title>{i18n.t("error.on_boot.loading_failed.title")}</Title>
197-
<VStack>
193+
</Match>
194+
<Match when={true}>
195+
<Title>
196+
{i18n.t("error.on_boot.loading_failed.title")}
197+
</Title>
198198
<LargeHeader>
199199
{i18n.t("error.on_boot.loading_failed.header")}
200200
</LargeHeader>
@@ -229,8 +229,8 @@ export function SetupErrorDisplay(props: {
229229
</div>
230230

231231
<ErrorFooter />
232-
</VStack>
233-
</Match>
234-
</Switch>
232+
</Match>
233+
</Switch>
234+
</DefaultMain>
235235
);
236236
}

‎src/components/index.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,6 @@ export * from "./SharpButton";
5353
export * from "./HomeSubnav";
5454
export * from "./OverlayScanner";
5555
export * from "./SocialActionRow";
56-
export * from "./ActualSearch";
5756
export * from "./ContactButton";
5857
export * from "./GenericItem";
5958
export * from "./HomeBalance";

‎src/components/layout/Misc.tsx

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -134,10 +134,16 @@ export const Collapser: ParentComponent<{
134134

135135
export const DefaultMain = (props: { children?: JSX.Element }) => {
136136
return (
137-
<main class="flex h-full flex-1 flex-col gap-4">
138-
{props.children}
139-
<div class="h-4" />
140-
</main>
137+
<>
138+
{/* blur content that goes under the notification bar */}
139+
<div class="relative">
140+
<div class="backgrop-blur-lg fixed left-0 right-0 top-0 z-50 bg-m-grey-975/70 safe-top" />
141+
</div>
142+
<main class="flex h-full flex-1 flex-col gap-4 px-4 pb-8 pt-4">
143+
{props.children}
144+
<div class="h-4" />
145+
</main>
146+
</>
141147
);
142148
};
143149

@@ -173,7 +179,9 @@ export const MutinyWalletGuard: ParentComponent = (props) => {
173179
{props.children}
174180
</Match>
175181
<Match when={true}>
176-
<LoadingIndicator />
182+
<DefaultMain>
183+
<LoadingIndicator />
184+
</DefaultMain>
177185
</Match>
178186
</Switch>
179187
<DecryptDialog />

‎src/root.css

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,16 @@
77
}
88

99
html {
10-
@apply overscroll-none disable-scrollbars;
10+
@apply disable-scrollbars;
1111
@apply bg-m-grey-975;
1212
}
1313

1414
body {
15+
-webkit-overflow-scrolling: touch;
1516
/* After load we need to remove the bg so the qr scanner can show through */
1617
@apply text-white;
1718
@apply !bg-transparent;
18-
@apply mx-auto flex w-full max-w-[600px] flex-1 flex-col px-4 pb-8 pt-4 min-h-device h-device;
19+
@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;
1920
}
2021

2122
#root {

‎src/routes/Chat.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -307,7 +307,8 @@ function FixedChatHeader(props: {
307307
}
308308

309309
return (
310-
<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">
310+
<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">
311+
<div class="backgrop-blur-lg z-50 bg-m-grey-975/70 safe-top" />
311312
<div class="flex w-full flex-col gap-2">
312313
<div class="flex items-center gap-2">
313314
<BackPop default="/" title="" />
@@ -556,7 +557,7 @@ export function Chat() {
556557
</Show>
557558
</Suspense>
558559
</div>
559-
<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">
560+
<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">
560561
<MiniFab
561562
onScan={() => navigate("/scanner")}
562563
onSend={() => {
@@ -593,6 +594,7 @@ export function Chat() {
593594
</Button>
594595
</Show>
595596
</div>
597+
<div class="backgrop-blur-lg z-50 bg-m-grey-975/70 safe-bottom" />
596598
</div>
597599
</MutinyWalletGuard>
598600
);

‎src/routes/Search.tsx

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,8 @@ import {
2828
ContactFormValues,
2929
LoadingShimmer,
3030
NavBar,
31-
showToast
31+
showToast,
32+
VStack
3233
} from "~/components";
3334
import {
3435
BackLink,
@@ -282,7 +283,7 @@ function ActualSearch(props: { initialValue?: string }) {
282283
/>
283284
<Show when={!searchValue()}>
284285
<button
285-
class="bg-m-grey- absolute right-1 top-1/2 flex -translate-y-1/2 items-center gap-1 py-1 pr-4"
286+
class="absolute right-1 top-1/2 flex -translate-y-1/2 items-center gap-1 py-1 pr-4"
286287
onClick={handlePaste}
287288
>
288289
<LucideClipboard class="h-4 w-4" />
@@ -304,11 +305,9 @@ function ActualSearch(props: { initialValue?: string }) {
304305
</Button>
305306
</Show>
306307
<Show when={searchState() !== "sendable"}>
307-
<div class="relative flex h-full max-h-[100svh] flex-col gap-3 overflow-y-scroll">
308+
<VStack>
308309
<Suspense>
309-
<div class="sticky top-0 z-50 bg-m-grey-975/90 py-2 backdrop-blur-sm">
310-
<h2 class="text-xl font-semibold">Contacts</h2>
311-
</div>
310+
<h2 class="text-xl font-semibold">Contacts</h2>
312311
<Show when={contacts() && contacts().length > 0}>
313312
<For each={filteredContacts()}>
314313
{(contact) => (
@@ -335,7 +334,7 @@ function ActualSearch(props: { initialValue?: string }) {
335334
</Show>
336335
</Suspense>
337336
<div class="h-4" />
338-
</div>
337+
</VStack>
339338
</Show>
340339
</>
341340
);

0 commit comments

Comments
 (0)