Merge pull request #2286 from lbryio/css

ui cleanup
2019-02-20 13:13:09 -05:00 · 2019-02-20 13:13:09 -05:00 · 81754ebe30
commit 81754ebe30
parent 999c7beef1 8c2bf13217
27 changed files with 339 additions and 205 deletions
--- a/package.json
+++ b/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",
--- a/src/renderer/component/channelTile/view.jsx
+++ b/src/renderer/component/channelTile/view.jsx
@ -45,8 +45,7 @@ class ChannelTile extends React.PureComponent<Props> {
      subscriptionUri = `lbry://${claim.permanent_url}`;
    }

-    const onClick = () =>
-      channelName ? navigate('/show', { uri, page: 1 }) : navigate('/show', { uri });
+    const onClick = () => navigate('/show', { uri });

    return (
      <section
--- a/src/renderer/component/common/form-components/form-field.jsx
+++ b/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>
        );
      }
--- a/src/renderer/component/fileActions/view.jsx
+++ b/src/renderer/component/fileActions/view.jsx
@ -36,11 +36,7 @@ class FileActions extends React.PureComponent<Props> {
        )}
        {!claimIsMine && (
          <Tooltip onComponent body={__('Report content')}>
-            <Button
-              button="alt"
-              icon={ICONS.REPORT}
-              href={`https://lbry.io/dmca?claim_id=${claimId}`}
-            />
+            <Button icon={ICONS.REPORT} href={`https://lbry.io/dmca?claim_id=${claimId}`} />
          </Tooltip>
        )}
      </React.Fragment>
--- a/src/renderer/component/fileList/view.jsx
+++ b/src/renderer/component/fileList/view.jsx
@ -162,8 +162,7 @@ class FileList extends React.PureComponent<Props> {
        {!hideFilter && (
          <Form>
            <FormField
-              prefix={__('Sort by')}
-              affixClass="form-field--align-center"
+              label={__('Sort by')}
              type="select"
              value={sortBy}
              onChange={this.handleSortChanged}
--- a/src/renderer/component/inviteNew/view.jsx
+++ b/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"
--- a/src/renderer/component/publishForm/internal/license-type.jsx
+++ b/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}
--- a/src/renderer/component/publishForm/internal/name-help-text.jsx
+++ b/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.')}{' '}
-            {uri && `${__('The uri for this name is')} ${uri}`}
+            {__('Create a URL for this content. Simpler names are easier to find and remember.')}
          </span>
        )}
      </React.Fragment>
