diff --git a/package.json b/package.json index f02aba86e..16044d5bd 100644 --- a/package.json +++ b/package.json @@ -67,8 +67,7 @@ "@babel/register": "^7.0.0", "@exponent/electron-cookies": "^2.0.0", "@hot-loader/react-dom": "^16.8", - "@lbry/color": "^1.0.2", - "@lbry/components": "^2.7.4", + "@lbry/components": "^2.8.0", "@reach/menu-button": "^0.1.18", "@reach/rect": "^0.2.1", "@reach/tabs": "^0.1.5", diff --git a/src/ui/component/header/view.jsx b/src/ui/component/header/view.jsx index e0bf15763..fefaa6400 100644 --- a/src/ui/component/header/view.jsx +++ b/src/ui/component/header/view.jsx @@ -24,7 +24,7 @@ type Props = { setClientSetting: (string, boolean | string) => void, hideBalance: boolean, email: ?string, - minimal: boolean, + authHeader: boolean, signOut: () => void, }; @@ -37,10 +37,12 @@ const Header = (props: Props) => { automaticDarkModeEnabled, hideBalance, email, - minimal, + authHeader, signOut, } = props; const authenticated = Boolean(email); + const homeButtonNavigationProps = authHeader ? { onClick: signOut } : { navigate: '/' }; + const closeButtonNavigationProps = authHeader ? { onClick: signOut } : { onClick: () => history.goBack() }; function handleThemeToggle() { if (automaticDarkModeEnabled) { @@ -67,7 +69,7 @@ const Header = (props: Props) => { return (
{ className="header__navigation-item header__navigation-item--lbry" label={__('LBRY')} icon={ICONS.LBRY} - navigate="/" + {...homeButtonNavigationProps} /> {/* @if TARGET='app' */} - {!minimal && ( + {!authHeader && (
- {!minimal ? ( + {!authHeader ? (
{!IS_WEB || authenticated ? ( @@ -178,8 +180,11 @@ const Header = (props: Props) => {
) : (
+ {/* Add an empty span here so we can use the same style as above */} + {/* This pushes the close button to the right side */} + -
)} diff --git a/src/ui/component/page/view.jsx b/src/ui/component/page/view.jsx index da65221a1..acb516843 100644 --- a/src/ui/component/page/view.jsx +++ b/src/ui/component/page/view.jsx @@ -10,20 +10,20 @@ type Props = { className: ?string, autoUpdateDownloaded: boolean, isUpgradeAvailable: boolean, - fullscreen: boolean, + authPage: boolean, authenticated: boolean, }; function Page(props: Props) { - const { children, className, fullscreen = false, authenticated } = props; + const { children, className, authPage = false, authenticated } = props; const obscureSideBar = IS_WEB ? !authenticated : false; return ( -
+
-
{children}
- {!fullscreen && } +
{children}
+ {!authPage && }
); diff --git a/src/ui/component/syncPassword/index.js b/src/ui/component/syncPassword/index.js index d65ccc231..4f969c492 100644 --- a/src/ui/component/syncPassword/index.js +++ b/src/ui/component/syncPassword/index.js @@ -1,6 +1,7 @@ import { connect } from 'react-redux'; import { doGetSync, selectGetSyncIsPending, selectUserEmail } from 'lbryinc'; import { doSetClientSetting } from 'redux/actions/settings'; +import { doSignOut } from 'redux/actions/app'; import SyncPassword from './view'; const select = state => ({ @@ -11,6 +12,7 @@ const select = state => ({ const perform = dispatch => ({ getSync: password => dispatch(doGetSync(password)), setClientSetting: (key, value) => dispatch(doSetClientSetting(key, value)), + signOut: () => dispatch(doSignOut()), }); export default connect( diff --git a/src/ui/component/syncPassword/view.jsx b/src/ui/component/syncPassword/view.jsx index 42e16ed10..d664994b6 100644 --- a/src/ui/component/syncPassword/view.jsx +++ b/src/ui/component/syncPassword/view.jsx @@ -5,15 +5,17 @@ import Button from 'component/button'; import Card from 'component/common/card'; import { setSavedPassword } from 'util/saved-passwords'; import usePersistedState from 'effects/use-persisted-state'; +import I18nMessage from 'component/i18nMessage'; type Props = { getSync: (?string) => void, getSyncIsPending: boolean, email: string, + signOut: () => void, }; function SyncPassword(props: Props) { - const { getSync, getSyncIsPending, email } = props; + const { getSync, getSyncIsPending, email, signOut } = props; const [password, setPassword] = React.useState(''); const [rememberPassword, setRememberPassword] = usePersistedState(true); @@ -25,7 +27,7 @@ function SyncPassword(props: Props) { return (
+

+ , + email: