From a8eeee2bbeffa2395e9243bda6ae97348c787bfc Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Wed, 20 Jun 2018 21:59:36 -0400
Subject: [PATCH 1/6] use gift icon for tips

---
 src/renderer/constants/icons.js | 1 +
 src/renderer/page/file/view.jsx | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/renderer/constants/icons.js b/src/renderer/constants/icons.js
index bfa3a926c..8ad62606d 100644
--- a/src/renderer/constants/icons.js
+++ b/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';
diff --git a/src/renderer/page/file/view.jsx b/src/renderer/page/file/view.jsx
index b665ba89b..ef84abd17 100644
--- a/src/renderer/page/file/view.jsx
+++ b/src/renderer/page/file/view.jsx
@@ -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 })}
                       />
-- 
2.45.2


From 218a328cac8222b471b23285fe464431d904bbc8 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Mon, 25 Jun 2018 02:07:45 -0400
Subject: [PATCH 2/6] add back fixed header

---
 src/renderer/component/app/view.jsx      |  2 +-
 src/renderer/component/header/index.js   | 13 +++++--
 src/renderer/component/header/view.jsx   | 38 +++++++++++++++++++--
 src/renderer/component/sideBar/index.js  | 16 ++++-----
 src/renderer/component/sideBar/view.jsx  | 43 +-----------------------
 src/renderer/scss/_gui.scss              | 17 +++++-----
 src/renderer/scss/_vars.scss             |  1 +
 src/renderer/scss/component/_header.scss | 26 ++++++++++++--
 src/renderer/scss/component/_nav.scss    | 12 +------
 static/themes/dark.css                   |  3 ++
 10 files changed, 90 insertions(+), 81 deletions(-)

diff --git a/src/renderer/component/app/view.jsx b/src/renderer/component/app/view.jsx
index 23ee922bb..a23a258ea 100644
--- a/src/renderer/component/app/view.jsx
+++ b/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>
diff --git a/src/renderer/component/header/index.js b/src/renderer/component/header/index.js
index 0b5c8066f..50ccac3ff 100644
--- a/src/renderer/component/header/index.js
+++ b/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);
diff --git a/src/renderer/component/header/view.jsx b/src/renderer/component/header/view.jsx
index 1cbdceb13..372380a8b 100644
--- a/src/renderer/component/header/view.jsx
+++ b/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
diff --git a/src/renderer/component/sideBar/index.js b/src/renderer/component/sideBar/index.js
index 12c0de26b..6e3d03f2e 100644
--- a/src/renderer/component/sideBar/index.js
+++ b/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);
diff --git a/src/renderer/component/sideBar/view.jsx b/src/renderer/component/sideBar/view.jsx
index 226a051ef..d50d21491 100644
--- a/src/renderer/component/sideBar/view.jsx
+++ b/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 }) => (
diff --git a/src/renderer/scss/_gui.scss b/src/renderer/scss/_gui.scss
index 4dcd38a7a..c240197da 100644
--- a/src/renderer/scss/_gui.scss
+++ b/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 {
diff --git a/src/renderer/scss/_vars.scss b/src/renderer/scss/_vars.scss
index 5d3b801af..bf4c71aa7 100644
--- a/src/renderer/scss/_vars.scss
+++ b/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);
diff --git a/src/renderer/scss/component/_header.scss b/src/renderer/scss/component/_header.scss
index 94eb62974..32058ec7c 100644
--- a/src/renderer/scss/component/_header.scss
+++ b/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;
   }
 }
diff --git a/src/renderer/scss/component/_nav.scss b/src/renderer/scss/component/_nav.scss
index ae6d28f80..154f699e1 100644
--- a/src/renderer/scss/component/_nav.scss
+++ b/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;
diff --git a/static/themes/dark.css b/static/themes/dark.css
index 9bf8cac02..2edfc8cd2 100644
--- a/static/themes/dark.css
+++ b/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);
 }
-- 
2.45.2


From 95cf3dd9d8ea2ecbc9699dffccd431bcdced8c26 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Mon, 25 Jun 2018 02:28:03 -0400
Subject: [PATCH 3/6] use green icon for download/open file icon

---
 src/renderer/component/common/icon.jsx           | 10 ++++++----
 src/renderer/component/fileDownloadLink/view.jsx |  4 ++--
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/renderer/component/common/icon.jsx b/src/renderer/component/common/icon.jsx
index 547a8a618..c331012e5 100644
--- a/src/renderer/component/common/icon.jsx
+++ b/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;
     }
   };
 
diff --git a/src/renderer/component/fileDownloadLink/view.jsx b/src/renderer/component/fileDownloadLink/view.jsx
index ab4e9f362..ccc0f2ba7 100644
--- a/src/renderer/component/fileDownloadLink/view.jsx
+++ b/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>
       );
     }
-- 
2.45.2


From 1f0d59c444e0b48eb84cc81624a67f0ace00c4b1 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Mon, 25 Jun 2018 02:48:27 -0400
Subject: [PATCH 4/6] improve spacing on file page

---
 src/renderer/page/file/view.jsx        | 2 +-
 src/renderer/scss/component/_card.scss | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/renderer/page/file/view.jsx b/src/renderer/page/file/view.jsx
index ef84abd17..00b61914b 100644
--- a/src/renderer/page/file/view.jsx
+++ b/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 ? (
diff --git a/src/renderer/scss/component/_card.scss b/src/renderer/scss/component/_card.scss
index 995a37cba..71495864d 100644
--- a/src/renderer/scss/component/_card.scss
+++ b/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 {
-- 
2.45.2


From 00f97259e20bec8cb33242a8cdf6971f2b74d7a8 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Mon, 25 Jun 2018 02:53:13 -0400
Subject: [PATCH 5/6] change header height back to 60px

---
 src/renderer/scss/_vars.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/scss/_vars.scss b/src/renderer/scss/_vars.scss
index bf4c71aa7..bc0ec1428 100644
--- a/src/renderer/scss/_vars.scss
+++ b/src/renderer/scss/_vars.scss
@@ -119,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);
-- 
2.45.2


From acda4022a3ef2db9c70da0ed7fcee1c9a687bf47 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Mon, 25 Jun 2018 11:20:51 -0400
Subject: [PATCH 6/6] remove max-width on search input

---
 src/renderer/scss/component/_search.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/renderer/scss/component/_search.scss b/src/renderer/scss/component/_search.scss
index 7e1c460f3..0bc2b341b 100644
--- a/src/renderer/scss/component/_search.scss
+++ b/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);
-- 
2.45.2