Moved logout to account home page

no refs.
- moved logout back to account home as that's the only place it's used
- removed "Settings" button from tests

ghost/portal/src/App.js

@@ -143,7 +143,7 @@ export default class App extends React.Component {
                 showPopup: true,
                 site: Fixtures.site,
                 member: Fixtures.member.paid,
-                page: 'signup'
+                page: 'accountHome'
             };
         }
         return {};

ghost/portal/src/components/Frame.styles.js

@@ -241,6 +241,7 @@ const GlobalStyles = `
         position: absolute;
         top: 8px;
         right: 8px;
+        z-index: 999;
     }
 
     .gh-portal-closeicon {
@@ -262,7 +263,7 @@ const GlobalStyles = `
         cursor: pointer;
         width: 23px;
         height: 23px;
-        padding: 12px;
+        padding: 6px
     }
 
     .gh-portal-logouticon path {
@@ -370,6 +371,32 @@ const GlobalStyles = `
         opacity: 0.75;
     }
 
+    .gh-portal-btn-logout {
+        position: absolute;
+        top: 15px;
+        left: 16px;
+        background: none;
+        border: none;
+        height: unset;
+        padding: 0;
+        margin: 0;
+        z-index: 999;
+        box-shadow: none;
+    }
+
+    .gh-portal-btn-logout .label {
+        opacity: 0;
+    }
+
+    .gh-portal-btn-logout:hover {
+        padding: 0;
+        margin: 0;
+        background: none;
+        border: none;
+        height: unset;
+        box-shadow: none;
+    }
+
     /* Icons
     /* ----------------------------------------------------- */
     .gh-portal-icon {

ghost/portal/src/components/PopupModal.js

@@ -1,6 +1,5 @@
 import Frame from './Frame';
 import {ReactComponent as CloseIcon} from '../images/icons/close.svg';
-import {ReactComponent as LogoutIcon} from '../images/icons/logout.svg';
 import {hasMode} from '../utils/check-mode';
 import AppContext from '../AppContext';
 import FrameStyle from './Frame.styles';
@@ -48,11 +47,6 @@ class PopupContent extends React.Component {
         this.container = React.createRef();
     }
 
-    handleSignout(e) {
-        e.preventDefault();
-        this.context.onAction('signout');
-    }
-
     renderActivePage() {
         const {page} = this.context;
         getActivePage({page});
@@ -71,17 +65,6 @@ class PopupContent extends React.Component {
         );
     }
 
-    renderLogout() {
-        if (!this.context.member) {
-            return null;
-        }
-        return (
-            <div className='gh-portal-logout-container'>
-                <LogoutIcon className='gh-portal-logouticon' onClick = {e => this.handleSignout(e)} />
-            </div>
-        );
-    }
-
     render() {
         const {page} = this.context;
         getActivePage({page});
@@ -91,7 +74,6 @@ class PopupContent extends React.Component {
         };
         return (
             <div className={hasMode(['preview', 'dev']) ? 'gh-portal-popup-container preview' : 'gh-portal-popup-container'} style={pageStyle} ref={this.container}>
-                {this.renderLogout()}
                 {this.renderPopupClose()}
                 {this.renderActivePage()}
             </div>

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

@@ -1,4 +1,5 @@
 import AppContext from '../../AppContext';
+import {ReactComponent as LogoutIcon} from '../../images/icons/logout.svg';
 import MemberAvatar from '../common/MemberGravatar';
 import ActionButton from '../common/ActionButton';
 import Switch from '../common/Switch';
@@ -6,6 +7,10 @@ import Switch from '../common/Switch';
 const React = require('react');
 
 export const AccountHomePageStyles = `
+    .gh-portal-account-wrapper {
+
+    }
+
     .gh-portal-account-main {
         background: var(--grey13);
         border-bottom: 1px solid #eaeaea;
@@ -141,6 +146,17 @@ class FreeAccountHomePage extends React.Component {
         this.context.onAction('updateMember', {subscribed: !subscribed});
     }
 
+    handleSignout(e) {
+        e.preventDefault();
+        this.context.onAction('signout');
+    }
+
+    renderLogout() {
+        return (
+            <button className='gh-portal-btn gh-portal-btn-logout' name='logout' onClick = {e => this.handleSignout(e)}><LogoutIcon className='gh-portal-logouticon' /><span className='label'>Logout</span></button>
+        );
+    }
+
     renderAccountDetail(e) {
         const {name, firstname, email, subscribed} = this.context.member;
         const {title: siteTitle} = this.context.site;
@@ -182,7 +198,8 @@ class FreeAccountHomePage extends React.Component {
     render() {
         const {member, brandColor} = this.context;
         return (
-            <div>
+            <div className='gh-portal-account-wrapper'>
+                {this.renderLogout()}
                 <div className='gh-portal-account-main'>
                     <UserHeader member={member} brandColor={brandColor} />
                     {this.renderAccountDetail()}
@@ -246,6 +263,17 @@ class PaidAccountHomePage extends React.Component {
         this.context.onAction('updateMember', {subscribed: !subscribed});
     }
 
+    handleSignout(e) {
+        e.preventDefault();
+        this.context.onAction('signout');
+    }
+
+    renderLogout() {
+        return (
+            <button className='gh-portal-btn gh-portal-btn-logout' name='logout' onClick = {e => this.handleSignout(e)}><LogoutIcon className='gh-portal-logouticon' /><span className='label'>Logout</span></button>
+        );
+    }
+
     renderAccountDetails() {
         const {name, email, subscriptions, subscribed} = this.context.member;
 
@@ -299,7 +327,8 @@ class PaidAccountHomePage extends React.Component {
     render() {
         const {member, brandColor} = this.context;
         return (
-            <div>
+            <div className='gh-portal-account-wrapper'>
+                {this.renderLogout()}
                 <div className='gh-portal-account-main'>
                     <UserHeader member={member} brandColor={brandColor} />
                     {this.renderAccountDetails()}

ghost/portal/src/components/pages/AccountHomePage.test.js

@@ -7,10 +7,8 @@ const setup = (overrides) => {
         <AccountHomePage />
     );
     const logoutBtn = utils.queryByRole('button', {name: 'Logout'});
-    const settingsBtn = utils.queryByRole('button', {name: 'Settings'});
     return {
         logoutBtn,
-        settingsBtn,
         mockOnActionFn,
         ...utils
     };
@@ -18,9 +16,7 @@ const setup = (overrides) => {
 
 describe('Account Home Page', () => {
     test('renders', () => {
-        const {settingsBtn, logoutBtn} = setup();
-
-        expect(settingsBtn).toBeInTheDocument();
+        const {logoutBtn} = setup();
         expect(logoutBtn).toBeInTheDocument();
     });