address PR comments

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>
           )}

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}

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

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}

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 =
+    const isPlayable = Object.values(player.mime).includes(contentType) || mediaType === 'audio';
-      Object.values(player.mime).indexOf(mediaType) !== -1 || mediaType === 'audio';
     const channelClaimId =
       value && value.publisherSignature && value.publisherSignature.certificateId;
     let subscriptionUri;
@@ -196,6 +195,8 @@ class FilePage extends React.Component<Props> {
                   )}
                 </div>
               </div>
+              {!claimIsMine ||
+                (speechSharable && (
                   <div className="card__actions card__actions--end">
                     {!claimIsMine && (
                       <Button
@@ -209,6 +210,7 @@ class FilePage extends React.Component<Props> {
                       <ViewOnWebButton claimId={claim.claim_id} claimName={claim.name} />
                     )}
                   </div>
+                ))}
               <FormRow alignRight>
                 <FormField
                   type="checkbox"

src/renderer/scss/_gui.scss

@@ -121,7 +121,7 @@ input::placeholder {
   opacity: 0.5;
 }
 
-label {
+label[for] {
   cursor: pointer;
 }
 

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;

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);
   }
 }