From c67c66e4fe641beb85a91b91e2e8b74ba948f59e Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Thu, 18 Apr 2019 12:51:15 -0400
Subject: [PATCH 1/2] allow browser to handle scroll restoration

---
 src/ui/component/app/view.jsx                | 16 ++---
 src/ui/component/common/icon-custom.jsx      | 13 +++-
 src/ui/component/header/view.jsx             | 15 ++---
 src/ui/component/navigationHistory/view.jsx  |  2 +-
 src/ui/component/page/view.jsx               |  2 +-
 src/ui/component/router/view.jsx             | 64 ++++++++++++--------
 src/ui/component/subscribeSuggested/view.jsx |  2 +-
 src/ui/page/fileListDownloaded/view.jsx      |  2 +-
 src/ui/page/fileListPublished/view.jsx       |  2 +-
 src/ui/scss/all.scss                         |  3 -
 src/ui/scss/component/_content.scss          |  7 ---
 src/ui/scss/component/_header.scss           | 53 ++++++++--------
 src/ui/scss/component/_main.scss             | 39 +++++++++---
 src/ui/scss/component/_navigation.scss       | 16 ++---
 src/ui/scss/component/_page.scss             | 53 ----------------
 src/ui/scss/component/_scrollbar.scss        | 23 -------
 src/ui/scss/init/_vars.scss                  |  4 +-
 src/ui/store.js                              |  6 +-
 18 files changed, 137 insertions(+), 185 deletions(-)
 delete mode 100644 src/ui/scss/component/_page.scss
 delete mode 100644 src/ui/scss/component/_scrollbar.scss

diff --git a/src/ui/component/app/view.jsx b/src/ui/component/app/view.jsx
index 0494c9534..cd7ca8a72 100644
--- a/src/ui/component/app/view.jsx
+++ b/src/ui/component/app/view.jsx
@@ -69,14 +69,14 @@ class App extends React.PureComponent<Props> {
     return (
       <div id="window" onContextMenu={e => openContextMenu(e)}>
         <Header />
-        <section className="page">
-          {enhancedLayout && <Yrbl className="yrbl--enhanced" />}
-          <SideBar />
-          <div className="content" id="content">
-            <Router />
-            <ModalRouter />
-          </div>
-        </section>
+        <SideBar />
+
+        <div className="main-wrapper">
+          <Router />
+        </div>
+
+        <ModalRouter />
+        {enhancedLayout && <Yrbl className="yrbl--enhanced" />}
       </div>
     );
   }
diff --git a/src/ui/component/common/icon-custom.jsx b/src/ui/component/common/icon-custom.jsx
index 723dd3182..2c103b457 100644
--- a/src/ui/component/common/icon-custom.jsx
+++ b/src/ui/component/common/icon-custom.jsx
@@ -118,9 +118,16 @@ export const customIcons = {
   ),
   // The LBRY icon is different from the base icon set so don't use buildIcon()
   [ICONS.LBRY]: props => (
-    <svg stroke="currentColor" fill="currentColor" transform="scale(0.1)" {...props}>
-      <path d="M296.05, 85.9l0, 14.1l-138.8, 85.3l-104.6, -51.3l0.2, -7.9l104, 51.2l132.2, -81.2l0, -5.8l-124.8, -60.2l-139.2, 86.1l0, 38.5l131.8, 65.2l137.6, -84.4l3.9, 6l-141.1, 86.4l-139.2, -68.8l0, -46.8l145.8, -90.2l132.2, 63.8Z" />
-      <path d="M294.25, 150.9l2, -12.6l-12.2, -2.1l0.8, -4.9l17.1, 2.9l-2.8, 17.5l-4.9, -0.8Z" />
+    <svg
+      stroke="currentColor"
+      fill="currentColor"
+      x="0px"
+      y="0px"
+      viewBox="0 0 322 254"
+      className="icon lbry-icon"
+    >
+      <path d="M296,85.9V100l-138.8,85.3L52.6,134l0.2-7.9l104,51.2L289,96.1v-5.8L164.2,30.1L25,116.2v38.5l131.8,65.2 l137.6-84.4l3.9,6l-141.1,86.4L18.1,159.1v-46.8l145.8-90.2C163.9,22.1,296,85.9,296,85.9z" />
+      <path d="M294.3,150.9l2-12.6l-12.2-2.1l0.8-4.9l17.1,2.9l-2.8,17.5L294.3,150.9L294.3,150.9z" />
     </svg>
   ),
 };
