chore(styles): theme

- updated theme colors - fixed button styles - updated wallet balance molecule - run CI checks on develop branch --- Authored-by: schowdhuri
2024-10-01 07:35:39 -04:00 · 2022-04-29 00:42:52 +05:30 · 2022-04-29 00:42:52 +05:30 · b029419e7f
commit b029419e7f
parent 3b8847bf94
18 changed files with 184 additions and 161 deletions
--- a/.github/workflows/lint.yml
+++ b/.github/workflows/lint.yml
@ -3,6 +3,7 @@ on:
  push:
    branches:
      - master
+      - develop
    paths:
      - "**.js"
      - "**.ts"
--- a/.github/workflows/tests.yml
+++ b/.github/workflows/tests.yml
@ -3,6 +3,7 @@ on:
  push:
    branches:
      - master
+      - develop
    paths:
      - "packages/**"
      - "tests/**"
--- a/.github/workflows/typechecking.yml
+++ b/.github/workflows/typechecking.yml
@ -3,6 +3,7 @@ on:
  push:
    branches:
      - master
+      - develop
    paths:
      - "**.ts"
      - "**/tsconfig.json"
--- a/.github/workflows/update-electron-vendors.yml
+++ b/.github/workflows/update-electron-vendors.yml
@ -3,6 +3,7 @@ on:
  push:
    branches:
      - master
+      - develop
    paths:
      - "yarn.lock"

--- a/packages/renderer/src/components/atoms/Buttons/Buttons.stories.tsx
+++ b/packages/renderer/src/components/atoms/Buttons/Buttons.stories.tsx
@ -14,7 +14,7 @@
 //  limitations under the License.
 // =============================================================================

-import { Stack } from "@mantine/core";
+import { Group, Stack } from "@mantine/core";
 import type { ComponentStory, ComponentMeta } from "@storybook/react";
 import { Button } from ".";

@ -30,6 +30,13 @@ const Template: ComponentStory<typeof Button> = () => {
      <Button flavor="neutral">Neutral</Button>
      <Button flavor="success">Success</Button>
      <Button flavor="danger">Error</Button>
+
+      <Group>
+        <Button flavor="primary">Primary</Button>
+        <Button flavor="neutral">Neutral</Button>
+        <Button flavor="success">Success</Button>
+        <Button flavor="danger">Error</Button>
+      </Group>
    </Stack>
  );
 };
