home screen redesign

src/components/Amount.tsx

@@ -1,6 +1,8 @@
 import { Show } from "solid-js";
 import { useMegaStore } from "~/state/megaStore";
 import { satsToUsd } from "~/utils/conversions";
+import bolt from "~/assets/icons/bolt.svg";
+import chain from "~/assets/icons/chain.svg";
 
 function prettyPrintAmount(n?: number | bigint): string {
     if (!n || n.valueOf() === 0) {
@@ -14,6 +16,7 @@ export function Amount(props: {
     showFiat?: boolean;
     loading?: boolean;
     centered?: boolean;
+    icon?: "lightning" | "chain";
 }) {
     const [state, _] = useMegaStore();
 
@@ -22,16 +25,26 @@ export function Amount(props: {
 
     return (
         <div
-            class="flex flex-col gap-2"
+            class="flex flex-col gap-1"
             classList={{ "items-center": props.centered }}
         >
-            <h1 class="text-4xl font-light">
+            <div class="flex gap-2 items-center">
-                {props.loading ? "..." : prettyPrintAmount(props.amountSats)}
+                <Show when={props.icon === "lightning"}>
-                &nbsp;
+                    <img src={bolt} alt="lightning" class="h-[18px]" />
-                <span class="text-xl">SATS</span>
+                </Show>
-            </h1>
+                <Show when={props.icon === "chain"}>
+                    <img src={chain} alt="chain" class="h-[18px]" />
+                </Show>
+                <h1 class="text-2xl font-light">
+                    {props.loading
+                        ? "..."
+                        : prettyPrintAmount(props.amountSats)}
+                    &nbsp;
+                    <span class="text-base font-light">SATS</span>
+                </h1>
+            </div>
             <Show when={props.showFiat}>
-                <h2 class="text-xl font-light text-white/70">
+                <h2 class="text-sm font-light text-white/70">
                     &#8776; {props.loading ? "..." : amountInUsd()}&nbsp;
                     <span class="text-sm">USD</span>
                 </h2>

src/components/App.tsx

@@ -1,4 +1,3 @@
-import logo from "~/assets/icons/mutiny-logo.svg";
 import { DefaultMain, SafeArea, VStack, Card } from "~/components/layout";
 import BalanceBox, { LoadingShimmer } from "~/components/BalanceBox";
 import NavBar from "~/components/NavBar";
@@ -6,11 +5,12 @@ import ReloadPrompt from "~/components/Reload";
 import { A } from "solid-start";
 import { OnboardWarning } from "~/components/OnboardWarning";
 import { CombinedActivity } from "./Activity";
-import userClock from "~/assets/icons/user-clock.svg";
 import { useMegaStore } from "~/state/megaStore";
 import { Show } from "solid-js";
 import { ExternalLink } from "./layout/ExternalLink";
 import { BetaWarningModal } from "~/components/BetaWarningModal";
+import settings from "~/assets/icons/settings.svg";
+import pixelLogo from "~/assets/mutiny-pixel-logo.png";
 
 export default function App() {
     const [state, _actions] = useMegaStore();
@@ -19,24 +19,29 @@ export default function App() {
         <SafeArea>
             <DefaultMain>
                 <header class="w-full flex justify-between items-center mt-4 mb-2">
-                    <div class="flex flex-col justify-center gap-2">
+                    <div class="flex items-center gap-2">
-                        <img src={logo} class="h-10" alt="logo" />
+                        <img
+                            id="mutiny-logo"
+                            src={pixelLogo}
+                            class="h-[25px] w-[75px]"
+                            alt="Mutiny logo"
+                        />
                         <Show
                             when={
                                 !state.wallet_loading &&
                                 state.mutiny_wallet?.get_network() !== "bitcoin"
                             }
                         >
-                            <div class="box-border px-2 py-1 -my-1 bg-white/70 rounded text-xs uppercase text-black w-fit">
+                            <div class="box-border px-2 py-1 -my-1 text-white-400 bg-neutral-800 rounded text-xs uppercase  w-fit">
                                 {state.mutiny_wallet?.get_network()}
                             </div>
                         </Show>
                     </div>
                     <A
                         class="md:hidden p-2 hover:bg-white/5 rounded-lg active:bg-m-blue"
-                        href="/activity"
+                        href="/settings"
                     >
-                        <img src={userClock} alt="Activity" class="h-8 w-8" />
+                        <img src={settings} alt="Settings" class="h-6 w-6" />
                     </A>
                 </header>
                 <Show when={!state.wallet_loading}>

src/components/BalanceBox.tsx

@@ -1,5 +1,5 @@
 import { Show } from "solid-js";
-import { Button, FancyCard } from "~/components/layout";
+import { Button, FancyCard, Hr, Indicator } from "~/components/layout";
 import { useMegaStore } from "~/state/megaStore";
 import { Amount } from "./Amount";
 import { A, useNavigate } from "solid-start";
@@ -19,7 +19,7 @@ export function LoadingShimmer() {
 }
 
 const STYLE =
-    "px-2 py-1 rounded-xl border border-neutral-400 text-sm flex gap-2 items-center font-semibold";
+    "px-2 py-1 rounded-xl text-sm flex gap-2 items-center font-semibold";
 
 export default function BalanceBox(props: { loading?: boolean }) {
     const [state, _actions] = useMegaStore();
@@ -39,38 +39,41 @@ export default function BalanceBox(props: { loading?: boolean }) {
 
     return (
         <>
-            <FancyCard title="Lightning">
+            <FancyCard>
                 <Show when={!props.loading} fallback={<LoadingShimmer />}>
                     <Amount
                         amountSats={state.balance?.lightning || 0}
                         showFiat
+                        icon="lightning"
                     />
                 </Show>
-            </FancyCard>
+                <hr class="my-2 border-m-grey-750" />
-
-            <FancyCard
-                title="On-Chain"
-                subtitle={
-                    (Number(state.balance?.unconfirmed) || 0) +
-                    (Number(state.balance?.force_close) || 0)
-                        ? "Unconfirmed"
-                        : undefined
-                }
-            >
                 <Show when={!props.loading} fallback={<LoadingShimmer />}>
                     <div class="flex justify-between">
-                        <Amount amountSats={totalOnchain()} showFiat />
+                        <Amount
-                        <Show when={totalOnchain() != 0n }>
+                            amountSats={totalOnchain()}
-                            <div class="self-end justify-self-end">
+                            showFiat
-                                <A href="/swap" class={STYLE}>
+                            icon="chain"
-                                    <img
+                        />
-                                        src={shuffle}
+                        <div class="flex flex-col items-end gap-1 justify-between">
-                                        alt="swap"
+                            <Show when={state.balance?.unconfirmed != 0n}>
-                                        class="h-8 w-8"
+                                <Indicator>Pending</Indicator>
-                                    />
+                            </Show>
-                                </A>
+                            <Show when={state.balance?.unconfirmed === 0n}>
-                            </div>
+                                <div />
-                        </Show>
+                            </Show>
+                            <Show when={totalOnchain() != 0n}>
+                                <div class="self-end justify-self-end">
+                                    <A href="/swap" class={STYLE}>
+                                        <img
+                                            src={shuffle}
+                                            alt="swap"
+                                            class="h-6 w-6"
+                                        />
+                                    </A>
+                                </div>
+                            </Show>
+                        </div>
                     </div>
                 </Show>
             </FancyCard>

src/components/layout/index.tsx

@@ -54,18 +54,7 @@ export const FancyCard: ParentComponent<{
     tag?: JSX.Element;
 }> = (props) => {
     return (
-        <div class="border border-black/50 rounded-xl border-b-4 p-4 flex flex-col gap-2 bg-neutral-800/50 shadow-fancy-card">
+        <div class="border border-black/50 rounded-xl border-b-4 p-4 flex flex-col gap-2 bg-m-grey-800 shadow-fancy-card">
-            <div class="w-full flex justify-between items-center">
-                <div class="flex gap-2">
-                    {props.title && <SmallHeader>{props.title}</SmallHeader>}
-                    {props.subtitle && (
-                        <SmallHeader class="text-neutral-500">
-                            {props.subtitle}
-                        </SmallHeader>
-                    )}
-                </div>
-                {props.tag && props.tag}
-            </div>
             {props.children}
         </div>
     );
@@ -154,7 +143,7 @@ export const LoadingSpinner = (props: { big?: boolean; wide?: boolean }) => {
     );
 };
 
-export const Hr = () => <Separator.Root class="my-4 border-white/20" />;
+export const Hr = () => <Separator.Root class="my-4 border-m-grey-750" />;
 
 export const LargeHeader: ParentComponent<{ action?: JSX.Element }> = (
     props

src/root.css

@@ -8,6 +8,10 @@ body {
     min-height: 100.3%;
 }
 
+#mutiny-logo {
+    image-rendering: pixelated;
+}
+
 .bg-gradient {
     @apply bg-fixed bg-no-repeat bg-gradient-to-b from-black to-[#0b215b];
 }

src/routes/Activity.tsx

@@ -92,18 +92,7 @@ export default function Activity() {
             <SafeArea>
                 <DefaultMain>
                     <BackLink />
-                    <LargeHeader
+                    <LargeHeader>Activity</LargeHeader>
-                        action={
-                            <A
-                                class="md:hidden p-2 hover:bg-white/5 rounded-lg active:bg-m-blue"
-                                href="/settings"
-                            >
-                                <img src={settings} alt="Settings" />
-                            </A>
-                        }
-                    >
-                        Activity
-                    </LargeHeader>
                     <ContactRow />
                     <Tabs.Root defaultValue="mutiny">
                         <Tabs.List class="relative flex justify-around mt-4 mb-8 gap-1 bg-neutral-950 p-1 rounded-xl">

tailwind.config.cjs

@@ -28,7 +28,9 @@ module.exports = {
                 "m-blue-dark": "hsla(220, 59%, 42%, 1)",
                 "m-red": "hsla(343, 92%, 54%, 1)",
                 "m-red-dark": "hsla(343, 92%, 44%, 1)",
-                "sidebar-gray": "hsla(222, 15%, 7%, 1)"
+                "sidebar-gray": "hsla(222, 15%, 7%, 1)",
+                "m-grey-800": "hsla(0, 0%, 12%, 1)",
+                "m-grey-750": "hsla(0, 0%, 17%, 1)"
             },
             backgroundImage: {
                 "fade-to-blue":