update upgrade message

CHANGELOG.md

@@ -15,6 +15,7 @@ Web UI version numbers should always match the corresponding version of LBRY App
   * Updated the daemon from 0.16.1 to [0.16.3](https://github.com/lbryio/lbry/releases/tag/v0.16.3) to improve download performance and download issue detection.
   * There is no longer a minimum channel length (#645)
   * Changed the File page to make it clearer how to to open the folder for a file
+  * The upgrade message is now friendlier and includes a link to the release notes.
 
 ### Fixed
   * Improve layout (and implementation) of the icon panel in file tiles and cards

ui/js/actions/app.js

@@ -10,6 +10,7 @@ import { doFetchDaemonSettings } from "actions/settings";
 import { doBalanceSubscribe } from "actions/wallet";
 import { doAuthenticate } from "actions/user";
 import { doFetchFileInfosAndPublishedClaims } from "actions/file_info";
+import * as modals from "constants/modal_types";
 
 const { remote, ipcRenderer, shell } = require("electron");
 const path = require("path");
@@ -96,7 +97,7 @@ export function doDownloadUpgrade() {
     dispatch({
       type: types.OPEN_MODAL,
       data: {
-        modal: "downloading",
+        modal: modals.DOWNLOADING,
       },
     });
   };
@@ -140,7 +141,7 @@ export function doCheckUpgradeAvailable() {
         dispatch({
           type: types.OPEN_MODAL,
           data: {
-            modal: "upgrade",
+            modal: modals.UPGRADE,
           },
         });
       }
@@ -166,7 +167,7 @@ export function doAlertError(errorList) {
     dispatch({
       type: types.OPEN_MODAL,
       data: {
-        modal: "error",
+        modal: modals.ERROR,
         modalProps: { error: errorList },
       },
     });

ui/js/component/splash/view.jsx

@@ -4,6 +4,7 @@ import LoadScreen from "../load_screen.js";
 import ModalIncompatibleDaemon from "modal/modalIncompatibleDaemon";
 import ModalUpgrade from "modal/modalUpgrade";
 import ModalDownloading from "modal/modalDownloading";
+import * as modals from "constants/modal_types";
 
 export class SplashScreen extends React.PureComponent {
   static propTypes = {
@@ -111,8 +112,10 @@ export class SplashScreen extends React.PureComponent {
         {modal == "incompatibleDaemon" &&
           this.state.isRunning &&
           <ModalIncompatibleDaemon />}
-        {modal == "upgrade" && this.state.isRunning && <ModalUpgrade />}
-        {modal == "downloading" && this.state.isRunning && <ModalDownloading />}
+        {modal == modals.UPGRADE && this.state.isRunning && <ModalUpgrade />}
+        {modal == modals.DOWNLOADING &&
+          this.state.isRunning &&
+          <ModalDownloading />}
       </div>
     );
   }

ui/js/modal/modalRouter/view.jsx

@@ -103,7 +103,7 @@ class ModalRouter extends React.PureComponent {
   render() {
     const { modal, modalProps } = this.props;
 
-    switch (modal) {
+    switch ("upgrade") {
       case modals.UPGRADE:
         return <ModalUpgrade {...modalProps} />;
       case modals.DOWNLOADING:

ui/js/modal/modalUpgrade/view.jsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { Modal } from "modal/modal";
+import Link from "component/link";
 
 class ModalUpgrade extends React.PureComponent {
   render() {
@@ -8,16 +9,28 @@ class ModalUpgrade extends React.PureComponent {
     return (
       <Modal
         isOpen={true}
-        contentLabel={__("Update available")}
+        contentLabel={__("Upgrade available")}
         type="confirm"
         confirmButtonLabel={__("Upgrade")}
         abortButtonLabel={__("Skip")}
         onConfirmed={downloadUpgrade}
         onAborted={skipUpgrade}
       >
-        {__(
-          "Your version of LBRY is out of date and may be unreliable or insecure."
-        )}
+        <h3 className="text-center">{__("LBRY Just Got BTTR")}</h3>
+        <br />
+        <p>
+          {__("An updated version of LBRY is now available.")}
+          {" "}
+          {__("Your version is out of date and may be unreliable or insecure.")}
+        </p>
+        <p className="meta text-center">
+          {__("Want to know what has changed?")}
+          {" "} See the{" "}
+          <Link
+            label={__("release notes")}
+            href="https://github.com/lbryio/lbry-app/releases"
+          />.
+        </p>
       </Modal>
     );
   }