From 7de255069426a88384b27dd7598ef53b181d53df Mon Sep 17 00:00:00 2001 From: Gerard Date: Thu, 28 Nov 2024 12:03:16 +0100 Subject: [PATCH 01/16] applied figma styles, closes #854 --- src/theme/colors.ts | 9 ++++++++- src/theme/components/alert.ts | 32 ++++++++++++++++++++++++++++++++ src/theme/index.ts | 2 ++ 3 files changed, 42 insertions(+), 1 deletion(-) create mode 100644 src/theme/components/alert.ts diff --git a/src/theme/colors.ts b/src/theme/colors.ts index 50af1376..0f3130ea 100644 --- a/src/theme/colors.ts +++ b/src/theme/colors.ts @@ -8,7 +8,7 @@ export const colorsBase = { }, gradient: 'linear-gradient(to right, #546E39, #2E441A)', gray: { - light: '#CBD5E0', + light: 'rgba(255, 255, 255, 0.24)', normal: '#718096', }, primary: '#546E39', @@ -24,6 +24,13 @@ export const colorsBase = { export const colors = { account_create_text_secondary: colorsBase.gray.normal, + alert: { + bg: { + light: colorsBase.white.pure, + dark: colorsBase.blue.grayish, + }, + border: colorsBase.gray.light, + }, auth: { textColorSecondary: colorsBase.gray.normal, }, diff --git a/src/theme/components/alert.ts b/src/theme/components/alert.ts new file mode 100644 index 00000000..d48bf9d4 --- /dev/null +++ b/src/theme/components/alert.ts @@ -0,0 +1,32 @@ +import { alertAnatomy } from '@chakra-ui/anatomy' +import { createMultiStyleConfigHelpers } from '@chakra-ui/react' +import { InfoIcon, WarningIcon, CheckIcon, CloseIcon } from '@chakra-ui/icons' + +const { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpers(alertAnatomy.keys) + +const baseStyle = definePartsStyle({ + container: { + bgColor: 'alert.bg.light', + display: 'grid', + gridTemplateColumns: { base: '1fr', lg: 'fit-content(50px) 1fr' }, + border: '1px solid', + borderColor: 'alert.border', + borderRadius: 'lg', + width: 'fit-content', + + _dark: { + bgColor: 'alert.bg.dark', + }, + }, + title: { + gridColumn: { lg: 2 }, + }, + description: { + gridColumn: { lg: 2 }, + }, + icon: { + gridColumn: 1, + }, +}) + +export const Alert = defineMultiStyleConfig({ baseStyle }) diff --git a/src/theme/index.ts b/src/theme/index.ts index ed0dc68e..4f58ab4c 100644 --- a/src/theme/index.ts +++ b/src/theme/index.ts @@ -23,6 +23,7 @@ import { Text } from './components/text' import { Textarea } from './components/textarea' import { editor } from './editor' import { spacing } from './space' +import { Alert } from './components/alert' export const theme = extendTheme(vtheme, { config: { @@ -79,6 +80,7 @@ export const theme = extendTheme(vtheme, { }, components: { Accordion, + Alert, Badge, Button, Card, From 4d380437a71a3bc4f432761a4c1afdeb98f4443d Mon Sep 17 00:00:00 2001 From: Gerard Date: Thu, 28 Nov 2024 16:22:17 +0100 Subject: [PATCH 02/16] fixed issues --- src/components/Home/index.tsx | 7 ++++++- src/theme/colors.ts | 7 ++++--- src/theme/components/alert.ts | 5 ----- 3 files changed, 10 insertions(+), 9 deletions(-) diff --git a/src/components/Home/index.tsx b/src/components/Home/index.tsx index d5124009..cc6d034b 100644 --- a/src/components/Home/index.tsx +++ b/src/components/Home/index.tsx @@ -1,4 +1,4 @@ -import { Box } from '@chakra-ui/react' +import { Alert, AlertDescription, AlertIcon, AlertTitle, Box } from '@chakra-ui/react' import Benefits from './Benefits' import Clients from './Clients' import ContactUs from './ContactUs' @@ -12,6 +12,11 @@ import Support from './Support' const Home = () => ( <> + + + Your browser is outdated! + Your Chakra experience may be degraded. + diff --git a/src/theme/colors.ts b/src/theme/colors.ts index 0f3130ea..c1797a93 100644 --- a/src/theme/colors.ts +++ b/src/theme/colors.ts @@ -8,7 +8,8 @@ export const colorsBase = { }, gradient: 'linear-gradient(to right, #546E39, #2E441A)', gray: { - light: 'rgba(255, 255, 255, 0.24)', + light2: 'rgba(255, 255, 255, 0.24)', + light: '#CBD5E0', normal: '#718096', }, primary: '#546E39', @@ -161,12 +162,12 @@ export const colors = { }, border: { dark: colorsBase.white, - light: colorsBase.gray.light, + light: colorsBase.gray.light2, }, disabled: colorsBase.gray.normal, hover: { dark: colorsBase.white, - light: colorsBase.gray.light, + light: colorsBase.gray.light2, }, outline: colorsBase.blue.normal, placeholder: colorsBase.gray.normal, diff --git a/src/theme/components/alert.ts b/src/theme/components/alert.ts index d48bf9d4..a20ce131 100644 --- a/src/theme/components/alert.ts +++ b/src/theme/components/alert.ts @@ -6,17 +6,12 @@ const { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpe const baseStyle = definePartsStyle({ container: { - bgColor: 'alert.bg.light', display: 'grid', gridTemplateColumns: { base: '1fr', lg: 'fit-content(50px) 1fr' }, border: '1px solid', borderColor: 'alert.border', borderRadius: 'lg', width: 'fit-content', - - _dark: { - bgColor: 'alert.bg.dark', - }, }, title: { gridColumn: { lg: 2 }, From 785783c49e81018e7a45b63c0d762895e7a3f697 Mon Sep 17 00:00:00 2001 From: Gerard Date: Thu, 28 Nov 2024 16:24:06 +0100 Subject: [PATCH 03/16] removed Alert --- src/components/Home/index.tsx | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/src/components/Home/index.tsx b/src/components/Home/index.tsx index cc6d034b..d5124009 100644 --- a/src/components/Home/index.tsx +++ b/src/components/Home/index.tsx @@ -1,4 +1,4 @@ -import { Alert, AlertDescription, AlertIcon, AlertTitle, Box } from '@chakra-ui/react' +import { Box } from '@chakra-ui/react' import Benefits from './Benefits' import Clients from './Clients' import ContactUs from './ContactUs' @@ -12,11 +12,6 @@ import Support from './Support' const Home = () => ( <> - - - Your browser is outdated! - Your Chakra experience may be degraded. - From 0fc2917ffda12fae3589b4baaabefb831d28857a Mon Sep 17 00:00:00 2001 From: Gerard Date: Tue, 3 Dec 2024 10:52:52 +0100 Subject: [PATCH 04/16] alert icon custom --- src/components/Layout/AlertIconCustom.tsx | 35 +++++++++++ src/theme/colors.ts | 2 +- src/theme/components/alert.ts | 71 ++++++++++++++++------- 3 files changed, 86 insertions(+), 22 deletions(-) create mode 100644 src/components/Layout/AlertIconCustom.tsx diff --git a/src/components/Layout/AlertIconCustom.tsx b/src/components/Layout/AlertIconCustom.tsx new file mode 100644 index 00000000..d5be61f2 --- /dev/null +++ b/src/components/Layout/AlertIconCustom.tsx @@ -0,0 +1,35 @@ +import { AlertIconProps, chakra, useAlertStyles } from '@chakra-ui/react' +import { cx } from '@chakra-ui/utils' +import { FaRegCheckCircle } from 'react-icons/fa' +import { RiErrorWarningLine } from 'react-icons/ri' + +interface AlertIconCustomProps extends AlertIconProps { + status: string +} + +const icons = { + info: , + warning: , + success: , + error: , +} + +export const AlertIcon = ({ status = 'info', ...props }: AlertIconCustomProps) => { + const styles = useAlertStyles() + const css = status === 'loading' ? styles.spinner : styles.icon + + const IconComponent = icons[status] || + + return ( + + {IconComponent} + + ) +} diff --git a/src/theme/colors.ts b/src/theme/colors.ts index c1797a93..947015c5 100644 --- a/src/theme/colors.ts +++ b/src/theme/colors.ts @@ -8,7 +8,7 @@ export const colorsBase = { }, gradient: 'linear-gradient(to right, #546E39, #2E441A)', gray: { - light2: 'rgba(255, 255, 255, 0.24)', + light2: '#ffffff3d', light: '#CBD5E0', normal: '#718096', }, diff --git a/src/theme/components/alert.ts b/src/theme/components/alert.ts index a20ce131..32bc55a7 100644 --- a/src/theme/components/alert.ts +++ b/src/theme/components/alert.ts @@ -1,27 +1,56 @@ import { alertAnatomy } from '@chakra-ui/anatomy' import { createMultiStyleConfigHelpers } from '@chakra-ui/react' -import { InfoIcon, WarningIcon, CheckIcon, CloseIcon } from '@chakra-ui/icons' -const { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpers(alertAnatomy.keys) +const { defineMultiStyleConfig } = createMultiStyleConfigHelpers(alertAnatomy.keys) -const baseStyle = definePartsStyle({ - container: { - display: 'grid', - gridTemplateColumns: { base: '1fr', lg: 'fit-content(50px) 1fr' }, - border: '1px solid', - borderColor: 'alert.border', - borderRadius: 'lg', - width: 'fit-content', - }, - title: { - gridColumn: { lg: 2 }, - }, - description: { - gridColumn: { lg: 2 }, - }, - icon: { - gridColumn: 1, - }, -}) +const baseStyle = (props: any) => { + const { status } = props + + let iconBorderRadius = 'lg' + let iconColor = '#718096' + let iconBoxShadow = '0 0 2px 1px #B0B0B0, 0 0 0 3px white, 0 0 2px 3px #9EABB9' + if (status === 'success') { + iconBorderRadius = 'full' + iconColor = '#00FF00' + iconBoxShadow = '0 0 2px 1px #32F032, 0 0 0 3px white, 0 0 2px 3px #9EABB9' + } else if (status === 'error') { + iconBorderRadius = 'full' + iconColor = '#FF0000' + iconBoxShadow = '0 0 2px 1px #F03232, 0 0 0 3px white, 0 0 2px 3px #9EABB9' + } else if (status === 'warning') { + iconBorderRadius = 'full' + iconColor = '#FFA500' + iconBoxShadow = '0 0 2px 1px #F0B432, 0 0 0 3px white, 0 0 2px 3px #9EABB9' + } + + return { + container: { + display: 'grid', + gridTemplateColumns: { base: '1fr', lg: 'fit-content(50px) 1fr' }, + border: '1px solid', + borderColor: 'alert.border', + borderRadius: 'lg', + width: 'fit-content', + bgColor: 'white', + }, + title: { + gridColumn: { lg: 2 }, + }, + description: { + gridColumn: { lg: 2 }, + }, + icon: { + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + gridColumn: 1, + color: iconColor, + boxShadow: iconBoxShadow, + borderRadius: iconBorderRadius, + w: 4, + h: 4, + }, + } +} export const Alert = defineMultiStyleConfig({ baseStyle }) From 069614e9300aad0756f99424ed72675d81c0bdb6 Mon Sep 17 00:00:00 2001 From: Gerard Date: Wed, 4 Dec 2024 20:24:53 +0100 Subject: [PATCH 05/16] alert icon boxshadow --- src/components/Home/index.tsx | 7 ++++++- src/components/Layout/AlertIconCustom.tsx | 5 +++-- src/theme/colors.ts | 2 +- src/theme/components/alert.ts | 22 +++++++++++++++++----- 4 files changed, 27 insertions(+), 9 deletions(-) diff --git a/src/components/Home/index.tsx b/src/components/Home/index.tsx index d5124009..a6945f0f 100644 --- a/src/components/Home/index.tsx +++ b/src/components/Home/index.tsx @@ -1,4 +1,4 @@ -import { Box } from '@chakra-ui/react' +import { Alert, AlertDescription, AlertIcon, AlertTitle, Box } from '@chakra-ui/react' import Benefits from './Benefits' import Clients from './Clients' import ContactUs from './ContactUs' @@ -13,6 +13,11 @@ const Home = () => ( <> + + + TITLE + DESCRIPTION + diff --git a/src/components/Layout/AlertIconCustom.tsx b/src/components/Layout/AlertIconCustom.tsx index d5be61f2..6e4bd59c 100644 --- a/src/components/Layout/AlertIconCustom.tsx +++ b/src/components/Layout/AlertIconCustom.tsx @@ -1,4 +1,4 @@ -import { AlertIconProps, chakra, useAlertStyles } from '@chakra-ui/react' +import { AlertIconProps, chakra, useAlertContext, useAlertStyles } from '@chakra-ui/react' import { cx } from '@chakra-ui/utils' import { FaRegCheckCircle } from 'react-icons/fa' import { RiErrorWarningLine } from 'react-icons/ri' @@ -14,8 +14,9 @@ const icons = { error: , } -export const AlertIcon = ({ status = 'info', ...props }: AlertIconCustomProps) => { +export const AlertIcon = ({ ...props }: AlertIconCustomProps) => { const styles = useAlertStyles() + const { status } = useAlertContext() const css = status === 'loading' ? styles.spinner : styles.icon const IconComponent = icons[status] || diff --git a/src/theme/colors.ts b/src/theme/colors.ts index 8dc3aa2e..a500e19d 100644 --- a/src/theme/colors.ts +++ b/src/theme/colors.ts @@ -28,7 +28,7 @@ export const colors = { alert: { bg: { light: colorsBase.white.pure, - dark: colorsBase.blue.grayish, + dark: colorsBase.blue.dark, }, border: colorsBase.gray.light, }, diff --git a/src/theme/components/alert.ts b/src/theme/components/alert.ts index 32bc55a7..42ad3d7c 100644 --- a/src/theme/components/alert.ts +++ b/src/theme/components/alert.ts @@ -8,19 +8,24 @@ const baseStyle = (props: any) => { let iconBorderRadius = 'lg' let iconColor = '#718096' - let iconBoxShadow = '0 0 2px 1px #B0B0B0, 0 0 0 3px white, 0 0 2px 3px #9EABB9' + let iconBoxShadow = '0 0 0px 1px white, 0 0 0px 2px #9EABB9, 0 0 0 3px white, 0 0 1px 4px #9EABB9' + let iconBoxShadowDark = '0 0 0px 1px #1A202C, 0 0 0px 2px #9EABB9, 0 0 0 3px #1A202C, 0 0 1px 4px #9EABB9' + if (status === 'success') { iconBorderRadius = 'full' iconColor = '#00FF00' - iconBoxShadow = '0 0 2px 1px #32F032, 0 0 0 3px white, 0 0 2px 3px #9EABB9' + iconBoxShadow = '0 0 0px 1px white, 0 0 0px 2px #32F032, 0 0 0 3px white, 0 0 2px 4px #32F032' + iconBoxShadowDark = '0 0 0px 1px #1A202C, 0 0 0px 2px #32F032, 0 0 0 3px #1A202C, 0 0 0px 4px #32F032' } else if (status === 'error') { iconBorderRadius = 'full' iconColor = '#FF0000' - iconBoxShadow = '0 0 2px 1px #F03232, 0 0 0 3px white, 0 0 2px 3px #9EABB9' + iconBoxShadow = '0 0 0px 1px white, 0 0 0px 2px #F03232, 0 0 0 3px white, 0 0 2px 4px #F03232' + iconBoxShadowDark = '0 0 0px 1px #1A202C, 0 0 0px 2px #F03232, 0 0 0 3px #1A202C, 0 0 0px 4px #F03232' } else if (status === 'warning') { iconBorderRadius = 'full' iconColor = '#FFA500' - iconBoxShadow = '0 0 2px 1px #F0B432, 0 0 0 3px white, 0 0 2px 3px #9EABB9' + iconBoxShadow = '0 0 0px 1px white, 0 0 0px 2px #F0B432, 0 0 0 3px white, 0 0 2px 4px #F0B432' + iconBoxShadow = '0 0 0px 1px #1A202C, 0 0 0px 2px #F0B432, 0 0 0 3px #1A202C, 0 0 0px 4px #F0B432' } return { @@ -31,7 +36,11 @@ const baseStyle = (props: any) => { borderColor: 'alert.border', borderRadius: 'lg', width: 'fit-content', - bgColor: 'white', + bgColor: 'alert.bg.light', + + _dark: { + bgColor: 'alert.bg.dark', + }, }, title: { gridColumn: { lg: 2 }, @@ -47,6 +56,9 @@ const baseStyle = (props: any) => { color: iconColor, boxShadow: iconBoxShadow, borderRadius: iconBorderRadius, + _dark: { + boxShadow: iconBoxShadowDark, + }, w: 4, h: 4, }, From c882fc16caf10e57ecd5a79503931282154d882b Mon Sep 17 00:00:00 2001 From: Gerard Date: Wed, 4 Dec 2024 20:25:14 +0100 Subject: [PATCH 06/16] remove home alert --- src/components/Home/index.tsx | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/src/components/Home/index.tsx b/src/components/Home/index.tsx index a6945f0f..d5124009 100644 --- a/src/components/Home/index.tsx +++ b/src/components/Home/index.tsx @@ -1,4 +1,4 @@ -import { Alert, AlertDescription, AlertIcon, AlertTitle, Box } from '@chakra-ui/react' +import { Box } from '@chakra-ui/react' import Benefits from './Benefits' import Clients from './Clients' import ContactUs from './ContactUs' @@ -13,11 +13,6 @@ const Home = () => ( <> - - - TITLE - DESCRIPTION - From a70f5f086bfab3a9f0e01031e51ccfdfc38c620d Mon Sep 17 00:00:00 2001 From: Gerard Date: Wed, 4 Dec 2024 20:26:34 +0100 Subject: [PATCH 07/16] change AlertIconCustom to AlertIcon --- src/components/Layout/{AlertIconCustom.tsx => AlertIcon.tsx} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/components/Layout/{AlertIconCustom.tsx => AlertIcon.tsx} (100%) diff --git a/src/components/Layout/AlertIconCustom.tsx b/src/components/Layout/AlertIcon.tsx similarity index 100% rename from src/components/Layout/AlertIconCustom.tsx rename to src/components/Layout/AlertIcon.tsx From 3c4e5a66efda034b4dfbb15d4a8375b2960d228c Mon Sep 17 00:00:00 2001 From: Gerard Date: Thu, 5 Dec 2024 10:57:27 +0100 Subject: [PATCH 08/16] remove AlertIcon unnecessary props --- src/components/Layout/AlertIcon.tsx | 8 ++------ src/theme/components/alert.ts | 16 ++++++++-------- 2 files changed, 10 insertions(+), 14 deletions(-) diff --git a/src/components/Layout/AlertIcon.tsx b/src/components/Layout/AlertIcon.tsx index 6e4bd59c..47079664 100644 --- a/src/components/Layout/AlertIcon.tsx +++ b/src/components/Layout/AlertIcon.tsx @@ -1,12 +1,8 @@ -import { AlertIconProps, chakra, useAlertContext, useAlertStyles } from '@chakra-ui/react' +import { chakra, useAlertContext, useAlertStyles } from '@chakra-ui/react' import { cx } from '@chakra-ui/utils' import { FaRegCheckCircle } from 'react-icons/fa' import { RiErrorWarningLine } from 'react-icons/ri' -interface AlertIconCustomProps extends AlertIconProps { - status: string -} - const icons = { info: , warning: , @@ -14,7 +10,7 @@ const icons = { error: , } -export const AlertIcon = ({ ...props }: AlertIconCustomProps) => { +export const AlertIcon = ({ props }) => { const styles = useAlertStyles() const { status } = useAlertContext() const css = status === 'loading' ? styles.spinner : styles.icon diff --git a/src/theme/components/alert.ts b/src/theme/components/alert.ts index 42ad3d7c..4d64cff7 100644 --- a/src/theme/components/alert.ts +++ b/src/theme/components/alert.ts @@ -8,24 +8,24 @@ const baseStyle = (props: any) => { let iconBorderRadius = 'lg' let iconColor = '#718096' - let iconBoxShadow = '0 0 0px 1px white, 0 0 0px 2px #9EABB9, 0 0 0 3px white, 0 0 1px 4px #9EABB9' - let iconBoxShadowDark = '0 0 0px 1px #1A202C, 0 0 0px 2px #9EABB9, 0 0 0 3px #1A202C, 0 0 1px 4px #9EABB9' + let iconBoxShadow = '0 0 0px 1px white, 0 0 0px 3px #9EABB9, 0 0 0 4px white, 0 0 1px 5px #9EABB9' + let iconBoxShadowDark = '0 0 0px 1px #1A202C, 0 0 0px 3px #9EABB9, 0 0 0 4px #1A202C, 0 0 1px 5px #9EABB9' if (status === 'success') { iconBorderRadius = 'full' iconColor = '#00FF00' - iconBoxShadow = '0 0 0px 1px white, 0 0 0px 2px #32F032, 0 0 0 3px white, 0 0 2px 4px #32F032' - iconBoxShadowDark = '0 0 0px 1px #1A202C, 0 0 0px 2px #32F032, 0 0 0 3px #1A202C, 0 0 0px 4px #32F032' + iconBoxShadow = '0 0 0px 1px white, 0 0 0px 3px #32F032, 0 0 0 4px white, 0 0 2px 5px #32F032' + iconBoxShadowDark = '0 0 0px 1px #1A202C, 0 0 0px 3px #32F032, 0 0 0 4px #1A202C, 0 0 0px 5px #32F032' } else if (status === 'error') { iconBorderRadius = 'full' iconColor = '#FF0000' - iconBoxShadow = '0 0 0px 1px white, 0 0 0px 2px #F03232, 0 0 0 3px white, 0 0 2px 4px #F03232' - iconBoxShadowDark = '0 0 0px 1px #1A202C, 0 0 0px 2px #F03232, 0 0 0 3px #1A202C, 0 0 0px 4px #F03232' + iconBoxShadow = '0 0 0px 1px white, 0 0 0px 3px #F03232, 0 0 0 4px white, 0 0 2px 5px #F03232' + iconBoxShadowDark = '0 0 0px 1px #1A202C, 0 0 0px 3px #F03232, 0 0 0 5px #1A202C, 0 0 0px 5px #F03232' } else if (status === 'warning') { iconBorderRadius = 'full' iconColor = '#FFA500' - iconBoxShadow = '0 0 0px 1px white, 0 0 0px 2px #F0B432, 0 0 0 3px white, 0 0 2px 4px #F0B432' - iconBoxShadow = '0 0 0px 1px #1A202C, 0 0 0px 2px #F0B432, 0 0 0 3px #1A202C, 0 0 0px 4px #F0B432' + iconBoxShadow = '0 0 0px 1px white, 0 0 0px 3px #F0B432, 0 0 0 4px white, 0 0 2px 5px #F0B432' + iconBoxShadow = '0 0 0px 1px #1A202C, 0 0 0px 3px #F0B432, 0 0 0 4px #1A202C, 0 0 0px 5px #F0B432' } return { From 55461dd9a2fc60d86a834a8a23658ea7713b8bc2 Mon Sep 17 00:00:00 2001 From: Gerard Date: Thu, 5 Dec 2024 11:10:46 +0100 Subject: [PATCH 09/16] alert icon correct type --- src/components/Layout/AlertIcon.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Layout/AlertIcon.tsx b/src/components/Layout/AlertIcon.tsx index 47079664..2310696d 100644 --- a/src/components/Layout/AlertIcon.tsx +++ b/src/components/Layout/AlertIcon.tsx @@ -1,4 +1,4 @@ -import { chakra, useAlertContext, useAlertStyles } from '@chakra-ui/react' +import { AlertIconProps, chakra, useAlertContext, useAlertStyles } from '@chakra-ui/react' import { cx } from '@chakra-ui/utils' import { FaRegCheckCircle } from 'react-icons/fa' import { RiErrorWarningLine } from 'react-icons/ri' @@ -10,7 +10,7 @@ const icons = { error: , } -export const AlertIcon = ({ props }) => { +export const AlertIcon = (props: AlertIconProps) => { const styles = useAlertStyles() const { status } = useAlertContext() const css = status === 'loading' ? styles.spinner : styles.icon From fa4984b57c38b900a39d1b44ecec4163283f9368 Mon Sep 17 00:00:00 2001 From: Gerard Date: Thu, 5 Dec 2024 11:19:01 +0100 Subject: [PATCH 10/16] changed variable IconComponent to icon --- src/components/Layout/AlertIcon.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Layout/AlertIcon.tsx b/src/components/Layout/AlertIcon.tsx index 2310696d..871d6fba 100644 --- a/src/components/Layout/AlertIcon.tsx +++ b/src/components/Layout/AlertIcon.tsx @@ -15,7 +15,7 @@ export const AlertIcon = (props: AlertIconProps) => { const { status } = useAlertContext() const css = status === 'loading' ? styles.spinner : styles.icon - const IconComponent = icons[status] || + const icon = icons[status] || return ( { __css={css} {...props} > - {IconComponent} + {icon} ) } From f7bca3555a326d719f6cd013902511d8a2d39530 Mon Sep 17 00:00:00 2001 From: Gerard Date: Thu, 5 Dec 2024 11:57:37 +0100 Subject: [PATCH 11/16] refactor boxshadow alert icon --- src/theme/colors.ts | 6 +++ src/theme/components/alert.ts | 96 ++++++++++++++++++++++++++--------- 2 files changed, 77 insertions(+), 25 deletions(-) diff --git a/src/theme/colors.ts b/src/theme/colors.ts index a500e19d..e72a8fdb 100644 --- a/src/theme/colors.ts +++ b/src/theme/colors.ts @@ -12,6 +12,8 @@ export const colorsBase = { light: '#CBD5E0', normal: '#718096', }, + green: '#00FF00', + orange: '#FFA500', primary: '#546E39', primary_dark: 'rgba(84, 110, 57, 0.2)', white: { @@ -31,6 +33,10 @@ export const colors = { dark: colorsBase.blue.dark, }, border: colorsBase.gray.light, + error: colorsBase.green, + info: colorsBase.gray.normal, + success: colorsBase.green, + warning: colorsBase.orange, }, auth: { textColorSecondary: colorsBase.gray.normal, diff --git a/src/theme/components/alert.ts b/src/theme/components/alert.ts index 4d64cff7..ff642475 100644 --- a/src/theme/components/alert.ts +++ b/src/theme/components/alert.ts @@ -1,33 +1,80 @@ +// import { alertAnatomy } from '@chakra-ui/anatomy' +// import { createMultiStyleConfigHelpers } from '@chakra-ui/react' + +// const { defineMultiStyleConfig } = createMultiStyleConfigHelpers(alertAnatomy.keys) + +// const statusColor = { +// info: 'account.info', +// success: 'account.green', +// error: 'account.error', +// warning: 'account.warning', +// } + +// const baseStyle = (props: any) => { +// const { status } = props + +// return { +// container: { +// display: 'grid', +// gridTemplateColumns: { base: '1fr', lg: 'fit-content(50px) 1fr' }, +// border: '1px solid', +// borderColor: 'alert.border', +// borderRadius: 'lg', +// width: 'fit-content', +// bgColor: 'alert.bg.light', + +// _dark: { +// bgColor: 'alert.bg.dark', +// }, +// }, +// title: { +// gridColumn: { lg: 2 }, +// }, +// description: { +// gridColumn: { lg: 2 }, +// }, +// icon: { +// display: 'flex', +// justifyContent: 'center', +// alignItems: 'center', +// gridColumn: 1, +// color: statusColor[status], +// boxShadow: `0 0 0px 1px white, 0 0 0px 3px ${statusColor[status]}, 0 0 0 4px white, 0 0 1px 5px ${statusColor[status]}`, +// borderRadius: 'lg', +// _dark: { +// boxShadow: `0 0 0px 1px #1A202C, 0 0 0px 3px ${statusColor[status]}, 0 0 0 4px #1A202C, 0 0 1px 5px ${statusColor[status]}`, +// }, +// w: 4, +// h: 4, +// }, +// } +// } + +// export const Alert = defineMultiStyleConfig({ baseStyle }) import { alertAnatomy } from '@chakra-ui/anatomy' -import { createMultiStyleConfigHelpers } from '@chakra-ui/react' +import { createMultiStyleConfigHelpers, useToken } from '@chakra-ui/react' const { defineMultiStyleConfig } = createMultiStyleConfigHelpers(alertAnatomy.keys) const baseStyle = (props: any) => { const { status } = props - let iconBorderRadius = 'lg' - let iconColor = '#718096' - let iconBoxShadow = '0 0 0px 1px white, 0 0 0px 3px #9EABB9, 0 0 0 4px white, 0 0 1px 5px #9EABB9' - let iconBoxShadowDark = '0 0 0px 1px #1A202C, 0 0 0px 3px #9EABB9, 0 0 0 4px #1A202C, 0 0 1px 5px #9EABB9' + const [infoColor, successColor, errorColor, warningColor] = useToken('colors', [ + 'var(--chakra-colors-alert-info)', + 'var(--chakra-colors-alert-success)', + 'var(--chakra-colors-alert-error)', + 'var(--chakra-colors-alert-warning)', + ]) - if (status === 'success') { - iconBorderRadius = 'full' - iconColor = '#00FF00' - iconBoxShadow = '0 0 0px 1px white, 0 0 0px 3px #32F032, 0 0 0 4px white, 0 0 2px 5px #32F032' - iconBoxShadowDark = '0 0 0px 1px #1A202C, 0 0 0px 3px #32F032, 0 0 0 4px #1A202C, 0 0 0px 5px #32F032' - } else if (status === 'error') { - iconBorderRadius = 'full' - iconColor = '#FF0000' - iconBoxShadow = '0 0 0px 1px white, 0 0 0px 3px #F03232, 0 0 0 4px white, 0 0 2px 5px #F03232' - iconBoxShadowDark = '0 0 0px 1px #1A202C, 0 0 0px 3px #F03232, 0 0 0 5px #1A202C, 0 0 0px 5px #F03232' - } else if (status === 'warning') { - iconBorderRadius = 'full' - iconColor = '#FFA500' - iconBoxShadow = '0 0 0px 1px white, 0 0 0px 3px #F0B432, 0 0 0 4px white, 0 0 2px 5px #F0B432' - iconBoxShadow = '0 0 0px 1px #1A202C, 0 0 0px 3px #F0B432, 0 0 0 4px #1A202C, 0 0 0px 5px #F0B432' + const statusColorMap = { + info: infoColor, + success: successColor, + error: errorColor, + warning: warningColor, } + const color = statusColorMap[status] + return { container: { display: 'grid', @@ -37,7 +84,6 @@ const baseStyle = (props: any) => { borderRadius: 'lg', width: 'fit-content', bgColor: 'alert.bg.light', - _dark: { bgColor: 'alert.bg.dark', }, @@ -53,11 +99,11 @@ const baseStyle = (props: any) => { justifyContent: 'center', alignItems: 'center', gridColumn: 1, - color: iconColor, - boxShadow: iconBoxShadow, - borderRadius: iconBorderRadius, + color, + boxShadow: `0 0 0px 1px white, 0 0 0px 3px ${color}, 0 0 0 4px white, 0 0 1px 5px ${color}`, + borderRadius: 'lg', _dark: { - boxShadow: iconBoxShadowDark, + boxShadow: `0 0 0px 1px #1A202C, 0 0 0px 3px ${color}, 0 0 0 4px #1A202C, 0 0 1px 5px ${color}`, }, w: 4, h: 4, From f4d136fba710b37c033879f8b4e0e3c1c6dc2cc0 Mon Sep 17 00:00:00 2001 From: Gerard Date: Thu, 5 Dec 2024 12:00:24 +0100 Subject: [PATCH 12/16] light and dark color alert icon --- src/theme/colors.ts | 2 ++ src/theme/components/alert.ts | 57 ++--------------------------------- 2 files changed, 4 insertions(+), 55 deletions(-) diff --git a/src/theme/colors.ts b/src/theme/colors.ts index e72a8fdb..f5d0222e 100644 --- a/src/theme/colors.ts +++ b/src/theme/colors.ts @@ -37,6 +37,8 @@ export const colors = { info: colorsBase.gray.normal, success: colorsBase.green, warning: colorsBase.orange, + box_shadow_light: colorsBase.white.pure, + box_shadow_dark: colorsBase.blue.dark, }, auth: { textColorSecondary: colorsBase.gray.normal, diff --git a/src/theme/components/alert.ts b/src/theme/components/alert.ts index ff642475..db6f7ce9 100644 --- a/src/theme/components/alert.ts +++ b/src/theme/components/alert.ts @@ -1,56 +1,3 @@ -// import { alertAnatomy } from '@chakra-ui/anatomy' -// import { createMultiStyleConfigHelpers } from '@chakra-ui/react' - -// const { defineMultiStyleConfig } = createMultiStyleConfigHelpers(alertAnatomy.keys) - -// const statusColor = { -// info: 'account.info', -// success: 'account.green', -// error: 'account.error', -// warning: 'account.warning', -// } - -// const baseStyle = (props: any) => { -// const { status } = props - -// return { -// container: { -// display: 'grid', -// gridTemplateColumns: { base: '1fr', lg: 'fit-content(50px) 1fr' }, -// border: '1px solid', -// borderColor: 'alert.border', -// borderRadius: 'lg', -// width: 'fit-content', -// bgColor: 'alert.bg.light', - -// _dark: { -// bgColor: 'alert.bg.dark', -// }, -// }, -// title: { -// gridColumn: { lg: 2 }, -// }, -// description: { -// gridColumn: { lg: 2 }, -// }, -// icon: { -// display: 'flex', -// justifyContent: 'center', -// alignItems: 'center', -// gridColumn: 1, -// color: statusColor[status], -// boxShadow: `0 0 0px 1px white, 0 0 0px 3px ${statusColor[status]}, 0 0 0 4px white, 0 0 1px 5px ${statusColor[status]}`, -// borderRadius: 'lg', -// _dark: { -// boxShadow: `0 0 0px 1px #1A202C, 0 0 0px 3px ${statusColor[status]}, 0 0 0 4px #1A202C, 0 0 1px 5px ${statusColor[status]}`, -// }, -// w: 4, -// h: 4, -// }, -// } -// } - -// export const Alert = defineMultiStyleConfig({ baseStyle }) import { alertAnatomy } from '@chakra-ui/anatomy' import { createMultiStyleConfigHelpers, useToken } from '@chakra-ui/react' @@ -100,10 +47,10 @@ const baseStyle = (props: any) => { alignItems: 'center', gridColumn: 1, color, - boxShadow: `0 0 0px 1px white, 0 0 0px 3px ${color}, 0 0 0 4px white, 0 0 1px 5px ${color}`, + boxShadow: `0 0 0px 1px ${'var(--chakra-colors-alert-box_shadow_light)'}, 0 0 0px 3px ${color}, 0 0 0 4px ${'var(--chakra-colors-alert-box_shadow_light)'}, 0 0 1px 5px ${color}`, borderRadius: 'lg', _dark: { - boxShadow: `0 0 0px 1px #1A202C, 0 0 0px 3px ${color}, 0 0 0 4px #1A202C, 0 0 1px 5px ${color}`, + boxShadow: `0 0 0px 1px ${'var(--chakra-colors-alert-box_shadow_dark)'}, 0 0 0px 3px ${color}, 0 0 0 4px ${'var(--chakra-colors-alert-box_shadow_dark)'}, 0 0 1px 5px ${color}`, }, w: 4, h: 4, From 637c765ca384db16a88d150aa651f553d70ea3e7 Mon Sep 17 00:00:00 2001 From: Gerard Date: Thu, 5 Dec 2024 12:14:02 +0100 Subject: [PATCH 13/16] remove interpolation --- src/theme/components/alert.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/theme/components/alert.ts b/src/theme/components/alert.ts index db6f7ce9..31ad5d35 100644 --- a/src/theme/components/alert.ts +++ b/src/theme/components/alert.ts @@ -47,10 +47,10 @@ const baseStyle = (props: any) => { alignItems: 'center', gridColumn: 1, color, - boxShadow: `0 0 0px 1px ${'var(--chakra-colors-alert-box_shadow_light)'}, 0 0 0px 3px ${color}, 0 0 0 4px ${'var(--chakra-colors-alert-box_shadow_light)'}, 0 0 1px 5px ${color}`, + boxShadow: `0 0 0px 1px var(--chakra-colors-alert-box_shadow_light), 0 0 0px 3px ${color}, 0 0 0 4px var(--chakra-colors-alert-box_shadow_light), 0 0 1px 5px ${color}`, borderRadius: 'lg', _dark: { - boxShadow: `0 0 0px 1px ${'var(--chakra-colors-alert-box_shadow_dark)'}, 0 0 0px 3px ${color}, 0 0 0 4px ${'var(--chakra-colors-alert-box_shadow_dark)'}, 0 0 1px 5px ${color}`, + boxShadow: `0 0 0px 1px var(--chakra-colors-alert-box_shadow_dark), 0 0 0px 3px ${color}, 0 0 0 4px var(--chakra-colors-alert-box_shadow_dark), 0 0 1px 5px ${color}`, }, w: 4, h: 4, From 63e8918cdc9e5a575f5aa41699a94d0012292ced Mon Sep 17 00:00:00 2001 From: Gerard Date: Thu, 5 Dec 2024 12:28:29 +0100 Subject: [PATCH 14/16] refactor alert icon colors --- src/theme/components/alert.ts | 19 +++++++------------ 1 file changed, 7 insertions(+), 12 deletions(-) diff --git a/src/theme/components/alert.ts b/src/theme/components/alert.ts index 31ad5d35..44ecfeac 100644 --- a/src/theme/components/alert.ts +++ b/src/theme/components/alert.ts @@ -6,22 +6,17 @@ const { defineMultiStyleConfig } = createMultiStyleConfigHelpers(alertAnatomy.ke const baseStyle = (props: any) => { const { status } = props - const [infoColor, successColor, errorColor, warningColor] = useToken('colors', [ - 'var(--chakra-colors-alert-info)', - 'var(--chakra-colors-alert-success)', - 'var(--chakra-colors-alert-error)', - 'var(--chakra-colors-alert-warning)', - ]) - const statusColorMap = { - info: infoColor, - success: successColor, - error: errorColor, - warning: warningColor, + info: 'var(--chakra-colors-alert-info)', + success: 'var(--chakra-colors-alert-success)', + error: 'var(--chakra-colors-alert-error)', + warning: 'var(--chakra-colors-alert-warning)', } const color = statusColorMap[status] + console.log(color) + return { container: { display: 'grid', @@ -47,7 +42,7 @@ const baseStyle = (props: any) => { alignItems: 'center', gridColumn: 1, color, - boxShadow: `0 0 0px 1px var(--chakra-colors-alert-box_shadow_light), 0 0 0px 3px ${color}, 0 0 0 4px var(--chakra-colors-alert-box_shadow_light), 0 0 1px 5px ${color}`, + boxShadow: `0 0 0px 1px var(--chakra-colors-alert-box_shadow_light), 0 0 0px 3px ${color}, 0 0 0 4px var(--chakra-colors-alert-box_shadow_light), 0 0 1px 5px ${color}`, borderRadius: 'lg', _dark: { boxShadow: `0 0 0px 1px var(--chakra-colors-alert-box_shadow_dark), 0 0 0px 3px ${color}, 0 0 0 4px var(--chakra-colors-alert-box_shadow_dark), 0 0 1px 5px ${color}`, From be30882451d1c8e674016ee2c38b2276bba75544 Mon Sep 17 00:00:00 2001 From: Gerard Date: Thu, 5 Dec 2024 12:29:51 +0100 Subject: [PATCH 15/16] removed console.log --- src/theme/components/alert.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/theme/components/alert.ts b/src/theme/components/alert.ts index 44ecfeac..b8e37d17 100644 --- a/src/theme/components/alert.ts +++ b/src/theme/components/alert.ts @@ -1,5 +1,5 @@ import { alertAnatomy } from '@chakra-ui/anatomy' -import { createMultiStyleConfigHelpers, useToken } from '@chakra-ui/react' +import { createMultiStyleConfigHelpers } from '@chakra-ui/react' const { defineMultiStyleConfig } = createMultiStyleConfigHelpers(alertAnatomy.keys) @@ -15,8 +15,6 @@ const baseStyle = (props: any) => { const color = statusColorMap[status] - console.log(color) - return { container: { display: 'grid', From 014a1d869d24d911e80d0d597522baa53518ac6b Mon Sep 17 00:00:00 2001 From: Gerard Date: Thu, 5 Dec 2024 12:38:13 +0100 Subject: [PATCH 16/16] color fallback --- src/theme/components/alert.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/theme/components/alert.ts b/src/theme/components/alert.ts index b8e37d17..7fc37eb8 100644 --- a/src/theme/components/alert.ts +++ b/src/theme/components/alert.ts @@ -13,7 +13,7 @@ const baseStyle = (props: any) => { warning: 'var(--chakra-colors-alert-warning)', } - const color = statusColorMap[status] + const color = statusColorMap[status] || statusColorMap['info'] return { container: {