From d570f224a11ca7f0dfedaadb49415352e12f9aa6 Mon Sep 17 00:00:00 2001 From: Paul Miller Date: Wed, 21 Jun 2023 11:34:55 -0500 Subject: [PATCH] home screen redesign --- src/assets/mutiny-pixel-logo.png | Bin 0 -> 823 bytes src/components/Amount.tsx | 27 +++++++++++---- src/components/App.tsx | 19 +++++++---- src/components/BalanceBox.tsx | 55 ++++++++++++++++--------------- src/components/layout/index.tsx | 15 ++------- src/root.css | 4 +++ src/routes/Activity.tsx | 13 +------- tailwind.config.cjs | 4 ++- 8 files changed, 71 insertions(+), 66 deletions(-) create mode 100644 src/assets/mutiny-pixel-logo.png diff --git a/src/assets/mutiny-pixel-logo.png b/src/assets/mutiny-pixel-logo.png new file mode 100644 index 0000000000000000000000000000000000000000..a79a2b4f8646b8be18c9771d013f62325cab6160 GIT binary patch literal 823 zcmeAS@N?(olHy`uVBq!ia0y~yVAKJ!Q#jawqzxnQ0U*U$;1OBOz@Xy|!i-C8r>z7E zG8PB9J29*~C-V}>VM%xNb!1@J*w6hZk(Ggg>5Qj~V@L(#+q>R*w+%$v0+*jyQT^i7 zu6^s)RKM6VS2TmiCDp@r--|h!6D|}zk-siJ{mSX)rFFHx|NY)Ozy9yf$4?n+PE2Qa zXgR=S#3D9f;e4ZvE$&N~v%X%jp@FB7HHAY*!TEp6h1>I{$cf0fw?YIG7$w*9-`i^H z&WbE_*mlj{YOD0~rY|E8mac?rPu|>aT0QS_hX08;+c2rU|L^2qUv>y=nc{|qp5=1a zUKyWoKW}lr%64@%&$D$4oDr7HE{=E>)UY}rkx`O~`-DJ*!?ED{tTMgKvUgc!dv#aG z_siX%akaSaPB#}=whib9zk0og_iWc+oY%RxwIEgt=z5@Ifto8`CH8(RS@%um;M(iS z=blGATNmMpuxS1}n>DM?2d=%hdgrhA@_X-H{kHC1?cVD1e`9O&-@d6r7;|H)qj8e{r~O#YPh!_fBC%O-MPw`;#b9)--7xA5q@}D z9T9FnKl_W#y0!QB&%XJ+f2*5){_6kr(fijU!sT#vM3u;$$hZIE?_MsF6DyF01b|zf z{z5s4)Mw}ZnO6NpIIBQTZ27Ke{^fOhHy1~44vBC81qCoVKkoWfqgkw${LQZZ#jEGJ zXW!Xc|NbXcTmSyw&l!8;M8zfmqW~1kHnsETysfO+_Wp_ce)(#9_xG>Pzm$&6e=m3U z?zP!l%g+ZQf+}rEL+ZDA#=&s^w0+*tz;9i(eib4T&LlGafBWY1NrXcZ`M7_)es!J! o5tVInVjmLS?GHO5jIL++#pCm-SJ(O}Fr71ay85}Sb4q9e05~OLod5s; literal 0 HcmV?d00001 diff --git a/src/components/Amount.tsx b/src/components/Amount.tsx index d54c48e..2db04aa 100644 --- a/src/components/Amount.tsx +++ b/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 (
-

- {props.loading ? "..." : prettyPrintAmount(props.amountSats)} -   - SATS -

+
+ + lightning + + + chain + +

+ {props.loading + ? "..." + : prettyPrintAmount(props.amountSats)} +   + SATS +

+
-

+

≈ {props.loading ? "..." : amountInUsd()}  USD

diff --git a/src/components/App.tsx b/src/components/App.tsx index 2308871..42de8d5 100644 --- a/src/components/App.tsx +++ b/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() {
-
- logo +
+ -
+
{state.mutiny_wallet?.get_network()}
- Activity + Settings
diff --git a/src/components/BalanceBox.tsx b/src/components/BalanceBox.tsx index 581e66b..6373adf 100644 --- a/src/components/BalanceBox.tsx +++ b/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 ( <> - + }> - - - +
}>
- - -
- - swap - -
- + +
+ + Pending + + +
+ + +
+ + swap + +
+ +
diff --git a/src/components/layout/index.tsx b/src/components/layout/index.tsx index 290d626..ecb2e56 100644 --- a/src/components/layout/index.tsx +++ b/src/components/layout/index.tsx @@ -54,18 +54,7 @@ export const FancyCard: ParentComponent<{ tag?: JSX.Element; }> = (props) => { return ( -
-
-
- {props.title && {props.title}} - {props.subtitle && ( - - {props.subtitle} - - )} -
- {props.tag && props.tag} -
+
{props.children}
); @@ -154,7 +143,7 @@ export const LoadingSpinner = (props: { big?: boolean; wide?: boolean }) => { ); }; -export const Hr = () => ; +export const Hr = () => ; export const LargeHeader: ParentComponent<{ action?: JSX.Element }> = ( props diff --git a/src/root.css b/src/root.css index b942007..108aafe 100644 --- a/src/root.css +++ b/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]; } diff --git a/src/routes/Activity.tsx b/src/routes/Activity.tsx index 9337ad0..5506e1c 100644 --- a/src/routes/Activity.tsx +++ b/src/routes/Activity.tsx @@ -92,18 +92,7 @@ export default function Activity() { - - Settings - - } - > - Activity - + Activity diff --git a/tailwind.config.cjs b/tailwind.config.cjs index c8cb8a6..d567037 100644 --- a/tailwind.config.cjs +++ b/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":