From 0935361903dd530aac8ab4b70d8500368ea5f36f Mon Sep 17 00:00:00 2001 From: Gerard Date: Thu, 31 Oct 2024 10:36:01 +0100 Subject: [PATCH 01/10] improved pricing modal and card --- src/components/Dashboard/PricingModal.tsx | 6 +- src/components/Home/index.tsx | 2 + .../Organization/Dashboard/PricingCard.tsx | 82 ++++++++----------- src/theme/colors.ts | 18 +++- src/theme/components/card.ts | 54 ++++++++++-- src/theme/components/modal.ts | 7 +- 6 files changed, 111 insertions(+), 58 deletions(-) diff --git a/src/components/Dashboard/PricingModal.tsx b/src/components/Dashboard/PricingModal.tsx index 4bde8acff..3fef4b3e0 100644 --- a/src/components/Dashboard/PricingModal.tsx +++ b/src/components/Dashboard/PricingModal.tsx @@ -82,13 +82,13 @@ export const PricingModal = ({ isOpenModal, onCloseModal }: { isOpenModal: boole }, ] return ( - + You need to upgrade to use this feature - + {cards.map((card, idx) => ( @@ -115,7 +115,7 @@ export const PricingModal = ({ isOpenModal, onCloseModal }: { isOpenModal: boole Need some help? - diff --git a/src/components/Home/index.tsx b/src/components/Home/index.tsx index d5124009b..40dc7f103 100644 --- 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 = () => ( <> + {}} /> diff --git a/src/components/Organization/Dashboard/PricingCard.tsx b/src/components/Organization/Dashboard/PricingCard.tsx index c6f83de32..adcf8f75d 100644 --- 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[] -}) => ( - - - {title} - {subtitle} - - - - - From ${price}/year - - - - {features.map((feature, idx) => ( - {feature} - ))} - - - - - - - {popular && ( - - Most popular plan - - )} - -) +}) => { + return ( + + + {title} + {subtitle} + + + + + + + + + {features.map((feature, idx) => ( + {feature} + ))} + + + + + + + {popular && ( + + Most popular plan + + )} + + ) +} export default PricingCard diff --git a/src/theme/colors.ts b/src/theme/colors.ts index 5ca24ba88..cc5a79da4 100644 --- a/src/theme/colors.ts +++ b/src/theme/colors.ts @@ -241,7 +241,23 @@ export const colors = { text_secondary: colorsBase.gray.normal, question_index: colorsBase.primary, }, - process_view: { + 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, + }, + }, process_view: { bg_light: colorsBase.white.dark, bg_dark: colorsBase.blue.dark, }, diff --git a/src/theme/components/card.ts b/src/theme/components/card.ts index 3fbf7fd09..7ae9ce1d7 100644 --- 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 index 32f1c00aa..4c6a0efc7 100644 --- 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, From 7f7a017c5e99693e2293434daefc9380f618a051 Mon Sep 17 00:00:00 2001 From: Gerard Date: Thu, 31 Oct 2024 12:42:00 +0100 Subject: [PATCH 02/10] card border dark --- src/theme/colors.ts | 1 + src/theme/components/card.ts | 2 ++ 2 files changed, 3 insertions(+) diff --git a/src/theme/colors.ts b/src/theme/colors.ts index cc5a79da4..2cbc895b7 100644 --- a/src/theme/colors.ts +++ b/src/theme/colors.ts @@ -246,6 +246,7 @@ export const colors = { light: colorsBase.white.pure, dark: colorsBase.blue.grayish, }, + border_dark: colorsBase.white.pure, body_text: colorsBase.black, subtitle: { light: colorsBase.gray.normal, diff --git a/src/theme/components/card.ts b/src/theme/components/card.ts index 7ae9ce1d7..1d6fb4e0c 100644 --- a/src/theme/components/card.ts +++ b/src/theme/components/card.ts @@ -50,6 +50,8 @@ export const Card = defineMultiStyleConfig({ w: { base: '80%', sm: 72 }, _dark: { bgColor: 'pricing_card.bg.dark', + border: '0.1px solid', + borderColor: 'pricing_card.border_dark', }, '& > div:nth-of-type(4)': { From 88c4e4c15f3a170ac5b7df08ee88feebb76d9afd Mon Sep 17 00:00:00 2001 From: Gerard Date: Thu, 31 Oct 2024 12:42:31 +0100 Subject: [PATCH 03/10] remove home pricing modal --- src/components/Home/index.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/Home/index.tsx b/src/components/Home/index.tsx index 40dc7f103..d5124009b 100644 --- a/src/components/Home/index.tsx +++ b/src/components/Home/index.tsx @@ -1,5 +1,4 @@ import { Box } from '@chakra-ui/react' -import { PricingModal } from '~components/Dashboard/PricingModal' import Benefits from './Benefits' import Clients from './Clients' import ContactUs from './ContactUs' @@ -12,7 +11,6 @@ import Support from './Support' const Home = () => ( <> - {}} /> From b18741f042e0ffcc3259a91db35eaa093c381ead Mon Sep 17 00:00:00 2001 From: Gerard Date: Thu, 7 Nov 2024 12:30:16 +0100 Subject: [PATCH 04/10] open modal btn in dashboard --- src/components/Dashboard/Menu/Options.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/Dashboard/Menu/Options.tsx b/src/components/Dashboard/Menu/Options.tsx index 64bb4ca96..bba3686b6 100644 --- a/src/components/Dashboard/Menu/Options.tsx +++ b/src/components/Dashboard/Menu/Options.tsx @@ -1,4 +1,4 @@ -import { Box, Collapse } from '@chakra-ui/react' +import { Box, Button, Collapse } from '@chakra-ui/react' import { OrganizationName } from '@vocdoni/chakra-components' import { useEffect, useState } from 'react' import { useTranslation } from 'react-i18next' @@ -6,6 +6,7 @@ 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(null) + const [modal, setModal] = useState(false) const menuItems: MenuItem[] = [ // { @@ -82,6 +84,8 @@ export const DashboardMenuOptions = () => { return ( + setModal(false)} /> + {menuItems.map((item, index) => ( From 534925fac08632b55dbadab1c5ce305ecda1430f Mon Sep 17 00:00:00 2001 From: Gerard Date: Wed, 13 Nov 2024 10:42:27 +0100 Subject: [PATCH 05/10] fixed issue prettier --- src/theme/colors.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/theme/colors.ts b/src/theme/colors.ts index 2cbc895b7..d98bda2fe 100644 --- a/src/theme/colors.ts +++ b/src/theme/colors.ts @@ -258,7 +258,8 @@ export const colors = { light: colorsBase.primary, dark: colorsBase.blue.dark, }, - }, process_view: { + }, + process_view: { bg_light: colorsBase.white.dark, bg_dark: colorsBase.blue.dark, }, From 8dbd229599443ecbf2e7c9a1e4bd687f620cc780 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=92scar=20Casajuana?= Date: Wed, 13 Nov 2024 11:05:55 +0100 Subject: [PATCH 06/10] Minor translation changes --- src/components/Organization/Dashboard/PricingCard.tsx | 4 +++- src/i18n/locales/ca.json | 2 +- src/i18n/locales/en.json | 2 +- src/i18n/locales/es.json | 2 +- 4 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/components/Organization/Dashboard/PricingCard.tsx b/src/components/Organization/Dashboard/PricingCard.tsx index adcf8f75d..e5f349490 100644 --- a/src/components/Organization/Dashboard/PricingCard.tsx +++ b/src/components/Organization/Dashboard/PricingCard.tsx @@ -27,7 +27,9 @@ const PricingCard = ({ Subscribe - + + From ${price}/year + diff --git a/src/i18n/locales/ca.json b/src/i18n/locales/ca.json index ad98d4ea8..d53637714 100644 --- a/src/i18n/locales/ca.json +++ b/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" }, diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json index 9e3523807..101ce287d 100644 --- a/src/i18n/locales/en.json +++ b/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" }, diff --git a/src/i18n/locales/es.json b/src/i18n/locales/es.json index 8f80f42d9..dd5941fef 100644 --- a/src/i18n/locales/es.json +++ b/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" }, From b28423193b44aadebac2f9b60172447f9d69b621 Mon Sep 17 00:00:00 2001 From: Gerard Date: Wed, 13 Nov 2024 11:23:34 +0100 Subject: [PATCH 07/10] moved most popular plan styles from theme to inline --- .../Organization/Dashboard/PricingCard.tsx | 16 +++++++++++++++- src/theme/colors.ts | 5 +++++ src/theme/components/card.ts | 16 ---------------- 3 files changed, 20 insertions(+), 17 deletions(-) diff --git a/src/components/Organization/Dashboard/PricingCard.tsx b/src/components/Organization/Dashboard/PricingCard.tsx index e5f349490..a2b4d10e6 100644 --- a/src/components/Organization/Dashboard/PricingCard.tsx +++ b/src/components/Organization/Dashboard/PricingCard.tsx @@ -45,7 +45,21 @@ const PricingCard = ({ {popular && ( - + Most popular plan )} diff --git a/src/theme/colors.ts b/src/theme/colors.ts index d98bda2fe..8f4fe4131 100644 --- a/src/theme/colors.ts +++ b/src/theme/colors.ts @@ -1,4 +1,5 @@ export const colorsBase = { + beige: '#D2CBB9', black: '#000000', blue: { normal: '#3965FF', @@ -248,6 +249,10 @@ export const colors = { }, 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, diff --git a/src/theme/components/card.ts b/src/theme/components/card.ts index 1d6fb4e0c..f336a032d 100644 --- a/src/theme/components/card.ts +++ b/src/theme/components/card.ts @@ -53,22 +53,6 @@ export const Card = defineMultiStyleConfig({ border: '0.1px solid', borderColor: 'pricing_card.border_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, From dc84cdbdb122c745454d145bc781d70098a8a3e3 Mon Sep 17 00:00:00 2001 From: Gerard Date: Wed, 13 Nov 2024 11:45:42 +0100 Subject: [PATCH 08/10] removed pricing-card li before --- src/components/Home/index.tsx | 2 ++ .../Organization/Dashboard/PricingCard.tsx | 4 +++- src/theme/components/card.ts | 14 ++------------ 3 files changed, 7 insertions(+), 13 deletions(-) diff --git a/src/components/Home/index.tsx b/src/components/Home/index.tsx index d5124009b..b9ebb00dd 100644 --- 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' @@ -12,6 +13,7 @@ import Support from './Support' const Home = () => ( <> + {}} /> diff --git a/src/components/Organization/Dashboard/PricingCard.tsx b/src/components/Organization/Dashboard/PricingCard.tsx index a2b4d10e6..c957f29fa 100644 --- a/src/components/Organization/Dashboard/PricingCard.tsx +++ b/src/components/Organization/Dashboard/PricingCard.tsx @@ -34,7 +34,9 @@ const PricingCard = ({ {features.map((feature, idx) => ( - {feature} + + {feature} + ))} diff --git a/src/theme/components/card.ts b/src/theme/components/card.ts index f336a032d..05e202923 100644 --- a/src/theme/components/card.ts +++ b/src/theme/components/card.ts @@ -95,23 +95,13 @@ export const Card = defineMultiStyleConfig({ }, '& > div:last-of-type': { ml: 3, + border: '1px solid red', '& > ul': { maxW: 'fit-content', mx: 'auto', fontSize: 'sm', - listStyleType: 'none', - '& > li': { - position: 'relative', - paddingLeft: '1em', - - '&::before': { - content: '"- "', - position: 'absolute', - left: 0, - color: 'currentColor', - }, - }, + listStyleType: '"- "', }, }, }, From 31f03f94af33a1507213794e9b67b5ff86cc1037 Mon Sep 17 00:00:00 2001 From: Gerard Date: Wed, 13 Nov 2024 12:05:29 +0100 Subject: [PATCH 09/10] fixed issues --- src/components/Dashboard/PricingModal.tsx | 2 +- src/components/Home/index.tsx | 2 -- src/components/Organization/Dashboard/PricingCard.tsx | 1 - src/theme/components/card.ts | 1 - src/theme/components/modal.ts | 7 +------ 5 files changed, 2 insertions(+), 11 deletions(-) diff --git a/src/components/Dashboard/PricingModal.tsx b/src/components/Dashboard/PricingModal.tsx index 3fef4b3e0..d948d6595 100644 --- a/src/components/Dashboard/PricingModal.tsx +++ b/src/components/Dashboard/PricingModal.tsx @@ -82,7 +82,7 @@ export const PricingModal = ({ isOpenModal, onCloseModal }: { isOpenModal: boole }, ] return ( - + diff --git a/src/components/Home/index.tsx b/src/components/Home/index.tsx index b9ebb00dd..d5124009b 100644 --- a/src/components/Home/index.tsx +++ b/src/components/Home/index.tsx @@ -1,5 +1,4 @@ import { Box } from '@chakra-ui/react' -import { PricingModal } from '~components/Dashboard/PricingModal' import Benefits from './Benefits' import Clients from './Clients' import ContactUs from './ContactUs' @@ -13,7 +12,6 @@ import Support from './Support' const Home = () => ( <> - {}} /> diff --git a/src/components/Organization/Dashboard/PricingCard.tsx b/src/components/Organization/Dashboard/PricingCard.tsx index c957f29fa..ca4a2ffba 100644 --- a/src/components/Organization/Dashboard/PricingCard.tsx +++ b/src/components/Organization/Dashboard/PricingCard.tsx @@ -55,7 +55,6 @@ const PricingCard = ({ fontSize='sm' w='min-content' whiteSpace='nowrap' - mx='auto' py={1} px={3} borderRadius='full' diff --git a/src/theme/components/card.ts b/src/theme/components/card.ts index 05e202923..d129503cf 100644 --- a/src/theme/components/card.ts +++ b/src/theme/components/card.ts @@ -95,7 +95,6 @@ export const Card = defineMultiStyleConfig({ }, '& > div:last-of-type': { ml: 3, - border: '1px solid red', '& > ul': { maxW: 'fit-content', diff --git a/src/theme/components/modal.ts b/src/theme/components/modal.ts index 4c6a0efc7..29dd5c451 100644 --- a/src/theme/components/modal.ts +++ b/src/theme/components/modal.ts @@ -14,10 +14,6 @@ export const Modal = defineMultiStyleConfig({ }, variants: { 'pricing-modal': { - dialogContainer: { - minW: '100vw', - minH: '100vh', - }, dialog: { borderRadius: 0, m: 0, @@ -25,8 +21,7 @@ export const Modal = defineMultiStyleConfig({ base: 2.5, sm: 5, }, - minW: '100vw', - minH: '100vh', + bgColor: 'pricing_modal.bg.light', _dark: { bgColor: 'pricing_modal.bg.dark', From 58df54b6b4b2706ece259a0d1cba5ef12c82df11 Mon Sep 17 00:00:00 2001 From: Gerard Date: Wed, 13 Nov 2024 12:25:17 +0100 Subject: [PATCH 10/10] useDisclosure --- src/components/Dashboard/Menu/Options.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/Dashboard/Menu/Options.tsx b/src/components/Dashboard/Menu/Options.tsx index bba3686b6..f6ef7380d 100644 --- a/src/components/Dashboard/Menu/Options.tsx +++ b/src/components/Dashboard/Menu/Options.tsx @@ -1,4 +1,4 @@ -import { Box, Button, 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' @@ -20,7 +20,7 @@ export const DashboardMenuOptions = () => { const { t } = useTranslation() const location = useLocation() const [openSection, setOpenSection] = useState(null) - const [modal, setModal] = useState(false) + const { isOpen, onOpen, onClose } = useDisclosure() const menuItems: MenuItem[] = [ // { @@ -84,8 +84,8 @@ export const DashboardMenuOptions = () => { return ( - setModal(false)} /> - + + {menuItems.map((item, index) => (