Skip to content

Commit

Permalink
Plans Spotlight: Align action button with a flexbox (#98195)
Browse files Browse the repository at this point in the history
* Center align button

* Clean up

* Fix styling
ddc22 authored Jan 13, 2025

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
1 parent 3803a5e commit 92230fa
Showing 2 changed files with 37 additions and 26 deletions.
Original file line number Diff line number Diff line change
@@ -44,28 +44,32 @@ const SpotlightPlan = ( {

return (
<div className={ spotlightPlanClasses }>
<PlanLogos renderedGridPlans={ [ gridPlanForSpotlight ] } isInSignup={ false } />
<PlanHeaders renderedGridPlans={ [ gridPlanForSpotlight ] } />
{ isNotFreePlan && <PlanTagline renderedGridPlans={ [ gridPlanForSpotlight ] } /> }
{ isNotFreePlan && (
<PlanPrices
<div>
<PlanLogos renderedGridPlans={ [ gridPlanForSpotlight ] } isInSignup={ false } />
<PlanHeaders renderedGridPlans={ [ gridPlanForSpotlight ] } />
{ isNotFreePlan && <PlanTagline renderedGridPlans={ [ gridPlanForSpotlight ] } /> }
{ isNotFreePlan && (
<PlanPrices
renderedGridPlans={ [ gridPlanForSpotlight ] }
currentSitePlanSlug={ currentSitePlanSlug }
/>
) }
{ isNotFreePlan && <BillingTimeframes renderedGridPlans={ [ gridPlanForSpotlight ] } /> }
<PlanFeaturesList
renderedGridPlans={ [ gridPlanForSpotlight ] }
featureGroupSlug={ FEATURE_GROUP_STORAGE }
onStorageAddOnClick={ onStorageAddOnClick }
showUpgradeableStorage={ showUpgradeableStorage }
/>
</div>
<div className="spotlight-plan__buttons">
<TopButtons
renderedGridPlans={ [ gridPlanForSpotlight ] }
isInSignup={ isInSignup }
currentSitePlanSlug={ currentSitePlanSlug }
planActionOverrides={ planActionOverrides }
/>
) }
{ isNotFreePlan && <BillingTimeframes renderedGridPlans={ [ gridPlanForSpotlight ] } /> }
<PlanFeaturesList
renderedGridPlans={ [ gridPlanForSpotlight ] }
featureGroupSlug={ FEATURE_GROUP_STORAGE }
onStorageAddOnClick={ onStorageAddOnClick }
showUpgradeableStorage={ showUpgradeableStorage }
/>
<TopButtons
renderedGridPlans={ [ gridPlanForSpotlight ] }
isInSignup={ isInSignup }
currentSitePlanSlug={ currentSitePlanSlug }
planActionOverrides={ planActionOverrides }
/>
</div>
</div>
);
};
21 changes: 14 additions & 7 deletions packages/plans-grid-next/src/components/features-grid/style.scss
Original file line number Diff line number Diff line change
@@ -268,15 +268,18 @@
margin-bottom: 64px;
border: 1px solid #e0e0e0;
/* stylelint-disable-next-line scales/radii */
border-radius: 0 0 5px 5px;
border-radius: 5px;
display: flex;
justify-content: space-between;

div.spotlight-plan__buttons {
display: flex;
align-items: center;
justify-content: center;
}

div.plan-features-2023-grid__table-item {
border: none;
&.is-top-buttons {
position: absolute;
top: 46px;
right: 0;
border-left: 0;
}

&.plan-features-2023-grid__header-billing-info {
padding-bottom: 16px;
@@ -288,6 +291,10 @@

&.popular-plan-parent-class .plan-features-2023-grid__popular-badge {
padding-bottom: 23px;
@include plans-grid-medium-large {
position: unset;
border: none;
}
}

.plan-features-2023-grid__header-title {

0 comments on commit 92230fa

Please sign in to comment.