From 306e13cf449af367dd7de463e22c6b94e4252db9 Mon Sep 17 00:00:00 2001
From: Peter Zimon <zimo@ghost.org>
Date: Tue, 22 Sep 2020 16:21:15 +0200
Subject: [PATCH] Repositioned popup close button

no refs.
- added CloseButton component to be able to use it in multiple pages
- moved close button inside content container so that it scrolls with the page on smaller screen sizes
---
 ghost/portal/src/App.js                        |  4 ++--
 ghost/portal/src/components/Frame.styles.js    |  1 +
 ghost/portal/src/components/PopupModal.js      | 18 ------------------
 .../src/components/common/CloseButton.js       | 14 ++++++++++++++
 .../src/components/pages/AccountHomePage.js    |  2 ++
 .../src/components/pages/AccountPlanPage.js    |  2 ++
 .../src/components/pages/AccountProfilePage.js |  2 ++
 .../src/components/pages/MagicLinkPage.js      |  2 ++
 .../portal/src/components/pages/SigninPage.js  |  2 ++
 .../portal/src/components/pages/SignupPage.js  |  3 +++
 10 files changed, 30 insertions(+), 20 deletions(-)
 create mode 100644 ghost/portal/src/components/common/CloseButton.js

diff --git a/ghost/portal/src/App.js b/ghost/portal/src/App.js
index 1d1aab6ba4..f32671cf31 100644
--- a/ghost/portal/src/App.js
+++ b/ghost/portal/src/App.js
@@ -15,7 +15,7 @@ const DEV_MODE_DATA = {
     showNotification: true,
     site: Fixtures.site,
     member: Fixtures.member.paid,
-    page: 'signup'
+    page: 'accountHome'
 };
 export default class App extends React.Component {
     constructor(props) {
@@ -374,7 +374,7 @@ export default class App extends React.Component {
                 <AppContext.Provider value={this.getContextFromState()}>
                     <PopupModal />
                     <TriggerButton />
-                    <Notification />
+                    {/* <Notification /> */}
                 </AppContext.Provider>
             );
         }
diff --git a/ghost/portal/src/components/Frame.styles.js b/ghost/portal/src/components/Frame.styles.js
index edea8b7c11..152f29da62 100644
--- a/ghost/portal/src/components/Frame.styles.js
+++ b/ghost/portal/src/components/Frame.styles.js
@@ -269,6 +269,7 @@ const FrameStyles = `
     /* 12vw is the sum horizontal padding of the popup container 
     */
     .gh-portal-content {
+        position: relative;
         overflow-y: scroll;
         padding: 28px 32px 32px;
         max-height: calc(100vh - 12vw);
diff --git a/ghost/portal/src/components/PopupModal.js b/ghost/portal/src/components/PopupModal.js
index da7e97237f..c1b0c95d27 100644
--- a/ghost/portal/src/components/PopupModal.js
+++ b/ghost/portal/src/components/PopupModal.js
@@ -1,5 +1,4 @@
 import Frame from './Frame';
-import {ReactComponent as CloseIcon} from '../images/icons/close.svg';
 import {hasMode} from '../utils/check-mode';
 import AppContext from '../AppContext';
 import FrameStyle from './Frame.styles';
@@ -72,14 +71,6 @@ class PopupContent extends React.Component {
         );
     }
 
-    renderPopupClose() {
-        return (
-            <div className='gh-portal-closeicon-container'>
-                <CloseIcon className='gh-portal-closeicon' alt='Close' onClick = {() => this.context.onAction('closePopup')} />
-            </div>
-        );
-    }
-
     render() {
         const {page, site} = this.context;
         const {portal_plans: portalPlans} = site;
@@ -98,7 +89,6 @@ class PopupContent extends React.Component {
         return (
             <div className='gh-portal-popup-wrapper'>
                 <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>
             </div>
@@ -128,14 +118,6 @@ export default class PopupModal extends React.Component {
         this.setState({height});
     }
 
-    renderPopupClose() {
-        return (
-            <div className='gh-portal-closeicon-container'>
-                <CloseIcon className='gh-portal-closeicon' onClick = {() => this.context.onAction('closePopup')} />
-            </div>
-        );
-    }
-
     handlePopupClose(e) {
         e.preventDefault();
         if (e.target === e.currentTarget) {
diff --git a/ghost/portal/src/components/common/CloseButton.js b/ghost/portal/src/components/common/CloseButton.js
new file mode 100644
index 0000000000..ecd6927e63
--- /dev/null
+++ b/ghost/portal/src/components/common/CloseButton.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import AppContext from '../../AppContext';
+import {ReactComponent as CloseIcon} from '../../images/icons/close.svg';
+
+export default class CloseButton extends React.Component {
+    static contextType = AppContext;
+    render() {
+        return (
+            <div className='gh-portal-closeicon-container'>
+                <CloseIcon className='gh-portal-closeicon' alt='Close' onClick = {() => this.context.onAction('closePopup')} />
+            </div>
+        );
+    }
+}
\ No newline at end of file
diff --git a/ghost/portal/src/components/pages/AccountHomePage.js b/ghost/portal/src/components/pages/AccountHomePage.js
index cbc5905cb3..4151af29ea 100644
--- a/ghost/portal/src/components/pages/AccountHomePage.js
+++ b/ghost/portal/src/components/pages/AccountHomePage.js
@@ -1,6 +1,7 @@
 import AppContext from '../../AppContext';
 import MemberAvatar from '../common/MemberGravatar';
 import ActionButton from '../common/ActionButton';
+import CloseButton from '../common/CloseButton';
 import Switch from '../common/Switch';
 import {getMemberSubscription, hasOnlyFreePlan, isComplimentaryMember} from '../../utils/helpers';
 import {getDateString} from '../../utils/date-time';
@@ -323,6 +324,7 @@ const CancelContinueSubscription = ({member, onAction, action, brandColor, showO
 const AccountMain = ({member, site, onAction, action, openSubscribe, brandColor, openEditProfile, openUpdatePlan, onEditBilling, onToggleSubscription}) => {
     return (
         <div className='gh-portal-content gh-portal-account-main'>
+            <CloseButton />
             <UserHeader member={member} brandColor={brandColor} />
             <section className='gh-portal-account-data'>
                 <AccountWelcome action={action} member={member} site={site} openSubscribe={e => openSubscribe(e)} brandColor={brandColor} />
diff --git a/ghost/portal/src/components/pages/AccountPlanPage.js b/ghost/portal/src/components/pages/AccountPlanPage.js
index 1a5cf737a9..d4d634bde9 100644
--- a/ghost/portal/src/components/pages/AccountPlanPage.js
+++ b/ghost/portal/src/components/pages/AccountPlanPage.js
@@ -1,5 +1,6 @@
 import AppContext from '../../AppContext';
 import ActionButton from '../common/ActionButton';
+import CloseButton from '../common/CloseButton';
 import BackButton from '../common/BackButton';
 import PlansSection from '../common/PlansSection';
 import {getDateString} from '../../utils/date-time';
@@ -383,6 +384,7 @@ export default class AccountPlanPage extends React.Component {
         return (
             <>
                 <div className='gh-portal-content'>
+                    <CloseButton />
                     <Header
                         lastPage={lastPage}
                         member={member} brandColor={brandColor} onBack={e => this.onBack(e)}
diff --git a/ghost/portal/src/components/pages/AccountProfilePage.js b/ghost/portal/src/components/pages/AccountProfilePage.js
index 234a543924..b58be803ec 100644
--- a/ghost/portal/src/components/pages/AccountProfilePage.js
+++ b/ghost/portal/src/components/pages/AccountProfilePage.js
@@ -1,6 +1,7 @@
 import AppContext from '../../AppContext';
 import MemberAvatar from '../common/MemberGravatar';
 import ActionButton from '../common/ActionButton';
+import CloseButton from '../common/CloseButton';
 import BackButton from '../common/BackButton';
 import InputForm from '../common/InputForm';
 import {ValidateInputForm} from '../../utils/form';
@@ -197,6 +198,7 @@ export default class AccountProfilePage extends React.Component {
         return (
             <>
                 <div className='gh-portal-content with-footer'>
+                    <CloseButton />
                     {this.renderHeader()}
                     <div className='gh-portal-section'>
                         {this.renderProfileData()}
diff --git a/ghost/portal/src/components/pages/MagicLinkPage.js b/ghost/portal/src/components/pages/MagicLinkPage.js
index aedd4d4ec3..c01177f3de 100644
--- a/ghost/portal/src/components/pages/MagicLinkPage.js
+++ b/ghost/portal/src/components/pages/MagicLinkPage.js
@@ -1,4 +1,5 @@
 import ActionButton from '../common/ActionButton';
+import CloseButton from '../common/CloseButton';
 import AppContext from '../../AppContext';
 import {ReactComponent as EnvelopeIcon} from '../../images/icons/envelope.svg';
 
@@ -69,6 +70,7 @@ export default class MagicLinkPage extends React.Component {
     render() {
         return (
             <div className='gh-portal-content'>
+                <CloseButton />
                 {this.renderFormHeader()}
                 {this.renderCloseButton()}
             </div>
diff --git a/ghost/portal/src/components/pages/SigninPage.js b/ghost/portal/src/components/pages/SigninPage.js
index 34070eba79..2c7aa7e6ff 100644
--- a/ghost/portal/src/components/pages/SigninPage.js
+++ b/ghost/portal/src/components/pages/SigninPage.js
@@ -1,4 +1,5 @@
 import ActionButton from '../common/ActionButton';
+import CloseButton from '../common/CloseButton';
 import AppContext from '../../AppContext';
 import InputForm from '../common/InputForm';
 import {ValidateInputForm} from '../../utils/form';
@@ -139,6 +140,7 @@ export default class SigninPage extends React.Component {
         return (
             <>
                 <div className='gh-portal-content signin'>
+                    <CloseButton />
                     {this.renderFormHeader()}
                     {this.renderForm()}
                 </div>
diff --git a/ghost/portal/src/components/pages/SignupPage.js b/ghost/portal/src/components/pages/SignupPage.js
index 29e2795471..97bd576d66 100644
--- a/ghost/portal/src/components/pages/SignupPage.js
+++ b/ghost/portal/src/components/pages/SignupPage.js
@@ -1,10 +1,12 @@
 import ActionButton from '../common/ActionButton';
+import CloseButton from '../common/CloseButton';
 import AppContext from '../../AppContext';
 import PlansSection from '../common/PlansSection';
 import InputForm from '../common/InputForm';
 import {ValidateInputForm} from '../../utils/form';
 import CalculateDiscount from '../../utils/discount';
 import {getSitePlans, hasOnlyFreePlan} from '../../utils/helpers';
+// import {ReactComponent as CloseIcon} from '../../images/icons/close.svg';
 
 const React = require('react');
 
@@ -416,6 +418,7 @@ class SignupPage extends React.Component {
         return (
             <>
                 <div className={'gh-portal-content signup ' + sectionClass}>
+                    <CloseButton />
                     {this.renderFormHeader()}
                     {this.renderForm()}
                 </div>