Merge pull request #1661 from lbryio/ux-fixes

Additional UX fixes

src/renderer/component/app/view.jsx

@@ -82,10 +82,10 @@ class App extends React.PureComponent<Props> {
     return (
       <div id="window" onContextMenu={e => openContextMenu(e)}>
         <Theme />
+        <Header />
         <main className="page">
           <SideBar />
           <div className="content" id="content">
-            <Header />
             <Router />
             <ModalRouter />
           </div>

src/renderer/component/common/icon.jsx

@@ -4,8 +4,10 @@ import * as FeatherIcons from 'react-feather';
 import * as icons from 'constants/icons';
 import Tooltip from 'component/common/tooltip';
 
+// It would be nice to standardize this somehow
+// These are copied from `scss/vars`, can they both come from the same source?
 const RED_COLOR = '#e2495e';
-const PURPLE_COLOR = '#8165b0';
+const GREEN_COLOR = '#44b098';
 
 type Props = {
   icon: string,
@@ -29,10 +31,10 @@ class IconComponent extends React.PureComponent<Props> {
     switch (color) {
       case 'red':
         return RED_COLOR;
-      case 'purple':
-        return PURPLE_COLOR;
+      case 'green':
+        return GREEN_COLOR;
       default:
-        return null;
+        return undefined;
     }
   };
 

src/renderer/component/fileDownloadLink/view.jsx

@@ -77,7 +77,7 @@ class FileDownloadLink extends React.PureComponent<Props> {
           <Button
             button="alt"
             icon={icons.DOWNLOAD}
-            iconColor="purple"
+            iconColor="green"
             onClick={() => {
               purchaseUri(uri);
             }}
@@ -87,7 +87,7 @@ class FileDownloadLink extends React.PureComponent<Props> {
     } else if (fileInfo && fileInfo.download_path) {
       return (
         <ToolTip onComponent body={__('Open file')}>
-          <Button button="alt" iconColor="purple" icon={icons.LOCAL} onClick={() => openFile()} />
+          <Button button="alt" iconColor="green" icon={icons.LOCAL} onClick={() => openFile()} />
         </ToolTip>
       );
     }

src/renderer/component/header/index.js

@@ -1,7 +1,7 @@
 import { connect } from 'react-redux';
-import { selectBalance } from 'lbry-redux';
+import { selectBalance, selectIsBackDisabled, selectIsForwardDisabled } from 'lbry-redux';
 import { formatCredits } from 'util/formatCredits';
-import { doNavigate } from 'redux/actions/navigation';
+import { doNavigate, doHistoryBack, doHistoryForward } from 'redux/actions/navigation';
 import { selectIsUpgradeAvailable, selectAutoUpdateDownloaded } from 'redux/selectors/app';
 import { doDownloadUpgradeRequested } from 'redux/actions/app';
 import Header from './view';
@@ -11,11 +11,18 @@ const select = state => ({
   balance: selectBalance(state),
   isUpgradeAvailable: selectIsUpgradeAvailable(state),
   roundedBalance: formatCredits(selectBalance(state) || 0, 2),
+  isBackDisabled: selectIsBackDisabled(state),
+  isForwardDisabled: selectIsForwardDisabled(state),
 });
 
 const perform = dispatch => ({
   downloadUpgradeRequested: () => dispatch(doDownloadUpgradeRequested()),
   navigate: path => dispatch(doNavigate(path)),
+  back: () => dispatch(doHistoryBack()),
+  forward: () => dispatch(doHistoryForward()),
 });
 
-export default connect(select, perform)(Header);
+export default connect(
+  select,
+  perform
+)(Header);

src/renderer/component/header/view.jsx

@@ -7,10 +7,14 @@ import * as icons from 'constants/icons';
 type Props = {
   autoUpdateDownloaded: boolean,
   balance: string,
-  downloadUpgradeRequested: any => void,
   isUpgradeAvailable: boolean,
-  navigate: any => void,
   roundedBalance: string,
+  isBackDisabled: boolean,
+  isForwardDisabled: boolean,
+  back: () => void,
+  forward: () => void,
+  downloadUpgradeRequested: any => void,
+  navigate: any => void,
 };
 
 const Header = (props: Props) => {
@@ -21,6 +25,10 @@ const Header = (props: Props) => {
     isUpgradeAvailable,
     navigate,
     roundedBalance,
+    back,
+    isBackDisabled,
+    forward,
+    isForwardDisabled,
   } = props;
 
   const showUpgradeButton =
@@ -28,6 +36,32 @@ const Header = (props: Props) => {
 
   return (
     <header className="header">
+      <div className="header__navigation">
+        <Button
+          noPadding
+          button="alt"
+          icon={icons.HOME}
+          className="btn--home-nav"
+          description={__('Home')}
+          onClick={() => navigate('/discover')}
+        />
+        <div className="header__history">
+          <Button
+            className="btn--arrow"
+            icon={icons.ARROW_LEFT}
+            description={__('Navigate back')}
+            onClick={back}
+            disabled={isBackDisabled}
+          />
+          <Button
+            className="btn--arrow"
+            icon={icons.ARROW_RIGHT}
+            description={__('Navigate forward')}
+            onClick={forward}
+            disabled={isForwardDisabled}
+          />
+        </div>
+      </div>
       <WunderBar />
       <div className="header__actions-right">
         <Button

src/renderer/component/sideBar/index.js

@@ -1,20 +1,16 @@
 import { connect } from 'react-redux';
-import { doNavigate, doHistoryBack, doHistoryForward } from 'redux/actions/navigation';
-import { selectIsBackDisabled, selectIsForwardDisabled, selectNavLinks } from 'lbry-redux';
+import { selectNavLinks } from 'lbry-redux';
 import { selectNotifications } from 'redux/selectors/subscriptions';
 import SideBar from './view';
 
 const select = state => ({
   navLinks: selectNavLinks(state),
-  isBackDisabled: selectIsBackDisabled(state),
-  isForwardDisabled: selectIsForwardDisabled(state),
   notifications: selectNotifications(state),
 });
 
-const perform = dispatch => ({
-  navigate: path => dispatch(doNavigate(path)),
-  back: () => dispatch(doHistoryBack()),
-  forward: () => dispatch(doHistoryForward()),
-});
+const perform = () => ({});
 
-export default connect(select, perform)(SideBar);
+export default connect(
+  select,
+  perform
+)(SideBar);

src/renderer/component/sideBar/view.jsx

@@ -2,7 +2,6 @@
 import * as React from 'react';
 import Button from 'component/button';
 import classnames from 'classnames';
-import * as icons from 'constants/icons';
 import * as NOTIFICATION_TYPES from 'constants/notification_types';
 
 type SideBarLink = {
@@ -14,11 +13,6 @@ type SideBarLink = {
 };
 
 type Props = {
-  navigate: any => void,
-  back: any => void,
-  forward: any => void,
-  isBackDisabled: boolean,
-  isForwardDisabled: boolean,
   navLinks: {
     primary: Array<SideBarLink>,
     secondary: Array<SideBarLink>,
@@ -29,15 +23,7 @@ type Props = {
 };
 
 const SideBar = (props: Props) => {
-  const {
-    navigate,
-    back,
-    forward,
-    isBackDisabled,
-    isForwardDisabled,
-    navLinks,
-    notifications,
-  } = props;
+  const { navLinks, notifications } = props;
 
   const badges = Object.keys(notifications).reduce(
     (acc, cur) => (notifications[cur].type === NOTIFICATION_TYPES.DOWNLOADING ? acc : acc + 1),
@@ -46,33 +32,6 @@ const SideBar = (props: Props) => {
 
   return (
     <nav className="nav">
-      <div className="nav__actions-top">
-        <Button
-          noPadding
-          button="alt"
-          icon={icons.HOME}
-          className="btn--home-nav"
-          description={__('Home')}
-          onClick={() => navigate('/discover')}
-        />
-        <div className="nav__actions-history">
-          <Button
-            className="btn--arrow"
-            icon={icons.ARROW_LEFT}
-            description={__('Navigate back')}
-            onClick={back}
-            disabled={isBackDisabled}
-          />
-          <Button
-            className="btn--arrow"
-            icon={icons.ARROW_RIGHT}
-            description={__('Navigate forward')}
-            onClick={forward}
-            disabled={isForwardDisabled}
-          />
-        </div>
-      </div>
-
       <div className="nav__links">
         <ul className="nav__primary">
           {navLinks.primary.map(({ label, path, active, icon }) => (

src/renderer/constants/icons.js

@@ -27,3 +27,4 @@ export const UNLOCK = 'Unlock';
 export const CHECK_SIMPLE = 'Check';
 export const GLOBE = 'Globe';
 export const EXTERNAL_LINK = 'ExternalLink';
+export const GIFT = 'Gift';

src/renderer/page/file/view.jsx

@@ -181,7 +181,7 @@ class FilePage extends React.Component<Props> {
               <div className="card__channel-info">
                 <UriIndicator uri={uri} link />
               </div>
-              <div className="card__actions card__actions--between">
+              <div className="card__actions card__actions--no-margin card__actions--between">
                 {(claimIsMine || subscriptionUri || speechSharable) && (
                   <div className="card__actions">
                     {claimIsMine ? (
@@ -200,7 +200,7 @@ class FilePage extends React.Component<Props> {
                     {!claimIsMine && (
                       <Button
                         button="alt"
-                        icon="Send"
+                        icon={icons.GIFT}
                         label={__('Enjoy this? Send a tip')}
                         onClick={() => openModal({ id: MODALS.SEND_TIP }, { uri })}
                       />

src/renderer/scss/_gui.scss

@@ -157,14 +157,13 @@ p {
 }
 
 .page {
-  display: grid;
-  grid-template-rows: var(--header-height) calc(100vh - var(--header-height));
-  grid-template-columns: var(--side-nav-width) auto;
-  grid-template-areas:
-    'nav content'
-    'nav content';
+  position: absolute;
+  top: var(--header-height);
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
   background-color: var(--color-bg);
-  height: 100vh;
 
   @media only screen and (min-width: $medium-breakpoint) {
     grid-template-columns: var(--side-nav-width-m) auto;
@@ -179,8 +178,8 @@ p {
   Page content
 */
 .content {
-  grid-area: content;
-  overflow-y: auto;
+  flex: 1;
+  overflow: auto;
 }
 
 .main {

src/renderer/scss/_vars.scss

@@ -54,6 +54,7 @@ $large-breakpoint: 1921px;
   --box-shadow-layer: transparent; // 0 2px 4px rgba(0,0,0,0.25);
   --box-shadow-button: 0 10px 20px rgba(0, 0, 0, 0.1);
   --box-shadow-wunderbar: 0 10px 20px rgba(0, 0, 0, 0.03);
+  --box-shadow-header: 0px 6px 20px 1px rgba(0, 0, 0, 0.05);
 
   /* Text */
   --text-color: var(--color-black);
@@ -118,7 +119,7 @@ $large-breakpoint: 1921px;
   --header-bg: var(--color-white);
   --header-color: var(--color-text);
   --header-active-color: rgba(0, 0, 0, 0.85);
-  --header-height: 75px;
+  --header-height: 60px;
   --header-button-bg: transparent;
   --header-button-hover-bg: rgba(100, 100, 100, 0.15);
   --header-primary-color: var(--color-primary);

src/renderer/scss/component/_card.scss

@@ -195,7 +195,7 @@
 }
 
 .card__content--extra-padding {
-  margin-top: $spacing-vertical;
+  margin-top: $spacing-vertical * 3/2;
 }
 
 .card__subtext-title {

src/renderer/scss/component/_header.scss

@@ -1,17 +1,37 @@
 .header {
+  position: fixed;
+  height: var(--header-height);
+  width: 100%;
   display: flex;
   z-index: 1;
   justify-content: space-between;
-  padding: $spacing-width $spacing-width 0 $spacing-width;
+  align-items: center;
+  padding: 0 $spacing-width;
   background-color: var(--color-bg);
+  box-shadow: var(--box-shadow-header);
+}
+
+.header__navigation {
+  display: flex;
+  justify-content: space-between;
+}
+
+.header__history {
+  display: flex;
+  padding: 0 $spacing-width * 1/2;
+
+  @media only screen and (min-width: $medium-breakpoint) {
+    .btn {
+      padding: 0 $spacing-width * 1/6;
+    }
+  }
 }
 
 .header__actions-right {
   margin-left: auto;
-  padding-left: $spacing-vertical / 2;
   display: flex;
 
   .btn {
-    margin-left: $spacing-vertical * 1/3;
+    margin-left: $spacing-width * 1/3;
   }
 }

src/renderer/scss/component/_nav.scss

@@ -1,5 +1,5 @@
 .nav {
-  grid-area: nav;
+  width: var(--side-nav-width);
   background-color: var(--nav-bg-color);
   padding: $spacing-width;
   color: var(--nav-color);
@@ -7,21 +7,11 @@
   hr {
     width: 24px;
     margin: 36px 0;
-    // width: 40px;
     border: solid 1px var(--color-divider);
     margin: $spacing-vertical $spacing-vertical * 2/3;
   }
 }
 
-.nav__actions-top {
-  display: flex;
-  justify-content: space-between;
-}
-
-.nav__actions-history {
-  display: flex;
-}
-
 // Sidebar links
 .nav__primary {
   padding-top: 80px;

src/renderer/scss/component/_search.scss

@@ -18,7 +18,6 @@
   height: var(--btn-height);
   border-radius: var(--btn-radius);
   width: 100%;
-  max-width: 700px;
   color: var(--search-color);
   background-color: var(--search-bg-color);
   box-shadow: var(--box-shadow-wunderbar);

static/themes/dark.css

@@ -90,4 +90,7 @@
   /* Scrollbar */
   --scrollbar-thumb-bg: rgba(255, 255, 255, 0.20);
   --scrollbar-thumb-hover-bg: #8696AF;
+  
+  /* Shadows */
+  --box-shadow-header: 0px 6px 20px 1px rgba(0, 0, 0, 0.2);
 }