Add more links styles

breatheco-de · Jan 24, 2025 · c21a3bc · c21a3bc
1 parent 92a3266
commit c21a3bc
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 14 deletions.
diff --git a/src/common/components/Button.jsx b/src/common/components/Button.jsx
@@ -51,6 +51,12 @@ function Button({ to, onClick, children, variant = 'primary', disabled = false,
       disabled: { background: 'transparent', color: '#DADADA', cursor: 'not-allowed' },
       active: { background: '#EEF9FE', color: '#0084FF' },
     },
+    outlineWhite: {
+      background: '#FFFFFF',
+      color: '#000000',
+      borderColor: 'transparent',
+      disabled: { background: 'transparent', color: '#DADADA', cursor: 'not-allowed' },
+    },
     unstyled: {},
   };
 

diff --git a/src/common/components/Navbar/index.jsx b/src/common/components/Navbar/index.jsx
@@ -568,7 +568,25 @@ function NavbarWithSubNavigation({ translations, pageProps }) {
               >
                 {t('login')}
               </NextChakraLink>
-              <Link variant="buttonDefault" href={`/${locale}/pricing${parseQuerys({ internal_cta_placement: 'navbar-get-started' }, false)}`}>
+              <Link
+                variant="buttonDefault"
+                backgroundColor="#0097CF"
+                borderRadius="3px"
+                textAlign="center"
+                width="100%"
+                // opacity="0.9"
+                _hover={{
+                  background: hexColor?.blue5,
+                }}
+                _active={{
+                  background: hexColor?.blue4,
+                }}
+                _disabled={{
+                  background: hexColor?.blue6,
+                  cursor: 'not-allowed',
+                }}
+                href={`/${locale}/pricing${parseQuerys({ internal_cta_placement: 'navbar-get-started' }, false)}`}
+              >
                 {t('get-started')}
               </Link>
             </Box>

diff --git a/src/common/components/PricingCard.jsx b/src/common/components/PricingCard.jsx
@@ -46,7 +46,7 @@ export default function PricingCard({ item, courseData, isFetching, relatedSubsc
       featured: item?.featured_card?.color || '',
       border: item?.featured_card?.color || hexColor.lightColor,
       button: {
-        variant: item?.button?.variant || 'default',
+        variant: item?.button?.variant || 'primary',
         color: item?.button?.color || '#fff',
         background: item?.button?.background || hexColor.blueDefault,
         title: item?.button?.title || item?.button,
@@ -63,9 +63,7 @@ export default function PricingCard({ item, courseData, isFetching, relatedSubsc
       featured: '',
       border: hexColor.lightColor,
       button: {
-        variant: 'default',
-        color: '#fff',
-        background: hexColor.blueDefault,
+        variant: 'primary',
         title: item?.button,
       },
     },
@@ -99,11 +97,9 @@ export default function PricingCard({ item, courseData, isFetching, relatedSubsc
       featured: courseCoupon ? hexColor.green : hexColor.blueDefault,
       border: isFetching ? hexColor.lightColor : premiumColor(),
       button: {
-        variant: 'default',
-        color: hexColor.black,
-        borderColor: 'white',
-        background: featuredCard.background,
+        variant: 'outlineWhite',
         title: t('pricing.premium-plan.button-title'),
+        icon: 'black',
       },
     },
   };
@@ -293,9 +289,9 @@ export default function PricingCard({ item, courseData, isFetching, relatedSubsc
             </Text>
           ) : (
             <>
-              <Button isLoading={isFetching} margin={isBootcampOrCustomType ? '16px auto auto' : '0 auto'} variant={viewProps.button.variant} color={viewProps.button.color} borderColor={viewProps.button.borderColor} onClick={handlePlan} display="flex" gridGap="10px" background={viewProps.button.background} fontSize="17px" width="100%" textAlign="center" padding="0 24px">
+              <Button isLoading={isFetching} margin={isBootcampOrCustomType ? '16px auto auto' : '0 auto'} variant={viewProps.button.variant} onClick={handlePlan} display="flex" gridGap="10px" fontSize="17px" width="100%" textAlign="center" padding="0 24px">
                 {!isOriginalPlan && !isBootcampOrCustomType && (
-                  <Icon icon="graduationCap" color={viewProps.button.color} width="24px" height="24px" />
+                  <Icon icon="graduationCap" color={viewProps.button.icon} width="24px" height="24px" />
                 )}
                 {viewProps.button.title}
               </Button>

diff --git a/src/common/components/PublicCourseCard.jsx b/src/common/components/PublicCourseCard.jsx
@@ -85,8 +85,18 @@ function PublicCourseCard({
         color="white !important"
         textDecoration="none !important"
         padding="7px 16px !important"
-        _hover={{ opacity: 0.7 }}
-        _active={{ opacity: 1 }}
+        // _hover={{ opacity: 0.7 }}
+        // _active={{ opacity: 1 }}
+        _hover={{
+          background: hexColor?.blue5,
+        }}
+        _active={{
+          background: hexColor?.blue4,
+        }}
+        _disabled={{
+          background: hexColor?.blue6,
+          cursor: 'not-allowed',
+        }}
       >
         {t('common:learn-more')}
       </Link>

diff --git a/src/pages/pricing.jsx b/src/pages/pricing.jsx
@@ -362,7 +362,7 @@ function PricingView() {
                         href={`/${lang}/pricing?course=${course?.slug}`}
                         textAlign="center"
                         width="100%"
-                        opacity="0.9"
+                        // opacity="0.9"
                         _hover={{
                           background: hexColor?.blue5,
                         }}