From a44ebc25876efc7fc4ca6e4c3405fbcf0ca2d6dd Mon Sep 17 00:00:00 2001 From: Gerard Date: Wed, 16 Oct 2024 13:40:55 +0200 Subject: [PATCH] refactor, remove isSaas styles conditions and colors --- .../OrganizationSaas/Dashboard/Layout.tsx | 5 +- .../Census/Spreadsheet/index.tsx | 24 +--- src/components/ProcessCreate/Census/Web3.tsx | 26 ++--- .../ProcessCreate/Confirm/Preview.tsx | 16 +-- .../ProcessCreate/Questions/Options.tsx | 9 +- .../ProcessCreate/Questions/Question.tsx | 57 +++++---- .../ProcessCreate/Steps/Confirm.tsx | 23 ++-- .../ProcessCreate/Steps/Navigation.tsx | 11 +- src/elements/LayoutProcessCreate.tsx | 4 +- src/router/SaasProtectedRoutes.tsx | 1 - src/themes/default/colors.ts | 1 + src/themes/default/components/Button.ts | 41 +++++-- src/themes/default/components/Card.ts | 49 ++++++++ src/themes/default/components/Input.ts | 2 +- src/themes/default/components/Text.ts | 7 ++ src/themes/saas/colors.ts | 109 +++++++++++++----- src/themes/saas/components/Form.ts | 10 +- src/themes/saas/components/Tabs.ts | 11 +- src/themes/saas/components/button.ts | 42 +++---- src/themes/saas/components/card.ts | 45 ++++++++ src/themes/saas/components/checkbox.ts | 10 +- src/themes/saas/components/input.ts | 19 +-- src/themes/saas/components/radio.ts | 9 +- src/themes/saas/components/stepper.ts | 8 +- src/themes/saas/components/text.ts | 16 ++- src/themes/saas/hooks/useDarkMode.ts | 9 +- 26 files changed, 347 insertions(+), 217 deletions(-) diff --git a/src/components/OrganizationSaas/Dashboard/Layout.tsx b/src/components/OrganizationSaas/Dashboard/Layout.tsx index 029aaacac..34bdb9b76 100644 --- a/src/components/OrganizationSaas/Dashboard/Layout.tsx +++ b/src/components/OrganizationSaas/Dashboard/Layout.tsx @@ -27,6 +27,7 @@ import { OrganizationAvatar, OrganizationName } from '@vocdoni/chakra-components import { OrganizationProvider, useClient } from '@vocdoni/react-providers' import { Trans, useTranslation } from 'react-i18next' import { Outlet, Link as ReactRouterLink, useLocation } from 'react-router-dom' +import LogoutBtn from '~components/AccountSaas/LogoutBtn' import { HSeparator } from '~components/Auth/SignIn' import DarkModeToggle from '~src/themes/saas/components/DarkMode' import PricingCard from '~src/themes/saas/components/Saas/PricingCard' @@ -35,7 +36,6 @@ import useDarkMode from '~src/themes/saas/hooks/useDarkMode' import { Logo } from '~theme/icons' import OrganizationDashboardMenu from './Menu' import Settings from './Settings' -import LogoutBtn from '~components/AccountSaas/LogoutBtn' type CardProps = { popular: boolean @@ -47,8 +47,7 @@ type CardProps = { const OrganizationDashboardLayout: React.FC = () => { const { t } = useTranslation() - - const { textColor, bgSecondary, textColorBrand, bg, textColorSecondary } = useDarkMode() + const { textColor, bgSecondary, textColorBrand, bg } = useDarkMode() const { isOpen, onOpen, onClose } = useDisclosure() const { isOpen: isOpenModal, onOpen: onOpenModal, onClose: onCloseModal } = useDisclosure() const { account } = useClient() diff --git a/src/components/ProcessCreate/Census/Spreadsheet/index.tsx b/src/components/ProcessCreate/Census/Spreadsheet/index.tsx index f573a4208..0ae9c20b5 100644 --- a/src/components/ProcessCreate/Census/Spreadsheet/index.tsx +++ b/src/components/ProcessCreate/Census/Spreadsheet/index.tsx @@ -21,15 +21,12 @@ import { Trans, useTranslation } from 'react-i18next' import { BiCheckDouble, BiDownload } from 'react-icons/bi' import { PiWarningCircleLight } from 'react-icons/pi' import { RiFileExcel2Line } from 'react-icons/ri' -import useDarkMode from '~src/themes/saas/hooks/useDarkMode' import { CensusSpreadsheetManager } from './CensusSpreadsheetManager' import { CsvGenerator } from './generator' import { CsvPreview } from './Preview' export const CensusCsvManager = () => { const { t } = useTranslation() - const isSaas = import.meta.env.SAAS_URL - const { bgSecondary } = useDarkMode() const { register, setValue, @@ -153,11 +150,7 @@ export const CensusCsvManager = () => { - @@ -171,18 +164,7 @@ export const CensusCsvManager = () => { isInvalid={!!errors?.spreadsheet} display={manager?.data.length ? 'none' : 'block'} > - + @@ -200,7 +182,7 @@ export const CensusCsvManager = () => { /> )} - + {errors?.spreadsheet?.message?.toString()} diff --git a/src/components/ProcessCreate/Census/Web3.tsx b/src/components/ProcessCreate/Census/Web3.tsx index 41c7255e2..2a230ebb1 100644 --- a/src/components/ProcessCreate/Census/Web3.tsx +++ b/src/components/ProcessCreate/Census/Web3.tsx @@ -2,11 +2,11 @@ import { DeleteIcon } from '@chakra-ui/icons' import { Box, Button, + Card, Checkbox, Flex, FormControl, FormErrorMessage, - FormLabel, Icon, IconButton, Input, @@ -21,15 +21,12 @@ import { Trans, useTranslation } from 'react-i18next' import { BiCheckDouble } from 'react-icons/bi' import { RiFileExcel2Line } from 'react-icons/ri' import { addressTextOverflow, fieldMapErrorMessage, isInvalidFieldMap } from '~constants' -import useDarkMode from '~src/themes/saas/hooks/useDarkMode' import { Web3CensusSpreadsheetManager } from './Spreadsheet/Web3CensusSpreadsheetManager' export const CensusWeb3Addresses = () => { const { t } = useTranslation() const { account } = useClient() - const { bgSecondary } = useDarkMode() const [fileErr, setFileErr] = useState(null) - const isSaas = import.meta.env.SAAS_URL const { register, @@ -153,19 +150,12 @@ export const CensusWeb3Addresses = () => { /> {fieldMapErrorMessage(errors, 'newAddress')} - - + {fields.map((address, index) => ( { maxH='2px' p={3} /> - - {t('form.process_create.census.weight')} - )} + {weighted && ( + + {t('form.process_create.census.weight')} + + )} { ))} - + {t('form.process_create.web3.your_wallet_is_added')} { - const isSaas = import.meta.env.SAAS_URL const { t } = useTranslation() - const { bgSecondary } = useDarkMode() const { form, setActiveStep, isLoadingPreview } = useProcessCreationSteps() const datef = t('form.process_create.calendar.date_format') @@ -31,14 +28,7 @@ const Preview = () => { import.meta.env.features.vote.secret return ( - + @@ -157,7 +147,7 @@ const Preview = () => { /> - + ) } diff --git a/src/components/ProcessCreate/Questions/Options.tsx b/src/components/ProcessCreate/Questions/Options.tsx index e8883c874..222b6604d 100644 --- a/src/components/ProcessCreate/Questions/Options.tsx +++ b/src/components/ProcessCreate/Questions/Options.tsx @@ -18,8 +18,6 @@ const Options = ({ fields, removeOption, appendOption, index }: Props) => { formState: { errors }, } = useFormContext() - const isSaas = import.meta.env.SAAS_URL - return ( {fields.map((_, idx: number) => ( @@ -59,12 +57,7 @@ const Options = ({ fields, removeOption, appendOption, index }: Props) => { ))} - diff --git a/src/components/ProcessCreate/Questions/Question.tsx b/src/components/ProcessCreate/Questions/Question.tsx index f680e2aa3..26865dcb8 100644 --- a/src/components/ProcessCreate/Questions/Question.tsx +++ b/src/components/ProcessCreate/Questions/Question.tsx @@ -67,9 +67,7 @@ const Question = ({ index, remove }: Props) => { - - {index + 1} - + {index + 1} ) } @@ -98,8 +96,6 @@ const QuestionPage = ({ title, description, isMultiQuestion = false }: IQuestion const questions = watch('questions') - const isSaas = import.meta.env.SAAS_URL - // If all questions deleted add a new empty question to the form useEffect(() => { if (questions.length === 0) { @@ -112,35 +108,36 @@ const QuestionPage = ({ title, description, isMultiQuestion = false }: IQuestion }, [questions, append]) return ( - + <> {title} {description} - {fields.map((_, index) => ( - - ))} - - {isMultiQuestion && ( - - )} - + + {fields.map((_, index) => ( + + ))} + + {isMultiQuestion && ( + + )} + + ) } diff --git a/src/components/ProcessCreate/Steps/Confirm.tsx b/src/components/ProcessCreate/Steps/Confirm.tsx index 3f1208855..7083c9496 100644 --- a/src/components/ProcessCreate/Steps/Confirm.tsx +++ b/src/components/ProcessCreate/Steps/Confirm.tsx @@ -1,6 +1,7 @@ import { ArrowBackIcon } from '@chakra-ui/icons' import { Box, + Card, Checkbox, Flex, FormControl, @@ -46,7 +47,6 @@ import { CensusMeta } from '~components/Process/Census/CensusType' import { StampsUnionTypes } from '~components/ProcessCreate/Census/Gitcoin/StampsUnionType' import { CensusGitcoinValues } from '~components/ProcessCreate/StepForm/CensusGitcoin' import { DefaultCensusSize } from '~constants' -import useDarkMode from '~src/themes/saas/hooks/useDarkMode' import { useCspAdmin } from '../Census/Csp/use-csp' import Preview from '../Confirm/Preview' import { CostPreview } from '../CostPreview' @@ -57,8 +57,6 @@ import { StepsFormValues, useProcessCreationSteps } from './use-steps' import Wrapper from './Wrapper' export const Confirm = () => { - const isSaas = import.meta.env.SAAS_URL - const { textColorSecondary, bgSecondary } = useDarkMode() const { env, client, account, fetchAccount, census3: c3client } = useClient() const { form, prev, setForm, setIsLoadingPreview, isLoadingPreview, isLoadingCost, notEnoughBalance } = useProcessCreationSteps() @@ -251,24 +249,19 @@ export const Confirm = () => { return ( - {!isSaas && {t('form.process_create.confirm.title')}} - + {t('form.process_create.confirm.title')} + {t('form.process_create.confirm.description')} - + - + {t('form.process_create.confirm.confirmation')} { - + - )} - diff --git a/src/elements/LayoutProcessCreate.tsx b/src/elements/LayoutProcessCreate.tsx index cc1b7cab9..ec85ce2e0 100644 --- a/src/elements/LayoutProcessCreate.tsx +++ b/src/elements/LayoutProcessCreate.tsx @@ -11,7 +11,7 @@ const LayoutProcessCreate = () => { const { t } = useTranslation() const { bg } = useDarkMode() const navigate = useNavigate() - const isSaas = import.meta.env.SAAS_URL + const isSaas = import.meta.env.theme === 'saas' return ( @@ -31,7 +31,7 @@ const LayoutProcessCreate = () => { {isSaas && ( - )} diff --git a/src/router/SaasProtectedRoutes.tsx b/src/router/SaasProtectedRoutes.tsx index 61968cced..bf66d7236 100644 --- a/src/router/SaasProtectedRoutes.tsx +++ b/src/router/SaasProtectedRoutes.tsx @@ -3,7 +3,6 @@ import { useAuth } from '~components/Auth/useAuth' const ProtectedRoutes = () => { const { signerAddress } = useAuth() - return return signerAddress ? : } diff --git a/src/themes/default/colors.ts b/src/themes/default/colors.ts index 609931a81..130834dfc 100644 --- a/src/themes/default/colors.ts +++ b/src/themes/default/colors.ts @@ -64,6 +64,7 @@ export const colors = { right_side: colorsBase.primary, right_side_color: colorsBase.white.pure, }, + editor: { character_limit: colorsBase.gray.light, }, diff --git a/src/themes/default/components/Button.ts b/src/themes/default/components/Button.ts index 9e7c6cd22..e444d1eb2 100644 --- a/src/themes/default/components/Button.ts +++ b/src/themes/default/components/Button.ts @@ -1,22 +1,23 @@ import { defineStyle, defineStyleConfig } from '@chakra-ui/react' -const baseStyles = { +const baseStyles = (props: any) => ({ borderRadius: 'full', display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 2, -} +}) + const solid = defineStyle((props) => { return { - ...baseStyles, + ...baseStyles(props), } }) const secondary = defineStyle((props) => { const { colorScheme } = props return { - ...baseStyles, + ...baseStyles(props), bgColor: 'gray.100', color: `${colorScheme}.500`, @@ -38,17 +39,17 @@ const secondary = defineStyle((props) => { }) const outline = defineStyle((props) => { return { - ...baseStyles, + ...baseStyles(props), } }) const ghost = defineStyle((props) => { return { - ...baseStyles, + ...baseStyles(props), } }) const addressDropdown = defineStyle((props) => { return { - ...baseStyles, + ...baseStyles(props), minW: 40, bgColor: 'gray.100', @@ -150,6 +151,31 @@ const dashboard = defineStyle((props) => { }, } }) + +const rounded = defineStyle((props) => { + const { colorScheme } = props + + return { + ...baseStyles(props), + bgColor: 'gray.100', + color: props.colorScheme === 'whiteAlpha' ? 'black' : `${props.colorScheme}.500`, + + _hover: { + bgColor: 'gray.200', + color: props.colorScheme === 'whiteAlpha' ? 'black' : `${props.colorScheme}.600`, + + _disabled: { + bgColor: 'gray.100', + color: props.colorScheme === 'whiteAlpha' ? 'black' : `${props.colorScheme}.600`, + }, + }, + + _active: { + bgColor: 'gray.300', + color: props.colorScheme === 'whiteAlpha' ? 'black' : `${props.colorScheme}.700`, + }, + } +}) export const Button = defineStyleConfig({ defaultProps: { colorScheme: 'primary', @@ -163,6 +189,7 @@ export const Button = defineStyleConfig({ ghost, solid, 'go-back': goBack, + rounded, secondary, transparent, }, diff --git a/src/themes/default/components/Card.ts b/src/themes/default/components/Card.ts index 1402291c3..387885330 100644 --- a/src/themes/default/components/Card.ts +++ b/src/themes/default/components/Card.ts @@ -527,20 +527,69 @@ const downloadSpreadSheet = definePartsStyle({ }, }) +const dragAndDrop = definePartsStyle({ + container: { + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center', + gap: 5, + p: 10, + border: '1px dotted', + bgColor: 'process_create.bg', + borderRadius: 'xl', + cursor: 'pointer', + }, +}) + +const web3Addresses = definePartsStyle({ + container: { + flexDirection: 'column', + minH: '220px', + overflowY: 'scroll', + borderRadius: 'md', + my: 6, + bgColor: 'process_create.bg', + }, +}) + +const preview = definePartsStyle({ + container: { + display: 'flex', + flexDirection: 'column', + gap: 5, + p: { base: 3, xl: 6 }, + borderRadius: 'md', + }, +}) + +const confirm = definePartsStyle({ + container: { + display: 'flex', + flex: { xl2: '0 0 25%' }, + p: 6, + borderRadius: 'md', + minW: 76, + }, +}) + const variantsCards = { aside, benefits, calculator, calendar, client, + confirm, detailed, 'download-spreadsheet': downloadSpreadSheet, + 'drag-and-drop': dragAndDrop, demo, faqs, 'icon-card': iconCard, 'image-card': imageCard, 'no-elections': noElections, + preview, step, 'types-voting': typesVoting, + 'web3-addresses': web3Addresses, } export const Card = defineMultiStyleConfig({ variants: variantsCards }) diff --git a/src/themes/default/components/Input.ts b/src/themes/default/components/Input.ts index b4682cebb..1bca0c2db 100644 --- a/src/themes/default/components/Input.ts +++ b/src/themes/default/components/Input.ts @@ -6,7 +6,7 @@ const { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpe const baseStyle = definePartsStyle({ field: { borderRadius: 'md', - + bgColor: 'white !important', _disabled: { backgroundColor: 'white', opacity: '0.8', diff --git a/src/themes/default/components/Text.ts b/src/themes/default/components/Text.ts index 3bde5ae91..9d227c171 100644 --- a/src/themes/default/components/Text.ts +++ b/src/themes/default/components/Text.ts @@ -18,6 +18,13 @@ const variants = { textTransform: 'uppercase', mb: 6, }), + 'question-index': (props) => ({ + position: 'absolute', + fontSize: '100px', + bottom: 0, + right: 5, + opacity: 0.2, + }), } export const Text = { diff --git a/src/themes/saas/colors.ts b/src/themes/saas/colors.ts index 258321438..3f1a4e124 100644 --- a/src/themes/saas/colors.ts +++ b/src/themes/saas/colors.ts @@ -1,30 +1,92 @@ -export const colors = { - badge: { - pro_color: 'white', - }, - bg: { - light: '#F5F7FA', +export const colorsBase = { + blue: { + normal: '#3965FF', + grayish: '#303B4D', dark: '#1A202C', - secondary: { - light: 'white', - dark: '#303B4D', + }, + gray: { + light: '#E2E8F0', + dark: '#A0AEC0', + }, + primary: '#546E39', + white: { + pure: '#ffffff', + dark: '#F5F7FA', + }, +} + +export const colors = { + checkbox: { + bg: colorsBase.primary, + checked: { + border: colorsBase.primary, + bg: colorsBase.primary, + }, + icon: colorsBase.white.pure, + + variant: { + radiobox: { + bg: { + light: colorsBase.white.pure, + dark: colorsBase.blue.grayish, + }, + }, }, }, - custom_blue: '#3965FF', + input: { + focus: colorsBase.blue, + light: { + bg: colorsBase.white.pure, + border: colorsBase.gray.light, + outline: colorsBase.gray.light, + }, + dark: { + bg: colorsBase.blue.grayish, + border: colorsBase.white, + outline: colorsBase.white, + }, + }, + + process_create: { bg: { - light: 'white', - dark: '#303B4D', + light: colorsBase.white.dark, + dark: colorsBase.blue.dark, + }, + bg_secondary: { + light: colorsBase.white.pure, + dark: colorsBase.blue.grayish, + }, + stepper: { + color: colorsBase.primary, + bg: colorsBase.primary, + }, + + text_brand: colorsBase.primary, + text_secondary: colorsBase.gray.dark, + question_index: colorsBase.primary, + }, + + tab: { + variant: { + card: { + badge_bg: colorsBase.primary, + bg: { + light: colorsBase.white.pure, + dark: colorsBase.blue.grayish, + }, + border: colorsBase.gray.dark, + description: colorsBase.gray.dark, + svg: colorsBase.primary, + }, }, }, - text: { - light: 'navy.700', - dark: 'white', - secondary: '#A0AEC0', - brand: '#546E39', + + radio: { + bg: colorsBase.primary, + border: colorsBase.primary, }, - text_secondary: '#A0AEC0', brand: { 50: '#e5ecd8', 100: '#cbd9b2', @@ -103,15 +165,4 @@ export const colors = { gray: { 100: '#FAFCFE', }, - whiteAlpha: { - 50: 'rgba(255, 255, 255, 0.04)', - 100: 'rgba(255, 255, 255, 0.06)', - 200: 'rgba(255, 255, 255, 0.08)', - 300: 'rgba(255, 255, 255, 0.16)', - 400: '#FFFFFF', - 500: 'rgba(255, 255, 255, 0.48)', - 600: 'rgba(255, 255, 255, 0.64)', - 700: 'rgba(255, 255, 255, 0.80)', - 800: 'rgba(255, 255, 255, 0.92)', - }, } diff --git a/src/themes/saas/components/Form.ts b/src/themes/saas/components/Form.ts index 0179b843e..946ffb357 100644 --- a/src/themes/saas/components/Form.ts +++ b/src/themes/saas/components/Form.ts @@ -11,7 +11,6 @@ export const Form: ComponentStyleConfig = { fontSize: 'sm', fontWeight: 'bold', mb: 2, - color: mode('gray.800', 'white')(props), }, }, }), @@ -21,15 +20,17 @@ export const Form: ComponentStyleConfig = { display: 'flex', justifyContent: 'start', alignContent: 'center', - border: mode('1px solid #E2E8F0', '0.1px solid white')(props), - bgColor: mode('input.bg.light', 'input.bg.dark')(props), + 'background-color': mode('input.light.bg', '#303B4D')(props), + border: mode('1px solid', '0.1px solid')(props), + borderColor: mode('input.light.outline', 'input.dark.outline')(props), borderRadius: 'xl', minW: 64, maxW: 64, p: 3, _hover: { - outline: mode('1px solid #E2E8F0', '.1px solid white')(props), + outline: mode('1px solid', '.1px solid')(props), + outlineColor: mode('input.light.outline', 'input.dark.outline')(props), outlineOffset: '0px', }, @@ -38,7 +39,6 @@ export const Form: ComponentStyleConfig = { w: 'full', '& > span:nth-of-type(2)': { mt: 1, - color: mode('black', 'white')(props), fontWeight: 'normal', fontSize: 'sm', }, diff --git a/src/themes/saas/components/Tabs.ts b/src/themes/saas/components/Tabs.ts index f659db786..ae48db858 100644 --- a/src/themes/saas/components/Tabs.ts +++ b/src/themes/saas/components/Tabs.ts @@ -27,20 +27,20 @@ const card = definePartsStyle((props) => ({ p: 4, px: 6, boxShadow: 'var(--box-shadow-darker)', - bgColor: mode('bg.secondary.light', 'bg.secondary.dark')(props), + bgColor: mode('tab.variant.card.bg.light', 'tab.variant.card.bg.dark')(props), borderBottom: 'none', color: mode('navy.700', 'white')(props), borderRadius: 'xl', w: 'full', '& > #description': { - color: 'text.secondary', + color: 'tab.variant.card.description', textAlign: 'start', fontSize: 'xs', }, '& #pro-badge': { - bgColor: 'text.brand', + bgColor: 'tab.variant.card.badge_bg', borderRadius: '10px', position: 'absolute', top: '3px', @@ -57,7 +57,6 @@ const card = definePartsStyle((props) => ({ w: 'full', gap: 3, fontSize: 'sm', - color: mode('text.light', 'text.dark')(props), '& p': { fontWeight: 'bold', @@ -74,13 +73,13 @@ const card = definePartsStyle((props) => ({ h: 4, borderRadius: 'full', border: `1px solid`, - borderColor: 'text.secondary', + borderColor: 'tab.variant.card.border', }, '& > svg': { w: 5, h: 5, - color: 'text.brand', + color: 'tab.variant.card.svg', position: 'absolute', top: 2, right: 2, diff --git a/src/themes/saas/components/button.ts b/src/themes/saas/components/button.ts index fac1e92cb..98caf62bf 100644 --- a/src/themes/saas/components/button.ts +++ b/src/themes/saas/components/button.ts @@ -1,22 +1,24 @@ import { mode } from '@chakra-ui/theme-tools' import { defineStyleConfig } from '@chakra-ui/styled-system' -const commonStyles = (props: any) => ({ - display: 'flex', - gap: 3, - bg: - props.colorScheme === 'whiteAlpha' ? 'white' : mode(`${props.colorScheme}.500`, `${props.colorScheme}.500`)(props), - color: props.colorScheme === 'whiteAlpha' ? 'black' : 'white', - _focus: { - bg: mode(`${props.colorScheme}.500`, `${props.colorScheme}.500`)(props), - }, - _active: { - bg: mode(`${props.colorScheme}.700`, `${props.colorScheme}.700`)(props), - }, - _hover: { - bg: mode(`${props.colorScheme}.600`, `${props.colorScheme}.600`)(props), - }, -}) +const commonStyles = (props: any) => { + const { colorScheme } = props + return { + display: 'flex', + gap: 3, + bg: props.colorScheme === 'whiteAlpha' ? 'white' : `${colorScheme}.500`, + color: props.colorScheme === 'whiteAlpha' ? 'black' : 'white', + _focus: { + bg: `${colorScheme}.500`, + }, + _hover: { + bg: `${colorScheme}.600`, + }, + _active: { + bg: `${colorScheme}.700`, + }, + } +} export const Button = defineStyleConfig({ variants: { @@ -24,13 +26,7 @@ export const Button = defineStyleConfig({ ...commonStyles(props), borderRadius: 'xl', }), - outline: (props: any) => ({ - ...commonStyles(props), - borderRadius: 'full', - borderColor: 'text.brand', - color: 'text.brand', - bgColor: 'white', - }), + outline: (props: any) => ({ borderRadius: 'full' }), rounded: (props: any) => ({ ...commonStyles(props), borderRadius: 'full', diff --git a/src/themes/saas/components/card.ts b/src/themes/saas/components/card.ts index 1cd5059a1..db36c823e 100644 --- a/src/themes/saas/components/card.ts +++ b/src/themes/saas/components/card.ts @@ -92,5 +92,50 @@ export const Card = defineMultiStyleConfig({ color: '#546E39', }, }, + + 'drag-and-drop': (props) => ({ + container: { + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center', + gap: 5, + p: 10, + border: '1px dotted', + bgColor: mode('process_create.bg_secondary.light', 'process_create.bg_secondary.dark')(props), + borderRadius: 'xl', + cursor: 'pointer', + }, + }), + + 'web3-addresses': (props) => ({ + container: { + flexDirection: 'column', + minH: '220px', + overflowY: 'scroll', + borderRadius: 'xl', + my: 6, + bgColor: mode('process_create.bg_secondary.light', 'process_create.bg_secondary.dark')(props), + }, + }), + preview: (props) => ({ + container: { + display: 'flex', + flexDirection: 'column', + gap: 5, + p: { base: 3, xl: 6 }, + bgColor: mode('process_create.bg_secondary.light', 'process_create.bg_secondary.dark')(props), + borderRadius: 'xl', + }, + }), + confirm: (props) => ({ + container: { + display: 'flex', + flex: { xl2: '0 0 25%' }, + p: 6, + bgColor: mode('process_create.bg_secondary.light', 'process_create.bg_secondary.dark')(props), + borderRadius: 'xl', + minW: 76, + }, + }), }, }) diff --git a/src/themes/saas/components/checkbox.ts b/src/themes/saas/components/checkbox.ts index 62d748e26..f8064d58e 100644 --- a/src/themes/saas/components/checkbox.ts +++ b/src/themes/saas/components/checkbox.ts @@ -10,15 +10,15 @@ export const Checkbox = defineMultiStyleConfig({ control: { borderRadius: 'full', _checked: { - borderColor: 'brand.500', - bgColor: 'brand.500', + borderColor: 'checkbox.checked.border', + bgColor: 'checkbox.checked.bg', }, _focus: { boxShadow: 'none', }, }, icon: { - color: 'white', + color: 'checkbox.icon', }, }, variants: { @@ -31,7 +31,7 @@ export const Checkbox = defineMultiStyleConfig({ alignItems: 'center', p: 4, boxShadow: 'var(--box-shadow)', - bgColor: mode('bg.secondary.light', 'bg.secondary.dark')(props), + bgColor: mode('checkbox.variant.radiobox.bg.light', 'checkbox.variant.radiobox.bg.dark')(props), borderRadius: 'xl', _hover: { @@ -76,7 +76,7 @@ export const Checkbox = defineMultiStyleConfig({ top: 1, right: 1, px: 2, - bgColor: 'text.brand', + bgColor: 'checkbox.bg', fontSize: 'sm', color: 'white', }, diff --git a/src/themes/saas/components/input.ts b/src/themes/saas/components/input.ts index 8b636c621..6395466e6 100644 --- a/src/themes/saas/components/input.ts +++ b/src/themes/saas/components/input.ts @@ -12,17 +12,20 @@ const variants = { fontSize: 'sm', borderRadius: 'xl', minW: 'full', - 'background-color': mode('input.bg.light', '#303B4D')(props), - border: mode('1px solid #E2E8F0', '0.1px solid white')(props), + 'background-color': mode('input.light.bg', '#303B4D')(props), + border: mode('1px solid', '0.1px solid')(props), + borderColor: mode('input.light.outline', 'input.dark.outline')(props), _hover: { - outline: mode('1px solid #E2E8F0', '.1px solid white')(props), + outline: mode('1px solid', '.1px solid')(props), + outlineColor: mode('input.light.outline', 'input.dark.outline')(props), outlineOffset: '0px', }, _focus: { - outline: '2px solid #3965FF', + outline: '2px solid', outlineOffset: '0px', + outlineColor: '#3965FF', border: mode('1px solid transparent', '0.1px solid transparent')(props), }, }, @@ -34,11 +37,13 @@ const variants = { p: 4, minH: '48px', borderRadius: 'xl', - 'background-color': mode('input.bg.light', '#303B4D')(props), - border: mode('1px solid #E2E8F0', '0.1px solid white')(props), + 'background-color': mode('input.light.bg', '#303B4D')(props), + border: mode('1px solid', '0.1px solid')(props), + borderColor: mode('input.light.outline', 'input.dark.outline')(props), _hover: { - outline: mode('1px solid #E2E8F0', '.1px solid white')(props), + outline: mode('1px solid', '.1px solid')(props), + outlineColor: mode('input.light.outline', 'input.dark.outline')(props), outlineOffset: '0px', }, diff --git a/src/themes/saas/components/radio.ts b/src/themes/saas/components/radio.ts index 063c66735..1b8129060 100644 --- a/src/themes/saas/components/radio.ts +++ b/src/themes/saas/components/radio.ts @@ -8,8 +8,13 @@ export const Radio = defineMultiStyleConfig({ baseStyle: definePartsStyle((props) => ({ control: { _checked: { - bgColor: 'text.brand', - borderColor: 'text.brand', + bgColor: 'radio.bg', + borderColor: 'radio.color', + + _hover: { + bgColor: 'radio.bg', + borderColor: 'radio.color', + }, }, }, })), diff --git a/src/themes/saas/components/stepper.ts b/src/themes/saas/components/stepper.ts index 0f8845240..bc121c936 100644 --- a/src/themes/saas/components/stepper.ts +++ b/src/themes/saas/components/stepper.ts @@ -7,11 +7,11 @@ const { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpe const baseStyle = definePartsStyle((props) => ({ indicator: { '&[data-status=complete]': { - background: 'text.brand', + background: 'process_create.stepper.bg', }, '&[data-status=active]': { - borderColor: 'text.brand', - background: 'text.brand', + borderColor: 'process_create.stepper.color', + background: 'process_create.stepper.bg', color: 'white', }, }, @@ -19,7 +19,7 @@ const baseStyle = definePartsStyle((props) => ({ display: { base: 'none', lg: 'inline-block' }, mt: { lg: 2 }, '&[data-status=complete]': { - background: 'text.brand', + background: 'process_create.stepper.bg', }, }, stepper: { diff --git a/src/themes/saas/components/text.ts b/src/themes/saas/components/text.ts index 1712fed48..5d3117509 100644 --- a/src/themes/saas/components/text.ts +++ b/src/themes/saas/components/text.ts @@ -1,5 +1,3 @@ -import { mode } from '@chakra-ui/theme-tools' - const variants = { 'process-create-title': (props) => ({ fontWeight: 'bold', @@ -9,18 +7,26 @@ const variants = { fontSize: 'sm', }), 'process-create-subtitle': (props) => ({ - color: 'text_secondary', + color: 'process_create.text_secondary', }), 'process-create-subtitle-sm': (props) => ({ fontSize: 'sm', - color: 'text_secondary', + color: 'process_create.text_secondary', }), 'process-create-census-title': (props) => ({ fontWeight: 'bold', textTransform: 'uppercase', - color: 'text.brand', + color: 'process_create.text_brand', mb: 6, }), + 'question-index': (props) => ({ + position: 'absolute', + fontSize: '100px', + bottom: 0, + right: 5, + color: 'process_create.question_index', + opacity: 0.2, + }), } export const Text = { diff --git a/src/themes/saas/hooks/useDarkMode.ts b/src/themes/saas/hooks/useDarkMode.ts index 12b440a3e..88f15e15c 100644 --- a/src/themes/saas/hooks/useDarkMode.ts +++ b/src/themes/saas/hooks/useDarkMode.ts @@ -1,11 +1,12 @@ import { useColorModeValue } from '@chakra-ui/react' +import { colorsBase } from '../colors' const useDarkMode = () => { - const bg = useColorModeValue('bg.light', 'bg.dark') - const bgSecondary = useColorModeValue('bg.secondary.light', 'bg.secondary.dark') - const textColor = useColorModeValue('text.light', 'text.dark') + const bg = useColorModeValue(colorsBase.white.dark, colorsBase.blue.dark) + const bgSecondary = useColorModeValue(colorsBase.white.pure, colorsBase.blue.grayish) + const textColor = useColorModeValue('black', 'white') const textColorSecondary = 'text.secondary' - const textColorBrand = 'text.brand' + const textColorBrand = colorsBase.primary const googleBg = useColorModeValue('gray.200', 'whiteAlpha.200') const googleHover = useColorModeValue({ bg: 'gray.300' }, { bg: 'whiteAlpha.300' }) const googleActive = useColorModeValue({ bg: 'secondaryGray.300' }, { bg: 'whiteAlpha.200' })