Fix header profile button for no channels, use it as an icon for mobile unath instead of big login/signup buttons

ui/component/header/view.jsx

@@ -158,13 +158,13 @@ const Header = (props: Props) => {
 
           {!hideProfile && <HeaderProfileMenuButton />}
         </>
-      ) : (
+      ) : !isMobile ? (
         <div className="header__authButtons">
-          {!isMobile && (
           <Button navigate={`/$/${PAGES.AUTH_SIGNIN}`} button="link" label={__('Log In')} disabled={user === null} />
-          )}
           <Button navigate={`/$/${PAGES.AUTH}`} button="primary" label={__('Sign Up')} disabled={user === null} />
         </div>
+      ) : (
+        <HeaderProfileMenuButton />
       )}
     </div>
   );

ui/component/headerProfileMenuButton/view.jsx

@@ -45,6 +45,8 @@ export default function HeaderProfileMenuButton(props: HeaderMenuButtonProps) {
         )}
 
         <MenuList className="menu__list--header">
+          {email ? (
+            <>
               <HeaderMenuLink page={PAGES.UPLOADS} icon={ICONS.PUBLISH} name={__('Uploads')} />
               <HeaderMenuLink page={PAGES.CHANNELS} icon={ICONS.CHANNEL} name={__('Channels')} />
               <HeaderMenuLink page={PAGES.CREATOR_DASHBOARD} icon={ICONS.ANALYTICS} name={__('Creator Analytics')} />
@@ -58,6 +60,15 @@ export default function HeaderProfileMenuButton(props: HeaderMenuButtonProps) {
                 </div>
                 <span className="menu__link-help">{email}</span>
               </MenuItem>
+            </>
+          ) : (
+            <>
+              <HeaderMenuLink page={PAGES.AUTH_SIGNIN} icon={ICONS.SIGN_IN} name={__('Log In')} />
+              <HeaderMenuLink page={PAGES.AUTH} icon={ICONS.SIGN_UP} name={__('Sign Up')} />
+              <HeaderMenuLink page={PAGES.SETTINGS} icon={ICONS.SETTINGS} name={__('Settings')} />
+              <HeaderMenuLink page={PAGES.HELP} icon={ICONS.HELP} name={__('Help')} />
+            </>
+          )}
         </MenuList>
       </Menu>
     </div>

ui/redux/selectors/app.js

@@ -1,5 +1,6 @@
 import { createSelector } from 'reselect';
 import { selectClaimWithId, selectMyChannelClaims, selectStakedLevelForChannelUri } from 'redux/selectors/claims';
+import { selectUserEmail } from 'redux/selectors/user';
 
 export const selectState = (state) => state.app || {};
 
@@ -66,15 +67,17 @@ export const selectActiveChannelId = (state) => selectState(state).activeChannel
 
 export const selectActiveChannelClaim = createSelector(
   (state) => selectClaimWithId(state, selectActiveChannelId(state)), // i.e. 'byId[activeChannelId]' specifically, instead of just 'byId'.
+  (state) => selectUserEmail(state),
   selectMyChannelClaims,
-  (activeChannelClaim, myChannelClaims) => {
-    if (!activeChannelClaim || !myChannelClaims || !myChannelClaims.length) {
+  (activeChannelClaim, userEmail, myChannelClaims) => {
+    // Null: has none. Undefined: not resolved, default state, could have or not
+    if (!userEmail || myChannelClaims === null) {
+      return null;
+    } else if (!activeChannelClaim || !myChannelClaims || !myChannelClaims.length) {
       return undefined;
     }
 
-    if (activeChannelClaim) {
-      return activeChannelClaim;
-    }
+    if (activeChannelClaim) return activeChannelClaim;
 
     const myChannelClaimsByEffectiveAmount = myChannelClaims.slice().sort((a, b) => {
       const effectiveAmountA = (a.meta && Number(a.meta.effective_amount)) || 0;