Moved logout to top left

no refs.
- logout button was too prominent so I moved it to the top left as an icon (todo: show tooptip on hover)

ghost/portal/src/App.js

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

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

@@ -251,6 +251,24 @@ const GlobalStyles = `
         padding: 12px;
     }
 
+    .gh-portal-logout-container {
+        position: absolute;
+        top: 8px;
+        left: 8px;
+    }
+
+    .gh-portal-logouticon {
+        color: var(--grey9);
+        cursor: pointer;
+        width: 23px;
+        height: 23px;
+        padding: 12px;
+    }
+
+    .gh-portal-logouticon path {
+        stroke: var(--grey9);
+    }
+
     .gh-portal-header {
         display: flex;
         flex-direction: column;

ghost/portal/src/components/PopupModal.js

@@ -1,5 +1,6 @@
 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';
@@ -47,6 +48,11 @@ class PopupContent extends React.Component {
         this.container = React.createRef();
     }
 
+    handleSignout(e) {
+        e.preventDefault();
+        this.context.onAction('signout');
+    }
+
     renderActivePage() {
         const {page} = this.context;
         getActivePage({page});
@@ -65,6 +71,17 @@ 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});
@@ -74,6 +91,7 @@ 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

@@ -81,16 +81,16 @@ const UserAvatar = ({avatar, brandColor}) => {
     );
 };
 
-const AccountFooter = ({onLogout, onSettings, brandColor}) => {
+const AccountFooter = ({onClose}) => {
     return (
         <footer className='gh-portal-account-footer'>
             <ul className='gh-portal-account-footermenu'>
-                <li><button className='gh-portal-btn gh-portal-btn-branded'>Contact support</button></li>
+                <li><button className='gh-portal-btn'>Contact support</button></li>
             </ul>
             <div className='gh-portal-account-footerright'>
                 <ul className='gh-portal-account-footermenu'>
                     <li>
-                        <button className='gh-portal-btn' onClick={onLogout}>Logout</button>
+                        <button className='gh-portal-btn gh-portal-btn-branded' onClick={onClose}>OK</button>
                     </li>
                 </ul>
             </div>
@@ -111,11 +111,6 @@ const UserHeader = ({member, brandColor}) => {
 class FreeAccountHomePage extends React.Component {
     static contextType = AppContext;
 
-    handleSignout(e) {
-        e.preventDefault();
-        this.context.onAction('signout');
-    }
-
     openSubscribe(e) {
         this.context.onAction('switchPage', {
             page: 'accountPlan',
@@ -192,7 +187,7 @@ class FreeAccountHomePage extends React.Component {
                     <UserHeader member={member} brandColor={brandColor} />
                     {this.renderAccountDetail()}
                 </div>
-                <AccountFooter onLogout={e => this.handleSignout(e)} onSettings={e => this.openSettings(e)} brandColor={brandColor} />
+                <AccountFooter onClose={() => this.context.onAction('closePopup')} />
             </div>
         );
     }
@@ -201,11 +196,6 @@ class FreeAccountHomePage extends React.Component {
 class PaidAccountHomePage extends React.Component {
     static contextType = AppContext;
 
-    handleSignout(e) {
-        e.preventDefault();
-        this.context.onAction('signout');
-    }
-
     renderAccountWelcome() {
         const {name, firstname, email} = this.context.member;
         const siteTitle = this.context.site.title;
@@ -314,7 +304,7 @@ class PaidAccountHomePage extends React.Component {
                     <UserHeader member={member} brandColor={brandColor} />
                     {this.renderAccountDetails()}
                 </div>
-                <AccountFooter onLogout={e => this.handleSignout(e)} brandColor={brandColor} />
+                <AccountFooter onClose={() => this.context.onAction('closePopup')} />
             </div>
         );
     }

ghost/portal/src/images/icons/logout.svg

@@ -0,0 +1 @@
+<svg width="25" height="23" viewBox="0 0 25 23" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M23.497 11.5H7.747M11.497 7.75l-3.75 3.75 3.75 3.75" stroke="#C5C5C5" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M20.94 6.904c-1.031-2.12-2.747-3.83-4.87-4.857-2.123-1.027-4.53-1.308-6.832-.8-2.303.508-4.367 1.776-5.861 3.6-1.494 1.824-2.33 4.098-2.375 6.456-.044 2.358.706 4.661 2.13 6.54 1.425 1.88 3.441 3.224 5.723 3.818 2.282.594 4.698.403 6.857-.543 2.16-.946 3.94-2.592 5.05-4.672" stroke="#C5C5C5" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>