From 174bfbc8fb4b7891efb95482bb9c3e4c4283e6c5 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Mon, 14 Jan 2019 13:40:06 -0500
Subject: [PATCH] 0.27.0 cleanup (#2182)

* fix: channel navigation from suggested subscriptions

* fix: move subscribe/share buttons below name on channel page

* fix: images with weird media type

* fix: increase tx amount size on tx table

* change: add icons to nav bar

* fix: move filewatcher-webpack-plugin into dev dependencies

* fix: upgrade button styling

* improvement: modal consistency

* change: increase svg stroke inside button

* fix: more descriptive title on header for wallet balance

* fix: minor color/alignment

* chore: update lbry-redux
---
 .eslintrc.json                                | 16 +++---
 package.json                                  |  4 +-
 src/renderer/component/categoryList/view.jsx  |  2 +-
 .../component/common/credit-amount.jsx        |  2 +-
 src/renderer/component/copyableText/view.jsx  |  4 +-
 src/renderer/component/fileTile/view.jsx      | 16 +++---
 src/renderer/component/header/view.jsx        | 21 ++++----
 src/renderer/component/sideBar/view.jsx       | 44 +++++++++--------
 src/renderer/component/socialShare/view.jsx   |  8 +--
 src/renderer/component/userPhoneNew/view.jsx  | 15 +++---
 .../component/userPhoneVerify/view.jsx        |  9 ++--
 src/renderer/component/walletSendTip/view.jsx |  2 +-
 src/renderer/constants/icons.js               |  1 +
 src/renderer/index.js                         |  4 +-
 src/renderer/modal/modal.jsx                  |  6 +--
 .../modal/modalAffirmPurchase/view.jsx        | 16 +++---
 .../modalConfirmThumbnailUpload/view.jsx      | 30 ++++++------
 src/renderer/modal/modalCreditIntro/view.jsx  | 20 ++++----
 src/renderer/modal/modalDownloading/view.jsx  | 23 +++------
 src/renderer/modal/modalError/view.jsx        |  1 -
 src/renderer/modal/modalFileTimeout/view.jsx  |  6 ++-
 src/renderer/modal/modalFirstReward/view.jsx  |  1 -
 .../modal/modalPhoneCollection/view.jsx       | 11 ++++-
 src/renderer/modal/modalRemoveFile/view.jsx   | 10 ++--
 src/renderer/modal/modalRevokeClaim/view.jsx  |  5 --
 src/renderer/modal/modalRewardCode/view.jsx   | 22 ++++-----
 .../modal/modalTransactionFailed/view.jsx     |  6 ++-
 .../modal/modalWalletDecrypt/view.jsx         | 25 ++++------
 .../modal/modalWalletEncrypt/view.jsx         | 27 +++++-----
 src/renderer/modal/modalWalletUnlock/view.jsx | 17 +++----
 src/renderer/modal/modalWelcome/view.jsx      | 13 +++--
 src/renderer/page/channel/view.jsx            | 24 +++++----
 src/renderer/page/file/view.jsx               |  2 +-
 src/renderer/redux/selectors/app.js           |  2 +-
 src/renderer/scss/component/_button.scss      | 13 ++++-
 src/renderer/scss/component/_channel.scss     | 11 +++--
 src/renderer/scss/component/_content.scss     | 17 ++++++-
 src/renderer/scss/component/_header.scss      | 49 ++++++++++---------
 src/renderer/scss/component/_media.scss       |  2 +-
 src/renderer/scss/component/_modal.scss       | 27 +---------
 src/renderer/scss/component/_navigation.scss  |  5 +-
 src/renderer/scss/component/_table.scss       |  3 ++
 yarn.lock                                     |  8 +--
 43 files changed, 274 insertions(+), 276 deletions(-)

diff --git a/.eslintrc.json b/.eslintrc.json
index 22a808553..a21517c96 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -28,11 +28,14 @@
   "rules": {
     "import/no-commonjs": "warn",
     "import/no-amd": "warn",
-    "prettier/prettier": ["error", {
-      "trailingComma": "es5",
-      "printWidth": 100,
-      "singleQuote": true
-    }],
+    "prettier/prettier": [
+      "error",
+      {
+        "trailingComma": "es5",
+        "printWidth": 100,
+        "singleQuote": true
+      }
+    ],
     "func-names": ["warn", "as-needed"],
     "jsx-a11y/label-has-for": 0,
     "import/prefer-default-export": 0,
@@ -45,6 +48,7 @@
     "jsx-a11y/click-events-have-key-events": 0,
     "consistent-return": 0,
     "no-prototype-builtins": 0,
-    "flowtype/space-after-type-colon": [ 2, "always", { "allowLineBreak": true } ]
+    "flowtype/space-after-type-colon": [2, "always", { "allowLineBreak": true }],
+    "no-restricted-syntax": 0
   }
 }
diff --git a/package.json b/package.json
index 2ca9439d9..92a4a10f6 100644
--- a/package.json
+++ b/package.json
@@ -46,12 +46,11 @@
     "electron-log": "^2.2.12",
     "electron-updater": "^2.23.3",
     "electron-window-state": "^4.1.1",
-    "filewatcher-webpack-plugin": "^1.2.0",
     "find-process": "^1.1.0",
     "formik": "^0.10.4",
     "hast-util-sanitize": "^1.1.2",
     "keytar": "^4.2.1",
-    "lbry-redux": "lbryio/lbry-redux#820b6eeadf9e58c1e5027fd4d92808ba817b410e",
+    "lbry-redux": "lbryio/lbry-redux#a22f8284110f957f3f645d42abc457ab8fb3fa8a",
     "lbryinc": "lbryio/lbryinc#b3bb8c67745235ef54baea95accaedaa4bb86d4d",
     "localforage": "^1.7.1",
     "mammoth": "^1.4.6",
@@ -115,6 +114,7 @@
     "eslint-plugin-jsx-a11y": "^6.0.3",
     "eslint-plugin-prettier": "^2.6.0",
     "eslint-plugin-react": "^7.7.0",
+    "filewatcher-webpack-plugin": "^1.2.0",
     "flow-bin": "^0.89.0",
     "flow-typed": "^2.3.0",
     "husky": "^0.14.3",
