move upgrade prompt to a <Nag />

static/app-strings.json

@@ -903,5 +903,6 @@
   "Error Starting Up": "Error Starting Up",
   "Reach out to hello@lbry.com for help, or check out %help_link%.": "Reach out to hello@lbry.com for help, or check out %help_link%.",
   "You're not following any tags. Smash that %customize% button!": "You're not following any tags. Smash that %customize% button!",
-  "customize": "customize"
+  "customize": "customize",
+  "An upgrade is available.": "An upgrade is available."
 }

ui/component/app/view.jsx

@@ -1,5 +1,4 @@
 // @flow
-import * as ICONS from 'constants/icons';
 import * as PAGES from 'constants/pages';
 import React, { useEffect, useRef, useState } from 'react';
 import classnames from 'classnames';
@@ -14,7 +13,7 @@ import Yrbl from 'component/yrbl';
 import FileViewer from 'component/fileViewer';
 import { withRouter } from 'react-router';
 import usePrevious from 'effects/use-previous';
-import Button from 'component/button';
+import Nag from 'component/common/nag';
 // @if TARGET='web'
 import OpenInAppLink from 'component/openInAppLink';
 import YoutubeWelcome from 'component/youtubeWelcome';
@@ -205,16 +204,7 @@ function App(props: Props) {
 
       {/* @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>
+        <Nag message={__('An upgrade is available.')} actionText={__('Install now')} onClick={requestDownloadUpgrade} />
       )}
       {/* @endif */}
       {isEnhancedLayout && <Yrbl className="yrbl--enhanced" />}

ui/component/common/nag.jsx

@@ -0,0 +1,28 @@
+// @flow
+import * as ICONS from 'constants/icons';
+import React from 'react';
+import Button from 'component/button';
+
+type Props = {
+  message: string,
+  actionText: string,
+  href?: string,
+  onClick?: () => void,
+  onClose?: () => void,
+};
+
+export default function Nag(props: Props) {
+  const { message, actionText, href, onClick, onClose } = props;
+
+  const buttonProps = onClick ? { onClick } : { href };
+
+  return (
+    <div className="nag">
+      {message}
+      <Button className="nag__button" {...buttonProps}>
+        {actionText}
+      </Button>
+      {onClose && <Button className="nag__button nag__close" icon={ICONS.REMOVE} onClick={onClose} />}
+    </div>
+  );
+}

ui/component/openInAppLink/view.jsx

@@ -1,17 +1,16 @@
 // @flow
-import * as ICONS from 'constants/icons';
-import * as PAGES from 'constants/pages';
 import React from 'react';
-import Button from 'component/button';
 import { withRouter } from 'react-router';
 import userPersistedState from 'effects/use-persisted-state';
+import { formatWebUrlIntoLbryUrl } from 'util/url';
+import Nag from 'component/common/nag';
 
 const userAgent = navigator.userAgent.toLowerCase();
 const isAndroid = userAgent.includes('android');
 const isDesktop = typeof window.orientation === 'undefined';
 
 type Props = {
-  history: { replace: string => void },
+  history: { replace: string => void, push: string => void },
   location: { search: string, pathname: string },
   uri: string,
   user: ?User,
@@ -35,15 +34,7 @@ function OpenInAppLink(props: Props) {
   let appLink = uri;
 
   if (!appLink) {
-    // If there is no uri, the user is on an internal page
-    // pathname will either be "/" or "/$/{page}"
-    const path = pathname.startsWith('/$/') ? pathname.slice(3) : pathname.slice(1);
-    appLink = `lbry://?${path || PAGES.DISCOVER}`;
-
-    if (search) {
-      // We already have a leading "?" for the query param on internal pages
-      appLink += search.replace('?', '&');
-    }
+    appLink = formatWebUrlIntoLbryUrl(pathname, search);
   }
 
   function handleClose() {
@@ -68,13 +59,7 @@ function OpenInAppLink(props: Props) {
   }
 
   return (
-    <div className="nag">
-      {__('The app is like, better.')}
-      <Button className="nag__button" href={appLink}>
-        {__('Use The App')}
-      </Button>
-      <Button className="nag__button nag__close" icon={ICONS.REMOVE} onClick={handleClose} />
-    </div>
+    <Nag message={__('Want even more freedom?')} actionText={__('Use The App')} href={appLink} onClose={handleClose} />
   );
 }
 

ui/modal/modalYoutubeWelcome/view.jsx

@@ -29,7 +29,7 @@ const YoutubeWelcome = (props: Props) => {
           </React.Fragment>
         }
         actions={
-          <React.Fragment>
+          <div className="card__actions">
             <Button
               button="primary"
               label={__('Create an Account')}
@@ -37,7 +37,7 @@ const YoutubeWelcome = (props: Props) => {
               onClick={doHideModal}
             />
             <Button button="link" label={__('Not Yet')} onClick={doHideModal} />
-          </React.Fragment>
+          </div>
         }
       />
     </Modal>

ui/scss/component/_card.scss

@@ -160,10 +160,6 @@
   padding-bottom: 0;
   margin-bottom: var(--spacing-large);
   border-top: 1px solid var(--color-border);
-
-  .button + .button {
-    margin-left: var(--spacing-medium);
-  }
 }
 
 .card__body--with-icon,

ui/util/url.js

@@ -1,3 +1,5 @@
+const PAGES = require('constants/pages');
+
 exports.formatLbryUrlForWeb = uri => {
   return uri.replace('lbry://', '/').replace(/#/g, ':');
 };
@@ -41,3 +43,17 @@ exports.formatInAppUrl = path => {
   // Regular claim url
   return path;
 };
+
+exports.formatWebUrlIntoLbryUrl = (pathname, search) => {
+  // If there is no uri, the user is on an internal page
+  // pathname will either be "/" or "/$/{page}"
+  const path = pathname.startsWith('/$/') ? pathname.slice(3) : pathname.slice(1);
+  let appLink = `lbry://?${path || PAGES.DISCOVER}`;
+
+  if (search) {
+    // We already have a leading "?" for the query param on internal pages
+    appLink += search.replace('?', '&');
+  }
+
+  return appLink;
+};