modal consistency cleanup

package.json

@@ -69,7 +69,7 @@
     "@babel/register": "^7.0.0",
     "@exponent/electron-cookies": "^2.0.0",
     "@hot-loader/react-dom": "^16.8",
-    "@lbry/components": "^4.1.2",
+    "@lbry/components": "^4.1.3",
     "@reach/menu-button": "0.7.4",
     "@reach/rect": "^0.2.1",
     "@reach/tabs": "^0.1.5",

ui/component/channelContent/view.jsx

@@ -50,7 +50,7 @@ function ChannelContent(props: Props) {
               'In response to a complaint we received under the US Digital Millennium Copyright Act, we have blocked access to this channel from our applications.'
             )}
           </p>
-          <div className="card__actions">
+          <div className="section__actions">
             <Button button="link" href="https://lbry.com/faq/dmca" label={__('Read More')} />
           </div>
         </section>

ui/component/channelCreate/view.jsx

@@ -122,7 +122,7 @@ class ChannelCreate extends React.PureComponent<Props, State> {
             onChange={event => this.handleNewChannelBidChange(parseFloat(event.target.value))}
             onWheel={e => e.stopPropagation()}
           />
-          <div className="card__actions">
+          <div className="section__actions">
             <Button
               type="submit"
               button="primary"

ui/component/channelEdit/view.jsx

@@ -195,7 +195,7 @@ function ChannelForm(props: Props) {
           });
         }}
       />
-      <div className={'card__actions'}>
+      <div className={'section__actions'}>
         <Button button="primary" label={__('Submit')} onClick={handleSubmit} />
         <Button button="link" label={__('Cancel')} navigate={`$/${PAGES.CHANNELS}`} />
       </div>

ui/component/walletSendTip/view.jsx

@@ -145,7 +145,7 @@ function WalletSendTip(props: Props) {
           }
         />
       </Form>
-      <div className="card__actions">
+      <div className="section__actions">
         <Button button="link" label={__('Cancel')} onClick={onCancel} />
       </div>
     </React.Fragment>

ui/modal/modalConfirmSendTip/view.jsx

@@ -3,6 +3,7 @@ import React from 'react';
 import Button from 'component/button';
 import { Form } from 'component/common/form';
 import { Modal } from 'modal/modal';
