Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-04-01 02:41:39 -05:00
Code Issues Activity

Refined plan pricing section design

Browse source
This commit is contained in:
Peter Zimon 2020-07-22 17:11:06 +02:00
parent 2de8c376f3
commit aaf37d046c
6 changed files with 85 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
ghost/portal/src/components/Frame.js
View file

@ -28,6 +28,7 @@ export default class Frame extends Component {
this.iframeRoot.style.lineHeight = '1.6em';
this.iframeRoot.style.fontWeight = '400';
this.iframeRoot.style.fontStyle = 'normal';
this.iframeRoot.style.color = '#333';
this.forceUpdate();
}

9
ghost/portal/src/components/Frame.styles.js
View file

@ -113,7 +113,7 @@ export const GlobalStyles = `
}
h2 {
font-size: 24px;
font-size: 23px;
font-weight: 500;
letter-spacing: 0.2px;
}
@ -140,7 +140,7 @@ export const GlobalStyles = `
}
.gh-portal-main-title {
color: #212121;
color: #333;
}
.gh-portal-text-disabled {
@ -154,10 +154,11 @@ export const GlobalStyles = `
}
.gh-portal-setting-heading {
font-size: 13px;
font-size: 1.3rem;
margin-bottom: 2px;
font-weight: 500;
color: #333;
letter-spacing: 0.5px;
}
/* Buttons
@ -247,7 +248,7 @@ export const GlobalStyles = `
.gh-portal-closeicon {
width: 16px;
height: 16px;
color: #999;
color: #dcdcdc;
cursor: pointer;
padding: 12px;
}

14
ghost/portal/src/components/PopupModal.js
View file

@ -9,20 +9,20 @@ const React = require('react');
const StylesWrapper = ({member}) => {
const isPaidMember = (member && member.paid);
const accountHome = isPaidMember ? {
width: '532px',
width: '418px',
minHeight: '650px',
maxHeight: '700px'
} : {
width: '532px',
width: '418px',
minHeight: '330px',
maxHeight: '330px'
};
const accountProfile = isPaidMember ? {
width: '532px',
width: '418px',
minHeight: '320px',
maxHeight: '320px'
} : {
width: '532px',
width: '418px',
minHeight: '380px',
maxHeight: '380px'
};
@ -45,8 +45,8 @@ const StylesWrapper = ({member}) => {
position: 'relative',
padding: '0',
outline: '0',
width: '532px',
borderRadius: '8px',
width: '418px',
borderRadius: '5px',
boxShadow: '0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12)',
opacity: '1',
overflow: 'hidden',
@ -70,7 +70,7 @@ const StylesWrapper = ({member}) => {
minHeight: '130px'
},
accountPlan: {
width: '532px',
width: '418px',
minHeight: '290px',
maxHeight: '290px'
},

13
ghost/portal/src/components/common/InputField.js
View file

@ -7,18 +7,21 @@ export const InputFieldStyles = `
width: 100%;
height: 40px;
outline: none;
border: 1px solid #ddd;
color: inherit;
background: #fff;
border-radius: 5px;
border: none;
border-radius: 3px;
font-size: 1.5rem;
margin-bottom: 12px;
margin-bottom: 18px;
box-sizing: border-box;
letter-spacing: 0.2px;
box-shadow: 0px 0px 0px 1px #e1e1e1 , 0px 2px 4px 0px rgba(0, 0, 0, 0.07), 0px 1px 1.5px 0px rgba(0, 0, 0, 0.05);
transition: all 0.25s ease-in-out;
}
.gh-portal-input:focus {
border: 1px solid transparent;
box-shadow: 0 0 0 1px #AAA;
border: none;
box-shadow: 0px 0px 0px 1px #c5c5c5 , 0px 2px 4px 0px rgba(0, 0, 0, 0.07), 0px 1px 1.5px 0px rgba(0, 0, 0, 0.05);
}
.gh-portal-input::placeholder {

70
ghost/portal/src/components/common/PlansSection.js
View file

@ -47,42 +47,51 @@ export const PlanSectionStyles = `
}
.gh-portal-plan-details {
margin-top: 15px;
margin-top: 8px;
}
.gh-portal-plan-name {
text-transform: uppercase;
font-weight: 500;
letter-spacing: 0.3px;
font-size: 1.35rem;
letter-spacing: 0.5px;
font-size: 1.2rem;
margin-top: 8px;
}
.gh-portal-plan-currency {
font-size: 2.2rem;
position: relative;
bottom: 5px;
font-size: 1.4rem;
letter-spacing: 0.4px;
font-weight: 500;
}
.gh-portal-plan-price {
font-size: 2.8rem;
font-size: 2.2rem;
font-weight: 500;
letter-spacing: 0.1px;
}
.gh-portal-plan-type {
color: #999;
}
.gh-portal-plan-note {
margin-top: 6px;
color: #999;
.gh-portal-plan-feature {
margin-top: 12px;
padding-top: 12px;
text-align: center;
font-size: 1.25rem;
line-height: 1.25em;
border-top: 1px solid #eaeaea;
width: 100%;
letter-spacing: 0.2px;
font-weight: 500;
}
.gh-portal-plan-checkbox {
display: block;
position: relative;
height: 22px;
height: 18px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
@ -102,9 +111,9 @@ export const PlanSectionStyles = `
.gh-portal-plan-checkbox .checkmark {
position: absolute;
top: 0;
left: -11px;
height: 22px;
width: 22px;
left: -9px;
height: 18px;
width: 18px;
background-color: #eee;
border-radius: 999px;
}
@ -124,10 +133,10 @@ export const PlanSectionStyles = `
}
.gh-portal-plan-checkbox .checkmark:after {
left: 8px;
top: 4px;
width: 4px;
height: 10px;
left: 6.5px;
top: 3px;
width: 3px;
height: 9px;
border: solid white;
border-width: 0 2px 2px 0;
-webkit-transform: rotate(45deg);
@ -152,26 +161,34 @@ function Checkbox({name, onPlanSelect, isChecked}) {
);
}
function PriceLabel({name, currency, price}) {
if (name === 'Free') {
return (
<div className='gh-portal-plan-note'>Access free<br/>members-only posts</div>
);
}
const type = name === 'Monthly' ? 'month' : 'year';
function PriceLabel({currency, price}) {
return (
<div className='gh-portal-plan-details'>
<span className='gh-portal-plan-currency'>{currency}</span>
<span className='gh-portal-plan-price'>{price}</span>
<span className='gh-portal-plan-type'>{` / ${type}`}</span>
</div>
);
}
function PlanOptions({plans, selectedPlan, onPlanSelect}) {
return plans.map(({name, currency, price}, i) => {
return plans.map(({name, currency, price, discount}, i) => {
const isChecked = selectedPlan === name;
const classes = (isChecked ? 'gh-portal-plan-section checked' : 'gh-portal-plan-section');
const planDetails = {};
switch (name) {
case 'Free':
planDetails.feature = 'Free preview';
break;
case 'Monthly':
planDetails.feature = 'Full access';
break;
case 'Yearly':
planDetails.feature = (discount ? discount + '% discount' : 'Full access');
break;
default:
break;
}
return (
<div className={classes} key={name} onClick={e => onPlanSelect(e, name)}>
<Checkbox name={name} isChecked={isChecked} onPlanSelect={onPlanSelect} />
@ -179,6 +196,9 @@ function PlanOptions({plans, selectedPlan, onPlanSelect}) {
<div>
<PriceLabel name={name} currency={currency} price={price} />
</div>
<div className='gh-portal-plan-feature'>
{planDetails.feature}
</div>
</div>
);
});

28
ghost/portal/src/components/pages/SignupPage.js
View file

@ -9,9 +9,9 @@ export const SignupPageStyles = `
.gh-portal-signup-logo {
position: relative;
display: block;
width: 68px;
height: 68px;
margin-bottom: 16px;
width: 56px;
height: 56px;
margin-bottom: 12px;
background-position: 50%;
background-size: cover;
border-radius: 999px;
@ -19,13 +19,16 @@ export const SignupPageStyles = `
}
.gh-portal-signup-header {
margin-top: 24px;
margin: 18px -32px 18px;
padding-bottom: 32px;
border-bottom: 1px solid #eaeaea;
}
.gh-portal-signup-footer {
font-size: 1.3rem;
margin-top: 8px;
color: #929292;
color: #515151;
letter-spacing: 0.2px;
}
.gh-portal-signup-footer button {
@ -152,12 +155,19 @@ class SignupPage extends React.Component {
const plansData = [];
const stripePlans = [
{type: 'month', price: plans.monthly, currency: plans.currency_symbol, name: 'Monthly'},
{type: 'year', price: plans.yearly, currency: plans.currency_symbol, name: 'Yearly'}
{type: 'month',
price: plans.monthly,
currency: plans.currency_symbol,
name: 'Monthly'},
{type: 'year',
price: plans.yearly,
currency: plans.currency_symbol,
name: 'Yearly',
discount: 100 - Math.round((plans.yearly / 12 * 100) / plans.monthly)}
];
if (allowSelfSignup && (portalPlans === undefined || portalPlans.includes('free'))) {
plansData.push({type: 'free', price: 'Decide later', name: 'Free'});
plansData.push({type: 'free', price: 0, currency: plans.currency_symbol, name: 'Free'});
}
if (isStripeConfigured) {
@ -265,7 +275,7 @@ class SignupPage extends React.Component {
return (
<div className='flex flex-column items-center gh-portal-section gh-portal-signup-header'>
{this.renderSiteLogo()}
<h2 className="gh-portal-main-title">Subscribe to {siteTitle}</h2>
<h2 className="gh-portal-main-title">{siteTitle}</h2>
</div>
);
}