redesign fixes

ui/component/claimListDiscover/view.jsx

@@ -175,25 +175,20 @@ function ClaimListDiscover(props: Props) {
   );
 
   const noTags = (
-    <div>
+    <p>
-      <p>
       <I18nMessage
         tokens={{
-          customize: <Button
+          customize: <Button button="link" navigate={`/$/${PAGES.FOLLOWING}`} label={__('customize')} />,
-            button="link"
-            navigate={`/$/${PAGES.FOLLOWING}`}
-            label={__('customize')}
-          />,
         }}
       >
         You're not following any tags. Add tags above or smash that %customize% button!
       </I18nMessage>
-      </p>
+    </p>
-    </div>
   );
 
-  const noFollowing = (personalSort === SEARCH_SORT_YOU && noTags) || (personalSort === SEARCH_SORT_CHANNELS && noChannels);
+  const noFollowing =
-  const emptyState = !loading  && !hasContent ? noFollowing : noResults;
+    (personalSort === SEARCH_SORT_YOU && noTags) || (personalSort === SEARCH_SORT_CHANNELS && noChannels);
+  const emptyState = !loading && !hasContent ? noFollowing : noResults;
 
   function getSearch() {
     let search = `?`;

ui/modal/modalFirstReward/view.jsx

@@ -1,6 +1,8 @@
 // @flow
 import React from 'react';
 import { Modal } from 'modal/modal';
+import Card from 'component/common/card';
+import Button from 'component/button';
 
 type Props = {
   closeModal: () => void,
@@ -11,21 +13,23 @@ class ModalFirstReward extends React.PureComponent<Props> {
     const { closeModal } = this.props;
 
     return (
-      <Modal
+      <Modal type="card" isOpen contentLabel={__('Your First Reward')} onConfirmed={closeModal}>
-        type="alert"
+        <Card
-        isOpen
+          title={__('Your First Reward')}
-        contentLabel={__('Welcome to LBRY')}
+          subtitle={__('You just earned your first reward!')}
-        title={__('Your First Reward')}
+          body={
-        onConfirmed={closeModal}
+            <React.Fragment>
-      >
+              <p>{__("This reward will show in your Wallet in the top right momentarily (if it hasn't already).")}</p>
-        <p>{__('You just earned your first reward!')}</p>
+              <p>
-        <p>{__("This reward will show in your Wallet in the top right momentarily (if it hasn't already).")}</p>
+                {__(
-        <p>
+                  'These credits are used to compensate creators, to publish your own content, and to have say in how the network works.'
-          {__(
+                )}
-            'These credits are used to compensate creators, to publish your own content, and to have say in how the network works.'
+              </p>
-          )}
+              <p>{__('No need to understand it all just yet! Try watching or publishing something next.')}</p>
-        </p>
+            </React.Fragment>
-        <p>{__('No need to understand it all just yet! Try watching or publishing something next.')}</p>
+          }
+          actions={<Button button="primary" label={__('You Got It Dude')} />}
+        />
       </Modal>
     );
   }

ui/modal/modalRemoveFile/view.jsx

@@ -1,9 +1,11 @@
 // @flow
 import React from 'react';
 import { Modal } from 'modal/modal';
-import { Form, FormField } from 'component/common/form';
+import { FormField } from 'component/common/form';
 import Button from 'component/button';
 import usePersistedState from 'effects/use-persisted-state';
+import Card from 'component/common/card';
+import I18nMessage from 'component/i18nMessage';
 
 type Props = {
   uri: string,
@@ -23,47 +25,64 @@ function ModalRemoveFile(props: Props) {
   const [abandonChecked, setAbandonChecked] = usePersistedState('modal-remove-file:abandon', true);
 
   return (
-    <Modal isOpen title="Remove File" contentLabel={__('Confirm File Remove')} type="custom" onAborted={closeModal}>
+    <Modal isOpen contentLabel={__('Confirm File Remove')} type="card" onAborted={closeModal}>
-      <section>
+      <Card
-        <p>
+        title="Remove File"
-          {__("Are you sure you'd like to remove")} <cite>{`"${title}"`}</cite> {__('from LBRY?')}
+        subtitle={
-        </p>
+          <I18nMessage tokens={{ title: <cite>{`"${title}"`}</cite> }}>
-      </section>
+            Are you sure you'd like to remove %title% from LBRY?
-      <Form onSubmit={() => deleteFile(uri, deleteChecked, claimIsMine ? abandonChecked : false)}>
+          </I18nMessage>
-        {/* @if TARGET='app' */}
+        }
-        <FormField
+        body={
-          name="file_delete"
+          <React.Fragment>
-          label={__('Delete this file from my computer')}
-          type="checkbox"
-          checked={deleteChecked}
-          onChange={() => setDeleteChecked(!deleteChecked)}
-        />
-        {/* @endif */}
-
-        {claimIsMine && (
-          <div>
-            <FormField
-              name="claim_abandon"
-              label={__('Abandon on blockchain (reclaim %amount% LBC)', { amount: claim.amount })}
-              type="checkbox"
-              checked={abandonChecked}
-              onChange={() => setAbandonChecked(!abandonChecked)}
-            />
-            {abandonChecked === true && <p className="error-text">This action is permanent and cannot be undone.</p>}
-
             {/* @if TARGET='app' */}
-            {abandonChecked === false && deleteChecked && (
+            <FormField
-              <p>This file will be removed from your Library and Downloads folder.</p>
+              name="file_delete"
-            )}
+              label={__('Delete this file from my computer')}
-            {!deleteChecked && <p>This file will be removed from your Library but will remain in your Downloads folder.</p>}
+              type="checkbox"
+              checked={deleteChecked}
+              onChange={() => setDeleteChecked(!deleteChecked)}
+            />
             {/* @endif */}
+
+            {claimIsMine && (
+              <React.Fragment>
+                <FormField
+                  name="claim_abandon"
+                  label={__('Abandon on blockchain (reclaim %amount% LBC)', { amount: claim.amount })}
+                  type="checkbox"
+                  checked={abandonChecked}
+                  onChange={() => setAbandonChecked(!abandonChecked)}
+                />
+                {abandonChecked === true && (
+                  <p className="help error-text">This action is permanent and cannot be undone.</p>
+                )}
+
+                {/* @if TARGET='app' */}
+                {abandonChecked === false && deleteChecked && (
+                  <p className="help">This file will be removed from your Library and Downloads folder.</p>
+                )}
+                {!deleteChecked && (
+                  <p className="help">
+                    This file will be removed from your Library but will remain in your Downloads folder.
+                  </p>
+                )}
+                {/* @endif */}
+              </React.Fragment>
+            )}
+          </React.Fragment>
+        }
+        actions={
+          <div className="card__actions">
+            <Button
+              button="primary"
+              label={__('OK')}
+              onClick={() => deleteFile(uri, deleteChecked, claimIsMine ? abandonChecked : false)}
+            />
+            <Button button="link" label={__('Cancel')} onClick={closeModal} />
           </div>
-        )}
+        }
-        <div className="card__actions">
+      />
-          <Button type="submit" button="primary" label={__('OK')} />
-          <Button button="link" label={__('Cancel')} onClick={closeModal} />
-        </div>
-      </Form>
     </Modal>
   );
 }

ui/scss/component/_form-field.scss

@@ -70,9 +70,8 @@ fieldset-group {
       .form-field__prefix {
         white-space: nowrap;
         padding: 0.5rem;
-        padding-right: var(--spacing-xxs);
+        padding-right: var(--spacing-small);
         height: var(--height-input);
-        padding-right: 1rem;
         border: 1px solid;
         border-top-left-radius: var(--border-radius);
         border-bottom-left-radius: var(--border-radius);

ui/scss/component/_markdown-preview.scss

@@ -132,3 +132,7 @@
     margin-top: var(--spacing-small);
   }
 }
+
+.editor-preview {
+  background-color: var(--color-input-bg);
+}

ui/scss/component/menu-button.scss

@@ -18,11 +18,19 @@
   outline: none;
   background-color: var(--color-menu-background);
   border-top: none;
+
+  &:focus {
+    box-shadow: none;
+  }
 }
 
 [data-reach-menu-item] {
   display: block;
   z-index: 2;
+
+  &:focus {
+    box-shadow: none;
+  }
 }
 
 [data-reach-menu-item] {

ui/scss/themes/light.scss

@@ -15,7 +15,7 @@
   --color-text-selection-bg: var(--color-secondary-alt);
   --color-text-selection: var(--color-secondary);
   --color-text-error: var(--color-danger);
-  --color-text-empty: #bbbbbb;
+  --color-text-empty: #999999;
   --color-text-help: #999999;
   --color-text-subtitle: #767676;
   --color-text-warning: #212529;