+import Card from 'component/common/card';
 
 type Props = {
   claimId: string,
@@ -21,24 +22,33 @@ class ModalConfirmSendTip extends React.PureComponent<Props> {
   }
 
   render() {
-    const { tipAmount, title, isSupport, closeModal } = this.props;
+    const { tipAmount = 5.5, title = 'This is a random title name', isSupport, closeModal } = this.props;
+    const cardTitle = __(isSupport ? 'Confirm Support' : 'Confirm Tip');
+
     return (
-      <Modal
-        isOpen
-        title={__(isSupport ? 'Support LBC' : 'Tip LBC')}
-        contentLabel={__(isSupport ? 'Confirm Support' : 'Confirm Tip')}
-        type="custom"
-        onAborted={closeModal}
-      >
+      <Modal isOpen type="card" onAborted={closeModal} contentLabel={cardTitle}>
         <Form onSubmit={() => this.onConfirmed()}>
-          <p>{__(isSupport ? 'Supporting: ' : 'Tipping: ')}</p>
+          <Card
+            title={cardTitle}
+            body={
+              <>
+                <div className="section">
+                  <label>{__(isSupport ? 'Supporting: ' : 'Tipping: ')}</label>
                   <blockquote>{tipAmount} LBC</blockquote>
-          <p>{__('To: ')}</p>
+                </div>
+                <div className="section">
+                  <label>{__('To: ')}</label>
                   <blockquote>{title}</blockquote>
-          <div className="card__actions">
-            <Button autoFocus button="primary" label={__('Send')} onClick={() => this.onConfirmed()} />
+                </div>
+              </>
+            }
+            actions={
+              <div className="section__actions">
+                <Button autoFocus button="primary" type="submit" label={__('Send')} />
                 <Button button="link" label={__('Cancel')} onClick={closeModal} />
               </div>
+            }
+          />
         </Form>
       </Modal>
     );

ui/modal/modalConfirmTransaction/view.jsx

@@ -3,6 +3,7 @@ import React from 'react';
 import Button from 'component/button';
 import { Form } from 'component/common/form';
 import { Modal } from 'modal/modal';
+import Card from 'component/common/card';
 
 type Props = {
   address: string,
@@ -20,24 +21,34 @@ class ModalConfirmTransaction extends React.PureComponent<Props> {
 
   render() {
     const { amount, address, closeModal } = this.props;
+    const title = __('Confirm Transaction');
     return (
-      <Modal
-        isOpen
-        title={__('Send LBC')}
-        contentLabel={__('Confirm Transaction')}
-        type="custom"
-        onAborted={closeModal}
-      >
+      <Modal isOpen contentLabel={title} type="card" onAborted={closeModal}>
         <Form onSubmit={() => this.onConfirmed()}>
-          <p>{__('Sending: ')}</p>
+          <Card
+            title={title}
+            body={
+              <>
+                <div className="section">
+                  <label>{__('Sending: ')}</label>
                   <blockquote>{amount} LBC</blockquote>
+                </div>
+                <div className="section">
                   <p>{__('To address: ')}</p>
                   <blockquote>{address}</blockquote>
-          <p>{__('Once the transaction is sent, it cannot be reversed.')}</p>
-          <div className="card__actions">
+                </div>
+              </>
+            }
+            actions={
+              <>
+                <div className="section__actions">
                   <Button autoFocus button="primary" label={__('Send')} onClick={() => this.onConfirmed()} />
                   <Button button="link" label={__('Cancel')} onClick={closeModal} />
                 </div>
+                <p className="help">{__('Once the transaction is sent, it cannot be reversed.')}</p>
+              </>
+            }
+          />
         </Form>
       </Modal>
     );

ui/modal/modalRevokeClaim/view.jsx

@@ -3,6 +3,8 @@ import React, { useState } from 'react';
 import { Modal } from 'modal/modal';
 import { FormField } from 'component/common/form';
 import * as txnTypes from 'constants/transaction_types';
+import Card from 'component/common/card';
+import Button from 'component/button';
 
 type Props = {
   closeModal: () => void,
@@ -86,18 +88,28 @@ export default function ModalRevokeClaim(props: Props) {
     closeModal();
   }
 
+  const label = getButtonLabel(type);
+
   return (
     <Modal
       isOpen
-      title={getButtonLabel(type)}
-      contentLabel={getButtonLabel(type)}
-      type="confirm"
-      confirmButtonLabel={getButtonLabel(type)}
+      contentLabel={label}
+      type="card"
+      confirmButtonLabel={label}
       onConfirmed={revokeClaim}
       onAborted={closeModal}
       confirmButtonDisabled={valueType === txnTypes.CHANNEL && name !== channelName}
     >
-      <section>{getMsgBody(type, name)}</section>
+      <Card
+        title={label}
+        body={getMsgBody(type, name)}
+        actions={
+          <div className="section__actions">
+            <Button button="primary" label={label} onClick={revokeClaim} />
+            <Button button="link" label={__('Cancel')} onClick={closeModal} />
+          </div>
+        }
+      />
     </Modal>
   );
 }

ui/page/show/view.jsx

@@ -87,7 +87,7 @@ function ShowPage(props: Props) {
               'In response to a complaint we received under the US Digital Millennium Copyright Act, we have blocked access to this content from our applications.'
             )}
             actions={
-              <div className="card__actions">
+              <div className="section__actions">
                 <Button button="link" href="https://lbry.com/faq/dmca" label={__('Read More')} />
               </div>
             }

ui/scss/component/_header.scss

@@ -154,6 +154,7 @@
 
 .header__navigation-item--balance {
   margin: 0 var(--spacing-medium);
+  font-weight: var(--font-weight-bold);
 }
 
 .header__navigation-dropdown {

ui/scss/component/section.scss

@@ -121,7 +121,6 @@
   }
 
   .button--primary ~ .button--link {
-    font-weight: var(--font-weight-bold);
     margin-left: var(--spacing-small);
     padding: var(--spacing-xsmall);
   }

ui/scss/init/_gui.scss

@@ -93,7 +93,6 @@ dd {
 }
 
 blockquote {
-  margin-bottom: 1rem;
   padding: 0.8rem;
   background-color: var(--color-blockquote-bg);
   border-left: 0.3rem solid var(--color-blockquote);

ui/scss/themes/dark.scss

@@ -54,6 +54,7 @@
   --color-text-warning: #212529;
   --color-text-warning--background: var(--lbry-yellow-1);
   --color-blockquote: var(--color-gray-5);
+  --color-blockquote-bg: var(--color-card-background-highlighted);
 
   // Input
   --color-input: #f4f4f5;

ui/scss/themes/light.scss

@@ -33,6 +33,7 @@
   --color-text-help-warning: #989b20;
   --color-text-warning--background: var(--lbry-yellow-1);
   --color-blockquote: var(--color-gray-3);
+  --color-blockquote-bg: var(--color-gray-1);
 
   --color-spinner-light: #ffffff;
   --color-spinner-dark: #212529;

yarn.lock

@@ -826,10 +826,10 @@
     prop-types "^15.6.2"
     scheduler "^0.18.0"
 
-"@lbry/components@^4.1.2":
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/@lbry/components/-/components-4.1.2.tgz#18eda2f1a73a6241e9a96594ccab8fffb9ef3ae9"
-  integrity sha512-GJx4BTdEtOlm5/JsKUVXBzYeepXTbZ4GjGFrKxzXh6jWw40aFOh8OrHwYM/LHRl1fuKRmB5xpZNWsjw6EKyEeQ==
+"@lbry/components@^4.1.3":
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/@lbry/components/-/components-4.1.3.tgz#ff637a3017f8fb5bd3fa9ea27ba760a08e77ae5d"
+  integrity sha512-VQlruDidsk4gpcN14XjfVx5TeD4ajrF2kk4sJQinPFuFrM5P6kdyzbd9FvksPLss8rujnGCgnjvBj4F14KEOOg==
 
 "@mapbox/hast-util-table-cell-style@^0.1.3":
   version "0.1.3"