diff --git a/src/ui/component/header/view.jsx b/src/ui/component/header/view.jsx
index 108ebf7ac..26abec12f 100644
--- a/src/ui/component/header/view.jsx
+++ b/src/ui/component/header/view.jsx
@@ -37,9 +37,14 @@ const Header = (props: Props) => {
   return (
     <header className="header">
       <div className="header__navigation">
+        <Button
+          className="header__navigation-item header__navigation-item--lbry"
+          label={__('LBRY')}
+          iconRight={ICONS.LBRY}
+          navigate="/"
+        />
         {/* @if TARGET='app' */}
         <div className="header__navigation-app">
-          <Icon className="lbry-icon" icon={ICONS.LBRY} />
           <div className="header__navigation-arrows">
             <Button
               className="header__navigation-item header__navigation-item--back"
@@ -59,14 +64,6 @@ const Header = (props: Props) => {
           </div>
         </div>
         {/* @endif */}
-        {/* @if TARGET='web' */}
-        <Button
-          className="header__navigation-item header__navigation-item--lbry"
-          label={__('LBRY')}
-          iconRight={ICONS.LBRY}
-          navigate="/"
-        />
-        {/* @endif */}
       </div>
 
       <WunderBar />
diff --git a/src/ui/component/navigationHistory/view.jsx b/src/ui/component/navigationHistory/view.jsx
index 35ed41a5e..3e1cd4756 100644
--- a/src/ui/component/navigationHistory/view.jsx
+++ b/src/ui/component/navigationHistory/view.jsx
@@ -164,7 +164,7 @@ class UserHistoryPage extends React.PureComponent<Props, State> {
         )}
       </React.Fragment>
     ) : (
-      <div className="page__empty">
+      <div className="main--empty">
         <section className="card card--section">
           <header className="card__header">
             <h2 className="card__title">
diff --git a/src/ui/component/page/view.jsx b/src/ui/component/page/view.jsx
index fadc904c1..07ddb9f3b 100644
--- a/src/ui/component/page/view.jsx
+++ b/src/ui/component/page/view.jsx
@@ -93,7 +93,7 @@ class Page extends React.PureComponent<Props, State> {
       >
         {!loading && children}
         {showLoader && (
-          <div className="page__empty">
+          <div className="main--empty">
             <Spinner />
           </div>
         )}
diff --git a/src/ui/component/router/view.jsx b/src/ui/component/router/view.jsx
index be85eaf98..996f42bcd 100644
--- a/src/ui/component/router/view.jsx
+++ b/src/ui/component/router/view.jsx
@@ -1,6 +1,6 @@
 import * as PAGES from 'constants/pages';
 import React, { useEffect } from 'react';
-import { Route, Switch } from 'react-router-dom';
+import { Route, Switch, withRouter } from 'react-router-dom';
 import SettingsPage from 'page/settings';
 import HelpPage from 'page/help';
 import ReportPage from 'page/report';
@@ -21,32 +21,46 @@ import UserHistoryPage from 'page/userHistory';
 import SendCreditsPage from 'page/sendCredits';
 import NavigationHistory from 'page/navigationHistory';
 
+const Scroll = withRouter(function ScrollWrapper(props) {
+  const { pathname } = props.location;
+  useEffect(() => {
+    // Auto scroll to the top of a window for new pages
+    // The browser will handle scrolling if it needs to, but
+    // for new pages, react-router maintains the current y scroll position
+    window.scrollTo(0, 0);
+  }, [pathname]);
+
+  return props.children;
+});
+
 export default function AppRouter() {
   return (
-    <Switch>
-      <Route path="/" exact component={DiscoverPage} />
-      <Route path={`/$/${PAGES.AUTH}`} exact component={AuthPage} />
-      <Route path={`/$/${PAGES.BACKUP}`} exact component={BackupPage} />
-      <Route path={`/$/${PAGES.INVITE}`} exact component={InvitePage} />
-      <Route path={`/$/${PAGES.DOWNLOADED}`} exact component={FileListDownloaded} />
-      <Route path={`/$/${PAGES.PUBLISHED}`} exact component={FileListPublished} />
-      <Route path={`/$/${PAGES.HELP}`} exact component={HelpPage} />
-      <Route path={`/$/${PAGES.PUBLISH}`} exact component={PublishPage} />
-      <Route path={`/$/${PAGES.REPORT}`} exact component={ReportPage} />
-      <Route path={`/$/${PAGES.REWARDS}`} exact component={RewardsPage} />
-      <Route path={`/$/${PAGES.SEARCH}`} exact component={SearchPage} />
-      <Route path={`/$/${PAGES.SETTINGS}`} exact component={SettingsPage} />
-      <Route path={`/$/${PAGES.SUBSCRIPTIONS}`} exact component={SubscriptionsPage} />
-      <Route path={`/$/${PAGES.TRANSACTIONS}`} exact component={TransactionHistoryPage} />
-      <Route path={`/$/${PAGES.HISTORY}`} exact component={UserHistoryPage} />
-      <Route path={`/$/${PAGES.ACCOUNT}`} exact component={AccountPage} />
-      <Route path={`/$/${PAGES.SEND}`} exact component={SendCreditsPage} />
-      <Route path={`/$/${PAGES.HISTORY}`} exact component={UserHistoryPage} />
-      <Route path={`/$/${PAGES.HISTORY}/all`} exact component={NavigationHistory} />
+    <Scroll>
+      <Switch>
+        <Route path="/" exact component={DiscoverPage} />
+        <Route path={`/$/${PAGES.AUTH}`} exact component={AuthPage} />
+        <Route path={`/$/${PAGES.BACKUP}`} exact component={BackupPage} />
+        <Route path={`/$/${PAGES.INVITE}`} exact component={InvitePage} />
+        <Route path={`/$/${PAGES.DOWNLOADED}`} exact component={FileListDownloaded} />
+        <Route path={`/$/${PAGES.PUBLISHED}`} exact component={FileListPublished} />
+        <Route path={`/$/${PAGES.HELP}`} exact component={HelpPage} />
+        <Route path={`/$/${PAGES.PUBLISH}`} exact component={PublishPage} />
+        <Route path={`/$/${PAGES.REPORT}`} exact component={ReportPage} />
+        <Route path={`/$/${PAGES.REWARDS}`} exact component={RewardsPage} />
+        <Route path={`/$/${PAGES.SEARCH}`} exact component={SearchPage} />
+        <Route path={`/$/${PAGES.SETTINGS}`} exact component={SettingsPage} />
+        <Route path={`/$/${PAGES.SUBSCRIPTIONS}`} exact component={SubscriptionsPage} />
+        <Route path={`/$/${PAGES.TRANSACTIONS}`} exact component={TransactionHistoryPage} />
+        <Route path={`/$/${PAGES.HISTORY}`} exact component={UserHistoryPage} />
+        <Route path={`/$/${PAGES.ACCOUNT}`} exact component={AccountPage} />
+        <Route path={`/$/${PAGES.SEND}`} exact component={SendCreditsPage} />
+        <Route path={`/$/${PAGES.HISTORY}`} exact component={UserHistoryPage} />
+        <Route path={`/$/${PAGES.HISTORY}/all`} exact component={NavigationHistory} />
 
-      {/* Below need to go at the end to make sure we don't match any of our pages first */}
-      <Route path="/:claimName/:claimId" component={ShowPage} />
-      <Route path="/:claimName" component={ShowPage} />
-    </Switch>
+        {/* Below need to go at the end to make sure we don't match any of our pages first */}
+        <Route path="/:claimName/:claimId" component={ShowPage} />
+        <Route path="/:claimName" component={ShowPage} />
+      </Switch>
+    </Scroll>
   );
 }
diff --git a/src/ui/component/subscribeSuggested/view.jsx b/src/ui/component/subscribeSuggested/view.jsx
index 952ec3485..ebc9269e8 100644
--- a/src/ui/component/subscribeSuggested/view.jsx
+++ b/src/ui/component/subscribeSuggested/view.jsx
@@ -14,7 +14,7 @@ class SuggestedSubscriptions extends PureComponent<Props> {
 
     if (loading) {
       return (
-        <div className="page__empty">
+        <div className="main--empty">
           <Spinner delayed />
         </div>
       );
diff --git a/src/ui/page/fileListDownloaded/view.jsx b/src/ui/page/fileListDownloaded/view.jsx
index 9bf9ce158..5bd3102a1 100644
--- a/src/ui/page/fileListDownloaded/view.jsx
+++ b/src/ui/page/fileListDownloaded/view.jsx
@@ -23,7 +23,7 @@ class FileListDownloaded extends React.PureComponent<Props> {
         {hasDownloads ? (
           <FileList fileInfos={fileInfos} sortBy={sortBy} page={PAGES.DOWNLOADED} />
         ) : (
-          <div className="page__empty">
+          <div className="main--empty">
             <section className="card card--section">
               <header className="card__header">
                 <h2 className="card__title">
diff --git a/src/ui/page/fileListPublished/view.jsx b/src/ui/page/fileListPublished/view.jsx
index 0f1e39d17..b4009d790 100644
--- a/src/ui/page/fileListPublished/view.jsx
+++ b/src/ui/page/fileListPublished/view.jsx
@@ -32,7 +32,7 @@ class FileListPublished extends React.PureComponent<Props> {
             page={PAGES.PUBLISHED}
           />
         ) : (
-          <div className="page__empty">
+          <div className="main--empty">
             <section className="card card--section">
               <header className="card__header">
                 <h2 className="card__title">
diff --git a/src/ui/scss/all.scss b/src/ui/scss/all.scss
index 7654c2384..3eb031d5c 100644
--- a/src/ui/scss/all.scss
+++ b/src/ui/scss/all.scss
@@ -1,6 +1,5 @@
 @charset "utf-8";
 
-// @import '~@lbry/color/lbry-color';
 @import '~@lbry/components/sass/init/_color.scss';
 @import '~@lbry/components/sass/init/_mixins.scss';
 @import '~@lbry/components/sass/init/_variables.scss';
@@ -33,10 +32,8 @@
 @import 'component/modal';
 @import 'component/navigation';
 @import 'component/notice';
-@import 'component/page';
 @import 'component/pagination';
 @import 'component/placeholder';
-@import 'component/scrollbar';
 @import 'component/search';
 @import 'component/snack-bar';
 @import 'component/spinner';
diff --git a/src/ui/scss/component/_content.scss b/src/ui/scss/component/_content.scss
index 2fbc41b85..a1a8ddc80 100644
--- a/src/ui/scss/component/_content.scss
+++ b/src/ui/scss/component/_content.scss
@@ -1,10 +1,3 @@
-.content {
-  flex: 1 0 var(--file-page-min-width);
-  overflow-x: hidden;
-  overflow-y: auto;
-  position: relative;
-}
-
 .content__cover {
   // Video thumbnail with play/download button
   top: 0;
diff --git a/src/ui/scss/component/_header.scss b/src/ui/scss/component/_header.scss
index 12ad4be1f..41fd655f3 100644
--- a/src/ui/scss/component/_header.scss
+++ b/src/ui/scss/component/_header.scss
@@ -1,16 +1,16 @@
 .header {
+  position: fixed;
   width: 100%;
   height: var(--header-height);
-
   align-items: center;
   background-color: $lbry-white;
   display: flex;
   justify-content: space-between;
-  position: fixed;
   z-index: 1;
 
   html[data-mode='dark'] & {
     background-color: rgba($lbry-black, 0.9);
+    background-color: mix($lbry-black, $lbry-gray-3, 90%);
     color: $lbry-white;
   }
 }
@@ -22,7 +22,7 @@
     // Main navigation collapses into a menu button
     // at smaller screen widths
     @media (min-width: 601px) {
-      width: 170px;
+      width: calc(var(--side-nav-width) - 1px);
     }
 
     @media (max-width: 600px) {
@@ -31,28 +31,25 @@
   }
 }
 
-.header__navigation-app {
+// .header__navigation-app {
+//   flex: 1;
+//   display: flex;
+//   justify-content: space-between;
+
+// LBRY logo in the top left corner
+.lbry-icon {
+  height: var(--header-height);
+  width: 1rem;
+  overflow: visible;
+}
+
+.header__navigation-arrows {
   flex: 1;
   display: flex;
-  justify-content: space-between;
-
-  // LBRY logo in the top left corner
-  .lbry-icon {
-    height: 1rem;
-    width: 1rem;
-    padding-left: 3.5rem;
-    padding-top: 1.5rem;
-    margin-right: 3.6rem;
-    overflow: visible;
-  }
-
-  .header__navigation-arrows {
-    flex: 1;
-    display: flex;
-    justify-content: flex-end;
-    border-left: 1px solid $lbry-gray-1;
-  }
+  justify-content: flex-end;
+  border-left: 1px solid $lbry-gray-1;
 }
+// }
 
 .header__navigation-item {
   height: var(--header-height);
@@ -111,13 +108,12 @@
   flex: 1;
   font-weight: 800;
   font-size: 1.2rem;
-  margin-left: -1.25rem; // Needed because the lbry icon overflows it's parent so the centering is off
 
-  svg {
-    overflow: visible;
+  .lbry-icon {
+    height: 2rem;
+    width: 2rem;
+    top: 0.5rem;
     color: $lbry-white;
-    opacity: 1;
-    top: -0.8rem;
   }
 }
 
@@ -170,7 +166,8 @@
   .header__navigation-item--back,
   .header__navigation-item--forward,
   .header__navigation-item--home,
-  .header__navigation-item--right-action {
+  .header__navigation-item--right-action,
+  .header__navigation-item--wallet {
     display: none;
   }
 
diff --git a/src/ui/scss/component/_main.scss b/src/ui/scss/component/_main.scss
index 577fa6f39..93fdaf86d 100644
--- a/src/ui/scss/component/_main.scss
+++ b/src/ui/scss/component/_main.scss
@@ -1,16 +1,28 @@
+.main-wrapper {
+  position: absolute;
+  top: var(--header-height);
+  left: var(--side-nav-width);
+  min-height: calc(100% - var(--header-height));
+  width: calc(100% - var(--side-nav-width));
+  background-color: mix($lbry-white, $lbry-gray-1, 70%);
+
+  html[data-mode='dark'] & {
+    background-color: $lbry-black;
+  }
+}
+
 .main {
+  display: flex;
+  flex-direction: column;
   margin: auto;
-  overflow: hidden;
-  position: relative;
-  z-index: 1;
+}
 
-  &.main--contained {
-    max-width: 1000px;
-  }
+.main--contained {
+  max-width: 900px;
+}
 
-  &:not(.main--no-padding) {
-    padding: var(--spacing-vertical-large);
-  }
+.main:not(.main--no-padding) {
+  padding: var(--spacing-vertical-large);
 }
 
 .main--file-page {
@@ -39,3 +51,12 @@
     grid-area: related;
   }
 }
+
+.main--empty {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  margin-top: 100px;
+  margin-bottom: 100px;
+  text-align: center;
+}
diff --git a/src/ui/scss/component/_navigation.scss b/src/ui/scss/component/_navigation.scss
index 76fd54512..805785e64 100644
--- a/src/ui/scss/component/_navigation.scss
+++ b/src/ui/scss/component/_navigation.scss
@@ -1,13 +1,15 @@
 .navigation {
-  background-color: $lbry-white;
-  border-right: 1px solid rgba($lbry-gray-1, 0.9);
-  font-size: 1.25rem;
-  padding-top: var(--spacing-vertical-large);
-  padding-right: var(--spacing-vertical-small);
-  position: relative;
+  position: fixed;
+  top: var(--header-height);
+  height: calc(100vh - var(--header-height));
   display: flex;
   flex-direction: column;
   overflow-y: overlay;
+  background-color: $lbry-white;
+  border-right: 1px solid rgba($lbry-gray-1, 0.9);
+  padding-top: var(--spacing-vertical-large);
+  padding-right: var(--spacing-vertical-small);
+  font-size: 1.2rem;
 
   html[data-mode='dark'] & {
     background-color: $lbry-black;
@@ -18,7 +20,7 @@
   // on smaller screen widths
 
   @media (min-width: 601px) {
-    width: 171px; // 1px is for the border
+    width: var(--side-nav-width);
   }
 
   @media (max-width: 600px) {
diff --git a/src/ui/scss/component/_page.scss b/src/ui/scss/component/_page.scss
deleted file mode 100644
index e9e0fdc96..000000000
--- a/src/ui/scss/component/_page.scss
+++ /dev/null
@@ -1,53 +0,0 @@
-.page {
-  top: var(--header-height);
-  left: 0;
-  bottom: 0;
-  right: 0;
-
-  background-color: mix($lbry-white, $lbry-gray-1, 70%);
-  display: flex;
-  position: absolute;
-  z-index: 0;
-
-  html[data-mode='dark'] & {
-    background-color: $lbry-black;
-  }
-
-  &::after {
-    width: 100%;
-    height: 1px;
-    top: 0;
-    left: 0;
-
-    background-color: $lbry-gray-1;
-    content: '';
-    position: absolute;
-    z-index: 1;
-
-    html[data-mode='dark'] & {
-      background-color: $lbry-black;
-    }
-  }
-
-  @media only screen and (min-width: $medium-breakpoint) {
-    grid-template-columns: var(--side-nav-width-m) auto;
-  }
-
-  @media only screen and (min-width: $large-breakpoint) {
-    grid-template-columns: var(--side-nav-width-l) auto;
-  }
-}
-
-.page__header {
-  padding: var(--spacing-vertical-medium) var(--spacing-vertical-medium) 0
-    var(--spacing-vertical-medium);
-}
-
-.page__empty {
-  align-items: center;
-  display: flex;
-  flex-direction: column;
-  margin-top: 100px;
-  margin-bottom: 100px;
-  text-align: center;
-}
diff --git a/src/ui/scss/component/_scrollbar.scss b/src/ui/scss/component/_scrollbar.scss
deleted file mode 100644
index 10a4a8856..000000000
--- a/src/ui/scss/component/_scrollbar.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-::-webkit-scrollbar {
-  width: 6px;
-  height: 5px;
-
-  background-color: transparent;
-  overflow: auto;
-}
-
-::-webkit-scrollbar-thumb {
-  background-color: $lbry-gray-3;
-
-  html[data-mode='dark'] & {
-    background-color: $lbry-gray-5;
-  }
-}
-
-::-webkit-scrollbar-thumb:active {
-  background-color: $lbry-teal-3;
-}
-
-::-webkit-scrollbar-track {
-  background-color: transparent;
-}
diff --git a/src/ui/scss/init/_vars.scss b/src/ui/scss/init/_vars.scss
index c583d702f..5d20a866e 100644
--- a/src/ui/scss/init/_vars.scss
+++ b/src/ui/scss/init/_vars.scss
@@ -7,9 +7,7 @@ $large-breakpoint: 1921px;
 
 :root {
   // Width & spacing
-  --side-nav-width: 160px;
-  --side-nav-width-m: 240px;
-  --side-nav-width-l: 320px;
+  --side-nav-width: 180px;
   --font-size-subtext-multiple: 0.92;
 
   --spacing-vertical-miniscule: calc(2rem / 5);
diff --git a/src/ui/store.js b/src/ui/store.js
index bfda6d47d..7ed7801e5 100644
--- a/src/ui/store.js
+++ b/src/ui/store.js
@@ -36,12 +36,14 @@ function enableBatching(reducer) {
   };
 }
 
+let history;
 // @if TARGET='app'
-const history = createHashHistory();
+history = createHashHistory();
 // @endif
 // @if TARGET='web'
-const history = createBrowserHistory();
+history = createBrowserHistory();
 // @endif
+
 const bulkThunk = createBulkThunkMiddleware();
 const middleware = [routerMiddleware(history), thunk, bulkThunk];
 const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

From 9bd2aa49365913735b98589043a9ec1d8f7a880e Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Thu, 18 Apr 2019 17:11:34 -0400
Subject: [PATCH 2/2] fix: not awful scrollbar on windows

---
 src/ui/scss/all.scss                  |  1 +
 src/ui/scss/component/_header.scss    |  5 +++--
 src/ui/scss/component/_scrollbar.scss | 23 +++++++++++++++++++++++
 3 files changed, 27 insertions(+), 2 deletions(-)
 create mode 100644 src/ui/scss/component/_scrollbar.scss

diff --git a/src/ui/scss/all.scss b/src/ui/scss/all.scss
index 3eb031d5c..db0ad0fee 100644
--- a/src/ui/scss/all.scss
+++ b/src/ui/scss/all.scss
@@ -34,6 +34,7 @@
 @import 'component/notice';
 @import 'component/pagination';
 @import 'component/placeholder';
+@import 'component/scrollbar';
 @import 'component/search';
 @import 'component/snack-bar';
 @import 'component/spinner';
diff --git a/src/ui/scss/component/_header.scss b/src/ui/scss/component/_header.scss
index 41fd655f3..fd362e75c 100644
--- a/src/ui/scss/component/_header.scss
+++ b/src/ui/scss/component/_header.scss
@@ -93,6 +93,8 @@
   width: var(--header-height);
 
   svg {
+    stroke: $lbry-black;
+
     &:only-child {
       // Header icons are a little different because they are larger
       top: 0.25rem;
@@ -112,8 +114,7 @@
   .lbry-icon {
     height: 2rem;
     width: 2rem;
-    top: 0.5rem;
-    color: $lbry-white;
+    top: 0.6rem;
   }
 }
 
diff --git a/src/ui/scss/component/_scrollbar.scss b/src/ui/scss/component/_scrollbar.scss
new file mode 100644
index 000000000..10a4a8856
--- /dev/null
+++ b/src/ui/scss/component/_scrollbar.scss
@@ -0,0 +1,23 @@
+::-webkit-scrollbar {
+  width: 6px;
+  height: 5px;
+
+  background-color: transparent;
+  overflow: auto;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: $lbry-gray-3;
+
+  html[data-mode='dark'] & {
+    background-color: $lbry-gray-5;
+  }
+}
+
+::-webkit-scrollbar-thumb:active {
+  background-color: $lbry-teal-3;
+}
+
+::-webkit-scrollbar-track {
+  background-color: transparent;
+}