pricing modal and card

src/components/Dashboard/Menu/Options.tsx

@@ -1,11 +1,12 @@
-import { Box, Collapse } from '@chakra-ui/react'
+import { Box, Button, Collapse, useDisclosure } from '@chakra-ui/react'
 import { OrganizationName } from '@vocdoni/chakra-components'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { HiSquares2X2 } from 'react-icons/hi2'
 import { IoIosSettings } from 'react-icons/io'
 import { matchPath, useLocation } from 'react-router-dom'
 import { Routes } from '~src/router/routes'
+import { PricingModal } from '../PricingModal'
 import { DashboardMenuItem } from './Item'
 
 type MenuItem = {
@@ -19,6 +20,7 @@ export const DashboardMenuOptions = () => {
   const { t } = useTranslation()
   const location = useLocation()
   const [openSection, setOpenSection] = useState<string | null>(null)
+  const { isOpen, onOpen, onClose } = useDisclosure()
 
   const menuItems: MenuItem[] = [
     // {
@@ -82,6 +84,8 @@ export const DashboardMenuOptions = () => {
 
   return (
     <Box>
+      <PricingModal isOpenModal={isOpen} onCloseModal={onClose} />
+      <Button onClick={onOpen}>Open Modal</Button>
       <OrganizationName color='text.secondary' mb={2.5} />
       {menuItems.map((item, index) => (
         <Box key={index}>

src/components/Dashboard/PricingModal.tsx

@@ -82,13 +82,13 @@ export const PricingModal = ({ isOpenModal, onCloseModal }: { isOpenModal: boole
     },
   ]
   return (
-    <Modal isOpen={isOpenModal} onClose={onCloseModal} variant='dashboard-plans'>
+    <Modal isOpen={isOpenModal} onClose={onCloseModal} variant='pricing-modal' size='full'>
       <ModalOverlay />
       <ModalContent>
         <ModalHeader>
           <Trans i18nKey='pricing_modal.title'>You need to upgrade to use this feature</Trans>
         </ModalHeader>
-        <ModalCloseButton fontSize='lg' />
+        <ModalCloseButton />
         <ModalBody>
           {cards.map((card, idx) => (
             <PricingCard key={idx} {...card} />
@@ -115,7 +115,7 @@ export const PricingModal = ({ isOpenModal, onCloseModal }: { isOpenModal: boole
             <Text>
               <Trans i18nKey='pricing_modal.help'>Need some help?</Trans>
             </Text>
-            <Button as={ReactRouterLink} colorScheme='white'>
+            <Button as={ReactRouterLink}>
               <Trans i18nKey='contact_us'>Contact us</Trans>
             </Button>
           </Box>

src/components/Organization/Dashboard/PricingCard.tsx

@@ -15,52 +15,57 @@ const PricingCard = ({
   width?: string
   popular?: boolean
   features: string[]
-}) => (
-  <Card variant='pricing-card' width={width}>
-    <CardHeader>
-      <Text>{title}</Text>
-      <Text>{subtitle}</Text>
-    </CardHeader>
-    <CardBody>
-      <Button variant='pricing-card'>
-        <Trans i18nKey='subscribe'>Subscribe</Trans>
-      </Button>
-      <Text color='black'>
-        <Trans i18nKey='pricing_card.from'>From ${price}/year</Trans>
-      </Text>
-      <Box color='black'>
-        <UnorderedList>
-          {features.map((feature, idx) => (
-            <ListItem key={idx}>{feature}</ListItem>
-          ))}
-        </UnorderedList>
-      </Box>
-    </CardBody>
-    <CardFooter>
-      <Button variant='outline'>
-        <Trans i18nKey='pricing_card.view_features'>View all features</Trans>
-      </Button>
-    </CardFooter>
-    {popular && (
-      <Box
-        bgColor='#D2CBB9'
-        w='min-content'
-        whiteSpace='nowrap'
-        mx='auto'
-        py={1}
-        px={3}
-        borderRadius='full'
-        position='absolute'
-        mt={-4}
-        ml='50%'
-        transform='translateX(-50%)'
-        color='black'
-        fontSize='sm'
-      >
-        <Trans i18nKey='pricing_card.most_popular_plan'>Most popular plan</Trans>
-      </Box>
-    )}
-  </Card>
-)
+}) => {
+  return (
+    <Card variant='pricing-card' width={width}>
+      <CardHeader>
+        <Text>{title}</Text>
+        <Text>{subtitle}</Text>
+      </CardHeader>
+      <CardBody>
+        <Button>
+          <Trans i18nKey='subscribe'>Subscribe</Trans>
+        </Button>
+        <Text>
+          <Trans i18nKey='pricing_card.from' values={{ price }}>
+            From ${price}/year
+          </Trans>
+        </Text>
+        <Box>
+          <UnorderedList>
+            {features.map((feature, idx) => (
+              <ListItem key={idx} listStyleType='-'>
+                {feature}
+              </ListItem>
+            ))}
+          </UnorderedList>
+        </Box>
+      </CardBody>
+      <CardFooter>
+        <Button>
+          <Trans i18nKey='pricing_card.view_features'>View all features</Trans>
+        </Button>
+      </CardFooter>
+      {popular && (
+        <Box
+          position='absolute'
+          mt={-4}
+          ml='50%'
+          transform='translateX(-50%)'
+          fontSize='sm'
+          w='min-content'
+          whiteSpace='nowrap'
+          py={1}
+          px={3}
+          borderRadius='full'
+          bgColor='pricing_card.most_popular_plan.bg'
+          color='pricing_card.most_popular_plan.color'
+        >
+          <Trans i18nKey='pricing_card.most_popular_plan'>Most popular plan</Trans>
+        </Box>
+      )}
+    </Card>
+  )
+}
 
 export default PricingCard

src/i18n/locales/ca.json

@@ -831,7 +831,7 @@
   },
   "password": "Contrasenya",
   "pricing_card": {
-    "from": "From ${price}/year",
+    "from": "Des de {{price}}/any",
     "most_popular_plan": "Most popular plan",
     "view_features": "View all features"
   },

src/i18n/locales/en.json

@@ -822,7 +822,7 @@
   },
   "password": "Password",
   "pricing_card": {
-    "from": "From ${price}/year",
+    "from": "From ${{ price }}/year",
     "most_popular_plan": "Most popular plan",
     "view_features": "View all features"
   },

src/i18n/locales/es.json

@@ -831,7 +831,7 @@
   },
   "password": "Contraseña",
   "pricing_card": {
-    "from": "From ${price}/year",
+    "from": "Desde {{price}}/año",
     "most_popular_plan": "Most popular plan",
     "view_features": "View all features"
   },

src/theme/colors.ts

@@ -1,4 +1,5 @@
 export const colorsBase = {
+  beige: '#D2CBB9',
   black: '#000000',
   blue: {
     normal: '#3965FF',
@@ -241,6 +242,28 @@ export const colors = {
     text_secondary: colorsBase.gray.normal,
     question_index: colorsBase.primary,
   },
+  pricing_card: {
+    bg: {
+      light: colorsBase.white.pure,
+      dark: colorsBase.blue.grayish,
+    },
+    border_dark: colorsBase.white.pure,
+    body_text: colorsBase.black,
+    most_popular_plan: {
+      bg: colorsBase.beige,
+      color: colorsBase.black,
+    },
+    subtitle: {
+      light: colorsBase.gray.normal,
+      dark: colorsBase.gray.light,
+    },
+  },
+  pricing_modal: {
+    bg: {
+      light: colorsBase.primary,
+      dark: colorsBase.blue.dark,
+    },
+  },
   process_view: {
     bg_light: colorsBase.white.dark,
     bg_dark: colorsBase.blue.dark,

src/theme/components/card.ts

@@ -44,16 +44,22 @@ export const Card = defineMultiStyleConfig({
     'pricing-card': {
       container: {
         position: 'relative',
-        bgColor: 'white',
+        borderRadius: 'xl',
+        bgColor: 'pricing_card.bg.light',
         minW: { base: '80%', sm: 72 },
         w: { base: '80%', sm: 72 },
+        _dark: {
+          bgColor: 'pricing_card.bg.dark',
+          border: '0.1px solid',
+          borderColor: 'pricing_card.border_dark',
+        },
       },
       header: {
         pb: 0,
         minH: 28,
         '& > p:first-of-type': {
           pt: 1.5,
-          color: 'black',
+
           textAlign: 'center',
           fontWeight: 'bold',
           mb: 2.5,
@@ -63,12 +69,23 @@ export const Card = defineMultiStyleConfig({
           fontSize: 'sm',
           textAlign: 'center',
           lineHeight: 1.2,
-          color: 'gray.400',
+          color: 'pricing_card.subtitle.light',
+
+          _dark: {
+            color: 'pricing_card.subtitle.dark',
+          },
         },
       },
       body: {
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        pt: 0,
         '& > button': {
-          mb: 4,
+          mx: 'auto',
+          mt: 3,
+          mb: 2,
+          w: 'full',
         },
         '& > p:first-of-type': {
           fontWeight: 'extrabold',
@@ -78,10 +95,12 @@ export const Card = defineMultiStyleConfig({
         },
         '& > div:last-of-type': {
           ml: 3,
+
           '& > ul': {
             maxW: 'fit-content',
             mx: 'auto',
             fontSize: 'sm',
+            listStyleType: '"- "',
           },
         },
       },
@@ -90,7 +109,7 @@ export const Card = defineMultiStyleConfig({
         justifyContent: 'center',
 
         '& button': {
-          color: 'prcing_card_btn',
+          color: 'pricing_card_btn',
         },
       },
     },

src/theme/components/modal.ts

@@ -13,21 +13,19 @@ export const Modal = defineMultiStyleConfig({
     },
   },
   variants: {
-    'dashboard-plans': {
-      dialogContainer: {
-        minW: '100vw',
-        minH: '100vh',
-      },
+    'pricing-modal': {
       dialog: {
         borderRadius: 0,
         m: 0,
         px: {
           base: 2.5,
           sm: 5,
         },
-        minW: '100vw',
-        minH: '100vh',
-        bgColor: '#546E39',
+
+        bgColor: 'pricing_modal.bg.light',
+        _dark: {
+          bgColor: 'pricing_modal.bg.dark',
+        },
       },
       header: {
         pt: 12,