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

@@ -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 {

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 {

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}) {

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}) {
                 <div className='gh-portal-plan-feature'>
                     {planDetails.feature}
                 </div>
+                {(changePlan && selectedPlan === name ? <span className='gh-portal-plan-current'>Current plan</span> : '')}
             </div>
         );
     });
@@ -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 (
         <section>
             <PlanLabel showLabel={showLabel} />
-            <div className={`gh-portal-plans-container ${plansContainerClass}`}>
-                <PlanOptions plans={plans} onPlanSelect={onPlanSelect} selectedPlan={selectedPlan} />
+            <div className={'gh-portal-plans-container' + (changePlan ? ' hide-checkbox' : '')}>
+                <PlanOptions plans={plans} onPlanSelect={onPlanSelect} selectedPlan={selectedPlan} changePlan={changePlan} />
             </div>
         </section>
     );

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}
                 />
             </div>
             <CancelContinueSubscription {...{member, onCancelContinueSubscription, action, brandColor}} />

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: '$'
             },