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">
+
+        <div className="main-wrapper">
           <Router />
-            <ModalRouter />
         </div>
-        </section>
+
+        <ModalRouter />
+        {enhancedLayout && <Yrbl className="yrbl--enhanced" />}
       </div>
     );
   }

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}>
+    <svg
-      <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" />
+      stroke="currentColor"
-      <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" />
+      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>
   ),
 };

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 />

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">

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>
         )}

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,8 +21,21 @@ 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 (
+    <Scroll>
       <Switch>
         <Route path="/" exact component={DiscoverPage} />
         <Route path={`/$/${PAGES.AUTH}`} exact component={AuthPage} />
@@ -48,5 +61,6 @@ export default function AppRouter() {
         <Route path="/:claimName/:claimId" component={ShowPage} />
         <Route path="/:claimName" component={ShowPage} />
       </Switch>
+    </Scroll>
   );
 }

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>
       );

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">

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">

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,7 +32,6 @@
 @import 'component/modal';
 @import 'component/navigation';
 @import 'component/notice';
-@import 'component/page';
 @import 'component/pagination';
 @import 'component/placeholder';
 @import 'component/scrollbar';

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;

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;
+//   flex: 1;
-  display: flex;
+//   display: flex;
-  justify-content: space-between;
+//   justify-content: space-between;
 
-  // LBRY logo in the top left corner
+// LBRY logo in the top left corner
-  .lbry-icon {
+.lbry-icon {
-    height: 1rem;
+  height: var(--header-height);
   width: 1rem;
-    padding-left: 3.5rem;
-    padding-top: 1.5rem;
-    margin-right: 3.6rem;
   overflow: visible;
-  }
+}
 
-  .header__navigation-arrows {
+.header__navigation-arrows {
   flex: 1;
   display: flex;
   justify-content: flex-end;
   border-left: 1px solid $lbry-gray-1;
-  }
 }
+// }
 
 .header__navigation-item {
   height: var(--header-height);
@@ -96,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;
@@ -111,13 +110,11 @@
   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 {
+  .lbry-icon {
-    overflow: visible;
+    height: 2rem;
-    color: $lbry-white;
+    width: 2rem;
-    opacity: 1;
+    top: 0.6rem;
-    top: -0.8rem;
   }
 }
 
@@ -170,7 +167,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;
   }
 

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 {
+.main--contained {
-    max-width: 1000px;
+  max-width: 900px;
-  }
+}
 
-  &:not(.main--no-padding) {
+.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;
+}

src/ui/scss/component/_navigation.scss

@@ -1,13 +1,15 @@
 .navigation {
-  background-color: $lbry-white;
+  position: fixed;
-  border-right: 1px solid rgba($lbry-gray-1, 0.9);
+  top: var(--header-height);
-  font-size: 1.25rem;
+  height: calc(100vh - var(--header-height));
-  padding-top: var(--spacing-vertical-large);
-  padding-right: var(--spacing-vertical-small);
-  position: relative;
   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) {

src/ui/scss/component/_page.scss

@@ -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;
-}

src/ui/scss/init/_vars.scss

@@ -7,9 +7,7 @@ $large-breakpoint: 1921px;
 
 :root {
   // Width & spacing
-  --side-nav-width: 160px;
+  --side-nav-width: 180px;
-  --side-nav-width-m: 240px;
-  --side-nav-width-l: 320px;
   --font-size-subtext-multiple: 0.92;
 
   --spacing-vertical-miniscule: calc(2rem / 5);

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;