vocdoni · selankon · Sep 24, 2024 · Sep 23, 2024 · Sep 23, 2024 · Sep 23, 2024
diff --git a/src/components/AccountSaas/Create.tsx b/src/components/AccountSaas/Create.tsx
@@ -122,6 +122,8 @@ export const AccountCreate = ({ children, ...props }: FlexProps) => {
         as='form'
         id='process-create-form'
         direction='column'
+        maxW='90%'
+        mx='auto'
         {...props}
         onSubmit={(e) => {
           e.stopPropagation()

diff --git a/src/components/Auth/ForgotPassword.tsx b/src/components/Auth/ForgotPassword.tsx
@@ -17,35 +17,35 @@ function ForgotPassword() {
   const onSubmit = () => {}
 
   return (
-    <Flex direction='column'>
+    <Flex direction='column' gap={6}>
       <Box me='auto'>
-        <Heading color={textColor} fontSize='36px' mb='10px'>
+        <Heading color={textColor} fontSize='4xl' mb={2.5}>
           {t('forgot_password_title')}
         </Heading>
-        <Text mb='36px' ms='4px' color={textColorSecondary} fontWeight='400' fontSize='md'>
+        <Text color={textColorSecondary} fontWeight='400' fontSize='md'>
           {t('forgot_password_subtitle')}
         </Text>
       </Box>
 
       <FormProvider {...methods}>
-        <Box as='form' onSubmit={methods.handleSubmit(onSubmit)}>
+        <Flex as='form' onSubmit={methods.handleSubmit(onSubmit)} flexDirection='column' gap={6}>
           <InputCustom
             formValue='email'
             label={t('email')}
             placeholder={t('email_placeholder', { defaultValue: '[email protected]' })}
             type='email'
             required
           />
-          <Button type='submit' fontSize='sm' variant='brand' fontWeight='500' w='100%' h='50' mb='24px'>
+          <Button type='submit' fontSize='sm' variant='brand' fontWeight='500' w='100%' h={50}>
             {t('forgot_password_reset_link')}
           </Button>
-        </Box>
+        </Flex>
       </FormProvider>
-      <Flex flexDirection='column' justifyContent='center' alignItems='start' maxW='100%' mt='0px'>
-        <Text color={textColorSecondary} fontWeight='400' fontSize='14px'>
+      <Flex flexDirection='column' justifyContent='center' alignItems='start' maxW='100%' mt={0}>
+        <Text color={textColorSecondary} fontWeight='400' fontSize='sm'>
           {t('already_member')}
           <NavLink to='/signin'>
-            <Text color={textColorBrand} as='span' ms='5px' fontWeight='500'>
+            <Text color={textColorBrand} as='span' ms={1} fontWeight='500'>
               {t('signin')}
             </Text>
           </NavLink>

diff --git a/src/components/Auth/GoogleAuth.tsx b/src/components/Auth/GoogleAuth.tsx
@@ -18,7 +18,7 @@ const GoogleAuth = () => {
       _active={googleActive}
       _focus={googleActive}
     >
-      <Icon as={FcGoogle} w='20px' h='20px' me='10px' />
+      <Icon as={FcGoogle} w={5} h={5} me={2} />
 
       {t('signin_google')}
     </Button>

diff --git a/src/components/Auth/SignIn.tsx b/src/components/Auth/SignIn.tsx
@@ -46,25 +46,25 @@ const SignIn = () => {
   }
 
   return (
-    <Flex direction='column'>
+    <Flex direction='column' gap={6}>
       <Box me='auto'>
-        <Heading color={textColor} fontSize='36px' mb='10px'>
+        <Heading color={textColor} fontSize='4xl' mb={2.5}>
           {t('signin_title')}
         </Heading>
-        <Text mb='36px' ms='4px' color={textColorSecondary} fontWeight='400' fontSize='md'>
+        <Text color={textColorSecondary} fontWeight='400' fontSize='md'>
           {t('signin_subtitle')}
         </Text>
       </Box>
       <GoogleAuth />
-      <Flex align='center' my='24px'>
+      <Flex align='center'>
         <HSeparator />
-        <Text color='gray.400' mx='14px'>
+        <Text color='gray.400' mx={3.5}>
           {t('or')}
         </Text>
         <HSeparator />
       </Flex>
       <FormProvider {...methods}>
-        <Box as='form' onSubmit={handleSubmit(onSubmit)}>
+        <Flex as='form' onSubmit={handleSubmit(onSubmit)} flexDirection='column' gap={6}>
           <InputCustom
             formValue='email'
             label={t('email')}
@@ -79,43 +79,45 @@ const SignIn = () => {
             type='password'
             required
           />
-          <Flex justifyContent='center' align='center' mb='24px'>
+          <Flex justifyContent='center' align='center'>
             <CustomCheckbox formValue='keepLogedIn' label={t('keep_me_logged', { defaultValue: 'Kepp me logged' })} />
 
             <NavLink to='/auth/forgot-password'>
-              <Text color={textColorBrand} fontSize='sm' w='124px' fontWeight='500'>
+              <Text color={textColorBrand} fontSize='sm' fontWeight='500' whiteSpace='nowrap'>
                 {t('forgot_password')}
               </Text>
             </NavLink>
           </Flex>
-          <Button type='submit' fontSize='sm' variant='brand' fontWeight='500' w='100%' h='50' mb='24px'>
+          <Button type='submit' fontSize='sm' variant='brand' fontWeight='500' w='100%' h={50}>
             {t('signin')}
           </Button>
-        </Box>
+        </Flex>
       </FormProvider>
 
-      <Flex flexDirection='column' justifyContent='center' alignItems='start' maxW='100%' mt='0px'>
-        <Text fontWeight='400' fontSize='14px'>
+      <Flex flexDirection='column' justifyContent='center' alignItems='start' maxW='100%' mt={0}>
+        <Text fontWeight='400' fontSize='sm'>
           {t('not_registred_yet')}
           <NavLink to='/signup'>
-            <Text color={textColorBrand} as='span' ms='5px' fontWeight='500'>
+            <Text color={textColorBrand} as='span' ms={1} fontWeight='500'>
               {t('create_account')}
             </Text>
           </NavLink>
         </Text>
       </Flex>
-      <Box pt={2}>
-        <FormControl isInvalid={isError}>
-          {isError && <FormErrorMessage>{error?.message || 'Error al realizar la operación'}</FormErrorMessage>}
-        </FormControl>
-      </Box>
+      {isError && (
+        <Box>
+          <FormControl isInvalid={isError}>
+            <FormErrorMessage>{error?.message || 'Error al realizar la operación'}</FormErrorMessage>
+          </FormControl>
+        </Box>
+      )}
     </Flex>
   )
 }
 
 export const HSeparator = (props: { variant?: string; [x: string]: any }) => {
   const { variant, ...rest } = props
-  return <Flex h='1px' w='100%' bg='rgba(135, 140, 189, 0.3)' {...rest} />
+  return <Flex h='px' w='100%' bg='rgba(135, 140, 189, 0.3)' {...rest} />
 }
 
 export default SignIn
diff --git a/src/components/Auth/SignUp.tsx b/src/components/Auth/SignUp.tsx
@@ -1,16 +1,16 @@
 import { Box, Button, Flex, FormControl, FormErrorMessage, Heading, Link, Text } from '@chakra-ui/react'
+import { useState } from 'react'
 import { FormProvider, useForm } from 'react-hook-form'
 import { Trans, useTranslation } from 'react-i18next'
-import { NavLink, Link as ReactRouterLink, useNavigate } from 'react-router-dom'
+import { NavLink, Link as ReactRouterLink } from 'react-router-dom'
+import { IRegisterParams } from '~components/Auth/authQueries'
 import { useAuth } from '~components/Auth/useAuth'
+import { VerifyAccountNeeded } from '~components/Auth/Verify'
 import useDarkMode from '~src/themes/saas/hooks/useDarkMode'
 import CustomCheckbox from '../Layout/CheckboxCustom'
 import InputCustom from '../Layout/InputCustom'
 import GoogleAuth from './GoogleAuth'
 import { HSeparator } from './SignIn'
-import { useState } from 'react'
-import { IRegisterParams } from '~components/Auth/authQueries'
-import { VerifyAccountNeeded } from '~components/Auth/Verify'
 
 type FormData = {
   terms: boolean
@@ -39,26 +39,26 @@ const SignUp = () => {
   }
 
   return (
-    <Flex direction='column'>
+    <Flex direction='column' gap={6}>
       <Box me='auto'>
-        <Heading color={textColor} fontSize='36px' mb='10px'>
+        <Heading color={textColor} fontSize='4xl' mb={2.5}>
           {t('signup_title')}
         </Heading>
-        <Text mb='36px' ms='4px' color={textColorSecondary} fontWeight='400' fontSize='md'>
+        <Text color={textColorSecondary} fontWeight='400' fontSize='md'>
           {t('signup_subtitle')}
         </Text>
       </Box>
       <GoogleAuth />
-      <Flex align='center' my='24px'>
+      <Flex align='center'>
         <HSeparator />
-        <Text color='gray.400' mx='14px'>
+        <Text color='gray.400' mx={3.5}>
           {t('or')}
         </Text>
         <HSeparator />
       </Flex>
       <FormProvider {...methods}>
-        <Box as='form' onSubmit={handleSubmit(onSubmit)}>
-          <Flex flexDirection={{ base: 'column', md: 'row' }} gap={{ md: '15px' }}>
+        <Flex as='form' onSubmit={handleSubmit(onSubmit)} flexDirection='column' gap={6}>
+          <Flex flexDirection={{ base: 'column', md: 'row' }} gap={{ md: 4 }}>
             <InputCustom formValue='firstName' label={t('signup_first_name')} placeholder={'John'} required />
             <InputCustom formValue='lastName' label={t('signup_last_name')} placeholder={'Doe'} required />
           </Flex>
@@ -97,36 +97,30 @@ const SignUp = () => {
             }
             required
           />
-          <Button
-            isLoading={isPending}
-            type='submit'
-            fontSize='sm'
-            variant='brand'
-            fontWeight='500'
-            w='100%'
-            h='50'
-            mb='24px'
-          >
+
+          <Button isLoading={isPending} type='submit' fontSize='sm' variant='brand' fontWeight='500' w='100%' h={50}>
             {t('signup_create_account')}
           </Button>
-        </Box>
+        </Flex>
       </FormProvider>
 
-      <Flex flexDirection='column' justifyContent='center' alignItems='start' maxW='100%' mt='0px'>
-        <Text color={textColorSecondary} fontWeight='400' fontSize='14px'>
+      <Flex flexDirection='column' justifyContent='center' alignItems='start' maxW='100%'>
+        <Text color={textColorSecondary} fontWeight='400' fontSize='sm'>
           {t('already_member')}
           <NavLink to='/signin'>
-            <Text color={textColorBrand} as='span' ms='5px' fontWeight='500'>
+            <Text color={textColorBrand} as='span' ms={1} fontWeight='500'>
               {t('signin')}
             </Text>
           </NavLink>
         </Text>
       </Flex>
-      <Box pt={2}>
-        <FormControl isInvalid={isError}>
-          {isError && <FormErrorMessage>{error?.message || 'Error al realizar la operación'}</FormErrorMessage>}
-        </FormControl>
-      </Box>
+      {isError && (
+        <Box>
+          <FormControl isInvalid={isError}>
+            <FormErrorMessage>{error?.message || 'Error al realizar la operación'}</FormErrorMessage>
+          </FormControl>
+        </Box>
+      )}
     </Flex>
   )
 }

diff --git a/src/components/Layout/ColorModeSwitcher.tsx b/src/components/Layout/ColorModeSwitcher.tsx
@@ -12,7 +12,7 @@ export const ColorModeSwitcher: React.FC<ColorModeSwitcherProps> = (props) => {
   return (
     <IconButton
       variant='ghost'
-      marginLeft='2'
+      marginLeft={2}
       size='md'
       fontSize='lg'
       color='current'

diff --git a/src/components/Layout/InputCustom.tsx b/src/components/Layout/InputCustom.tsx
@@ -64,7 +64,7 @@ const InputCustom = ({
   }
 
   return (
-    <FormControl isInvalid={!!errors[formValue]} mb={6}>
+    <FormControl isInvalid={!!errors[formValue]}>
       {label && (
         <FormLabel display='flex' ms={1} fontSize='sm' fontWeight='500' color={textColor} mb={2}>
           {label}

diff --git a/src/components/OrganizationSaas/Dashboard/AuthBanner.tsx b/src/components/OrganizationSaas/Dashboard/AuthBanner.tsx
@@ -0,0 +1,71 @@
+import { Box, ChakraProps, Flex, Link, List, ListItem, Text } from '@chakra-ui/react'
+import { ReactNode } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Link as ReactRouterLink } from 'react-router-dom'
+import DarkModeToggle from '~src/themes/saas/components/DarkMode'
+
+interface AuthBannerProps extends ChakraProps {
+  children: ReactNode
+}
+
+const AuthBanner = ({ children, ...props }: AuthBannerProps) => {
+  const { t } = useTranslation()
+
+  return (
+    <Box
+      flex={{ base: '1 1 100%', xl: '1 1 50%' }}
+      background='linear-gradient(to bottom, #B5F492, #338B93)'
+      borderBottomLeftRadius={{ xl: '200px' }}
+      pt={14}
+      pb={{ xl: 10 }}
+    >
+      <DarkModeToggle position='absolute' top={3.5} right={2.5} />
+      <Flex
+        flexDirection='column'
+        px={{
+          base: 2.5,
+          sm: 5,
+        }}
+        textAlign='center'
+        h='100%'
+        maxW='600px'
+        mx='auto'
+        {...props}
+      >
+        {children}
+        <Flex mt='auto' flexDirection='column' alignItems='center' justifyContent='center' color='white'>
+          <List display='flex' gap={5}>
+            <ListItem>
+              <Link as={ReactRouterLink} fontWeight='500' href='mailto:[email protected]'>
+                {t('support', { defaultValue: 'Support' })}
+              </Link>
+            </ListItem>
+            <ListItem>
+              <Link as={ReactRouterLink} fontWeight='500' href='/terms'>
+                {t('terms_of_use', { defaultValue: 'Terms of use' })}
+              </Link>
+            </ListItem>
+            <ListItem>
+              <Link as={ReactRouterLink} fontWeight='500' href='https://blog.vocdoni.io/' isExternal>
+                {t('blog', { defaultValue: 'Blog' })}
+              </Link>
+            </ListItem>
+          </List>
+        </Flex>
+      </Flex>
+
+      <Text
+        display={{ base: 'block', xl: 'none' }}
+        mt='auto'
+        color='white'
+        minW='100%'
+        maxW={{ base: '90%', md: 96 }}
+        py={5}
+        textAlign='center'
+      >
+        {t('rights', { defaultValue: '© 2024 Vocdoni Association. All Rights Reserved.' })}
+      </Text>
+    </Box>
+  )
+}
+export default AuthBanner