diff --git a/src/renderer/component/categoryList/view.jsx b/src/renderer/component/categoryList/view.jsx
index 559bdcaf8..1e489e282 100644
--- a/src/renderer/component/categoryList/view.jsx
+++ b/src/renderer/component/categoryList/view.jsx
@@ -227,7 +227,7 @@ class CategoryList extends PureComponent<Props, State> {
                   <Button
                     label={category}
                     navigate="/show"
-                    navigateParams={{ uri: categoryLink }}
+                    navigateParams={{ uri: categoryLink, page: 1 }}
                   />
                   <SubscribeButton
                     button="alt"
diff --git a/src/renderer/component/common/credit-amount.jsx b/src/renderer/component/common/credit-amount.jsx
index ac6538b0e..01ba2de5f 100644
--- a/src/renderer/component/common/credit-amount.jsx
+++ b/src/renderer/component/common/credit-amount.jsx
@@ -76,7 +76,7 @@ class CreditAmount extends React.PureComponent<Props> {
     return (
       <span
         title={fullPrice}
-        className={classnames('badge', {
+        className={classnames({
           badge,
           'badge--cost': badge && amount > 0,
           'badge--free': badge && isFree,
diff --git a/src/renderer/component/copyableText/view.jsx b/src/renderer/component/copyableText/view.jsx
index d8b73cd28..fce38f8dd 100644
--- a/src/renderer/component/copyableText/view.jsx
+++ b/src/renderer/component/copyableText/view.jsx
@@ -20,10 +20,10 @@ export default class CopyableText extends React.PureComponent<Props> {
   input: ?HTMLInputElement;
 
   render() {
-    const { copyable, doToast, noSnackbar } = this.props;
+    const { copyable, doToast } = this.props;
 
     return (
-      <FormRow verticallyCentered padded stretch>
+      <FormRow verticallyCentered stretch>
         <input
           className="input-copyable form-field__input"
           readOnly
diff --git a/src/renderer/component/fileTile/view.jsx b/src/renderer/component/fileTile/view.jsx
index 3cf09adf0..2d023f8ba 100644
--- a/src/renderer/component/fileTile/view.jsx
+++ b/src/renderer/component/fileTile/view.jsx
@@ -155,14 +155,16 @@ class FileTile extends React.PureComponent<Props> {
               <TruncatedText text={title || name} lines={size === 'small' ? 2 : 3} />
             )}
           </div>
-          <div className="media__subtitle">
-            <UriIndicator uri={uri} link />
-          </div>
-          <div className="media__subtitle card--space-between">
-            <div className="media__date">
-              <DateTime timeAgo block={height} />
+          <div className="media__subtext">
+            <div className="media__subtitle">
+              <UriIndicator uri={uri} link />
+            </div>
+            <div className="media__subtitle card--space-between">
+              <div className="media__date">
+                <DateTime timeAgo block={height} />
+              </div>
+              {size !== 'large' && this.renderFileProperties()}
             </div>
-            {size !== 'large' && this.renderFileProperties()}
           </div>
           {displayDescription && (
             <div className="media__subtext">
diff --git a/src/renderer/component/header/view.jsx b/src/renderer/component/header/view.jsx
index 60a3326a7..8bdbdef3f 100644
--- a/src/renderer/component/header/view.jsx
+++ b/src/renderer/component/header/view.jsx
@@ -41,16 +41,12 @@ const Header = (props: Props) => {
         <Button
           className="header__navigation-item header__navigation-item--wallet"
           description={__('Your wallet')}
-          iconRight="LBC"
+          title={`Your balance is ${balance} LBRY Credits`}
           label={
-            isUpgradeAvailable ? (
-              `${balance}`
-            ) : (
-              <React.Fragment>
-                <span title={`${balance} LBC`}>{roundedBalance}</span>
-                <LbcSymbol />
-              </React.Fragment>
-            )
+            <React.Fragment>
+              <span>{roundedBalance}</span>
+              <LbcSymbol />
+            </React.Fragment>
           }
           onClick={() => navigate('/wallet')}
         />
@@ -97,18 +93,19 @@ const Header = (props: Props) => {
         />
 
         <Button
-          className="header__navigation-item header__navigation-item--publish"
+          className="header__navigation-item header__navigation-item--right-action"
           description={__('Publish content')}
           icon={ICONS.UPLOAD}
-          iconSize={20}
+          iconSize={24}
           label={isUpgradeAvailable ? '' : __('Publish')}
           onClick={() => navigate('/publish')}
         />
 
         {showUpgradeButton && (
           <Button
-            button="primary"
+            className="header__navigation-item header__navigation-item--right-action"
             icon={ICONS.DOWNLOAD}
+            iconSize={24}
             label={__('Upgrade App')}
             onClick={downloadUpgradeRequested}
           />
diff --git a/src/renderer/component/sideBar/view.jsx b/src/renderer/component/sideBar/view.jsx
index 15fae9ba9..879bb082d 100644
--- a/src/renderer/component/sideBar/view.jsx
+++ b/src/renderer/component/sideBar/view.jsx
@@ -25,8 +25,9 @@ const SideBar = (props: Props) => {
   return (
     <nav className="navigation">
       <div className="navigation__links">
-        {navLinks.primary.map(({ label, path, active }) => (
+        {navLinks.primary.map(({ label, path, active, icon }) => (
           <Button
+            icon={icon}
             className={classnames('navigation__link', {
               'navigation__link--active': active,
             })}
@@ -43,14 +44,14 @@ const SideBar = (props: Props) => {
         <ul>
           <li className="navigation__link navigation__link--title">Account</li>
 
-          {navLinks.secondary.map(({ label, path, active, subLinks = [] }) => (
+          {navLinks.secondary.map(({ label, path, active, subLinks = [], icon }) => (
             <li
               className={classnames('navigation__link', {
                 'navigation__link--active': active,
               })}
               key={label}
             >
-              <Button label={label} navigate={path} />
+              <Button icon={icon} label={label} navigate={path} />
 
               {
                 // The sublinks should be animated on open close
@@ -58,24 +59,25 @@ const SideBar = (props: Props) => {
                 // was really slow and looked pretty bad. Possible fix is upgrading to v2
                 // Not sure if that has better performance
               }
-              {!!subLinks.length && active && (
-                <ul key="0" className="navigation__link-items">
-                  {subLinks.map(({ active: subLinkActive, label: subLabel, path: subPath }) => (
-                    <li
-                      className={classnames('navigation__link-item', {
-                        'navigation__link-item--active': subLinkActive,
-                      })}
-                      key={subPath}
-                    >
-                      {subPath ? (
-                        <Button label={subLabel} navigate={subPath} />
-                      ) : (
-                        <span>{subLabel}</span>
-                      )}
-                    </li>
-                  ))}
-                </ul>
-              )}
+              {!!subLinks.length &&
+                active && (
+                  <ul key="0" className="navigation__link-items">
+                    {subLinks.map(({ active: subLinkActive, label: subLabel, path: subPath }) => (
+                      <li
+                        className={classnames('navigation__link-item', {
+                          'navigation__link-item--active': subLinkActive,
+                        })}
+                        key={subPath}
+                      >
+                        {subPath ? (
+                          <Button label={subLabel} navigate={subPath} />
+                        ) : (
+                          <span>{subLabel}</span>
+                        )}
+                      </li>
+                    ))}
+                  </ul>
+                )}
             </li>
           ))}
         </ul>
diff --git a/src/renderer/component/socialShare/view.jsx b/src/renderer/component/socialShare/view.jsx
index 5a9801974..fd2895e75 100644
--- a/src/renderer/component/socialShare/view.jsx
+++ b/src/renderer/component/socialShare/view.jsx
@@ -56,12 +56,12 @@ class SocialShare extends React.PureComponent<Props> {
     }
 
     return (
-      <section className="card__content">
+      <React.Fragment>
         {speechShareable && (
           <div className="card__content">
             <label className="card__subtitle">{__('Web link')}</label>
             <CopyableText copyable={speechURL} />
-            <div className="card__actions card__actions--center">
+            <div className="card__actions card__actions--center card__actions--top-space">
               <ToolTip onComponent body={__('Facebook')}>
                 <Button
                   iconColor="blue"
@@ -95,7 +95,7 @@ class SocialShare extends React.PureComponent<Props> {
         <div className="card__content">
           <label className="card__subtitle">{__('LBRY App link')}</label>
           <CopyableText copyable={lbryURL} noSnackbar />
-          <div className="card__actions card__actions--center">
+          <div className="card__actions card__actions--center card__actions--top-space">
             <ToolTip onComponent body={__('Facebook')}>
               <Button
                 iconColor="blue"
@@ -119,7 +119,7 @@ class SocialShare extends React.PureComponent<Props> {
         <div className="card__actions">
           <Button button="link" label={__('Done')} onClick={onDone} />
         </div>
-      </section>
+      </React.Fragment>
     );
   }
 }
diff --git a/src/renderer/component/userPhoneNew/view.jsx b/src/renderer/component/userPhoneNew/view.jsx
index 000210607..1c2250296 100644
--- a/src/renderer/component/userPhoneNew/view.jsx
+++ b/src/renderer/component/userPhoneNew/view.jsx
@@ -86,19 +86,20 @@ class UserPhoneNew extends React.PureComponent<Props, State> {
 
     return (
       <React.Fragment>
-        <header className="card__header">
-          <h2 className="card__title">{__('Enter The Verification Code')}</h2>
+        <section className="card__content">
           <p className="card__subtitle">
             {__(
               'Enter your phone number and we will send you a verification code. We will not share your phone number with third parties.'
             )}
           </p>
-        </header>
-        <Form onSubmit={this.handleSubmit}>
+        </section>
+
+        <Form className="card__content" onSubmit={this.handleSubmit}>
           <FormRow padded>
             <FormField type="select" name="country-codes" onChange={this.handleSelect}>
-              {countryCodes.map(country => (
-                <option key={country.countryCallingCode} value={country.countryCallingCode}>
+              {countryCodes.map((country, index) => (
+                // eslint-disable-next-line
+                <option key={index} value={country.countryCallingCode}>
                   {os === 'Darwin' ? country.emoji : `(${country.alpha2})`}{' '}
                   {country.countryCallingCode}
                 </option>
@@ -115,7 +116,7 @@ class UserPhoneNew extends React.PureComponent<Props, State> {
               }}
             />
           </FormRow>
-          <div className="card__actions card__actions--center">
+          <div className="card__actions">
             <Submit label="Submit" disabled={isPending} />
             {cancelButton}
           </div>
diff --git a/src/renderer/component/userPhoneVerify/view.jsx b/src/renderer/component/userPhoneVerify/view.jsx
index 349cea98c..d8a6a28aa 100644
--- a/src/renderer/component/userPhoneVerify/view.jsx
+++ b/src/renderer/component/userPhoneVerify/view.jsx
@@ -33,18 +33,17 @@ class UserPhoneVerify extends React.PureComponent {
     const { cancelButton, phoneErrorMessage, phone, countryCode } = this.props;
     return (
       <React.Fragment>
-        <header className="card__header">
-          <h2 className="card__title">{__('Enter The Verification Code')}</h2>
-          <p className="card__subtitle">
+        <section className="card__content">
+          <p>
             {' '}
             {__(
               `Please enter the verification code sent to +${countryCode}${phone}. Didn't receive it? `
             )}
             <Button button="link" onClick={this.reset.bind(this)} label="Go back." />
           </p>
-        </header>
+        </section>
         <Form className="card__content" onSubmit={this.handleSubmit.bind(this)}>
-          <FormRow padded>
+          <FormRow>
             <FormField
               type="text"
               name="code"
diff --git a/src/renderer/component/walletSendTip/view.jsx b/src/renderer/component/walletSendTip/view.jsx
index 1a3e970fc..4ab940b76 100644
--- a/src/renderer/component/walletSendTip/view.jsx
+++ b/src/renderer/component/walletSendTip/view.jsx
@@ -75,7 +75,7 @@ class WalletSendTip extends React.PureComponent<Props, State> {
 
     return (
       <React.Fragment>
-        <FormRow>
+        <FormRow className="card__content">
           <FormField
             autoFocus
             label={
diff --git a/src/renderer/constants/icons.js b/src/renderer/constants/icons.js
index 3562db78d..d758b3082 100644
--- a/src/renderer/constants/icons.js
+++ b/src/renderer/constants/icons.js
@@ -35,3 +35,4 @@ export const FACEBOOK = 'Facebook';
 export const TWITTER = 'Twitter';
 export const CREDIT_CARD = 'CreditCard';
 export const SETTINGS = 'Settings';
+export const USERS = 'Users';
diff --git a/src/renderer/index.js b/src/renderer/index.js
index 5768763db..98f9a40c2 100644
--- a/src/renderer/index.js
+++ b/src/renderer/index.js
@@ -205,10 +205,10 @@ const init = () => {
 
     ReactDOM.render(
       <Provider store={store}>
-        <div>
+        <React.Fragment>
           <App />
           <SnackBar />
-        </div>
+        </React.Fragment>
       </Provider>,
       document.getElementById('app')
     );
diff --git a/src/renderer/modal/modal.jsx b/src/renderer/modal/modal.jsx
index 2e52842d5..bc1d082e6 100644
--- a/src/renderer/modal/modal.jsx
+++ b/src/renderer/modal/modal.jsx
@@ -17,7 +17,6 @@ type ModalProps = {
   onConfirmed?: any => any,
   onAborted?: any => any,
   className?: string,
-  overlayClassName?: string,
   children?: React.Node,
   extraContent?: React.Node,
   expandButtonLabel?: string,
@@ -51,7 +50,6 @@ export class Modal extends React.PureComponent<ModalProps> {
       onAborted,
       fullScreen,
       className,
-      overlayClassName,
       title,
       ...modalProps
     } = this.props;
@@ -63,9 +61,7 @@ export class Modal extends React.PureComponent<ModalProps> {
           modal: !fullScreen,
           'modal--fullscreen': fullScreen,
         })}
-        overlayClassName={
-          ![null, undefined, ''].includes(overlayClassName) ? overlayClassName : 'modal-overlay'
-        }
+        overlayClassName="modal-overlay"
       >
         {title && (
           <header className="card__header">
diff --git a/src/renderer/modal/modalAffirmPurchase/view.jsx b/src/renderer/modal/modalAffirmPurchase/view.jsx
index e8eb579c7..a2fbd68cf 100644
--- a/src/renderer/modal/modalAffirmPurchase/view.jsx
+++ b/src/renderer/modal/modalAffirmPurchase/view.jsx
@@ -40,13 +40,15 @@ class ModalAffirmPurchase extends React.PureComponent<Props> {
         onConfirmed={this.onAffirmPurchase}
         onAborted={cancelPurchase}
       >
-        <p>
-          {__('This will purchase')} <strong>{`"${title}"`}</strong> {__('for')}{' '}
-          <strong>
-            <FilePrice uri={uri} showFullPrice inheritStyle showLBC={false} />
-          </strong>{' '}
-          {__('credits')}.
-        </p>
+        <section className="card__content">
+          <p>
+            {__('This will purchase')} <strong>{`"${title}"`}</strong> {__('for')}{' '}
+            <strong>
+              <FilePrice uri={uri} showFullPrice inheritStyle showLBC={false} />
+            </strong>{' '}
+            {__('credits')}.
+          </p>
+        </section>
       </Modal>
     );
   }
diff --git a/src/renderer/modal/modalConfirmThumbnailUpload/view.jsx b/src/renderer/modal/modalConfirmThumbnailUpload/view.jsx
index cb6f696da..d30312ebb 100644
--- a/src/renderer/modal/modalConfirmThumbnailUpload/view.jsx
+++ b/src/renderer/modal/modalConfirmThumbnailUpload/view.jsx
@@ -25,29 +25,27 @@ class ModalConfirmThumbnailUpload extends React.PureComponent<Props> {
     return (
       <Modal
         isOpen
+        title={__('Upload Thumbnail')}
         contentLabel={__('Confirm Thumbnail Upload')}
         type="confirm"
         confirmButtonLabel={__('Upload')}
         onConfirmed={() => this.upload()}
         onAborted={closeModal}
       >
-        <header className="card__header">
-          <h2 className="card__title">{__('More Ways To Get LBRY Credits')}</h2>
-          <p className="card__subtitle">
-            {__('Are you sure you want to upload this thumbnail to spee.ch')}?
-          </p>
-        </header>
+        <section className="card__content">
+          <p>{__('Are you sure you want to upload this thumbnail to spee.ch')}?</p>
 
-        <blockquote>{path}</blockquote>
-        <FormRow>
-          <FormField
-            type="checkbox"
-            name="content_is_mature"
-            postfix={__('Mature audiences only')}
-            checked={nsfw}
-            onChange={event => updatePublishForm({ nsfw: event.target.checked })}
-          />
-        </FormRow>
+          <blockquote>{path}</blockquote>
+          <FormRow>
+            <FormField
+              type="checkbox"
+              name="content_is_mature"
+              postfix={__('For mature audiences only')}
+              checked={nsfw}
+              onChange={event => updatePublishForm({ nsfw: event.target.checked })}
+            />
+          </FormRow>
+        </section>
       </Modal>
     );
   }
diff --git a/src/renderer/modal/modalCreditIntro/view.jsx b/src/renderer/modal/modalCreditIntro/view.jsx
index 39a40d765..5d3f411ee 100644
--- a/src/renderer/modal/modalCreditIntro/view.jsx
+++ b/src/renderer/modal/modalCreditIntro/view.jsx
@@ -34,23 +34,21 @@ const ModalCreditIntro = (props: Props) => {
         )}
         {Boolean(totalRewardValue) && (
           <p>
-            There are a variety of ways to get credits, including more than{' '}
+            {__(' There are a variety of ways to get credits, including more than')}{' '}
             <CreditAmount inheritStyle amount={totalRewardRounded} />{' '}
             {__('in free rewards for participating in the LBRY beta.')}
           </p>
         )}
       </section>
 
-      <section className="card__content">
-        <div className="card__actions card__actions--center">
-          <Button button="primary" onClick={addBalance} label={__('Get Credits')} />
-          <Button
-            button="link"
-            onClick={closeModal}
-            label={currentBalance <= 0 ? __('Use Without LBC') : __('Meh, Not Now')}
-          />
-        </div>
-      </section>
+      <div className="card__actions">
+        <Button button="primary" onClick={addBalance} label={__('Get Credits')} />
+        <Button
+          button="link"
+          onClick={closeModal}
+          label={currentBalance <= 0 ? __('Use Without LBC') : __('Meh, Not Now')}
+        />
+      </div>
     </Modal>
   );
 };
diff --git a/src/renderer/modal/modalDownloading/view.jsx b/src/renderer/modal/modalDownloading/view.jsx
index 024dc4f5b..44334bd31 100644
--- a/src/renderer/modal/modalDownloading/view.jsx
+++ b/src/renderer/modal/modalDownloading/view.jsx
@@ -49,23 +49,14 @@ class ModalDownloading extends React.PureComponent<Props> {
               <p>{__('After the install is complete, please reopen the app.')}</p>
             </React.Fragment>
           ) : null}
-          <div className="modal__buttons">
-            {downloadComplete ? (
-              <Button
-                button="primary"
-                label={__('Begin Upgrade')}
-                className="modal__button"
-                onClick={startUpgrade}
-              />
-            ) : null}
-            <Button
-              button="link"
-              label={__('Cancel')}
-              className="modal__button"
-              onClick={cancelUpgrade}
-            />
-          </div>
         </section>
+
+        <div className="card__actions">
+          {downloadComplete ? (
+            <Button button="primary" label={__('Begin Upgrade')} onClick={startUpgrade} />
+          ) : null}
+          <Button button="link" label={__('Cancel')} onClick={cancelUpgrade} />
+        </div>
       </Modal>
     );
   }
diff --git a/src/renderer/modal/modalError/view.jsx b/src/renderer/modal/modalError/view.jsx
index 903722966..ad7220182 100644
--- a/src/renderer/modal/modalError/view.jsx
+++ b/src/renderer/modal/modalError/view.jsx
@@ -51,7 +51,6 @@ class ModalError extends React.PureComponent<Props> {
           </React.Fragment>
         }
         className="error-modal"
-        overlayClassName="error-modal-overlay"
         onConfirmed={closeModal}
         extraContent={errorInfo}
       >
diff --git a/src/renderer/modal/modalFileTimeout/view.jsx b/src/renderer/modal/modalFileTimeout/view.jsx
index 7dccbd181..22c5d7c4e 100644
--- a/src/renderer/modal/modalFileTimeout/view.jsx
+++ b/src/renderer/modal/modalFileTimeout/view.jsx
@@ -23,9 +23,11 @@ class ModalFileTimeout extends React.PureComponent<Props> {
         onConfirmed={closeModal}
       >
         <section className="card__content">
-          <p className="card__error-msg">
+          <p className="error-modal__error-list">
             {__('LBRY was unable to download the stream')}:
-            <div>{`"${title}"`}</div>
+            <div>
+              <b>{`"${title}"`}</b>
+            </div>
           </p>
         </section>
       </Modal>
diff --git a/src/renderer/modal/modalFirstReward/view.jsx b/src/renderer/modal/modalFirstReward/view.jsx
index fec60ba5f..4e4bc7dcd 100644
--- a/src/renderer/modal/modalFirstReward/view.jsx
+++ b/src/renderer/modal/modalFirstReward/view.jsx
@@ -13,7 +13,6 @@ class ModalFirstReward extends React.PureComponent<Props> {
     return (
       <Modal
         type="alert"
-        overlayClassName="modal-overlay modal-overlay--clear"
         isOpen
         contentLabel={__('Welcome to LBRY')}
         title={__('Your First Reward')}
diff --git a/src/renderer/modal/modalPhoneCollection/view.jsx b/src/renderer/modal/modalPhoneCollection/view.jsx
index 57c8a69c5..f5f83d681 100644
--- a/src/renderer/modal/modalPhoneCollection/view.jsx
+++ b/src/renderer/modal/modalPhoneCollection/view.jsx
@@ -14,6 +14,15 @@ type Props = {
 };
 
 class ModalPhoneCollection extends React.PureComponent<Props> {
+  getTitle() {
+    const { user, phone } = this.props;
+
+    if (!user.phone_number && !phone) {
+      return __('Enter Your Phone Number');
+    }
+    return __('Enter The Verification Code');
+  }
+
   renderInner() {
     const { closeModal, phone, user } = this.props;
 
@@ -36,7 +45,7 @@ class ModalPhoneCollection extends React.PureComponent<Props> {
     }
 
     return (
-      <Modal type="custom" isOpen contentLabel="Phone">
+      <Modal type="custom" isOpen contentLabel="Phone" title={this.getTitle()}>
         {this.renderInner()}
       </Modal>
     );
diff --git a/src/renderer/modal/modalRemoveFile/view.jsx b/src/renderer/modal/modalRemoveFile/view.jsx
index 87d64352d..ff778b3c0 100644
--- a/src/renderer/modal/modalRemoveFile/view.jsx
+++ b/src/renderer/modal/modalRemoveFile/view.jsx
@@ -60,19 +60,19 @@ class ModalRemoveFile extends React.PureComponent<Props, State> {
     return (
       <Modal
         isOpen
+        title="Remove File"
         contentLabel={__('Confirm File Remove')}
         type="confirm"
         confirmButtonLabel={__('Remove')}
         onConfirmed={() => deleteFile(outpoint, deleteChecked, abandonClaimChecked)}
         onAborted={closeModal}
       >
-        <header className="card__header">
-          <h2 className="card__title">{__('Remove File')}</h2>
-          <p className="card__subtitle">
+        <section className="card__content">
+          <p>
             {__("Are you sure you'd like to remove")} <cite>{`"${title}"`}</cite>{' '}
             {__('from the LBRY app?')}
           </p>
-        </header>
+        </section>
         <section className="card__content">
           <FormRow>
             <FormField
@@ -82,7 +82,7 @@ class ModalRemoveFile extends React.PureComponent<Props, State> {
               onChange={this.handleDeleteCheckboxClicked}
             />
           </FormRow>
-          {claimIsMine && (
+          {(true || claimIsMine) && (
             <FormRow>
               <FormField
                 prefix={__('Abandon the claim for this URI')}
diff --git a/src/renderer/modal/modalRevokeClaim/view.jsx b/src/renderer/modal/modalRevokeClaim/view.jsx
index 2e03b501a..9178df215 100644
--- a/src/renderer/modal/modalRevokeClaim/view.jsx
+++ b/src/renderer/modal/modalRevokeClaim/view.jsx
@@ -63,11 +63,6 @@ class ModalRevokeClaim extends React.PureComponent<Props> {
     const { type } =
       transactionItems.find(claim => claim.txid === txid && claim.nout === nout) || {};
 
-    if (!type) {
-      console.error('Tried to render modalRevokeClaim but no matching tx type found.');
-      return null;
-    }
-
     return (
       <Modal
         isOpen
diff --git a/src/renderer/modal/modalRewardCode/view.jsx b/src/renderer/modal/modalRewardCode/view.jsx
index b297d35ae..231cc8b70 100644
--- a/src/renderer/modal/modalRewardCode/view.jsx
+++ b/src/renderer/modal/modalRewardCode/view.jsx
@@ -49,7 +49,16 @@ class ModalRewardCode extends React.PureComponent<Props, State> {
         confirmButtonDisabled={rewardIsPending}
       >
         <section className="card__content">
-          <FormRow>
+          <p>
+            {__('Redeem a custom reward code for LBC')}
+            {'. '}
+            <Button
+              button="link"
+              href="https://lbry.io/faq/rewards#reward-code"
+              label={__('Learn more')}
+            />.
+          </p>
+          <FormRow padded>
             <FormField
               stretch
               autoFocus
@@ -59,17 +68,6 @@ class ModalRewardCode extends React.PureComponent<Props, State> {
               error={error}
               value={rewardCode}
               onChange={e => this.setState({ rewardCode: e.target.value })}
-              helper={
-                <React.Fragment>
-                  {__('Redeem a custom reward code for LBC')}
-                  {'. '}
-                  <Button
-                    button="link"
-                    href="https://lbry.io/faq/rewards#reward-code"
-                    label={__('Learn more')}
-                  />.
-                </React.Fragment>
-              }
             />
           </FormRow>
         </section>
diff --git a/src/renderer/modal/modalTransactionFailed/view.jsx b/src/renderer/modal/modalTransactionFailed/view.jsx
index 24077c953..f7a4810bf 100644
--- a/src/renderer/modal/modalTransactionFailed/view.jsx
+++ b/src/renderer/modal/modalTransactionFailed/view.jsx
@@ -16,7 +16,11 @@ class ModalTransactionFailed extends React.PureComponent<Props> {
         contentLabel={__('Transaction failed')}
         title={__('Transaction Failed')}
         onConfirmed={closeModal}
-      />
+      >
+        <section className="card__content">
+          <p>{__('Sorry about that. Contact help@lbry.io if you continue to have issues.')}</p>
+        </section>
+      </Modal>
     );
   }
 }
diff --git a/src/renderer/modal/modalWalletDecrypt/view.jsx b/src/renderer/modal/modalWalletDecrypt/view.jsx
index 8a351c54e..f2ae58fd1 100644
--- a/src/renderer/modal/modalWalletDecrypt/view.jsx
+++ b/src/renderer/modal/modalWalletDecrypt/view.jsx
@@ -1,6 +1,5 @@
 // @flow
 import React from 'react';
-import { Form } from 'component/common/form';
 import { Modal } from 'modal/modal';
 import Button from 'component/button';
 
@@ -45,20 +44,16 @@ class ModalWalletDecrypt extends React.PureComponent<Props> {
         onAborted={closeModal}
       >
         <section className="card__content">
-          <Form onSubmit={() => this.submitDecryptForm()}>
-            <p>
-              {__(
-                'Your wallet has been encrypted with a local password, performing this action will remove this password.'
-              )}
-            </p>
-            <div className="card__actions">
-              <Button
-                button="link"
-                label={__('Learn more')}
-                href="https://lbry.io/faq/wallet-encryption"
-              />
-            </div>
-          </Form>
+          <p>
+            {__(
+              'Your wallet has been encrypted with a local password, performing this action will remove this password.'
+            )}{' '}
+            <Button
+              button="link"
+              label={__('Learn more')}
+              href="https://lbry.io/faq/wallet-encryption"
+            />.
+          </p>
         </section>
       </Modal>
     );
diff --git a/src/renderer/modal/modalWalletEncrypt/view.jsx b/src/renderer/modal/modalWalletEncrypt/view.jsx
index 7d58ee28c..87af7c35c 100644
--- a/src/renderer/modal/modalWalletEncrypt/view.jsx
+++ b/src/renderer/modal/modalWalletEncrypt/view.jsx
@@ -101,19 +101,24 @@ class ModalWalletEncrypt extends React.PureComponent<Props, State> {
         onConfirmed={() => this.submitEncryptForm()}
         onAborted={closeModal}
       >
-        <section className="card__content">
-          <Form onSubmit={() => this.submitEncryptForm()}>
+        <Form onSubmit={() => this.submitEncryptForm()}>
+          <section className="card__content">
             <p>
               {__(
                 'Encrypting your wallet will require a password to access your local wallet data when LBRY starts. Please enter a new password for your wallet.'
-              )}
+              )}{' '}
+              <Button
+                button="link"
+                label={__('Learn more')}
+                href="https://lbry.io/faq/wallet-encryption"
+              />.
             </p>
             <FormRow padded>
               <FormField
                 stretch
                 autoFocus
                 error={passwordMismatch === true ? 'Passwords do not match' : false}
-                label={__('New Password')}
+                label={__('Password')}
                 type="password"
                 name="wallet-new-password"
                 onChange={event => this.onChangeNewPassword(event)}
@@ -129,6 +134,8 @@ class ModalWalletEncrypt extends React.PureComponent<Props, State> {
                 onChange={event => this.onChangeNewPasswordConfirm(event)}
               />
             </FormRow>
+          </section>
+          <section className="card__content">
             <p>
               {__(
                 'If your password is lost, it cannot be recovered. You will not be able to access your wallet without a password.'
@@ -144,16 +151,10 @@ class ModalWalletEncrypt extends React.PureComponent<Props, State> {
                 onChange={event => this.onChangeUnderstandConfirm(event)}
               />
             </FormRow>
-            <div className="card__actions">
-              <Button
-                button="link"
-                label={__('Learn more')}
-                href="https://lbry.io/faq/wallet-encryption"
-              />
-            </div>
+            <div className="card__actions" />
             {failMessage && <div className="error-text">{__(failMessage)}</div>}
-          </Form>
-        </section>
+          </section>
+        </Form>
       </Modal>
     );
   }
diff --git a/src/renderer/modal/modalWalletUnlock/view.jsx b/src/renderer/modal/modalWalletUnlock/view.jsx
index ee7639fb2..93fccc416 100644
--- a/src/renderer/modal/modalWalletUnlock/view.jsx
+++ b/src/renderer/modal/modalWalletUnlock/view.jsx
@@ -5,7 +5,6 @@ import { Modal } from 'modal/modal';
 import Button from 'component/button';
 
 type Props = {
-  closeModal: () => void,
   quit: () => void,
   unlockWallet: string => void,
   walletUnlockSucceded: boolean,
@@ -29,7 +28,7 @@ class ModalWalletUnlock extends React.PureComponent<Props> {
   }
 
   render() {
-    const { quit, unlockWallet, walletUnlockSucceded, closeModal } = this.props;
+    const { quit, unlockWallet, walletUnlockSucceded } = this.props;
 
     const { password } = this.state;
 
@@ -50,7 +49,12 @@ class ModalWalletUnlock extends React.PureComponent<Props> {
             <p>
               {__(
                 'Your wallet has been encrypted with a local password. Please enter your wallet password to proceed.'
-              )}
+              )}{' '}
+              <Button
+                button="link"
+                label={__('Learn more')}
+                href="https://lbry.io/faq/wallet-encryption"
+              />.
             </p>
             <FormRow padded>
               <FormField
@@ -63,13 +67,6 @@ class ModalWalletUnlock extends React.PureComponent<Props> {
                 onChange={event => this.onChangePassword(event)}
               />
             </FormRow>
-            <div className="card__actions">
-              <Button
-                button="link"
-                label={__('Learn more')}
-                href="https://lbry.io/faq/wallet-encryption"
-              />
-            </div>
           </Form>
         </section>
       </Modal>
diff --git a/src/renderer/modal/modalWelcome/view.jsx b/src/renderer/modal/modalWelcome/view.jsx
index 088320a13..e9cc3cec5 100644
--- a/src/renderer/modal/modalWelcome/view.jsx
+++ b/src/renderer/modal/modalWelcome/view.jsx
@@ -1,8 +1,13 @@
+// @flow
 import React from 'react';
 import { Modal } from 'modal/modal';
 import Button from 'component/button';
 
-const ModalWelcome = props => {
+type Props = {
+  closeModal: () => void,
+};
+
+const ModalWelcome = (props: Props) => {
   const { closeModal } = props;
 
   return (
@@ -16,10 +21,10 @@ const ModalWelcome = props => {
         <p>
           {__('Below, LBRY is controlled by users -- you -- via blockchain and decentralization.')}
         </p>
-        <div className="modal__buttons">
-          <Button button="primary" onClick={closeModal} label={__("I'm In")} />
-        </div>
       </section>
+      <div className="card__actions">
+        <Button button="primary" onClick={closeModal} label={__("I'm In")} />
+      </div>
     </Modal>
   );
 };
diff --git a/src/renderer/page/channel/view.jsx b/src/renderer/page/channel/view.jsx
index 0a5567777..f66ef56bb 100644
--- a/src/renderer/page/channel/view.jsx
+++ b/src/renderer/page/channel/view.jsx
@@ -86,23 +86,21 @@ class ChannelPage extends React.PureComponent<Props> {
     return (
       <Page notContained>
         <header className="channel-info">
-          <h1>
+          <h1 className="media__title">
             {name}
             {fetching && <BusyIndicator />}
           </h1>
 
-          <div className="channel-info__actions">
-            <div className="channel-info__actions__group">
-              <SubscribeButton uri={`lbry://${permanentUrl}`} channelName={name} />
-              <Button
-                button="alt"
-                icon={icons.GLOBE}
-                label={__('Share Channel')}
-                onClick={() =>
-                  openModal(MODALS.SOCIAL_SHARE, { uri, speechShareable: true, isChannel: true })
-                }
-              />
-            </div>
+          <div className="channel-info__actions__group">
+            <SubscribeButton uri={`lbry://${permanentUrl}`} channelName={name} />
+            <Button
+              button="alt"
+              icon={icons.GLOBE}
+              label={__('Share Channel')}
+              onClick={() =>
+                openModal(MODALS.SOCIAL_SHARE, { uri, speechShareable: true, isChannel: true })
+              }
+            />
           </div>
         </header>
 
diff --git a/src/renderer/page/file/view.jsx b/src/renderer/page/file/view.jsx
index 42be80354..d28af6841 100644
--- a/src/renderer/page/file/view.jsx
+++ b/src/renderer/page/file/view.jsx
@@ -193,7 +193,7 @@ class FilePage extends React.Component<Props> {
               <UriIndicator uri={uri} link />
             </div>
 
-            <div className="media__subtitle__date">
+            <div className="media__subtitle__date media__subtext">
               {__('Published on')} <DateTime block={height} show={DateTime.SHOW_DATE} />
             </div>
           </div>
diff --git a/src/renderer/redux/selectors/app.js b/src/renderer/redux/selectors/app.js
index 3c8dd3b17..1271c22d6 100644
--- a/src/renderer/redux/selectors/app.js
+++ b/src/renderer/redux/selectors/app.js
@@ -224,7 +224,7 @@ export const selectNavLinks = createSelector(
         },
         {
           label: 'Invite',
-          // icon: TBD when we add icons back to the side nav
+          icon: icons.USERS,
           path: '/invite',
           active: currentPage === 'invite',
         },
diff --git a/src/renderer/scss/component/_button.scss b/src/renderer/scss/component/_button.scss
index a9681dd3f..167a6192a 100644
--- a/src/renderer/scss/component/_button.scss
+++ b/src/renderer/scss/component/_button.scss
@@ -3,11 +3,20 @@
   position: relative;
 
   svg {
-    stroke-width: 1.5;
+    stroke-width: 1.9;
     width: 1.2rem;
     height: 1.2rem;
     position: relative;
-    top: 0.1rem;
+    top: 2px;
+    stroke-opacity: 0.7;
+
+    // Buttons that don't have a label
+    &:only-child {
+      stroke-opacity: 1;
+      width: 1.4rem;
+      height: 1.4rem;
+      top: 0;
+    }
   }
 
   .btn__label {
diff --git a/src/renderer/scss/component/_channel.scss b/src/renderer/scss/component/_channel.scss
index aed65655f..a8dd141fe 100644
--- a/src/renderer/scss/component/_channel.scss
+++ b/src/renderer/scss/component/_channel.scss
@@ -1,10 +1,11 @@
 .channel-info {
-  align-items: center;
-  display: flex;
-  justify-content: space-between;
-
-  h1 {
+  .media__title {
     user-select: text;
+    margin-bottom: var(--spacing-vertical-medium);
+  }
+
+  .channel-info__actions__group {
+    margin-bottom: var(--spacing-vertical-large);
   }
 }
 
diff --git a/src/renderer/scss/component/_content.scss b/src/renderer/scss/component/_content.scss
index 84db81881..82e564907 100644
--- a/src/renderer/scss/component/_content.scss
+++ b/src/renderer/scss/component/_content.scss
@@ -76,7 +76,7 @@
   flex-direction: column;
   justify-content: center;
   padding: 0 var(--spacing-vertical-large);
-  background-color: rgba($lbry-black, 0.7);
+  background-color: #000;
 }
 
 .content__loading-text {
@@ -86,10 +86,12 @@
 .content__view {
   width: 100%;
   height: 100%;
-  background-color: #000;
+  top: 0;
+  left: 0;
   align-items: center;
   display: flex;
   justify-content: center;
+  position: absolute;
 
   iframe {
     width: 100%;
@@ -97,3 +99,14 @@
     background-color: $lbry-white;
   }
 }
+
+.content__view--container {
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  position: absolute;
+}
diff --git a/src/renderer/scss/component/_header.scss b/src/renderer/scss/component/_header.scss
index 6b34a31ff..2d3e4b1f6 100644
--- a/src/renderer/scss/component/_header.scss
+++ b/src/renderer/scss/component/_header.scss
@@ -34,22 +34,10 @@
       width: calc(var(--header-height) * 3 + 1px);
     }
   }
-
-  &:last-of-type {
-    @media (min-width: 601px) {
-      width: 10rem;
-    }
-
-    @media (max-width: 600px) {
-      width: var(--header-height);
-    }
-  }
 }
 
 .header__navigation-item {
-  width: var(--header-height);
   height: var(--header-height);
-
   background-position: center;
   background-repeat: no-repeat;
   background-size: 50%;
@@ -105,25 +93,32 @@
     display: none;
   }
 }
-
-.header__navigation-item--publish,
-.header__navigation-item--wallet {
-  // Publish and Wallet links are collapsed
-  // into a menu at smaller screen widths
-
-  @media (max-width: 600px) {
-    display: none;
-  }
+.header__navigation-item--back,
+.header__navigation-item--forward,
+.header__navigation-item--home,
+.header__navigation-item--menu {
+  width: var(--header-height);
 }
 
-.header__navigation-item--publish {
+// Currently not used
+// .header__navigation-item--publish,
+// .header__navigation-item--wallet {
+//   // Publish and Wallet links are collapsed
+//   // into a menu at smaller screen widths
+//
+//   @media (max-width: 600px) {
+//     display: none;
+//   }
+// }
+
+.header__navigation-item--right-action {
   display: flex;
   justify-content: center;
   position: relative;
-  width: 100%;
 
   .btn__content {
     display: flex;
+    padding: 0 var(--spacing-vertical-large);
   }
 
   .btn__label {
@@ -131,6 +126,14 @@
     padding-left: 0.5rem;
   }
 
+  svg {
+    top: 0;
+  }
+
+  &:not(:last-child) {
+    border-right: 1px solid $lbry-gray-1;
+  }
+
   html[data-theme='dark'] & {
     svg {
       stroke: $lbry-white;
diff --git a/src/renderer/scss/component/_media.scss b/src/renderer/scss/component/_media.scss
index 6526ff1f1..e9bd69aa5 100644
--- a/src/renderer/scss/component/_media.scss
+++ b/src/renderer/scss/component/_media.scss
@@ -96,7 +96,7 @@
   }
 
   .media__properties {
-    bottom: -5.5rem;
+    bottom: -5rem;
     left: -20rem;
     position: absolute;
   }
diff --git a/src/renderer/scss/component/_modal.scss b/src/renderer/scss/component/_modal.scss
index 554e2cae1..a3e0559b0 100644
--- a/src/renderer/scss/component/_modal.scss
+++ b/src/renderer/scss/component/_modal.scss
@@ -1,5 +1,4 @@
-.modal-overlay,
-.error-modal-overlay {
+.modal-overlay {
   top: 0;
   left: 0;
   bottom: 0;
@@ -17,10 +16,6 @@
   }
 }
 
-.modal-overlay--clear {
-  background-color: transparent;
-}
-
 .modal {
   background-color: $lbry-white;
   border: 1px solid $lbry-gray-3;
@@ -94,26 +89,6 @@
   font-size: 2em;
 }
 
-.modal__buttons {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  margin-top: var(--spacing-vertical-medium);
-}
-
-.modal__button {
-  margin: 0 var(--spacing-vertical-small);
-
-  &.btn--link {
-    // So the text is not bigger than the text inside the button
-    font-size: 0.8rem;
-  }
-}
-
-.error-modal-overlay {
-  background-color: rgba($lbry-white, 0.7);
-}
-
 .error-modal__content {
   display: flex;
   padding: 0 var(--spacing-vertical-medium) var(--spacing-vertical-medium)
diff --git a/src/renderer/scss/component/_navigation.scss b/src/renderer/scss/component/_navigation.scss
index 4bf9c073b..5a4aa06dd 100644
--- a/src/renderer/scss/component/_navigation.scss
+++ b/src/renderer/scss/component/_navigation.scss
@@ -3,6 +3,7 @@
   border-right: 1px solid rgba($lbry-gray-1, 0.9);
   font-size: 1.25rem;
   padding-top: var(--spacing-vertical-large);
+  padding-right: var(--spacing-vertical-small);
   position: relative;
 
   html[data-theme='dark'] & {
@@ -14,7 +15,7 @@
   // on smaller screen widths
 
   @media (min-width: 601px) {
-    width: 171px; // 1px is for the border
+    min-width: 171px; // 1px is for the border
   }
 
   @media (max-width: 600px) {
@@ -100,7 +101,7 @@
 
   color: $lbry-gray-5;
   cursor: default;
-  font-size: 1.1rem;
+  font-size: 1.15rem;
   font-weight: 700;
   letter-spacing: 0.1rem;
   text-transform: uppercase;
diff --git a/src/renderer/scss/component/_table.scss b/src/renderer/scss/component/_table.scss
index 3f9ea45b4..07c7ec65e 100644
--- a/src/renderer/scss/component/_table.scss
+++ b/src/renderer/scss/component/_table.scss
@@ -91,7 +91,10 @@
 
 .table--transactions {
   td:nth-of-type(1) {
+    // TX amounts
     width: 25%;
+    font-size: 0.8em;
+    font-weight: 600;
   }
 
   td:nth-of-type(2) {
diff --git a/yarn.lock b/yarn.lock
index 62aeb4f95..aee6cf0dd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5667,17 +5667,17 @@ lazy-val@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/lazy-val/-/lazy-val-1.0.3.tgz#bb97b200ef00801d94c317e29dc6ed39e31c5edc"
 
-lbry-redux@lbryio/lbry-redux#820b6eeadf9e58c1e5027fd4d92808ba817b410e:
+lbry-redux@lbryio/lbry-redux#84b7d396934d57a37802aadbef71db91230a9404:
   version "0.0.1"
-  resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/820b6eeadf9e58c1e5027fd4d92808ba817b410e"
+  resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/84b7d396934d57a37802aadbef71db91230a9404"
   dependencies:
     proxy-polyfill "0.1.6"
     reselect "^3.0.0"
     uuid "^3.3.2"
 
-lbry-redux@lbryio/lbry-redux#84b7d396934d57a37802aadbef71db91230a9404:
+lbry-redux@lbryio/lbry-redux#a22f8284110f957f3f645d42abc457ab8fb3fa8a:
   version "0.0.1"
-  resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/84b7d396934d57a37802aadbef71db91230a9404"
+  resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/a22f8284110f957f3f645d42abc457ab8fb3fa8a"
   dependencies:
     proxy-polyfill "0.1.6"
     reselect "^3.0.0"