Skip to content

Commit

Permalink
feat(18775): payment plan components improvements (#779)
Browse files Browse the repository at this point in the history
* feat(18228): add card box-shadow

* feat(18228): prevent content jumping on toggle switch

---------

Co-authored-by: Natallia Harshunova <[email protected]>
  • Loading branch information
Natallia-Harshunova and nattallius authored Jul 1, 2024
1 parent 740fcb6 commit a4db998
Show file tree
Hide file tree
Showing 2 changed files with 16 additions and 3 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,10 @@
background-color: var(--accent-weak);
border-color: var(--strong-color);
}

&:hover {
box-shadow: var(--shadow-medium);
}
}

.planIcon {
Expand Down Expand Up @@ -47,6 +51,10 @@
margin-bottom: var(--double-unit);
}

.hidden {
visibility: hidden;
}

.perMonth {
font-size: 14px;
color: #888;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -40,10 +40,15 @@ const PaymentPlanCard = memo(function PaymentPlanCard({
{plan.name}
</Heading>
</div>
{billingOption?.initialPricePerMonth && (
<div className={s.initialPrice}>${billingOption.initialPricePerMonth}</div>
{/* Just hide old price on 'month' to prevent content jumping */}
{billingOption && (
<div
className={clsx(s.initialPrice, { [s.hidden]: billingOption.id === 'month' })}
>
${billingOption?.initialPricePerMonth}
</div>
)}
{billingOption?.pricePerMonth && (
{billingOption && (
<Price className={s.price} amount={billingOption.pricePerMonth} />
)}
<Text className={s.planDescription} type="short-m">
Expand Down

0 comments on commit a4db998

Please sign in to comment.