improved pricing modal and card

vocdoni · Oct 31, 2024 · 949db51 · 949db51
1 parent 8ef2e29
commit 949db51
Show file tree

Hide file tree

Showing 6 changed files with 111 additions and 58 deletions.
diff --git a/src/components/Dashboard/PricingModal.tsx b/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'>
       <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>

diff --git a/src/components/Home/index.tsx b/src/components/Home/index.tsx
@@ -1,4 +1,5 @@
 import { Box } from '@chakra-ui/react'
+import { PricingModal } from '~components/Dashboard/PricingModal'
 import Benefits from './Benefits'
 import Clients from './Clients'
 import ContactUs from './ContactUs'
@@ -11,6 +12,7 @@ import Support from './Support'
 
 const Home = () => (
   <>
+    <PricingModal isOpenModal={true} onCloseModal={() => {}} />
     <Box position='relative'>
       <Box position='relative' zIndex={10}>
         <CreateProcess />

diff --git a/src/components/Organization/Dashboard/PricingCard.tsx b/src/components/Organization/Dashboard/PricingCard.tsx
@@ -15,52 +15,40 @@ 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={{}}></Trans>
+        </Text>
+        <Box>
+          <UnorderedList>
+            {features.map((feature, idx) => (
+              <ListItem key={idx}>{feature}</ListItem>
+            ))}
+          </UnorderedList>
+        </Box>
+      </CardBody>
+      <CardFooter>
+        <Button>
+          <Trans i18nKey='pricing_card.view_features'>View all features</Trans>
+        </Button>
+      </CardFooter>
+      {popular && (
+        <Box>
+          <Trans i18nKey='pricing_card.most_popular_plan'>Most popular plan</Trans>
+        </Box>
+      )}
+    </Card>
+  )
+}
 
 export default PricingCard
diff --git a/src/theme/colors.ts b/src/theme/colors.ts
@@ -174,7 +174,23 @@ export const colors = {
     text_secondary: colorsBase.gray.normal,
     question_index: colorsBase.primary,
   },
-
+  pricing_card: {
+    bg: {
+      light: colorsBase.white.pure,
+      dark: colorsBase.blue.grayish,
+    },
+    body_text: colorsBase.black,
+    subtitle: {
+      light: colorsBase.gray.normal,
+      dark: colorsBase.gray.light,
+    },
+  },
+  pricing_modal: {
+    bg: {
+      light: colorsBase.primary,
+      dark: colorsBase.blue.dark,
+    },
+  },
   tab: {
     variant: {
       card: {

diff --git a/src/theme/components/card.ts b/src/theme/components/card.ts
@@ -44,16 +44,36 @@ 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',
+        },
+
+        '& > div:nth-of-type(4)': {
+          bgColor: '#D2CBB9',
+          w: 'min-content',
+          whiteSpace: 'nowrap',
+          mx: 'auto',
+          py: 1,
+          px: 3,
+          borderRadius: 'full',
+          position: 'absolute',
+          mt: -4,
+          ml: '50%',
+          transform: 'translateX(-50%)',
+          fontSize: 'sm',
+          color: 'black',
+        },
       },
       header: {
         pb: 0,
         minH: 28,
         '& > p:first-of-type': {
           pt: 1.5,
-          color: 'black',
+
           textAlign: 'center',
           fontWeight: 'bold',
           mb: 2.5,
@@ -63,12 +83,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 +109,23 @@ export const Card = defineMultiStyleConfig({
         },
         '& > div:last-of-type': {
           ml: 3,
+
           '& > ul': {
             maxW: 'fit-content',
             mx: 'auto',
             fontSize: 'sm',
+            listStyleType: 'none',
+            '& > li': {
+              position: 'relative',
+              paddingLeft: '1em',
+
+              '&::before': {
+                content: '"- "',
+                position: 'absolute',
+                left: 0,
+                color: 'currentColor',
+              },
+            },
           },
         },
       },
@@ -90,7 +134,7 @@ export const Card = defineMultiStyleConfig({
         justifyContent: 'center',
 
         '& button': {
-          color: 'prcing_card_btn',
+          color: 'pricing_card_btn',
         },
       },
     },

diff --git a/src/theme/components/modal.ts b/src/theme/components/modal.ts
@@ -13,7 +13,7 @@ export const Modal = defineMultiStyleConfig({
     },
   },
   variants: {
-    'dashboard-plans': {
+    'pricing-modal': {
       dialogContainer: {
         minW: '100vw',
         minH: '100vh',
@@ -27,7 +27,10 @@ export const Modal = defineMultiStyleConfig({
         },
         minW: '100vw',
         minH: '100vh',
-        bgColor: '#546E39',
+        bgColor: 'pricing_modal.bg.light',
+        _dark: {
+          bgColor: 'pricing_modal.bg.dark',
+        },
       },
       header: {
         pt: 12,