better consistency

package.json

@@ -159,7 +159,6 @@
     "react-simplemde-editor": "^4.0.0",
     "react-spring": "^8.0.20",
     "react-sticky-box": "^0.8.0",
-    "react-toggle": "^4.0.2",
     "redux": "^3.6.0",
     "redux-persist": "^4.8.0",
     "redux-persist-transform-compress": "^4.2.0",

src/ui/component/channelContent/view.jsx

@@ -29,11 +29,11 @@ function ChannelContent(props: Props) {
 
       {!fetching && !hasContent && (
         <div className="card--section">
-          <h2 className="card__content help">{__("This channel hasn't uploaded anything.")}</h2>
+          <h2 className="help">{__("This channel hasn't uploaded anything.")}</h2>
         </div>
       )}
 
-      {!channelIsMine && <HiddenNsfwClaims className="card__content help" uri={uri} />}
+      {!channelIsMine && <HiddenNsfwClaims className="help" uri={uri} />}
 
       {hasContent && <ClaimList header={false} uris={claimsInChannel.map(claim => claim.permanent_url)} />}
 

src/ui/component/channelEdit/view.jsx

@@ -2,7 +2,6 @@
 import React, { useState } from 'react';
 import { parseURI } from 'lbry-redux';
 import { Form, FormField } from 'component/common/form';
-import Button from 'component/button';
 
 import SelectAsset from 'component/selectAsset';
 import TagSelect from 'component/tagsSelect';
@@ -21,12 +20,9 @@ type Props = {
   tags: Array<string>,
   locations: Array<string>,
   languages: Array<string>,
-
   updateChannel: any => void,
-
   updateThumb: string => void,
   updateCover: string => void,
-  setEditing: boolean => void,
 };
 
 function ChannelForm(props: Props) {
@@ -43,7 +39,6 @@ function ChannelForm(props: Props) {
     languages,
     amount,
     updateChannel,
-    setEditing,
     updateThumb,
     updateCover,
   } = props;
@@ -113,7 +108,6 @@ function ChannelForm(props: Props) {
         </p>
       </div>
       <Form onSubmit={channelParams => updateChannel(channelParams)}>
-        <div className="card__content">
         <SelectAsset
           onUpdate={v => handleThumbnailChange(v)}
           currentValue={params.thumbnail}
@@ -218,7 +212,6 @@ function ChannelForm(props: Props) {
             }}
           />
         </div>
-        </div>
       </Form>
     </section>
   );

src/ui/component/claimList/view.jsx

@@ -99,7 +99,7 @@ export default function ClaimList(props: Props) {
         </div>
       )}
       {urisLength > 0 && (
-        <ul>
+        <ul className="ul--no-style">
           {sortedUris.map((uri, index) => (
             <React.Fragment key={uri}>
               <ClaimPreview uri={uri} type={type} />
@@ -108,7 +108,7 @@ export default function ClaimList(props: Props) {
           ))}
         </ul>
       )}
-      {urisLength === 0 && !loading && <h2 className="main--empty empty">{empty || __('No results')}</h2>}
+      {urisLength === 0 && !loading && <p className="main--empty empty">{empty || __('No results')}</p>}
     </section>
   );
 }

src/ui/component/claimListDiscover/view.jsx

@@ -1,6 +1,6 @@
 // @flow
 import type { Node } from 'react';
-import React, { useEffect } from 'react';
+import React, { Fragment, useEffect } from 'react';
 import { withRouter } from 'react-router';
 import { buildClaimSearchCacheQuery, MATURE_TAGS } from 'lbry-redux';
 import { FormField } from 'component/common/form';
@@ -149,7 +149,7 @@ function ClaimListDiscover(props: Props) {
   }, [doClaimSearch, shouldPerformSearch, optionsStringForEffect]);
 
   const header = (
-    <h1 className="card__title--flex">
+    <Fragment>
       <FormField
         className="claim-list__dropdown"
         type="select"
@@ -205,7 +205,7 @@ function ClaimListDiscover(props: Props) {
           ))}
         </FormField>
       )}
-    </h1>
+    </Fragment>
   );
 
   return (
@@ -221,7 +221,7 @@ function ClaimListDiscover(props: Props) {
         pageSize={PAGE_SIZE}
       />
 
-      {loading && new Array(PAGE_SIZE).fill(1).map((x, i) => <ClaimPreview key={i} placeholder />)}
+      {loading && new Array(PAGE_SIZE).fill(1).map((x, i) => <ClaimPreview key={i} placeholder="loading" />)}
     </div>
   );
 }

src/ui/component/claimPreview/view.jsx

@@ -1,5 +1,5 @@
 // @flow
-import React, { useEffect } from 'react';
+import React, { Fragment, useEffect } from 'react';
 import classnames from 'classnames';
 import { parseURI, convertToShareLink } from 'lbry-redux';
 import { withRouter } from 'react-router-dom';
@@ -13,6 +13,7 @@ import FileProperties from 'component/fileProperties';
 import ClaimTags from 'component/claimTags';
 import SubscribeButton from 'component/subscribeButton';
 import ChannelThumbnail from 'component/channelThumbnail';
