declaring css victory

Author: futurepaul

package.json

@@ -30,7 +30,7 @@
         "eslint-plugin-solid": "0.13.1",
         "postcss": "^8.4.35",
         "prettier": "^3.0.3",
-        "prettier-plugin-tailwindcss": "^0.5.6",
+        "prettier-plugin-tailwindcss": "^0.5.12",
         "tailwindcss": "^3.4.1",
         "typescript": "^5.3.3",
         "vite": "^5.1.1",

pnpm-lock.yaml

@@ -5,11 +5,10 @@ import { onMount } from "solid-js";
 import { ExternalLink } from "~/components";
 import {
     Button,
-    DefaultMain,
     LargeHeader,
     NiceP,
-    SafeArea,
-    SmallHeader
+    SmallHeader,
+    VStack
 } from "~/components/layout";
 import { useI18n } from "~/i18n/context";
 
@@ -28,37 +27,32 @@ export function ErrorDisplay(props: { error: Error }) {
         console.error(props.error);
     });
     return (
-        <SafeArea>
+        <VStack>
             <Title>{i18n.t("error.general.oh_no")}</Title>
-            <DefaultMain>
-                <LargeHeader>{i18n.t("error.title")}</LargeHeader>
-                <SmallHeader>
-                    {i18n.t("error.general.never_should_happen")}
-                </SmallHeader>
-                <SimpleErrorDisplay error={props.error} />
-                <NiceP>
-                    {i18n.t("error.general.try_reloading")}{" "}
-                    <ExternalLink href="https://matrix.to/#/#mutiny-community:lightninghackers.com">
-                        {i18n.t("error.general.support_link")}
-                    </ExternalLink>
-                </NiceP>
-                <Button onClick={() => window.location.reload()}>
-                    {i18n.t("error.reload")}
-                </Button>
-                <NiceP>
-                    {i18n.t("error.general.getting_desperate")}{" "}
-                    <A href="/settings/emergencykit">
-                        {i18n.t("error.emergency_link")}
-                    </A>
-                </NiceP>
-                <div class="h-full" />
-                <Button
-                    onClick={() => (window.location.href = "/")}
-                    intent="red"
-                >
-                    {i18n.t("common.dangit")}
-                </Button>
-            </DefaultMain>
-        </SafeArea>
+            <LargeHeader>{i18n.t("error.title")}</LargeHeader>
+            <SmallHeader>
+                {i18n.t("error.general.never_should_happen")}
+            </SmallHeader>
+            <SimpleErrorDisplay error={props.error} />
+            <NiceP>
+                {i18n.t("error.general.try_reloading")}{" "}
+                <ExternalLink href="https://matrix.to/#/#mutiny-community:lightninghackers.com">
+                    {i18n.t("error.general.support_link")}
+                </ExternalLink>
+            </NiceP>
+            <Button onClick={() => window.location.reload()}>
+                {i18n.t("error.reload")}
+            </Button>
+            <NiceP>
+                {i18n.t("error.general.getting_desperate")}{" "}
+                <A href="/settings/emergencykit">
+                    {i18n.t("error.emergency_link")}
+                </A>
+            </NiceP>
+            <div class="h-full" />
+            <Button onClick={() => (window.location.href = "/")} intent="red">
+                {i18n.t("common.dangit")}
+            </Button>
+        </VStack>
     );
 }

src/components/ErrorDisplay.tsx

@@ -1,4 +1,3 @@
-import { Zap } from "lucide-solid";
 import { Match, Switch } from "solid-js";
 
 import { AmountFiat, AmountSats } from "~/components/Amount";
@@ -10,7 +9,8 @@ export function HomeBalance() {
     const lightningPlusFedi = () =>
         (state.balance?.federation || 0n) + (state.balance?.lightning || 0n);
 
-    const fullyReady = () => state.load_stage === "done" && state.price !== 0;
+    // TODO: do some sort of status indicator
+    // const fullyReady = () => state.load_stage === "done" && state.price !== 0;
 
     return (
         <button

src/components/HomeBalance.tsx

@@ -116,8 +116,7 @@ export function HomeSubnav() {
                 </Suspense>
             </Show>
             {/* spacer just so we can always scroll above the fab */}
-            <div class="h-[6rem]" />
-            <div class="flex-1" />
+            <div class="h-[4rem]" />
         </>
     );
 }