applied figma styles, closes #848

vocdoni · Nov 28, 2024 · b7b4e51 · b7b4e51
1 parent 86fa9af
commit b7b4e51
Show file tree

Hide file tree

Showing 21 changed files with 392 additions and 356 deletions.
diff --git a/src/components/Editor/Editor.tsx b/src/components/Editor/Editor.tsx
@@ -79,7 +79,27 @@ const Editor = (props: EditorProps) => {
 
   return (
     <LexicalComposer initialConfig={settings}>
-      <Box className='editor-container' bg={'text_area.bg_light'} _dark={{ bgColor: 'text_area.bg_dark' }}>
+      <Box
+        className='editor-container'
+        bg={'text_area.bg_light'}
+        _dark={{
+          bgColor: 'text_area.bg_dark',
+          borderColor: '#4A5568 !important',
+
+          '.editor-placeholder': {
+            color: 'rgba(255, 255, 255, 0.24)',
+          },
+
+          '&:hover': {
+            outline: '1px solid rgba(255, 255, 255, 0.24)',
+          },
+          '&:focus-within': {
+            borderColor: 'transparent',
+            outline: '2px solid',
+            outlineColor: 'input.outline.dark !important',
+          },
+        }}
+      >
         <ToolbarPlugin setIsLinkEditMode={setIsLinkEditMode} />
         <div className='editor-inner'>
           <RichTextPlugin

diff --git a/src/components/Editor/styles.css b/src/components/Editor/styles.css
@@ -1,19 +1,18 @@
 .editor-container {
-  border-radius: 0.75rem;
+  border-radius: 8px;
   position: relative;
   line-height: 20px;
   font-weight: 400;
   text-align: left;
-  border: 0.1px solid #e2e8f0;
+  border: 1px solid #e2e8f0;
   margin-bottom: 10px;
   overflow: hidden;
 }
 
 .editor-container:hover {
   border-color: transparent;
   outline-offset: '0px';
-  outline: '.1px solid';
-  outline: 2px solid #cbd5e0;
+  outline: 1px solid #cbd5e0;
 }
 
 .editor-container:focus-within {
@@ -28,7 +27,7 @@
 .editor-input {
   min-height: 150px;
   resize: none;
-  font-size: 15px;
+  font-size: 16px;
   caret-color: rgb(5, 5, 5);
   position: relative;
   tab-size: 1;
@@ -44,7 +43,7 @@
   text-overflow: ellipsis;
   top: 15px;
   left: 16px;
-  font-size: 15px;
+  font-size: 16px;
   user-select: none;
   display: inline-block;
   pointer-events: none;

diff --git a/src/components/Layout/InputBasic.tsx b/src/components/Layout/InputBasic.tsx
@@ -5,21 +5,11 @@ import { useTranslation } from 'react-i18next'
 export interface InputBasicProps extends InputProps {
   formValue: string
   label: string
-  placeholder?: string
-  type?: string
   required?: boolean
   validation?: any
   messageError?: string
 }
-const InputBasic = ({
-  formValue,
-  label,
-  placeholder,
-  type = 'text',
-  required = false,
-  validation = {},
-  ...props
-}: InputBasicProps) => {
+const InputBasic = ({ formValue, label, required = false, validation = {}, ...props }: InputBasicProps) => {
   const { t } = useTranslation()
   const {
     register,
@@ -35,8 +25,8 @@ const InputBasic = ({
 
   return (
     <FormControl isInvalid={!!errors[formValue]} isRequired={required}>
-      {label && <FormLabel variant='process-create-title-sm'>{label}</FormLabel>}
-      <Input {...register(formValue, validationRules)} type={type} placeholder={placeholder} {...props} />
+      {label && <FormLabel>{label}</FormLabel>}
+      <Input {...register(formValue, validationRules)} {...props} />
       <FormErrorMessage mt={2}>{errorMessage || 'Error performing the operation'}</FormErrorMessage>
     </FormControl>
   )

diff --git a/src/components/Layout/UpLoader.tsx b/src/components/Layout/UpLoader.tsx
@@ -0,0 +1,61 @@
+import { Box, Flex, Icon, Text } from '@chakra-ui/react'
+import { DropzoneInputProps, DropzoneRootProps } from 'react-dropzone/.'
+import { Trans, useTranslation } from 'react-i18next'
+import { FiUploadCloud } from 'react-icons/fi'
+
+const UpLoader = ({
+  getRootProps,
+  getInputProps,
+  isDragActive,
+}: {
+  getRootProps: <T extends DropzoneRootProps>(props?: T) => T
+  getInputProps: <T extends DropzoneInputProps>(props?: T) => T
+  isDragActive: boolean
+}) => {
+  const { t } = useTranslation()
+
+  return (
+    <Flex
+      flexDirection='column'
+      justifyContent='center'
+      alignItems='center'
+      gap={5}
+      p={10}
+      border={'1px solid'}
+      borderColor={isDragActive ? 'input.drag_and_drop.border_active' : 'input.drag_and_drop.border'}
+      cursor='pointer'
+      borderRadius={12}
+      {...getRootProps()}
+    >
+      <input {...getInputProps()} />
+      <Flex
+        justifyContent={'center'}
+        alignItems={'center'}
+        border='1px solid'
+        borderColor={'input.drag_and_drop.border'}
+        borderRadius='lg'
+        p={2}
+      >
+        <Icon as={FiUploadCloud} boxSize={10} color='process_create.spreadsheet.file' />
+      </Flex>
+      <Box>
+        {isDragActive ? (
+          <Text textAlign='center' color='process_create.description'>
+            {t('uploader.drop_here')}
+          </Text>
+        ) : (
+          <Trans
+            i18nKey='uploader.click_or_drag_and_drop'
+            components={{
+              click: <Text as='span' textAlign='center' color='input.drag_and_drop.text' />,
+              drag: <Text as='span' textAlign='center' />,
+              formats: <Text textAlign='center' fontSize='sm' color='process_create.description' />,
+            }}
+          />
+        )}
+      </Box>
+    </Flex>
+  )
+}
+
+export default UpLoader
diff --git a/src/components/ProcessCreate/Census/Spreadsheet/index.tsx b/src/components/ProcessCreate/Census/Spreadsheet/index.tsx
@@ -1,5 +1,4 @@
 import {
-  Box,
   Button,
   Card,
   CardBody,
@@ -20,7 +19,7 @@ import { Controller, useFormContext } from 'react-hook-form'
 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 UpLoader from '~components/Layout/Uploader'
 import { CensusSpreadsheetManager } from './CensusSpreadsheetManager'
 import { CsvGenerator } from './generator'
 import { CsvPreview } from './Preview'
@@ -166,25 +165,7 @@ export const CensusCsvManager = () => {
         isInvalid={!!errors?.spreadsheet}
         display={manager?.data.length ? 'none' : 'block'}
       >
-        <Card variant='drag-and-drop'>
-          <input {...getInputProps()} />
-          <Icon as={RiFileExcel2Line} boxSize={20} color='process_create.spreadsheet.file' />
-          <Box>
-            {isDragActive ? (
-              <Text textAlign='center' color='process_create.description'>
-                {t('uploader.drop_here')}
-              </Text>
-            ) : (
-              <Trans
-                i18nKey='uploader.click_or_drag_and_drop'
-                components={{
-                  p1: <Text textAlign='center' color='process_create.description' />,
-                  p2: <Text textAlign='center' fontSize='sm' color='process_create.description' />,
-                }}
-              />
-            )}
-          </Box>
-        </Card>
+        <UpLoader getInputProps={getInputProps} getRootProps={getRootProps} isDragActive={isDragActive} />
         <FormErrorMessage display='flex' justifyContent='center'>
           {errors?.spreadsheet?.message?.toString()}
         </FormErrorMessage>

diff --git a/src/components/ProcessCreate/Census/Web3.tsx b/src/components/ProcessCreate/Census/Web3.tsx
@@ -19,7 +19,7 @@ import { useDropzone } from 'react-dropzone'
 import { Controller, useFieldArray, useFormContext } from 'react-hook-form'
 import { Trans, useTranslation } from 'react-i18next'
 import { BiCheckDouble } from 'react-icons/bi'
-import { RiFileExcel2Line } from 'react-icons/ri'
+import UpLoader from '~components/Layout/Uploader'
 import { addressTextOverflow, fieldMapErrorMessage, isInvalidFieldMap } from '~constants'
 import { Web3CensusSpreadsheetManager } from './Spreadsheet/Web3CensusSpreadsheetManager'
 
@@ -245,36 +245,7 @@ export const CensusWeb3Addresses = () => {
             )}
           />
           <FormControl isInvalid={!!fileErr}>
-            <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'
-              cursor='pointer'
-              {...getRootProps()}
-            >
-              <input {...getInputProps()} />
-              <Icon as={RiFileExcel2Line} boxSize={20} color='process_create.spreadsheet.file' />
-              <Box>
-                {isDragActive ? (
-                  <Text textAlign='center' color='process_create.description'>
-                    {t('uploader.drop_here')}
-                  </Text>
-                ) : (
-                  <Trans
-                    i18nKey='uploader.click_or_drag_and_drop'
-                    components={{
-                      p1: <Text textAlign='center' color='process_create.description' />,
-                      p2: <Text textAlign='center' fontSize='sm' color='process_create.description' />,
-                    }}
-                  />
-                )}
-              </Box>
-            </Flex>
+            <UpLoader getInputProps={getInputProps} getRootProps={getRootProps} isDragActive={isDragActive} />
             <FormErrorMessage>{fileErr}</FormErrorMessage>
           </FormControl>
         </Flex>

diff --git a/src/components/ProcessCreate/Census/select-components.tsx b/src/components/ProcessCreate/Census/select-components.tsx
@@ -1,5 +1,6 @@
-import { ChevronDownIcon, SearchIcon } from '@chakra-ui/icons'
+import { CheckIcon, ChevronDownIcon, SearchIcon } from '@chakra-ui/icons'
 import { Avatar, Flex, Link, Text } from '@chakra-ui/react'
+import { getNetwork } from '@ethersproject/providers'
 import {
   chakraComponents,
   DropdownIndicatorProps,
@@ -8,13 +9,12 @@ import {
   OptionProps,
   SingleValueProps,
 } from 'chakra-react-select'
+import { useEffect, useState } from 'react'
 import { BsImage } from 'react-icons/bs'
 import { FaEthereum } from 'react-icons/fa'
 import { FaPeopleGroup } from 'react-icons/fa6'
 import ethIcon from '/assets/eth.jpg'
 import polygonIcon from '/assets/polygon-matic.jpg'
-import { useEffect, useState } from 'react'
-import { getNetwork } from '@ethersproject/providers'
 
 const SingleValueToken = (props: SingleValueProps<any, false, GroupBase<any>>) => {
   const {
@@ -55,6 +55,7 @@ const OptionToken = (props: OptionProps<any, false, GroupBase<any>>) => {
   const {
     children,
     data: { type: groupType, name, iconURI, ID, chainID },
+    isSelected,
   } = props
   if (groupType === 'request') {
     return (
@@ -72,10 +73,12 @@ const OptionToken = (props: OptionProps<any, false, GroupBase<any>>) => {
   } else {
     return (
       <chakraComponents.Option {...props}>
-        <Flex alignItems='center' gap={2}>
-          <CryptoAvatar name={name} icon={iconURI} id={ID} chainId={chainID} />
-
-          <Text>{children}</Text>
+        <Flex justifyContent={'space-between'} alignItems={'center'} w='full'>
+          <Flex gap={2} color='black'>
+            <CryptoAvatar name={name} icon={iconURI} id={ID} chainId={chainID} />
+            <Text>{children}</Text>
+          </Flex>
+          {isSelected && <CheckIcon color='input.dropdown.check_icon' ml='auto' />}
         </Flex>
       </chakraComponents.Option>
     )
@@ -123,14 +126,18 @@ const OptionNetwork = (props: OptionProps<any, false, GroupBase<any>>) => {
   const {
     data: { name, shortName },
     children,
+    isSelected,
   } = props
 
   const iconSource = getIconSource(shortName)
   return (
     <chakraComponents.Option {...props}>
-      <Flex alignItems='center' gap={2}>
-        <CryptoAvatar name={name} icon={iconSource} />
-        <Text>{children}</Text>
+      <Flex justifyContent={'space-between'} alignItems={'center'} w='full'>
+        <Flex gap={2}>
+          <CryptoAvatar name={name} icon={iconSource} />
+          <Text>{children}</Text>
+        </Flex>
+        {isSelected && <CheckIcon color='input.dropdown.check_icon' ml='auto' />}
       </Flex>
     </chakraComponents.Option>
   )

diff --git a/src/components/ProcessCreate/Meta.tsx b/src/components/ProcessCreate/Meta.tsx
@@ -24,7 +24,6 @@ const CreateProcessMeta = () => {
             defaultValue: 'Provide a clear title and description to help voters understand the vote',
           })}
         </Text>
-
         <InputBasic
           formValue='title'
           label={t('process_create.title', { defaultValue: 'Title' })}

diff --git a/src/components/ProcessCreate/Settings/Calendar.tsx b/src/components/ProcessCreate/Settings/Calendar.tsx
@@ -81,14 +81,14 @@ const Calendar = () => {
           </Text>
           <RadioGroup {...useBooleanRadioRegister('electionType.autoStart')} mb={6}>
             <Stack direction={{ base: 'column', lg: 'row' }} gap={5} alignItems='start' justifyContent='start'>
-              <FormControl variant='calendar'>
+              <FormControl w='fit-content'>
                 <Radio value='1' onClick={() => clearErrors('startDate')}>
                   <Text as='span'>{t('form.process_create.calendar.now')}</Text>
                 </Radio>
               </FormControl>
 
               <Box>
-                <FormControl variant='calendar' mb={3}>
+                <FormControl w='fit-content' mb={3}>
                   <Radio value='0'>
                     <Text
                       as='span'

diff --git a/src/components/ProcessCreate/Settings/index.tsx b/src/components/ProcessCreate/Settings/index.tsx
diff --git a/src/components/ProcessCreate/StepForm/Info.tsx b/src/components/ProcessCreate/StepForm/Info.tsx
@@ -2,7 +2,7 @@ import { Flex } from '@chakra-ui/react'
 import { ElectionResultsTypeNames } from '@vocdoni/sdk'
 import { FormProvider, SubmitHandler, useForm } from 'react-hook-form'
 import CreateProcessMeta from '../Meta'
-import CreateProcessSettings from '../Settings'
+import Calendar from '../Settings/Calendar'
 import { StepsNavigation } from '../Steps/Navigation'
 import Wrapper from '../Steps/Wrapper'
 import { useProcessCreationSteps } from '../Steps/use-steps'
@@ -53,7 +53,7 @@ export const Info = () => {
           gap={8}
         >
           <CreateProcessMeta />
-          <CreateProcessSettings />
+          <Calendar />
         </Flex>
         <StepsNavigation />
       </Wrapper>

diff --git a/src/i18n/locales/ca.json b/src/i18n/locales/ca.json
@@ -1052,7 +1052,7 @@
   "update": "Update",
   "upload": "Upload",
   "uploader": {
-    "click_or_drag_and_drop": "<p1>Puja o arrossega i deixa anar aquí la llista de votants</p1><p2>(Formats permesos: CSV, XLSX i ODS)</p2>",
+    "click_or_drag_and_drop": "<click>Fes clic per pujar</click> <drag>o arrossega i deixa anar</drag><formats>(Formats permesos: CSV, XLSX i ODS)</formats>",
     "drop_here": "Deixa anar aquí"
   },
   "use_read_more": {

diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
@@ -1041,7 +1041,7 @@
   "update": "Update",
   "upload": "Upload",
   "uploader": {
-    "click_or_drag_and_drop": "<p1>Upload or drag and drop the voter list here</p1><p2>(Allowed formats: CSV, XLSX, and ODS)</p2>",
+    "click_or_drag_and_drop": "<click>Click to upload</click> <drag>or drag and drop</drag><formats>(Allowed formats: CSV, XLSX, and ODS)</formats>",
     "drop_here": "Drop here"
   },
   "use_read_more": {