0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-04-08 02:52:39 -05:00

Updated current plan visuals

This commit is contained in:
Peter Zimon 2022-03-23 14:19:01 +01:00
parent f03ef9538d
commit 9529587ef7
3 changed files with 17 additions and 10 deletions

View file

@ -326,6 +326,11 @@ const FrameStyles = `
padding-bottom: 4vw;
}
.gh-portal-popup-container.full-size.account-plan {
justify-content: flex-start;
padding-top: 4vmin;
}
.gh-portal-popup-container.preview {
animation: none !important;
}

View file

@ -312,17 +312,19 @@ export const ProductsSectionStyles = ({site}) => {
.gh-portal-current-plan {
display: flex;
align-items: center;
font-size: 1.5rem;
font-weight: 500;
line-height: 1em;
letter-spacing: 0.2px;
justify-content: center;
text-align: center;
white-space: nowrap;
width: 100%;
height: 44px;
border-radius: 5px;
color: var(--grey0);
font-weight: 600;
color: var(--grey5);
font-size: 1.4rem;
font-weight: 500;
line-height: 1em;
letter-spacing: 0.2px;
font-weight: 500;
background: #f0f0f0;
}
.gh-portal-product-card.only-free {
@ -858,7 +860,7 @@ function ChangeProductCard({product, onPlanSelect}) {
</div>
{(currentPlan ?
<div className='gh-portal-btn-product'>
<span className='gh-portal-current-plan'>Current plan</span>
<span className='gh-portal-current-plan'><span>Current plan</span></span>
</div>
:
<div className='gh-portal-btn-product'>

View file

@ -125,7 +125,7 @@ const PlanConfirmationSection = ({plan, type, onConfirm}) => {
const priceLabel = hasMultipleProductsFeature({site}) ? product?.name : 'Price';
if (type === 'changePlan') {
return (
<>
<div className='gh-portal-logged-out-form-container'>
<div className='gh-portal-list mb6'>
<section>
<div className='gh-portal-list-detail'>
@ -151,11 +151,11 @@ const PlanConfirmationSection = ({plan, type, onConfirm}) => {
height: '40px'
}}
/>
</>
</div>
);
} else {
return (
<div className="gh-portal-cancellation-form">
<div className="gh-portal-logged-out-form-container gh-portal-cancellation-form">
<p>If you cancel your subscription now, you will continue to have access until <strong>{getDateString(subscription.current_period_end)}</strong>.</p>
<section className='gh-portal-input-section'>
<div className='gh-portal-input-labelcontainer'>