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

@@ -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>
             );
         }

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);

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

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>
+        );
+    }
+}

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} />

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

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

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>

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>

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>