diff --git a/ghost/portal/src/App.js b/ghost/portal/src/App.js
index 616284bd15..25fed99dcf 100644
--- a/ghost/portal/src/App.js
+++ b/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 {};
diff --git a/ghost/portal/src/components/Frame.styles.js b/ghost/portal/src/components/Frame.styles.js
index ea7da47c59..066f532bcb 100644
--- a/ghost/portal/src/components/Frame.styles.js
+++ b/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;
diff --git a/ghost/portal/src/components/PopupModal.js b/ghost/portal/src/components/PopupModal.js
index e2f78c19c0..9a41230eb2 100644
--- a/ghost/portal/src/components/PopupModal.js
+++ b/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 (
+
+ this.handleSignout(e)} />
+
+ );
+ }
+
render() {
const {page} = this.context;
getActivePage({page});
@@ -74,6 +91,7 @@ class PopupContent extends React.Component {
};
return (
+ {this.renderLogout()}
{this.renderPopupClose()}
{this.renderActivePage()}
diff --git a/ghost/portal/src/components/pages/AccountHomePage.js b/ghost/portal/src/components/pages/AccountHomePage.js
index 7b92b35039..016e96bb5c 100644
--- a/ghost/portal/src/components/pages/AccountHomePage.js
+++ b/ghost/portal/src/components/pages/AccountHomePage.js
@@ -81,16 +81,16 @@ const UserAvatar = ({avatar, brandColor}) => {
);
};
-const AccountFooter = ({onLogout, onSettings, brandColor}) => {
+const AccountFooter = ({onClose}) => {
return (