move upgrade message to bottom right of screen

src/ui/component/app/index.js

@@ -3,12 +3,16 @@ import { connect } from 'react-redux';
 import { doError, doFetchTransactions } from 'lbry-redux';
 import { selectUser, doRewardList, doFetchRewardedContent, doFetchAccessToken, selectAccessToken } from 'lbryinc';
 import { selectThemePath } from 'redux/selectors/settings';
+import { selectIsUpgradeAvailable, selectAutoUpdateDownloaded } from 'redux/selectors/app';
+import { doDownloadUpgradeRequested } from 'redux/actions/app';
 import App from './view';
 
 const select = state => ({
   user: selectUser(state),
   theme: selectThemePath(state),
   accessToken: selectAccessToken(state),
+  autoUpdateDownloaded: selectAutoUpdateDownloaded(state),
+  isUpgradeAvailable: selectIsUpgradeAvailable(state),
 });
 
 const perform = dispatch => ({
@@ -17,6 +21,7 @@ const perform = dispatch => ({
   fetchRewardedContent: () => dispatch(doFetchRewardedContent()),
   fetchTransactions: () => dispatch(doFetchTransactions()),
   fetchAccessToken: () => dispatch(doFetchAccessToken()),
+  requestDownloadUpgrade: () => dispatch(doDownloadUpgradeRequested()),
 });
 
 export default hot(

src/ui/component/app/view.jsx

@@ -1,4 +1,5 @@
 // @flow
+import * as ICONS from 'constants/icons';
 import React, { useEffect, useRef } from 'react';
 import analytics from 'analytics';
 import { Lbry, buildURI, parseURI } from 'lbry-redux';
@@ -7,6 +8,7 @@ import ModalRouter from 'modal/modalRouter';
 import ReactModal from 'react-modal';
 import SideBar from 'component/sideBar';
 import Header from 'component/header';
+import Button from 'component/button';
 import { openContextMenu } from 'util/context-menu';
 import useKonamiListener from 'util/enhanced-layout';
 import Yrbl from 'component/yrbl';
@@ -28,10 +30,24 @@ type Props = {
   fetchRewardedContent: () => void,
   fetchTransactions: () => void,
   fetchAccessToken: () => void,
+  autoUpdateDownloaded: boolean,
+  isUpgradeAvailable: boolean,
+  requestDownloadUpgrade: () => void,
 };
 
 function App(props: Props) {
-  const { theme, fetchRewards, fetchRewardedContent, fetchTransactions, user, fetchAccessToken, accessToken } = props;
+  const {
+    theme,
+    fetchRewards,
+    fetchRewardedContent,
+    fetchTransactions,
+    user,
+    fetchAccessToken,
+    accessToken,
+    requestDownloadUpgrade,
+    autoUpdateDownloaded,
+    isUpgradeAvailable,
+  } = props;
   const appRef = useRef();
   const isEnhancedLayout = useKonamiListener();
   const userId = user && user.id;
@@ -41,6 +57,7 @@ function App(props: Props) {
   const previousHasVerifiedEmail = usePrevious(hasVerifiedEmail);
   const previousRewardApproved = usePrevious(isRewardApproved);
   const { pathname, hash } = props.location;
+  const showUpgradeButton = autoUpdateDownloaded || (process.platform === 'linux' && isUpgradeAvailable);
 
   let uri;
   try {
@@ -104,6 +121,20 @@ function App(props: Props) {
       <ModalRouter />
       <FileViewer pageUri={uri} />
 
+      {/* @if TARGET='app' */}
+      {showUpgradeButton && (
+        <div className="snack-bar--upgrade">
+          {__('Upgrade is ready')}
+          <Button
+            className="snack-bar__action"
+            button="alt"
+            icon={ICONS.DOWNLOAD}
+            label={__('Install now')}
+            onClick={requestDownloadUpgrade}
+          />
+        </div>
+      )}
+      {/* @endif */}
       {isEnhancedLayout && <Yrbl className="yrbl--enhanced" />}
     </div>
   );

src/ui/component/header/index.js

@@ -4,8 +4,6 @@ import { selectBalance, SETTINGS as LBRY_REDUX_SETTINGS } from 'lbry-redux';
 import { formatCredits } from 'util/format-credits';
 import { doSetClientSetting } from 'redux/actions/settings';
 import { makeSelectClientSetting } from 'redux/selectors/settings';
-import { selectIsUpgradeAvailable, selectAutoUpdateDownloaded } from 'redux/selectors/app';
-import { doDownloadUpgradeRequested } from 'redux/actions/app';
 
 import Header from './view';
 
@@ -16,13 +14,10 @@ const select = state => ({
   currentTheme: makeSelectClientSetting(SETTINGS.THEME)(state),
   automaticDarkModeEnabled: makeSelectClientSetting(SETTINGS.AUTOMATIC_DARK_MODE_ENABLED)(state),
   hideBalance: makeSelectClientSetting(SETTINGS.HIDE_BALANCE)(state),
-  autoUpdateDownloaded: selectAutoUpdateDownloaded(state),
-  isUpgradeAvailable: selectIsUpgradeAvailable(state),
 });
 
 const perform = dispatch => ({
   setClientSetting: (key, value) => dispatch(doSetClientSetting(key, value)),
-  doDownloadUpgradeRequested: () => dispatch(doDownloadUpgradeRequested()),
 });
 
 export default connect(

src/ui/component/header/view.jsx

@@ -20,24 +20,10 @@ type Props = {
   automaticDarkModeEnabled: boolean,
   setClientSetting: (string, boolean | string) => void,
   hideBalance: boolean,
-  autoUpdateDownloaded: boolean,
-  isUpgradeAvailable: boolean,
-  doDownloadUpgradeRequested: () => void,
 };
 
 const Header = (props: Props) => {
-  const {
-    roundedBalance,
-    history,
-    setClientSetting,
-    currentTheme,
-    automaticDarkModeEnabled,
-    hideBalance,
-    autoUpdateDownloaded,
-    isUpgradeAvailable,
-    doDownloadUpgradeRequested,
-  } = props;
-  const showUpgradeButton = autoUpdateDownloaded || (process.platform === 'linux' && isUpgradeAvailable);
+  const { roundedBalance, history, setClientSetting, currentTheme, automaticDarkModeEnabled, hideBalance } = props;
 
   function handleThemeToggle() {
     if (automaticDarkModeEnabled) {
@@ -143,16 +129,6 @@ const Header = (props: Props) => {
           </Menu>
         </div>
       </div>
-      {/* @if TARGET='app' */}
-      {showUpgradeButton && (
-        <div className="header__banner-background">
-          <div className="header__banner-contents">
-            {__('Upgrade is ready')}
-            <Button button="alt" icon={ICONS.DOWNLOAD} label={__('Install now')} onClick={doDownloadUpgradeRequested} />
-          </div>
-        </div>
-      )}
-      {/* @endif */}
     </header>
   );
 };

src/ui/scss/component/_snack-bar.scss

@@ -1,7 +1,6 @@
 .snack-bar {
   bottom: 2rem;
   left: 2rem;
-
   background-color: $lbry-teal-4;
   border-radius: 0.5rem;
   color: $lbry-white;
@@ -11,6 +10,17 @@
   z-index: 10000; // hack to get it over react modal
 }
 
+.snack-bar--upgrade {
+  @extend .snack-bar;
+  left: auto;
+  right: 2rem;
+  background-color: $lbry-grape-4;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
 .snack-bar--error {
   background-color: $lbry-red-5;
 }
@@ -19,7 +29,6 @@
   display: inline-block;
   margin: var(--spacing-small) 0;
   min-width: min-content;
-  text-transform: uppercase;
 
   span:hover {
     text-decoration: underline;