From ac459120ca01198ac8b0ebb7d44c0b2eff985849 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Thu, 18 Apr 2019 15:10:46 -0400
Subject: [PATCH 01/12] fix: app deep linking

---
 src/ui/index.jsx | 24 ++++++++----------------
 1 file changed, 8 insertions(+), 16 deletions(-)

diff --git a/src/ui/index.jsx b/src/ui/index.jsx
index ca5d4c062..df69c2e41 100644
--- a/src/ui/index.jsx
+++ b/src/ui/index.jsx
@@ -26,11 +26,13 @@ import pjson from 'package.json';
 import app from './app';
 import analytics from './analytics';
 import doLogWarningConsoleMessage from './logWarningConsoleMessage';
-import { ConnectedRouter } from 'connected-react-router';
+import { ConnectedRouter, push } from 'connected-react-router';
 import cookie from 'cookie';
+import { formatLbryUriForWeb } from 'util/uri';
+
 import(/* webpackChunkName: "styles" */
 /* webpackPrefetch: true */
-'scss/all.scss');
+  'scss/all.scss');
 
 const APPPAGEURL = 'lbry://?';
 
@@ -47,16 +49,6 @@ if (process.env.SEARCH_API_URL) {
   setSearchApi(process.env.SEARCH_API_URL);
 }
 
-// @if TARGET='app'
-ipcRenderer.on('navigate-backward', () => {
-  // app.store.dispatch(doHistoryBack());
-});
-
-ipcRenderer.on('navigate-forward', () => {
-  // app.store.dispatch(doHistoryForward());
-});
-// @endif
-
 // @if TARGET='web'
 const SDK_API_URL = process.env.SDK_API_URL || 'https://api.piratebay.com/api/proxy';
 Lbry.setDaemonConnectionString(SDK_API_URL);
@@ -66,7 +58,6 @@ Lbry.setDaemonConnectionString(SDK_API_URL);
 // We interect with ipcRenderer to get the auth key from a users keyring
 // We keep a local variable for authToken beacuse `ipcRenderer.send` does not
 // contain a response, so there is no way to know when it's been set
