Create process form styles (#781)

* process create saas styles * fixed issues * editor border width * removed unnecesary inline styles * fixed issue * default preview * refactor, remove isSaas styles conditions and colors * fixed lint issues * fixed issues
vocdoni · Oct 21, 2024 · 156cfa7 · 156cfa7 · github-actions · Oct 21, 2024
1 parent adbf409
commit 156cfa7
Show file tree

Hide file tree

Showing 54 changed files with 943 additions and 749 deletions.
diff --git a/src/components/Calculator/index.tsx b/src/components/Calculator/index.tsx
@@ -161,7 +161,7 @@ const LeftSideCalculator = ({
         py='16px'
         bgColor='calculator.left_side'
       >
-        <Text className='process-create-title' textTransform='uppercase' textAlign='center' mb={5}>
+        <Text fontWeight='bold' textTransform='uppercase' textAlign='center' mb={5}>
           {t('calculator.estimate_election_cost')}
         </Text>
         <Flex flexGrow={1} mb={5} flexDirection='column' justifyContent='space-between' gap={3}>

diff --git a/src/components/Editor/Editor.tsx b/src/components/Editor/Editor.tsx
@@ -26,6 +26,7 @@ import ReadOnlyPlugin from './plugins/ReadOnlyPlugin'
 import ToolbarPlugin from './plugins/ToolbarPlugin'
 import exampleTheme from './theme'
 
+import { Box, useColorModeValue } from '@chakra-ui/react'
 import './styles.css'
 
 function Placeholder(props: any) {
@@ -43,6 +44,7 @@ type EditorProps = {
 const Editor = (props: EditorProps) => {
   const [isLinkEditMode, setIsLinkEditMode] = useState<boolean>(false)
   const [floatingAnchorElem, setFloatingAnchorElem] = useState<HTMLDivElement | null>(null)
+  const bg = useColorModeValue('#ffffff', '#303B4D')
 
   const settings = {
     editorState: () => $convertFromMarkdownString(props.defaultValue ?? '', TRANSFORMERS),
@@ -78,7 +80,7 @@ const Editor = (props: EditorProps) => {
 
   return (
     <LexicalComposer initialConfig={settings}>
-      <div className='editor-container'>
+      <Box className='editor-container' bgColor={bg}>
         <ToolbarPlugin setIsLinkEditMode={setIsLinkEditMode} />
         <div className='editor-inner'>
           <RichTextPlugin
@@ -116,7 +118,7 @@ const Editor = (props: EditorProps) => {
           <ListMaxIndentLevelPlugin maxDepth={3} />
           <MarkdownShortcutPlugin transformers={TRANSFORMERS} />
         </div>
-      </div>
+      </Box>
     </LexicalComposer>
   )
 }

diff --git a/src/components/Editor/styles.css b/src/components/Editor/styles.css
@@ -1,15 +1,16 @@
 .editor-container {
-  border-radius: 5px;
+  border-radius: 0.75rem;
   position: relative;
   line-height: 20px;
   font-weight: 400;
   text-align: left;
-  border: 1px solid #e2e8f0;
+  border: 0.1px solid #e2e8f0;
   margin-bottom: 10px;
+  overflow: hidden;
 }
 
 .editor-container:focus-within {
-  outline: 2px solid #3182ce;
+  outline: 2px solid #3965ff;
 }
 
 .editor-inner {
@@ -162,8 +163,6 @@ pre::-webkit-scrollbar-thumb {
   margin-bottom: 1px;
   background: #fff;
   padding: 4px;
-  border-top-left-radius: 10px;
-  border-top-right-radius: 10px;
   vertical-align: middle;
 }
 

diff --git a/src/components/Layout/InputCustom.tsx b/src/components/Layout/InputCustom.tsx
@@ -66,7 +66,7 @@ const InputCustom = ({
   return (
     <FormControl isInvalid={!!errors[formValue]}>
       {label && (
-        <FormLabel display='flex' ms={1} fontSize='sm' fontWeight='500' color={textColor} mb={2}>
+        <FormLabel variant='process-create-title-sm'>
           {label}
           {required && (
             <Text color={textColorBrand} ml={1}>
@@ -75,7 +75,7 @@ const InputCustom = ({
           )}
         </FormLabel>
       )}
-      <InputGroup size='md'>
+      <InputGroup>
         <Input {...register(formValue, validationRules)} type={inputType} placeholder={placeholder} />
         {type === 'password' && (
           <InputRightElement display='flex' alignItems='center' minH='100%'>

diff --git 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
@@ -1,6 +1,9 @@
 import {
   Box,
   Button,
+  Card,
+  CardBody,
+  CardFooter,
   Checkbox,
   Flex,
   FormControl,
@@ -87,44 +90,30 @@ export const CensusCsvManager = () => {
   return (
     <>
       <Flex
-        gap={5}
+        gap={6}
         flexDirection={{ base: 'column', lg: 'row' }}
-        mb={5}
+        mb={6}
         alignItems={{ base: 'start', lg: 'stretch' }}
         justifyContent='center'
       >
-        <Box flex='1 1 60%'>
-          <Flex alignItems='center' gap={1} mb={5} color='process_create.spreadsheet.requirements_text'>
+        <Flex flexDirection='column' gap={6} flex='1 1 60%'>
+          <Flex alignItems='center' gap={1}>
             <Icon as={PiWarningCircleLight} />
-            <Text>{t('form.process_create.spreadsheet.requirements.title')}</Text>
+            <Text mt={0.5}>{t('form.process_create.spreadsheet.requirements.title')}</Text>
           </Flex>
-          <UnorderedList mb={4} fontSize='sm'>
+          <UnorderedList>
             <ListItem mb={2}>
-              <Text>{t('form.process_create.spreadsheet.requirements.list_one')}</Text>
+              <Text variant='process-create-subtitle-sm'>
+                {t('form.process_create.spreadsheet.requirements.list_one')}
+              </Text>
             </ListItem>
             <ListItem>
-              <Text>{t('form.process_create.spreadsheet.requirements.list_two')}</Text>
+              <Text variant='process-create-subtitle-sm'>
+                {t('form.process_create.spreadsheet.requirements.list_two')}
+              </Text>
             </ListItem>
           </UnorderedList>
-          <FormControl
-            bgColor='process_create.bg'
-            borderRadius='md'
-            sx={{
-              '& > label': {
-                position: 'relative',
-
-                '& span:first-of-type': {
-                  position: 'absolute',
-                  top: 1,
-                  right: 1,
-                },
-
-                '& > input:checked + span': {
-                  bgColor: 'process_create.census.weighted_vote_checked',
-                },
-              },
-            }}
-          >
+          <FormControl>
             <Controller
               control={control}
               name='weightedVote'
@@ -143,40 +132,32 @@ export const CensusCsvManager = () => {
                   onBlur={onBlur}
                   ref={ref}
                   isChecked={value}
-                  w='full'
-                  p={3}
+                  variant={'radiobox'}
                 >
-                  <Flex alignItems='center' gap={1}>
+                  <Flex>
                     <Icon as={BiCheckDouble} />
-                    <Text fontWeight='bold' mb={1}>
+                    <Text>
                       <Trans i18nKey='form.process_create.weighted'>Weighted vote</Trans>
                     </Text>
                   </Flex>
-                  <Text color='process_create.description' fontSize='sm'>
-                    {t('form.process_create.spreadsheet.requirements.list_three')}
-                  </Text>
+                  <Text>{t('form.process_create.spreadsheet.requirements.list_three')}</Text>
                 </Checkbox>
               )}
             />
           </FormControl>
-        </Box>
-        <Flex
-          flex='1 1 40%'
-          flexDirection='column'
-          justifyContent='center'
-          alignItems='center'
-          gap={3}
-          p={6}
-          borderRadius='lg'
-          mx='auto'
-        >
-          <Text textAlign='center'>{t('form.process_create.spreadsheet.download_template_description')}</Text>
-          <Link download={'census-template.csv'} href={template.url}>
-            <Button leftIcon={<BiDownload />} colorScheme='primary' variant='ghost' border='1px solid'>
-              {t('form.process_create.spreadsheet.download_template_btn')}
-            </Button>
-          </Link>
         </Flex>
+        <Card variant='download-spreadsheet'>
+          <CardBody>
+            <Text>{t('form.process_create.spreadsheet.download_template_description')}</Text>
+          </CardBody>
+          <CardFooter>
+            <Link download={'census-template.csv'} href={template.url}>
+              <Button variant={'outline'} leftIcon={<BiDownload />}>
+                {t('form.process_create.spreadsheet.download_template_btn')}
+              </Button>
+            </Link>
+          </CardFooter>
+        </Card>
       </Flex>
 
       <FormControl
@@ -185,18 +166,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='process_create.bg'
-          borderRadius='lg'
-          cursor='pointer'
-        >
+        <Card variant='drag-and-drop'>
           <input {...getInputProps()} />
           <Icon as={RiFileExcel2Line} boxSize={20} color='process_create.spreadsheet.file' />
           <Box>
@@ -214,7 +184,7 @@ export const CensusCsvManager = () => {
               />
             )}
           </Box>
-        </Flex>
+        </Card>
         <FormErrorMessage display='flex' justifyContent='center'>
           {errors?.spreadsheet?.message?.toString()}
         </FormErrorMessage>