--- a/packages/renderer/src/components/atoms/Buttons/Buttons.tsx
+++ b/packages/renderer/src/components/atoms/Buttons/Buttons.tsx
@ -22,13 +22,14 @@ type ButtonProps<TComponent> = MButtonProps<TComponent> & {
 };

 export function Button<TComponent = "button">(props: ButtonProps<TComponent>) {
-  const { children, flavor = "primary", ...rest } = props;
+  const { children, className, flavor = "primary", ...rest } = props;
  const { classes, cx } = useStyles();

  return (
    <MButton
      className={cx(
        classes.common,
+        className,
        { [classes.neutral]: flavor === "neutral" },
        { [classes.success]: flavor === "success" },
        { [classes.danger]: flavor === "danger" }
@ -43,9 +44,12 @@ export function Button<TComponent = "button">(props: ButtonProps<TComponent>) {
 const useStyles = createStyles((theme) => ({
  common: {
    borderRadius: 10,
+    fontSize: "0.875rem",
    fontWeight: 600,
-    height: 48,
-    padding: "1rem",
+    height: theme.other.buttonHeight,
+    minWidth: "9.75rem",
+    padding: `0 ${theme.spacing.lg}px`,
+    transition: "color 0.2s, background-color 0.2s",
  },
  neutral: {
    backgroundColor: theme.colors.gray[2],
@ -55,15 +59,15 @@ const useStyles = createStyles((theme) => ({
    },
  },
  success: {
-    backgroundColor: theme.colors.green[7],
+    backgroundColor: theme.colors.green[4],
    "&:hover": {
-      backgroundColor: theme.colors.green[8],
+      backgroundColor: theme.colors.green[5],
    },
  },
  danger: {
-    backgroundColor: theme.colors.red[6],
+    backgroundColor: theme.colors.red[4],
    "&:hover": {
-      backgroundColor: theme.colors.red[7],
+      backgroundColor: theme.colors.red[5],
    },
  },
 }));
--- a/packages/renderer/src/components/atoms/Buttons/snapshots/Buttons.test.tsx.snap
+++ b/packages/renderer/src/components/atoms/Buttons/snapshots/Buttons.test.tsx.snap
@ -3,7 +3,7 @@
 exports[`atoms::Buttons > renders error button 1`] = `
 <DocumentFragment>
  <button
-    class="mantine-Button-filled mantine-Button-root mantine-r1112v"
+    class="mantine-Button-filled mantine-Button-root mantine-xeynuy"
    type="button"
  >
    <div
@ -22,7 +22,7 @@ exports[`atoms::Buttons > renders error button 1`] = `
 exports[`atoms::Buttons > renders neutral button 1`] = `
 <DocumentFragment>
  <button
-    class="mantine-Button-filled mantine-Button-root mantine-birnp8"
+    class="mantine-Button-filled mantine-Button-root mantine-2tbxau"
    type="button"
  >
    <div
@ -41,7 +41,7 @@ exports[`atoms::Buttons > renders neutral button 1`] = `
 exports[`atoms::Buttons > renders primary button by default 1`] = `
 <DocumentFragment>
  <button
-    class="mantine-Button-filled mantine-Button-root mantine-idg0bf"
+    class="mantine-Button-filled mantine-Button-root mantine-1slecx4"
    type="button"
  >
    <div
@ -60,7 +60,7 @@ exports[`atoms::Buttons > renders primary button by default 1`] = `
 exports[`atoms::Buttons > renders success button 1`] = `
 <DocumentFragment>
  <button
-    class="mantine-Button-filled mantine-Button-root mantine-18w1h4r"
+    class="mantine-Button-filled mantine-Button-root mantine-11svsr2"
    type="button"
  >
    <div
--- a/packages/renderer/src/components/atoms/ConnectionProgress/ConnectionProgress.tsx
+++ b/packages/renderer/src/components/atoms/ConnectionProgress/ConnectionProgress.tsx
@ -50,7 +50,7 @@ const useStyles = createStyles((theme) => ({
  },
  bar: {
    animation: `${bounce} 3s ease-in-out infinite`,
-    background: theme.colors.brand[5],
+    background: theme.colors.blue[5],
    borderRadius: 3,
    height: 6,
    position: "absolute",
--- a/packages/renderer/src/components/atoms/ConnectionProgress/snapshots/ConnectionProgress.test.tsx.snap
+++ b/packages/renderer/src/components/atoms/ConnectionProgress/snapshots/ConnectionProgress.test.tsx.snap
@ -6,7 +6,7 @@ exports[`atoms::ConnectionProgress > renders without exploding 1`] = `
    class="mantine-Stack-root mantine-njf2rt"
  >
    <div
-      class="mantine-Text-root mantine-pt30zh"
+      class="mantine-Text-root mantine-102fqds"
    >
      Connecting to Monero Network
    </div>
@ -14,7 +14,7 @@ exports[`atoms::ConnectionProgress > renders without exploding 1`] = `
      class="mantine-1p25k2r"
    >
      <div
-        class="mantine-5qf5qx"
+        class="mantine-1235arf"
      />
    </div>
  </div>
--- a/packages/renderer/src/components/molecules/Sidebar/Sidebar.tsx
+++ b/packages/renderer/src/components/molecules/Sidebar/Sidebar.tsx
@ -34,7 +34,7 @@ export function Sidebar() {
          </Navbar.Section>
        ))}
        <Navbar.Section>
-          <Box p="lg">
+          <Box mt="lg">
            <WalletBalance />
          </Box>
        </Navbar.Section>
@ -45,8 +45,8 @@ export function Sidebar() {

 const useStyles = createStyles((theme) => ({
  logo: {
-    height: 32,
-    padding: `${theme.spacing.lg} ${theme.spacing.xl}`,
+    height: "2rem",
+    padding: `${theme.spacing.lg}px ${theme.spacing.lg}px`,
  },
  container: {
    width: WIDTH,
--- a/packages/renderer/src/components/molecules/Sidebar/_NavLink.tsx
+++ b/packages/renderer/src/components/molecules/Sidebar/_NavLink.tsx
@ -47,7 +47,7 @@ const useStyles = createStyles<string, { isActive: boolean }>(
  (theme, { isActive }, getRef) => ({
    navLink: {
      display: "block",
-      padding: "1.5rem 2.5rem",
+      padding: `${theme.spacing.lg}px ${theme.spacing.lg}px`,
      transition: "opacity 0.2s",
      width: "100%",

@ -59,7 +59,7 @@ const useStyles = createStyles<string, { isActive: boolean }>(
      svg: isActive
        ? {
            path: {
-              fill: theme.colors.brand[6],
+              fill: theme.colors.blue[6],
            },
          }
        : null,
--- a/packages/renderer/src/components/molecules/Sidebar/snapshots/Sidebar.test.tsx.snap
+++ b/packages/renderer/src/components/molecules/Sidebar/snapshots/Sidebar.test.tsx.snap
@ -12,7 +12,7 @@ exports[`molecules::Sidebar > renders without exploding 1`] = `
        class="mantine-khtkeg"
      >
        <svg
-          class="mantine-98j7ht"
+          class="mantine-evhmzv"
          fill="none"
          height="1em"
          viewBox="0 0 23 34"
@ -33,7 +33,7 @@ exports[`molecules::Sidebar > renders without exploding 1`] = `
        class="mantine-khtkeg"
      >
        <button
-          class="mantine-UnstyledButton-root mantine-3p8mxz"
+          class="mantine-UnstyledButton-root mantine-1wgvoyu"
          type="button"
        >
          <div
@ -53,7 +53,7 @@ exports[`molecules::Sidebar > renders without exploding 1`] = `
              />
            </svg>
            <div
-              class="mantine-Text-root mantine-Group-child __mantine-ref-text mantine-2juzrl"
+              class="mantine-Text-root mantine-Group-child __mantine-ref-text mantine-1omu9y9"
            >
              Markets
            </div>
@ -64,7 +64,7 @@ exports[`molecules::Sidebar > renders without exploding 1`] = `
        class="mantine-khtkeg"
      >
        <button
-          class="mantine-UnstyledButton-root mantine-3p8mxz"
+          class="mantine-UnstyledButton-root mantine-1wgvoyu"
          type="button"
        >
          <div
@ -88,7 +88,7 @@ exports[`molecules::Sidebar > renders without exploding 1`] = `
              />
            </svg>
            <div
-              class="mantine-Text-root mantine-Group-child __mantine-ref-text mantine-2juzrl"
+              class="mantine-Text-root mantine-Group-child __mantine-ref-text mantine-1omu9y9"
            >
              My Offers
            </div>
@ -99,7 +99,7 @@ exports[`molecules::Sidebar > renders without exploding 1`] = `
        class="mantine-khtkeg"
      >
        <button
-          class="mantine-UnstyledButton-root mantine-3p8mxz"
+          class="mantine-UnstyledButton-root mantine-1wgvoyu"
          type="button"
        >
          <div
@ -127,7 +127,7 @@ exports[`molecules::Sidebar > renders without exploding 1`] = `
              />
            </svg>
            <div
-              class="mantine-Text-root mantine-Group-child __mantine-ref-text mantine-2juzrl"
+              class="mantine-Text-root mantine-Group-child __mantine-ref-text mantine-1omu9y9"
            >
              My Trades
            </div>
@ -138,7 +138,7 @@ exports[`molecules::Sidebar > renders without exploding 1`] = `
        class="mantine-khtkeg"
      >
        <button
-          class="mantine-UnstyledButton-root mantine-3p8mxz"
+          class="mantine-UnstyledButton-root mantine-1wgvoyu"
          type="button"
        >
          <div
@ -158,7 +158,7 @@ exports[`molecules::Sidebar > renders without exploding 1`] = `
              />
            </svg>
            <div
-              class="mantine-Text-root mantine-Group-child __mantine-ref-text mantine-2juzrl"
+              class="mantine-Text-root mantine-Group-child __mantine-ref-text mantine-1omu9y9"
            >
              Notifications
            </div>
@ -169,7 +169,7 @@ exports[`molecules::Sidebar > renders without exploding 1`] = `
        class="mantine-khtkeg"
      >
        <button
-          class="mantine-UnstyledButton-root mantine-3p8mxz"
+          class="mantine-UnstyledButton-root mantine-1wgvoyu"
          type="button"
        >
          <div
@ -188,7 +188,7 @@ exports[`molecules::Sidebar > renders without exploding 1`] = `
              />
            </svg>
            <div
-              class="mantine-Text-root mantine-Group-child __mantine-ref-text mantine-2juzrl"
+              class="mantine-Text-root mantine-Group-child __mantine-ref-text mantine-1omu9y9"
            >
              Account
            </div>
@ -199,10 +199,11 @@ exports[`molecules::Sidebar > renders without exploding 1`] = `
        class="mantine-khtkeg"
      >
        <div
-          class="mantine-a3o11y"
+          class="mantine-b98ato"
        >
-          <div
-            class="mantine-11cjvdx"
+          <button
+            class="mantine-UnstyledButton-root mantine-1v0qbt7"
+            type="button"
          >
            <div
              class="mantine-Stack-root mantine-lfk3cq"
@ -211,7 +212,7 @@ exports[`molecules::Sidebar > renders without exploding 1`] = `
                class="mantine-Group-root mantine-1lumg83"
              >
                <svg
-                  class="mantine-gnzaph mantine-Group-child"
+                  class="mantine-Group-child mantine-oilh7i"
                  fill="none"
                  height="1em"
                  viewBox="0 0 20 20"
@ -243,7 +244,7 @@ exports[`molecules::Sidebar > renders without exploding 1`] = `
                  </defs>
                </svg>
                <div
-                  class="mantine-Text-root mantine-Group-child mantine-1ohno7u"
+                  class="mantine-Text-root mantine-Group-child mantine-15e7vnj"
                >
                  Available Balance
                </div>
@ -251,37 +252,32 @@ exports[`molecules::Sidebar > renders without exploding 1`] = `
              <div
                class="mantine-Stack-root mantine-1kb6t4k"
              >
-                <button
-                  class="mantine-UnstyledButton-root mantine-1o6jmux"
-                  type="button"
+                <div
+                  class="mantine-Group-root mantine-6y1794"
                >
                  <div
-                    class="mantine-Group-root mantine-6y1794"
+                    class="mantine-Text-root mantine-Group-child mantine-3vx9ct"
                  >
-                    <div
-                      class="mantine-Text-root mantine-Group-child mantine-14ayao3"
-                    >
-                      10.647382650365
-                    </div>
-                    <svg
-                      class="mantine-gnzaph mantine-Group-child"
-                      fill="none"
-                      height="1em"
-                      viewBox="0 0 7 4"
-                      width="1em"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        clip-rule="evenodd"
-                        d="M2.91916 3.69319C3.23963 4.04927 3.76166 4.04657 4.07971 3.69319L6.82329 0.644746C7.14377 0.288661 7.01636 0 6.53811 0H0.460749C-0.0172283 0 -0.14248 0.291357 0.17557 0.644746L2.91916 3.69319Z"
-                        fill="#111111"
-                        fill-rule="evenodd"
-                      />
-                    </svg>
+                    10.647382650365
                  </div>
-                </button>
+                  <svg
+                    class="mantine-Group-child mantine-qg5oag"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 7 4"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      clip-rule="evenodd"
+                      d="M2.91916 3.69319C3.23963 4.04927 3.76166 4.04657 4.07971 3.69319L6.82329 0.644746C7.14377 0.288661 7.01636 0 6.53811 0H0.460749C-0.0172283 0 -0.14248 0.291357 0.17557 0.644746L2.91916 3.69319Z"
+                      fill="#111111"
+                      fill-rule="evenodd"
+                    />
+                  </svg>
+                </div>
                <div
-                  class="mantine-Text-root mantine-zvjvuq"
+                  class="mantine-Text-root mantine-14xctlx"
                >
                  (EUR 2441,02)
                </div>
@ -301,12 +297,12 @@ exports[`molecules::Sidebar > renders without exploding 1`] = `
                      class="mantine-Stack-root mantine-1kb6t4k"
                    >
                      <div
-                        class="mantine-Text-root mantine-ywyx71"
+                        class="mantine-Text-root mantine-xtp7ze"
                      >
                        Total
                      </div>
                      <div
-                        class="mantine-Text-root mantine-1lh77dt"
+                        class="mantine-Text-root mantine-pxv98s"
                      >
                        14.048212174412
                      </div>
@ -315,12 +311,12 @@ exports[`molecules::Sidebar > renders without exploding 1`] = `
                      class="mantine-Stack-root mantine-1kb6t4k"
                    >
                      <div
-                        class="mantine-Text-root mantine-ywyx71"
+                        class="mantine-Text-root mantine-xtp7ze"
                      >
                        Reserved
                      </div>
                      <div
-                        class="mantine-Text-root mantine-1lh77dt"
+                        class="mantine-Text-root mantine-pxv98s"
                      >
                        2.874598526325
                      </div>
@ -329,12 +325,12 @@ exports[`molecules::Sidebar > renders without exploding 1`] = `
                      class="mantine-Stack-root mantine-1kb6t4k"
                    >
                      <div
-                        class="mantine-Text-root mantine-ywyx71"
+                        class="mantine-Text-root mantine-xtp7ze"
                      >
                        Locked
                      </div>
                      <div
-                        class="mantine-Text-root mantine-1lh77dt"
+                        class="mantine-Text-root mantine-pxv98s"
                      >
                        0.854975624859
                      </div>
@ -343,7 +339,7 @@ exports[`molecules::Sidebar > renders without exploding 1`] = `
                </div>
              </div>
            </div>
-          </div>
+          </button>
        </div>
      </div>
    </nav>
--- a/packages/renderer/src/components/molecules/WalletBalance/WalletBalance.tsx
+++ b/packages/renderer/src/components/molecules/WalletBalance/WalletBalance.tsx
@ -16,7 +16,6 @@

 import { useState } from "react";
 import {
-  Box,
  Collapse,
  createStyles,
  Group,
@ -31,24 +30,22 @@ export function WalletBalance() {
  const [isOpen, setOpen] = useState(false);
  const { classes } = useStyles({ isOpen });
  return (
-    <Box className={classes.container}>
+    <UnstyledButton
+      className={classes.btnToggle}
+      onClick={() => setOpen(!isOpen)}
+    >
      <Stack>
        <Group spacing="sm">
-          <XMRLogo />
+          <XMRLogo className={classes.xmrLogo} />
          <Text className={classes.heading} weight={700}>
            Available Balance
          </Text>
        </Group>
        <Stack spacing={4}>
-          <UnstyledButton
-            className={classes.btnToggle}
-            onClick={() => setOpen(!isOpen)}
-          >
-            <Group>
-              <Text className={classes.xmr}>10.647382650365</Text>
-              <ArrowDown />
-            </Group>
-          </UnstyledButton>
+          <Group>
+            <Text className={classes.xmr}>10.647382650365</Text>
+            <ArrowDown className={classes.toggleIcon} />
+          </Group>
          <Text className={classes.fiat}>(EUR 2441,02)</Text>
        </Stack>
        <Collapse in={isOpen}>
@ -68,29 +65,34 @@ export function WalletBalance() {
          </Stack>
        </Collapse>
      </Stack>
-    </Box>
+    </UnstyledButton>
  );
 }

 const useStyles = createStyles<string, { isOpen: boolean }>(
  (theme, params) => ({
-    container: {
+    btnToggle: {
      border: `solid 1px ${theme.colors.gray[4]}`,
      borderRadius: theme.radius.md,
      padding: theme.spacing.md,
+
+      "&:hover": {
+        borderColor: theme.colors.gray[5],
+      },
+    },
+    xmrLogo: {
+      width: 20,
+    },
+    toggleIcon: {
+      transform: `rotate(${params.isOpen ? 180 : 0}deg)`,
+      transition: "transform 0.2s",
+      width: 8,
    },
    heading: {
      fontSize: "0.5rem",
      fontWeight: 700,
      textTransform: "uppercase",
    },
-    btnToggle: {
-      svg: {
-        transform: `rotate(${params.isOpen ? 180 : 0}deg)`,
-        transition: "transform 0.2s",
-        width: 8,
-      },
-    },
    xmr: {
      fontSize: "0.75rem",
      fontWeight: 600,
--- a/packages/renderer/src/components/molecules/WalletBalance/snapshots/WalletBalance.test.tsx.snap
+++ b/packages/renderer/src/components/molecules/WalletBalance/snapshots/WalletBalance.test.tsx.snap
@ -2,8 +2,9 @@

 exports[`molecules::WalletBalance > renders without exploding 1`] = `
 <DocumentFragment>
-  <div
-    class="mantine-11cjvdx"
+  <button
+    class="mantine-UnstyledButton-root mantine-1v0qbt7"
+    type="button"
  >
    <div
      class="mantine-Stack-root mantine-lfk3cq"
@ -12,7 +13,7 @@ exports[`molecules::WalletBalance > renders without exploding 1`] = `
        class="mantine-Group-root mantine-1lumg83"
      >
        <svg
-          class="mantine-gnzaph mantine-Group-child"
+          class="mantine-Group-child mantine-oilh7i"
          fill="none"
          height="1em"
          viewBox="0 0 20 20"
@ -44,7 +45,7 @@ exports[`molecules::WalletBalance > renders without exploding 1`] = `
          </defs>
        </svg>
        <div
-          class="mantine-Text-root mantine-Group-child mantine-1ohno7u"
+          class="mantine-Text-root mantine-Group-child mantine-15e7vnj"
        >
          Available Balance
        </div>
@ -52,37 +53,32 @@ exports[`molecules::WalletBalance > renders without exploding 1`] = `
      <div
        class="mantine-Stack-root mantine-1kb6t4k"
      >
-        <button
-          class="mantine-UnstyledButton-root mantine-1o6jmux"
-          type="button"
+        <div
+          class="mantine-Group-root mantine-6y1794"
        >
          <div
-            class="mantine-Group-root mantine-6y1794"
+            class="mantine-Text-root mantine-Group-child mantine-3vx9ct"
          >
-            <div
-              class="mantine-Text-root mantine-Group-child mantine-14ayao3"
-            >
-              10.647382650365
-            </div>
-            <svg
-              class="mantine-gnzaph mantine-Group-child"
-              fill="none"
-              height="1em"
-              viewBox="0 0 7 4"
-              width="1em"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                clip-rule="evenodd"
-                d="M2.91916 3.69319C3.23963 4.04927 3.76166 4.04657 4.07971 3.69319L6.82329 0.644746C7.14377 0.288661 7.01636 0 6.53811 0H0.460749C-0.0172283 0 -0.14248 0.291357 0.17557 0.644746L2.91916 3.69319Z"
-                fill="#111111"
-                fill-rule="evenodd"
-              />
-            </svg>
+            10.647382650365
          </div>
-        </button>
+          <svg
+            class="mantine-Group-child mantine-qg5oag"
+            fill="none"
+            height="1em"
+            viewBox="0 0 7 4"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              clip-rule="evenodd"
+              d="M2.91916 3.69319C3.23963 4.04927 3.76166 4.04657 4.07971 3.69319L6.82329 0.644746C7.14377 0.288661 7.01636 0 6.53811 0H0.460749C-0.0172283 0 -0.14248 0.291357 0.17557 0.644746L2.91916 3.69319Z"
+              fill="#111111"
+              fill-rule="evenodd"
+            />
+          </svg>
+        </div>
        <div
-          class="mantine-Text-root mantine-zvjvuq"
+          class="mantine-Text-root mantine-14xctlx"
        >
          (EUR 2441,02)
        </div>
@ -102,12 +98,12 @@ exports[`molecules::WalletBalance > renders without exploding 1`] = `
              class="mantine-Stack-root mantine-1kb6t4k"
            >
              <div
-                class="mantine-Text-root mantine-ywyx71"
+                class="mantine-Text-root mantine-xtp7ze"
              >
                Total
              </div>
              <div
-                class="mantine-Text-root mantine-1lh77dt"
+                class="mantine-Text-root mantine-pxv98s"
              >
                14.048212174412
              </div>
@ -116,12 +112,12 @@ exports[`molecules::WalletBalance > renders without exploding 1`] = `
              class="mantine-Stack-root mantine-1kb6t4k"
            >
              <div
-                class="mantine-Text-root mantine-ywyx71"
+                class="mantine-Text-root mantine-xtp7ze"
              >
                Reserved
              </div>
              <div
-                class="mantine-Text-root mantine-1lh77dt"
+                class="mantine-Text-root mantine-pxv98s"
              >
                2.874598526325
              </div>
@ -130,12 +126,12 @@ exports[`molecules::WalletBalance > renders without exploding 1`] = `
              class="mantine-Stack-root mantine-1kb6t4k"
            >
              <div
-                class="mantine-Text-root mantine-ywyx71"
+                class="mantine-Text-root mantine-xtp7ze"
              >
                Locked
              </div>
              <div
-                class="mantine-Text-root mantine-1lh77dt"
+                class="mantine-Text-root mantine-pxv98s"
              >
                0.854975624859
              </div>
@ -144,6 +140,6 @@ exports[`molecules::WalletBalance > renders without exploding 1`] = `
        </div>
      </div>
    </div>
-  </div>
+  </button>
 </DocumentFragment>
 `;
--- a/packages/renderer/src/pages/Onboarding/Home.stories.tsx
+++ b/packages/renderer/src/pages/Onboarding/Home.stories.tsx
@ -14,8 +14,8 @@
 //  limitations under the License.
 // =============================================================================

-import { Stack } from "@mantine/core";
 import type { ComponentStory, ComponentMeta } from "@storybook/react";
+import { AppProviders } from "@atoms/AppProviders";
 import { Home } from ".";

 export default {
@ -25,9 +25,9 @@ export default {

 const Template: ComponentStory<typeof Home> = () => {
  return (
-    <Stack>
+    <AppProviders>
      <Home />
-    </Stack>
+    </AppProviders>
  );
 };

--- a/packages/renderer/src/pages/Onboarding/Home.tsx
+++ b/packages/renderer/src/pages/Onboarding/Home.tsx
@ -15,18 +15,18 @@
 // =============================================================================

 import { FormattedMessage } from "react-intl";
-import { Space, Stack, Text } from "@mantine/core";
+import { Box, Space, Stack, Text } from "@mantine/core";
 import { LangKeys } from "@constants/lang/LangKeys";
 import { CenteredLayout } from "@templates/CenteredLayout";
-import Logo from "@assets/logo.svg";
 import { ConnectionProgress } from "@atoms/ConnectionProgress";
+import Logo from "@assets/logo.svg";

 export function Home() {
  return (
    <CenteredLayout>
      <Stack align="center" justify="center" sx={{ flex: 1 }}>
        <Stack>
-          <img src={Logo} alt="Haveno" />
+          <Box component="img" src={Logo} alt="Haveno" />
          <Text size="lg">
            <FormattedMessage
              id={LangKeys.AppHeading2}
--- a/packages/renderer/src/pages/Onboarding/Welcome.stories.tsx
+++ b/packages/renderer/src/pages/Onboarding/Welcome.stories.tsx
@ -14,8 +14,8 @@
 //  limitations under the License.
 // =============================================================================

-import { Stack } from "@mantine/core";
 import type { ComponentStory, ComponentMeta } from "@storybook/react";
+import { AppProviders } from "@atoms/AppProviders";
 import { Welcome } from ".";

 export default {
@ -25,9 +25,9 @@ export default {

 const Template: ComponentStory<typeof Welcome> = () => {
  return (
-    <Stack>
+    <AppProviders>
      <Welcome />
-    </Stack>
+    </AppProviders>
  );
 };

--- a/packages/renderer/src/theme/override.ts
+++ b/packages/renderer/src/theme/override.ts
@ -21,43 +21,57 @@ export const themeOverride: MantineThemeOverride = {
  headings: {
    fontFamily: "Inter",
  },
+  other: {
+    buttonHeight: 48,
+  },
  colors: {
-    brand: [
-      "#dff2ff",
-      "#b2caff",
-      "#b2d4ff",
-      "#83b8fc",
-      "#539bf7",
-      "#257ff4",
+    blue: [
+      "#E7F1FE",
+      "#BBD7FC",
+      "#8FBDF9",
+      "#64A4F7",
+      "#388AF5",
+      "#0C70F3",
      "#0b65da",
-      "#034fab",
-      "#00387b",
-      "#00224d",
+      "#074392",
+      "#052D61",
+      "#021631",
    ],
    gray: [
-      "#f8f9fa",
+      "#fcfcfc",
      "#f1f3f5",
      "#ececec",
      "#dee2e6",
      "#ced4da",
      "#adb5bd",
-      "#868e96",
-      "#495057",
+      "#888888",
+      "#515151",
      "#343a40",
      "#111111",
    ],
-    success: [
-      "#e8f9eb",
-      "#cbe5cd",
-      "#abd3af",
-      "#8bc08f",
-      "#6bad6d",
-      "#529458",
-      "#3e7347",
-      "#2b5234",
-      "#173220",
-      "#011207",
+    green: [
+      "#EFF6EF",
+      "#D1E6D2",
+      "#B3D5B4",
+      "#96C597",
+      "#75B377",
+      "#5BA45D",
+      "#48844A",
+      "#366338",
+      "#244225",
+      "#122113",
+    ],
+    red: [
+      "#FBECE9",
+      "#F5C9C2",
+      "#EEA69A",
+      "#E88373",
+      "#E2634E",
+      "#DB3E24",
+      "#AF321D",
+      "#832516",
+      "#58190E",
+      "#2C0C07",
    ],
  },
-  primaryColor: "brand",
 };