Create process improvments

src/components/Layout/Uploader.tsx

@@ -51,7 +51,7 @@ const Uploader = ({ getRootProps, getInputProps, isDragActive, isLoading, format
           <Trans
             i18nKey='uploader.click_or_drag_and_drop'
             components={{
-              click: <Text as='span' textAlign='center' color='input.drag_and_drop.text' />,
+              click: <Text as='span' textAlign='center' color='input.drag_and_drop.text' _dark={{ color: 'white' }} />,
               drag: <Text as='span' textAlign='center' />,
               formats: <Text textAlign='center' fontSize='sm' />,
             }}

src/components/ProcessCreate/Census/Spreadsheet/Preview.tsx

@@ -1,4 +1,4 @@
-import { Badge, Box, Button, Flex, FormControl, FormLabel, Icon, Input, Text } from '@chakra-ui/react'
+import { Box, Button, Flex, FormControl, FormLabel, Icon, Input, Text } from '@chakra-ui/react'
 import { DropzoneRootProps } from 'react-dropzone'
 import { useTranslation } from 'react-i18next'
 import { RiFileExcel2Line } from 'react-icons/ri'
@@ -39,10 +39,11 @@ export const CsvPreview = ({ manager, upload }: CsvPreviewProps) => {
         </Button>
       </Flex>
 
-      <Box bgColor='process_create.spreadsheet.preview_bg_interior' p={5} borderRadius='lg'>
-        <Badge>{t('form.process_create.spreadsheet.preview.title')}</Badge>
+      <Box bgColor='process_create.spreadsheet.preview_bg_interior' px={5} borderRadius='lg'>
+        <Text fontWeight={'bold'} fontSize={'lg'}>
+          {t('form.process_create.spreadsheet.preview.title')}
+        </Text>
         <Text my={3}>{t('form.process_create.spreadsheet.preview.description')}</Text>
-
         <Flex flexDirection='column' gap={3} w={{ base: '70%', md: '50%' }} mx='auto'>
           {manager.header.map((field) => (
             <FormControl key={field}>

src/components/ProcessCreate/Census/Spreadsheet/index.tsx

@@ -95,21 +95,17 @@ export const CensusCsvManager = () => {
         alignItems={{ base: 'start', lg: 'stretch' }}
         justifyContent='center'
       >
-        <Flex flexDirection='column' gap={6} flex='1 1 60%'>
-          <Flex alignItems='center' gap={1}>
+        <Flex flexDirection='column' flex='1 1 60%'>
+          <Flex alignItems='center' gap={1} mt={3} mb={2}>
             <Icon as={PiWarningCircleLight} />
             <Text mt={0.5}>{t('form.process_create.spreadsheet.requirements.title')}</Text>
           </Flex>
-          <UnorderedList>
+          <UnorderedList mb={6}>
             <ListItem mb={2}>
-              <Text variant='process-create-subtitle-sm'>
-                {t('form.process_create.spreadsheet.requirements.list_one')}
-              </Text>
+              <Text>{t('form.process_create.spreadsheet.requirements.list_one')}</Text>
             </ListItem>
             <ListItem>
-              <Text variant='process-create-subtitle-sm'>
-                {t('form.process_create.spreadsheet.requirements.list_two')}
-              </Text>
+              <Text>{t('form.process_create.spreadsheet.requirements.list_two')}</Text>
             </ListItem>
           </UnorderedList>
           <FormControl>

src/components/ProcessCreate/Census/Web3.tsx

@@ -213,8 +213,8 @@ export const CensusWeb3Addresses = () => {
             <Trans
               i18nKey='form.process_create.web3.census_members'
               components={{
-                span: <Text as='span' fontWeight='bold' variant='process-create-subtitle-sm' />,
-                text: <Text variant='process-create-subtitle-sm' />,
+                span: <Text as='span' fontWeight='bold' />,
+                text: <Text />,
               }}
               count={fields.length}
             />

src/components/ProcessCreate/StepForm/CensusCsp.tsx

@@ -39,7 +39,7 @@ export const StepFormCensusCsp = () => {
 
   return (
     <>
-      <Text variant='process-create-census-title'>{t('census.social_address_title')}</Text>
+      <Text fontWeight={'bold'}>{t('census.social_address_title')}</Text>
       <FormProvider {...methods}>
         <Box as='form' id='process-create-form' onSubmit={methods.handleSubmit(onSubmit)}>
           <CensusCspList initialUsers={userList} />

src/components/ProcessCreate/StepForm/CensusGitcoin.tsx

@@ -39,8 +39,8 @@ export const StepFormCensusGitcoin = () => {
   }
   return (
     <>
-      <Text variant='process-create-census-title'>{t('census.gitcoin_title')}</Text>
-      <Text variant='process-create-subtitle-sm' mb={6}>
+      <Text fontWeight={'bold'}>{t('census.gitcoin_title')}</Text>
+      <Text mb={6}>
         {t('census.gitcoin_description')} <br />
         <Trans
           i18nKey='census.gitcoin_read_more'

src/components/ProcessCreate/StepForm/CensusSpreadsheet.tsx

@@ -28,7 +28,7 @@ export const StepFormCensusSpreadsheet = () => {
 
   return (
     <>
-      <Text variant='process-create-census-title'>{t('census.spreadsheet_title')}</Text>
+      <Text fontWeight={'bold'}>{t('census.spreadsheet_title')}</Text>
       <FormProvider {...methods}>
         <Box as='form' id='process-create-form' onSubmit={methods.handleSubmit(onSubmit)}>
           <CensusCsvManager />

src/components/ProcessCreate/StepForm/CensusToken.tsx

@@ -34,8 +34,8 @@ export const StepFormCensusToken = () => {
   }
   return (
     <>
-      <Text variant='process-create-census-title'>{t('census.token_title')}</Text>
-      <Text variant='process-create-subtitle-sm' mb={6}>
+      <Text>{t('census.token_title')}</Text>
+      <Text mb={6}>
         <Trans
           i18nKey='census.token_description'
           components={{

src/components/ProcessCreate/StepForm/CensusWeb3.tsx

@@ -48,7 +48,7 @@ export const StepFormCensusWeb3 = () => {
 
   return (
     <>
-      <Text variant='process-create-census-title'>{t('census.wallet_address_title')}</Text>
+      <Text fontWeight={'bold'}>{t('census.wallet_address_title')}</Text>
 
       <FormProvider {...methods}>
         <Box as='form' id='process-create-form' onSubmit={methods.handleSubmit(onSubmit)}>

src/components/ProcessCreate/Steps/Confirm.tsx

@@ -6,12 +6,6 @@ import {
   Flex,
   FormControl,
   FormErrorMessage,
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalHeader,
-  ModalOverlay,
   Text,
   useDisclosure,
   useToast,
@@ -47,7 +41,7 @@ import { CensusGitcoinValues } from '~components/ProcessCreate/StepForm/CensusGi
 import { DefaultCensusSize } from '~constants'
 import { useCspAdmin } from '../Census/Csp/use-csp'
 import Preview from '../Confirm/Preview'
-import { CreationProgress, Steps } from '../CreationProgress'
+import { Steps } from '../CreationProgress'
 import { Web3Address } from '../StepForm/CensusWeb3'
 import { Option } from '../StepForm/Questions'
 import { StepsFormValues, useProcessCreationSteps } from './use-steps'
@@ -230,7 +224,9 @@ export const Confirm = () => {
   return (
     <Wrapper>
       <Box>
-        <Text fontWeight={'bold'}>{t('form.process_create.confirm.title')}</Text>
+        <Text fontWeight={'bold'} mb={2}>
+          {t('form.process_create.confirm.title')}
+        </Text>
         <Text mb={6}>{t('form.process_create.confirm.description')}</Text>
         <ElectionProvider election={published}>
           <FormProvider {...methods}>
@@ -257,19 +253,7 @@ export const Confirm = () => {
                   <Text flexBasis='30%' flexGrow={0} flexShrink={0} fontWeight='bold'>
                     {t('form.process_create.confirm.confirmation')}
                   </Text>
-                  <FormControl
-                    isInvalid={!!errors.infoValid}
-                    sx={{
-                      '& label': {
-                        display: 'flex',
-                        alignItems: { xl2: 'start' },
-
-                        '& span:first-of-type': {
-                          mt: { xl2: 1.5 },
-                        },
-                      },
-                    }}
-                  >
+                  <FormControl isInvalid={!!errors.infoValid}>
                     <Checkbox {...register('infoValid', { required: true })}>
                       {t('form.process_create.confirm.confirmation_valid_info')}
                     </Checkbox>
@@ -284,7 +268,15 @@ export const Confirm = () => {
         </ElectionProvider>
       </Box>
       <Flex justifyContent='space-between' mt='auto' my={6}>
-        <Button colorScheme={'whiteAlpha'} variant={'rounded'} onClick={prev}>
+        <Button
+          colorScheme={'whiteAlpha'}
+          variant={'rounded'}
+          onClick={prev}
+          display={'flex'}
+          justifyContent={'center'}
+          alignItems={'center'}
+          gap={2}
+        >
           <ArrowBackIcon />
           <Text as='span'>{t('form.process_create.previous_step')}</Text>
         </Button>
@@ -300,19 +292,6 @@ export const Confirm = () => {
           {t('form.process_create.confirm.create_button')}
         </Button>
       </Flex>
-      <Modal isOpen={isOpen} onClose={onClose} closeOnEsc={!!error} closeOnOverlayClick={!!error} isCentered>
-        <ModalOverlay />
-        <ModalContent>
-          <ModalHeader>
-            <Text>{t('form.process_create.creating_process')}</Text>
-            <Box />
-          </ModalHeader>
-          {error && <ModalCloseButton />}
-          <ModalBody>
-            <CreationProgress error={error} sending={sending} step={step} />
-          </ModalBody>
-        </ModalContent>
-      </Modal>
     </Wrapper>
   )
 }

src/components/ProcessCreate/Steps/TabsPage.tsx

@@ -88,6 +88,7 @@ export const TabsPage = <Implemented extends string, UnImplemented extends strin
           <Text fontWeight={'bold'}>{title}</Text>
           <Text>{description}</Text>
         </Box>
+
         <Tabs
           defaultIndex={defined.findIndex((val) => val === selected)}
           index={tab}

src/elements/LayoutProcessCreate.tsx

@@ -3,7 +3,6 @@ import { Box, Button, Flex } from '@chakra-ui/react'
 import { useTranslation } from 'react-i18next'
 import { Outlet, Link as ReactRouterLink, ScrollRestoration, useNavigate } from 'react-router-dom'
 import { ColorModeSwitcher } from '~components/Layout/ColorModeSwitcher'
-import Logo from '~components/Layout/Logo'
 import SaasFooter from '~components/ProcessCreate/SaasFooter'
 import { Routes } from '~src/router/routes'
 
@@ -21,22 +20,20 @@ const LayoutProcessCreate = () => {
             maxW='2000px'
             w='full'
             mx='auto'
-            justifyContent='space-between'
+            justifyContent='end'
             alignItems='center'
             px={{ base: 2.5, sm: 5, lg: 10 }}
             py={{ base: 3, sm: 3, lg: 6 }}
+            gap={6}
           >
-            <Logo />
-            <Flex gap={6}>
-              <Button
-                as={ReactRouterLink}
-                onClick={(e) => (window.history.state.idx ? navigate(-1) : navigate(Routes.root))}
-                rightIcon={<CloseIcon boxSize={3} />}
-              >
-                {t('form.process_create.navbar.close_form_btn')}
-              </Button>
-              <ColorModeSwitcher />
-            </Flex>
+            <Button
+              as={ReactRouterLink}
+              onClick={(e) => (window.history.state.idx ? navigate(-1) : navigate(Routes.root))}
+              rightIcon={<CloseIcon boxSize={3} />}
+            >
+              {t('form.process_create.navbar.close_form_btn')}
+            </Button>
+            <ColorModeSwitcher />
           </Flex>
 
           <Box

src/i18n/locales/ca.json

@@ -452,15 +452,15 @@
         "confirmation_valid_info": "Confirmo que aquesta informació és correcta i vàlida",
         "create_button": "Crear",
         "dates": "Data",
-        "description": "En aquesta pàgina, podeu revisar que tota la informació sigui correcta i editar-la en cas que hi hagi algun error. També podeu comprovar el cost del procés de votació i comprar més crèdits en cas que no n'hi tingueu prou.",
+        "description": "En aquesta pàgina, podeu revisar que tota la informació sigui correcta i editar-la en cas que hi hagi algun error.",
         "description_election": "Descripció",
         "edit": "Editar",
         "election_info": "Informació de la Votació",
         "live_results": "Resultats en directe",
         "questions_one": "Pregunta",
         "questions_many": "",
         "questions_other": "Preguntes",
-        "title": "Vista prèvia i costos de votació",
+        "title": "Vista prèvia",
         "title_election": "Títol",
         "vote_overwrite": "Sobreescriure vot"
       },

src/i18n/locales/en.json

@@ -448,7 +448,7 @@
         "confirmation_valid_info": "I confirm that all information provided is accurate",
         "create_button": "Create",
         "dates": "Schedule",
-        "description": "On this page, you can verify and edit your information if needed. Additionally, you can review the voting process cost and buy more credits if necessary.",
+        "description": "On this page, you can verify and edit your information if needed.",
         "description_election": "Description",
         "edit": "Edit",
         "election_info": "Set up your voting process",

src/i18n/locales/es.json

@@ -452,15 +452,15 @@
         "confirmation_valid_info": "Confirmo que esta información es correcta y válida",
         "create_button": "Crear",
         "dates": "Fecha",
-        "description": "En esta página, puedes revisar que toda la información sea correcta y editarla en caso de que haya algún error. También puedes verificar el costo del proceso de votación y comprar más créditos en caso de que no tengas suficientes.",
+        "description": "En esta página, puedes revisar que toda la información sea correcta y editarla en caso de que haya algún error.",
         "description_election": "Descripción",
         "edit": "Editar",
         "election_info": "Información de Votación",
         "live_results": "Resultados en directo",
         "questions_one": "Pregunta",
         "questions_many": "",
         "questions_other": "Preguntas",
-        "title": "Vista previa y costos de votación",
+        "title": "Vista previa",
         "title_election": "Título",
         "vote_overwrite": "Sobrescribir voto"
       },

src/theme/components/button.ts

@@ -95,6 +95,7 @@ const transparent = defineStyle((props) => {
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
+    gap: 2,
     color: colorScheme === 'gray' ? 'black' : `${colorScheme}.700`,
 
     _active: {

src/theme/components/heading.ts

@@ -1,6 +1,11 @@
 import { defineStyle } from '@chakra-ui/react'
 
 const sizes = {
+  xxs: defineStyle({
+    fontSize: '20px',
+    lineHeight: '25px',
+    letterSpacing: '0%',
+  }),
   xs: defineStyle({
     fontSize: '24px',
     lineHeight: '32px',

src/theme/components/stepper.ts

@@ -7,6 +7,7 @@ const baseStyle = definePartsStyle((props) => ({
   indicator: {
     '&[data-status=complete]': {
       background: 'process_create.stepper.bg',
+      color: 'white',
     },
     '&[data-status=active]': {
       borderColor: 'process_create.stepper.color',
@@ -34,6 +35,9 @@ const baseStyle = definePartsStyle((props) => ({
     '&[data-status=active]': {
       fontWeight: 'bold',
       color: 'process_create.stepper.color',
+      _dark: {
+        color: 'white',
+      },
     },
   },
 }))