From 11dcd4c3d5e29e2776f05a2f6dcc739179d54069 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Fri, 3 Jan 2020 14:34:17 -0500
Subject: [PATCH] add currently signed in email to sign out button

---
 ui/component/header/index.js       |  5 +++--
 ui/component/header/view.jsx       | 12 ++++++++----
 ui/scss/component/menu-button.scss |  9 +++++++--
 3 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/ui/component/header/index.js b/ui/component/header/index.js
index 5e0754d86..da1eee65b 100644
--- a/ui/component/header/index.js
+++ b/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),
 });
 
diff --git a/ui/component/header/view.jsx b/ui/component/header/view.jsx
index 4f92db2ec..b81022ad6 100644
--- a/ui/component/header/view.jsx
+++ b/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}>
-                        <Icon aria-hidden icon={ICONS.SIGN_OUT} />
-                        {__('Sign Out')}
+                      <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}`)}>
diff --git a/ui/scss/component/menu-button.scss b/ui/scss/component/menu-button.scss
index a48e0a3f2..ccb82b5d5 100644
--- a/ui/scss/component/menu-button.scss
+++ b/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);