Merge branch 'd/ui-fixes' of github.com:vocdoni/ui-scaffold into d/ui…

…-fixes

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='97%' mt='20px'>
+    <Flex flexDirection='column'>
       <Tabs w='full' maxW={InnerContentsMaxWidth} mx='auto' isFitted>
         <TabList>
           <Tab>

src/components/Dashboard/Menu/Item.tsx

@@ -36,7 +36,7 @@ export const DashboardMenuItem = ({
     rightIcon={hasChildren ? isOpen ? <ChevronUpIcon /> : <ChevronDownIcon /> : undefined}
     mb={hasChildren && 1}
     fontWeight={isActive ? '600' : '100'}
-    fontSize='16px'
+    fontSize='md'
     fontFamily='basier'
     {...props}
   >

src/components/Dashboard/Menu/index.tsx

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

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,20 +1,18 @@
-import { Box, Button, Card, CardBody, Flex, Img, Text } 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 (
-    <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>
-  )
-}
+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,7 +106,7 @@ export const LanguagesListAccordion = () => {
               m={0}
               h={'fit-content'}
               w={'fit-content'}
-              mt='5px'
+              my='5px'
             >
               {k.toUpperCase()}
             </Button>

src/components/Organization/Edit.tsx

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

src/components/Organization/Subscription.tsx

@@ -107,68 +107,52 @@ export const SubscriptionList = () => {
         </Alert>
       )}
       <TableContainer w='full'>
-        <Table size='sm'>
+        <Table size='sm' variant={'subscription'}>
           <Thead>
             <Tr>
               <Th>
                 <Trans i18nKey='subscription.your_subscription'>Your Subscription</Trans>
               </Th>
-              <Th textAlign='center'>
+              <Th>
                 <Trans i18nKey='subscription.price'>Price</Trans>
               </Th>
-              <Th textAlign='center'>
+              <Th>
                 <Trans i18nKey='subscription.since'>Since</Trans>
               </Th>
-              <Th textAlign='center'>
+              <Th>
                 <Trans i18nKey='subscription.next_billing'>Next Billing</Trans>
               </Th>
-              <Th textAlign='center'>Action</Th>
+              <Th>
+                <Trans i18nKey='subscription.action'>Action</Trans>
+              </Th>
             </Tr>
           </Thead>
           <Tbody>
-            <Tr h='75px'>
+            <Tr>
               <Td>
                 <Box display='flex' alignItems='center' gap={3}>
                   <Avatar name={subscription.plan.name} size='sm' />
                   {subscription.plan.name} ({subscription.plan.organization.maxCensus} members)
                 </Box>
               </Td>
               <Td>
-                <Tag style={{ border: '0px', padding: '6px 15px', color: '#193d32', margin: '0px auto' }}>
-                  {currency(subscription.plan.startingPrice)}
-                </Tag>
+                <Tag>{currency(subscription.plan.startingPrice)}</Tag>
               </Td>
               <Td>
-                <Tag style={{ border: '0px', padding: '6px 15px', color: '#193d32', margin: '0px auto' }}>
-                  {new Date(subscription.subscriptionDetails.startDate).toLocaleDateString()}
-                </Tag>
+                <Tag>{new Date(subscription.subscriptionDetails.startDate).toLocaleDateString()}</Tag>
               </Td>
               <Td>
-                <Tag style={{ border: '0px', padding: '6px 15px', color: '#193d32', margin: '0px auto' }}>
-                  {new Date(subscription.subscriptionDetails.renewalDate).toLocaleDateString()}
-                </Tag>
+                <Tag>{new Date(subscription.subscriptionDetails.renewalDate).toLocaleDateString()}</Tag>
               </Td>
               {isFree ? (
                 <Td>
-                  <Button
-                    style={{ margin: '0px auto' }}
-                    variant='primary'
-                    size='sm'
-                    isLoading={isLoading}
-                    onClick={() => openModal('subscription')}
-                  >
+                  <Button variant='primary' size='sm' isLoading={isLoading} onClick={() => openModal('subscription')}>
                     <Trans i18nKey='upgrade'>Upgrade</Trans>
                   </Button>
                 </Td>
               ) : (
                 <Td>
-                  <Button
-                    style={{ margin: '0px auto' }}
-                    variant='outline'
-                    size='sm'
-                    isLoading={isLoading}
-                    onClick={() => handleChangeClick()}
-                  >
+                  <Button variant='outline' size='sm' isLoading={isLoading} onClick={() => handleChangeClick()}>
                     <Trans i18nKey='subscription.change_plan_button'>Change</Trans>
                   </Button>
                 </Td>

src/components/Organization/Team.tsx

@@ -110,9 +110,7 @@ const TeamMembersTable = ({ members, showExpiration = false }: { members: Member
               </Td>
             )}
             <Td textAlign='center' w={10}>
-              <Badge p='8px 20px' textTransform='capitalize' border='1px solid #999'>
-                {member.role}
-              </Badge>
+              <Badge>{member.role}</Badge>
             </Td>
           </Tr>
         ))}

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,13 @@ const SaasFooter = () => {
           <Box minW='100px'>
             <VocdoniLogo />
           </Box>
-          <Link variant='footer' as={ReactRouterLink} to='' mt='5px' style={{ transform: 'scale(0.8)' }}>
+          <Link variant='footer' as={ReactRouterLink} to='' mt='5px' fontSize={'sm'}>
             {t('terms_and_conditions', { defaultValue: 'Terms and Conditions' })}
           </Link>
-          <Link variant='footer' as={ReactRouterLink} to='' mt='5px' style={{ transform: 'scale(0.8)' }}>
+          <Link variant='footer' as={ReactRouterLink} to='' mt='5px' fontSize={'sm'}>
             {t('privacy_policy', { defaultValue: 'Privacy Policy' })}
           </Link>
-          <Link variant='footer' mt='5px' href='mailto:[email protected]' style={{ transform: 'scale(0.8)' }}>
+          <Link variant='footer' mt='5px' href='mailto:[email protected]' fontSize={'sm'}>
             [email protected]
           </Link>
         </Flex>

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' },
+})