From 533b3fcbbb11d71564e90021d0f86fe6cc8045ff Mon Sep 17 00:00:00 2001
From: Peter Zimon <zimo@ghost.org>
Date: Tue, 15 Sep 2020 12:22:13 +0200
Subject: [PATCH] Added dynamic popup width

no refs.
- set popup width for signup and signin pages based on the number of plans
---
 ghost/portal/src/App.js                     |  2 +-
 ghost/portal/src/components/Frame.styles.js | 11 +++++++----
 ghost/portal/src/components/PopupModal.js   |  9 ++++++++-
 ghost/portal/src/utils/fixtures.js          |  2 +-
 4 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/ghost/portal/src/App.js b/ghost/portal/src/App.js
index 20c778de85..e356da0a37 100644
--- a/ghost/portal/src/App.js
+++ b/ghost/portal/src/App.js
@@ -13,7 +13,7 @@ const DEV_MODE_DATA = {
     showPopup: true,
     site: Fixtures.site,
     member: Fixtures.member.paid,
-    page: 'accountHome'
+    page: 'signup'
 };
 export default class App extends React.Component {
     constructor(props) {
diff --git a/ghost/portal/src/components/Frame.styles.js b/ghost/portal/src/components/Frame.styles.js
index 17ed77af00..bc246b15df 100644
--- a/ghost/portal/src/components/Frame.styles.js
+++ b/ghost/portal/src/components/Frame.styles.js
@@ -325,16 +325,19 @@ const GlobalStyles = `
         letter-spacing: 0;
         text-rendering: optimizeLegibility;
         background: var(--white);
-        width: 440px;
-        /*max-height: calc(100vh - 12vw);*/
+        width: 400px;
         margin: 0 auto;
         border-radius: 5px;
         box-shadow: 0 3.8px 2.2px rgba(0, 0, 0, 0.028), 0 9.2px 5.3px rgba(0, 0, 0, 0.04), 0 17.3px 10px rgba(0, 0, 0, 0.05), 0 30.8px 17.9px rgba(0, 0, 0, 0.06), 0 57.7px 33.4px rgba(0, 0, 0, 0.072), 0 138px 80px rgba(0, 0, 0, 0.1);
         animation: popup 0.25s ease-in-out;
     }
 
-    .gh-portal-container-singleplan {
-        width: 390px;
+    .gh-portal-container-wide {
+        width: 440px;
+    }
+
+    .gh-portal-container-narrow {
+        width: 380px;
     }
 
     .gh-portal-popup-container.preview {
diff --git a/ghost/portal/src/components/PopupModal.js b/ghost/portal/src/components/PopupModal.js
index 69e0b69b5b..da7e97237f 100644
--- a/ghost/portal/src/components/PopupModal.js
+++ b/ghost/portal/src/components/PopupModal.js
@@ -88,9 +88,16 @@ class PopupContent extends React.Component {
         const pageStyle = {
             ...Styles.page[page]
         };
+        let popupWidthStyle = '';
+        if (portalPlans.length === 3 && (page === 'signup' || page === 'signin')) {
+            popupWidthStyle = 'gh-portal-container-wide';
+        }
+        if (portalPlans.length <= 1) {
+            popupWidthStyle = 'gh-portal-container-narrow';
+        }
         return (
             <div className='gh-portal-popup-wrapper'>
-                <div className={(hasMode(['preview', 'dev']) ? 'gh-portal-popup-container preview' : 'gh-portal-popup-container') + (portalPlans.length <= 1 ? ' gh-portal-container-singleplan' : '')} style={pageStyle} ref={node => (this.node = node)} tabIndex="-1">
+                <div className={(hasMode(['preview', 'dev']) ? 'gh-portal-popup-container preview' : 'gh-portal-popup-container') + ' ' + popupWidthStyle} style={pageStyle} ref={node => (this.node = node)} tabIndex="-1">
                     {this.renderPopupClose()}
                     {this.renderActivePage()}
                 </div>
diff --git a/ghost/portal/src/utils/fixtures.js b/ghost/portal/src/utils/fixtures.js
index 0ca581c4b7..dbcc9faef6 100644
--- a/ghost/portal/src/utils/fixtures.js
+++ b/ghost/portal/src/utils/fixtures.js
@@ -15,7 +15,7 @@ export const site = {
     is_stripe_configured: true,
     portal_button: true,
     portal_name: true,
-    portal_plans: ['free', 'monthly', 'yearly'],
+    portal_plans: ['free'],
     portal_button_icon: 'icon-1',
     portal_button_signup_text: 'Subscribe now',
     portal_button_style: 'icon-and-text',