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

Commit 9401d65

Browse files
futurepaulfuturepaul
committed
styling fixes
1 parent 4c96feb commit 9401d65

File tree

9 files changed

+44
-46
lines changed

9 files changed

+44
-46
lines changed

‎src/components/Fab.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ export function FabMenu(props: {
5050
class="fixed rounded-xl bg-neutral-700/30 px-2 backdrop-blur-lg"
5151
classList={{
5252
"right-8 bottom-[calc(2rem+5rem)]": props.right,
53-
"bottom-[calc(2rem+2rem)]": props.left
53+
"left-2 bottom-[calc(2rem+2rem)]": props.left
5454
}}
5555
>
5656
{props.children}

‎src/components/HomeBalance.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,8 +44,7 @@ export function HomeBalance() {
4444
</Match>
4545
<Match when={state.balanceView === "hidden"}>
4646
<div class="flex items-center gap-2">
47-
<Zap class="w-[18px]" />
48-
<span>***</span>
47+
<span>*****</span>
4948
</div>
5049
</Match>
5150
</Switch>

‎src/components/OverlayScanner.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ export function OverlayScanner(props: { onClose: () => void }) {
5252
});
5353

5454
return (
55-
<div class="fixed left-0 top-0 z-50 h-screen w-screen bg-black/30 backdrop-blur-lg transition-opacity">
55+
<div class="fixed left-0 top-0 z-50 h-full w-full bg-black/30 backdrop-blur-lg transition-opacity">
5656
<Reader onResult={onResult} />
5757
<div class="fixed bottom-[2rem] flex w-full flex-col items-center gap-8 px-8">
5858
<div class="flex w-full max-w-[400px] flex-col gap-2">

‎src/components/SetupErrorDisplay.tsx

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { MutinyWallet } from "@mutinywallet/mutiny-wasm";
22
import { Title } from "@solidjs/meta";
3+
import { MonitorSmartphone } from "lucide-solid";
34
import { createResource, Match, Switch } from "solid-js";
45

56
import nodevice from "~/assets/no-device.png";
@@ -126,15 +127,7 @@ export function SetupErrorDisplay(props: {
126127
<LargeHeader>
127128
{i18n.t("error.on_boot.existing_tab.title")}
128129
</LargeHeader>
129-
<img
130-
src={nodevice}
131-
alt="no device"
132-
class="mx-auto w-1/4 max-w-[25vh] flex-shrink"
133-
/>
134-
<p class="rounded-xl bg-white/10 p-4 font-mono">
135-
<span class="font-bold">{error.name}</span>:{" "}
136-
{error.message}
137-
</p>
130+
<MonitorSmartphone class="mx-auto h-1/4 w-1/4 max-w-[25vh]" />
138131
<NiceP>
139132
{i18n.t("error.on_boot.existing_tab.description")}
140133
</NiceP>

‎src/components/layout/Misc.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,7 @@ export const Collapser: ParentComponent<{
134134

135135
export const SafeArea: ParentComponent = (props) => {
136136
return (
137-
<div class="safe-left safe-right h-device">
137+
<div class="flex flex-1 flex-col safe-left safe-right h-device">
138138
{/* <div class="flex-1 disable-scrollbars overflow-y-scroll md:pl-[8rem] md:pr-[6rem]"> */}
139139
{props.children}
140140
{/* </div> */}

‎src/root.css

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,24 @@
22
@tailwind components;
33
@tailwind utilities;
44

5-
body {
6-
@apply text-white;
7-
@apply flex min-h-[100dvh] flex-col overflow-y-scroll overscroll-none safe-top safe-bottom disable-scrollbars;
8-
/* After load we need to remove the bg so the qr scanner can show through */
9-
@apply !bg-transparent;
5+
* {
6+
touch-action: manipulation;
107
}
118

129
html {
13-
@apply h-[100dvh] overscroll-none;
10+
@apply overscroll-none disable-scrollbars;
1411
@apply bg-m-grey-975;
12+
/* @apply bg-pink-500; */
1513
/* @apply bg-black; */
1614
}
1715

16+
body {
17+
@apply text-white;
18+
@apply flex flex-col safe-top safe-bottom;
19+
/* After load we need to remove the bg so the qr scanner can show through */
20+
@apply !bg-transparent;
21+
}
22+
1823
#root {
1924
@apply flex flex-1 flex-col;
2025
}

‎src/routes/Chat.tsx

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -326,13 +326,13 @@ export function Chat() {
326326
const a_time = isDirectMessage(a.content)
327327
? a.content.date
328328
: isActivityItem(a.content)
329-
? a.content.last_updated
330-
: 0;
329+
? a.content.last_updated
330+
: 0;
331331
const b_time = isDirectMessage(b.content)
332332
? b.content.date
333333
: isActivityItem(b.content)
334-
? b.content.last_updated
335-
: 0;
334+
? b.content.last_updated
335+
: 0;
336336

337337
return b_time - a_time; // Descending order
338338
});
@@ -452,7 +452,8 @@ export function Chat() {
452452

453453
return (
454454
<MutinyWalletGuard>
455-
<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">
455+
{/* TODO: just make this a normal page with a fixed header and fixed footer */}
456+
<main class="mx-auto grid w-full max-w-[600px] grid-cols-1 grid-rows-[minmax(10px,1fr)_4rem] flex-col overflow-y-hidden">
456457
<div class="overflow-y-auto">
457458
<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">
458459
<div class="flex w-full flex-col gap-2">
@@ -547,7 +548,7 @@ export function Chat() {
547548
</Suspense>
548549
</div>
549550
</div>
550-
<div class="grid grid-cols-[auto_1fr_auto] grid-rows-1 items-center gap-2 p-2">
551+
<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">
551552
<MiniFab
552553
onScan={() => navigate("/scanner")}
553554
onSend={() => {

‎src/routes/Main.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ export function Main() {
8181
const [scanner, setScanner] = createSignal(false);
8282

8383
return (
84-
<SafeArea>
84+
<>
8585
<DefaultMain zeroBottomPadding={true}>
8686
{/* <LoadingIndicator /> */}
8787
<Show when={state.load_stage !== "done"}>
@@ -120,6 +120,6 @@ export function Main() {
120120
<DecryptDialog />
121121
<HomePrompt />
122122
<NavBar activeTab="home" />
123-
</SafeArea>
123+
</>
124124
);
125125
}

‎src/routes/Search.tsx

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -51,24 +51,22 @@ import {
5151
export function Search() {
5252
return (
5353
<MutinyWalletGuard>
54-
<SafeArea>
55-
<DefaultMain zeroBottomPadding={true}>
56-
<div class="flex items-center justify-between">
57-
<BackLink />
58-
<A
59-
class="rounded-lg p-2 hover:bg-white/5 active:bg-m-blue md:hidden"
60-
href="/scanner"
61-
>
62-
<Scan class="h-6 w-6" />
63-
</A>{" "}
64-
</div>
65-
{/* Need to put the search view in a supsense so it loads list on first nav */}
66-
<Suspense>
67-
<ActualSearch />
68-
</Suspense>
69-
</DefaultMain>
70-
<NavBar activeTab="send" />
71-
</SafeArea>
54+
<DefaultMain zeroBottomPadding={true}>
55+
<div class="flex items-center justify-between">
56+
<BackLink />
57+
<A
58+
class="rounded-lg p-2 hover:bg-white/5 active:bg-m-blue md:hidden"
59+
href="/scanner"
60+
>
61+
<Scan class="h-6 w-6" />
62+
</A>{" "}
63+
</div>
64+
{/* Need to put the search view in a supsense so it loads list on first nav */}
65+
<Suspense>
66+
<ActualSearch />
67+
</Suspense>
68+
</DefaultMain>
69+
<NavBar activeTab="send" />
7270
</MutinyWalletGuard>
7371
);
7472
}
@@ -279,6 +277,8 @@ function ActualSearch(props: { initialValue?: string }) {
279277
onInput={(e) => setSearchValue(e.currentTarget.value)}
280278
placeholder="Name, address, invoice..."
281279
autofocus
280+
autocomplete="off"
281+
autocorrect="off"
282282
ref={(el) => (searchInputRef = el)}
283283
/>
284284
<Show when={!searchValue()}>

0 commit comments

Comments
 (0)