add improvement to pricing section and remove border from footer (#67)

vazco · Sep 15, 2023 · 13fb639 · 13fb639
1 parent 782715b
commit 13fb639
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 19 deletions.
diff --git a/src/css/custom.css b/src/css/custom.css
@@ -507,7 +507,6 @@ table {
   justify-content: space-evenly;
   align-items: center;
   margin-bottom: 1em;
-  border: 1px solid var(--theme-color-stormy-blue);
 }
 
 @media (min-width: 768px) {
@@ -714,11 +713,6 @@ table {
   border-radius: 36px;
   width: 100%;
   padding: 20px;
-  transition: all 0.2s ease-out;
-}
-
-.pricing-card__card:hover {
-  transform: scale(1.03);
 }
 
 .pricing-card__badge {
@@ -760,7 +754,6 @@ table {
 }
 
 .pricing-card__benefit-button {
-  transition: font-weight 0.2s ease-in-out;
   background: none;
   color: inherit;
   border: none;
@@ -770,8 +763,19 @@ table {
   outline: inherit;
 }
 
-.pricing-card__benefit-button:hover {
-  font-weight: 600;
+.btn-all-features-monthly,
+.btn-all-features-yearly,
+.btn-all-features-lifelong {
+  background-color: #ecf0f1;
+  border-radius: 32px;
+  padding: 7px;
+  transition: 'background-color 0.2s ease-in-out';
+}
+
+.btn-all-features-monthly:hover,
+.btn-all-features-yearly:hover,
+.btn-all-features-lifelong:hover {
+  background-color: #d1dbde;
 }
 
 .list-card__card {

diff --git a/src/sections/Pricing/Pricing.tsx b/src/sections/Pricing/Pricing.tsx
@@ -9,13 +9,6 @@ import DollarIcon from '../../images/svg/dollar.svg';
 import GiftIcon from '../../images/svg/gift.svg';
 import StarIcon from '../../images/svg/star.svg';
 
-const allFeaturesIncludedStyles = {
-  backgroundColor: '#ECF0F1',
-  borderRadius: 32,
-  padding: 7,
-  transition: 'all 0.2s ease-out',
-};
-
 const pricingCards: PricingCardData[] = [
   {
     color: '#818A96',
@@ -45,7 +38,6 @@ const pricingCards: PricingCardData[] = [
       {
         icon: <StarIcon />,
         text: 'All features included.',
-        additionalStyles: allFeaturesIncludedStyles,
         isButton: true,
         className: 'btn-all-features-monthly',
       },
@@ -65,7 +57,6 @@ const pricingCards: PricingCardData[] = [
       {
         icon: <StarIcon />,
         text: 'All features included.',
-        additionalStyles: allFeaturesIncludedStyles,
         isButton: true,
         className: 'btn-all-features-yearly',
       },
@@ -91,7 +82,6 @@ const pricingCards: PricingCardData[] = [
       {
         icon: <StarIcon />,
         text: 'All features included.',
-        additionalStyles: allFeaturesIncludedStyles,
         isButton: true,
         className: 'btn-all-features-lifelong',
       },