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 (