chore(styles): theme

- updated theme colors
- fixed button styles
- updated wallet balance molecule
- run CI checks on develop branch

---

Authored-by: schowdhuri

.github/workflows/lint.yml

@@ -3,6 +3,7 @@ on:
   push:
     branches:
       - master
+      - develop
     paths:
       - "**.js"
       - "**.ts"

.github/workflows/tests.yml

@@ -3,6 +3,7 @@ on:
   push:
     branches:
       - master
+      - develop
     paths:
       - "packages/**"
       - "tests/**"

.github/workflows/typechecking.yml

@@ -3,6 +3,7 @@ on:
   push:
     branches:
       - master
+      - develop
     paths:
       - "**.ts"
       - "**/tsconfig.json"

.github/workflows/update-electron-vendors.yml

@@ -3,6 +3,7 @@ on:
   push:
     branches:
       - master
+      - develop
     paths:
       - "yarn.lock"
 

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>
   );
 };

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,
+    height: theme.other.buttonHeight,
-    padding: "1rem",
+    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],
     },
   },
 }));

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

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",

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>

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,
+    height: "2rem",
-    padding: `${theme.spacing.lg} ${theme.spacing.xl}`,
+    padding: `${theme.spacing.lg}px ${theme.spacing.lg}px`,
   },
   container: {
     width: WIDTH,

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,

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
+          <button
-            class="mantine-11cjvdx"
+            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
+                <div
-                  class="mantine-UnstyledButton-root mantine-1o6jmux"
+                  class="mantine-Group-root mantine-6y1794"
-                  type="button"
                 >
                   <div
-                    class="mantine-Group-root mantine-6y1794"
+                    class="mantine-Text-root mantine-Group-child mantine-3vx9ct"
                   >
-                    <div
+                    10.647382650365
-                      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>
                   </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>

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
+          <Group>
-            className={classes.btnToggle}
+            <Text className={classes.xmr}>10.647382650365</Text>
-            onClick={() => setOpen(!isOpen)}
+            <ArrowDown className={classes.toggleIcon} />
-          >
+          </Group>
-            <Group>
-              <Text className={classes.xmr}>10.647382650365</Text>
-              <ArrowDown />
-            </Group>
-          </UnstyledButton>
           <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,

packages/renderer/src/components/molecules/WalletBalance/__snapshots__/WalletBalance.test.tsx.snap

@@ -2,8 +2,9 @@
 
 exports[`molecules::WalletBalance > renders without exploding 1`] = `
 <DocumentFragment>
-  <div
+  <button
-    class="mantine-11cjvdx"
+    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
+        <div
-          class="mantine-UnstyledButton-root mantine-1o6jmux"
+          class="mantine-Group-root mantine-6y1794"
-          type="button"
         >
           <div
-            class="mantine-Group-root mantine-6y1794"
+            class="mantine-Text-root mantine-Group-child mantine-3vx9ct"
           >
-            <div
+            10.647382650365
-              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>
           </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>
 `;

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>
   );
 };
 

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}

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>
   );
 };
 

packages/renderer/src/theme/override.ts

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