--- a/src/renderer/component/publishForm/view.jsx
+++ b/src/renderer/component/publishForm/view.jsx
@ -440,26 +440,23 @@ class PublishForm extends React.PureComponent<Props> {
            </header>

            <div className="card__content">
-              <fieldset-section>
-                <FormField
-                  type="radio"
-                  name="content_free"
-                  label={__('Free')}
-                  checked={contentIsFree}
-                  disabled={formDisabled}
-                  onChange={() => updatePublishForm({ contentIsFree: true })}
-                />
-              </fieldset-section>
-              <fieldset-section>
-                <FormField
-                  type="radio"
-                  name="content_cost"
-                  label={__('Choose price')}
-                  checked={!contentIsFree}
-                  disabled={formDisabled}
-                  onChange={() => updatePublishForm({ contentIsFree: false })}
-                />
-              </fieldset-section>
+              <FormField
+                type="radio"
+                name="content_free"
+                label={__('Free')}
+                checked={contentIsFree}
+                disabled={formDisabled}
+                onChange={() => updatePublishForm({ contentIsFree: true })}
+              />
+
+              <FormField
+                type="radio"
+                name="content_cost"
+                label={__('Choose price')}
+                checked={!contentIsFree}
+                disabled={formDisabled}
+                onChange={() => updatePublishForm({ contentIsFree: false })}
+              />
              {!contentIsFree && (
                <FormFieldPrice
                  name="content_cost_amount"
@ -504,28 +501,31 @@ class PublishForm extends React.PureComponent<Props> {
            </header>

            <div className="card__content">
-              <FormField
-                label={__('Name')}
-                prefix={`lbry://${
-                  !channel || channel === CHANNEL_ANONYMOUS || channel === CHANNEL_NEW
-                    ? ''
-                    : `${channel}/`
-                }`}
-                type="text"
-                name="content_name"
-                placeholder="myname"
-                value={name}
-                onChange={event => this.handleNameChange(event.target.value)}
-                error={nameError}
-                helper={
-                  <NameHelpText
-                    isStillEditing={isStillEditing}
-                    uri={uri}
-                    myClaimForUri={myClaimForUri}
-                    onEditMyClaim={this.editExistingClaim}
-                  />
-                }
-              />
+              <fieldset-group class="fieldset-group--smushed fieldset-group--disabled-prefix">
+                <fieldset-section>
+                  <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"
+                  value={name}
+                  onChange={event => this.handleNameChange(event.target.value)}
+                  error={nameError}
+                />
+              </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}
--- a/src/renderer/component/searchOptions/view.jsx
+++ b/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}
--- a/src/renderer/component/selectChannel/view.jsx
+++ b/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')}
-              postfix="LBC"
+              name="channel-deposit"
+              label={__('Deposit (LBC)')}
              step="any"
              min="0"
              type="number"
--- a/src/renderer/component/transactionList/view.jsx
+++ b/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"
-                    prefix={__('Show')}
+                    label={__('Show')}
                    postfix={
                      <Button
                        button="link"
--- a/src/renderer/component/userHistory/view.jsx
+++ b/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>
--- a/src/renderer/component/userHistoryItem/view.jsx
+++ b/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
--- a/src/renderer/component/walletSendTip/view.jsx
+++ b/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"
--- a/src/renderer/modal/modalRemoveFile/view.jsx
+++ b/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}
--- a/src/renderer/modal/modalRewardCode/view.jsx
+++ b/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}
--- a/src/renderer/page/channel/view.jsx
+++ b/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,31 +108,36 @@ class ChannelPage extends React.PureComponent<Props> {

        {(!fetching || (claimsInChannel && claimsInChannel.length)) &&
          totalPages > 1 && (
-            <React.Fragment>
-              <ReactPaginate
-                pageCount={totalPages}
-                pageRangeDisplayed={2}
-                previousLabel="‹"
-                nextLabel="›"
-                activeClassName="pagination__item--selected"
-                pageClassName="pagination__item"
-                previousClassName="pagination__item pagination__item--previous"
-                nextClassName="pagination__item pagination__item--next"
-                breakClassName="pagination__item pagination__item--break"
-                marginPagesDisplayed={2}
-                onPageChange={e => this.changePage(e.selected + 1)}
-                forcePage={currentPage}
-                initialPage={currentPage}
-                containerClassName="pagination"
-              />
+            <Form>
+              <fieldset-group class="fieldset-group--smushed fieldgroup--paginate">
+                <fieldset-section>
+                  <ReactPaginate
+                    pageCount={totalPages}
+                    pageRangeDisplayed={2}
+                    previousLabel="‹"
+                    nextLabel="›"
+                    activeClassName="pagination__item--selected"
+                    pageClassName="pagination__item"
+                    previousClassName="pagination__item pagination__item--previous"
+                    nextClassName="pagination__item pagination__item--next"
+                    breakClassName="pagination__item pagination__item--break"
+                    marginPagesDisplayed={2}
+                    onPageChange={e => this.changePage(e.selected + 1)}
+                    forcePage={currentPage}
+                    initialPage={currentPage}
+                    containerClassName="pagination"
+                  />
+                </fieldset-section>

-              <FormField
-                className="paginate-channel"
-                onKeyUp={e => this.paginate(e, totalPages)}
-                prefix={__('Go to page:')}
-                type="text"
-              />
-            </React.Fragment>
+                <FormField
+                  className="paginate-channel"
+                  onKeyUp={e => this.paginate(e, totalPages)}
+                  label={__('Go to page:')}
+                  type="text"
+                  name="paginate-file"
+                />
+              </fieldset-group>
+            </Form>
          )}

        {!channelIsMine && <HiddenNsfwClaims className="card__content help" uri={uri} />}
--- a/src/renderer/page/help/view.jsx
+++ b/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>
--- a/src/renderer/page/settings/view.jsx
+++ b/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,29 +183,25 @@ class SettingsPage extends React.PureComponent<Props, State> {
              </header>

              <Form className="card__content">
-                <fieldset-section>
-                  <FormField
-                    type="radio"
-                    name="no_max_purchase_no_limit"
-                    checked={disableMaxKeyFee}
-                    label={__('No Limit')}
-                    onChange={() => {
-                      this.onKeyFeeDisableChange(true);
-                    }}
-                  />
-                </fieldset-section>
-                <fieldset-section>
-                  <FormField
-                    type="radio"
-                    name="max_purchase_limit"
-                    checked={!disableMaxKeyFee}
-                    onChange={() => {
-                      this.onKeyFeeDisableChange(false);
-                      this.onKeyFeeChange(defaultMaxKeyFee);
-                    }}
-                    label={__('Choose limit')}
-                  />
-                </fieldset-section>
+                <FormField
+                  type="radio"
+                  name="no_max_purchase_no_limit"
+                  checked={disableMaxKeyFee}
+                  label={__('No Limit')}
+                  onChange={() => {
+                    this.onKeyFeeDisableChange(true);
+                  }}
+                />
+                <FormField
+                  type="radio"
+                  name="max_purchase_limit"
+                  checked={!disableMaxKeyFee}
+                  onChange={() => {
+                    this.onKeyFeeDisableChange(false);
+                    this.onKeyFeeChange(defaultMaxKeyFee);
+                  }}
+                  label={__('Choose limit')}
+                />

                {!disableMaxKeyFee && (
                  <FormFieldPrice
@ -229,28 +227,25 @@ class SettingsPage extends React.PureComponent<Props, State> {
              </header>

              <Form className="card__content">
-                <fieldset-section>
-                  <FormField
-                    type="radio"
-                    name="confirm_all_purchases"
-                    checked={!instantPurchaseEnabled}
-                    label={__('Always confirm before purchasing content')}
-                    onChange={() => {
-                      this.onInstantPurchaseEnabledChange(false);
-                    }}
-                  />
-                </fieldset-section>
-                <fieldset-section>
-                  <FormField
-                    type="radio"
-                    name="instant_purchases"
-                    checked={instantPurchaseEnabled}
-                    label={__('Only confirm purchases over a certain price')}
-                    onChange={() => {
-                      this.onInstantPurchaseEnabledChange(true);
-                    }}
-                  />
-                </fieldset-section>
+                <FormField
+                  type="radio"
+                  name="confirm_all_purchases"
+                  checked={!instantPurchaseEnabled}
+                  label={__('Always confirm before purchasing content')}
+                  onChange={() => {
+                    this.onInstantPurchaseEnabledChange(false);
+                  }}
+                />
+                <FormField
+                  type="radio"
+                  name="instant_purchases"
+                  checked={instantPurchaseEnabled}
+                  label={__('Only confirm purchases over a certain price')}
+                  onChange={() => {
+                    this.onInstantPurchaseEnabledChange(true);
+                  }}
+                />
+
                {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>
--- a/src/renderer/scss/component/_button.scss
+++ b/src/renderer/scss/component/_button.scss
@ -8,11 +8,12 @@
    width: 1.2rem;
    height: 1.2rem;
    position: relative;
-    top: 2px;
-    stroke-opacity: 0.7;
+    top: 1px;
+    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,9 +81,15 @@
    }
  }
 }
-.button--link:not(:hover):not(:disabled) {
+.button--link:not(:disabled) {
  html[data-mode='dark'] & {
-    color: $lbry-teal-4;
+    &:not(:hover) {
+      color: $lbry-teal-4;
+    }
+
+    &:hover {
+      color: $lbry-teal-3;
+    }
  }
 }

@ -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 {
--- a/src/renderer/scss/component/_channel.scss
+++ b/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);
  }
--- a/src/renderer/scss/component/_form-field.scss
+++ b/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,48 +58,126 @@ radio-element {
      }
    }
  }
+
+  label {
+    margin-bottom: 0;
+  }
 }

-fieldset-group.fieldset-group--smushed {
-  justify-content: flex-start;
+fieldset-group {
+  &.fieldset-group--smushed {
+    justify-content: flex-start;

-  fieldset-section {
-    width: auto;
-    margin-bottom: 0;
+    fieldset-section {
+      width: auto;
+      margin-bottom: 0;

-    &:first-of-type {
-      input {
-        border-right: none;
+      &:first-of-type {
+        input {
+          border-right: none;
+        }
+      }
+    }
+
+    &.fieldgroup--paginate {
+      margin-top: var(--spacing-vertical-medium);
+      align-items: center;
+      justify-content: center;
+
+      .pagination {
+        margin-bottom: -1em;
      }
    }
  }

-  &.fieldgroup--paginate {
-    margin-top: var(--spacing-vertical-medium);
-    align-items: center;
-    justify-content: center;
+  // 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;

-    .pagination {
-      margin-bottom: -1em;
+    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'] & {
-    .button--primary:not(:hover) {
-      background-color: $lbry-teal-5;
-      border-color: $lbry-teal-5;
-    }
+  // [data-mode='dark'] & {
+  .button--primary:not(:hover) {
+    background-color: $lbry-teal-5;
+    border-color: $lbry-teal-5;

-    legend {
-      background-color: $lbry-cyan-5;
+    &:hover {
+      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;
-    }
-
-    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;
+      border-color: $lbry-gray-4;
    }
  }
 }
@ -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 {
--- a/src/renderer/scss/component/_header.scss
+++ b/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) {
--- a/src/renderer/scss/component/_media.scss
+++ b/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
--- a/src/renderer/scss/init/_gui.scss
+++ b/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 {
--- a/yarn.lock
+++ b/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":
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/@lbry/components/-/components-2.2.0.tgz#ce9e7667f28be832014d8f29d12796ce514ce039"
-  integrity sha512-AHzc3OZw6gtKESXm0IrGNMFLoJI2JJVDokRzoyHPOdYgLqqADqekC44u8dytGdPHixBo1kZKaoS2FTTXyZpqpw==
+"@lbry/components@^2.2.1":
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/@lbry/components/-/components-2.2.1.tgz#3fc67e807796e9dc8cd1d5cd86a719849c4710d5"
+  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"