From b029419e7f414edefc387f1aa392f3e4f6d35730 Mon Sep 17 00:00:00 2001 From: Subir Date: Fri, 29 Apr 2022 00:42:52 +0530 Subject: [PATCH] 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 | 1 + .github/workflows/tests.yml | 1 + .github/workflows/typechecking.yml | 1 + .github/workflows/update-electron-vendors.yml | 1 + .../atoms/Buttons/Buttons.stories.tsx | 9 +- .../src/components/atoms/Buttons/Buttons.tsx | 18 ++-- .../__snapshots__/Buttons.test.tsx.snap | 8 +- .../ConnectionProgress/ConnectionProgress.tsx | 2 +- .../ConnectionProgress.test.tsx.snap | 4 +- .../components/molecules/Sidebar/Sidebar.tsx | 6 +- .../components/molecules/Sidebar/_NavLink.tsx | 4 +- .../__snapshots__/Sidebar.test.tsx.snap | 94 +++++++++---------- .../molecules/WalletBalance/WalletBalance.tsx | 44 ++++----- .../__snapshots__/WalletBalance.test.tsx.snap | 70 +++++++------- .../src/pages/Onboarding/Home.stories.tsx | 6 +- .../renderer/src/pages/Onboarding/Home.tsx | 6 +- .../src/pages/Onboarding/Welcome.stories.tsx | 6 +- packages/renderer/src/theme/override.ts | 64 ++++++++----- 18 files changed, 184 insertions(+), 161 deletions(-) diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml index 10b604b..1ae313a 100644 --- a/.github/workflows/lint.yml +++ b/.github/workflows/lint.yml @@ -3,6 +3,7 @@ on: push: branches: - master + - develop paths: - "**.js" - "**.ts" diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml index 02e541d..dc80488 100644 --- a/.github/workflows/tests.yml +++ b/.github/workflows/tests.yml @@ -3,6 +3,7 @@ on: push: branches: - master + - develop paths: - "packages/**" - "tests/**" diff --git a/.github/workflows/typechecking.yml b/.github/workflows/typechecking.yml index 9364ab0..eb738be 100644 --- a/.github/workflows/typechecking.yml +++ b/.github/workflows/typechecking.yml @@ -3,6 +3,7 @@ on: push: branches: - master + - develop paths: - "**.ts" - "**/tsconfig.json" diff --git a/.github/workflows/update-electron-vendors.yml b/.github/workflows/update-electron-vendors.yml index 1c4c294..0677487 100644 --- 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" diff --git a/packages/renderer/src/components/atoms/Buttons/Buttons.stories.tsx b/packages/renderer/src/components/atoms/Buttons/Buttons.stories.tsx index 06789ee..0ba4daf 100644 --- 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 = () => { + + + + + + + ); }; diff --git a/packages/renderer/src/components/atoms/Buttons/Buttons.tsx b/packages/renderer/src/components/atoms/Buttons/Buttons.tsx index cb9b1f4..ac430de 100644 --- a/packages/renderer/src/components/atoms/Buttons/Buttons.tsx +++ b/packages/renderer/src/components/atoms/Buttons/Buttons.tsx @@ -22,13 +22,14 @@ type ButtonProps = MButtonProps & { }; export function Button(props: ButtonProps) { - const { children, flavor = "primary", ...rest } = props; + const { children, className, flavor = "primary", ...rest } = props; const { classes, cx } = useStyles(); return ( (props: ButtonProps) { 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], }, }, })); diff --git a/packages/renderer/src/components/atoms/Buttons/__snapshots__/Buttons.test.tsx.snap b/packages/renderer/src/components/atoms/Buttons/__snapshots__/Buttons.test.tsx.snap index 80cd1e3..52c279a 100644 --- 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`] = ` + + + +
(EUR 2441,02)
@@ -301,12 +297,12 @@ exports[`molecules::Sidebar > renders without exploding 1`] = ` class="mantine-Stack-root mantine-1kb6t4k" >
Total
14.048212174412
@@ -315,12 +311,12 @@ exports[`molecules::Sidebar > renders without exploding 1`] = ` class="mantine-Stack-root mantine-1kb6t4k" >
Reserved
2.874598526325
@@ -329,12 +325,12 @@ exports[`molecules::Sidebar > renders without exploding 1`] = ` class="mantine-Stack-root mantine-1kb6t4k" >
Locked
0.854975624859
@@ -343,7 +339,7 @@ exports[`molecules::Sidebar > renders without exploding 1`] = ` - + diff --git a/packages/renderer/src/components/molecules/WalletBalance/WalletBalance.tsx b/packages/renderer/src/components/molecules/WalletBalance/WalletBalance.tsx index 2bbc0dd..f2d1421 100644 --- 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 ( - + setOpen(!isOpen)} + > - + Available Balance - setOpen(!isOpen)} - > - - 10.647382650365 - - - + + 10.647382650365 + + (EUR 2441,02) @@ -68,29 +65,34 @@ export function WalletBalance() { - + ); } const useStyles = createStyles( (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, diff --git a/packages/renderer/src/components/molecules/WalletBalance/__snapshots__/WalletBalance.test.tsx.snap b/packages/renderer/src/components/molecules/WalletBalance/__snapshots__/WalletBalance.test.tsx.snap index 531906a..f7a0e97 100644 --- 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`] = ` -
renders without exploding 1`] = ` class="mantine-Group-root mantine-1lumg83" > renders without exploding 1`] = `
Available Balance
@@ -52,37 +53,32 @@ exports[`molecules::WalletBalance > renders without exploding 1`] = `
- + + + +
(EUR 2441,02)
@@ -102,12 +98,12 @@ exports[`molecules::WalletBalance > renders without exploding 1`] = ` class="mantine-Stack-root mantine-1kb6t4k" >
Total
14.048212174412
@@ -116,12 +112,12 @@ exports[`molecules::WalletBalance > renders without exploding 1`] = ` class="mantine-Stack-root mantine-1kb6t4k" >
Reserved
2.874598526325
@@ -130,12 +126,12 @@ exports[`molecules::WalletBalance > renders without exploding 1`] = ` class="mantine-Stack-root mantine-1kb6t4k" >
Locked
0.854975624859
@@ -144,6 +140,6 @@ exports[`molecules::WalletBalance > renders without exploding 1`] = `
- + `; diff --git a/packages/renderer/src/pages/Onboarding/Home.stories.tsx b/packages/renderer/src/pages/Onboarding/Home.stories.tsx index fb40e38..b299250 100644 --- 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 = () => { return ( - + - + ); }; diff --git a/packages/renderer/src/pages/Onboarding/Home.tsx b/packages/renderer/src/pages/Onboarding/Home.tsx index 677e4d1..c7b50a5 100644 --- 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 ( - Haveno + = () => { return ( - + - + ); }; diff --git a/packages/renderer/src/theme/override.ts b/packages/renderer/src/theme/override.ts index c688735..a894a65 100644 --- 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", };