.eslintrc.json

@@ -28,11 +28,14 @@
   "rules": {
     "import/no-commonjs": "warn",
     "import/no-amd": "warn",
-    "prettier/prettier": ["error", {
+    "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
   }
 }

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",

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"

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,

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

src/renderer/component/fileTile/view.jsx

@@ -155,6 +155,7 @@ class FileTile extends React.PureComponent<Props> {
               <TruncatedText text={title || name} lines={size === 'small' ? 2 : 3} />
             )}
           </div>
+          <div className="media__subtext">
             <div className="media__subtitle">
               <UriIndicator uri={uri} link />
             </div>
@@ -164,6 +165,7 @@ class FileTile extends React.PureComponent<Props> {
               </div>
               {size !== 'large' && this.renderFileProperties()}
             </div>
+          </div>
           {displayDescription && (
             <div className="media__subtext">
               <TruncatedText text={description} lines={size === 'large' ? 4 : 3} />

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>
+              <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}
           />

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,7 +59,8 @@ 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 && (
+              {!!subLinks.length &&
+                active && (
                   <ul key="0" className="navigation__link-items">
                     {subLinks.map(({ active: subLinkActive, label: subLabel, path: subPath }) => (
                       <li

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

src/renderer/component/userPhoneNew/view.jsx

@@ -86,19 +86,20 @@ class UserPhoneNew extends React.PureComponent<Props, State> {
 
     return (
       <React.Fragment>
-        <header className="card__header">
+        <section className="card__content">
-          <h2 className="card__title">{__('Enter The Verification Code')}</h2>
           <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>
+        </section>
-        <Form onSubmit={this.handleSubmit}>
+
+        <Form className="card__content" onSubmit={this.handleSubmit}>
           <FormRow padded>
             <FormField type="select" name="country-codes" onChange={this.handleSelect}>
-              {countryCodes.map(country => (
+              {countryCodes.map((country, index) => (
-                <option key={country.countryCallingCode} value={country.countryCallingCode}>
+                // 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>

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">
+        <section className="card__content">
-          <h2 className="card__title">{__('Enter The Verification Code')}</h2>
+          <p>
-          <p className="card__subtitle">
             {' '}
             {__(
               `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"

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={

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';

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

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={
+        overlayClassName="modal-overlay"
-          ![null, undefined, ''].includes(overlayClassName) ? overlayClassName : 'modal-overlay'
-        }
       >
         {title && (
           <header className="card__header">

src/renderer/modal/modalAffirmPurchase/view.jsx

@@ -40,6 +40,7 @@ class ModalAffirmPurchase extends React.PureComponent<Props> {
         onConfirmed={this.onAffirmPurchase}
         onAborted={cancelPurchase}
       >
+        <section className="card__content">
           <p>
             {__('This will purchase')} <strong>{`"${title}"`}</strong> {__('for')}{' '}
             <strong>
@@ -47,6 +48,7 @@ class ModalAffirmPurchase extends React.PureComponent<Props> {
             </strong>{' '}
             {__('credits')}.
           </p>
+        </section>
       </Modal>
     );
   }

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">
+        <section className="card__content">
-          <h2 className="card__title">{__('More Ways To Get LBRY Credits')}</h2>
+          <p>{__('Are you sure you want to upload this thumbnail to spee.ch')}?</p>
-          <p className="card__subtitle">
-            {__('Are you sure you want to upload this thumbnail to spee.ch')}?
-          </p>
-        </header>
 
           <blockquote>{path}</blockquote>
           <FormRow>
             <FormField
               type="checkbox"
               name="content_is_mature"
-            postfix={__('Mature audiences only')}
+              postfix={__('For mature audiences only')}
               checked={nsfw}
               onChange={event => updatePublishForm({ nsfw: event.target.checked })}
             />
           </FormRow>
+        </section>
       </Modal>
     );
   }

src/renderer/modal/modalCreditIntro/view.jsx

@@ -34,15 +34,14 @@ 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">
-        <div className="card__actions card__actions--center">
         <Button button="primary" onClick={addBalance} label={__('Get Credits')} />
         <Button
           button="link"
@@ -50,7 +49,6 @@ const ModalCreditIntro = (props: Props) => {
           label={currentBalance <= 0 ? __('Use Without LBC') : __('Meh, Not Now')}
         />
       </div>
-      </section>
     </Modal>
   );
 };

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

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

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>

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

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

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">
+        <section className="card__content">
-          <h2 className="card__title">{__('Remove File')}</h2>
+          <p>
-          <p className="card__subtitle">
             {__("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')}

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

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>

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

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>
+          </p>
-          </Form>
         </section>
       </Modal>
     );

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()}>
+          <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">
+            <div className="card__actions" />
-              <Button
-                button="link"
-                label={__('Learn more')}
-                href="https://lbry.io/faq/wallet-encryption"
-              />
-            </div>
             {failMessage && <div className="error-text">{__(failMessage)}</div>}
-          </Form>
           </section>
+        </Form>
       </Modal>
     );
   }

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>

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">
+      </section>
+      <div className="card__actions">
         <Button button="primary" onClick={closeModal} label={__("I'm In")} />
       </div>
-      </section>
     </Modal>
   );
 };

src/renderer/page/channel/view.jsx

@@ -86,12 +86,11 @@ 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
@@ -103,7 +102,6 @@ class ChannelPage extends React.PureComponent<Props> {
               }
             />
           </div>
-          </div>
         </header>
 
         <section className="media-group--list">{contentList}</section>

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>

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',
         },

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 {

src/renderer/scss/component/_channel.scss

@@ -1,10 +1,11 @@
 .channel-info {
-  align-items: center;
+  .media__title {
-  display: flex;
-  justify-content: space-between;
-
-  h1 {
     user-select: text;
+    margin-bottom: var(--spacing-vertical-medium);
+  }
+
+  .channel-info__actions__group {
+    margin-bottom: var(--spacing-vertical-large);
   }
 }
 

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

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--back,
-.header__navigation-item--publish,
+.header__navigation-item--forward,
-.header__navigation-item--wallet {
+.header__navigation-item--home,
-  // Publish and Wallet links are collapsed
+.header__navigation-item--menu {
-  // into a menu at smaller screen widths
+  width: var(--header-height);
-
-  @media (max-width: 600px) {
-    display: none;
-  }
 }
 
-.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;

src/renderer/scss/component/_media.scss

@@ -96,7 +96,7 @@
   }
 
   .media__properties {
-    bottom: -5.5rem;
+    bottom: -5rem;
     left: -20rem;
     position: absolute;
   }

src/renderer/scss/component/_modal.scss

@@ -1,5 +1,4 @@
-.modal-overlay,
+.modal-overlay {
-.error-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)

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;

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

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"