Refactor and split Header CSS

ui/component/header/view.jsx

@@ -1,4 +1,6 @@
 // @flow
+import 'scss/component/_header.scss';
+
 import { useIsMobile } from 'effects/use-screensize';
 import { withRouter } from 'react-router';
 import * as ICONS from 'constants/icons';
@@ -121,38 +123,38 @@ const Header = (props: Props) => {
     }
   }, [canBackout, onBackout]);
 
-  const userButtons = (className: string) => (
-    <div className={classnames('header__menu', { 'header__menu--with-balance': authenticated })}>
+  const userButtons = (hideWallet?: boolean, hideProfile?: boolean) => (
+    <div className="header__menu--right">
+      {isMobile && !authHeader && !canBackout && <WunderBar />}
+
       {authenticated ? (
         <>
-          <Tooltip
-            title={
-              balance > 0
-                ? __('Immediately spendable: %spendable_balance%', { spendable_balance: roundedSpendableBalance })
-                : __('Your Wallet')
-            }
-          >
-            <div>
-              <Button
-                navigate={`/$/${PAGES.WALLET}`}
-                className={classnames(className, 'header__navigation-item--balance')}
-                label={hideBalance || Number(roundedBalance) === 0 ? __('Your Wallet') : roundedBalance}
-                icon={ICONS.LBC}
-              />
-            </div>
-          </Tooltip>
+          {!hideWallet && (
+            <Tooltip
+              title={
+                balance > 0
+                  ? __('Immediately spendable: %spendable_balance%', { spendable_balance: roundedSpendableBalance })
+                  : __('Your Wallet')
+              }
+            >
+              <div>
+                <Button
+                  navigate={`/$/${PAGES.WALLET}`}
+                  className="button--file-action header__navigationItem--balance"
+                  label={hideBalance || Number(roundedBalance) === 0 ? __('Your Wallet') : roundedBalance}
+                  icon={ICONS.LBC}
+                />
+              </div>
+            </Tooltip>
+          )}
 
-          <HeaderProfileMenuButton />
+          {!hideProfile && <HeaderProfileMenuButton />}
         </>
       ) : (
-        <div className="header__auth-buttons">
-          <Button
-            navigate={`/$/${PAGES.AUTH_SIGNIN}`}
-            button="link"
-            label={__('Log In')}
-            className="mobile-hidden"
-            disabled={user === null}
-          />
+        <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>
       )}
@@ -161,25 +163,27 @@ const Header = (props: Props) => {
 
   return (
     <header className={classnames('header', { 'header--minimal': authHeader })}>
-      <div className="header__contents">
-        {!authHeader && canBackout ? (
-          <div className="card__actions--between">
+      {!authHeader && canBackout ? (
+        <div className="card__actions--between header__contents">
+          <div className="header__menu--left">
             <Button onClick={onBackout} button="link" label={backLabel || __('Cancel')} icon={ICONS.ARROW_LEFT} />
-
-            {backTitle && <h1 className="header__auth-title">{(isMobile && simpleBackTitle) || backTitle}</h1>}
-
-            {userButtons('header__navigation-item menu__title')}
           </div>
-        ) : (
-          <>
-            <div className="header__navigation">
+
+          {backTitle && <h1 className="header__authTitle">{(isMobile && simpleBackTitle) || backTitle}</h1>}
+
+          {userButtons(false, isMobile)}
+        </div>
+      ) : (
+        <>
+          <div className="header__navigation">
+            <div className="header__menu--left">
               <SkipNavigationButton />
 
               {!authHeader && (
                 <span style={{ position: 'relative' }}>
                   <Button
                     aria-label={sidebarLabel}
-                    className="header__navigation-item menu__title header__navigation-item--icon"
+                    className="header__navigationItem--icon"
                     icon={ICONS.MENU}
                     aria-expanded={sidebarOpen}
                     onClick={() => setSidebarOpen(!sidebarOpen)}
@@ -191,7 +195,7 @@ const Header = (props: Props) => {
 
               <Button
                 aria-label={__('Home')}
-                className="header__navigation-item header__navigation-item--lbry"
+                className="header__navigationItem--logo"
                 onClick={() => pathname === '/' && window.location.reload()}
                 {...homeButtonNavigationProps}
               >
@@ -217,24 +221,20 @@ const Header = (props: Props) => {
                 />
               )}
               {/* @endif */}
-
-              {!authHeader && (
-                <div className="header__center">
-                  <WunderBar />
-                  <HeaderMenuButtons />
-                </div>
-              )}
             </div>
 
+            {!authHeader && !isMobile && (
+              <div className="header__center">
+                <WunderBar />
+                <HeaderMenuButtons />
+              </div>
+            )}
+
             {!authHeader && !canBackout
-              ? userButtons('header__navigation-item menu__title mobile-hidden')
+              ? userButtons(isMobile)
               : !isVerifyPage &&
                 !hideCancel && (
-                  <div className="header__menu">
-                    {/* Add an empty span here so we can use the same style as above */}
-                    {/* This pushes the close button to the right side */}
-                    <span />
-
+                  <div className="header__menu--right">
                     <Button
                       title={__('Go Back')}
                       button="alt"
@@ -255,9 +255,9 @@ const Header = (props: Props) => {
                     />
                   </div>
                 )}
-          </>
-        )}
-      </div>
+          </div>
+        </>
+      )}
     </header>
   );
 };

ui/component/headerMenuButtons/view.jsx

@@ -1,4 +1,6 @@
 // @flow
+import 'scss/component/_header.scss';
+
 import { ENABLE_UI_NOTIFICATIONS, ENABLE_NO_SOURCE_CLAIMS, CHANNEL_STAKED_LEVEL_LIVESTREAM } from 'config';
 import { Menu, MenuList, MenuButton, MenuItem } from '@reach/menu-button';
 import * as ICONS from 'constants/icons';
@@ -41,7 +43,7 @@ export default function HeaderMenuButtons(props: HeaderMenuButtonProps) {
       {authenticated && (
         <Menu>
           <Tooltip title={__('Publish a file, or create a channel')}>
-            <MenuButton className="header__navigation-item menu__title header__navigation-item--icon mobile-hidden">
+            <MenuButton className="header__navigationItem--icon">
               <Icon size={18} icon={ICONS.PUBLISH} aria-hidden />
             </MenuButton>
           </Tooltip>
@@ -59,7 +61,7 @@ export default function HeaderMenuButtons(props: HeaderMenuButtonProps) {
 
       <Menu>
         <Tooltip title={__('Settings')}>
-          <MenuButton className="header__navigation-item menu__title header__navigation-item--icon  mobile-hidden">
+          <MenuButton className="header__navigationItem--icon">
             <Icon size={18} icon={ICONS.SETTINGS} aria-hidden />
           </MenuButton>
         </Tooltip>

ui/component/headerNotificationButton/view.jsx

@@ -1,4 +1,6 @@
 // @flow
+import 'scss/component/_header.scss';
+
 import { ENABLE_UI_NOTIFICATIONS } from 'config';
 import { useHistory } from 'react-router';
 import * as ICONS from 'constants/icons';
@@ -30,10 +32,7 @@ export default function NotificationHeaderButton(props: Props) {
 
   return (
     <Tooltip title={__('Notifications')}>
-      <Button
-        onClick={handleMenuClick}
-        className="header__navigation-item menu__title header__navigation-item--icon mobile-hidden"
-      >
+      <Button onClick={handleMenuClick} className="header__navigationItem--icon">
         <Icon size={18} icon={ICONS.NOTIFICATION} aria-hidden />
         <NotificationBubble />
       </Button>

ui/component/headerProfileMenuButton/view.jsx

@@ -1,4 +1,6 @@
 // @flow
+import 'scss/component/_header.scss';
+
 import { Menu, MenuList, MenuButton, MenuItem } from '@reach/menu-button';
 import * as ICONS from 'constants/icons';
 import * as PAGES from 'constants/pages';
@@ -25,9 +27,9 @@ export default function HeaderProfileMenuButton(props: HeaderMenuButtonProps) {
         <MenuButton
           aria-label={__('Your account')}
           title={__('Your account')}
-          className={classnames('header__navigation-item', {
-            'menu__title header__navigation-item--icon': !activeChannelUrl,
-            'header__navigation-item--profile-pic': activeChannelUrl,
+          className={classnames('header__navigationItem', {
+            'header__navigationItem--icon': !activeChannelUrl,
+            'header__navigationItem--profilePic': activeChannelUrl,
           })}
         >
           {activeChannelUrl ? (

ui/scss/all.scss

@@ -30,7 +30,6 @@
 @import 'component/file-render';
 @import 'component/footer';
 @import 'component/form-field';
-@import 'component/header';
 @import 'component/icon';
 @import 'component/main';
 @import 'component/markdown-editor';

ui/scss/component/_header.scss

@@ -1,3 +1,6 @@
+@import '../init/vars';
+@import '../init/mixins';
+
 .header {
   z-index: 3; // Main content uses z-index: 1, other content uses z-index: 2, this ensures it always scrolls under the header
   position: fixed;
@@ -6,6 +9,7 @@
   background-color: var(--color-header-background);
   box-shadow: var(--card-box-shadow);
   font-size: var(--font-body);
+  user-select: none;
   -webkit-user-select: none;
   -webkit-app-region: drag;
 
@@ -23,31 +27,32 @@
       opacity: 1;
       position: relative;
       overflow: unset;
-      width: inherit;
-      height: inherit;
+      width: unset;
+      height: unset;
     }
   }
-
-  & > * {
-    user-select: none;
-  }
 }
 
 .header--minimal {
   box-shadow: none;
   background-color: var(--color-background);
   border-bottom: none;
-}
 
-.header--mac {
-  padding-top: var(--mac-titlebar-height);
+  .header__navigation {
+    padding: var(--spacing-xs);
+  }
+
+  .header__navigationItem--logo {
+    height: 3rem;
+  }
 }
 
 .header__contents {
-  height: calc(var(--header-height));
   display: flex;
   align-items: center;
-  padding: 0 var(--spacing-m);
+  flex: 1;
+  height: var(--header-height);
+  padding: var(--spacing-s) var(--spacing-m);
 
   @media (max-width: $breakpoint-small) {
     padding: var(--spacing-xs);
@@ -55,16 +60,40 @@
 }
 
 .header__navigation {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   flex: 1;
+  height: var(--header-height);
+  padding: var(--spacing-s) var(--spacing-m);
+  flex-wrap: nowrap;
+}
+
+.card__actions--between {
+  .header__menu--left {
+    @media (max-width: $breakpoint-small) {
+      max-width: 3rem;
+    }
+  }
+}
+
+.header__menu {
   display: flex;
   align-items: center;
 }
 
-.header__menu {
-  margin-left: auto;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+.header__menu--left {
+  @extend .header__menu;
+  justify-content: flex-start;
+}
+
+.header__menu--right {
+  @extend .header__menu;
+  justify-content: flex-end;
+
+  @media (max-width: $breakpoint-small) {
+    max-width: 4rem;
+  }
 }
 
 .header__buttons {
@@ -78,7 +107,7 @@
   max-width: fit-content;
 }
 
-.header__navigation-item {
+.header__navigationItem {
   height: var(--height-button);
   display: flex;
   justify-content: center;
@@ -90,11 +119,14 @@
   svg {
     stroke: var(--color-text);
   }
+
+  &[aria-expanded='true'] {
+    background-color: var(--color-header-button-active);
+  }
 }
 
-.header__navigation-item--back,
-.header__navigation-item--forward,
-.header__navigation-item--icon {
+.header__navigationItem--icon {
+  @extend .header__navigationItem;
   width: var(--height-button);
   background-color: var(--color-header-button);
   border-radius: 1.5rem;
@@ -110,6 +142,10 @@
     }
   }
 
+  @media (max-width: $breakpoint-small) {
+    margin: 0;
+  }
+
   span {
     display: flex;
     justify-content: center;
@@ -117,8 +153,8 @@
   }
 }
 
-.header__navigation-item--profile-pic {
-  margin-left: var(--spacing-m);
+.header__navigationItem--profilePic {
+  margin-right: var(--spacing-s);
 
   .channel-thumbnail {
     height: var(--height-button);
@@ -131,8 +167,8 @@
   }
 }
 
-.header__navigation-item--balance {
-  @extend .button--file-action;
+.header__navigationItem--balance {
+  @extend .header__navigationItem;
   margin: 0 var(--spacing-s);
   color: var(--color-text);
 
@@ -141,17 +177,8 @@
   }
 }
 
-.header__navigation-item--forward {
-  margin-right: 0;
-}
-
-.header__navigation-item--icon {
-  @media (max-width: $breakpoint-small) {
-    margin: 0;
-  }
-}
-
-.header__navigation-item--lbry {
+.header__navigationItem--logo {
+  @extend .header__navigationItem;
   height: 4rem;
   display: flex;
   align-items: center;
@@ -173,61 +200,44 @@
   }
 }
 
-.header--minimal {
-  .header__navigation-item--lbry {
-    height: 3rem;
-  }
-}
-
-.header__navigation-dropdown {
-  @extend .menu__list--header;
-  padding: 0;
-  position: absolute;
-  list-style-type: none;
-  background-color: var(--color-header-background);
-}
-
-.header__navigation-button {
-  margin: 0;
-  padding: var(--spacing-xxs) var(--spacing-m);
-  display: flex;
-  align-items: center;
-
-  &:hover {
-    cursor: pointer;
-    background-color: var(--color-menu-background--active);
-  }
-}
-
-.header__navigation-button-help {
-  @extend .help;
-  margin-top: 0;
-  margin-left: var(--spacing-s);
-}
-
-.header__auth-buttons {
+.header__authButtons {
   display: flex;
   align-items: center;
   font-weight: var(--font-weight-bold);
-  margin-left: var(--spacing-s);
 
   & > *:not(:last-child) {
     margin: 0 var(--spacing-m);
   }
+
+  @media (max-width: $breakpoint-small) {
+    .button--link {
+      margin: 0;
+    }
+
+    .button--primary {
+      padding: var(--spacing-xxs);
+    }
+  }
 }
 
 .header__center {
   display: flex;
-  justify-content: flex-end;
+  justify-content: center;
   width: 100%;
-
-  @media (min-width: $breakpoint-small) {
-    justify-content: center;
-  }
 }
 
-.header__auth-title {
+.header__authTitle {
+  @extend .header__center;
+  justify-content: center;
+
   @media (min-width: $breakpoint-small) {
     font-size: var(--font-large);
   }
 }
+
+.ReactModal__Overlay {
+  .button--close {
+    margin: 0;
+    margin-top: var(--spacing-xxs);
+  }
+}

ui/scss/component/_wunderbar.scss

@@ -1,3 +1,5 @@
+@import './header';
+
 .wunderbar__wrapper {
   flex: 1;
   max-width: 30rem;
@@ -227,7 +229,7 @@
 
 .wunderbar__mobile-search {
   @extend .button--alt;
-  @extend .header__navigation-item--icon;
+  @extend .header__navigationItem--icon;
   padding: var(--spacing-xs);
   margin-right: var(--spacing-m);
 

ui/scss/component/menu-button.scss

@@ -65,12 +65,6 @@
   }
 }
 
-.menu__title {
-  &[aria-expanded='true'] {
-    background-color: var(--color-header-button-active);
-  }
-}
-
 .menu__list {
   box-shadow: var(--card-box-shadow);
   animation: menu-animate-in var(--animation-duration) var(--animation-style);

ui/scss/init/_gui.scss

@@ -479,12 +479,6 @@ textarea {
   }
 }
 
-.mobile-hidden {
-  @media (max-width: $breakpoint-small) {
-    display: none !important;
-  }
-}
-
 .ads-test {
   height: 50vh;
   position: relative;