add currently signed in email to sign out button

ui/component/header/index.js

@@ -2,7 +2,7 @@ import * as SETTINGS from 'constants/settings';
 import * as MODALS from 'constants/modal_types';
 import { connect } from 'react-redux';
 import { selectBalance, formatCredits } from 'lbry-redux';
-import { selectUserVerifiedEmail, selectGetSyncErrorMessage } from 'lbryinc';
+import { selectUserVerifiedEmail, selectGetSyncErrorMessage, selectUserEmail } from 'lbryinc';
 import { doSetClientSetting } from 'redux/actions/settings';
 import { doSignOut, doOpenModal } from 'redux/actions/app';
 import { makeSelectClientSetting } from 'redux/selectors/settings';
@@ -15,7 +15,8 @@ const select = state => ({
   currentTheme: makeSelectClientSetting(SETTINGS.THEME)(state),
   automaticDarkModeEnabled: makeSelectClientSetting(SETTINGS.AUTOMATIC_DARK_MODE_ENABLED)(state),
   hideBalance: makeSelectClientSetting(SETTINGS.HIDE_BALANCE)(state),
-  email: selectUserVerifiedEmail(state),
+  authenticated: selectUserVerifiedEmail(state),
+  email: selectUserEmail(state),
   syncError: selectGetSyncErrorMessage(state),
 });
 

ui/component/header/view.jsx

@@ -24,6 +24,7 @@ type Props = {
   setClientSetting: (string, boolean | string) => void,
   hideBalance: boolean,
   email: ?string,
+  authenticated: boolean,
   authHeader: boolean,
   syncError: ?string,
   signOut: () => void,
@@ -40,13 +41,13 @@ const Header = (props: Props) => {
     automaticDarkModeEnabled,
     hideBalance,
     email,
+    authenticated,
     authHeader,
     signOut,
     syncError,
     openMobileNavigation,
     openChannelCreate,
   } = props;
-  const authenticated = Boolean(email);
 
   // on the verify page don't let anyone escape other than by closing the tab to keep session data consistent
   const isVerifyPage = history.location.pathname.includes(PAGES.AUTH_VERIFY);
@@ -188,9 +189,12 @@ const Header = (props: Props) => {
                     </MenuItem> */}
 
                     {authenticated ? (
-                      <MenuItem className="menu__link" onSelect={signOut}>
+                      <MenuItem onSelect={signOut}>
+                        <div className="menu__link">
                           <Icon aria-hidden icon={ICONS.SIGN_OUT} />
                           {__('Sign Out')}
+                        </div>
+                        <span className="menu__link-help">{email}</span>
                       </MenuItem>
                     ) : (
                       <MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.AUTH}`)}>

ui/scss/component/menu-button.scss

@@ -62,15 +62,20 @@
   align-items: center;
   padding: var(--spacing-medium);
   padding-right: var(--spacing-large);
-}
 
-.menu__link {
   .icon {
     stroke: var(--color-menu-icon);
     margin-right: var(--spacing-small);
   }
 }
 
+.menu__link-help {
+  @extend .menu__link;
+  color: var(--color-text-help);
+  font-size: var(--font-small);
+  padding-top: 0;
+}
+
 .menu__title {
   span {
     margin-left: var(--spacing-miniscule);