From 13fb639edcd79b5c337382b6332c6301810fd0ec Mon Sep 17 00:00:00 2001 From: Paulina Jacykowska Date: Fri, 15 Sep 2023 12:33:42 +0300 Subject: [PATCH] add improvement to pricing section and remove border from footer (#67) --- src/css/custom.css | 22 +++++++++++++--------- src/sections/Pricing/Pricing.tsx | 10 ---------- 2 files changed, 13 insertions(+), 19 deletions(-) diff --git a/src/css/custom.css b/src/css/custom.css index 5e49c30..eb595a2 100644 --- 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 index ce88181..5e12c09 100644 --- 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: , text: 'All features included.', - additionalStyles: allFeaturesIncludedStyles, isButton: true, className: 'btn-all-features-monthly', }, @@ -65,7 +57,6 @@ const pricingCards: PricingCardData[] = [ { icon: , text: 'All features included.', - additionalStyles: allFeaturesIncludedStyles, isButton: true, className: 'btn-all-features-yearly', }, @@ -91,7 +82,6 @@ const pricingCards: PricingCardData[] = [ { icon: , text: 'All features included.', - additionalStyles: allFeaturesIncludedStyles, isButton: true, className: 'btn-all-features-lifelong', },