Merge pull request #2286 from lbryio/css

ui cleanup

package.json

@@ -34,7 +34,7 @@
     "postinstall": "electron-builder install-app-deps && node build/downloadDaemon.js"
   },
   "dependencies": {
-    "@lbry/components": "^2.2.0",
+    "@lbry/components": "^2.2.1",
     "@types/three": "^0.93.1",
     "bluebird": "^3.5.1",
     "breakdance": "^3.0.1",

src/renderer/component/channelTile/view.jsx

@@ -45,8 +45,7 @@ class ChannelTile extends React.PureComponent<Props> {
       subscriptionUri = `lbry://${claim.permanent_url}`;
     }
 
-    const onClick = () =>
+    const onClick = () => navigate('/show', { uri });
-      channelName ? navigate('/show', { uri, page: 1 }) : navigate('/show', { uri });
 
     return (
       <section

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

@@ -28,7 +28,7 @@ type Props = {
   inputProps?: {
     disabled?: boolean,
   },
-  inputButton: ?React.Node,
+  inputButton?: React.Node,
   blockWrap: boolean,
 };
 
@@ -38,6 +38,8 @@ export class FormField extends React.PureComponent<Props> {
     blockWrap: true,
   };
 
+  input: { current: React.ElementRef<any> };
+
   constructor(props: Props) {
     super(props);
     this.input = React.createRef();
@@ -92,6 +94,7 @@ export class FormField extends React.PureComponent<Props> {
       } else if (type === 'checkbox') {
         // web components treat props weird
         // we need to fully remove it for proper component:attribute css styling
+        // $FlowFixMe
         const elementProps = inputProps.disabled ? { disabled: true } : {};
         input = (
           <Wrapper>
@@ -165,10 +168,18 @@ export class FormField extends React.PureComponent<Props> {
         input = (
           <React.Fragment>
             <fieldset-section>
-              <label htmlFor={name}>{label}</label>
+              {(label || errorMessage) && (
+                <label htmlFor={name}>
+                  {errorMessage ? <span className="error-text">{errorMessage}</span> : label}
+                </label>
+              )}
+              {prefix && (
+                <label className="form-field--inline-prefix" htmlFor={name}>
+                  {prefix}
+                </label>
+              )}
               {inner}
             </fieldset-section>
-            {errorMessage && <div className="error-text">{errorMessage}</div>}
           </React.Fragment>
         );
       }

src/renderer/component/fileActions/view.jsx

@@ -36,11 +36,7 @@ class FileActions extends React.PureComponent<Props> {
         )}
         {!claimIsMine && (
           <Tooltip onComponent body={__('Report content')}>
-            <Button
+            <Button icon={ICONS.REPORT} href={`https://lbry.io/dmca?claim_id=${claimId}`} />
-              button="alt"
-              icon={ICONS.REPORT}
-              href={`https://lbry.io/dmca?claim_id=${claimId}`}
-            />
           </Tooltip>
         )}
       </React.Fragment>

src/renderer/component/fileList/view.jsx

@@ -162,8 +162,7 @@ class FileList extends React.PureComponent<Props> {
         {!hideFilter && (
           <Form>
             <FormField
-              prefix={__('Sort by')}
+              label={__('Sort by')}
-              affixClass="form-field--align-center"
               type="select"
               value={sortBy}
               onChange={this.handleSortChanged}

src/renderer/component/inviteNew/view.jsx

@@ -42,7 +42,6 @@ class FormInviteNew extends React.PureComponent<FormProps, FormState> {
     return (
       <Form onSubmit={this.handleSubmit}>
         <FormField
-          stretch
           type="text"
           label="Email"
           placeholder="youremail@example.org"

src/renderer/component/publishForm/internal/license-type.jsx

@@ -43,6 +43,7 @@ class LicenseType extends React.PureComponent<Props> {
     return (
       <React.Fragment>
         <FormField
+          name="license"
           label={__('License (Optional)')}
           type="select"
           value={licenseType}

src/renderer/component/publishForm/internal/name-help-text.jsx

@@ -46,8 +46,7 @@ class NameHelpText extends React.PureComponent<Props> {
       <React.Fragment>
         {nameHelpText || (
           <span>
-            {__('Create a URL for this content.')}{' '}
+            {__('Create a URL for this content. Simpler names are easier to find and remember.')}
-            {uri && `${__('The uri for this name is')} ${uri}`}
           </span>
         )}
       </React.Fragment>

src/renderer/component/publishForm/view.jsx

@@ -440,7 +440,6 @@ class PublishForm extends React.PureComponent<Props> {
             </header>
 
             <div className="card__content">
-              <fieldset-section>
               <FormField
                 type="radio"
                 name="content_free"
@@ -449,8 +448,7 @@ class PublishForm extends React.PureComponent<Props> {
                 disabled={formDisabled}
                 onChange={() => updatePublishForm({ contentIsFree: true })}
               />
-              </fieldset-section>
+
-              <fieldset-section>
               <FormField
                 type="radio"
                 name="content_cost"
@@ -459,7 +457,6 @@ class PublishForm extends React.PureComponent<Props> {
                 disabled={formDisabled}
                 onChange={() => updatePublishForm({ contentIsFree: false })}
               />
-              </fieldset-section>
               {!contentIsFree && (
                 <FormFieldPrice
                   name="content_cost_amount"
@@ -504,28 +501,31 @@ class PublishForm extends React.PureComponent<Props> {
             </header>
 
             <div className="card__content">
-              <FormField
+              <fieldset-group class="fieldset-group--smushed fieldset-group--disabled-prefix">
-                label={__('Name')}
+                <fieldset-section>
-                prefix={`lbry://${
+                  <label>{__('Name')}</label>
+                  <span className="form-field__prefix">{`lbry://${
                     !channel || channel === CHANNEL_ANONYMOUS || channel === CHANNEL_NEW
                       ? ''
                       : `${channel}/`
-                }`}
+                  }`}</span>
+                </fieldset-section>
+                <FormField
                   type="text"
                   name="content_name"
-                placeholder="myname"
                   value={name}
                   onChange={event => this.handleNameChange(event.target.value)}
                   error={nameError}
-                helper={
+                />
+              </fieldset-group>
+              <div className="form-field__help">
                 <NameHelpText
                   isStillEditing={isStillEditing}
                   uri={uri}
                   myClaimForUri={myClaimForUri}
                   onEditMyClaim={this.editExistingClaim}
                 />
-                }
+              </div>
-              />
             </div>
 
             <div className={classnames('card__content', { 'card--disabled': !name })}>
@@ -534,7 +534,7 @@ class PublishForm extends React.PureComponent<Props> {
                 type="number"
                 name="content_bid"
                 step="any"
-                label={__('Deposit')}
+                label={__('Deposit (LBC)')}
                 postfix="LBC"
                 value={bid}
                 error={bidError}

src/renderer/component/searchOptions/view.jsx

@@ -58,6 +58,7 @@ const SearchOptions = (props: Props) => {
               ].map(({ option, label }) => (
                 <FormField
                   key={option}
+                  name={option}
                   type="radio"
                   blockWrap={false}
                   label={label}
@@ -93,6 +94,7 @@ const SearchOptions = (props: Props) => {
               ].map(({ option, label }) => (
                 <FormField
                   key={option}
+                  name={option}
                   type="checkbox"
                   blockWrap={false}
                   disabled={options[SEARCH_OPTIONS.CLAIM_TYPE] === SEARCH_OPTIONS.INCLUDE_CHANNELS}
@@ -107,6 +109,7 @@ const SearchOptions = (props: Props) => {
               <legend className="search__legend--3">{__('Other Options')}</legend>
               <FormField
                 type="number"
+                name="result-count"
                 value={resultCount}
                 onChange={e => setSearchOption(SEARCH_OPTIONS.RESULT_COUNT, e.target.value)}
                 blockWrap={false}

src/renderer/component/selectChannel/view.jsx

@@ -158,7 +158,7 @@ class ChannelSection extends React.PureComponent<Props, State> {
         ) : (
           <fieldset-section>
             <FormField
-              key="channel"
+              name="channel"
               type="select"
               onChange={this.handleChannelChange}
               value={channel}
@@ -177,8 +177,8 @@ class ChannelSection extends React.PureComponent<Props, State> {
           <div className="card__content">
             <FormField
               label={__('Name')}
+              name="channel-input"
               type="text"
-              prefix="@"
               placeholder={__('myChannelName')}
               error={newChannelNameError}
               value={newChannelName}
@@ -187,8 +187,8 @@ class ChannelSection extends React.PureComponent<Props, State> {
 
             <FormField
               className="form-field--price-amount"
-              label={__('Deposit')}
+              name="channel-deposit"
-              postfix="LBC"
+              label={__('Deposit (LBC)')}
               step="any"
               min="0"
               type="number"

src/renderer/component/transactionList/view.jsx

@@ -83,10 +83,10 @@ class TransactionList extends React.PureComponent<Props> {
                 <Form>
                   <FormField
                     type="select"
+                    name="file-sort"
                     value={filterSetting || TRANSACTIONS.ALL}
                     onChange={this.handleFilterChanged}
-                    affixClass="form-field--align-center"
+                    label={__('Show')}
-                    prefix={__('Show')}
                     postfix={
                       <Button
                         button="link"

src/renderer/component/userHistory/view.jsx

@@ -94,9 +94,8 @@ class UserHistoryPage extends React.PureComponent<Props, State> {
   }
 
   render() {
-    const { history, page } = this.props;
+    const { history, page, pageCount } = this.props;
     const { itemsSelected } = this.state;
-    const pageCount = 20;
     const allSelected = Object.keys(itemsSelected).length === history.length;
     const selectHandler = allSelected ? this.unselectAll : this.selectAll;
 
@@ -117,7 +116,7 @@ class UserHistoryPage extends React.PureComponent<Props, State> {
           />
         </div>
         {!!history.length && (
-          <section className="item-list">
+          <section className="card__content item-list">
             {history.map(item => (
               <UserHistoryItem
                 key={item.uri}
@@ -131,7 +130,7 @@ class UserHistoryPage extends React.PureComponent<Props, State> {
             ))}
           </section>
         )}
-        {pageCount > -1 && (
+        {pageCount > 1 && (
           <Form>
             <fieldset-group class="fieldset-group--smushed fieldgroup--paginate">
               <fieldset-section>
@@ -153,10 +152,11 @@ class UserHistoryPage extends React.PureComponent<Props, State> {
                 />
               </fieldset-section>
               <FormField
+                type="text"
+                name="paginate-input"
+                label={__('Go to page:')}
                 className="paginate-channel"
                 onKeyUp={e => this.paginate(e)}
-                label={__('Go to page:')}
-                type="text"
               />
             </fieldset-group>
           </Form>

src/renderer/component/userHistoryItem/view.jsx

@@ -44,7 +44,7 @@ class UserHistoryItem extends React.PureComponent<Props> {
           'item-list__item--selected': selected,
         })}
       >
-        <FormField checked={selected} type="checkbox" onClick={onSelect} />
+        <FormField checked={selected} type="checkbox" onChange={onSelect} />
         <span className="time time--ago">{moment(lastViewed).from(moment())}</span>
         <span className="item-list__item--cutoff">{title}</span>
         <Button

src/renderer/component/walletSendTip/view.jsx

@@ -75,16 +75,16 @@ class WalletSendTip extends React.PureComponent<Props, State> {
 
     return (
       <React.Fragment>
-        <Form>
+        <Form className="card__content">
           <FormField
             autoFocus
+            name="tip-input"
             label={
               (tipAmount &&
                 tipAmount !== 0 &&
                 `Tip ${tipAmount.toFixed(8).replace(/\.?0+$/, '')} LBC`) ||
               __('Amount')
             }
-            postfix={__('LBC')}
             className="form-field--price-amount"
             error={tipError}
             min="0"

src/renderer/modal/modalRemoveFile/view.jsx

@@ -75,6 +75,7 @@ class ModalRemoveFile extends React.PureComponent<Props, State> {
         </section>
         <section className="card__content">
           <FormField
+            name="file_delete"
             label={__('Also delete this file from my computer')}
             type="checkbox"
             checked={deleteChecked}
@@ -83,6 +84,7 @@ class ModalRemoveFile extends React.PureComponent<Props, State> {
 
           {claimIsMine && (
             <FormField
+              name="claim_abandon"
               label={__('Abandon the claim for this URI')}
               type="checkbox"
               checked={abandonClaimChecked}

src/renderer/modal/modalRewardCode/view.jsx

@@ -57,6 +57,7 @@ class ModalRewardCode extends React.PureComponent<Props, State> {
           <FormField
             autoFocus
             type="text"
+            name="reward-code"
             inputButton={
               <Submit
                 disabled={!rewardCode || rewardIsPending}

src/renderer/page/channel/view.jsx

@@ -4,7 +4,7 @@ import * as icons from 'constants/icons';
 import * as MODALS from 'constants/modal_types';
 import React from 'react';
 import BusyIndicator from 'component/common/busy-indicator';
-import { FormField } from 'component/common/form';
+import { FormField, Form } from 'component/common/form';
 import ReactPaginate from 'react-paginate';
 import SubscribeButton from 'component/subscribeButton';
 import Page from 'component/page';
@@ -86,7 +86,7 @@ class ChannelPage extends React.PureComponent<Props> {
     return (
       <Page notContained>
         <header className="channel-info">
-          <h1 className="media__title">
+          <h1 className="media__title media__title--large">
             {name}
             {fetching && <BusyIndicator />}
           </h1>
@@ -108,7 +108,9 @@ class ChannelPage extends React.PureComponent<Props> {
 
         {(!fetching || (claimsInChannel && claimsInChannel.length)) &&
           totalPages > 1 && (
-            <React.Fragment>
+            <Form>
+              <fieldset-group class="fieldset-group--smushed fieldgroup--paginate">
+                <fieldset-section>
                   <ReactPaginate
                     pageCount={totalPages}
                     pageRangeDisplayed={2}
@@ -125,14 +127,17 @@ class ChannelPage extends React.PureComponent<Props> {
                     initialPage={currentPage}
                     containerClassName="pagination"
                   />
+                </fieldset-section>
 
                 <FormField
                   className="paginate-channel"
                   onKeyUp={e => this.paginate(e, totalPages)}
-                prefix={__('Go to page:')}
+                  label={__('Go to page:')}
                   type="text"
+                  name="paginate-file"
                 />
-            </React.Fragment>
+              </fieldset-group>
+            </Form>
           )}
 
         {!channelIsMine && <HiddenNsfwClaims className="card__content help" uri={uri} />}

src/renderer/page/help/view.jsx

@@ -173,13 +173,11 @@ class HelpPage extends React.PureComponent<Props, State> {
               <Button
                 button="primary"
                 label={__('Open Log')}
-                icon={icons.REPORT}
                 onClick={() => this.openLogFile(dataDirectory)}
               />
               <Button
                 button="primary"
                 label={__('Open Log Folder')}
-                icon={icons.REPORT}
                 onClick={() => shell.openItem(dataDirectory)}
               />
             </div>

src/renderer/page/settings/view.jsx

@@ -164,7 +164,9 @@ class SettingsPage extends React.PureComponent<Props, State> {
                   <FileSelector
                     type="openDirectory"
                     currentPath={daemonSettings.download_dir}
-                    onFileChosen={this.onDownloadDirChange}
+                    onFileChosen={(newDirectory: string) => {
+                      setDaemonSetting('download_dir', newDirectory);
+                    }}
                   />
                 </Form>
               </div>
@@ -181,7 +183,6 @@ class SettingsPage extends React.PureComponent<Props, State> {
               </header>
 
               <Form className="card__content">
-                <fieldset-section>
                 <FormField
                   type="radio"
                   name="no_max_purchase_no_limit"
@@ -191,8 +192,6 @@ class SettingsPage extends React.PureComponent<Props, State> {
                     this.onKeyFeeDisableChange(true);
                   }}
                 />
-                </fieldset-section>
-                <fieldset-section>
                 <FormField
                   type="radio"
                   name="max_purchase_limit"
@@ -203,7 +202,6 @@ class SettingsPage extends React.PureComponent<Props, State> {
                   }}
                   label={__('Choose limit')}
                 />
-                </fieldset-section>
 
                 {!disableMaxKeyFee && (
                   <FormFieldPrice
@@ -229,7 +227,6 @@ class SettingsPage extends React.PureComponent<Props, State> {
               </header>
 
               <Form className="card__content">
-                <fieldset-section>
                 <FormField
                   type="radio"
                   name="confirm_all_purchases"
@@ -239,8 +236,6 @@ class SettingsPage extends React.PureComponent<Props, State> {
                     this.onInstantPurchaseEnabledChange(false);
                   }}
                 />
-                </fieldset-section>
-                <fieldset-section>
                 <FormField
                   type="radio"
                   name="instant_purchases"
@@ -250,7 +245,7 @@ class SettingsPage extends React.PureComponent<Props, State> {
                     this.onInstantPurchaseEnabledChange(true);
                   }}
                 />
-                </fieldset-section>
+
                 {instantPurchaseEnabled && (
                   <FormFieldPrice
                     name="confirmation_price"
@@ -430,7 +425,7 @@ class SettingsPage extends React.PureComponent<Props, State> {
                   button="primary"
                   label={this.state.clearingCache ? __('Clearing') : __('Clear Cache')}
                   icon={ICONS.ALERT}
-                  // onClick={this.clearCache}
+                  onClick={this.clearCache}
                   disabled={this.state.clearingCache}
                 />
               </div>

src/renderer/scss/component/_button.scss

@@ -8,11 +8,12 @@
     width: 1.2rem;
     height: 1.2rem;
     position: relative;
-    top: 2px;
+    top: 1px;
-    stroke-opacity: 0.7;
+    color: $lbry-gray-5;
 
     // Buttons that don't have a label
     &:only-child {
+      color: inherit;
       stroke-opacity: 1;
       width: 1.4rem;
       height: 1.4rem;
@@ -38,6 +39,19 @@
   }
 }
 
+.button--primary {
+  height: var(--spacing-l);
+
+  svg {
+    color: white;
+  }
+
+  svg + .button__label {
+    position: relative;
+    top: -0.05em;
+  }
+}
+
 .button--inverse {
   font-size: 1rem;
   transition: background-color 0.2s;
@@ -67,10 +81,16 @@
     }
   }
 }
-.button--link:not(:hover):not(:disabled) {
+.button--link:not(:disabled) {
   html[data-mode='dark'] & {
+    &:not(:hover) {
       color: $lbry-teal-4;
     }
+
+    &:hover {
+      color: $lbry-teal-3;
+    }
+  }
 }
 
 .button--load-screen {
@@ -97,11 +117,10 @@
 }
 
 .button--uri-indicator {
-  width: 100%;
+  max-width: 100%;
   overflow: hidden;
   text-align: left;
   text-overflow: ellipsis;
-  white-space: nowrap;
   transition: color 0.2s;
 
   &:hover {

src/renderer/scss/component/_channel.scss

@@ -1,5 +1,6 @@
 .channel-info {
   .media__title {
+    display: block;
     user-select: text;
     margin-bottom: var(--spacing-vertical-medium);
   }

src/renderer/scss/component/_form-field.scss

@@ -3,10 +3,35 @@
 // lbry/components overrides and minor styles
 
 input[type='number'] {
-  padding: var(--spacing-s);
   width: 8em;
 }
 
+input[type='text'],
+input[type='number'],
+select {
+  padding-bottom: 0.2em;
+
+  [data-mode='dark'] & {
+    &::placeholder {
+      opacity: 0.4;
+    }
+  }
+}
+
+fieldset-section {
+  label {
+    width: auto;
+    text-transform: none;
+  }
+
+  checkbox-element,
+  radio-element {
+    label {
+      font-size: medium;
+    }
+  }
+}
+
 checkbox-element {
   &[disabled='true'] {
     opacity: 0.3;
@@ -33,9 +58,14 @@ radio-element {
       }
     }
   }
+
+  label {
+    margin-bottom: 0;
+  }
 }
 
-fieldset-group.fieldset-group--smushed {
+fieldset-group {
+  &.fieldset-group--smushed {
     justify-content: flex-start;
 
     fieldset-section {
@@ -58,23 +88,96 @@ fieldset-group.fieldset-group--smushed {
         margin-bottom: -1em;
       }
     }
+  }
+
+  // This is a special case where the prefix appears "inside" the input
+  // It would be way simpler to just use position: absolute and give it a width
+  // but the width can change when we use it for the name prefix
+  // lbry:// {input}, lbry://@short {input}, @lbry://longername {input}
+  // The spacing/alignment isn't very robust and will probably need to be changed
+  // if we use this in more places
+  &.fieldset-group--disabled-prefix {
+    align-items: flex-end;
+
+    fieldset-section:first-child .form-field__prefix,
+    fieldset-section:last-child input {
+      border-color: $lbry-black;
+
+      [data-mode='dark'] {
+        border-color: $lbry-gray-4;
+      }
+    }
+
+    fieldset-section:first-child {
+      .form-field__prefix {
+        padding: 0.15em var(--spacing-s);
+        padding-right: 0;
+        border: 1px solid;
+        border-right: 0;
+        color: $lbry-gray-4;
+      }
+    }
+
+    fieldset-section:last-child {
+      width: 100%;
+
+      input {
+        border-left: 0;
+        padding-left: var(--spacing-xs);
+
+        &:focus {
+          border-image-slice: 1;
+          border-image-source: linear-gradient(to right, $lbry-black, $lbry-teal-5 5%);
+        }
+
+        [data-mode='dark'] & {
+          &:focus {
+            border-image-source: linear-gradient(to right, $lbry-gray-4, $lbry-teal-5 5%);
+          }
+        }
+      }
+    }
+  }
 }
 
 // form buttons are black by default
 form {
-  [data-mode='dark'] & {
+  // [data-mode='dark'] & {
   .button--primary:not(:hover) {
     background-color: $lbry-teal-5;
     border-color: $lbry-teal-5;
-    }
 
-    legend {
+    &:hover {
-      background-color: $lbry-cyan-5;
+      background-color: $lbry-teal-3;
+      border-color: $lbry-teal-3;
     }
   }
 }
 
 fieldset-section {
+  input-submit {
+    input,
+    select {
+      &:first-child:not(:focus) {
+        border-right-color: transparent;
+      }
+    }
+
+    .button__content {
+      position: relative;
+      top: -0.1em;
+    }
+  }
+
+  select {
+    max-width: 12em;
+    background-color: $lbry-white;
+
+    [data-mode='dark'] & {
+      background-color: transparent;
+    }
+  }
+
   [data-mode='dark'] & {
     input,
     textarea,
@@ -85,25 +188,7 @@ fieldset-section {
     input:not(:focus):not(.form-field--copyable),
     textarea:not(:focus),
     select:not(:focus) {
-      border-color: $lbry-white;
+      border-color: $lbry-gray-4;
-    }
-
-    input-submit {
-      input,
-      select {
-        &:first-child:not(:focus) {
-          border-right-color: transparent;
-        }
-      }
-    }
-  }
-
-  select {
-    max-width: 12em;
-    background-color: $lbry-white;
-
-    [data-mode='dark'] & {
-      background-color: transparent;
     }
   }
 }
@@ -116,6 +201,7 @@ fieldset-section {
   padding: 0.2rem 0.75rem;
   text-overflow: ellipsis;
   user-select: text;
+  cursor: default;
 
   html[data-mode='dark'] & {
     background-color: rgba($lbry-white, 0.3);
@@ -129,9 +215,20 @@ label + .react-toggle,
   margin-left: var(--spacing-vertical-small);
 }
 
+.form-field--inline-prefix {
+  position: absolute;
+  top: 9.5em;
+  left: 2.75em;
+  width: auto;
+
+  & + input {
+    padding-left: 4em;
+  }
+}
+
 .form-field__help {
   @extend .help;
-  margin-top: var(--spacing-vertical-small);
+  margin-top: var(--spacing-vertical-medium);
 }
 
 .form-field--price-amount {

src/renderer/scss/component/_header.scss

@@ -111,6 +111,7 @@
 //   }
 // }
 
+// Publish button
 .header__navigation-item--right-action {
   display: flex;
   justify-content: center;
@@ -127,7 +128,7 @@
   }
 
   svg {
-    top: 0;
+    top: 0.1em;
   }
 
   &:not(:last-child) {

src/renderer/scss/component/_media.scss

@@ -6,6 +6,10 @@
   .media__title {
     margin-bottom: var(--spacing-vertical-small);
   }
+
+  .media__properties {
+    height: 1em;
+  }
 }
 
 //  M E D I A

src/renderer/scss/init/_gui.scss

@@ -143,7 +143,7 @@ code {
   background-color: $lbry-yellow-3;
   color: $lbry-black;
 
-  .button--link {
+  .button--link:not(:disabled) {
     // The normal colors we use for .button--link are too light for the warning background
     // This just darkens them a bit and adds an border-bottom so they are easier to see.
     $altered-color: mix($lbry-teal-5, $lbry-black, 80%);
@@ -204,6 +204,10 @@ code {
 
 .error-text {
   color: $lbry-red-5;
+
+  [data-mode='dark'] & {
+    color: $lbry-red-3;
+  }
 }
 
 .thumbnail-preview {

yarn.lock

@@ -111,10 +111,10 @@
   version "0.7.1"
   resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.1.tgz#e93c13942592cf5ef01aa8297444dc192beee52f"
 
-"@lbry/components@^2.2.0":
+"@lbry/components@^2.2.1":
-  version "2.2.0"
+  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/@lbry/components/-/components-2.2.0.tgz#ce9e7667f28be832014d8f29d12796ce514ce039"
+  resolved "https://registry.yarnpkg.com/@lbry/components/-/components-2.2.1.tgz#3fc67e807796e9dc8cd1d5cd86a719849c4710d5"
-  integrity sha512-AHzc3OZw6gtKESXm0IrGNMFLoJI2JJVDokRzoyHPOdYgLqqADqekC44u8dytGdPHixBo1kZKaoS2FTTXyZpqpw==
+  integrity sha512-k8bdSjr0Hq3+ZlvAKRuPea4LTEvXx4zF7+IOb1RmFWfMIk8jBNZi02LmvLoj4VuCa3mKoVfECeaYyXg6vwmY3w==
 
 "@mapbox/hast-util-table-cell-style@^0.1.3":
   version "0.1.3"
@@ -5660,9 +5660,9 @@ lazy-val@^1.0.3:
     tar-stream "^1.6.2"
     zstd-codec "^0.1.1"
 
-lbry-redux@lbryio/lbry-redux#2b725cb31729234ba73117e2a74688b8bba26e7c:
+lbry-redux@lbryio/lbry-redux#3ab065b11a52d3e2e6a50a25459f9ff0aac03b13:
   version "0.0.1"
-  resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/2b725cb31729234ba73117e2a74688b8bba26e7c"
+  resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/3ab065b11a52d3e2e6a50a25459f9ff0aac03b13"
   dependencies:
     proxy-polyfill "0.1.6"
     reselect "^3.0.0"