fix: UI styles and other changes

* Improved styles, UIs, added component in the process list when the filter returns 0 processes, added dashboard to admin route, improved sidebar menu view, improved process filter group-buttons, changed signIn to signUp in the landing, added more spacing and margin in different pages and components, formatted pricing with better € display and removed decimals, vertically align the loader...

* Added more space in the switcher

* Added margins and improved subscription page with centering elements and adding the "Upgrade" button for free plan

* Lint fix

* Lint fix

* Changed link to plans page

* F/UI fixes review (#975)

* feat: add max duration validation to calendar component (#972)

* feat: add max duration validation to calendar component

- Add subscription max duration validation
- Show warning alert when duration exceeds plan limit

* feat: add form validation for max duration

- Add validation rule to endDate field
- Prevent form submission when duration exceeds plan limit
- Improve UX with error styling and upgrade plan button
- Only show info card when duration is valid

* fix: create org state issues (#965)

fix: create org state issues

* review

---------

Co-authored-by: Òscar Casajuana <[email protected]>

* fix: minor recover lost badge color + remove unnecessary currency code

* fix: currency should show decimals

---------

Co-authored-by: gerouvi <[email protected]>
Co-authored-by: Òscar Casajuana <[email protected]>
Co-authored-by: Òscar Casajuana <[email protected]>

src/components/Account/Edit.tsx

@@ -9,7 +9,7 @@ import Teams from './Teams'
 export const AccountEdit = () => {
   const { data: profile } = useProfile()
   return (
-    <Flex flexDirection='column' h='100%'>
+    <Flex flexDirection='column'>
       <Tabs w='full' maxW={InnerContentsMaxWidth} mx='auto' isFitted>
         <TabList>
           <Tab>

src/components/Auth/PasswordResetForm.tsx

@@ -88,7 +88,7 @@ const PasswordResetForm: React.FC<PasswordResetFormProps> = ({ code, email }) =>
             {resetPasswordMutation.error.message}
           </Alert>
         )}
-        <Button type='submit' fontSize='sm' variant='brand' fontWeight='500' w='100%' h={50}>
+        <Button type='submit' fontSize='sm' variant='primary' fontWeight='500' w='100%' h={50}>
           <Trans i18nKey='reset_password_button'>Reset Password</Trans>
         </Button>
       </Flex>

src/components/Dashboard/Menu/Item.tsx

@@ -32,9 +32,12 @@ export const DashboardMenuItem = ({
     variant={variant ? variant : isActive && !hasChildren ? 'underline' : 'transparent'}
     w='full'
     colorScheme='gray'
-    leftIcon={icon ? <Icon as={icon} /> : undefined}
+    leftIcon={icon ? <Icon as={icon} mt='0px' /> : undefined}
     rightIcon={hasChildren ? isOpen ? <ChevronUpIcon /> : <ChevronDownIcon /> : undefined}
     mb={hasChildren && 1}
+    fontWeight={isActive ? '600' : '100'}
+    fontSize='md'
+    fontFamily='basier'
     {...props}
   >
     {label}

src/components/Dashboard/Menu/Options.tsx

@@ -1,8 +1,8 @@
 import { Box, Collapse } from '@chakra-ui/react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { HiSquares2X2 } from 'react-icons/hi2'
-import { IoIosSettings } from 'react-icons/io'
+import { HiSquares2X2, HiHome } from 'react-icons/hi2'
+import { IoIosSettings, IoMdHome } from 'react-icons/io'
 import { matchPath, useLocation } from 'react-router-dom'
 import { Routes } from '~src/router/routes'
 import { DashboardMenuItem } from './Item'
@@ -20,15 +20,15 @@ export const DashboardMenuOptions = () => {
   const location = useLocation()
   const [openSection, setOpenSection] = useState<string | null>(null)
   const menuItems: MenuItem[] = [
-    // {
-    //   label: t('organization.dashboard'),
-    //   icon: FaHouse,
-    //   route: Routes.dashboard.base,
-    // },
+    {
+      label: t('organization.dashboard'),
+      icon: HiHome,
+      route: Routes.dashboard.base,
+    },
     {
       label: t('voting_processes'),
-      route: Routes.dashboard.processes,
       icon: HiSquares2X2,
+      route: Routes.dashboard.processes,
     },
     // {
     //   label: t('organization.census'),

src/components/Dashboard/Menu/OrganizationSwitcher.tsx

@@ -89,7 +89,7 @@ export const OrganizationSwitcher = () => {
   }
 
   return (
-    <Box mb={2} px={3.5} display='flex' alignItems='center' gap={2} justifyContent='space-between'>
+    <Box mb={3} px={3.5} display='flex' alignItems='center' gap={2} justifyContent='space-between'>
       {organizations.length > 1 ? (
         <Select
           value={organizations.find((org) => org.value === selectedOrg)}

src/components/Dashboard/Menu/index.tsx

@@ -44,9 +44,9 @@ const DashboardMenu = ({ isOpen, onClose }: { isOpen: boolean; onClose: () => vo
 const DashboardMenuContent = () => (
   <>
     <Link as={RouterLink} to={Routes.dashboard.base} alignSelf='center'>
-      <VocdoniLogo w='180px' />
+      <VocdoniLogo w='130px' mx='5px' />
     </Link>
-    <HSeparator />
+    <HSeparator mb='10px' />
     <DashboardMenuOptions />
     <Flex mt='auto' flexDirection='column' alignItems='center'>
       <Button

src/components/Home/CreateProcess.tsx

@@ -48,7 +48,7 @@ const CreateProcess = () => {
         <Box maxW={{ lg: '90%' }}>
           <Button
             as={ReactRouterLink}
-            to={Routes.auth.signIn}
+            to={Routes.auth.signUp}
             colorScheme='gradient'
             variant='primary'
             mb='20px'

src/components/Layout/Dashboard.tsx

@@ -12,5 +12,5 @@ export const DashboardBox = (props: BoxProps) => (
 )
 
 export const DashboardContents = (props: BoxProps) => (
-  <DashboardBox borderRadius='lg' height='100%' py={{ base: 4, lg: 6 }} px={{ base: 4, lg: 10 }} {...props} />
+  <DashboardBox borderRadius='lg' height='100%' py={{ base: 4, lg: 10 }} px={{ base: 4, lg: 10 }} {...props} />
 )

src/components/Layout/NoResultsFiltering.tsx

@@ -1,10 +1,18 @@
-import { Box } from '@chakra-ui/react'
+import { Box, Card, CardBody, Flex, Img, Text } from '@chakra-ui/react'
 import { Trans } from 'react-i18next'
+import empty from '/assets/illustrations/2.png'
 
-export const NoResultsFiltering = () => {
-  return (
-    <Box>
-      <Trans i18nKey='no_results_filtering'>Your current search filter returns no results</Trans>
-    </Box>
-  )
-}
+export const NoResultsFiltering = () => (
+  <Card variant='no-elections' minH='100%' maxW='650' m='80px auto'>
+    <CardBody>
+      <Flex justifyContent={'center'}>
+        <Img src={empty} />
+      </Flex>
+      <Box mt='50px' textAlign='center'>
+        <Text as='h3' fontSize='md' fontWeight='bold'>
+          <Trans i18nKey='no_results_filtering'>Your current search filter returns no results</Trans>
+        </Text>
+      </Box>
+    </CardBody>
+  </Card>
+)

src/components/Navbar/LanguagesList.tsx

@@ -106,6 +106,7 @@ export const LanguagesListAccordion = () => {
               m={0}
               h={'fit-content'}
               w={'fit-content'}
+              my='5px'
             >
               {k.toUpperCase()}
             </Button>

src/components/Organization/Dashboard/ProcessesList.tsx

@@ -14,7 +14,7 @@ const ProcessesList = ({ processes }: ProcessesListProps) => {
   const { t } = useTranslation()
 
   return (
-    <TableContainer>
+    <TableContainer mt='40px'>
       <Table variant='striped'>
         <Thead>
           <Tr>

src/components/Organization/Edit.tsx

@@ -138,6 +138,7 @@ const EditOrganization = () => {
           gap={6}
           maxW={InnerContentsMaxWidth}
           mx='auto'
+          my='10px'
           onSubmit={handleSubmit(onSubmit)}
         >
           <PublicOrgForm />

src/components/Organization/Subscription.tsx

@@ -37,7 +37,7 @@ export const Subscription = () => {
 
   return (
     <VStack gap={4} w='full'>
-      <Button onClick={() => openModal('subscription')} alignSelf='end'>
+      <Button as={RouterLink} to={Routes.plans} alignSelf='end'>
         <Trans i18nKey='view_plans_and_pricing'>View Plans & Pricing</Trans>
       </Button>
       <SubscriptionList />
@@ -85,6 +85,7 @@ export const SubscriptionList = () => {
       })
 
   const isFree = subscription.plan.id === PlanId.Free
+  const { openModal } = usePricingModal()
 
   return (
     <VStack gap={4} w='full' mt='8'>
@@ -106,7 +107,7 @@ export const SubscriptionList = () => {
         </Alert>
       )}
       <TableContainer w='full'>
-        <Table size='sm'>
+        <Table size='sm' variant={'subscription'}>
           <Thead>
             <Tr>
               <Th>
@@ -118,9 +119,12 @@ export const SubscriptionList = () => {
               <Th>
                 <Trans i18nKey='subscription.since'>Since</Trans>
               </Th>
-              <Th colSpan={isFree ? 1 : 2}>
+              <Th>
                 <Trans i18nKey='subscription.next_billing'>Next Billing</Trans>
               </Th>
+              <Th>
+                <Trans i18nKey='subscription.action'>Action</Trans>
+              </Th>
             </Tr>
           </Thead>
           <Tbody>
@@ -140,7 +144,13 @@ export const SubscriptionList = () => {
               <Td>
                 <Tag>{new Date(subscription.subscriptionDetails.renewalDate).toLocaleDateString()}</Tag>
               </Td>
-              {!isFree && (
+              {isFree ? (
+                <Td>
+                  <Button variant='primary' size='sm' isLoading={isLoading} onClick={() => openModal('subscription')}>
+                    <Trans i18nKey='upgrade'>Upgrade</Trans>
+                  </Button>
+                </Td>
+              ) : (
                 <Td>
                   <Button variant='outline' size='sm' isLoading={isLoading} onClick={() => handleChangeClick()}>
                     <Trans i18nKey='subscription.change_plan_button'>Change</Trans>

src/components/Process/ProcessStatusFilters.tsx

@@ -14,6 +14,7 @@ const ProcessStatusFilter = ({ status, ...rest }: ProcessStatusFilterProps) => (
       as={NavLink}
       to={generatePath(Routes.dashboard.processes, { page: 1 })}
       isActive={status === undefined}
+      p='15px 22px'
     >
       <Trans i18nKey='all'>All</Trans>
     </Button>
@@ -22,6 +23,7 @@ const ProcessStatusFilter = ({ status, ...rest }: ProcessStatusFilterProps) => (
       as={NavLink}
       to={generatePath(Routes.dashboard.processes, { status: 'ready', page: 1 })}
       isActive={status === 'ready'}
+      p='15px 22px'
     >
       <Trans i18nKey='active'>Active</Trans>
     </Button>
@@ -30,6 +32,7 @@ const ProcessStatusFilter = ({ status, ...rest }: ProcessStatusFilterProps) => (
       as={NavLink}
       to={generatePath(Routes.dashboard.processes, { status: 'results', page: 1 })}
       isActive={status === 'results'}
+      p='15px 22px'
     >
       <Trans i18nKey='finished'>Finished</Trans>
     </Button>

src/components/ProcessCreate/SaasFooter.tsx

@@ -1,15 +1,10 @@
 import { Box, Flex, Link } from '@chakra-ui/react'
 import { useTranslation } from 'react-i18next'
 import { Link as ReactRouterLink } from 'react-router-dom'
-import { useSubscription } from '~components/Auth/Subscription'
 import { VocdoniLogo } from '~components/Layout/Logo'
-import { PlanId } from '~constants'
 
 const SaasFooter = () => {
   const { t } = useTranslation()
-  const { subscription } = useSubscription()
-  const isCustom = subscription?.plan.id === PlanId.Custom
-  const isFree = subscription?.plan.id === PlanId.Free
 
   return (
     <Box bgColor={'process_create.bg_light'} _dark={{ bgColor: 'process_create.bg_dark' }}>
@@ -29,13 +24,15 @@ const SaasFooter = () => {
           <Box minW='100px'>
             <VocdoniLogo />
           </Box>
-          <Link as={ReactRouterLink} to=''>
+          <Link variant='footer' as={ReactRouterLink} to='' mt='5px' fontSize={'sm'}>
             {t('terms_and_conditions', { defaultValue: 'Terms and Conditions' })}
           </Link>
-          <Link as={ReactRouterLink} to=''>
+          <Link variant='footer' as={ReactRouterLink} to='' mt='5px' fontSize={'sm'}>
             {t('privacy_policy', { defaultValue: 'Privacy Policy' })}
           </Link>
-          <Link href='mailto:[email protected]'>[email protected]</Link>
+          <Link variant='footer' mt='5px' href='mailto:[email protected]' fontSize={'sm'}>
+            [email protected]
+          </Link>
         </Flex>
       </Flex>
     </Box>

src/router/SuspenseLoader.tsx

@@ -6,7 +6,7 @@ export const Loading = ({ ...rest }: SquareProps) => {
   const { t } = useTranslation()
 
   return (
-    <Square centerContent size='full' {...rest}>
+    <Square centerContent size='full' h='100vh' {...rest}>
       <Spinner size='sm' mr={3} />
       <Text>{t('loading')}</Text>
     </Square>

src/router/routes/index.ts

@@ -12,7 +12,7 @@ export const Routes = {
   calculator: '/calculator',
   contact: 'https://www.vocdoni.io/contact',
   dashboard: {
-    base: '/admin',
+    base: '/admin/dashboard',
     organization: '/admin/organization',
     organizationCreate: '/admin/organization/create', // Organization create with dashboard layout
     process: '/admin/process/:id',

src/theme/colors.ts

@@ -349,6 +349,7 @@ export const colors = {
     text_brand: colorsBase.primary,
     text_secondary: colorsBase.gray.normal,
     question_index: colorsBase.primary,
+    footer_link: colorsBase.gray.dark,
   },
   pricing_card: {
     bg: {

src/theme/components/badge.ts

@@ -1,15 +1,12 @@
 import { defineStyle, defineStyleConfig } from '@chakra-ui/react'
 
-const baseStyle = defineStyle((props) => {
-  const { colorScheme } = props
-
-  return {
-    border: '1px solid',
-    borderColor: `${colorScheme}.200`,
-    borderRadius: 'full',
-    fontWeight: 'normal',
-    textTransform: 'normal',
-  }
+const baseStyle = defineStyle({
+  border: '1px solid',
+  borderColor: '#999',
+  borderRadius: 'full',
+  fontWeight: 'normal',
+  p: '8px 20px',
+  textTransform: 'capitalize',
 })
 
 const sm = defineStyle({

src/theme/components/link.ts

@@ -29,7 +29,7 @@ export const Link = defineStyleConfig({
     }),
     footer: (props) => ({
       textDecoration: 'none',
-      color: '#555',
+      color: 'process_create.footer_link',
 
       _hover: {
         textDecoration: 'underline',

src/theme/components/table.ts

@@ -76,6 +76,29 @@ const striped = definePartsStyle((props) => ({
   },
 }))
 
+const subscription = definePartsStyle((props) => ({
+  thead: {
+    tr: {
+      th: {
+        '&:not(:first-of-type)': {
+          textAlign: 'center',
+        },
+      },
+    },
+  },
+  tbody: {
+    tr: {
+      minH: '75px',
+
+      td: {
+        '&:not(:first-of-type) *': {
+          mx: 'auto',
+        },
+      },
+    },
+  },
+}))
+
 const md = definePartsStyle({
   table: {
     borderRadius: 'lg',
@@ -102,5 +125,6 @@ export const Table = defineMultiStyleConfig({
   sizes: { md },
   variants: {
     striped,
+    subscription,
   },
 })

src/theme/components/tag.ts

@@ -8,11 +8,10 @@ const baseStyle = definePartsStyle((props) => {
 
   return {
     container: {
-      border: '1px solid',
-      borderColor: `${colorScheme}.200`,
       width: 'fit-content',
       display: 'flex',
       justifyContent: 'center',
+      padding: '6px 15px',
 
       _dark: {
         borderColor: `${colorScheme}.300`,
@@ -21,4 +20,7 @@ const baseStyle = definePartsStyle((props) => {
   }
 })
 
-export const Tag = defineMultiStyleConfig({ baseStyle, defaultProps: { colorScheme: 'brand' } })
+export const Tag = defineMultiStyleConfig({
+  baseStyle,
+  defaultProps: { colorScheme: 'brand' },
+})

src/utils/numbers.ts

@@ -4,4 +4,7 @@ export const currency = (amount: number, currency: string = 'EUR') =>
   (amount / 100).toLocaleString(i18n.resolvedLanguage, {
     style: 'currency',
     currency,
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 2,
+    currencyDisplay: 'symbol',
   })