upgrade banner to header

src/ui/component/header/index.js

@@ -4,6 +4,9 @@ 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';
 
 const select = state => ({
@@ -13,10 +16,13 @@ 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,
 });
 
 export default connect(

src/ui/component/header/view.jsx

@@ -20,10 +20,24 @@ 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 } = props;
+  const {
+    roundedBalance,
+    history,
+    setClientSetting,
+    currentTheme,
+    automaticDarkModeEnabled,
+    hideBalance,
+    autoUpdateDownloaded,
+    isUpgradeAvailable,
+    doDownloadUpgradeRequested,
+  } = props;
+  const showUpgradeButton = autoUpdateDownloaded || (process.platform === 'linux' && isUpgradeAvailable);
 
   function handleThemeToggle() {
     if (automaticDarkModeEnabled) {
@@ -129,6 +143,16 @@ 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/component/page/index.js

@@ -1,16 +1,3 @@
-import { connect } from 'react-redux';
-import { selectIsUpgradeAvailable, selectAutoUpdateDownloaded } from 'redux/selectors/app';
-import { doDownloadUpgradeRequested } from 'redux/actions/app';
 import Page from './view';
 
-const select = state => ({
-  autoUpdateDownloaded: selectAutoUpdateDownloaded(state),
-  isUpgradeAvailable: selectIsUpgradeAvailable(state),
-});
-
-export default connect(
-  select,
-  {
-    doDownloadUpgradeRequested,
-  }
-)(Page);
+export default Page;

src/ui/component/page/view.jsx

@@ -1,34 +1,16 @@
 // @flow
-import * as ICONS from 'constants/icons';
 import * as React from 'react';
 import classnames from 'classnames';
-import Button from 'component/button';
 
 type Props = {
   children: React.Node | Array<React.Node>,
   className: ?string,
-  autoUpdateDownloaded: boolean,
-  isUpgradeAvailable: boolean,
-  doDownloadUpgradeRequested: () => void,
 };
 
 function Page(props: Props) {
-  const { children, className, autoUpdateDownloaded, isUpgradeAvailable, doDownloadUpgradeRequested } = props;
-  const showUpgradeButton = autoUpdateDownloaded || (process.platform === 'linux' && isUpgradeAvailable);
+  const { children, className } = props;
 
-  return (
-    <main className={classnames('main', className)}>
-      {/* @if TARGET='app' */}
-      {showUpgradeButton && (
-        <div className="main__status">
-          {__('Upgrade is ready')}
-          <Button button="alt" icon={ICONS.DOWNLOAD} label={__('Install now')} onClick={doDownloadUpgradeRequested} />
-        </div>
-      )}
-      {/* @endif */}
-      {children}
-    </main>
-  );
+  return <main className={classnames('main', className)}>{children}</main>;
 }
 
 export default Page;

src/ui/scss/component/_header.scss

@@ -91,6 +91,34 @@
     }
   }
 }
+.header__banner-background {
+  display: flex;
+  background-color: $lbry-teal-4;
+  [data-mode='dark'] & {
+    background-color: $lbry-teal-5;
+    color: $lbry-white;
+  }
+}
+
+.header__banner-contents {
+  display: flex;
+  max-width: var(--page-max-width);
+  width: 100%;
+  margin: auto;
+  padding: 0 var(--spacing-large);
+  justify-content: space-between;
+  background-color: $lbry-teal-4;
+  color: $lbry-white;
+
+  svg {
+    stroke: $lbry-white;
+  }
+
+  [data-mode='dark'] & {
+    background-color: $lbry-teal-5;
+    color: $lbry-white;
+  }
+}
 
 .header__navigation-item--back,
 .header__navigation-item--forward {