Revert "move upgrade prompt to a <Nag />"

This reverts commit 0c125ed2b9.

static/app-strings.json

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

ui/component/common/nag.jsx

@@ -1,28 +0,0 @@
-// @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,16 +1,17 @@
 // @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, push: string => void },
+  history: { replace: string => void },
   location: { search: string, pathname: string },
   uri: string,
   user: ?User,
@@ -34,7 +35,15 @@ function OpenInAppLink(props: Props) {
   let appLink = uri;
 
   if (!appLink) {
-    appLink = 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);
+    appLink = `lbry://?${path || PAGES.DISCOVER}`;
+
+    if (search) {
+      // We already have a leading "?" for the query param on internal pages
+      appLink += search.replace('?', '&');
+    }
   }
 
   function handleClose() {
@@ -59,7 +68,13 @@ function OpenInAppLink(props: Props) {
   }
 
   return (
-    <Nag message={__('Want even more freedom?')} actionText={__('Use The App')} href={appLink} onClose={handleClose} />
+    <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>
   );
 }
 

ui/modal/modalYoutubeWelcome/view.jsx

@@ -29,7 +29,7 @@ const YoutubeWelcome = (props: Props) => {
           </React.Fragment>
         }
         actions={
-          <div className="card__actions">
+          <React.Fragment>
             <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} />
-          </div>
+          </React.Fragment>
         }
       />
     </Modal>

ui/scss/component/_card.scss

@@ -160,6 +160,10 @@
   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,5 +1,3 @@
-const PAGES = require('constants/pages');
-
 exports.formatLbryUrlForWeb = uri => {
   return uri.replace('lbry://', '/').replace(/#/g, ':');
 };
@@ -43,17 +41,3 @@ 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;
-};