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

Refined list of available products (upgrade)

Browse source
This commit is contained in:
Peter Zimon 2021-06-24 13:40:17 +02:00
parent f2aab7a5bb
commit ab60eed6fe
3 changed files with 41 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ghost/portal/src/App.js
View file

@ -19,7 +19,7 @@ const DEV_MODE_DATA = {
showPopup: true, showPopup: true,
site: Fixtures.site, site: Fixtures.site,
member: Fixtures.member.paid, member: Fixtures.member.paid,
page: 'signup' page: 'accountPlan'
}; };
export default class App extends React.Component { export default class App extends React.Component {
constructor(props) { constructor(props) {

1
ghost/portal/src/components/Global.styles.js
View file

@ -17,6 +17,7 @@ export const GlobalStyles = `
--grey11: #e1e1e1; --grey11: #e1e1e1;
--grey12: #eaeaea; --grey12: #eaeaea;
--grey13: #f9f9f9; --grey13: #f9f9f9;
--grey14: #fbfbfb;
--white: #fff; --white: #fff;
--red: #f02525; --red: #f02525;
--yellow: #FFDC15; --yellow: #FFDC15;

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

@ -7,7 +7,7 @@ export const PlanSectionStyles = `
.gh-portal-plans-container { .gh-portal-plans-container {
display: flex; display: flex;
align-items: stretch; align-items: stretch;
border: 1px solid var(--grey10); border: 1px solid var(--grey11);
border-radius: 5px; border-radius: 5px;
} }
@ -20,7 +20,7 @@ export const PlanSectionStyles = `
justify-items: center; justify-items: center;
font-size: 1.4rem; font-size: 1.4rem;
line-height: 1.35em; line-height: 1.35em;
border-right: 1px solid var(--grey10); border-right: 1px solid var(--grey11);
padding: 16px 10px; padding: 16px 10px;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
@ -244,7 +244,7 @@ export const PlanSectionStyles = `
letter-spacing: 0.2px; letter-spacing: 0.2px;
line-height: 1.25em; line-height: 1.25em;
color: var(--brandcolor); color: var(--brandcolor);
margin: 4px 0 -2px; margin: 3px 0 -2px;
} }
.gh-portal-plans-container.vertical { .gh-portal-plans-container.vertical {
@ -259,7 +259,7 @@ export const PlanSectionStyles = `
justify-items: start; justify-items: start;
min-height: 60px; min-height: 60px;
border-right: none; border-right: none;
border-bottom: 1px solid var(--grey10); border-bottom: 1px solid var(--grey11);
padding: 10px; padding: 10px;
} }
@ -294,7 +294,7 @@ export const PlanSectionStyles = `
} }
.gh-portal-plans-container.vertical .gh-portal-plan-featurewrapper { .gh-portal-plans-container.vertical .gh-portal-plan-featurewrapper {
margin: 0; margin: 4px 0 0;
padding: 0; padding: 0;
border: none; border: none;
align-items: flex-start; align-items: flex-start;
@ -332,6 +332,37 @@ export const PlanSectionStyles = `
.gh-portal-plans-container.vertical .gh-portal-plan-name.no-description { .gh-portal-plans-container.vertical .gh-portal-plan-name.no-description {
grid-row: 1 / 3; grid-row: 1 / 3;
} }
.gh-portal-plans-container.multiple-products {
border: none;
}
.gh-portal-plan-product {
border: 1px solid var(--grey11);
border-radius: 5px;
}
.gh-portal-plan-product:not(:last-of-type) {
margin-bottom: 20px;
}
.gh-portal-plan-productname {
border-radius: 5px 5px 0 0;
padding: 2px 10px;
font-size: 1.25rem;
letter-spacing: 0.3px;
text-transform: uppercase;
font-weight: 600;
border-bottom: 1px solid var(--grey12);
}
.gh-portal-accountplans-main .gh-portal-plan-section:hover {
background: var(--grey14);
}
.gh-portal-accountplans-main .gh-portal-plan-section:last-of-type {
border-radius: 0 0 5px 5px;
}
`; `;
function Checkbox({name, id, onPlanSelect, isChecked, disabled = false}) { function Checkbox({name, id, onPlanSelect, isChecked, disabled = false}) {
@ -385,15 +416,8 @@ function addDiscountToPlans(plans) {
function ProductOptions({products, selectedPlan, onPlanSelect, changePlan}) { function ProductOptions({products, selectedPlan, onPlanSelect, changePlan}) {
return products.map(({id, monthlyPrice, yearlyPrice, name}) => { return products.map(({id, monthlyPrice, yearlyPrice, name}) => {
return ( return (
<div key={id}> <div className="gh-portal-plan-product" key={id}>
<div style={{ <div className="gh-portal-plan-productname">{name}</div>
display: 'flex',
justifyContent: 'center',
fontWeight: 'bold',
fontSize: '16px',
padding: '6px 0',
borderBottom: '1px solid black'
}}> {name} </div>
<PlanOptions <PlanOptions
plans={[monthlyPrice, yearlyPrice]} plans={[monthlyPrice, yearlyPrice]}
selectedPlan={selectedPlan} selectedPlan={selectedPlan}
@ -474,7 +498,7 @@ export function MultipleProductsPlansSection({products, selectedPlan, onPlanSele
onPlanSelect = () => {}; onPlanSelect = () => {};
} }
const className = getPlanClassNames({cookiesDisabled, changePlan, showVertical: true}); const className = getPlanClassNames({cookiesDisabled, changePlan, showVertical: true}) + ' multiple-products';
return ( return (
<section className="gh-portal-plans"> <section className="gh-portal-plans">
<div className={className}> <div className={className}>