ensure modals have consistent styling

2018-09-26 13:48:07 -04:00 · 2018-09-26 13:48:07 -04:00 · caa5abfdfd
commit caa5abfdfd
parent 49573a65b9
38 changed files with 555 additions and 433 deletions
--- a/src/renderer/component/socialShare/view.jsx
+++ b/src/renderer/component/socialShare/view.jsx
@ -37,13 +37,8 @@ class SocialShare extends React.PureComponent<Props> {
        : `${speechPrefix}${claimName}#${claimId}`;

    return (
-      <div>
-        <div className="card__title">
-          <h2>{__('Share This Content')}</h2>
-
-          <div className="card__content">
+      <section className="card__content">
        <Address address={speechURL} noSnackbar />
-          </div>
        <div className="card__actions card__actions--center">
          <Tooltip onComponent body={__('Facebook')}>
            <Button
@ -76,8 +71,7 @@ class SocialShare extends React.PureComponent<Props> {
        <div className="card__actions">
          <Button button="link" label={__('Done')} onClick={onDone} />
        </div>
-        </div>
-      </div>
+      </section>
    );
  }
 }
--- a/src/renderer/component/userEmailNew/view.jsx
+++ b/src/renderer/component/userEmailNew/view.jsx
@ -47,7 +47,7 @@ class UserEmailNew extends React.PureComponent<Props, State> {
        </p>
        <p>{__("We'll never sell your email, and you can unsubscribe at any time.")}</p>
        <Form onSubmit={this.handleSubmit}>
-          <FormRow>
+          <FormRow padded>
            <FormField
              stretch
              type="email"
@ -63,6 +63,9 @@ class UserEmailNew extends React.PureComponent<Props, State> {
            <Submit label="Submit" disabled={isPending} />
            {cancelButton}
          </div>
+          <div className="card__content help">
+            {`${__('Your email may be used to sync usage data across devices.')} `}
+          </div>
        </Form>
      </div>
    );
--- a/src/renderer/component/userEmailVerify/view.jsx
+++ b/src/renderer/component/userEmailVerify/view.jsx
@ -56,7 +56,7 @@ class UserEmailVerify extends React.PureComponent<Props, State> {
    return (
      <Form onSubmit={this.handleSubmit}>
        <p>Please enter the verification code emailed to {email}.</p>
-        <FormRow>
+        <FormRow padded>
          <FormField
            stretch
            name="code"
--- a/src/renderer/component/walletSendTip/view.jsx
+++ b/src/renderer/component/walletSendTip/view.jsx
@ -2,7 +2,6 @@
 import React from 'react';
 import Button from 'component/button';
 import { FormField } from 'component/common/form';
-import UriIndicator from 'component/uriIndicator';
 import type { Claim } from 'types/claim';

 type Props = {
@ -71,17 +70,11 @@ class WalletSendTip extends React.PureComponent<Props, State> {
  }

  render() {
-    const { title, isPending, uri, onCancel, balance } = this.props;
+    const { title, isPending, uri, onCancel } = this.props;
    const { tipAmount, tipError } = this.state;

    return (
-      <div>
-        <div className="card__title">
-          <h1>
-            {__('Send a tip to')} <UriIndicator uri={uri} />
-          </h1>
-        </div>
-        <div className="card__content">
+      <section className="card__content">
        <FormField
          autoFocus
          label={
@ -100,7 +93,7 @@ class WalletSendTip extends React.PureComponent<Props, State> {
          onChange={event => this.handleSupportPriceChange(event)}
          helper={
            <span>
-                {__(`This will appear as a tip for ${title} located at ${uri}.`)}{' '}
+              {__(`This will appear as a tip for "${title}".`)}{' '}
              <Button label={__('Learn more')} button="link" href="https://lbry.io/faq/tipping" />
            </span>
          }
@ -112,15 +105,9 @@ class WalletSendTip extends React.PureComponent<Props, State> {
            disabled={isPending || tipError}
            onClick={this.handleSendButtonClicked}
          />
-            <Button
-              button="link"
-              label={__('Cancel')}
-              onClick={onCancel}
-              navigateParams={{ uri }}
-            />
-          </div>
-        </div>
+          <Button button="link" label={__('Cancel')} onClick={onCancel} navigateParams={{ uri }} />
        </div>
+      </section>
    );
  }
 }
--- a/src/renderer/modal/modal.jsx
+++ b/src/renderer/modal/modal.jsx
@ -23,6 +23,7 @@ type ModalProps = {
  expandButtonLabel?: string,
  hideButtonLabel?: string,
  fullScreen: boolean,
+  title: string,
 };

 export class Modal extends React.PureComponent<ModalProps> {
@ -51,6 +52,7 @@ export class Modal extends React.PureComponent<ModalProps> {
      fullScreen,
      className,
      overlayClassName,
+      title,
      ...modalProps
    } = this.props;
    return (
@ -65,6 +67,7 @@ export class Modal extends React.PureComponent<ModalProps> {
          ![null, undefined, ''].includes(overlayClassName) ? overlayClassName : 'modal-overlay'
        }
      >
+        <h1 className="modal__header">{title}</h1>
        <div>{children}</div>
        {type === 'custom' ? null : ( // custom modals define their own buttons
          <div className="card__actions card__actions--center">
--- a/src/renderer/modal/modalAffirmPurchase/view.jsx
+++ b/src/renderer/modal/modalAffirmPurchase/view.jsx
@ -1,8 +1,18 @@
+// @flow
 import React from 'react';
 import FilePrice from 'component/filePrice';
 import { Modal } from 'modal/modal';
+import type { Metadata } from 'types/claim';

-class ModalAffirmPurchase extends React.PureComponent {
+type Props = {
+  closeModal: () => void,
+  loadVideo: string => void,
+  uri: string,
+  cancelPurchase: () => void,
+  metadata: Metadata,
+};
+
+class ModalAffirmPurchase extends React.PureComponent<Props> {
  constructor() {
    super();

@ -25,15 +35,18 @@ class ModalAffirmPurchase extends React.PureComponent {
      <Modal
        type="confirm"
        isOpen
+        title={__('Confirm Purchase')}
        contentLabel={__('Confirm Purchase')}
        onConfirmed={this.onAffirmPurchase}
        onAborted={cancelPurchase}
      >
-        {__('This will purchase')} <strong>{title}</strong> {__('for')}{' '}
+        <section className="card__content">
+          {__('This will purchase')} <strong>{`"${title}"`}</strong> {__('for')}{' '}
          <strong>
            <FilePrice uri={uri} showFullPrice inheritStyle showLBC={false} />
          </strong>{' '}
          {__('credits')}.
+        </section>
      </Modal>
    );
  }
--- a/src/renderer/modal/modalAuthFailure/view.jsx
+++ b/src/renderer/modal/modalAuthFailure/view.jsx
@ -1,7 +1,12 @@
+// @flow
 import React from 'react';
 import { Modal } from 'modal/modal';

-class ModalAuthFailure extends React.PureComponent {
+type Props = {
+  close: () => void,
+};
+
+class ModalAuthFailure extends React.PureComponent<Props> {
  render() {
    const { close } = this.props;

@ -9,6 +14,7 @@ class ModalAuthFailure extends React.PureComponent {
      <Modal
        isOpen
        contentLabel={__('Unable to Authenticate')}
+        title={__('Authentication Failure')}
        type="confirm"
        confirmButtonLabel={__('Reload')}
        abortButtonLabel={__('Continue')}
@ -17,12 +23,13 @@ class ModalAuthFailure extends React.PureComponent {
        }}
        onAborted={close}
      >
-        <h3>{__('Authentication Failure')}</h3>
+        <section className="card__content">
          <p>
            {__(
              'If reloading does not fix this, or you see this at every start up, please email help@lbry.io.'
            )}
          </p>
+        </section>
      </Modal>
    );
  }
--- a/src/renderer/modal/modalAutoUpdateConfirm/view.jsx
+++ b/src/renderer/modal/modalAutoUpdateConfirm/view.jsx
@ -1,11 +1,15 @@
+// @flow
 import React from 'react';
 import { Modal } from 'modal/modal';
-import { Line } from 'rc-progress';
 import Button from 'component/button';
+import { ipcRenderer } from 'electron';

-const { ipcRenderer } = require('electron');
+type Props = {
+  closeModal: () => void,
+  declineAutoUpdate: () => void,
+};

-class ModalAutoUpdateConfirm extends React.PureComponent {
+class ModalAutoUpdateConfirm extends React.PureComponent<Props> {
  render() {
    const { closeModal, declineAutoUpdate } = this.props;

@ -14,6 +18,7 @@ class ModalAutoUpdateConfirm extends React.PureComponent {
        isOpen
        type="confirm"
        contentLabel={__('Update Downloaded')}
+        title={__('LBRY Update Ready')}
        confirmButtonLabel={__('Upgrade')}
        abortButtonLabel={__('Not now')}
        onConfirmed={() => {
@ -24,10 +29,9 @@ class ModalAutoUpdateConfirm extends React.PureComponent {
          closeModal();
        }}
      >
-        <section>
-          <h3 className="text-center">{__('LBRY Update Ready')}</h3>
+        <section className="card__content">
          <p>{__('Your LBRY update is ready. Restart LBRY now to use it!')}</p>
-          <p className="meta text-center">
+          <p className="meta">
            {__('Want to know what has changed?')} See the{' '}
            <Button
              button="link"
--- a/src/renderer/modal/modalAutoUpdateDownloaded/view.jsx
+++ b/src/renderer/modal/modalAutoUpdateDownloaded/view.jsx
@ -26,6 +26,7 @@ class ModalAutoUpdateDownloaded extends React.PureComponent<Props> {
        isOpen
        type="confirm"
        contentLabel={__('Update Downloaded')}
+        title={__('LBRY Leveled Up')}
        confirmButtonLabel={__('Use it Now')}
        abortButtonLabel={__('Upgrade on Close')}
        confirmButtonDisabled={this.state.disabled}
@ -39,8 +40,7 @@ class ModalAutoUpdateDownloaded extends React.PureComponent<Props> {
          closeModal();
        }}
      >
-        <section>
-          <h3 className="text-center">{__('LBRY Leveled Up')}</h3>
+        <section className="card__content">
          <p>
            {__(
              'A new version of LBRY has been released, downloaded, and is ready for you to use pending a restart.'
--- a/src/renderer/modal/modalConfirmThumbnailUpload/view.jsx
+++ b/src/renderer/modal/modalConfirmThumbnailUpload/view.jsx
@ -25,12 +25,14 @@ 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}
      >
+        <section className="card__content">
          <p>{__('Are you sure you want to upload this thumbnail to spee.ch')}?</p>
          <blockquote>{path}</blockquote>
          <FormField
@ -40,6 +42,7 @@ class ModalConfirmThumbnailUpload extends React.PureComponent<Props> {
            checked={nsfw}
            onChange={event => updatePublishForm({ nsfw: event.target.checked })}
          />
+        </section>
      </Modal>
    );
  }
--- a/src/renderer/modal/modalConfirmTransaction/view.jsx
+++ b/src/renderer/modal/modalConfirmTransaction/view.jsx
@ -21,21 +21,20 @@ class ModalConfirmTransaction extends React.PureComponent<Props> {
    return (
      <Modal
        isOpen
+        title={__('Send LBC')}
        contentLabel={__('Confirm Transaction')}
        type="confirm"
-        confirmButtonLabel={__('Continue')}
+        confirmButtonLabel={__('Send')}
        onConfirmed={() => this.onConfirmed()}
        onAborted={closeModal}
      >
-        <p>{__('Are you sure you want to ')}</p>
-        <h1>
-          {__('send ')} {amount} LBC
-        </h1>
+        <section className="card__content">
          <p>{__('Sending: ')}</p>
          <blockquote>{amount} LBC</blockquote>
          <p>{__('To address: ')}</p>
          <blockquote>{address}</blockquote>
          <p>{__('Once the transaction is sent, it cannot be reversed.')}</p>
+        </section>
      </Modal>
    );
  }
--- a/src/renderer/modal/modalCreditIntro/view.jsx
+++ b/src/renderer/modal/modalCreditIntro/view.jsx
@ -17,9 +17,8 @@ const ModalCreditIntro = (props: Props) => {
  const totalRewardRounded = Math.floor(totalRewardValue / 10) * 10;

  return (
-    <Modal type="custom" isOpen contentLabel="Welcome to LBRY">
-      <section>
-        <h3 className="modal__header">{__('Computer Wizard Needs Tokens Badly')}</h3>
+    <Modal type="custom" isOpen contentLabel="Welcome to LBRY" title={__('LBRY Credits Needed')}>
+      <section className="card__content">
        <p>
          Some actions require LBRY credits (<em>
            <CurrencySymbol />
--- a/src/renderer/modal/modalDownloading/view.jsx
+++ b/src/renderer/modal/modalDownloading/view.jsx
@ -1,9 +1,18 @@
+// @flow
 import React from 'react';
 import { Modal } from 'modal/modal';
 import { Line } from 'rc-progress';
 import Button from 'component/button';

-class ModalDownloading extends React.PureComponent {
+type Props = {
+  downloadProgress: ?number,
+  downloadComplete: boolean,
+  downloadItem: string,
+  startUpgrade: () => void,
+  cancelUpgrade: () => void,
+};
+
+class ModalDownloading extends React.PureComponent<Props> {
  render() {
    const {
      downloadProgress,
@ -14,13 +23,17 @@ class ModalDownloading extends React.PureComponent {
    } = this.props;

    return (
-      <Modal isOpen contentLabel={__('Downloading Update')} type="custom">
-        {__('Downloading Update')}
-        {downloadProgress ? `: ${downloadProgress}%` : null}
+      <Modal
+        title={__('Downloading Update')}
+        isOpen
+        contentLabel={__('Downloading Update')}
+        type="custom"
+      >
+        <section className="card__content">
+          {downloadProgress ? `${downloadProgress}% ${__('complete')}` : null}
          <Line percent={downloadProgress || 0} strokeWidth="4" />
          {downloadComplete ? (
-          <div>
-            <br />
+            <React.Fragment>
              <p>{__('Click "Begin Upgrade" to start the upgrade process.')}</p>
              <p>
                {__(
@ -34,7 +47,7 @@ class ModalDownloading extends React.PureComponent {
              </p>
              <blockquote>sudo dpkg -i {downloadItem}</blockquote>
              <p>{__('After the install is complete, please reopen the app.')}</p>
-          </div>
+            </React.Fragment>
          ) : null}
          <div className="modal__buttons">
            {downloadComplete ? (
@ -52,6 +65,7 @@ class ModalDownloading extends React.PureComponent {
              onClick={cancelUpgrade}
            />
          </div>
+        </section>
      </Modal>
    );
  }
--- a/src/renderer/modal/modalEmailCollection/view.jsx
+++ b/src/renderer/modal/modalEmailCollection/view.jsx
@ -16,7 +16,6 @@ class ModalEmailCollection extends React.PureComponent<Props> {
    const { closeModal, email, user } = this.props;

    const cancelButton = <Button button="link" onClick={closeModal} label={__('Not Now')} />;
-
    if (user && !user.has_verified_email && !email) {
      return <UserEmailNew cancelButton={cancelButton} />;
    } else if (user && !user.has_verified_email) {
@ -35,16 +34,8 @@ class ModalEmailCollection extends React.PureComponent<Props> {
    }

    return (
-      <Modal type="custom" isOpen contentLabel="Email">
-        <section>
-          <h3 className="modal__header">Can We Stay In Touch?</h3>
-          <div className="card__content">{this.renderInner()}</div>
-          <div className="card__content">
-            <div className="help">
-              {`${__('Your email may be used to sync usage data across devices.')} `}
-            </div>
-          </div>
-        </section>
+      <Modal type="custom" isOpen contentLabel="Email" title={__('Can We Stay In Touch?')}>
+        <section className="card__content">{this.renderInner()}</section>
      </Modal>
    );
  }
--- a/src/renderer/modal/modalError/view.jsx
+++ b/src/renderer/modal/modalError/view.jsx
@ -1,8 +1,14 @@
+// @flow
 import React from 'react';
 import Native from 'native';
 import { ExpandableModal } from 'modal/modal';

-class ModalError extends React.PureComponent {
+type Props = {
+  error: string | { message: string },
+  closeModal: () => void,
+};
+
+class ModalError extends React.PureComponent<Props> {
  render() {
    const { closeModal, error } = this.props;

@ -23,37 +29,39 @@ class ModalError extends React.PureComponent {
      const label = errorKeyLabels[key];
      errorInfoList.push(
        <li key={key}>
-          <strong>{label}</strong>: <code>{val}</code>
+          <strong>{label}</strong>: {val}
        </li>
      );
    }
+
    const errorInfo = <ul className="error-modal__error-list">{errorInfoList}</ul>;

    return (
      <ExpandableModal
        isOpen
        contentLabel={__('Error')}
-        className="error-modal"
-        overlayClassName="error-modal-overlay"
-        onConfirmed={closeModal}
-        extraContent={errorInfo}
-      >
-        <h3 className="modal__header">{__('Error')}</h3>
-
-        <div className="error-modal__content">
-          <div>
+        title={
+          <React.Fragment>
+            {__('Error')}{' '}
            <img
              alt=""
              className="error-modal__warning-symbol"
              src={Native.imagePath('warning.png')}
            />
-          </div>
+          </React.Fragment>
+        }
+        className="error-modal"
+        overlayClassName="error-modal-overlay"
+        onConfirmed={closeModal}
+        extraContent={errorInfo}
+      >
+        <section className="card__content">
          <p>
            {__(
              "We're sorry that LBRY has encountered an error. This has been reported and we will investigate the problem."
            )}
          </p>
-        </div>
+        </section>
      </ExpandableModal>
    );
  }
--- a/src/renderer/modal/modalFileTimeout/view.jsx
+++ b/src/renderer/modal/modalFileTimeout/view.jsx
@ -1,15 +1,33 @@
+// @flow
 import React from 'react';
 import { Modal } from 'modal/modal';
+import type { Metadata } from 'types/claim';

-class ModalFileTimeout extends React.PureComponent {
+type Props = {
+  metadata: Metadata,
+  closeModal: () => void,
+};
+
+class ModalFileTimeout extends React.PureComponent<Props> {
  render() {
    const {
      metadata: { title },
+      closeModal,
    } = this.props;

    return (
-      <Modal isOpen contentLabel={__('Download failed')} onConfirmed={closeModal}>
-        {__('LBRY was unable to download the stream')} <strong>{title}</strong>.
+      <Modal
+        isOpen
+        title={__('Unable to Download')}
+        contentLabel={__('Download failed')}
+        onConfirmed={closeModal}
+      >
+        <section className="card__content">
+          <p className="card__error-msg">
+            {__('LBRY was unable to download the stream')}:
+            <div>{`"${title}"`}</div>
+          </p>
+        </section>
      </Modal>
    );
  }
--- a/src/renderer/modal/modalFirstReward/view.jsx
+++ b/src/renderer/modal/modalFirstReward/view.jsx
@ -1,10 +1,12 @@
-// I"ll come back to This
-/* esline-disable */
+// @flow
 import React from 'react';
 import { Modal } from 'modal/modal';
-import CreditAmount from 'component/common/credit-amount';

-class ModalFirstReward extends React.PureComponent {
+type Props = {
+  closeModal: () => void,
+};
+
+class ModalFirstReward extends React.PureComponent<Props> {
  render() {
    const { closeModal } = this.props;

@ -14,10 +16,10 @@ class ModalFirstReward extends React.PureComponent {
        overlayClassName="modal-overlay modal-overlay--clear"
        isOpen
        contentLabel={__('Welcome to LBRY')}
+        title={__('Your First Reward')}
        onConfirmed={closeModal}
      >
-        <section>
-          <h3 className="modal__header">{__('Your First Reward')}</h3>
+        <section className="card__content">
          <p>{__('You just earned your first reward!')}</p>
          <p>
            {__(
@ -41,4 +43,3 @@ class ModalFirstReward extends React.PureComponent {
 }

 export default ModalFirstReward;
-/* eslint-enable */
--- a/src/renderer/modal/modalFirstSubscription/view.jsx
+++ b/src/renderer/modal/modalFirstSubscription/view.jsx
@ -1,14 +1,19 @@
+// @flow
 import React from 'react';
 import { Modal } from 'modal/modal';
 import Button from 'component/button';

-const ModalFirstSubscription = props => {
+type Props = {
+  closeModal: () => void,
+  navigate: string => void,
+};
+
+const ModalFirstSubscription = (props: Props) => {
  const { closeModal, navigate } = props;

  return (
-    <Modal type="custom" isOpen contentLabel="Subscriptions 101">
-      <section>
-        <h3 className="modal__header">{__('Subscriptions 101')}</h3>
+    <Modal type="custom" isOpen contentLabel="Subscriptions 101" title={__('Subscriptions 101')}>
+      <section className="card__content">
        <p>{__('You just subscribed to your first channel. Awesome!')}</p>
        <p>{__('A few quick things to know:')}</p>
        <p className="card__content">
--- a/src/renderer/modal/modalIncompatibleDaemon/view.jsx
+++ b/src/renderer/modal/modalIncompatibleDaemon/view.jsx
@ -15,6 +15,7 @@ class ModalIncompatibleDaemon extends React.PureComponent<Props> {
    return (
      <Modal
        isOpen
+        title={__('Incompatible Daemon')}
        contentLabel={__('Incompatible daemon running')}
        type="confirm"
        confirmButtonLabel={__('Close LBRY and daemon')}
@ -22,9 +23,11 @@ class ModalIncompatibleDaemon extends React.PureComponent<Props> {
        onConfirmed={quitAnyDaemon}
        onAborted={quit}
      >
+        <p>
          {__(
            'This browser is running with an incompatible version of the LBRY protocol, please close the LBRY app and rerun the installation package to repair it. '
          )}
+        </p>
        <Button
          button="link"
          label={__('Learn more')}
--- a/src/renderer/modal/modalOpenExternalLink/view.jsx
+++ b/src/renderer/modal/modalOpenExternalLink/view.jsx
@ -23,13 +23,14 @@ class ModalOpenExternalLink extends React.PureComponent<Props> {
    return (
      <Modal
        isOpen
+        title={__('Warning!')}
        contentLabel={__('Confirm External Link')}
        type="confirm"
        confirmButtonLabel={__('Continue')}
        onConfirmed={() => this.openExternalLink()}
        onAborted={closeModal}
      >
-        <h1>Warning!</h1>
+        <section className="card__content">
          <p>{__('This link leads to an external website.')}</p>
          <blockquote>{uri}</blockquote>
          <p>
@ -37,6 +38,7 @@ class ModalOpenExternalLink extends React.PureComponent<Props> {
              'LBRY Inc is not responsible for its content, click continue to proceed at your own risk.'
            )}
          </p>
+        </section>
      </Modal>
    );
  }
--- a/src/renderer/modal/modalPhoneCollection/view.jsx
+++ b/src/renderer/modal/modalPhoneCollection/view.jsx
@ -1,10 +1,19 @@
+// @flow
 import React from 'react';
 import { Modal } from 'modal/modal';
 import Button from 'component/button';
 import UserPhoneNew from 'component/userPhoneNew';
 import UserPhoneVerify from 'component/userPhoneVerify';

-class ModalPhoneCollection extends React.PureComponent {
+type Props = {
+  phone: ?number,
+  user: {
+    phone_number: ?number,
+  },
+  closeModal: () => void,
+};
+
+class ModalPhoneCollection extends React.PureComponent<Props> {
  renderInner() {
    const { closeModal, phone, user } = this.props;

@ -15,7 +24,7 @@ class ModalPhoneCollection extends React.PureComponent {
    } else if (!user.phone_number) {
      return <UserPhoneVerify cancelButton={cancelButton} />;
    }
-    closeModal();
+    return closeModal();
  }

  render() {
@ -27,11 +36,8 @@ class ModalPhoneCollection extends React.PureComponent {
    }

    return (
-      <Modal type="custom" isOpen contentLabel="Phone">
-        <section>
-          <h3 className="modal__header">Verify Your Phone</h3>
-          {this.renderInner()}
-        </section>
+      <Modal type="custom" isOpen contentLabel="Phone" title={__('Verify Your Phone')}>
+        <section className="card__content">{this.renderInner()}</section>
      </Modal>
    );
  }
--- a/src/renderer/modal/modalPublish/view.jsx
+++ b/src/renderer/modal/modalPublish/view.jsx
@ -16,6 +16,7 @@ class ModalSendTip extends React.PureComponent<Props> {
    return (
      <Modal
        isOpen
+        title={__('Success')}
        contentLabel={__('File published')}
        onConfirmed={() => {
          clearPublish();
@ -23,6 +24,7 @@ class ModalSendTip extends React.PureComponent<Props> {
          closeModal();
        }}
      >
+        <section className="card__content">
          <p>{__('Your file has been published to LBRY at the address')}</p>
          <p className="card__success-msg">{uri}</p>
          <p>
@ -30,6 +32,7 @@ class ModalSendTip extends React.PureComponent<Props> {
              'The file will take a few minutes to appear for other LBRY users. Until then it will be listed as "pending" under your published files.'
            )}
          </p>
+        </section>
      </Modal>
    );
  }
--- a/src/renderer/modal/modalRemoveFile/view.jsx
+++ b/src/renderer/modal/modalRemoveFile/view.jsx
@ -60,14 +60,17 @@ 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}
      >
+        <section className="card__content">
          <p>
-          {__("Are you sure you'd like to remove")} <cite>{title}</cite> {__('from the LBRY app?')}
+            {__("Are you sure you'd like to remove")} <cite>{`"${title}"`}</cite>{' '}
+            {__('from the LBRY app?')}
          </p>

          <FormRow padded>
@ -88,6 +91,7 @@ class ModalRemoveFile extends React.PureComponent<Props, State> {
              />
            </FormRow>
          )}
+        </section>
      </Modal>
    );
  }
--- a/src/renderer/modal/modalRevokeClaim/view.jsx
+++ b/src/renderer/modal/modalRevokeClaim/view.jsx
@ -1,10 +1,52 @@
+// @flow
 import React from 'react';
 import { Modal } from 'modal/modal';
 import * as txnTypes from 'constants/transaction_types';

-class ModalRevokeClaim extends React.PureComponent {
-  constructor(props) {
-    super(props);
+type Props = {
+  closeModal: () => void,
+  abandonClaim: (string, number) => void,
+  txid: string,
+  nout: number,
+};
+
+class ModalRevokeClaim extends React.PureComponent<Props> {
+  constructor() {
+    super();
+
+    (this: any).revokeClaim = this.revokeClaim.bind(this);
+  }
+
+  getButtonLabel(type) {
+    if (type === txnTypes.TIP) {
+      return 'Confirm Tip Unlock';
+    }
+    return 'Confirm Claim Revoke';
+  }
+
+  getMsgBody(type) {
+    if (type === txnTypes.TIP) {
+      return (
+        <React.Fragment>
+          <p>{__('Are you sure you want to unlock these credits?')}</p>
+          <p>
+            {__(
+              'These credits are permanently yours and can be unlocked at any time. Unlocking them allows you to spend them, but can hurt the performance of your content in lookups and search results. It is recommended you leave tips locked until you need or want to spend them.'
+            )}
+          </p>
+        </React.Fragment>
+      );
+    }
+    return (
+      <React.Fragment>
+        <p>{__('Are you sure want to revoke this claim?')}</p>
+        <p>
+          {__(
+            'This will prevent others from resolving and accessing the content you published. It will return the LBC to your spendable balance, less a small transaction fee.'
+          )}
+        </p>
+      </React.Fragment>
+    );
  }

  revokeClaim() {
@ -14,52 +56,6 @@ class ModalRevokeClaim extends React.PureComponent {
    this.props.abandonClaim(txid, nout);
  }

-  getButtonLabel(type) {
-    if (type == txnTypes.TIP) {
-      return 'Confirm Tip Unlock';
-    }
-    return 'Confirm Claim Revoke';
-  }
-
-  getMsgBody(type) {
-    if (type == txnTypes.TIP) {
-      return (
-        <div>
-          <h3>{__('Confirm Tip Unlock')}</h3>
-          <p>
-            {__('Are you sure you want to unlock these credits?')}
-            <br />
-            <br />
-            {__(
-              'These credits are permanently yours and can be\
-             unlocked at any time. Unlocking them allows you to\
-             spend them, but can hurt the performance of your\
-             content in lookups and search results. It is\
-             recommended you leave tips locked until you\
-             need or want to spend them.'
-            )}
-          </p>
-        </div>
-      );
-    }
-    return (
-      <div>
-        <h3>{__('Confirm Claim Revoke')}</h3>
-        <p>
-          {__('Are you sure want to revoke this claim?')}
-          <br />
-          <br />
-          {__(
-            'This will prevent others from resolving and\
-              accessing the content you published. It will return\
-              the LBC to your spendable balance, less a small\
-              transaction fee.'
-          )}
-        </p>
-      </div>
-    );
-  }
-
  render() {
    const { transactionItems, txid, nout, closeModal } = this.props;
    const { type } = transactionItems.find(claim => claim.txid == txid && claim.nout == nout);
@ -67,13 +63,14 @@ class ModalRevokeClaim extends React.PureComponent {
    return (
      <Modal
        isOpen
+        title={type === txnTypes.TIP ? __('Confirm Tip Unlock') : __('Confirm Claim Revoke')}
        contentLabel={__('Confirm Claim Revoke')}
        type="confirm"
        confirmButtonLabel={this.getButtonLabel(type)}
-        onConfirmed={this.revokeClaim.bind(this)}
+        onConfirmed={this.revokeClaim}
        onAborted={closeModal}
      >
-        {this.getMsgBody(type)}
+        <section className="card__content">{this.getMsgBody(type)}</section>
      </Modal>
    );
  }
--- a/src/renderer/modal/modalRewardApprovalRequired/view.jsx
+++ b/src/renderer/modal/modalRewardApprovalRequired/view.jsx
@ -1,13 +1,20 @@
+// @flow
 import React from 'react';
 import { Modal } from 'modal/modal';

-class ModalRewardApprovalRequired extends React.PureComponent {
+type Props = {
+  closeModal: () => void,
+  doAuth: () => void,
+};
+
+class ModalRewardApprovalRequired extends React.PureComponent<Props> {
  render() {
    const { closeModal, doAuth } = this.props;

    return (
      <Modal
        isOpen
+        title={__('Hmm. Are you real?')}
        contentLabel={__('Human Verification Required')}
        onConfirmed={doAuth}
        onAborted={closeModal}
@ -15,8 +22,7 @@ class ModalRewardApprovalRequired extends React.PureComponent {
        confirmButtonLabel={__("I'm Totally Real")}
        abortButtonLabel={__('Never Mind')}
      >
-        <section>
-          <h3 className="modal__header">{__('This is awkward. Are you real?')}</h3>
+        <section className="card__content">
          <p>
            {__(
              "Before we can give you any credits, we need to perform a brief check to make sure you're a new and unique person."
--- a/src/renderer/modal/modalRewardCode/view.jsx
+++ b/src/renderer/modal/modalRewardCode/view.jsx
@ -39,6 +39,7 @@ class ModalRewardCode extends React.PureComponent<Props, State> {
    return (
      <Modal
        isOpen
+        title={__('Enter Reward Code')}
        contentLabel={__('Enter Reward Code')}
        type="confirm"
        confirmButtonLabel={__('Redeem')}
@ -47,8 +48,7 @@ class ModalRewardCode extends React.PureComponent<Props, State> {
        onAborted={closeModal}
        confirmButtonDisabled={rewardIsPending}
      >
-        <h3 className="modal__header">{__('Enter Reward Code')}</h3>
-        <div className="card__content">
+        <section className="card__content">
          <FormRow>
            <FormField
              stretch
@ -72,7 +72,7 @@ class ModalRewardCode extends React.PureComponent<Props, State> {
              }
            />
          </FormRow>
-        </div>
+        </section>
      </Modal>
    );
  }
--- a/src/renderer/modal/modalSendTip/view.jsx
+++ b/src/renderer/modal/modalSendTip/view.jsx
@ -2,6 +2,7 @@
 import React from 'react';
 import { Modal } from 'modal/modal';
 import SendTip from 'component/walletSendTip';
+import UriIndicator from 'component/uriIndicator';

 type Props = {
  closeModal: () => void,
@ -13,7 +14,16 @@ class ModalSendTip extends React.PureComponent<Props> {
    const { closeModal, uri } = this.props;

    return (
-      <Modal onAborted={closeModal} isOpen type="custom">
+      <Modal
+        onAborted={closeModal}
+        isOpen
+        type="custom"
+        title={
+          <React.Fragment>
+            {__('Send a tip to')} <UriIndicator uri={uri} />
+          </React.Fragment>
+        }
+      >
        <SendTip uri={uri} onCancel={closeModal} sendTipCallback={closeModal} />
      </Modal>
    );
--- a/src/renderer/modal/modalSocialShare/view.jsx
+++ b/src/renderer/modal/modalSocialShare/view.jsx
@ -12,7 +12,7 @@ class ModalSocialShare extends React.PureComponent<Props> {
  render() {
    const { closeModal, uri } = this.props;
    return (
-      <Modal isOpen onAborted={closeModal} type="custom">
+      <Modal isOpen onAborted={closeModal} type="custom" title={__('Share')}>
        <SocialShare uri={uri} onDone={closeModal} />
      </Modal>
    );
--- a/src/renderer/modal/modalTransactionFailed/view.jsx
+++ b/src/renderer/modal/modalTransactionFailed/view.jsx
@ -1,14 +1,22 @@
+// @flow
 import React from 'react';
 import { Modal } from 'modal/modal';

-class ModalTransactionFailed extends React.PureComponent {
+type Props = {
+  closeModal: () => void,
+};
+
+class ModalTransactionFailed extends React.PureComponent<Props> {
  render() {
    const { closeModal } = this.props;

    return (
-      <Modal isOpen contentLabel={__('Transaction failed')} onConfirmed={closeModal}>
-        {__('Transaction failed.')}:
-      </Modal>
+      <Modal
+        isOpen
+        contentLabel={__('Transaction failed')}
+        title={__('Transaction Failed')}
+        onConfirmed={closeModal}
+      />
    );
  }
 }
--- a/src/renderer/modal/modalUpgrade/view.jsx
+++ b/src/renderer/modal/modalUpgrade/view.jsx
@ -1,8 +1,14 @@
+// @flow
 import React from 'react';
 import { Modal } from 'modal/modal';
 import Button from 'component/button';

-class ModalUpgrade extends React.PureComponent {
+type Props = {
+  downloadUpgrade: () => void,
+  skipUpgrade: () => void,
+};
+
+class ModalUpgrade extends React.PureComponent<Props> {
  render() {
    const { downloadUpgrade, skipUpgrade } = this.props;

@ -10,19 +16,19 @@ class ModalUpgrade extends React.PureComponent {
      <Modal
        isOpen
        contentLabel={__('Upgrade available')}
+        title={__('LBRY Leveled Up')}
        type="confirm"
        confirmButtonLabel={__('Upgrade')}
        abortButtonLabel={__('Skip')}
        onConfirmed={downloadUpgrade}
        onAborted={skipUpgrade}
      >
-        <h3 className="text-center">{__('LBRY Leveled Up')}</h3>
-        <br />
+        <div className="card__content">
          <p>
            {__('An updated version of LBRY is now available.')}{' '}
            {__('Your version is out of date and may be unreliable or insecure.')}
          </p>
-        <p className="meta text-center">
+          <p className="meta">
            {__('Want to know what has changed?')} See the{' '}
            <Button
              button="link"
@ -30,6 +36,7 @@ class ModalUpgrade extends React.PureComponent {
              href="https://github.com/lbryio/lbry-desktop/releases"
            />.
          </p>
+        </div>
      </Modal>
    );
  }
--- a/src/renderer/modal/modalWalletDecrypt/view.jsx
+++ b/src/renderer/modal/modalWalletDecrypt/view.jsx
@ -1,12 +1,12 @@
 // @flow
 import React from 'react';
-import { Form, FormRow, FormField } from 'component/common/form';
+import { Form } from 'component/common/form';
 import { Modal } from 'modal/modal';
 import Button from 'component/button';

 type Props = {
  closeModal: () => void,
-  unlockWallet: string => void,
+  decryptWallet: () => void,
  walletDecryptSucceded: boolean,
  updateWalletStatus: boolean,
 };
@ -16,11 +16,6 @@ class ModalWalletDecrypt extends React.PureComponent<Props> {
    submitted: false, // Prior actions could be marked complete
  };

-  submitDecryptForm() {
-    this.setState({ submitted: true });
-    this.props.decryptWallet();
-  }
-
  componentDidUpdate() {
    const { props, state } = this;

@ -30,12 +25,18 @@ class ModalWalletDecrypt extends React.PureComponent<Props> {
    }
  }

+  submitDecryptForm() {
+    this.setState({ submitted: true });
+    this.props.decryptWallet();
+  }
+
  render() {
-    const { closeModal, walletDecryptSucceded } = this.props;
+    const { closeModalgaa } = this.props;

    return (
      <Modal
        isOpen
+        title={__('Decrypt Wallet')}
        contentLabel={__('Decrypt Wallet')}
        type="confirm"
        confirmButtonLabel={__('Decrypt Wallet')}
@ -43,10 +44,13 @@ class ModalWalletDecrypt extends React.PureComponent<Props> {
        onConfirmed={() => this.submitDecryptForm()}
        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"
@ -55,6 +59,7 @@ class ModalWalletDecrypt extends React.PureComponent<Props> {
              />
            </div>
          </Form>
+        </section>
      </Modal>
    );
  }
--- a/src/renderer/modal/modalWalletEncrypt/view.jsx
+++ b/src/renderer/modal/modalWalletEncrypt/view.jsx
@ -82,6 +82,7 @@ class ModalWalletEncrypt extends React.PureComponent<Props> {
    return (
      <Modal
        isOpen
+        title={__('Encrypt Wallet')}
        contentLabel={__('Encrypt Wallet')}
        type="confirm"
        confirmButtonLabel={__('Encrypt Wallet')}
@ -89,10 +90,13 @@ class ModalWalletEncrypt extends React.PureComponent<Props> {
        onConfirmed={() => this.submitEncryptForm()}
        onAborted={closeModal}
      >
+        <section className="card__content">
          <Form onSubmit={() => this.submitEncryptForm()}>
+            <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.'
              )}
+            </p>
            <FormRow padded>
              <FormField
                stretch
@ -114,10 +118,11 @@ class ModalWalletEncrypt extends React.PureComponent<Props> {
                onChange={event => this.onChangeNewPasswordConfirm(event)}
              />
            </FormRow>
-          <br />
+            <p>
              {__(
                'If your password is lost, it cannot be recovered. You will not be able to access your wallet without a password.'
              )}
+            </p>
            <FormRow padded>
              <FormField
                stretch
@ -137,6 +142,7 @@ class ModalWalletEncrypt extends React.PureComponent<Props> {
            </div>
            {failMessage && <div className="error-text">{__(failMessage)}</div>}
          </Form>
+        </section>
      </Modal>
    );
  }
--- a/src/renderer/modal/modalWalletUnlock/view.jsx
+++ b/src/renderer/modal/modalWalletUnlock/view.jsx
@ -36,6 +36,7 @@ class ModalWalletUnlock extends React.PureComponent<Props> {
    return (
      <Modal
        isOpen
+        title={__('Unlock Wallet')}
        contentLabel={__('Unlock Wallet')}
        type="confirm"
        shouldCloseOnOverlayClick={false}
@ -44,10 +45,13 @@ class ModalWalletUnlock extends React.PureComponent<Props> {
        onConfirmed={() => unlockWallet(password)}
        onAborted={quit}
      >
+        <section className="card__content">
          <Form onSubmit={() => unlockWallet(password)}>
+            <p>
              {__(
                'Your wallet has been encrypted with a local password. Please enter your wallet password to proceed.'
              )}
+            </p>
            <FormRow padded>
              <FormField
                stretch
@ -67,6 +71,7 @@ class ModalWalletUnlock extends React.PureComponent<Props> {
              />
            </div>
          </Form>
+        </section>
      </Modal>
    );
  }
--- a/src/renderer/modal/modalWelcome/view.jsx
+++ b/src/renderer/modal/modalWelcome/view.jsx
@ -6,9 +6,8 @@ const ModalWelcome = props => {
  const { closeModal } = props;

  return (
-    <Modal type="custom" isOpen contentLabel="Welcome to LBRY">
-      <section>
-        <h3 className="modal__header">{__('Welcome to LBRY')}</h3>
+    <Modal type="custom" isOpen contentLabel="Welcome to LBRY" title={__('Welcome to LBRY')}>
+      <section className="card__content">
        <p>
          {__('Using LBRY is like dating a centaur. Totally normal up top, and')}{' '}
          <em>{__('way different')}</em> {__('underneath.')}
@ -18,7 +17,7 @@ const ModalWelcome = props => {
          {__('Below, LBRY is controlled by users -- you -- via blockchain and decentralization.')}
        </p>
        <div className="modal__buttons">
-          <Button button="primary" onClick={closeModal} label={__("Blockchain Centaurs? I'm In")} />
+          <Button button="primary" onClick={closeModal} label={__("I'm In")} />
        </div>
      </section>
    </Modal>
--- a/src/renderer/scss/_gui.scss
+++ b/src/renderer/scss/_gui.scss
@ -153,6 +153,10 @@ dd {

 p {
  font-family: 'metropolis-medium';
+
+  &:not(:first-of-type) {
+    margin-top: $spacing-vertical * 1/3;
+  }
 }

 .page {
@ -361,7 +365,7 @@ p {

 .meta {
  font-family: 'metropolis-medium';
-  font-size: 14px;
+  font-size: 0.8em;
  color: var(--color-meta-light);
 }

--- a/src/renderer/scss/_vars.scss
+++ b/src/renderer/scss/_vars.scss
@ -37,6 +37,7 @@ $large-breakpoint: 1921px;
  --color-green-blue: #2ec1a8;
  --color-purple: #8165b0;
  --color-blue-grey: #203049;
+  --color-red-light: #fff6f6;

  /* Colors */
  --color-divider: #e3e3e3;
@ -157,6 +158,9 @@ $large-breakpoint: 1921px;
  --success-msg-color: var(--color-green);
  --success-msg-border: var(--color-green-blue);
  --success-msg-bg: var(--color-green-light);
+  --error-msg-color: var(--color-error);
+  --error-msg-border: var(--color-error);
+  --error-msg-bg: var(--color-red-light);

  /* File */
  --file-tile-media-height: 125px;
--- a/src/renderer/scss/component/_card.scss
+++ b/src/renderer/scss/component/_card.scss
@ -457,6 +457,14 @@
  margin: $spacing-vertical * 1/3 0;
 }

+.card__error-msg {
+  border-left: 2px solid var(--error-msg-border);
+  color: var(--error-msg-color);
+  background-color: var(--error-msg-bg);
+  padding: $spacing-vertical * 1/3;
+  margin: $spacing-vertical * 1/3 0;
+}
+
 .card__media--autothumb {
  color: red !important;
 }
--- a/src/renderer/scss/component/_modal.scss
+++ b/src/renderer/scss/component/_modal.scss
@ -21,7 +21,6 @@
  display: flex;
  flex-direction: column;
  justify-content: center;
-  align-items: center;
  border: var(--modal-border);
  background: var(--modal-bg);
  overflow: auto;
@ -75,7 +74,6 @@

 .modal__header {
  font-size: 2em;
-  margin-bottom: $spacing-vertical * 2/3;
 }

 .modal__buttons {
@ -104,8 +102,8 @@
 }

 .error-modal__warning-symbol {
-  margin-top: 6px;
-  margin-right: 7px;
+  margin-top: -5px;
+  height: 28px;
 }

 .download-started-modal__file-path {
@ -118,15 +116,13 @@
 }

 .error-modal__error-list {
-  /*shitty hack/temp fix for long errors making modal unusable*/
-  border: 1px solid var(--input-border-color);
-  padding: 8px;
+  margin-top: $spacing-vertical * 1/3;
+  padding: $spacing-vertical * 1/3;
  list-style: none;
  max-height: 400px;
  max-width: var(--modal-width);
  overflow-y: scroll;
-}
-
-.error-modal__content p {
-  padding: 0 0 $spacing-vertical $spacing-vertical;
+  color: #a94442;
+  background-color: #ffe0df;
+  border-left: 2px solid #a94442;
 }