refactor, remove isSaas styles conditions and colors

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()

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 = () => {
           </CardBody>
           <CardFooter>
             <Link download={'census-template.csv'} href={template.url}>
-              <Button
-                variant={isSaas ? 'outline' : 'secondary'}
-                colorScheme={isSaas && 'whiteAlpha'}
-                leftIcon={<BiDownload />}
-              >
+              <Button variant={'outline'} leftIcon={<BiDownload />}>
                 {t('form.process_create.spreadsheet.download_template_btn')}
               </Button>
             </Link>
@@ -171,18 +164,7 @@ export const CensusCsvManager = () => {
         isInvalid={!!errors?.spreadsheet}
         display={manager?.data.length ? 'none' : 'block'}
       >
-        <Flex
-          flexDirection='column'
-          justifyContent='center'
-          alignItems='center'
-          gap={5}
-          p={10}
-          border='1px dotted'
-          borderColor={'process_create.census.drag_and_drop_border'}
-          bgColor={isSaas ? bgSecondary : 'process_create.bg'}
-          borderRadius='xl'
-          cursor='pointer'
-        >
+        <Card variant='drag-and-drop'>
           <input {...getInputProps()} />
           <Icon as={RiFileExcel2Line} boxSize={20} color='process_create.spreadsheet.file' />
           <Box>
@@ -200,7 +182,7 @@ export const CensusCsvManager = () => {
               />
             )}
           </Box>
-        </Flex>
+        </Card>
         <FormErrorMessage display='flex' justifyContent='center'>
           {errors?.spreadsheet?.message?.toString()}
         </FormErrorMessage>

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<string | null>(null)
-  const isSaas = import.meta.env.SAAS_URL
 
   const {
     register,
@@ -153,19 +150,12 @@ export const CensusWeb3Addresses = () => {
               />
               <FormErrorMessage>{fieldMapErrorMessage(errors, 'newAddress')}</FormErrorMessage>
             </Box>
-            <Button variant='outline' colorScheme={'whiteAlpha'} type='button' ml='none' onClick={handleAddAddress}>
+            <Button variant='outline' type='button' ml='none' onClick={handleAddAddress}>
               {t('form.process_create.census.add_button')}
             </Button>
           </FormControl>
 
-          <Flex
-            flexDirection='column'
-            minH='220px'
-            overflowY='scroll'
-            borderRadius={isSaas ? 'xl' : 'lg'}
-            bgColor={isSaas ? bgSecondary : 'gray.100'}
-            my={6}
-          >
+          <Card variant='web3-addresses'>
             {fields.map((address, index) => (
               <Flex
                 key={address.id}
@@ -197,11 +187,13 @@ export const CensusWeb3Addresses = () => {
                         maxH='2px'
                         p={3}
                       />
-                      <FormLabel fontSize='xs' m={0} ml={3} right={0} mb={0} pb={0}>
-                        {t('form.process_create.census.weight')}
-                      </FormLabel>
                     </FormControl>
                   )}
+                  {weighted && (
+                    <Text fontWeight='bold' fontSize='xs' m='0 !important' ml={3} right={0} p={0}>
+                      {t('form.process_create.census.weight')}
+                    </Text>
+                  )}
                   <IconButton
                     size='xs'
                     variant='transparent'
@@ -216,7 +208,7 @@ export const CensusWeb3Addresses = () => {
                 </Flex>
               </Flex>
             ))}
-          </Flex>
+          </Card>
           <Text variant='process-create-subtitle-sm'>{t('form.process_create.web3.your_wallet_is_added')}</Text>
           <Flex gap={1} justifyContent='center'>
             <Trans

src/components/ProcessCreate/Confirm/Preview.tsx

@@ -1,17 +1,14 @@
-import { Box, ChakraProvider, extendTheme, Flex, Icon, Link, Spinner, Text } from '@chakra-ui/react'
+import { Box, Card, ChakraProvider, extendTheme, Flex, Icon, Link, Spinner, Text } from '@chakra-ui/react'
 import { ElectionDescription, ElectionQuestions, ElectionTitle } from '@vocdoni/chakra-components'
 import { useTranslation } from 'react-i18next'
 import { IoMdCheckmark, IoMdClose, IoMdCreate } from 'react-icons/io'
 import { IoCheckmarkSharp } from 'react-icons/io5'
-import useDarkMode from '~src/themes/saas/hooks/useDarkMode'
 import { confirmTheme } from '~theme/components/Confirm'
 import { useProcessCreationSteps } from '../Steps/use-steps'
 import Census from './Census'
 
 const Preview = () => {
-  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 (
-    <Flex
-      className='process-create-section'
-      flexDirection='column'
-      gap={5}
-      p={{ base: 3, xl: 6 }}
-      bgColor={bgSecondary}
-      borderRadius={isSaas ? 'xl' : 'md'}
-    >
+    <Card variant='preview'>
       <Flex flexDirection='column' gap={6}>
         <Flex>
           <Text fontWeight='bold' textTransform='uppercase'>
@@ -157,7 +147,7 @@ const Preview = () => {
           />
         </Link>
       </Flex>
-    </Flex>
+    </Card>
   )
 }
 

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 (
     <Box>
       {fields.map((_, idx: number) => (
@@ -59,12 +57,7 @@ const Options = ({ fields, removeOption, appendOption, index }: Props) => {
           </Flex>
         </FormControl>
       ))}
-      <Button
-        variant={isSaas ? 'outline' : 'secondary'}
-        ml={5}
-        onClick={() => appendOption({ option: '' })}
-        colorScheme={isSaas && 'whiteAlpha'}
-      >
+      <Button variant={'outline'} ml={5} onClick={() => appendOption({ option: '' })}>
         {t('form.process_create.question.add_new_option')}
       </Button>
     </Box>

src/components/ProcessCreate/Questions/Question.tsx

@@ -67,9 +67,7 @@ const Question = ({ index, remove }: Props) => {
 
       <Options fields={fields} removeOption={removeOption} appendOption={appendOption} index={index} />
 
-      <Text position='absolute' fontSize='100px' bottom={0} right={5} color='text.brand' opacity={0.2}>
-        {index + 1}
-      </Text>
+      <Text variant='question-index'>{index + 1}</Text>
     </Box>
   )
 }
@@ -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 (
-    <Flex flexDirection='column' gap={5}>
+    <>
       <Box>
         <Text variant='process-create-title'>{title}</Text>
         <Text variant='process-create-subtitle-sm'>{description}</Text>
       </Box>
-      {fields.map((_, index) => (
-        <Question key={index} index={index} remove={remove} />
-      ))}
-
-      {isMultiQuestion && (
-        <Button
-          type='button'
-          rightIcon={<AddIcon boxSize={3} />}
-          aria-label={t('form.process_create.question.add_question')}
-          onClick={() => {
-            append({
-              title: '',
-              description: '',
-              options: [{ option: '' }, { option: '' }],
-            })
-          }}
-          alignSelf='center'
-          variant={isSaas ? 'outline' : 'secondary'}
-          colorScheme={isSaas && 'whiteAlpha'}
-        >
-          {t('form.process_create.question.add_question')}
-        </Button>
-      )}
-    </Flex>
+      <Flex flexDirection='column' gap={6}>
+        {fields.map((_, index) => (
+          <Question key={index} index={index} remove={remove} />
+        ))}
+
+        {isMultiQuestion && (
+          <Button
+            type='button'
+            rightIcon={<AddIcon boxSize={3} />}
+            aria-label={t('form.process_create.question.add_question')}
+            onClick={() => {
+              append({
+                title: '',
+                description: '',
+                options: [{ option: '' }, { option: '' }],
+              })
+            }}
+            alignSelf='center'
+            variant={'outline'}
+          >
+            {t('form.process_create.question.add_question')}
+          </Button>
+        )}
+      </Flex>
+    </>
   )
 }
 

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 (
     <Wrapper>
       <Box>
-        {!isSaas && <Text fontWeight='bold'>{t('form.process_create.confirm.title')}</Text>}
-        <Text mb={4} color={textColorSecondary}>
+        <Text variant='process-create-title'>{t('form.process_create.confirm.title')}</Text>
+        <Text variant='process-create-subtitle-sm' mb={6}>
           {t('form.process_create.confirm.description')}
         </Text>
         <ElectionProvider election={published}>
           <FormProvider {...methods}>
             <Flex flexDirection={{ base: 'column', xl2: 'row' }} gap={5}>
               <Preview />
-              <Box
-                flex={{ xl2: '0 0 25%' }}
-                bgColor={bgSecondary}
-                p={isSaas ? 6 : 0}
-                borderRadius={isSaas ? 'xl' : 'md'}
-              >
+              <Card variant='confirm'>
                 <CostPreview unpublished={unpublished} />
 
                 <Box>
-                  <Text fontWeight='bold' textTransform='uppercase' px={2} mb={2}>
+                  <Text variant='process-create-title' textTransform='uppercase'>
                     {t('form.process_create.confirm.confirmation')}
                   </Text>
                   <Flex
@@ -338,19 +331,19 @@ export const Confirm = () => {
                     </FormControl>
                   </Flex>
                 </Box>
-              </Box>
+              </Card>
             </Flex>
           </FormProvider>
         </ElectionProvider>
       </Box>
       <Flex justifyContent='space-between' mt='auto' my={6}>
-        <Button colorScheme={isSaas && 'whiteAlpha'} variant={isSaas ? 'rounded' : 'secondary'} onClick={prev}>
+        <Button colorScheme={'whiteAlpha'} variant={'rounded'} onClick={prev}>
           <ArrowBackIcon />
           <Text as='span'>{t('form.process_create.previous_step')}</Text>
         </Button>
 
         <Button
-          variant={isSaas ? 'rounded' : 'secondary'}
+          variant={'rounded'}
           type='submit'
           form='process-create-form'
           isDisabled={disabled}