Refined change plan and mobile sizes

ghost/portal/src/App.js

@@ -18,8 +18,8 @@ const React = require('react');
 const DEV_MODE_DATA = {
     showPopup: true,
     site: Fixtures.site,
-    member: Fixtures.member.paid,
-    page: 'signup'
+    member: Fixtures.member.free,
+    page: 'accountHome'
 };
 
 function SentryErrorBoundary({site, children}) {

ghost/portal/src/components/common/ActionButton.js

@@ -30,6 +30,14 @@ export const ActionButtonStyles = `
         border-color: var(--red);
     }
 
+    .gh-portal-btn-text {
+        padding: 0;
+        font-weight: 500;
+        height: unset;
+        border: none;
+        box-shadow: none;
+    }
+
     .gh-portal-loadingicon {
         position: absolute;
         left: 50%;
@@ -71,7 +79,7 @@ const Styles = ({brandColor, retry, disabled, style = {}, isPrimary}) => {
     };
 };
 
-function ActionButton({label, type = undefined, onClick, disabled = false, retry = false, brandColor, isRunning, isPrimary = true, isDestructive = false, style = {}, tabindex = undefined}) {
+function ActionButton({label, type = undefined, onClick, disabled = false, retry = false, brandColor, isRunning, isPrimary = true, isDestructive = false, classes, style = {}, tabindex = undefined}) {
     let Style = Styles({disabled, retry, brandColor, style, isPrimary});
 
     let className = 'gh-portal-btn';
@@ -81,6 +89,9 @@ function ActionButton({label, type = undefined, onClick, disabled = false, retry
     if (isDestructive) {
         className += ' gh-portal-btn-destructive';
     }
+    if (classes) {
+        className += (' ' + classes);
+    }
     if (isCookiesDisabled()) {
         disabled = true;
     }

ghost/portal/src/components/common/ProductsSection.js

@@ -310,6 +310,14 @@ export const ProductsSectionStyles = ({site}) => {
                 width: 100%;
             }
 
+            .gh-portal-priceoption-label {
+                font-size: 1.25rem;
+            }
+
+            .gh-portal-products-priceswitch .gh-portal-discount-label {
+                display: none;
+            }
+
             .gh-portal-products-priceswitch {
                 padding-top: 18px;
             }
@@ -333,6 +341,7 @@ export const ProductsSectionStyles = ({site}) => {
             }
 
             .gh-portal-product-name {
+                font-size: 1.25rem;
                 margin: 4px 0;
                 padding: 0;
                 text-align: left;
@@ -352,15 +361,15 @@ export const ProductsSectionStyles = ({site}) => {
             }
 
             .gh-portal-popup-container.multiple-products .gh-portal-product-description {
-                margin-bottom: 0;
-                padding-bottom: 0;
-                padding-left: 0;
+                margin: 0 !important;
+                padding: 2px 0 0 !important;
             }
 
             .gh-portal-product-price {
                 position: relative;
                 justify-content: flex-end;
                 width: 100%;
+                margin-top: 3px;
             }
 
             .gh-portal-product-price .currency-sign {
@@ -374,7 +383,7 @@ export const ProductsSectionStyles = ({site}) => {
             .gh-portal-product-price .billing-period {
                 position: absolute;
                 right: 0;
-                top: 24px;
+                top: 25px;
                 font-size: 1.2rem;
             }
 
@@ -392,8 +401,8 @@ export const ProductsSectionStyles = ({site}) => {
 
             .gh-portal-product-benefits.vertical {
                 grid-column: 2;
-                padding: 12px 20px;
-                margin-top: 0px;
+                padding: 0 20px;
+                margin: 8px 0 12px;
                 display: block !important;
                 grid-row: 2;
                 grid-column: 1 / 3;
@@ -456,8 +465,10 @@ export const ProductsSectionStyles = ({site}) => {
         .gh-portal-upgrade-product .gh-portal-product-description {
             grid-column: 2 / 3;
             grid-row: 2;
-            margin-bottom: 0px;
+            font-weight: 400;
             text-align: left;
+            padding: 0 !important;
+            margin: 0 !important;
         }
 
         .gh-portal-upgrade-product .gh-portal-product-price {
@@ -495,8 +506,8 @@ export const ProductsSectionStyles = ({site}) => {
 
         .gh-portal-upgrade-product .gh-portal-product-benefits.vertical {
             grid-column: 2;
-            padding: 12px 20px;
-            margin-top: 0px;
+            padding: 0 20px;
+            margin: 4px 0 12px;
             display: block !important;
             grid-row: 2;
             grid-column: 1 / 3;
@@ -506,6 +517,28 @@ export const ProductsSectionStyles = ({site}) => {
             margin-bottom: 0;
         }
 
+        .gh-portal-upgrade-product .gh-portal-plan-current {
+            display: inline-block;
+            position: relative;
+            font-size: 1.1rem;
+            font-weight: 600;
+            letter-spacing: 0.25px;
+            text-transform: uppercase;
+            padding: 2px 4px;
+        }
+
+        .gh-portal-upgrade-product .gh-portal-plan-current::before {
+            position: absolute;
+            content: "";
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            border-radius: 2px;
+            background: var(--brandcolor);
+            opacity: 0.15;
+        }
+
         .gh-portal-products-grid.change-plan .gh-portal-product-card-header {
             grid-template-columns: auto;
             grid-column: 1 / 3;
@@ -880,17 +913,10 @@ export function ChangeProductSection({onPlanSelect, selectedPlan, products, type
 }
 
 function CurrentPlanLabel({selectedPrice, activePrice}) {
-    const {brandColor} = useContext(AppContext);
     if (selectedPrice.id === activePrice.id) {
         return (
-            <div style={{marginTop: '6px'}}>
-                <span style={{
-                    color: 'black',
-                    border: `1px solid ${brandColor}`,
-                    background: brandColor,
-                    borderRadius: '6px',
-                    padding: '3px'
-                }}>Current Plan</span>
+            <div className="mt1">
+                <span className="gh-portal-plan-current">Current Plan</span>
             </div>
         );
     }
@@ -930,10 +956,9 @@ function ChangeProductCard({product}) {
                 }} />
                 <h4 className="gh-portal-product-name">{product.name}</h4>
                 <ProductDescription product={product} selectedPrice={selectedPrice} activePrice={memberActivePrice} />
-                <ProductBenefitsContainer product={product} hide={selectedProduct !== product.id} />
             </div>
             <ProductCardFooter product={product} />
-            <ProductBenefitsContainer product={product} showVertical={true} hide={selectedProduct !== product.id} />
+            <ProductBenefitsContainer product={product} showVertical={true} />
         </div>
     );
 }

ghost/portal/src/components/pages/AccountPlanPage.js

@@ -60,6 +60,7 @@ const Header = ({onBack, showConfirmation, confirmationType}) => {
 };
 
 const CancelSubscriptionButton = ({member, onCancelSubscription, action, brandColor}) => {
+    const {site} = useContext(AppContext);
     if (!member.paid) {
         return null;
     }
@@ -91,6 +92,7 @@ const CancelSubscriptionButton = ({member, onCancelSubscription, action, brandCo
                 disabled={disabled}
                 isPrimary={isPrimary}
                 isDestructive={isDestructive}
+                classes={hasMultipleProductsFeature({site}) ? 'gh-portal-btn-text mt2 mb4' : ''}
                 brandColor={brandColor}
                 label={label}
                 style={{