+import Button from 'component/button';
 
 type Props = {
   uri: string,
@@ -27,7 +28,7 @@ type Props = {
   thumbnail: string,
   title: string,
   nsfw: boolean,
-  placeholder: boolean,
+  placeholder: string,
   type: string,
   hasVisitedUri: boolean,
   blackListedOutpoints: Array<{
@@ -60,8 +61,10 @@ function ClaimPreview(props: Props) {
     hasVisitedUri,
   } = props;
   const haventFetched = claim === undefined;
-  const abandoned = !isResolvingUri && !claim && !placeholder;
+  const abandoned = !isResolvingUri && !claim;
   const claimsInChannel = (claim && claim.meta.claims_in_channel) || 0;
+  const showPublishLink = abandoned && placeholder === 'publish';
+
   let isValid;
   try {
     parseURI(uri);
@@ -71,9 +74,8 @@ function ClaimPreview(props: Props) {
   }
 
   const isChannel = isValid ? parseURI(uri).isChannel : false;
-  const signingChannel = claim && claim.signing_channel;
+  let shouldHide =
-
+    placeholder !== 'loading' && ((abandoned && !showPublishLink) || (!claimIsMine && obscureNsfw && nsfw));
-  let shouldHide = abandoned || (!claimIsMine && obscureNsfw && nsfw);
 
   // This will be replaced once blocking is done at the wallet server level
   if (claim && !shouldHide && blackListedOutpoints) {
@@ -113,9 +115,9 @@ function ClaimPreview(props: Props) {
     return null;
   }
 
-  if (placeholder || (isResolvingUri && !claim)) {
+  if (placeholder === 'loading' || (isResolvingUri && !claim)) {
     return (
-      <li className="claim-preview" disabled>
+      <li className={classnames('claim-preview', { 'claim-preview--large': type === 'large' })} disabled>
         <div className="placeholder media__thumb" />
         <div className="placeholder__wrapper">
           <div className="placeholder claim-preview-title" />
@@ -128,10 +130,12 @@ function ClaimPreview(props: Props) {
   return (
     <li
       role="link"
-      onClick={pending ? undefined : onClick}
+      onClick={pending || type === 'inline' ? undefined : onClick}
       onContextMenu={handleContextMenu}
       className={classnames('claim-preview', {
+        'claim-preview--small': type === 'small',
         'claim-preview--large': type === 'large',
+        'claim-preview--inline': type === 'inline',
         'claim-preview--visited': !isChannel && hasVisitedUri,
         'claim-preview--pending': pending,
       })}
@@ -140,7 +144,7 @@ function ClaimPreview(props: Props) {
       <div className="claim-preview-metadata">
         <div className="claim-preview-info">
           <div className="claim-preview-title">
-            <TruncatedText text={title || (claim && claim.name)} lines={1} />
+            {claim ? <TruncatedText text={title || claim.name} lines={1} /> : <span>{__('Nothing here')}</span>}
           </div>
           {type !== 'small' && (
             <div>
@@ -152,11 +156,29 @@ function ClaimPreview(props: Props) {
 
         <div className="claim-preview-properties">
           <div className="media__subtitle">
-            <UriIndicator uri={uri} link />
             {pending && <div>Pending...</div>}
-            <div>{isChannel ? `${claimsInChannel} ${__('publishes')}` : <DateTime timeAgo uri={uri} />}</div>
+            {!isResolvingUri && (
+              <div>
+                {claim ? (
+                  <UriIndicator uri={uri} link />
+                ) : (
+                  <Fragment>
+                    <div>{__('Publish something and claim this spot!')}</div>
+                    <div className="card__actions">
+                      <Button button="primary" label={`${__('Publish to')}  ${uri}`} />
+                    </div>
+                  </Fragment>
+                )}
+                <div>
+                  {isChannel ? (
+                    type !== 'inline' && `${claimsInChannel} ${__('publishes')}`
+                  ) : (
+                    <DateTime timeAgo uri={uri} />
+                  )}
+                </div>
+              </div>
+            )}
           </div>
-
           <ClaimTags uri={uri} type={type} />
         </div>
       </div>

src/ui/component/commentCreate/view.jsx

@@ -39,7 +39,7 @@ export function CommentCreate(props: Props) {
   return (
     <section>
       {commentAck !== true && (
-        <div className="card__content markdown-preview">
+        <div>
           <p>{__('A few things to know before participating in the comment alpha:')}</p>
           <ul>
             <li>
@@ -66,10 +66,7 @@ export function CommentCreate(props: Props) {
       )}
       {commentAck === true && (
         <Form onSubmit={handleSubmit}>
-          <div className="card__content">
           <ChannelSection channel={channel} onChannelChange={handleChannelChange} />
-          </div>
-          <div className="card__content">
           <FormField
             disabled={channel === CHANNEL_NEW}
             type="textarea"
@@ -79,7 +76,6 @@ export function CommentCreate(props: Props) {
             value={commentValue}
             onChange={handleCommentChange}
           />
-          </div>
           <div className="card__actions">
             <Button
               button="primary"

src/ui/component/common/form-components/form-field.jsx

@@ -2,11 +2,9 @@
 import type { ElementRef } from 'react';
 import React from 'react';
 import ReactDOMServer from 'react-dom/server';
-import Toggle from 'react-toggle';
 import SimpleMDE from 'react-simplemde-editor';
 import MarkdownPreview from 'component/common/markdown-preview-internal';
 import { openEditorMenu, stopContextMenu } from 'util/context-menu';
-
 import 'easymde/dist/easymde.min.css';
 
 type Props = {
@@ -107,15 +105,6 @@ export class FormField extends React.PureComponent<Props> {
             </checkbox-element>
           </Wrapper>
         );
-      } else if (type === 'setting') {
-        // 'setting' should only be used for settings. Forms should use "checkbox"
-        input = (
-          <input-submit>
-            {labelOnLeft && <label htmlFor={name}>{label}</label>}
-            <Toggle id={name} {...inputProps} />
-            {!labelOnLeft && <label htmlFor={name}>{label}</label>}
-          </input-submit>
-        );
       } else if (type === 'select') {
         input = (
           <fieldset-section>

src/ui/component/common/icon-custom.jsx

@@ -212,7 +212,7 @@ export const icons = {
   [ICONS.NO]: buildIcon(
     <path d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17" />
   ),
-  [ICONS.UP]: buildIcon(<polyline points="18 15 12 9 6 15" />),
+  [ICONS.UP]: buildIcon(<polyline transform="translate(-5.000) scale(1.1, 1.1)" points="18 15 12 9 6 15" />),
   [ICONS.DOWN]: buildIcon(<polyline points="6 9 12 15 18 9" />),
   [ICONS.FULLSCREEN]: buildIcon(
     <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3" />

src/ui/component/common/unsupported-on-web.jsx

@@ -4,7 +4,7 @@ import Button from 'component/button';
 export default function UnsupportedOnWeb() {
   return (
     IS_WEB && (
-      <div className="card__content help help--warning">
+      <div className="help help--warning">
         This page is not currently supported on the web.{' '}
         <Button button="link" label={__('Download the desktop app')} href="https://lbry.com/get" /> for full feature
         support.

src/ui/component/fileDetails/view.jsx

@@ -19,11 +19,7 @@ class FileDetails extends PureComponent<Props> {
     const { claim, contentType, fileInfo, metadata, openFolder } = this.props;
 
     if (!claim || !metadata) {
-      return (
+      return <span className="empty">{__('Empty claim or metadata info.')}</span>;
-        <div className="card__content">
-          <span className="empty">{__('Empty claim or metadata info.')}</span>
-        </div>
-      );
     }
 
     const { description, languages, license } = metadata;

src/ui/component/fileDownloadLink/view.jsx

@@ -62,7 +62,7 @@ class FileDownloadLink extends React.PureComponent<Props> {
       const progress = fileInfo && fileInfo.written_bytes ? (fileInfo.written_bytes / fileInfo.total_bytes) * 100 : 0;
       const label = fileInfo ? __('Downloading: ') + progress.toFixed(0) + __('% complete') : __('Connecting...');
 
-      return <span className="file-download">{label}</span>;
+      return <span>{label}</span>;
     } else if ((fileInfo === null && !downloading) || (fileInfo && !fileInfo.download_path)) {
       if (!costInfo) {
         return null;

src/ui/component/inviteList/view.jsx

@@ -48,9 +48,9 @@ class InviteList extends React.PureComponent<Props> {
     const showClaimable = invitees.some(invite => invite.invite_reward_claimable && !invite.invite_reward_claimed);
 
     return (
-      <section className="card card--section">
+      <section className="card">
-        <header className="card__header">
+        <div className="table__header">
-          <h2 className="card__title card__title--flex-between">
+          <h2 className="card__title">
             {__('Invite History')}
             {referralReward && showClaimable && (
               <RewardLink
@@ -60,9 +60,9 @@ class InviteList extends React.PureComponent<Props> {
               />
             )}
           </h2>
-        </header>
+          <p className="card__subtitle">{rewardHelp}</p>
+        </div>
 
-        <div className="card__content">
         <table className="table table--invites">
           <thead>
             <tr>
@@ -93,9 +93,6 @@ class InviteList extends React.PureComponent<Props> {
             ))}
           </tbody>
         </table>
-
-          <div className="help">{rewardHelp}</div>
-        </div>
       </section>
     );
   }

src/ui/component/inviteNew/view.jsx

@@ -48,7 +48,9 @@ class FormInviteNew extends React.PureComponent<FormProps, FormState> {
           name="email"
           value={this.state.email}
           error={errorMessage}
-          inputButton={<Button button="inverse" type="submit" label="Invite" disabled={isPending} />}
+          inputButton={
+            <Button button="inverse" type="submit" label="Invite" disabled={isPending || !this.state.email} />
+          }
           onChange={event => {
             this.handleEmailChanged(event);
           }}
@@ -72,21 +74,15 @@ class InviteNew extends React.PureComponent<Props> {
 
     return (
       <section className="card card--section">
-        <header className="card__header">
         <h2 className="card__title">{__('Invite a Friend')}</h2>
-
         <p className="card__subtitle">{__('When your friends start using LBRY, the network gets stronger!')}</p>
-        </header>
 
-        <div className="card__content">
         <FormInviteNew
           errorMessage={errorMessage}
           inviteNew={inviteNew}
           isPending={isPending}
           rewardAmount={rewardAmount}
         />
-        </div>
-        <div className="card__content">
         <CopyableText label={__('Or share this link with your friends')} copyable={referralLink} />
 
         <p className="help">
@@ -95,7 +91,6 @@ class InviteNew extends React.PureComponent<Props> {
           <Button button="link" label={__('FAQ')} href="https://lbry.com/faq/referrals" />{' '}
           {__('to learn more about referrals')}.
         </p>
-        </div>
       </section>
     );
   }

src/ui/component/navigationHistory/view.jsx

@@ -78,7 +78,7 @@ class UserHistoryPage extends React.PureComponent<Props, State> {
 
     return historyItems.length ? (
       <React.Fragment>
-        <div className="card__header card__actions card__actions--between">
+        <div className="card__actions">
           {Object.keys(itemsSelected).length ? (
             <Button button="link" label={__('Delete')} onClick={this.removeSelected} />
           ) : (
@@ -87,7 +87,7 @@ class UserHistoryPage extends React.PureComponent<Props, State> {
           <Button button="link" label={allSelected ? __('Cancel') : __('Select All')} onClick={selectHandler} />
         </div>
         {!!historyItems.length && (
-          <section className="card card__content item-list">
+          <section className="card  item-list">
             {historyItems.map(item => (
               <NavigationHistoryItem
                 key={item.uri}
@@ -106,15 +106,11 @@ class UserHistoryPage extends React.PureComponent<Props, State> {
     ) : (
       <div className="main--empty">
         <section className="card card--section">
-          <header className="card__header">
           <h2 className="card__title">{__('Your history is empty, what are you doing here?')}</h2>
-          </header>
 
-          <div className="card__content">
           <div className="card__actions card__actions--center">
             <Button button="primary" navigate="/" label={__('Explore new content')} />
           </div>
-          </div>
         </section>
       </div>
     );

src/ui/component/navigationHistoryRecent/view.jsx

@@ -17,11 +17,9 @@ export default function NavigationHistoryRecent(props: Props) {
 
   return history.length ? (
     <div className="card item-list">
-      <section className="card__content">
       {history.map(({ lastViewed, uri }) => (
         <NavigationHistoryItem slim key={uri} uri={uri} lastViewed={lastViewed} />
       ))}
-      </section>
       <div className="card__actions">
         <Button navigate="/$/library/all" button="link" label={__('See All Visited Links')} />
       </div>

src/ui/component/previewLink/view.jsx

@@ -38,11 +38,11 @@ class PreviewLink extends React.PureComponent<Props> {
                 <TruncatedText text={title} lines={1} />
               </span>
             </span>
-            <span className={'preview-link__description media__subtext'}>
+            <span className={'preview-link__description media__subtitle'}>
               <UriIndicator uri={uri} link />
             </span>
             <span className={'file-list__item-properties'}>
-              <span className={'preview-link__description media__subtext'}>
+              <span className={'preview-link__description media__subtitle'}>
                 <TruncatedText lines={2} showTooltip={false}>
                   <MarkdownPreview content={description} promptLinks strip />
                 </TruncatedText>

src/ui/component/publishAdditionalOptions/view.jsx

@@ -27,7 +27,7 @@ function PublishAdvanced(props: Props) {
   return (
     <section className="card card--section">
       {!hideSection && (
-        <div className={classnames('card__content', { 'card--disabled': !name })}>
+        <div className={classnames({ 'card--disabled': !name })}>
           <FormField
             label={__('Language')}
             type="select"

src/ui/component/publishFile/view.jsx

@@ -33,10 +33,8 @@ function PublishFile(props: Props) {
         'card--disabled': balance === 0,
       })}
     >
-      <header className="card__header">
+      <h2 className="card__title">{isStillEditing ? __('Edit') : __('Publish')}</h2>
-        <h2 className="card__title card__title--flex-between">{isStillEditing ? __('Edit') : __('Publish')}</h2>
       {isStillEditing && <p className="card__subtitle">{__('You are currently editing a claim.')}</p>}
-      </header>
 
       <div className="card__content">
         <FileSelector currentPath={filePath} onFileChosen={handleFileChange} />

src/ui/component/publishForm/view.jsx

@@ -130,7 +130,7 @@ function PublishForm(props: Props) {
           {/* This should probably be PublishThumbnail */}
           <SelectThumbnail />
         </div>
-        <div className="card">
+        <div className="card card--section">
           <TagSelect
             title={false}
             suggestMature
@@ -152,20 +152,18 @@ function PublishForm(props: Props) {
           />
         </div>
         <section className="card card--section">
-          <div className="card__content">
           <ChannelSection channel={channel} onChannelChange={channel => updatePublishForm({ channel })} />
           <p className="help">
             {__('This is a username or handle that your content can be found under.')}{' '}
             {__('Ex. @Marvel, @TheBeatles, @BooksByJoe')}
           </p>
-          </div>
         </section>
 
         <PublishName disabled={formDisabled} />
         <PublishPrice disabled={formDisabled} />
         <PublishAdditionalOptions disabled={formDisabled} />
 
-        <section className="card card--section">
+        <section>
           {!formDisabled && !formValid && <PublishFormErrors />}
 
           <div className="card__actions">

src/ui/component/publishFormErrors/view.jsx

@@ -18,7 +18,7 @@ function PublishFormErrors(props: Props) {
   // These are extra help
   // If there is an error it will be presented as an inline error as well
   return (
-    <div className="card__content error-text">
+    <div className="error-text">
       {!title && <div>{__('A title is required')}</div>}
       {!name && <div>{__('A URL is required')}</div>}
       {!bid && <div>{__('A deposit amount is required')}</div>}

src/ui/component/publishName/view.jsx

@@ -74,13 +74,12 @@ function PublishName(props: Props) {
 
   return (
     <section className="card card--section">
-      <div className="card__content">
       <fieldset-group class="fieldset-group--smushed fieldset-group--disabled-prefix">
         <fieldset-section>
           <label>{__('Name')}</label>
-            <span className="form-field__prefix">{`lbry://${
+          <div className="form-field__prefix">{`lbry://${
             !channel || channel === CHANNEL_ANONYMOUS || channel === CHANNEL_NEW ? '' : `${channel}/`
-            }`}</span>
+          }`}</div>
         </fieldset-section>
         <FormField
           type="text"
@@ -98,7 +97,6 @@ function PublishName(props: Props) {
           onEditMyClaim={editExistingClaim}
         />
       </div>
-      </div>
       <FormField
         type="number"
         name="content_bid"

src/ui/component/publishPrice/view.jsx

@@ -14,7 +14,6 @@ function PublishText(props: Props) {
 
   return (
     <section className="card card--section">
-      <div className="card__content">
       <FormField
         type="radio"
         name="content_free"
@@ -47,7 +46,6 @@ function PublishText(props: Props) {
           )}
         </p>
       )}
-      </div>
     </section>
   );
 }

src/ui/component/publishText/view.jsx

@@ -20,7 +20,6 @@ function PublishText(props: Props) {
 
   return (
     <section className="card card--section">
-      <div className="card__content">
       <FormField
         type="text"
         name="content_title"
@@ -43,7 +42,6 @@ function PublishText(props: Props) {
       <div className="card__actions">
         <Button button="link" onClick={toggleMarkdown} label={advancedEditor ? 'Simple Editor' : 'Advanced Editor'} />
       </div>
-      </div>
     </section>
   );
 }

src/ui/component/recommendedContent/view.jsx

@@ -56,7 +56,7 @@ export default class RecommendedContent extends React.PureComponent<Props> {
           type="small"
           loading={isSearching}
           uris={recommendedContent}
-          header={<span>{__('Related')}</span>}
+          header={__('Related')}
           empty={<div className="empty">{__('No related content found')}</div>}
         />
       </section>

src/ui/component/rewardListClaimed/view.jsx

@@ -35,7 +35,7 @@ const RewardListClaimed = (props: Props) => {
         </p>
       </header>
 
-      <table className="card__content table table--rewards">
+      <table className="table table--rewards">
         <thead>
           <tr>
             <th>{__('Title')}</th>

src/ui/component/rewardSummary/view.jsx

@@ -14,9 +14,7 @@ class RewardSummary extends React.Component<Props> {
     const hasRewards = unclaimedRewardAmount > 0;
     return (
       <section className="card card--section">
-        <header className="card__header">
         <h2 className="card__title">{__('Rewards')}</h2>
-        </header>
 
         <p className="card__subtitle">
           {fetching && __('You have...')}
@@ -34,7 +32,6 @@ class RewardSummary extends React.Component<Props> {
           )}
         </p>
 
-        <div className="card__content">
         <div className="card__actions">
           <Button
             button="primary"
@@ -43,7 +40,6 @@ class RewardSummary extends React.Component<Props> {
           />
           <Button button="link" label={__('Learn more')} href="https://lbry.com/faq/rewards" />.
         </div>
-        </div>
       </section>
     );
   }

src/ui/component/rewardTile/view.jsx

@@ -25,12 +25,9 @@ const RewardTile = (props: Props) => {
 
   return (
     <section className="card card--section">
-      <header className="card__header">
       <h2 className="card__title">{reward.reward_title}</h2>
       <p className="card__subtitle">{reward.reward_description}</p>
-      </header>
 
-      <div className="card__content">
       <div className="card__actions">
         {reward.reward_type === rewards.TYPE_GENERATED_CODE && (
           <Button button="inverse" onClick={openRewardCodeModal} label={__('Enter Code')} />
@@ -47,7 +44,6 @@ const RewardTile = (props: Props) => {
             <RewardLink button reward_type={reward.reward_type} />
           ))}
       </div>
-      </div>
     </section>
   );
 };

src/ui/component/rewardTotal/view.jsx

@@ -16,9 +16,7 @@ function RewardTotal(props: Props) {
 
   return (
     <section className="card  card--section card--reward-total" style={{ backgroundImage: `url(${TotalBackground})` }}>
-      <span className="card__title">
       {integer} LBC {__('Earned From Rewards')}
-      </span>
     </section>
   );
 }

src/ui/component/searchOptions/view.jsx

@@ -8,7 +8,7 @@ import Button from 'component/button';
 
 const ExpandableOptions = posed.div({
   hide: { height: 0, opacity: 0 },
-  show: { height: 300, opacity: 1 },
+  show: { height: 380, opacity: 1 },
 });
 
 type Props = {
@@ -32,7 +32,7 @@ const SearchOptions = (props: Props) => {
       />
       <ExpandableOptions pose={expanded ? 'show' : 'hide'}>
         {expanded && (
-          <Form className="card__content search__options">
+          <Form className="search__options">
             <fieldset>
               <legend className="search__legend--1">{__('Search For')}</legend>
               {[

src/ui/component/selectChannel/view.jsx

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import React, { Fragment } from 'react';
 import { isNameValid } from 'lbry-redux';
 import { FormField } from 'component/common/form';
 import BusyIndicator from 'component/common/busy-indicator';
@@ -151,7 +151,7 @@ class ChannelSection extends React.PureComponent<Props, State> {
     } = this.state;
 
     return (
-      <div className="card__content">
+      <Fragment>
         {createChannelError && <div className="error-text">{createChannelError}</div>}
         {fetchingChannels ? (
           <BusyIndicator message="Updating channels" />
@@ -175,7 +175,7 @@ class ChannelSection extends React.PureComponent<Props, State> {
           </fieldset-section>
         )}
         {addingChannel && (
-          <div className="card__content">
+          <div>
             <FormField
               label={__('Name')}
               name="channel-input"
@@ -211,7 +211,7 @@ class ChannelSection extends React.PureComponent<Props, State> {
             </div>
           </div>
         )}
-      </div>
+      </Fragment>
     );
   }
 }

src/ui/component/selectThumbnail/view.jsx

@@ -83,7 +83,7 @@ class SelectThumbnail extends React.PureComponent<Props, State> {
     */
 
     return (
-      <div className="card__content">
+      <div>
         {status === THUMBNAIL_STATUSES.API_DOWN || status === THUMBNAIL_STATUSES.MANUAL ? (
           <div className="column">
             <div className="column__item thumbnail-preview" style={{ backgroundImage: `url(${thumbnailSrc})` }}>

src/ui/component/sideBar/view.jsx

@@ -24,9 +24,9 @@ function SideBar(props: Props) {
   }
 
   return (
-    <StickyBox offsetBottom={40} offsetTop={100}>
+    <StickyBox offsetBottom={40} offsetTop={90}>
       <nav className="navigation">
-        <ul className="navigation__links">
+        <ul className="navigation-links">
           {[
             {
               ...buildLink(null, __('Home'), ICONS.HOME),
@@ -42,25 +42,25 @@ function SideBar(props: Props) {
             },
           ].map(linkProps => (
             <li key={linkProps.label}>
-              <Button {...linkProps} className="navigation__link" activeClass="navigation__link--active" />
+              <Button {...linkProps} className="navigation-link" activeClass="navigation-link--active" />
             </li>
           ))}
         </ul>
-        <ul className="navigation__links tags--vertical">
+        <ul className="navigation-links tags--vertical">
           {followedTags.map(({ name }, key) => (
-            <li className="" key={name}>
+            <li className="navigation-link__wrapper" key={name}>
               <Tag navigate={`/$/tags?t${name}`} name={name} />
             </li>
           ))}
         </ul>
-        <ul className="navigation__links--small">
+        <ul className="navigation-links--small">
           {subscriptions.map(({ uri, channelName }, index) => (
-            <li key={uri} className="">
+            <li key={uri} className="navigation-link__wrapper">
               <Button
                 navigate={uri}
                 label={channelName}
-                className="navigation__link"
+                className="navigation-link"
-                activeClass="navigation__link--active"
+                activeClass="navigation-link--active"
               />
             </li>
           ))}

src/ui/component/socialShare/view.jsx

@@ -44,9 +44,8 @@ class SocialShare extends React.PureComponent<Props> {
     return (
       <React.Fragment>
         {speechShareable && (
-          <div className="card__content">
+          <div>
-            <label className="card__subtitle">{__('Web link')}</label>
+            <CopyableText label={__('Web link')} copyable={lbryTvUrl} />
-            <CopyableText copyable={lbryTvUrl} />
             <div className="card__actions card__actions--center">
               <Button
                 icon={ICONS.FACEBOOK}
@@ -64,9 +63,8 @@ class SocialShare extends React.PureComponent<Props> {
             </div>
           </div>
         )}
-        <div className="card__content">
+
-          <label className="card__subtitle">{__('LBRY App link')}</label>
+        <CopyableText label={__('LBRY App Link')} copyable={lbryURL} noSnackbar />
-          <CopyableText copyable={lbryURL} noSnackbar />
         <div className="card__actions card__actions--center">
           <Button
             icon={ICONS.FACEBOOK}
@@ -81,7 +79,6 @@ class SocialShare extends React.PureComponent<Props> {
             href={`https://twitter.com/home?status=${encodedLbryURL}`}
           />
         </div>
-        </div>
         <div className="card__actions">
           <Button button="link" label={__('Done')} onClick={onDone} />
         </div>

src/ui/component/tagsSearch/view.jsx

@@ -74,7 +74,7 @@ export default function TagSelect(props: Props) {
     <div>
       <Form onSubmit={handleSubmit}>
         <FormField
-          label={__('Tag Search')}
+          label={__('Find New Tags')}
           onChange={onChange}
           placeholder={__('Search for more tags')}
           type="text"

src/ui/component/tagsSelect/view.jsx

@@ -65,15 +65,14 @@ export default function TagSelect(props: Props) {
 
   return (
     ((showClose && !hasClosed) || !showClose) && (
-      <div className="card--section">
+      <div>
         {title !== false && (
-          <h2 className="card__title card__title--flex-between">
+          <h2 className="card__title">
             {title}
             {showClose && !hasClosed && <Button button="close" icon={ICONS.REMOVE} onClick={handleClose} />}
           </h2>
         )}
 
-        <div className="card__content">
         <ul className="tags--remove">
           {transitions.map(({ item, props, key }) => (
             <animated.li key={key} style={props}>
@@ -93,12 +92,11 @@ export default function TagSelect(props: Props) {
         <TagsSearch onSelect={onSelect} suggestMature={suggestMature && !hasMatureTag} />
         {help !== false && (
           <p className="help">
-              {help || __("The tags you follow will change what's trending for you. ")}
+            {help || __("The tags you follow will change what's trending for you.")}{' '}
             <Button button="link" label={__('Learn more')} href="https://lbry.com/faq/trending" />.
           </p>
         )}
       </div>
-      </div>
     )
   );
 }

src/ui/component/transactionList/internal/transaction-list-item.jsx

@@ -73,8 +73,7 @@ class TransactionListItem extends React.PureComponent<Props> {
           <span>{this.capitalize(type)}</span> {isRevokeable && this.getLink(type)}
         </td>
         <td className="table__item--actionable">
-          {reward && <span>{reward.reward_title}</span>}
+          {reward ? <span>{reward.reward_title}</span> : <Button button="link" navigate={uri} label={claimName} />}
-          {claimName && claimId ? <Button button="link" navigate={uri} label={claimName} /> : claimName}
         </td>
 
         <td>

src/ui/component/transactionList/view.jsx

@@ -69,12 +69,12 @@ class TransactionList extends React.PureComponent<Props> {
     return (
       <React.Fragment>
         <header className="table__header">
-          <h2 className="card__title card__title--flex-between">
+          <h2 className="card__title--between">
             <span>
               {title}
               {loading && <Spinner type="small" />}
             </span>
-            <div className="card__actions">
+            <div className="card__actions--inline">
               {slim && (
                 <Button button="link" className="button--alt" navigate="/$/transactions" label={__('Full History')} />
               )}
@@ -83,8 +83,8 @@ class TransactionList extends React.PureComponent<Props> {
           </h2>
         </header>
         {!slim && !!transactions.length && (
-          <header className="card__header table__header">
+          <header className="table__header">
-            <div className="card__actions card__actions--between">
+            <div className="card__actions">
               <FileExporter
                 data={transactionList}
                 label={__('Export')}

src/ui/component/transactionListRecent/view.jsx

@@ -23,7 +23,7 @@ class TransactionListRecent extends React.PureComponent<Props> {
   render() {
     const { transactions } = this.props;
     return (
-      <section className="card card__content">
+      <section className="card">
         <TransactionList
           slim
           title={__('Recent Transactions')}

src/ui/component/userEmail/view.jsx

@@ -39,13 +39,11 @@ function UserEmail(props: Props) {
       {user && email && !isVerified && <UserEmailVerify />}
       {email && isVerified && (
         <React.Fragment>
-          <div className="card__header">
           <h2 className="card__title">{__('Email')}</h2>
           <p className="card__subtitle">
             {email && isVerified && __('Your email has been successfully verified')}
             {!email && __('')}.
           </p>
-          </div>
 
           {isVerified && (
             <FormField

src/ui/component/userEmailNew/view.jsx

@@ -48,7 +48,6 @@ class UserEmailNew extends React.PureComponent<Props, State> {
 
     return (
       <React.Fragment>
-        <header className="card__header">
         <h2 className="card__title">{__('Verify Your Email')}</h2>
         <p className="card__subtitle">
           {/* @if TARGET='app' */}
@@ -58,9 +57,8 @@ class UserEmailNew extends React.PureComponent<Props, State> {
           {__('Stay up to date with lbry.tv and be the first to know about the progress we make.')}
           {/* @endif */}
         </p>
-        </header>
 
-        <Form className="card__content" onSubmit={this.handleSubmit}>
+        <Form onSubmit={this.handleSubmit}>
           <FormField
             type="email"
             label="Email"

src/ui/component/userEmailVerify/view.jsx

@@ -51,11 +51,8 @@ class UserEmailVerify extends React.PureComponent<Props> {
 
     return (
       <React.Fragment>
-        <header className="card__header">
         <h2 className="card__title">{__('Waiting For Verification')}</h2>
-        </header>
 
-        <div className="card__content">
         <p className="card__subtitle">
           {__('An email was sent to')} {email}.{' '}
           {__('Follow the link and you will be good to go. This will update automatically.')}
@@ -67,7 +64,6 @@ class UserEmailVerify extends React.PureComponent<Props> {
             label={__('Resend verification email')}
             onClick={this.handleResendVerificationEmail}
           />
-
           <UserEmailResetButton />
         </div>
 
@@ -76,7 +72,6 @@ class UserEmailVerify extends React.PureComponent<Props> {
           <Button button="link" href="https://chat.lbry.com" label="chat" />{' '}
           {__('if you encounter any trouble verifying.')}
         </p>
-        </div>
       </React.Fragment>
     );
   }

src/ui/component/userPhoneNew/view.jsx

@@ -83,16 +83,13 @@ class UserPhoneNew extends React.PureComponent<Props, State> {
 
     return (
       <React.Fragment>
-        <section className="card__content">
         <p className="card__subtitle">
           {__(
             'Enter your phone number and we will send you a verification code. We will not share your phone number with third parties.'
           )}
         </p>
-        </section>
 
         <Form onSubmit={this.handleSubmit}>
-          <div className="card__content">
           <fieldset-group class="fieldset-group--smushed">
             <FormField label={__('Country')} type="select" name="country-codes" onChange={this.handleSelect}>
               {countryCodes.map((country, index) => (
@@ -113,7 +110,6 @@ class UserPhoneNew extends React.PureComponent<Props, State> {
               }}
             />
           </fieldset-group>
-          </div>
           <div className="card__actions">
             <Submit label="Submit" disabled={isPending} />
             {cancelButton}

src/ui/component/userPhoneVerify/view.jsx

@@ -45,14 +45,12 @@ class UserPhoneVerify extends React.PureComponent<Props, State> {
     const { cancelButton, phoneErrorMessage, phone, countryCode } = this.props;
     return (
       <React.Fragment>
-        <section className="card__content">
         <p>
           {' '}
           {__(`Please enter the verification code sent to +${countryCode}${phone}. Didn't receive it? `)}
           <Button button="link" onClick={this.reset.bind(this)} label="Go back." />
         </p>
-        </section>
+        <Form onSubmit={this.handleSubmit.bind(this)}>
-        <Form className="card__content" onSubmit={this.handleSubmit.bind(this)}>
           <FormField
             type="text"
             name="code"

src/ui/component/userVerify/view.jsx

@@ -27,26 +27,21 @@ class UserVerify extends React.PureComponent<Props> {
     return (
       <React.Fragment>
         <section className="card card--section">
-          <header className="card__header--flat">
           <h1 className="card__title">{__('Final Human Proof')}</h1>
           <p className="card__subtitle">
             To start the rewards approval process, please complete <strong>one and only one</strong> of the options
             below. This is optional, and can be skipped at the bottom of the page.
           </p>
-          </header>
         </section>
 
         <section className="card card--section">
-          <header className="card__header">
           <h2 className="card__title">{__('1) Proof via Phone')}</h2>
           <p className="card__subtitle">
             {`${__(
               'You will receive an SMS text message confirming that your phone number is correct. Does not work for Canada and possibly other regions'
             )}`}
           </p>
-          </header>
 
-          <div className="card__content">
           <div className="card__actions">
             <Button
               onClick={() => {
@@ -55,7 +50,6 @@ class UserVerify extends React.PureComponent<Props> {
               button="inverse"
               label={__('Submit Phone Number')}
             />
-            </div>
 
             <div className="help">
               {__('Standard messaging rates apply. LBRY will not text or call you otherwise. Having trouble?')}{' '}
@@ -65,18 +59,13 @@ class UserVerify extends React.PureComponent<Props> {
         </section>
 
         <section className="card card--section">
-          <header className="card__header">
           <h2 className="card__title">{__('2) Proof via Credit')}</h2>
           <p className="card__subtitle">
-              {`${__(
+            {`${__('If you have a valid credit or debit card, you can use it to instantly prove your humanity.')} ${__(
-                'If you have a valid credit or debit card, you can use it to instantly prove your humanity.'
-              )} ${__(
               'LBRY does not store your credit card information. There is no charge at all for this, now or in the future.'
             )} `}
           </p>
-          </header>
 
-          <div className="card__content">
           <div className="card__actions">
             {errorMessage && <p className="error-text">{errorMessage}</p>}
             <CardVerify
@@ -95,11 +84,9 @@ class UserVerify extends React.PureComponent<Props> {
               label={__('Read more about why we do this.')}
             />
           </div>
-          </div>
         </section>
 
         <section className="card card--section">
-          <header className="card__header">
           <h2 className="card__title">{__('3) Proof via Chat')}</h2>
           <p className="card__subtitle">
             {__(
@@ -109,28 +96,21 @@ class UserVerify extends React.PureComponent<Props> {
               'This process will likely involve providing proof of a stable and established online or real-life identity.'
             )}
           </p>
-          </header>
 
-          <div className="card__content">
           <div className="card__actions">
             <Button href="https://chat.lbry.com" button="inverse" label={__('Join LBRY Chat')} />
           </div>
-          </div>
         </section>
 
         <section className="card card--section">
-          <header className="card__header">
           <h2 className="card__title">{__('Or, Skip It Entirely')}</h2>
           <p className="card__subtitle">
             {__('You can continue without this step, but you will not be eligible to earn rewards.')}
           </p>
-          </header>
 
-          <div className="card__content">
           <div className="card__actions">
             <Button navigate="/" button="primary" label={__('Skip Rewards')} />
           </div>
-          </div>
         </section>
       </React.Fragment>
     );

src/ui/component/walletAddress/view.jsx

@@ -47,39 +47,20 @@ class WalletAddress extends React.PureComponent<Props, State> {
 
     return (
       <section className="card card--section">
-        <header className="card__header">
         <h2 className="card__title">{__('Receive Credits')}</h2>
         <p className="card__subtitle">
-            {__('Use this wallet address to receive credits sent by another user (or yourself).')}
+          {__(
+            'Use this address to receive LBC. You can generate a new address at any time, and any previous addresses will continue to work.'
+          )}
         </p>
-        </header>
+        <CopyableText label={__('Your Address')} copyable={receiveAddress} snackMessage={__('Address copied.')} />
 
-        <div className="card__content">
-          <CopyableText copyable={receiveAddress} snackMessage={__('Address copied.')} />
-        </div>
-
-        <div className="card__content">
         <div className="card__actions">
-            <Button
+          <Button button="inverse" label={__('Get New Address')} onClick={getNewAddress} disabled={gettingNewAddress} />
-              button="inverse"
-              label={__('Get New Address')}
-              onClick={getNewAddress}
-              disabled={gettingNewAddress}
-            />
-
           <Button button="link" label={showQR ? __('Hide QR code') : __('Show QR code')} onClick={this.toggleQR} />
         </div>
 
-          <p className="help">
+        {showQR && <QRCode value={receiveAddress} paddingTop />}
-            {__('You can generate a new address at any time, and any previous addresses will continue to work.')}
-          </p>
-        </div>
-
-        {showQR && (
-          <div className="card__content">
-            <QRCode value={receiveAddress} paddingTop />
-          </div>
-        )}
       </section>
     );
   }

src/ui/component/walletBackup/view.jsx

@@ -66,7 +66,7 @@ class WalletBackup extends React.PureComponent<Props, State> {
     try {
       zip.addLocalFolder(lbryumWalletDir);
     } catch (err) {
-      console.error(err);
+      console.error(err); // eslint-disable-line no-console
       this.showErrorMessage(__('The wallet folder could not be added to the zip archive.'));
       return;
     }
@@ -74,7 +74,7 @@ class WalletBackup extends React.PureComponent<Props, State> {
     try {
       zip.writeZip(outputPath);
     } catch (err) {
-      console.error(err);
+      console.error(err); // eslint-disable-line no-console
       this.showErrorMessage(__('There was a problem writing the zip archive to disk.'));
       return;
     }
@@ -85,50 +85,38 @@ class WalletBackup extends React.PureComponent<Props, State> {
   }
 
   render() {
-    const { daemonSettings } = this.props;
+    const { daemonSettings = {} } = this.props;
     const { wallet_dir: lbryumWalletDir } = daemonSettings;
 
-    const noDaemonSettings = Object.keys(daemonSettings).length === 0;
-
     return (
       <section className="card card--section">
-        {noDaemonSettings ? (
-          <header className="card__header">
-            <h2 className="card__title">{__('Failed to load settings.')}</h2>
-          </header>
-        ) : (
-          <React.Fragment>
-            <header className="card__header">
         <h2 className="card__title">{__('Backup Your LBRY Credits')}</h2>
 
-              <p className="card__subtitle">
+        <ul className="card__subtitle ol--bulleted">
+          <li>
             {__(
               'Your LBRY credits are controllable by you and only you, via wallet file(s) stored locally on your computer.'
             )}
-              </p>
+          </li>
-            </header>
+          <li>
-
-            <div className="card__content">
-              <p>
             {__(
-                  'Currently, there is no automatic wallet backup. If you lose access to these files, you will lose your credits permanently.'
+              'Currently, there is no automatic backup. If you lose access to these files, you will lose your credits.'
             )}
-              </p>
+          </li>
-              <p>
+          <li>
             {__(
               'However, it is fairly easy to back up manually. To backup your wallet, make a copy of the folder listed below:'
             )}
-              </p>
+          </li>
+        </ul>
         <CopyableText copyable={lbryumWalletDir} snackMessage={__('Path copied.')} />
-              <p>
+        <p className="help">
           {__(
             'Access to these files are equivalent to having access to your credits. Keep any copies you make of your wallet in a secure place.'
-                )}
+          )}{' '}
-              </p>
+          {/* @i18fixme */}
-              <p>
+          {__('For more details on backing up and best practices')},{' '}
-                For more details on backing up and best practices,{' '}
+          <Button button="link" href="https://lbry.com/faq/how-to-backup-wallet" label={__('see this article')} />.
-                <Button button="link" href="https://lbry.com/faq/how-to-backup-wallet" label={__('see this article')} />
-                .
         </p>
         <p className={'card__message card__message--error' + (this.state.errorMessage ? '' : ' hidden')}>
           {this.state.errorMessage}
@@ -137,16 +125,9 @@ class WalletBackup extends React.PureComponent<Props, State> {
           {this.state.successMessage}
         </p>
         <div className="card__actions">
-                <Button button="inverse" label={__('Open Folder')} onClick={() => shell.openItem(lbryumWalletDir)} />
+          <Button button="inverse" label={__('Create Backup')} onClick={() => this.backupWalletDir(lbryumWalletDir)} />
-                <Button
+          <Button button="link" label={__('Open Folder')} onClick={() => shell.openItem(lbryumWalletDir)} />
-                  button="inverse"
-                  label={__('Create Backup')}
-                  onClick={() => this.backupWalletDir(lbryumWalletDir)}
-                />
         </div>
-            </div>
-          </React.Fragment>
-        )}
       </section>
     );
   }

src/ui/component/walletBalance/view.jsx

@@ -14,15 +14,10 @@ const WalletBalance = (props: Props) => {
       className="card card--section card--wallet-balance"
       style={{ backgroundImage: `url(${BalanceBackground})` }}
     >
-      <header className="card__header">
       <h2 className="card__title">{__('Balance')}</h2>
-      </header>
-      <div className="card__content">
-        <h3>{__('You currently have')}</h3>
       <span className="card__content--large">
         {(balance || balance === 0) && <CreditAmount badge={false} amount={balance} precision={8} />}
       </span>
-      </div>
     </section>
   );
 };

src/ui/component/walletSend/view.jsx

@@ -37,10 +37,8 @@ class WalletSend extends React.PureComponent<Props> {
 
     return (
       <section className="card card--section">
-        <header className="card__header">
         <h2 className="card__title">{__('Send Credits')}</h2>
-          <p className="card__subtitle">{__('Send LBC to your friends or favorite creators')}</p>
+        <p className="card__subtitle">{__('Send LBC to your friends or favorite creators.')}</p>
-        </header>
 
         <Formik
           initialValues={{
@@ -51,7 +49,6 @@ class WalletSend extends React.PureComponent<Props> {
           validate={validateSendTx}
           render={({ values, errors, touched, handleChange, handleBlur, handleSubmit }) => (
             <Form onSubmit={handleSubmit}>
-              <div className="card__content">
               <fieldset-group class="fieldset-group--smushed">
                 <FormField
                   type="number"
@@ -79,7 +76,6 @@ class WalletSend extends React.PureComponent<Props> {
                   value={values.address}
                 />
               </fieldset-group>
-              </div>
               <div className="card__actions">
                 <Button
                   button="inverse"

src/ui/component/walletSendTip/view.jsx

@@ -76,7 +76,7 @@ class WalletSendTip extends React.PureComponent<Props, State> {
 
     return (
       <React.Fragment>
-        <Form className="card__content">
+        <Form>
           <FormField
             autoFocus
             name="tip-input"
@@ -100,13 +100,13 @@ class WalletSendTip extends React.PureComponent<Props, State> {
               />
             }
             helper={
-              <p>
+              <React.Fragment>
-                {claimIsMine || isSupport
+                {claimIsMine
-                  ? __('This will increase the overall bid amount for ')
+                  ? __('This will increase your overall bid amount for ')
                   : __('This will appear as a tip for ')}
                 {`"${title}" which will boost its ability to be discovered while active.`}{' '}
                 <Button label={__('Learn more')} button="link" href="https://lbry.com/faq/tipping" />.
-              </p>
+              </React.Fragment>
             }
           />
         </Form>

src/ui/component/yrbl/index.jsx

@@ -32,7 +32,7 @@ export default class extends React.PureComponent<Props> {
         {title && subtitle && (
           <div className="yrbl__content">
             <h2 className="card__title">{title}</h2>
-            <div className="card__content">{subtitle}</div>
+            <p>{subtitle}</p>
           </div>
         )}
       </div>

src/ui/modal/modal.jsx

@@ -53,11 +53,7 @@ export class Modal extends React.PureComponent<ModalProps> {
         className={classnames('card card--modal modal', className)}
         overlayClassName="modal-overlay"
       >
-        {title && (
+        {title && <h1 className="card__title">{title}</h1>}
-          <header className="card__header">
-            <h1 className="card__title">{title}</h1>
-          </header>
-        )}
         {children}
         {type === 'custom' ? null : ( // custom modals define their own buttons
           <div className="card__actions">
@@ -106,7 +102,7 @@ export class ExpandableModal extends React.PureComponent<ModalProps, State> {
     return (
       <Modal type="custom" {...this.props}>
         {this.props.children}
-        {this.state.expanded ? <div className="card__content">{this.props.extraContent}</div> : null}
+        {this.state.expanded ? <div>{this.props.extraContent}</div> : null}
         <div className="card__actions">
           <Button button="primary" label={this.props.confirmButtonLabel} onClick={this.props.onConfirmed} />
           <Button

src/ui/modal/modalAffirmPurchase/view.jsx

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

src/ui/modal/modalAuthFailure/view.jsx

@@ -23,9 +23,7 @@ class ModalAuthFailure extends React.PureComponent<Props> {
         }}
         onAborted={close}
       >
-        <section className="card__content">
         <p>{__('If reloading does not fix this, or you see this at every start up, please email help@lbry.com.')}</p>
-        </section>
       </Modal>
     );
   }

src/ui/modal/modalAutoGenerateThumbnail/view.jsx

@@ -69,10 +69,8 @@ function ModalAutoGenerateThumbnail(props: Props) {
       onConfirmed={uploadImage}
       onAborted={closeModal}
     >
-      <section className="card__content">
       <p className="card__subtitle">{__('Pause at any time to select a thumbnail from your video')}.</p>
       <video ref={playerRef} src={videoSrc} onLoadedMetadata={resize} onError={onError} controls />
-      </section>
     </Modal>
   );
 }

src/ui/modal/modalAutoUpdateConfirm/view.jsx

@@ -29,13 +29,11 @@ class ModalAutoUpdateConfirm extends React.PureComponent<Props> {
           closeModal();
         }}
       >
-        <section className="card__content">
         <p>{__('Your LBRY upgrade is ready. Restart LBRY now to use it!')}</p>
         <p className="help">
           {__('Want to know what has changed?')} See the{' '}
           <Button button="link" label={__('release notes')} href="https://github.com/lbryio/lbry-desktop/releases" />.
         </p>
-        </section>
       </Modal>
     );
   }

src/ui/modal/modalAutoUpdateDownloaded/view.jsx

@@ -46,13 +46,11 @@ class ModalAutoUpdateDownloaded extends React.PureComponent<Props, State> {
           closeModal();
         }}
       >
-        <section className="card__content">
         <p>{__('A new version of LBRY is ready for you.')}</p>
         <p className="help">
           {__('Want to know what has changed?')} See the{' '}
           <Button button="link" label={__('release notes')} href="https://github.com/lbryio/lbry-desktop/releases" />.
         </p>
-        </section>
       </Modal>
     );
   }

src/ui/modal/modalConfirmThumbnailUpload/view.jsx

@@ -1,7 +1,6 @@
 // @flow
 import React from 'react';
 import { Modal } from 'modal/modal';
-import { FormField } from 'component/common/form';
 
 type Props = {
   upload: string => void,
@@ -19,7 +18,7 @@ class ModalConfirmThumbnailUpload extends React.PureComponent<Props> {
   }
 
   render() {
-    const { closeModal, path, updatePublishForm } = this.props;
+    const { closeModal, path } = this.props;
 
     return (
       <Modal
@@ -31,11 +30,9 @@ class ModalConfirmThumbnailUpload extends React.PureComponent<Props> {
         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>
-        </section>
       </Modal>
     );
   }

src/ui/modal/modalConfirmTransaction/view.jsx

@@ -28,7 +28,7 @@ class ModalConfirmTransaction extends React.PureComponent<Props> {
         type="custom"
         onAborted={closeModal}
       >
-        <Form className="card__content" onSubmit={() => this.onConfirmed()}>
+        <Form onSubmit={() => this.onConfirmed()}>
           <p>{__('Sending: ')}</p>
           <blockquote>{amount} LBC</blockquote>
           <p>{__('To address: ')}</p>

src/ui/modal/modalDownloading/view.jsx

@@ -18,7 +18,6 @@ class ModalDownloading extends React.PureComponent<Props> {
 
     return (
       <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 ? (
@@ -30,7 +29,6 @@ class ModalDownloading extends React.PureComponent<Props> {
             <p>{__('After the install is complete, please reopen the app.')}</p>
           </React.Fragment>
         ) : null}
-        </section>
 
         <div className="card__actions">
           {downloadComplete ? <Button button="primary" label={__('Begin Upgrade')} onClick={startUpgrade} /> : null}

src/ui/modal/modalError/view.jsx

@@ -41,14 +41,12 @@ class ModalError extends React.PureComponent<Props> {
 
     return (
       <Modal isOpen contentLabel={__('Error')} title={__('Error')} className="error-modal" onConfirmed={closeModal}>
-        <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>
-        </section>
+        <ul className="error-modal__error-list">{errorInfoList}</ul>
-        <ul className="card__content error-modal__error-list">{errorInfoList}</ul>
       </Modal>
     );
   }

src/ui/modal/modalFileTimeout/view.jsx

@@ -18,14 +18,12 @@ class ModalFileTimeout extends React.PureComponent<Props> {
 
     return (
       <Modal isOpen title={__('Unable to Download')} contentLabel={__('Download failed')} onConfirmed={closeModal}>
-        <section className="card__content">
         <p className="error-modal__error-list">
           {__('LBRY was unable to download the stream')}:
           <div>
             <b>{title ? `"${title}"` : uri}</b>
           </div>
         </p>
-        </section>
       </Modal>
     );
   }

src/ui/modal/modalFirstReward/view.jsx

@@ -18,7 +18,6 @@ class ModalFirstReward extends React.PureComponent<Props> {
         title={__('Your First Reward')}
         onConfirmed={closeModal}
       >
-        <section className="card__content">
         <p>{__('You just earned your first reward!')}</p>
         <p>{__("This reward will show in your Wallet in the top right momentarily (if it hasn't already).")}</p>
         <p>
@@ -27,7 +26,6 @@ class ModalFirstReward extends React.PureComponent<Props> {
           )}
         </p>
         <p>{__('No need to understand it all just yet! Try watching or publishing something next.')}</p>
-        </section>
       </Modal>
     );
   }

src/ui/modal/modalFirstSubscription/view.jsx

@@ -12,15 +12,14 @@ const ModalFirstSubscription = (props: Props) => {
 
   return (
     <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">
+      <p>
         {__(
           '1) This app will automatically download new free content from channels you are subscribed to. You may configure this in Settings or on the Subscriptions page.'
         )}
       </p>
-        <p className="card__content">
+      <p>
         {__(
           '2) If we have your email address, we will send you notifications related to new content. You may configure these emails from the Help page.'
         )}
@@ -28,7 +27,6 @@ const ModalFirstSubscription = (props: Props) => {
       <div className="modal__buttons">
         <Button button="primary" onClick={closeModal} label={__('Got it')} />
       </div>
-      </section>
     </Modal>
   );
 };

src/ui/modal/modalIncompatibleDaemon/view.jsx

@@ -23,14 +23,12 @@ class ModalIncompatibleDaemon extends React.PureComponent<Props> {
         onConfirmed={quitAnyDaemon}
         onAborted={onContinueAnyway}
       >
-        <div className="card__content">
         <p>
           {__(
             'This app is running with an incompatible version of the LBRY protocol. You can still use it, but there may be issues. Re-run the installation package for best results.'
           )}{' '}
           <Button button="link" label={__('Learn more')} href="https://lbry.com/faq/incompatible-protocol-version" />.
         </p>
-        </div>
       </Modal>
     );
   }

src/ui/modal/modalOpenExternalResource/view.jsx

@@ -54,14 +54,12 @@ function ModalOpenExternalResource(props: Props) {
       onConfirmed={() => openResource()}
       onAborted={closeModal}
     >
-      <section className="card__content">
       <p>
         {(uri && __('This link leads to an external website.')) ||
           (path && __('This file has been shared with you by other people.'))}
       </p>
       <blockquote>{uri || path}</blockquote>
       <p>{__('LBRY Inc is not responsible for its content, click continue to proceed at your own risk.')}</p>
-      </section>
     </Modal>
   );
 }

src/ui/modal/modalPublish/view.jsx

@@ -28,7 +28,6 @@ class ModalPublishSuccess extends React.PureComponent<Props> {
           closeModal();
         }}
       >
-        <section className="card__content">
         <p>{__(`Your ${publishMessage} published to LBRY at the address`)}</p>
         <blockquote>{uri}</blockquote>
         <p>
@@ -36,7 +35,6 @@ class ModalPublishSuccess extends React.PureComponent<Props> {
             `The ${publishType} 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>
     );
   }

src/ui/modal/modalRemoveFile/view.jsx

@@ -25,18 +25,18 @@ function ModalRemoveFile(props: Props) {
 
   return (
     <Modal isOpen title="Remove File" contentLabel={__('Confirm File Remove')} type="custom" onAborted={closeModal}>
-      <section className="card__content">
+      <section>
         <p>
           {__("Are you sure you'd like to remove")} <cite>{`"${title}"`}</cite> {__('from the LBRY app?')}
         </p>
       </section>
-      <Form className="card__content" onSubmit={() => deleteFile(outpoint || '', deleteChecked, abandonChecked)}>
+      <Form onSubmit={() => deleteFile(outpoint || '', deleteChecked, abandonChecked)}>
         <FormField
-          name="file_delete"
+          name="claim_abandon"
-          label={__('Also delete this file from my computer')}
+          label={__('Abandon the claim for this URI')}
           type="checkbox"
-          checked={deleteChecked}
+          checked={abandonChecked}
-          onChange={() => setDeleteChecked(!deleteChecked)}
+          onChange={() => setAbandonChecked(!abandonChecked)}
         />
 
         {claimIsMine && (

src/ui/modal/modalRevokeClaim/view.jsx

@@ -84,7 +84,7 @@ class ModalRevokeClaim extends React.PureComponent<Props> {
         onConfirmed={this.revokeClaim}
         onAborted={closeModal}
       >
-        <section className="card__content">{this.getMsgBody(type)}</section>
+        <section>{this.getMsgBody(type)}</section>
       </Modal>
     );
   }

src/ui/modal/modalRewardApprovalRequired/view.jsx

@@ -22,13 +22,11 @@ class ModalRewardApprovalRequired extends React.PureComponent<Props> {
         confirmButtonLabel={__("I'm Totally Real")}
         abortButtonLabel={__('Never Mind')}
       >
-        <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."
           )}
         </p>
-        </section>
       </Modal>
     );
   }

src/ui/modal/modalRewardCode/view.jsx

@@ -1,6 +1,6 @@
 // @flow
 import * as React from 'react';
-import { FormField, Form, Submit } from 'component/common/form';
+import { FormField, Form } from 'component/common/form';
 import { Modal } from 'modal/modal';
 import Button from 'component/button';
 
@@ -44,7 +44,7 @@ class ModalRewardCode extends React.PureComponent<Props, State> {
         type="custom"
         onAborted={closeModal}
       >
-        <Form className="card__content" onSubmit={this.handleSubmit}>
+        <Form onSubmit={this.handleSubmit}>
           <p>
             {__('Redeem a custom reward code for LBC')}
             {'. '}
@@ -55,7 +55,8 @@ class ModalRewardCode extends React.PureComponent<Props, State> {
             type="text"
             name="reward-code"
             inputButton={
-              <Submit
+              <Button
+                button="primary"
                 disabled={!rewardCode || rewardIsPending}
                 label={rewardIsPending ? __('Redeeming') : __('Redeem')}
               />

src/ui/modal/modalTransactionFailed/view.jsx

@@ -12,9 +12,7 @@ class ModalTransactionFailed extends React.PureComponent<Props> {
 
     return (
       <Modal isOpen contentLabel={__('Transaction failed')} title={__('Transaction Failed')} onConfirmed={closeModal}>
-        <section className="card__content">
         <p>{__('Sorry about that. Contact help@lbry.com if you continue to have issues.')}</p>
-        </section>
       </Modal>
     );
   }

src/ui/modal/modalUpgrade/view.jsx

@@ -23,7 +23,6 @@ class ModalUpgrade extends React.PureComponent<Props> {
         onConfirmed={downloadUpgrade}
         onAborted={skipUpgrade}
       >
-        <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.')}
@@ -32,7 +31,6 @@ class ModalUpgrade extends React.PureComponent<Props> {
           {__('Want to know what has changed?')} See the{' '}
           <Button button="link" label={__('release notes')} href="https://github.com/lbryio/lbry-desktop/releases" />.
         </p>
-        </div>
       </Modal>
     );
   }

src/ui/modal/modalWalletDecrypt/view.jsx

@@ -47,14 +47,12 @@ class ModalWalletDecrypt extends React.PureComponent<Props, State> {
         onConfirmed={() => this.submitDecryptForm()}
         onAborted={closeModal}
       >
-        <section className="card__content">
         <p>
           {__(
             'Your wallet has been encrypted with a local password, performing this action will remove this password.'
           )}{' '}
           <Button button="link" label={__('Learn more')} href="https://lbry.com/faq/wallet-encryption" />.
         </p>
-        </section>
       </Modal>
     );
   }

src/ui/modal/modalWalletEncrypt/view.jsx

@@ -98,7 +98,7 @@ class ModalWalletEncrypt extends React.PureComponent<Props, State> {
         onConfirmed={() => this.submitEncryptForm()}
         onAborted={closeModal}
       >
-        <Form className="card__content" onSubmit={() => this.submitEncryptForm()}>
+        <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.'

src/ui/modal/modalWalletUnlock/view.jsx

@@ -49,12 +49,9 @@ class ModalWalletUnlock extends React.PureComponent<Props, State> {
         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.')}{' '}
-                '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.com/faq/wallet-encryption" />.
           </p>
           <FormField
@@ -66,7 +63,6 @@ class ModalWalletUnlock extends React.PureComponent<Props, State> {
             onChange={event => this.onChangePassword(event)}
           />
         </Form>
-        </section>
       </Modal>
     );
   }

src/ui/modal/modalWelcome/view.jsx

@@ -12,14 +12,12 @@ const ModalWelcome = (props: Props) => {
 
   return (
     <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.')}
       </p>
       <p>{__('Up top, LBRY is similar to popular media sites.')}</p>
       <p>{__('Below, LBRY is controlled by users -- you -- via blockchain and decentralization.')}</p>
-      </section>
       <div className="card__actions">
         <Button button="primary" onClick={closeModal} label={__("I'm In")} />
       </div>

src/ui/page/channel/view.jsx

@@ -89,7 +89,7 @@ function ChannelPage(props: Props) {
           <TabList className="tabs__list--channel-page">
             <Tab disabled={editing}>{__('Content')}</Tab>
             <Tab>{editing ? __('Editing Your Channel') : __('About')}</Tab>
-            <div className="card__actions">
+            <div className="card__actions--inline">
               <ShareButton uri={uri} />
               <SubscribeButton uri={permanentUrl} />
             </div>

src/ui/page/file/view.jsx

@@ -8,11 +8,9 @@ import Thumbnail from 'component/common/thumbnail';
 import FilePrice from 'component/filePrice';
 import FileDetails from 'component/fileDetails';
 import FileActions from 'component/fileActions';
-import UriIndicator from 'component/uriIndicator';
 import Icon from 'component/common/icon';
 import DateTime from 'component/dateTime';
 import Button from 'component/button';
-import SubscribeButton from 'component/subscribeButton';
 import Page from 'component/page';
 import FileDownloadLink from 'component/fileDownloadLink';
 import classnames from 'classnames';
@@ -21,8 +19,8 @@ import RecommendedContent from 'component/recommendedContent';
 import ClaimTags from 'component/claimTags';
 import CommentsList from 'component/commentsList';
 import CommentCreate from 'component/commentCreate';
-import VideoDuration from 'component/videoDuration';
 import ClaimUri from 'component/claimUri';
+import ClaimPreview from 'component/claimPreview';
 
 type Props = {
   claim: StreamClaim,
@@ -224,11 +222,17 @@ class FilePage extends React.Component<Props> {
         <div className="columns">
           <div className="grid-area--info">
             <h1 className="media__title media__title--large">{title}</h1>
-            <div className="media__subtext media__subtext--large">
+
-              <div className="media__subtitle__channel">
+            <div className="media__subtitle">
-                <UriIndicator uri={uri} link />
+              <div className="media__actions media__actions--between">
-              </div>
+                <DateTime uri={uri} show={DateTime.SHOW_DATE} />
+                {'claimIsMine' && (
+                  <span>
+                    {viewCount} {viewCount !== 1 ? __('Views') : __('View')}
+                  </span>
+                )}
               </div>
+
               <div className="media__actions media__actions--between">
                 <div className="media__action-group--large">
                   {claimIsMine && (
@@ -242,25 +246,25 @@ class FilePage extends React.Component<Props> {
                       }}
                     />
                   )}
-                {
+                  {!claimIsMine && (
-                  <React.Fragment>
-                    {!claimIsMine && channelUri && <SubscribeButton uri={channelUri} channelName={channelName} />}
                     <Button
                       button="alt"
-                      icon={claimIsMine ? icons.SUPPORT : icons.TIP}
+                      icon={icons.TIP}
-                      label={claimIsMine ? __('Support') : __('Tip')}
+                      label={__('Tip')}
-                      onClick={() => openModal(MODALS.SEND_TIP, { uri, claimIsMine, isSupport: false })}
+                      title={__('Send a tip to this creator')}
+                      onClick={() => openModal(MODALS.SEND_TIP, { uri, claimIsMine })}
                     />
-                    {!claimIsMine && supportOption && (
+                  )}
+                  {claimIsMine ||
+                    (!claimIsMine && supportOption && (
                       <Button
                         button="alt"
                         icon={icons.SUPPORT}
                         label={__('Support')}
+                        title={__('Support this claim')}
                         onClick={() => openModal(MODALS.SEND_TIP, { uri, claimIsMine, isSupport: true })}
                       />
-                    )}
+                    ))}
-                  </React.Fragment>
-                }
                   <Button
                     button="alt"
                     icon={icons.SHARE}
@@ -279,26 +283,13 @@ class FilePage extends React.Component<Props> {
                   />
                 </div>
               </div>
-
-            <div className="media__actions media__actions--between">
-              <div className="media__subtext media__subtext--large">
-                <DateTime uri={uri} show={DateTime.SHOW_DATE} />
             </div>
 
-              <div className="media__subtext media__subtext--large">
+            <ClaimPreview uri={channelUri} type="inline" />
-                <VideoDuration uri={uri} />
-
-                {claimIsMine && (
-                  <p>
-                    {viewCount} {viewCount !== 1 ? __('Views') : __('View')}
-                  </p>
-                )}
-              </div>
-            </div>
 
             <div className="media__info--large">
-              <ClaimTags uri={uri} type="large" />
               <FileDetails uri={uri} />
+              <ClaimTags uri={uri} type="large" />
 
               <div className="media__info-title">
                 {__('Comments')} <span className="badge badge--alert">ALPHA</span>

src/ui/page/fileListDownloaded/view.jsx

@@ -19,7 +19,7 @@ function FileListDownloaded(props: Props) {
       {hasDownloads ? (
         <div className="card">
           <ClaimList
-            header={<h1>{__('Your Library')}</h1>}
+            header={__('Your Library')}
             defaultSort
             persistedStorageKey="claim-list-downloaded"
             uris={downloadedUris}
@@ -29,15 +29,10 @@ function FileListDownloaded(props: Props) {
       ) : (
         <div className="main--empty">
           <section className="card card--section">
-            <header className="card__header">
             <h2 className="card__title">{__("You haven't downloaded anything from LBRY yet.")}</h2>
-            </header>
-
-            <div className="card__content">
             <div className="card__actions card__actions--center">
               <Button button="primary" navigate="/" label={__('Explore new content')} />
             </div>
-            </div>
           </section>
         </div>
       )}

src/ui/page/fileListPublished/view.jsx

@@ -22,7 +22,7 @@ function FileListPublished(props: Props) {
       {uris && uris.length ? (
         <div className="card">
           <ClaimList
-            header={<h1>{__('Your Publishes')}</h1>}
+            header={__('Your Publishes')}
             loading={fetching}
             persistedStorageKey="claim-list-published"
             uris={uris}
@@ -33,15 +33,11 @@ function FileListPublished(props: Props) {
       ) : (
         <div className="main--empty">
           <section className="card card--section">
-            <header className="card__header">
             <h2 className="card__title">{__("It looks like you haven't published anything to LBRY yet.")}</h2>
-            </header>
 
-            <div className="card__content">
             <div className="card__actions card__actions--center">
               <Button button="primary" navigate="/$/publish" label={__('Publish something new')} />
             </div>
-            </div>
           </section>
         </div>
       )}

src/ui/page/following/view.jsx

@@ -38,12 +38,12 @@ function FollowingPage(props: Props) {
 
   return (
     <Page>
-      <div className="card">
+      <div className="card card--section">
         <TagsSelect showClose={false} title={__('Customize Your Tags')} />
       </div>
       <div className="card">
         <ClaimList
-          header={<h1>{viewingSuggestedSubs ? __('Discover New Channels') : __('Channels You Follow')}</h1>}
+          header={viewingSuggestedSubs ? __('Discover New Channels') : __('Channels You Follow')}
           headerAltControls={
             <Button
               button="link"

src/ui/page/getCredits/index.js

@@ -1,3 +0,0 @@
-import GetCreditsPage from './view';
-
-export default GetCreditsPage;

src/ui/page/getCredits/view.jsx

@@ -1,33 +0,0 @@
-import React from 'react';
-import Button from 'component/button';
-import RewardSummary from 'component/rewardSummary';
-// import ShapeShift from 'component/shapeShift';
-import Page from 'component/page';
-
-const GetCreditsPage = () => (
-  <Page>
-    <RewardSummary />
-    {/*
-      Removing Shapeshift after they switched to user accounts
-      Ideally most of the redux logic should be able to be re-used if we switch to another company
-      Or find a way to use ShapShift with an account?
-      <ShapeShift />
-    */}
-    <section className="card card--section">
-      <header className="card__header">
-        <h2 className="card__title">{__('More Ways To Get LBRY Credits')}</h2>
-        <p className="card__subtitle">
-          {'LBRY credits can be purchased on exchanges, earned for contributions, for mining, and more.'}
-        </p>
-      </header>
-
-      <div className="card__content">
-        <div className="card__actions">
-          <Button button="primary" href="https://lbry.com/faq/earn-credits" label={__('Read More')} />
-        </div>
-      </div>
-    </section>
-  </Page>
-);
-
-export default GetCreditsPage;

src/ui/page/help/view.jsx

@@ -123,12 +123,9 @@ class HelpPage extends React.PureComponent<Props, State> {
     return (
       <Page>
         <section className="card card--section">
-          <header className="card__header">
           <h2 className="card__title">{__('Read the FAQ')}</h2>
           <p className="card__subtitle">{__('Our FAQ answers many common questions.')}</p>
-          </header>
 
-          <div className="card__content">
           <div className="card__actions">
             <Button
               href="https://lbry.com/faq/lbry-basics"
@@ -138,66 +135,46 @@ class HelpPage extends React.PureComponent<Props, State> {
             />
             <Button href="https://lbry.com/faq" label={__('View all LBRY FAQs')} icon={icons.HELP} button="inverse" />
           </div>
-          </div>
         </section>
 
         <section className="card card--section">
-          <header className="card__header">
           <h2 className="card__title">{__('Find Assistance')}</h2>
 
           <p className="card__subtitle">
             {__('Live help is available most hours in the')} <strong>#help</strong>{' '}
             {__('channel of our Discord chat room. Or you can always email us at help@lbry.com.')}
           </p>
-          </header>
 
-          <div className="card__content">
           <div className="card__actions">
             <Button button="inverse" label={__('Join Our Chat')} icon={icons.CHAT} href="https://chat.lbry.com" />
             <Button button="inverse" label={__('Email Us')} icon={icons.WEB} href="mailto:help@lbry.com" />
           </div>
-          </div>
         </section>
         <section className="card card--section">
-          <header className="card__header">
           <h2 className="card__title">{__('Report a Bug or Suggest a New Feature')}</h2>
 
           <p className="card__subtitle">
             {__('Did you find something wrong? Think LBRY could add something useful and cool?')}{' '}
             <Button button="link" label={__('Learn more')} href="https://lbry.com/faq/support" />.
           </p>
-          </header>
 
-          <div className="card__content">
           <div className="card__actions">
-              <Button
+            <Button navigate="/$/report" label={__('Help Us Out')} button="inverse" />
-                navigate="/$/report"
-                label={__('Submit a Bug Report/Feature Request')}
-                icon={icons.REPORT}
-                button="inverse"
-              />
-            </div>
-
-            <div className="help">{__('Thanks! LBRY is made by its users.')}</div>
           </div>
         </section>
 
         {/* @if TARGET='app' */}
         <section className="card card--section">
-          <header className="card__header">
           <h2 className="card__title">{__('View your Log')}</h2>
 
           <p className="card__subtitle">
             {__('Did something go wrong? Have a look in your log file, or send it to')}{' '}
             <Button button="link" label={__('support')} href="https://lbry.com/faq/support" />.
           </p>
-          </header>
 
-          <div className="card__content">
           <div className="card__actions">
             <Button button="inverse" label={__('Open Log')} onClick={() => this.openLogFile(dataDirectory)} />
-              <Button button="inverse" label={__('Open Log Folder')} onClick={() => shell.openItem(dataDirectory)} />
+            <Button button="link" label={__('Open Log Folder')} onClick={() => shell.openItem(dataDirectory)} />
-            </div>
           </div>
         </section>
 
@@ -210,7 +187,7 @@ class HelpPage extends React.PureComponent<Props, State> {
             <h2 className="card__title">{__('About')}</h2>
 
             {this.state.upgradeAvailable !== null && this.state.upgradeAvailable ? (
-              <p className="card__subtitle">
+              <p className="card__subtitle--status">
                 {__('A newer version of LBRY is available.')}{' '}
                 <Button button="link" href={newVerLink} label={__('Download now!')} />
               </p>
@@ -219,7 +196,6 @@ class HelpPage extends React.PureComponent<Props, State> {
             )}
           </header>
 
-          <div className="card__content">
           <table className="table table--stretch">
             <tbody>
               <tr>
@@ -280,7 +256,6 @@ class HelpPage extends React.PureComponent<Props, State> {
               </tr>
             </tbody>
           </table>
-          </div>
         </section>
         {/* @endif */}
       </Page>

src/ui/page/publish/view.jsx

@@ -51,9 +51,7 @@ function PublishPage(props: Props) {
             }
           />
           <section className="card card--section">
-            <header className="card__header">
             <h1 className="card__title">{__('LBRY Credits Required')}</h1>
-            </header>
             <p className="card__subtitle">
               {__(' There are a variety of ways to get credits, including more than')}{' '}
               <CreditAmount inheritStyle amount={totalRewardRounded} />{' '}

src/ui/page/report/view.jsx

@@ -47,16 +47,13 @@ class ReportPage extends React.Component {
     return (
       <Page>
         <section className="card card--section">
-          <header className="card__header">
           <h2 className="card__title">{__('Report an Issue/Request a Feature')}</h2>
           <p className="card__subtitle">
             {__(
               'Please describe the problem you experienced or the feature you want to see and any information you think might be useful to us. Links to screenshots are great!'
             )}
           </p>
-          </header>
 
-          <div className="card__content">
           <FormField
             type="textarea"
             rows="10"
@@ -80,15 +77,11 @@ class ReportPage extends React.Component {
               {this.state.submitting ? __('Submitting...') : __('Submit Report')}
             </Button>
           </div>
-          </div>
         </section>
 
         <section className="card card--section">
-          <header className="card__header">
           <h2 className="card__title">{__('Developer?')}</h2>
-          </header>
 
-          <div className="card__content">
           <p>
             {__('You can also')}{' '}
             <Button
@@ -104,7 +97,6 @@ class ReportPage extends React.Component {
           <p>
             {__('Join our')} <Button button="link" href="https://discourse.lbry.com/" label={__('tech forum')} />.
           </p>
-          </div>
         </section>
       </Page>
     );

src/ui/page/rewards/view.jsx

@@ -34,7 +34,6 @@ class RewardsPage extends PureComponent<Props> {
         return (
           !IS_WEB && (
             <section className="card card--section">
-              <header className="card__header">
               <h2 className="card__title">{__('Rewards Approval to Earn Credits (LBC)')}</h2>
               <p className="card__subtitle">
                 {__(
@@ -42,18 +41,14 @@ class RewardsPage extends PureComponent<Props> {
                 )}{' '}
                 <Button button="link" label={__('Learn more')} href="https://lbry.com/faq/rewards" />.
               </p>
-              </header>
 
-              <div className="card__content">
               <Button navigate="/$/auth?redirect=rewards" button="primary" label="Prove Humanity" />
-              </div>
             </section>
           )
         );
       }
       return (
         <section className="card card--section">
-          <div className="card__content">
           <p>
             {__('This account must undergo review before you can participate in the rewards program.')}{' '}
             {__('This can take anywhere from several minutes to several days.')}
@@ -65,7 +60,6 @@ class RewardsPage extends PureComponent<Props> {
               'Please enjoy free content in the meantime!'
             )}`}
           </p>
-          </div>
           <div className="card__actions">
             <Button navigate="/" button="primary" label="Return Home" />
           </div>
@@ -95,34 +89,26 @@ class RewardsPage extends PureComponent<Props> {
     if (daemonSettings && !daemonSettings.share_usage_data) {
       return (
         <section className="card card--section">
-          <header className="card__header">
           <h2 className="card__title">{__('Disabled')}</h2>
           <p className="card__subtitle">
             {__('Rewards are currently disabled for your account. Turn on diagnostic data sharing, in')}{' '}
             <Button button="link" navigate="/$/settings" label="Settings" />
             {__(', in order to re-enable them.')}
           </p>
-          </header>
         </section>
       );
     } else if (fetching) {
-      return (
+      return <BusyIndicator message={__('Fetching rewards')} />;
-        <div className="card__content">
-          <BusyIndicator message={__('Fetching rewards')} />
-        </div>
-      );
     } else if (user === null) {
       return (
-        <section className="card card--section">
+        <p className="help">{__('This application is unable to earn rewards due to an authentication failure.')}</p>
-          <p>{__('This application is unable to earn rewards due to an authentication failure.')}</p>
-        </section>
       );
     } else if (!rewards || rewards.length <= 0) {
       return (
         <Fragment>
           <section className="card card--section">
             <h2 className="card__title">{__('No Rewards Available')}</h2>
-            <p className="card__content">
+            <p>
               {claimed && claimed.length
                 ? __(
                     "You have claimed all available rewards! We're regularly adding more so be sure to check back later."

src/ui/page/search/view.jsx

@@ -41,10 +41,12 @@ export default function SearchPage(props: Props) {
           <Fragment>
             {isValid && (
               <header className="search__header">
-                <Button button="alt" navigate={uri} className="media__uri">
+                <Button button="alt" navigate={uri} className="media__uri--large">
                   {uri}
                 </Button>
-                <ClaimPreview uri={uri} type="large" />
+                <div className="card">
+                  <ClaimPreview uri={uri} type="large" placeholder="publish" />
+                </div>
               </header>
             )}
 
@@ -72,7 +74,7 @@ export default function SearchPage(props: Props) {
                 }
               />
             </div>
-            <div className="card__content help">{__('These search results are provided by LBRY, Inc.')}</div>
+            <div className="help">{__('These search results are provided by LBRY, Inc.')}</div>
           </Fragment>
         )}
       </section>

src/ui/page/settings/view.jsx

@@ -1,5 +1,4 @@
 // @flow
-import * as ICONS from 'constants/icons';
 import * as SETTINGS from 'constants/settings';
 import * as React from 'react';
 import classnames from 'classnames';
@@ -170,9 +169,7 @@ class SettingsPage extends React.PureComponent<Props, State> {
         ) : (
           <div className={classnames({ 'card--disabled': IS_WEB })}>
             <section className="card card--section">
-              <header className="card__header">
               <h2 className="card__title">{__('Download Directory')}</h2>
-              </header>
 
               <div className="card__content">
                 <FileSelector
@@ -187,11 +184,9 @@ class SettingsPage extends React.PureComponent<Props, State> {
             </section>
 
             <section className="card card--section">
-              <header className="card__header">
               <h2 className="card__title">{__('Max Purchase Price')}</h2>
-              </header>
 
-              <Form className="card__content">
+              <Form>
                 <FormField
                   type="radio"
                   name="no_max_purchase_no_limit"
@@ -228,11 +223,9 @@ class SettingsPage extends React.PureComponent<Props, State> {
             </section>
 
             <section className="card card--section">
-              <header className="card__header">
               <h2 className="card__title">{__('Purchase Confirmations')}</h2>
-              </header>
 
-              <Form className="card__content">
+              <Form>
                 <FormField
                   type="radio"
                   name="confirm_all_purchases"
@@ -268,13 +261,11 @@ class SettingsPage extends React.PureComponent<Props, State> {
             </section>
 
             <section className="card card--section">
-              <header className="card__header">
               <h2 className="card__title">{__('Content Settings')}</h2>
-              </header>
 
-              <Form className="card__content">
+              <Form>
                 <FormField
-                  type="setting"
+                  type="checkbox"
                   name="show_nsfw"
                   onChange={() => setClientSetting(SETTINGS.SHOW_NSFW, !showNsfw)}
                   checked={showNsfw}
@@ -287,12 +278,10 @@ class SettingsPage extends React.PureComponent<Props, State> {
             </section>
 
             <section className="card card--section">
-              <header className="card__header">
               <h2 className="card__title">{__('Notifications')}</h2>
-              </header>
+              <Form>
-              <Form className="card__content">
                 <FormField
-                  type="setting"
+                  type="checkbox"
                   name="desktopNotification"
                   onChange={() => setClientSetting(SETTINGS.OS_NOTIFICATIONS_ENABLED, !osNotificationsEnabled)}
                   checked={osNotificationsEnabled}
@@ -303,13 +292,11 @@ class SettingsPage extends React.PureComponent<Props, State> {
             </section>
 
             <section className="card card--section">
-              <header className="card__header">
               <h2 className="card__title">{__('Share Diagnostic Data')}</h2>
-              </header>
 
-              <Form className="card__content">
+              <Form>
                 <FormField
-                  type="setting"
+                  type="checkbox"
                   name="share_usage_data"
                   onChange={() => setDaemonSetting('share_usage_data', !daemonSettings.share_usage_data)}
                   checked={daemonSettings.share_usage_data}
@@ -325,11 +312,9 @@ class SettingsPage extends React.PureComponent<Props, State> {
             </section>
 
             <section className="card card--section">
-              <header className="card__header">
               <h2 className="card__title">{__('Appearance')}</h2>
-              </header>
 
-              <Form className="card__content">
+              <Form>
                 <fieldset-section>
                   <FormField
                     name="theme_select"
@@ -348,7 +333,7 @@ class SettingsPage extends React.PureComponent<Props, State> {
                 </fieldset-section>
                 <fieldset-section>
                   <FormField
-                    type="setting"
+                    type="checkbox"
                     name="automatic_dark_mode"
                     onChange={() => this.onAutomaticDarkModeChange(!automaticDarkModeEnabled)}
                     checked={automaticDarkModeEnabled}
@@ -360,13 +345,11 @@ class SettingsPage extends React.PureComponent<Props, State> {
             </section>
 
             <section className="card card--section">
-              <header className="card__header">
               <h2 className="card__title">{__('Wallet Security')}</h2>
-              </header>
 
-              <Form className="card__content">
+              <Form>
                 <FormField
-                  type="setting"
+                  type="checkbox"
                   name="encrypt_wallet"
                   onChange={() => this.onChangeEncryptWallet()}
                   checked={walletEncrypted}
@@ -383,11 +366,9 @@ class SettingsPage extends React.PureComponent<Props, State> {
             </section>
 
             <section className="card card--section">
-              <header className="card__header">
               <h2 className="card__title">{__('Experimental Settings')}</h2>
-              </header>
 
-              <Form className="card__content">
+              <Form>
                 <FormField
                   type="setting"
                   name="support_option"
@@ -407,6 +388,7 @@ class SettingsPage extends React.PureComponent<Props, State> {
 
                 <FormField
                   type="setting"
+                  type="checkbox"
                   name="auto_download"
                   onChange={() => setClientSetting(SETTINGS.AUTO_DOWNLOAD, !autoDownload)}
                   checked={autoDownload}
@@ -417,7 +399,7 @@ class SettingsPage extends React.PureComponent<Props, State> {
                 />
 
                 <FormField
-                  type="setting"
+                  type="checkbox"
                   name="autoplay"
                   onChange={() => setClientSetting(SETTINGS.AUTOPLAY, !autoplay)}
                   checked={autoplay}
@@ -447,23 +429,18 @@ class SettingsPage extends React.PureComponent<Props, State> {
             </section>
 
             <section className="card card--section">
-              <header className="card__header">
               <h2 className="card__title">{__('Application Cache')}</h2>
-              </header>
 
-              <p className="help--warning">
+              <p className="card__subtitle--status">
                 {__('This will clear the application cache. Your wallet will not be affected.')}
               </p>
 
-              <div className="card__content">
               <Button
-                  button="primary"
+                button="inverse"
                 label={this.state.clearingCache ? __('Clearing') : __('Clear Cache')}
-                  icon={ICONS.ALERT}
                 onClick={this.clearCache}
                 disabled={this.state.clearingCache}
               />
-              </div>
             </section>
           </div>
         )}

src/ui/page/show/view.jsx

@@ -45,7 +45,7 @@ class ShowPage extends React.PureComponent<Props> {
       if (claim && !claim.name) {
         // While testing the normalization changes, Brannon found that `name` was missing sometimes
         // This shouldn't happen, so hopefully this helps track it down
-        console.error('No name for associated claim: ', claim.claim_id);
+        console.error('No name for associated claim: ', claim.claim_id); // eslint-disable-line no-console
       }
 
       innerContent = (
@@ -72,13 +72,11 @@ class ShowPage extends React.PureComponent<Props> {
           <Page>
             <section className="card card--section">
               <div className="card__title">{uri}</div>
-              <div className="card__content">
               <p>
                 {__(
                   'In response to a complaint we received under the US Digital Millennium Copyright Act, we have blocked access to this content from our applications.'
                 )}
               </p>
-              </div>
               <div className="card__actions">
                 <Button button="link" href="https://lbry.com/faq/dmca" label={__('Read More')} />
               </div>

src/ui/scss/all.scss

@@ -16,10 +16,8 @@
 @import 'component/claim-list';
 @import 'component/comments';
 @import 'component/content';
-@import 'component/credit';
 @import 'component/dat-gui';
 @import 'component/expandable';
-@import 'component/file-download';
 @import 'component/file-properties';
 @import 'component/file-render';
 @import 'component/form-field';
@@ -45,6 +43,5 @@
 @import 'component/tabs';
 @import 'component/tags';
 @import 'component/time';
-@import 'component/toggle';
 @import 'component/wunderbar';
 @import 'component/yrbl';

src/ui/scss/component/_badge.scss

@@ -2,6 +2,7 @@
 
 .badge {
   vertical-align: middle;
+  white-space: nowrap;
 }
 
 .badge--tag {

src/ui/scss/component/_button.scss

@@ -5,26 +5,22 @@
   font-weight: 400;
 
   svg {
-    stroke-width: 1.9;
-    position: relative;
-    color: $lbry-gray-5;
-
     // Buttons that don't have a label
     &:only-child {
       color: inherit;
-      width: 1.4rem;
+      width: 1.3rem;
-      height: 1.4rem;
+      height: 1.3rem;
     }
   }
 }
 
 .button--primary {
   &:hover {
-    background-color: $lbry-teal-3;
+    background-color: $lbry-teal-4;
   }
 
   svg {
-    color: white;
+    stroke: $lbry-teal-4;
   }
 }
 
@@ -41,15 +37,15 @@
 .button--primary,
 .button--inverse {
   height: var(--button-height);
-  line-height: var(--button-height);
   border-radius: var(--button-radius);
-  font-size: 1.1rem;
+  padding-top: 0;
-  padding: 0 var(--spacing-medium);
+  padding-bottom: 0;
   box-sizing: border-box;
 }
 
 .button--inverse {
   border-color: $lbry-teal-4;
+  color: $lbry-teal-5;
 
   &:hover {
     color: $lbry-white;
@@ -64,6 +60,12 @@
   padding: 0;
 }
 
+.button--link {
+  [data-mode='dark'] & {
+    color: $lbry-teal-5;
+  }
+}
+
 .button--uri-indicator {
   max-width: 100%;
   height: 1.2em;
@@ -100,6 +102,7 @@
   display: flex;
   align-items: center;
   min-width: 0;
+  height: 100%;
 }
 
 .button__label {
@@ -111,5 +114,5 @@
 // Handle icons on the left or right side of the button label
 svg + .button__label,
 .button__label + svg {
-  margin-left: var(--spacing-miniscule);
+  margin-left: var(--spacing-small);
 }

src/ui/scss/component/_card.scss

@@ -5,7 +5,6 @@
   border-radius: var(--card-radius);
   box-shadow: var(--card-box-shadow) $lbry-gray-1;
   overflow: hidden;
-  font-size: 1.25rem;
 
   [data-mode='dark'] & {
     background-color: var(--dm-color-05);
@@ -41,8 +40,9 @@
 .card--reward-total {
   background-repeat: no-repeat;
   background-size: cover;
-  // justify-content: space-between;
   color: $lbry-white;
+  font-size: var(--font-title);
+  font-weight: 700;
 }
 
 .card--modal {
@@ -55,13 +55,23 @@
 .card__actions {
   display: flex;
   align-items: center;
-  font-size: 1.15rem;
+  margin-top: var(--spacing-medium);
+  font-size: var(--font-body);
+
+  &:only-child {
+    margin-top: 0;
+  }
 
   > *:not(:last-child) {
     margin-right: var(--spacing-medium);
   }
 }
 
+.card__actions--inline {
+  @extend .card__actions;
+  margin-top: 0;
+}
+
 .card__actions--between {
   @include between;
 }
@@ -92,34 +102,9 @@
   padding: var(--spacing-medium);
 }
 
-//  C A R D
-//  C O N T E N T
-
-.card__content {
-  &:not(:last-of-type) {
-    margin-bottom: var(--spacing-medium);
-  }
-
-  p:not(:last-child) {
-    margin-bottom: var(--spacing-medium);
-  }
-}
-
 .card__content--large {
-  font-size: 3rem;
+  font-size: var(--font-heading);
-  line-height: 1.5;
+  font-weight: 600;
-  font-weight: 700;
-}
-
-//  C A R D
-//  H E A D E R
-
-.card__header {
-  position: relative;
-
-  &:not(.card__header--flat) {
-    margin-bottom: var(--spacing-medium);
-  }
 }
 
 //  C A R D
@@ -168,19 +153,25 @@
 //  S U B T I T L E
 
 .card__subtitle {
-  @extend .help;
+  margin: var(--spacing-small) 0;
-  color: darken($lbry-gray-5, 25%);
+  padding: var(--spacing-small);
-  background-color: lighten($lbry-gray-1, 5%);
+  border-radius: var(--card-radius);
-  font-size: 1.15rem;
+  font-size: var(--font-body);
-  margin-bottom: var(--spacing-small);
+  background-color: rgba($lbry-blue-1, 0.1);
-  flex: 1;
+  color: darken($lbry-gray-5, 15%);
-
-  p {
-    margin-bottom: var(--spacing-small);
-  }
 
   [data-mode='dark'] & {
-    background-color: darken($lbry-gray-5, 20%);
+    background-color: var(--dm-color-04);
+    color: inherit;
+  }
+}
+
+.card__subtitle--status {
+  @extend .card__subtitle;
+  background-color: $lbry-yellow-1;
+
+  [data-mode='dark'] & {
+    background-color: rgba($lbry-yellow-1, 0.1);
   }
 }
 
@@ -188,26 +179,17 @@
 //  T I T L E
 
 .card__title {
-  font-size: 2rem;
-  font-weight: 600;
-  margin-bottom: var(--spacing-medium);
-
-  + .card__content {
-    margin-top: var(--spacing-medium);
-  }
-}
-
-.card__title--flex {
   display: flex;
   align-items: center;
+  margin-bottom: var(--spacing-small);
+  font-size: var(--font-title);
 
   & > *:not(:last-child) {
     margin-right: var(--spacing-medium);
   }
 }
 
-.card__title--flex-between {
+.card__title--between {
-  display: flex;
+  @extend .card__title;
-  @include between;
+  justify-content: space-between;
-  align-items: center;
 }

src/ui/scss/component/_channel.scss

@@ -84,11 +84,12 @@ $metadata-z-index: 1;
 }
 
 .channel__title {
-  font-size: 3rem;
-  font-weight: 800;
   margin-right: var(--spacing-small);
   overflow: hidden;
   text-overflow: ellipsis;
+  // line-height: var(--font-heading);
+  font-size: var(--font-heading);
+  font-weight: 800;
 
   // Quick hack to get this to work
   // We should have a generic style for "header with button next to it"
@@ -98,8 +99,6 @@ $metadata-z-index: 1;
 }
 
 .channel__url {
-  font-size: 1.2rem;
-  margin-top: -0.25rem;
   color: rgba($lbry-white, 0.75);
   margin-right: var(--spacing-large);
 }

src/ui/scss/component/_claim-list.scss

@@ -3,23 +3,22 @@
   align-items: center;
   min-height: 4.5rem;
   padding: var(--spacing-medium);
-  font-size: 1rem; // Ensures select & header text have same font-size
+  font-size: var(--font-body);
-  color: $lbry-white;
   border-top-left-radius: var(--card-radius);
   border-top-right-radius: var(--card-radius);
+  color: $lbry-white;
 
   & > *:not(:last-child) {
     margin-right: 0.5rem;
   }
 
   fieldset-section {
-    margin-bottom: 0;
+    margin: 0;
   }
 
   // Normal link buttons are too dark on the black file list background
   .button--link {
     color: $lbry-teal-3;
-    font-size: 1.2em;
 
     &:hover {
       color: $lbry-teal-1;
@@ -46,19 +45,13 @@
 .claim-list__header--small {
   height: 3rem;
   min-height: 3rem;
-  font-size: 1em;
 }
 
 .claim-list__dropdown {
-  background-position: 95% center;
+  margin-bottom: 0;
-  background-repeat: no-repeat;
-  background-size: 1.2rem;
-  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 96 96' xmlns='http://www.w3.org/2000/svg' fill='%23ffffff'%3E%3Cpath d='M17.172, 31.172c1.562, -1.562 4.095, -1.562 5.656, 0l25.172, 25.171l25.172, -25.171c1.562, -1.562 4.095, -1.562 5.656, 0c1.562, 1.562 1.562, 4.095 0, 5.656l-28, 28c-1.562, 1.562 -4.095, 1.562 -5.656, 0l-28, -28c-0.781, -0.781 -1.172, -1.805 -1.172, -2.828c0, -1.023 0.391, -2.047 1.172, -2.828Z'/%3E%3C/svg%3E%0A");
-  height: 2.5rem;
-  font-size: 1.3rem;
   padding: 0 var(--spacing-medium);
   padding-right: var(--spacing-large);
-  margin-bottom: 0;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 96 96' xmlns='http://www.w3.org/2000/svg' fill='%23ffffff'%3E%3Cpath d='M17.172, 31.172c1.562, -1.562 4.095, -1.562 5.656, 0l25.172, 25.171l25.172, -25.171c1.562, -1.562 4.095, -1.562 5.656, 0c1.562, 1.562 1.562, 4.095 0, 5.656l-28, 28c-1.562, 1.562 -4.095, 1.562 -5.656, 0l-28, -28c-0.781, -0.781 -1.172, -1.805 -1.172, -2.828c0, -1.023 0.391, -2.047 1.172, -2.828Z'/%3E%3C/svg%3E%0A");
   border: 1px solid $lbry-white;
   color: $lbry-white;
   background-color: lighten($lbry-black, 10%);
@@ -81,7 +74,6 @@
   display: flex;
   align-items: center;
   margin-left: auto;
-  font-size: 1.1em;
 
   & > * {
     margin-left: var(--spacing-small);
@@ -89,25 +81,26 @@
 }
 
 .claim-preview {
-  @include mediaThumbHoverZoom;
   display: flex;
   position: relative;
   overflow: visible;
-  cursor: pointer;
-  font-size: 1.3rem;
   padding: var(--spacing-medium);
 
+  &:not(.claim-preview--inline) {
+    @include mediaThumbHoverZoom;
+    cursor: pointer;
+  }
+
   .media__thumb {
     width: var(--file-list-thumbnail-width);
     flex-shrink: 0;
     margin-right: var(--spacing-medium);
   }
+}
 
-  ul & {
+.claim-preview--injected {
-    &:first-of-type {
+  padding: var(--spacing-medium);
-      border-top: none;
+  position: relative;
-    }
-  }
 }
 
 .claim-preview--injected,
@@ -116,23 +109,45 @@
 
   [data-mode='dark'] & {
     color: $lbry-white;
-    border-top: 1px solid var(--dm-color-04);
+    border-color: var(--dm-color-04);
-    background-color: var(--dm-color-05);
   }
 }
 
 .claim-preview--large {
-  font-size: 1.6rem;
+  border: none;
-  border-bottom: 0;
   padding: 0;
-  margin: var(--spacing-small) 0;
+  margin: var(--spacing-medium);
+  font-size: var(--font-multiplier-large);
 
   &:hover {
     background-color: transparent;
   }
 
   .media__thumb {
-    width: 20rem;
+    width: 14rem;
+  }
+
+  .channel-thumbnail {
+    width: 7.5rem;
+    height: 7.5rem;
+  }
+
+  [data-mode='dark'] & {
+    border: none;
+  }
+}
+
+.claim-preview--small {
+  font-size: var(--font-multiplier-small);
+  padding: var(--spacing-small);
+
+  .media__thumb {
+    width: 8rem;
+  }
+
+  .channel-thumbnail {
+    width: 4rem;
+    height: 4rem;
   }
 }
 
@@ -160,6 +175,25 @@
   }
 }
 
+.claim-preview--inline {
+  padding: 0;
+  padding-top: var(--spacing-large);
+  border-bottom: none;
+  border-top: 1px solid $lbry-gray-1;
+
+  .channel-thumbnail {
+    width: var(--channel-thumbnail-width--small);
+    height: var(--channel-thumbnail-width--small);
+  }
+}
+
+.claim-preview-title {
+  font-weight: 600;
+  margin-right: auto;
+  padding-right: var(--spacing-medium);
+  font-size: larger;
+}
+
 .claim-preview-metadata {
   display: flex;
   flex-direction: column;
@@ -179,10 +213,5 @@
 .claim-preview-properties {
   align-items: flex-end;
   flex: 1;
-}
+  font-size: var(--font-subtext);
-
-.claim-preview-title {
-  font-weight: 600;
-  margin-right: auto;
-  padding-right: var(--spacing-medium);
 }

src/ui/scss/component/_comments.scss

@@ -1,4 +1,5 @@
 .comments {
+  @extend .ul--no-style;
   margin-top: var(--spacing-large);
 }
 

src/ui/scss/component/_credit.scss

@@ -1,17 +0,0 @@
-.credit-amount {
-  font-size: 0.8rem;
-  white-space: nowrap;
-}
-
-.credit-amount--inherit {
-  background-color: inherit;
-  color: inherit;
-  font-size: inherit;
-  font-weight: inherit;
-  padding: 0;
-}
-
-.credit-amount--large {
-  font-size: 36px;
-  font-weight: 600;
-}