-
 let authToken;
 Lbryio.setOverride(
   'setAuthToken',
@@ -141,9 +132,10 @@ ipcRenderer.on('open-uri-requested', (event, uri, newSession) => {
       app.store.dispatch(doConditionalAuthNavigate(newSession));
     } else if (uri.startsWith(APPPAGEURL)) {
       const navpage = uri.replace(APPPAGEURL, '').toLowerCase();
-      // app.store.dispatch(doNavigate(`/${navpage}`));
+      app.store.dispatch(push(`/$/${navpage}`));
     } else if (isURIValid(uri)) {
-      // app.store.dispatch(doNavigate('/show', { uri }));
+      const formattedUri = formatLbryUriForWeb(uri);
+      app.store.dispatch(push(formattedUri));
     } else {
       app.store.dispatch(
         doToast({
@@ -156,7 +148,7 @@ ipcRenderer.on('open-uri-requested', (event, uri, newSession) => {
 
 ipcRenderer.on('open-menu', (event, uri) => {
   if (uri && uri.startsWith('/help')) {
-    // app.store.dispatch(doNavigate('/help'));
+    app.store.dispatch(push('/$/help'));
   }
 });
 

From e676d0b4fb85a6b1ad9558b9358874ac8c668beb Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Thu, 18 Apr 2019 15:40:53 -0400
Subject: [PATCH 02/12] add back static import of styles

---
 src/ui/index.jsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/ui/index.jsx b/src/ui/index.jsx
index df69c2e41..e01169358 100644
--- a/src/ui/index.jsx
+++ b/src/ui/index.jsx
@@ -30,9 +30,10 @@ import { ConnectedRouter, push } from 'connected-react-router';
 import cookie from 'cookie';
 import { formatLbryUriForWeb } from 'util/uri';
 
-import(/* webpackChunkName: "styles" */
-/* webpackPrefetch: true */
-  'scss/all.scss');
+// Import our app styles
+// If a style is not necessary for the initial page load, it should be removed from `all.scss`
+// and loaded dynamically in the component that consumes it
+import 'scss/all.scss';
 
 const APPPAGEURL = 'lbry://?';
 

From d0bad3cf01e174658d9b163b50160373983045d3 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Fri, 19 Apr 2019 12:19:55 -0400
Subject: [PATCH 03/12] prevent thumbnails from shinking to 0 width

---
 src/ui/scss/component/_media.scss  | 12 ++----------
 src/ui/scss/component/_search.scss |  2 +-
 2 files changed, 3 insertions(+), 11 deletions(-)

diff --git a/src/ui/scss/component/_media.scss b/src/ui/scss/component/_media.scss
index 5363166dc..be8c545f5 100644
--- a/src/ui/scss/component/_media.scss
+++ b/src/ui/scss/component/_media.scss
@@ -35,13 +35,12 @@
   }
 
   .media__thumb {
+    flex-shrink: 0;
     width: 20rem;
   }
 
   .media__info {
     margin-left: var(--spacing-vertical-medium);
-    width: calc(80% - 20rem);
-    min-width: 40rem;
   }
 }
 
@@ -49,12 +48,11 @@
   font-size: 2rem;
 
   .media__thumb {
-    width: 30rem;
+    width: 25rem;
   }
 
   .media__info {
     margin-left: var(--spacing-vertical-large);
-    flex: 1;
   }
 
   .media__subtext {
@@ -73,12 +71,6 @@
     width: 11em;
   }
 
-  .media__info {
-    width: calc(100% - 10em);
-    min-width: auto;
-    position: relative;
-  }
-
   .media__title {
     margin-bottom: var(--spacing-vertical-small);
   }
diff --git a/src/ui/scss/component/_search.scss b/src/ui/scss/component/_search.scss
index 1ce718c0b..160ecf35c 100644
--- a/src/ui/scss/component/_search.scss
+++ b/src/ui/scss/component/_search.scss
@@ -1,7 +1,6 @@
 .search__header {
   background-color: $lbry-black;
   color: $lbry-white;
-  min-height: 300px;
   padding: var(--spacing-vertical-large);
 
   .placeholder {
@@ -14,6 +13,7 @@
 
   .media__subtitle {
     color: rgba($lbry-white, 0.9);
+    font-size: 0.7em;
   }
 
   html[data-mode='dark'] & {

From 81fc2d596c907fb5da2d1a5b78e9502560498da5 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Fri, 19 Apr 2019 12:25:28 -0400
Subject: [PATCH 04/12] fix: default thumbnail on prod electron

---
 src/ui/component/cardMedia/view.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ui/component/cardMedia/view.jsx b/src/ui/component/cardMedia/view.jsx
index 6c9f41994..54e692eee 100644
--- a/src/ui/component/cardMedia/view.jsx
+++ b/src/ui/component/cardMedia/view.jsx
@@ -15,7 +15,7 @@ class CardMedia extends React.PureComponent<Props> {
         style={
           thumbnail
             ? { backgroundImage: `url('${thumbnail}')` }
-            : { backgroundImage: `url(/${Placeholder})` }
+            : { backgroundImage: `url(${Placeholder})` }
         }
         className="media__thumb"
       />

From 62a6b739428e17d9c3c8592f24563388f01ce660 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Fri, 19 Apr 2019 12:55:21 -0400
Subject: [PATCH 05/12] only navigate away from claim if abandoning then i can
 still see other claims on that page

---
 src/ui/modal/modalRemoveFile/index.js | 4 ++--
 src/ui/redux/actions/file.js          | 6 +++++-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/ui/modal/modalRemoveFile/index.js b/src/ui/modal/modalRemoveFile/index.js
index 9b44ce8d0..59d0cdb70 100644
--- a/src/ui/modal/modalRemoveFile/index.js
+++ b/src/ui/modal/modalRemoveFile/index.js
@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import { doDeleteFileAndGoBack } from 'redux/actions/file';
+import { doDeleteFileAndMaybeGoBack } from 'redux/actions/file';
 import { makeSelectTitleForUri, makeSelectClaimIsMine, makeSelectFileInfoForUri } from 'lbry-redux';
 import { doHideModal } from 'redux/actions/app';
 import ModalRemoveFile from './view';
@@ -13,7 +13,7 @@ const select = (state, props) => ({
 const perform = dispatch => ({
   closeModal: () => dispatch(doHideModal()),
   deleteFile: (fileInfo, deleteFromComputer, abandonClaim) => {
-    dispatch(doDeleteFileAndGoBack(fileInfo, deleteFromComputer, abandonClaim));
+    dispatch(doDeleteFileAndMaybeGoBack(fileInfo, deleteFromComputer, abandonClaim));
   },
 });
 
diff --git a/src/ui/redux/actions/file.js b/src/ui/redux/actions/file.js
index fee8cb114..4fba2425d 100644
--- a/src/ui/redux/actions/file.js
+++ b/src/ui/redux/actions/file.js
@@ -10,6 +10,7 @@ import {
   selectFileInfosByOutpoint,
 } from 'lbry-redux';
 import { doHideModal } from 'redux/actions/app';
+import { goBack } from 'connected-react-router';
 
 export function doOpenFileInFolder(path) {
   return () => {
@@ -58,11 +59,14 @@ export function doDeleteFile(outpoint, deleteFromComputer, abandonClaim) {
   };
 }
 
-export function doDeleteFileAndGoBack(fileInfo, deleteFromComputer, abandonClaim) {
+export function doDeleteFileAndMaybeGoBack(fileInfo, deleteFromComputer, abandonClaim) {
   return dispatch => {
     const actions = [];
     actions.push(doHideModal());
     actions.push(doDeleteFile(fileInfo, deleteFromComputer, abandonClaim));
     dispatch(batchActions(...actions));
+    if (abandonClaim) {
+      dispatch(goBack());
+    }
   };
 }

From 58f655ae85a5c12ff9a5bbb34b66731785967c53 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Fri, 19 Apr 2019 12:57:00 -0400
Subject: [PATCH 06/12] prevent long download path links from screwing up the
 page layout

---
 src/ui/component/fileDetails/view.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/ui/component/fileDetails/view.jsx b/src/ui/component/fileDetails/view.jsx
index fc55a98a3..72bdee683 100644
--- a/src/ui/component/fileDetails/view.jsx
+++ b/src/ui/component/fileDetails/view.jsx
@@ -104,6 +104,7 @@ class FileDetails extends PureComponent<Props> {
                 {__('Downloaded to')}
                 {': '}
                 <Button
+                  constrict
                   button="link"
                   onClick={() => openFolder(downloadPath)}
                   label={downloadNote || downloadPath}

From 0b4919db3fd820a8b7cf4dddebcc24eed8ef23fc Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Fri, 19 Apr 2019 13:56:58 -0400
Subject: [PATCH 07/12] fix: don't show insufficient credits message on my own
 claims

---
 src/ui/page/file/view.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/ui/page/file/view.jsx b/src/ui/page/file/view.jsx
index ddd779975..36250354f 100644
--- a/src/ui/page/file/view.jsx
+++ b/src/ui/page/file/view.jsx
@@ -151,7 +151,7 @@ class FilePage extends React.Component<Props> {
       mediaType,
       contentType,
       fileName,
-    })
+    });
     const showFile =
       PLAYABLE_MEDIA_TYPES.includes(mediaType) || PREVIEW_MEDIA_TYPES.includes(mediaType);
 
@@ -176,7 +176,7 @@ class FilePage extends React.Component<Props> {
       editUri = buildURI(uriObject);
     }
 
-    const insufficientCredits = costInfo && costInfo.cost > balance;
+    const insufficientCredits = !claimIsMine && costInfo && costInfo.cost > balance;
 
     return (
       <Page notContained className="main--file-page">

From af4b34146e498e03850f15b8639a6ec53ec6d935 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Fri, 19 Apr 2019 14:02:46 -0400
Subject: [PATCH 08/12] add lbry uri navigation on search page and make it easy
 to copy

---
 src/ui/page/file/view.jsx         | 4 +---
 src/ui/page/search/view.jsx       | 5 ++++-
 src/ui/scss/component/_media.scss | 1 +
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/ui/page/file/view.jsx b/src/ui/page/file/view.jsx
index 36250354f..47a506fc3 100644
--- a/src/ui/page/file/view.jsx
+++ b/src/ui/page/file/view.jsx
@@ -181,9 +181,7 @@ class FilePage extends React.Component<Props> {
     return (
       <Page notContained className="main--file-page">
         <div className="grid-area--content">
-          <h1 className="media__uri">
-            <Button navigate={uri} label={uri} />
-          </h1>
+          <h1 className="media__uri">{uri}</h1>
           {insufficientCredits && (
             <div className="media__insufficient-credits help--warning">
               {__(
diff --git a/src/ui/page/search/view.jsx b/src/ui/page/search/view.jsx
index c28774704..97e80f753 100644
--- a/src/ui/page/search/view.jsx
+++ b/src/ui/page/search/view.jsx
@@ -10,6 +10,7 @@ import Page from 'component/page';
 import ToolTip from 'component/common/tooltip';
 import Icon from 'component/common/icon';
 import SearchOptions from 'component/searchOptions';
+import Button from 'component/button';
 
 type Props = { doSearch: string => void, location: UrlLocation };
 
@@ -43,7 +44,9 @@ export default function SearchPage(props: Props) {
           <Fragment>
             {isValid && (
               <header className="search__header">
-                <h1 className="media__uri">{uri}</h1>
+                <Button navigate={uri} className="media__uri">
+                  {uri}
+                </Button>
                 {isChannel ? (
                   <ChannelTile size="large" isSearchResult uri={uri} />
                 ) : (
diff --git a/src/ui/scss/component/_media.scss b/src/ui/scss/component/_media.scss
index be8c545f5..37072a30d 100644
--- a/src/ui/scss/component/_media.scss
+++ b/src/ui/scss/component/_media.scss
@@ -145,6 +145,7 @@
   font-size: 1.1rem;
   padding-bottom: 5px;
   opacity: 0.6;
+  user-select: all;
 }
 
 .media__insufficient-credits {

From 538cf4dc460309e01cb9d90b644d819254bd8e9b Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Fri, 19 Apr 2019 14:47:25 -0400
Subject: [PATCH 09/12] encode search query before navigating

---
 src/ui/component/wunderbar/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ui/component/wunderbar/index.js b/src/ui/component/wunderbar/index.js
index 9945ff217..50f849afb 100644
--- a/src/ui/component/wunderbar/index.js
+++ b/src/ui/component/wunderbar/index.js
@@ -22,7 +22,7 @@ const select = state => ({
 
 const perform = (dispatch, ownProps) => ({
   onSearch: query => {
-    ownProps.history.push({ pathname: `/$/search`, search: `?q=${query}` });
+    ownProps.history.push({ pathname: `/$/search`, search: `?q=${encodeURIComponent(query)}` });
     analytics.apiLogSearch();
   },
   onSubmit: uri => {

From f52c4f229719a264ad0f94774e8e997f2b219295 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Fri, 19 Apr 2019 15:28:43 -0400
Subject: [PATCH 10/12] fix: account locked styling

---
 src/ui/page/rewards/view.jsx | 42 +++++++++++++++++++-----------------
 1 file changed, 22 insertions(+), 20 deletions(-)

diff --git a/src/ui/page/rewards/view.jsx b/src/ui/page/rewards/view.jsx
index 65aab22ae..91ac446d3 100644
--- a/src/ui/page/rewards/view.jsx
+++ b/src/ui/page/rewards/view.jsx
@@ -56,26 +56,28 @@ class RewardsPage extends PureComponent<Props> {
       }
       return (
         <section className="card card--section">
-          <p>
-            {__(
-              'This account must undergo review before you can participate in the rewards program.'
-            )}{' '}
-            {__('This can take anywhere from several minutes to several days.')}
-          </p>
+          <div className="card__content">
+            <p>
+              {__(
+                'This account must undergo review before you can participate in the rewards program.'
+              )}{' '}
+              {__('This can take anywhere from several minutes to several days.')}
+            </p>
 
-          <p>
-            {__(
-              'We apologize for this inconvenience, but have added this additional step to prevent fraud.'
-            )}
-          </p>
-          <p>
-            {`${__('If you continue to see this message, send us an email to help@lbry.com.')} ${__(
-              'Please enjoy free content in the meantime!'
-            )}`}
-          </p>
-          <p>
+            <p>
+              {__(
+                'We apologize for this inconvenience, but have added this additional step to prevent fraud.'
+              )}
+            </p>
+            <p>
+              {`${__(
+                'If you continue to see this message, send us an email to help@lbry.com.'
+              )} ${__('Please enjoy free content in the meantime!')}`}
+            </p>
+          </div>
+          <div className="card__actions">
             <Button navigate="/" button="primary" label="Return Home" />
-          </p>
+          </div>
         </section>
       );
     }
@@ -138,8 +140,8 @@ class RewardsPage extends PureComponent<Props> {
             <p className="card__content">
               {claimed && claimed.length
                 ? __(
-                    "You have claimed all available rewards! We're regularly adding more so be sure to check back later."
-                  )
+                  "You have claimed all available rewards! We're regularly adding more so be sure to check back later."
+                )
                 : __('There are no rewards available at this time, please check back later.')}
             </p>
           </section>

From 4e97858d597ebf3b2ee4218796bb1a761710a9da Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Fri, 19 Apr 2019 15:30:53 -0400
Subject: [PATCH 11/12] dark scrollbar styling

---
 src/ui/scss/component/_scrollbar.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/ui/scss/component/_scrollbar.scss b/src/ui/scss/component/_scrollbar.scss
index 10a4a8856..a554ae4b1 100644
--- a/src/ui/scss/component/_scrollbar.scss
+++ b/src/ui/scss/component/_scrollbar.scss
@@ -20,4 +20,8 @@
 
 ::-webkit-scrollbar-track {
   background-color: transparent;
+
+  html[data-mode='dark'] & {
+    background-color: $lbry-black;
+  }
 }

From 7c852b30b8313a3234394c633855d882cd0512cd Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Fri, 19 Apr 2019 17:15:41 -0400
Subject: [PATCH 12/12] add back invite guide

---
 src/ui/component/sideBar/index.js       |  2 ++
 src/ui/component/sideBar/view.jsx       | 48 ++++++++++++++++---------
 src/ui/redux/selectors/app.js           |  8 +++++
 src/ui/scss/all.scss                    |  1 -
 src/ui/scss/component/_banner.scss      |  1 +
 src/ui/scss/component/_file-render.scss |  1 -
 src/ui/scss/component/_menu.scss        | 10 ------
 src/ui/scss/component/_navigation.scss  |  4 +--
 src/ui/scss/component/_tooltip.scss     |  2 --
 9 files changed, 44 insertions(+), 33 deletions(-)
 delete mode 100644 src/ui/scss/component/_menu.scss

diff --git a/src/ui/component/sideBar/index.js b/src/ui/component/sideBar/index.js
index 1e874f605..0b3b67846 100644
--- a/src/ui/component/sideBar/index.js
+++ b/src/ui/component/sideBar/index.js
@@ -1,9 +1,11 @@
 import { connect } from 'react-redux';
 import { selectUnreadAmount } from 'redux/selectors/subscriptions';
+import { selectShouldShowInviteGuide } from 'redux/selectors/app';
 import SideBar from './view';
 
 const select = state => ({
   unreadSubscriptionTotal: selectUnreadAmount(state),
+  shouldShowInviteGuide: selectShouldShowInviteGuide(state),
 });
 
 const perform = () => ({});
diff --git a/src/ui/component/sideBar/view.jsx b/src/ui/component/sideBar/view.jsx
index af31ff32d..5a626a59d 100644
--- a/src/ui/component/sideBar/view.jsx
+++ b/src/ui/component/sideBar/view.jsx
@@ -6,37 +6,46 @@ import Button from 'component/button';
 import classnames from 'classnames';
 import Tooltip from 'component/common/tooltip';
 
-type SideBarLink = {
-  label: string,
-  path: string,
-  active: boolean,
-  icon: ?string,
-  subLinks: Array<SideBarLink>,
-  guide: ?string,
-};
-
 type Props = {
   unreadSubscriptionTotal: number,
+  shouldShowInviteGuide: string,
 };
 
 class SideBar extends React.PureComponent<Props> {
   render() {
-    const { unreadSubscriptionTotal } = this.props;
-    const buildLink = (path, label, icon) => ({
+    const { unreadSubscriptionTotal, shouldShowInviteGuide } = this.props;
+    const buildLink = (path, label, icon, guide) => ({
       navigate: path ? `$/${path}` : '/',
       label,
       icon,
+      guide,
     });
 
-    const renderLink = (linkProps, index) => (
-      <li key={index}>
+    const renderLink = (linkProps, index) => {
+      const { guide } = linkProps;
+
+      const inner = (
         <Button
           {...linkProps}
-          className="navigation__link"
+          className={classnames('navigation__link', {
+            'navigation__link--guide': guide,
+          })}
           activeClass="navigation__link--active"
         />
-      </li>
-    );
+      );
+
+      return (
+        <li key={index}>
+          {guide ? (
+            <Tooltip key={guide} alwaysVisible direction="right" body={guide}>
+              {inner}
+            </Tooltip>
+          ) : (
+            inner
+          )}
+        </li>
+      );
+    };
 
     return (
       <nav className="navigation">
@@ -70,7 +79,12 @@ class SideBar extends React.PureComponent<Props> {
               ...buildLink(PAGES.ACCOUNT, 'Overview', ICONS.ACCOUNT),
             },
             {
-              ...buildLink(PAGES.INVITE, 'Invite', ICONS.INVITE),
+              ...buildLink(
+                PAGES.INVITE,
+                'Invite',
+                ICONS.INVITE,
+                shouldShowInviteGuide && __('Check this out!')
+              ),
             },
             {
               ...buildLink(PAGES.REWARDS, 'Rewards', ICONS.FEATURED),
diff --git a/src/ui/redux/selectors/app.js b/src/ui/redux/selectors/app.js
index 69c4fdee3..85e23eac2 100644
--- a/src/ui/redux/selectors/app.js
+++ b/src/ui/redux/selectors/app.js
@@ -138,3 +138,11 @@ export const selectSearchOptionsExpanded = createSelector(
   selectState,
   state => state.searchOptionsExpanded
 );
+
+export const selectShouldShowInviteGuide = createSelector(
+  makeSelectClientSetting(SETTINGS.FIRST_RUN_COMPLETED),
+  makeSelectClientSetting(SETTINGS.INVITE_ACKNOWLEDGED),
+  (firstRunCompleted, inviteAcknowledged) => {
+    return firstRunCompleted ? !inviteAcknowledged : false;
+  }
+);
diff --git a/src/ui/scss/all.scss b/src/ui/scss/all.scss
index db0ad0fee..b117a2b2c 100644
--- a/src/ui/scss/all.scss
+++ b/src/ui/scss/all.scss
@@ -28,7 +28,6 @@
 @import 'component/markdown-editor';
 @import 'component/markdown-preview';
 @import 'component/media';
-@import 'component/menu';
 @import 'component/modal';
 @import 'component/navigation';
 @import 'component/notice';
diff --git a/src/ui/scss/component/_banner.scss b/src/ui/scss/component/_banner.scss
index 1cb809241..7b71ce173 100644
--- a/src/ui/scss/component/_banner.scss
+++ b/src/ui/scss/component/_banner.scss
@@ -7,6 +7,7 @@
 
 .banner--first-run {
   height: 310px;
+  padding-right: var(--spacing-vertical-medium);
 
   // Adjust this class inside other `.banner--xxx` styles for control over animation
   .banner__item--static-for-animation {
diff --git a/src/ui/scss/component/_file-render.scss b/src/ui/scss/component/_file-render.scss
index abd4fff00..093db5e93 100644
--- a/src/ui/scss/component/_file-render.scss
+++ b/src/ui/scss/component/_file-render.scss
@@ -6,7 +6,6 @@
 
   overflow: hidden;
   position: absolute;
-  z-index: 1;
 
   html[data-mode='dark'] & {
     border: 1px solid rgba($lbry-gray-1, 0.3);
diff --git a/src/ui/scss/component/_menu.scss b/src/ui/scss/component/_menu.scss
deleted file mode 100644
index c2bd27a94..000000000
--- a/src/ui/scss/component/_menu.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-.menu-container {
-  display: inline-block;
-
-  .menu {
-    padding-top: var(--spacing-vertical-medium);
-    position: absolute;
-    white-space: nowrap;
-    z-index: 1;
-  }
-}
diff --git a/src/ui/scss/component/_navigation.scss b/src/ui/scss/component/_navigation.scss
index 805785e64..5ef13c6af 100644
--- a/src/ui/scss/component/_navigation.scss
+++ b/src/ui/scss/component/_navigation.scss
@@ -4,12 +4,13 @@
   height: calc(100vh - var(--header-height));
   display: flex;
   flex-direction: column;
-  overflow-y: overlay;
+  overflow: visible;
   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;
+  z-index: 2;
 
   html[data-mode='dark'] & {
     background-color: $lbry-black;
@@ -41,7 +42,6 @@
     );
     content: '';
     position: absolute;
-    z-index: 0;
 
     html[data-mode='dark'] & {
       background-image: linear-gradient(
diff --git a/src/ui/scss/component/_tooltip.scss b/src/ui/scss/component/_tooltip.scss
index dfd460622..35e24abb1 100644
--- a/src/ui/scss/component/_tooltip.scss
+++ b/src/ui/scss/component/_tooltip.scss
@@ -3,8 +3,6 @@
   position: relative;
 
   .tooltip__body {
-    z-index: 2;
-
     visibility: hidden;
   }