From b845272d0936473db3f3d10858c382dddbb9453c Mon Sep 17 00:00:00 2001 From: Peter Zimon Date: Fri, 18 Sep 2020 10:27:04 +0200 Subject: [PATCH] Refined change plan flow no refs. - removed checkbox from change plan screen to make it less confusing if's a selection/checkbox or a button --- ghost/portal/src/components/Frame.styles.js | 9 ++++--- .../src/components/common/ActionButton.js | 4 +++ .../src/components/common/BackButton.js | 5 +--- .../src/components/common/PlansSection.js | 26 ++++++++++++++----- .../src/components/pages/AccountPlanPage.js | 1 + ghost/portal/src/utils/fixtures.js | 6 ++--- 6 files changed, 34 insertions(+), 17 deletions(-) diff --git a/ghost/portal/src/components/Frame.styles.js b/ghost/portal/src/components/Frame.styles.js index 3639399295..09644b8262 100644 --- a/ghost/portal/src/components/Frame.styles.js +++ b/ghost/portal/src/components/Frame.styles.js @@ -163,21 +163,21 @@ const GlobalStyles = ` text-decoration: none; color: var(--grey0); background: var(--white); - border: none; + border: 1px solid var(--grey12); min-width: 80px; height: 42px; padding: 0 1.8rem; border-radius: 4px; cursor: pointer; - transition: .4s ease; + transition: all .25s ease; box-shadow: none; - box-shadow: 0 0 0 1px rgba(0,0,0,0.08), 0 2px 6px -3px rgba(0,0,0,0.19); + box-shadow: 0 2px 6px -3px rgba(0,0,0,0.19); user-select: none; outline: none; } .gh-portal-btn:hover { - box-shadow: 0 0 0 1px rgba(0,0,0,0.18), 0 2px 6px -3px rgba(0,0,0,0.19); + border-color: var(--grey10); } .gh-portal-btn-icon svg { @@ -219,6 +219,7 @@ const GlobalStyles = ` padding: 0 4px; margin: 0 -4px; box-shadow: none; + border: none; } .gh-portal-btn-list:hover { diff --git a/ghost/portal/src/components/common/ActionButton.js b/ghost/portal/src/components/common/ActionButton.js index 75cb83e49f..8565ce5ade 100644 --- a/ghost/portal/src/components/common/ActionButton.js +++ b/ghost/portal/src/components/common/ActionButton.js @@ -7,10 +7,12 @@ export const ActionButtonStyles = ` box-shadow: none; position: relative; height: 46px; + border: none; } .gh-portal-btn-main:hover { box-shadow: none; + border: none; } .gh-portal-btn-primary:hover::before { @@ -22,10 +24,12 @@ export const ActionButtonStyles = ` content: ""; background: rgba(255, 255, 255, 0.08); border-radius: 5px; + border: none; } .gh-portal-btn-destructive:hover { color: var(--red); + border-color: var(--red); } .gh-portal-loadingicon { diff --git a/ghost/portal/src/components/common/BackButton.js b/ghost/portal/src/components/common/BackButton.js index e3fa4c79ab..202398aa79 100644 --- a/ghost/portal/src/components/common/BackButton.js +++ b/ghost/portal/src/components/common/BackButton.js @@ -16,6 +16,7 @@ export const BackButtonStyles = ` margin: 0; box-shadow: none; color: var(--grey3); + border: none; } .gh-portal-btn-back:hover { @@ -27,10 +28,6 @@ export const BackButtonStyles = ` width: 16px; height: 16px; } - - .gh-portal-btn-main:hover { - box-shadow: none; - } `; function ActionButton({label = 'Back', brandColor = '#3eb0ef', hidden = false, onClick}) { diff --git a/ghost/portal/src/components/common/PlansSection.js b/ghost/portal/src/components/common/PlansSection.js index 4f3454f038..55fc4bbee7 100644 --- a/ghost/portal/src/components/common/PlansSection.js +++ b/ghost/portal/src/components/common/PlansSection.js @@ -206,9 +206,23 @@ export const PlanSectionStyles = ` opacity: 1.0; } - .gh-portal-plans-container.hide-checkboxes .gh-portal-plan-checkbox { + .gh-portal-plans-container.hide-checkbox .gh-portal-plan-checkbox { display: none; } + + .gh-portal-plans-container.hide-checkbox .gh-portal-plan-section { + padding-top: 12px; + padding-bottom: 20px; + } + + .gh-portal-plan-current { + display: block; + font-size: 1.25rem; + letter-spacing: 0.2px; + line-height: 1.25em; + color: var(--brandcolor); + margin: 4px 0 -2px; + } `; function Checkbox({name, onPlanSelect, isChecked}) { @@ -236,7 +250,7 @@ function PriceLabel({currency, price}) { ); } -function PlanOptions({plans, selectedPlan, onPlanSelect}) { +function PlanOptions({plans, selectedPlan, onPlanSelect, changePlan}) { const hasMonthlyPlan = plans.some(({name}) => { return name === 'Monthly'; }); @@ -267,6 +281,7 @@ function PlanOptions({plans, selectedPlan, onPlanSelect}) {
{planDetails.feature}
+ {(changePlan && selectedPlan === name ? Current plan : '')} ); }); @@ -281,16 +296,15 @@ function PlanLabel({showLabel}) { ); } -function PlansSection({plans, showLabel = true, type, selectedPlan, onPlanSelect, style}) { +function PlansSection({plans, showLabel = true, type, selectedPlan, onPlanSelect, changePlan = false, style}) { if (!plans || plans.length === 0 || (plans.length === 1 && plans[0].type === 'free')) { return null; } - const plansContainerClass = selectedPlan ? '' : 'hide-checkboxes'; return (
-
- +
+
); diff --git a/ghost/portal/src/components/pages/AccountPlanPage.js b/ghost/portal/src/components/pages/AccountPlanPage.js index 8cf7d5485e..1a5cf737a9 100644 --- a/ghost/portal/src/components/pages/AccountPlanPage.js +++ b/ghost/portal/src/components/pages/AccountPlanPage.js @@ -172,6 +172,7 @@ const ChangePlanSection = ({plans, selectedPlan, member, action, brandColor, onP plans={plans} selectedPlan={selectedPlan} onPlanSelect={(e, name) => onPlanSelect(e, name)} + changePlan={true} /> diff --git a/ghost/portal/src/utils/fixtures.js b/ghost/portal/src/utils/fixtures.js index fcacf3db83..d9696606d2 100644 --- a/ghost/portal/src/utils/fixtures.js +++ b/ghost/portal/src/utils/fixtures.js @@ -7,7 +7,7 @@ export const site = { url: 'http://localhost:2368/', plans: { monthly: 5, - yearly: 110, + yearly: 15, currency: 'USD', currency_symbol: '$' }, @@ -15,7 +15,7 @@ export const site = { is_stripe_configured: true, portal_button: true, portal_name: true, - portal_plans: ['monthly', 'yearly'], + portal_plans: ['free', 'monthly', 'yearly'], portal_button_icon: 'icon-1', portal_button_signup_text: 'Subscribe now', portal_button_style: 'icon-and-text', @@ -51,7 +51,7 @@ export const member = { id: 'fd43b943666b97640188afb382cca39479de30f799985679dd7a71ad2925ac6c', nickname: 'Yearly', interval: 'year', - amount: 500, + amount: 1500, currency: 'USD', currency_symbol: '$' },