From 20b2484cf2b939dbce7cec34ce3c889c97eab257 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Wed, 13 Jun 2018 00:37:21 -0400
Subject: [PATCH 01/11] remove fixed header - allow the whole page to scroll

---
 src/renderer/component/app/view.jsx      | 2 +-
 src/renderer/scss/_gui.scss              | 4 ++--
 src/renderer/scss/component/_header.scss | 2 --
 3 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/renderer/component/app/view.jsx b/src/renderer/component/app/view.jsx
index a6a225df0..23ee922bb 100644
--- a/src/renderer/component/app/view.jsx
+++ b/src/renderer/component/app/view.jsx
@@ -84,8 +84,8 @@ class App extends React.PureComponent<Props> {
         <Theme />
         <main className="page">
           <SideBar />
-          <Header />
           <div className="content" id="content">
+            <Header />
             <Router />
             <ModalRouter />
           </div>
diff --git a/src/renderer/scss/_gui.scss b/src/renderer/scss/_gui.scss
index e7266b68b..48f9b54fc 100644
--- a/src/renderer/scss/_gui.scss
+++ b/src/renderer/scss/_gui.scss
@@ -157,7 +157,7 @@ p {
   grid-template-rows: var(--header-height) calc(100vh - var(--header-height));
   grid-template-columns: var(--side-nav-width) auto;
   grid-template-areas:
-    'nav header'
+    'nav content'
     'nav content';
   background-color: var(--color-bg);
   height: 100vh;
@@ -176,7 +176,7 @@ p {
 */
 .content {
   grid-area: content;
-  overflow: auto;
+  overflow-y: auto;
 }
 
 .main {
diff --git a/src/renderer/scss/component/_header.scss b/src/renderer/scss/component/_header.scss
index 6df42f34e..94eb62974 100644
--- a/src/renderer/scss/component/_header.scss
+++ b/src/renderer/scss/component/_header.scss
@@ -1,11 +1,9 @@
 .header {
-  grid-area: header;
   display: flex;
   z-index: 1;
   justify-content: space-between;
   padding: $spacing-width $spacing-width 0 $spacing-width;
   background-color: var(--color-bg);
-  // height: 100px;
 }
 
 .header__actions-right {

From ee42e5e1b4253200e532f32958128a93394e9098 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Wed, 13 Jun 2018 01:20:53 -0400
Subject: [PATCH 02/11] alignment fixes

---
 .../common/form-components/form-field.jsx     | 26 +++++++++----------
 src/renderer/component/fileList/view.jsx      |  1 +
 .../component/transactionList/view.jsx        |  1 +
 src/renderer/component/walletSend/view.jsx    |  2 ++
 src/renderer/component/walletSendTip/view.jsx |  7 ++++-
 src/renderer/page/getCredits/view.jsx         |  9 +------
 src/renderer/page/settings/view.jsx           | 26 +++++++++----------
 src/renderer/scss/_gui.scss                   |  4 +++
 src/renderer/scss/component/_form-field.scss  | 10 ++++++-
 9 files changed, 48 insertions(+), 38 deletions(-)

diff --git a/src/renderer/component/common/form-components/form-field.jsx b/src/renderer/component/common/form-components/form-field.jsx
index 6b0a9b234..dcbaff85f 100644
--- a/src/renderer/component/common/form-components/form-field.jsx
+++ b/src/renderer/component/common/form-components/form-field.jsx
@@ -4,7 +4,7 @@ import ReactDOMServer from 'react-dom/server';
 import classnames from 'classnames';
 import MarkdownPreview from 'component/common/markdown-preview';
 import SimpleMDE from 'react-simplemde-editor';
-import "simplemde/dist/simplemde.min.css";
+import 'simplemde/dist/simplemde.min.css';
 
 type Props = {
   name: string,
@@ -20,6 +20,7 @@ type Props = {
   placeholder?: string | number,
   children?: React.Node,
   stretch?: boolean,
+  fixClass?: string, // class applied to prefix/postfix label
 };
 
 export class FormField extends React.PureComponent<Props> {
@@ -35,6 +36,7 @@ export class FormField extends React.PureComponent<Props> {
       type,
       children,
       stretch,
+      fixClass,
       ...inputProps
     } = this.props;
 
@@ -55,12 +57,12 @@ export class FormField extends React.PureComponent<Props> {
               {...inputProps}
               type="textarea"
               options={{
-                  hideIcons: ['heading', 'image', 'fullscreen', 'side-by-side'],
-                  previewRender(plainText) {
-                    const preview = <MarkdownPreview content={plainText}/>;
-                    return ReactDOMServer.renderToString(preview);
-                  }
-               }}
+                hideIcons: ['heading', 'image', 'fullscreen', 'side-by-side'],
+                previewRender(plainText) {
+                  const preview = <MarkdownPreview content={plainText} />;
+                  return ReactDOMServer.renderToString(preview);
+                },
+              }}
             />
           </div>
         );
@@ -92,22 +94,18 @@ export class FormField extends React.PureComponent<Props> {
           })}
         >
           {prefix && (
-            <label htmlFor={name} className="form-field__prefix">
+            <label htmlFor={name} className={classnames('form-field__prefix', fixClass)}>
               {prefix}
             </label>
           )}
           {input}
           {postfix && (
-            <label htmlFor={name} className="form-field__postfix">
+            <label htmlFor={name} className={classnames('form-field__postfix', fixClass)}>
               {postfix}
             </label>
           )}
         </div>
-        {helper && (
-          <label htmlFor={name} className="form-field__help">
-            {helper}
-          </label>
-        )}
+        {helper && <div className="form-field__help">{helper}</div>}
       </div>
     );
   }
diff --git a/src/renderer/component/fileList/view.jsx b/src/renderer/component/fileList/view.jsx
index 1f649f527..37905f276 100644
--- a/src/renderer/component/fileList/view.jsx
+++ b/src/renderer/component/fileList/view.jsx
@@ -171,6 +171,7 @@ class FileList extends React.PureComponent<Props, State> {
           {!hideFilter && (
             <FormField
               prefix={__('Sort by')}
+              fixClass="form-field--align-center"
               type="select"
               value={sortBy}
               onChange={this.handleSortChanged}
diff --git a/src/renderer/component/transactionList/view.jsx b/src/renderer/component/transactionList/view.jsx
index c0b84be33..94dfd33b6 100644
--- a/src/renderer/component/transactionList/view.jsx
+++ b/src/renderer/component/transactionList/view.jsx
@@ -96,6 +96,7 @@ class TransactionList extends React.PureComponent<Props, State> {
               type="select"
               value={filter}
               onChange={this.handleFilterChanged}
+              fixClass="form-field--align-center"
               prefix={__('Show')}
               postfix={
                 <Button
diff --git a/src/renderer/component/walletSend/view.jsx b/src/renderer/component/walletSend/view.jsx
index 340cc483d..1be7976fb 100644
--- a/src/renderer/component/walletSend/view.jsx
+++ b/src/renderer/component/walletSend/view.jsx
@@ -56,8 +56,10 @@ class WalletSend extends React.PureComponent<Props> {
                     label={__('Amount')}
                     postfix={__('LBC')}
                     className="input--price-amount"
+                    fixClass="form-field--fix-no-height"
                     min="0"
                     step="any"
+                    placeholder="5"
                     onChange={handleChange}
                     onBlur={handleBlur}
                     value={values.amount}
diff --git a/src/renderer/component/walletSendTip/view.jsx b/src/renderer/component/walletSendTip/view.jsx
index b8dad4480..477932eab 100644
--- a/src/renderer/component/walletSendTip/view.jsx
+++ b/src/renderer/component/walletSendTip/view.jsx
@@ -87,7 +87,12 @@ class WalletSendTip extends React.PureComponent<Props, State> {
               disabled={isPending || amount <= 0 || amount > balance}
               onClick={this.handleSendButtonClicked}
             />
-            <Button button="alt" label={__('Cancel')} onClick={onCancel} navigateParams={{ uri }} />
+            <Button
+              button="link"
+              label={__('Cancel')}
+              onClick={onCancel}
+              navigateParams={{ uri }}
+            />
           </div>
         </div>
       </div>
diff --git a/src/renderer/page/getCredits/view.jsx b/src/renderer/page/getCredits/view.jsx
index e08e77d6b..e7fec2a4b 100644
--- a/src/renderer/page/getCredits/view.jsx
+++ b/src/renderer/page/getCredits/view.jsx
@@ -3,18 +3,11 @@ import Button from 'component/button';
 import RewardSummary from 'component/rewardSummary';
 import ShapeShift from 'component/shapeShift';
 import Page from 'component/page';
-import * as icons from 'constants/icons';
 
-const GetCreditsPage = props => (
+const GetCreditsPage = () => (
   <Page>
     <RewardSummary />
     <ShapeShift />
-    <section className="card card--section">
-      <div className="card__title">{__('From External Wallet')}</div>
-      <div className="card__actions">
-        <Button button="primary" icon={icons.SEND} navigate="/send" label={__('Send / Receive')} />
-      </div>
-    </section>
     <section className="card card--section">
       <div className="card__title">{__('More ways to get LBRY Credits')}</div>
       <div className="card__content">
diff --git a/src/renderer/page/settings/view.jsx b/src/renderer/page/settings/view.jsx
index 766391ce8..544673afa 100644
--- a/src/renderer/page/settings/view.jsx
+++ b/src/renderer/page/settings/view.jsx
@@ -273,20 +273,18 @@ class SettingsPage extends React.PureComponent<Props, State> {
             </section>
             <section className="card card--section">
               <div className="card__title">{__('Share Diagnostic Data')}</div>
-              <div className="card__content">
-                <FormField
-                  type="checkbox"
-                  name="share_usage_data"
-                  onChange={this.onShareDataChange}
-                  checked={daemonSettings.share_usage_data}
-                  postfix={__(
-                    'Help make LBRY better by contributing analytics and diagnostic data about my usage.'
-                  )}
-                  helper={__(
-                    'You will be ineligible to earn rewards while diagnostics are not being shared.'
-                  )}
-                />
-              </div>
+              <FormField
+                type="checkbox"
+                name="share_usage_data"
+                onChange={this.onShareDataChange}
+                checked={daemonSettings.share_usage_data}
+                postfix={__(
+                  'Help make LBRY better by contributing analytics and diagnostic data about my usage.'
+                )}
+                helper={__(
+                  'You will be ineligible to earn rewards while diagnostics are not being shared.'
+                )}
+              />
             </section>
             {
               <section className="card card--section">
diff --git a/src/renderer/scss/_gui.scss b/src/renderer/scss/_gui.scss
index 48f9b54fc..45161152e 100644
--- a/src/renderer/scss/_gui.scss
+++ b/src/renderer/scss/_gui.scss
@@ -121,6 +121,10 @@ input::placeholder {
   opacity: 0.5;
 }
 
+label {
+  cursor: pointer;
+}
+
 button + input {
   margin-left: $spacing-vertical * 2/3;
 }
diff --git a/src/renderer/scss/component/_form-field.scss b/src/renderer/scss/component/_form-field.scss
index 9dd03b5d7..d93a1885b 100644
--- a/src/renderer/scss/component/_form-field.scss
+++ b/src/renderer/scss/component/_form-field.scss
@@ -84,7 +84,7 @@
 
 .form-field__help {
   color: var(--color-help);
-  padding-top: $spacing-vertical * 1/3;
+  padding-top: $spacing-vertical * 2/3;
 }
 
 .form-field__error {
@@ -94,6 +94,14 @@
 .form-field__prefix,
 .form-field__postfix {
   font-family: 'metropolis-medium';
+
+  &.form-field--fix-no-height {
+    line-height: 1;
+  }
+
+  &.form-field--align-center {
+    align-self: center;
+  }
 }
 
 .form-field__prefix {

From bb748b060a4179b121658eccaac890140417cea0 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Wed, 13 Jun 2018 10:59:08 -0400
Subject: [PATCH 03/11] remove subscription for clear cache subtitle

---
 src/renderer/page/settings/view.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/page/settings/view.jsx b/src/renderer/page/settings/view.jsx
index 544673afa..9823645de 100644
--- a/src/renderer/page/settings/view.jsx
+++ b/src/renderer/page/settings/view.jsx
@@ -315,7 +315,7 @@ class SettingsPage extends React.PureComponent<Props, State> {
             <section className="card card--section">
               <div className="card__title">{__('Application Cache')}</div>
               <span className="card__subtitle">
-                {__("This will delete your subscriptions, and clear the app's cache")}
+                {__('This will clear the application cache. Your wallet will not be affected.')}
               </span>
               <div className="card__content">
                 <Button

From 422dd25949a3ac89dc7bfd6dec75ee2e07505208 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Wed, 13 Jun 2018 16:32:38 -0400
Subject: [PATCH 04/11] add thumbnail fallback for non-playable content

---
 src/renderer/page/file/view.jsx           | 23 ++++++++++++++++++-----
 src/renderer/scss/component/_card.scss    | 12 ++++++------
 src/renderer/scss/component/_content.scss | 14 ++++++++++++++
 3 files changed, 38 insertions(+), 11 deletions(-)

diff --git a/src/renderer/page/file/view.jsx b/src/renderer/page/file/view.jsx
index d2660beb6..4f07bf8ad 100644
--- a/src/renderer/page/file/view.jsx
+++ b/src/renderer/page/file/view.jsx
@@ -20,6 +20,7 @@ import * as settings from 'constants/settings';
 import type { Claim } from 'types/claim';
 import type { Subscription } from 'types/subscription';
 import FileDownloadLink from 'component/fileDownloadLink';
+import classnames from 'classnames';
 
 type Props = {
   claim: Claim,
@@ -149,11 +150,23 @@ class FilePage extends React.Component<Props> {
           </section>
         ) : (
           <section className="card">
-            {isPlayable ? (
-              <Video className="content__embedded" uri={uri} />
-            ) : (
-              <Thumbnail shouldObscure={shouldObscureThumbnail} src={thumbnail} />
-            )}
+            {isPlayable && <Video className="content__embedded" uri={uri} />}
+            {!isPlayable &&
+              (thumbnail ? (
+                <Thumbnail shouldObscure={shouldObscureThumbnail} src={thumbnail} />
+              ) : (
+                <div
+                  className={classnames('content__empty', {
+                    'content__empty--nsfw': shouldObscureThumbnail,
+                  })}
+                >
+                  <div className="card__media-text">
+                    {__('This content is not playable.')}
+                    <br />
+                    {__('To view this, click the download link below.')}
+                  </div>
+                </div>
+              ))}
             <div className="card__content">
               <div className="card__title-identity--file">
                 <h1 className="card__title card__title--file">{title}</h1>
diff --git a/src/renderer/scss/component/_card.scss b/src/renderer/scss/component/_card.scss
index f06976225..7688c42b2 100644
--- a/src/renderer/scss/component/_card.scss
+++ b/src/renderer/scss/component/_card.scss
@@ -23,17 +23,17 @@
     padding-top: var(--video-aspect-ratio);
   }
 
-  .card__media-text {
-    // for the weird padding required for dynamic height
-    // this lets the text sit in the middle instead of the bottom
-    margin-top: calc(var(--video-aspect-ratio) * -1);
-  }
-
   .channel-name {
     font-size: 12px;
   }
 }
 
+.card__media-text {
+  // for the weird padding required for dynamic height
+  // this lets the text sit in the middle instead of the bottom
+  margin-top: calc(var(--video-aspect-ratio) * -1);
+}
+
 .card--link {
   cursor: pointer;
 }
diff --git a/src/renderer/scss/component/_content.scss b/src/renderer/scss/component/_content.scss
index 89359eed1..4d3ac9d3c 100644
--- a/src/renderer/scss/component/_content.scss
+++ b/src/renderer/scss/component/_content.scss
@@ -78,6 +78,20 @@
   color: var(--color-white);
 }
 
+.content__empty {
+  background-color: black;
+  width: 100%;
+  padding-top: var(--video-aspect-ratio);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-white);
+
+  &.content__empty--nsfw {
+    background-color: var(--color-error);
+  }
+}
+
 img {
   max-height: 100%;
   max-width: 100%;

From 961f1cf2fd58e1670a7373f5b1332b7e44a05196 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Wed, 13 Jun 2018 16:47:22 -0400
Subject: [PATCH 05/11] add no thumbnail fallback and make sure .zips aren't
 playable

---
 src/renderer/modal/modalUpgrade/index.js | 12 +++++++++---
 src/renderer/modal/modalUpgrade/view.jsx |  6 +++++-
 src/renderer/page/file/view.jsx          |  8 ++------
 src/renderer/redux/reducers/app.js       |  1 -
 4 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/renderer/modal/modalUpgrade/index.js b/src/renderer/modal/modalUpgrade/index.js
index abec51a72..031927b96 100644
--- a/src/renderer/modal/modalUpgrade/index.js
+++ b/src/renderer/modal/modalUpgrade/index.js
@@ -1,13 +1,19 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import { doDownloadUpgrade, doSkipUpgrade } from 'redux/actions/app';
+import { doDownloadUpgrade, doSkipUpgrade, doHideNotification } from 'redux/actions/app';
 import ModalUpgrade from './view';
 
 const select = state => ({});
 
 const perform = dispatch => ({
   downloadUpgrade: () => dispatch(doDownloadUpgrade()),
-  skipUpgrade: () => dispatch(doSkipUpgrade()),
+  skipUpgrade: () => {
+    dispatch(doHideNotification());
+    dispatch(doSkipUpgrade());
+  },
 });
 
-export default connect(select, perform)(ModalUpgrade);
+export default connect(
+  select,
+  perform
+)(ModalUpgrade);
diff --git a/src/renderer/modal/modalUpgrade/view.jsx b/src/renderer/modal/modalUpgrade/view.jsx
index ced5fd808..41425b1e4 100644
--- a/src/renderer/modal/modalUpgrade/view.jsx
+++ b/src/renderer/modal/modalUpgrade/view.jsx
@@ -24,7 +24,11 @@ class ModalUpgrade extends React.PureComponent {
         </p>
         <p className="meta text-center">
           {__('Want to know what has changed?')} See the{' '}
-          <Button label={__('release notes')} href="https://github.com/lbryio/lbry-app/releases" />.
+          <Button
+            button="link"
+            label={__('release notes')}
+            href="https://github.com/lbryio/lbry-app/releases"
+          />.
         </p>
       </Modal>
     );
diff --git a/src/renderer/page/file/view.jsx b/src/renderer/page/file/view.jsx
index 4f07bf8ad..ff251b045 100644
--- a/src/renderer/page/file/view.jsx
+++ b/src/renderer/page/file/view.jsx
@@ -116,7 +116,7 @@ class FilePage extends React.Component<Props> {
     const { height, channel_name: channelName, value } = claim;
     const mediaType = Lbry.getMediaType(contentType);
     const isPlayable =
-      Object.values(player.mime).indexOf(contentType) !== -1 || mediaType === 'audio';
+      Object.values(player.mime).indexOf(mediaType) !== -1 || mediaType === 'audio';
     const channelClaimId =
       value && value.publisherSignature && value.publisherSignature.certificateId;
     let subscriptionUri;
@@ -160,11 +160,7 @@ class FilePage extends React.Component<Props> {
                     'content__empty--nsfw': shouldObscureThumbnail,
                   })}
                 >
-                  <div className="card__media-text">
-                    {__('This content is not playable.')}
-                    <br />
-                    {__('To view this, click the download link below.')}
-                  </div>
+                  <div className="card__media-text">{__('This content is not playable.')}</div>
                 </div>
               ))}
             <div className="card__content">
diff --git a/src/renderer/redux/reducers/app.js b/src/renderer/redux/reducers/app.js
index 3417d55d2..c66ae24b3 100644
--- a/src/renderer/redux/reducers/app.js
+++ b/src/renderer/redux/reducers/app.js
@@ -114,7 +114,6 @@ reducers[ACTIONS.SKIP_UPGRADE] = state => {
 
   return Object.assign({}, state, {
     isUpgradeSkipped: true,
-    modal: null,
   });
 };
 

From d5ecf797fd5ada875186cd145a61f6a3cb689b47 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Wed, 13 Jun 2018 16:54:16 -0400
Subject: [PATCH 06/11] add 'beta' tag on splash screen

---
 src/renderer/component/splash/internal/load-screen.jsx |  5 ++++-
 src/renderer/scss/component/_load-screen.scss          | 10 ++++++++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/renderer/component/splash/internal/load-screen.jsx b/src/renderer/component/splash/internal/load-screen.jsx
index ee1d120e8..0ca5a8f80 100644
--- a/src/renderer/component/splash/internal/load-screen.jsx
+++ b/src/renderer/component/splash/internal/load-screen.jsx
@@ -19,7 +19,10 @@ class LoadScreen extends React.PureComponent<Props> {
 
     return (
       <div className="load-screen">
-        <h1 className="load-screen__title">{__('LBRY')}</h1>
+        <div className="load-screen__header">
+          <h1 className="load-screen__title">{__('LBRY')}</h1>
+          <sup className="load-scree__beta">beta</sup>
+        </div>
         {isWarning ? (
           <span className="load-screen__message">
             <Icon size={20} icon={icons.ALERT} />
diff --git a/src/renderer/scss/component/_load-screen.scss b/src/renderer/scss/component/_load-screen.scss
index a34dd2d89..f41b36578 100644
--- a/src/renderer/scss/component/_load-screen.scss
+++ b/src/renderer/scss/component/_load-screen.scss
@@ -10,10 +10,20 @@
   justify-content: center;
 }
 
+.load-screen__header {
+  display: flex;
+}
+
 .load-screen__title {
   font-family: 'metropolis-bold';
   font-size: 60px;
   line-height: 100px;
+  margin-left: 40px; // width of "beta" superscript
+}
+
+.load-screen__beta {
+  padding-top: 23px;
+  padding-left: 10px;
 }
 
 .load-screen__message {

From 4379bca73e31c0798ee902f89bf3bc4d1653bd0b Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Wed, 13 Jun 2018 17:07:19 -0400
Subject: [PATCH 07/11] move subscription to it's own row to avoid overlap
 issues

---
 .../component/splash/internal/load-screen.jsx |  2 +-
 src/renderer/page/file/view.jsx               | 27 ++++++++++---------
 src/renderer/scss/component/_card.scss        |  4 +++
 3 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/src/renderer/component/splash/internal/load-screen.jsx b/src/renderer/component/splash/internal/load-screen.jsx
index 0ca5a8f80..9aff326e4 100644
--- a/src/renderer/component/splash/internal/load-screen.jsx
+++ b/src/renderer/component/splash/internal/load-screen.jsx
@@ -21,7 +21,7 @@ class LoadScreen extends React.PureComponent<Props> {
       <div className="load-screen">
         <div className="load-screen__header">
           <h1 className="load-screen__title">{__('LBRY')}</h1>
-          <sup className="load-scree__beta">beta</sup>
+          <sup className="load-screen__beta">beta</sup>
         </div>
         {isWarning ? (
           <span className="load-screen__message">
diff --git a/src/renderer/page/file/view.jsx b/src/renderer/page/file/view.jsx
index ff251b045..d4f8237f2 100644
--- a/src/renderer/page/file/view.jsx
+++ b/src/renderer/page/file/view.jsx
@@ -180,7 +180,6 @@ class FilePage extends React.Component<Props> {
               {metadata.nsfw && <div>NSFW</div>}
               <div className="card__channel-info">
                 <UriIndicator uri={uri} link />
-
                 <div className="card__actions card__actions--no-margin">
                   {claimIsMine ? (
                     <Button
@@ -193,21 +192,23 @@ class FilePage extends React.Component<Props> {
                       }}
                     />
                   ) : (
-                    <React.Fragment>
-                      <Button
-                        button="alt"
-                        icon="Send"
-                        label={__('Enjoy this? Send a tip')}
-                        onClick={() => openModal({ id: MODALS.SEND_TIP }, { uri })}
-                      />
-                      <SubscribeButton uri={subscriptionUri} channelName={channelName} />
-                    </React.Fragment>
-                  )}
-                  {speechSharable && (
-                    <ViewOnWebButton claimId={claim.claim_id} claimName={claim.name} />
+                    <SubscribeButton uri={subscriptionUri} channelName={channelName} />
                   )}
                 </div>
               </div>
+              <div className="card__actions card__actions--end">
+                {!claimIsMine && (
+                  <Button
+                    button="alt"
+                    icon="Send"
+                    label={__('Enjoy this? Send a tip')}
+                    onClick={() => openModal({ id: MODALS.SEND_TIP }, { uri })}
+                  />
+                )}
+                {speechSharable && (
+                  <ViewOnWebButton claimId={claim.claim_id} claimName={claim.name} />
+                )}
+              </div>
               <FormRow alignRight>
                 <FormField
                   type="checkbox"
diff --git a/src/renderer/scss/component/_card.scss b/src/renderer/scss/component/_card.scss
index 7688c42b2..6b74d12c1 100644
--- a/src/renderer/scss/component/_card.scss
+++ b/src/renderer/scss/component/_card.scss
@@ -240,6 +240,10 @@
   right: $spacing-vertical;
 }
 
+.card__actions--end {
+  justify-content: flex-end;
+}
+
 /*
  .card-row is used on the discover page
  It is a list of cards that extend past the right edge of the screen

From de9c736703a416cce780c3b00e71bc451a0d4f2d Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Wed, 13 Jun 2018 17:11:46 -0400
Subject: [PATCH 08/11] fix: stop calling claim_list_mine if no more pending
 publishes

---
 src/renderer/redux/actions/publish.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/redux/actions/publish.js b/src/renderer/redux/actions/publish.js
index b739c47db..0ad568a0c 100644
--- a/src/renderer/redux/actions/publish.js
+++ b/src/renderer/redux/actions/publish.js
@@ -278,7 +278,7 @@ export const doCheckPendingPublishes = () => (dispatch: Dispatch, getState: GetS
 
       dispatch(batchActions(...actions));
 
-      if (!pendingPublishes.length) {
+      if (!Object.keys(pendingPublishes).length) {
         clearInterval(publishCheckInterval);
       }
     });

From 88b4a73fca0f494a1f1660706a7b5f5a51658bc4 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Thu, 14 Jun 2018 12:08:13 -0400
Subject: [PATCH 09/11] fix: upgrade modal flow

---
 package.json                             | 2 +-
 src/renderer/modal/modalUpgrade/index.js | 6 +++---
 src/renderer/redux/actions/app.js        | 2 ++
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index e319e36bd..aa7065cc7 100644
--- a/package.json
+++ b/package.json
@@ -126,7 +126,7 @@
     "yarn": "^1.3"
   },
   "lbrySettings": {
-    "lbrynetDaemonVersion": "0.20.0rc14",
+    "lbrynetDaemonVersion": "0.20.0",
     "lbrynetDaemonUrlTemplate": "https://github.com/lbryio/lbry/releases/download/vDAEMONVER/lbrynet-daemon-vDAEMONVER-OSNAME.zip",
     "lbrynetDaemonDir": "static/daemon",
     "lbrynetDaemonFileName": "lbrynet-daemon"
diff --git a/src/renderer/modal/modalUpgrade/index.js b/src/renderer/modal/modalUpgrade/index.js
index 031927b96..8ac49e49c 100644
--- a/src/renderer/modal/modalUpgrade/index.js
+++ b/src/renderer/modal/modalUpgrade/index.js
@@ -1,9 +1,9 @@
-import React from 'react';
 import { connect } from 'react-redux';
-import { doDownloadUpgrade, doSkipUpgrade, doHideNotification } from 'redux/actions/app';
+import { doHideNotification } from 'lbry-redux';
+import { doDownloadUpgrade, doSkipUpgrade } from 'redux/actions/app';
 import ModalUpgrade from './view';
 
-const select = state => ({});
+const select = () => ({});
 
 const perform = dispatch => ({
   downloadUpgrade: () => dispatch(doDownloadUpgrade()),
diff --git a/src/renderer/redux/actions/app.js b/src/renderer/redux/actions/app.js
index 313ce7914..e2e433b02 100644
--- a/src/renderer/redux/actions/app.js
+++ b/src/renderer/redux/actions/app.js
@@ -10,6 +10,7 @@ import {
   doNotify,
   selectNotification,
   MODALS,
+  doHideNotification,
 } from 'lbry-redux';
 import Native from 'native';
 import { doFetchRewardedContent } from 'redux/actions/content';
@@ -89,6 +90,7 @@ export function doDownloadUpgrade() {
     dispatch({
       type: ACTIONS.UPGRADE_DOWNLOAD_STARTED,
     });
+    dispatch(doHideNotification());
     dispatch(
       doNotify({
         id: MODALS.DOWNLOADING,

From a49604cdb3500602da32d633f571032d56843e7a Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Thu, 14 Jun 2018 14:13:54 -0400
Subject: [PATCH 10/11] use button='link' for modal upgrade

---
 src/renderer/modal/modalDownloading/view.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/modal/modalDownloading/view.jsx b/src/renderer/modal/modalDownloading/view.jsx
index b230731fb..9829ec99a 100644
--- a/src/renderer/modal/modalDownloading/view.jsx
+++ b/src/renderer/modal/modalDownloading/view.jsx
@@ -34,7 +34,7 @@ class ModalDownloading extends React.PureComponent {
             />
           ) : null}
           <Button
-            button="alt"
+            button="link"
             label={__('Cancel')}
             className="modal__button"
             onClick={cancelUpgrade}

From d57b9584c167bdb0c20b315a3470a61230db7348 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Thu, 14 Jun 2018 16:10:50 -0400
Subject: [PATCH 11/11] address PR comments

---
 .../common/form-components/form-field.jsx     |  8 ++---
 src/renderer/component/fileList/view.jsx      |  2 +-
 .../component/transactionList/view.jsx        |  2 +-
 src/renderer/component/walletSend/view.jsx    |  4 +--
 src/renderer/page/file/view.jsx               | 32 ++++++++++---------
 src/renderer/scss/_gui.scss                   |  2 +-
 src/renderer/scss/_vars.scss                  |  1 +
 src/renderer/scss/component/_content.scss     |  2 +-
 8 files changed, 28 insertions(+), 25 deletions(-)

diff --git a/src/renderer/component/common/form-components/form-field.jsx b/src/renderer/component/common/form-components/form-field.jsx
index dcbaff85f..4029cbd1e 100644
--- a/src/renderer/component/common/form-components/form-field.jsx
+++ b/src/renderer/component/common/form-components/form-field.jsx
@@ -20,7 +20,7 @@ type Props = {
   placeholder?: string | number,
   children?: React.Node,
   stretch?: boolean,
-  fixClass?: string, // class applied to prefix/postfix label
+  affixClass?: string, // class applied to prefix/postfix label
 };
 
 export class FormField extends React.PureComponent<Props> {
@@ -36,7 +36,7 @@ export class FormField extends React.PureComponent<Props> {
       type,
       children,
       stretch,
-      fixClass,
+      affixClass,
       ...inputProps
     } = this.props;
 
@@ -94,13 +94,13 @@ export class FormField extends React.PureComponent<Props> {
           })}
         >
           {prefix && (
-            <label htmlFor={name} className={classnames('form-field__prefix', fixClass)}>
+            <label htmlFor={name} className={classnames('form-field__prefix', affixClass)}>
               {prefix}
             </label>
           )}
           {input}
           {postfix && (
-            <label htmlFor={name} className={classnames('form-field__postfix', fixClass)}>
+            <label htmlFor={name} className={classnames('form-field__postfix', affixClass)}>
               {postfix}
             </label>
           )}
diff --git a/src/renderer/component/fileList/view.jsx b/src/renderer/component/fileList/view.jsx
index 37905f276..cf1b22ae8 100644
--- a/src/renderer/component/fileList/view.jsx
+++ b/src/renderer/component/fileList/view.jsx
@@ -171,7 +171,7 @@ class FileList extends React.PureComponent<Props, State> {
           {!hideFilter && (
             <FormField
               prefix={__('Sort by')}
-              fixClass="form-field--align-center"
+              affixClass="form-field--align-center"
               type="select"
               value={sortBy}
               onChange={this.handleSortChanged}
diff --git a/src/renderer/component/transactionList/view.jsx b/src/renderer/component/transactionList/view.jsx
index 94dfd33b6..0ab002bee 100644
--- a/src/renderer/component/transactionList/view.jsx
+++ b/src/renderer/component/transactionList/view.jsx
@@ -96,7 +96,7 @@ class TransactionList extends React.PureComponent<Props, State> {
               type="select"
               value={filter}
               onChange={this.handleFilterChanged}
-              fixClass="form-field--align-center"
+              affixClass="form-field--align-center"
               prefix={__('Show')}
               postfix={
                 <Button
diff --git a/src/renderer/component/walletSend/view.jsx b/src/renderer/component/walletSend/view.jsx
index 1be7976fb..1d7942676 100644
--- a/src/renderer/component/walletSend/view.jsx
+++ b/src/renderer/component/walletSend/view.jsx
@@ -56,10 +56,10 @@ class WalletSend extends React.PureComponent<Props> {
                     label={__('Amount')}
                     postfix={__('LBC')}
                     className="input--price-amount"
-                    fixClass="form-field--fix-no-height"
+                    affixClass="form-field--fix-no-height"
                     min="0"
                     step="any"
-                    placeholder="5"
+                    placeholder="12.34"
                     onChange={handleChange}
                     onBlur={handleBlur}
                     value={values.amount}
diff --git a/src/renderer/page/file/view.jsx b/src/renderer/page/file/view.jsx
index d4f8237f2..83d30fb84 100644
--- a/src/renderer/page/file/view.jsx
+++ b/src/renderer/page/file/view.jsx
@@ -115,8 +115,7 @@ class FilePage extends React.Component<Props> {
     const shouldObscureThumbnail = obscureNsfw && metadata.nsfw;
     const { height, channel_name: channelName, value } = claim;
     const mediaType = Lbry.getMediaType(contentType);
-    const isPlayable =
-      Object.values(player.mime).indexOf(mediaType) !== -1 || mediaType === 'audio';
+    const isPlayable = Object.values(player.mime).includes(contentType) || mediaType === 'audio';
     const channelClaimId =
       value && value.publisherSignature && value.publisherSignature.certificateId;
     let subscriptionUri;
@@ -196,19 +195,22 @@ class FilePage extends React.Component<Props> {
                   )}
                 </div>
               </div>
-              <div className="card__actions card__actions--end">
-                {!claimIsMine && (
-                  <Button
-                    button="alt"
-                    icon="Send"
-                    label={__('Enjoy this? Send a tip')}
-                    onClick={() => openModal({ id: MODALS.SEND_TIP }, { uri })}
-                  />
-                )}
-                {speechSharable && (
-                  <ViewOnWebButton claimId={claim.claim_id} claimName={claim.name} />
-                )}
-              </div>
+              {!claimIsMine ||
+                (speechSharable && (
+                  <div className="card__actions card__actions--end">
+                    {!claimIsMine && (
+                      <Button
+                        button="alt"
+                        icon="Send"
+                        label={__('Enjoy this? Send a tip')}
+                        onClick={() => openModal({ id: MODALS.SEND_TIP }, { uri })}
+                      />
+                    )}
+                    {speechSharable && (
+                      <ViewOnWebButton claimId={claim.claim_id} claimName={claim.name} />
+                    )}
+                  </div>
+                ))}
               <FormRow alignRight>
                 <FormField
                   type="checkbox"
diff --git a/src/renderer/scss/_gui.scss b/src/renderer/scss/_gui.scss
index 45161152e..de1d5e449 100644
--- a/src/renderer/scss/_gui.scss
+++ b/src/renderer/scss/_gui.scss
@@ -121,7 +121,7 @@ input::placeholder {
   opacity: 0.5;
 }
 
-label {
+label[for] {
   cursor: pointer;
 }
 
diff --git a/src/renderer/scss/_vars.scss b/src/renderer/scss/_vars.scss
index 1909e3ffe..fc2b6fe68 100644
--- a/src/renderer/scss/_vars.scss
+++ b/src/renderer/scss/_vars.scss
@@ -42,6 +42,7 @@ $large-breakpoint: 1760px;
   --color-divider: #e3e3e3;
   --color-help: rgba(0, 0, 0, 0.54);
   --color-error: #a94442;
+  --color-nsfw: #bf4440;
   --color-download: var(--color-white);
   --color-download-overlay: var(--color-black);
   --color-bg: #fafafa;
diff --git a/src/renderer/scss/component/_content.scss b/src/renderer/scss/component/_content.scss
index 4d3ac9d3c..6fe2194ee 100644
--- a/src/renderer/scss/component/_content.scss
+++ b/src/renderer/scss/component/_content.scss
@@ -88,7 +88,7 @@
   color: var(--color-white);
 
   &.content__empty--nsfw {
-    background-color: var(--color-error);
+    background-color: var(--color-nsfw);
   }
 }