From e49ad6a4bb44bca3a00c6171425c907de8995582 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean.yesmunt@gmail.com>
Date: Tue, 6 Feb 2018 01:31:47 -0800
Subject: [PATCH] implement settings redesign

---
 .../component/common/file-selector.jsx        |  72 +++
 .../form-components/form-field-price.jsx      |  78 +++
 .../common/form-components/form-field.jsx     |  61 ++
 .../common/form-components/form-row.jsx       |  32 +
 .../component/common/form-components/form.jsx |  26 +
 .../common/form-components/submit.jsx         |  21 +
 src/renderer/component/common/form.jsx        | 100 +--
 src/renderer/component/file-selector.js       |  83 ---
 src/renderer/component/fileActions/view.jsx   |   3 +-
 src/renderer/component/fileCard/view.jsx      |   2 +-
 src/renderer/component/formField/view.jsx     |   2 +-
 .../component/formFieldPrice/view.jsx         |  62 +-
 src/renderer/component/nsfwOverlay/view.jsx   |  10 +-
 src/renderer/component/walletSend/view.jsx    |  12 +-
 src/renderer/component/wunderbar/view.jsx     |   1 +
 src/renderer/page/settings/index.js           |   5 +-
 src/renderer/page/settings/view.jsx           | 568 +++++++++---------
 src/renderer/scss/_gui.scss                   |  25 +-
 src/renderer/scss/all.scss                    |   1 -
 src/renderer/scss/component/_button.scss      |   4 +-
 src/renderer/scss/component/_card.scss        |  21 +-
 .../scss/component/_file-selector.scss        |  23 -
 src/renderer/scss/component/_form-field.scss  |  36 +-
 src/renderer/scss/component/_nav.scss         |   2 +-
 24 files changed, 642 insertions(+), 608 deletions(-)
 create mode 100644 src/renderer/component/common/file-selector.jsx
 create mode 100644 src/renderer/component/common/form-components/form-field-price.jsx
 create mode 100644 src/renderer/component/common/form-components/form-field.jsx
 create mode 100644 src/renderer/component/common/form-components/form-row.jsx
 create mode 100644 src/renderer/component/common/form-components/form.jsx
 create mode 100644 src/renderer/component/common/form-components/submit.jsx
 delete mode 100644 src/renderer/component/file-selector.js
 delete mode 100644 src/renderer/scss/component/_file-selector.scss

diff --git a/src/renderer/component/common/file-selector.jsx b/src/renderer/component/common/file-selector.jsx
new file mode 100644
index 000000000..0858b488d
--- /dev/null
+++ b/src/renderer/component/common/file-selector.jsx
@@ -0,0 +1,72 @@
+// @flow
+import React from 'react';
+import { remote } from 'electron';
+import Button from 'component/link';
+import { FormRow } from 'component/common/form';
+
+type Props = {
+  type: string,
+  currentPath: string,
+  onFileChosen: string => void,
+};
+
+class FileSelector extends React.PureComponent<Props> {
+  static defaultProps = {
+    type: 'file',
+  };
+
+  constructor() {
+    super();
+    this.input = null;
+  }
+
+  handleButtonClick() {
+    remote.dialog.showOpenDialog(
+      {
+        properties:
+          this.props.type === 'file' ? ['openFile'] : ['openDirectory', 'createDirectory'],
+      },
+      paths => {
+        if (!paths) {
+          // User hit cancel, so do nothing
+          return;
+        }
+
+        const path = paths[0];
+        if (this.props.onFileChosen) {
+          this.props.onFileChosen(path);
+        }
+      }
+    );
+  }
+
+  input: ?HTMLInputElement;
+
+  render() {
+    const { type, currentPath } = this.props;
+
+    return (
+      <FormRow verticallyCentered padded>
+        <Button
+          onClick={() => this.handleButtonClick()}
+          label={type === 'file' ? __('Choose File') : __('Choose Directory')}
+        />
+        <input
+          webkitdirectory="true"
+          className="input-copyable"
+          type="text"
+          ref={input => {
+            if (this.input) this.input = input;
+          }}
+          onFocus={() => {
+            if (this.input) this.input.select();
+          }}
+          readOnly="readonly"
+          value={currentPath || __('No File Chosen')}
+        />
+      </FormRow>
+    );
+  }
+}
+
+export default FileSelector;
diff --git a/src/renderer/component/common/form-components/form-field-price.jsx b/src/renderer/component/common/form-components/form-field-price.jsx
new file mode 100644
index 000000000..4258d29f6
--- /dev/null
+++ b/src/renderer/component/common/form-components/form-field-price.jsx
@@ -0,0 +1,78 @@
+// @flow
+import * as React from 'react';
+import type { Price } from 'page/settings';
+import { FormField } from './form-field';
+import { FormRow } from './form-row';
+
+type Props = {
+  price: Price,
+  onChange: Price => void,
+  placeholder: number,
+  min: number,
+  disabled: boolean,
+  name: string,
+  label: string,
+};
+
+export class FormFieldPrice extends React.PureComponent<Props> {
+  constructor(props: Props) {
+    super(props);
+
+    (this: any).handleAmountChange = this.handleAmountChange.bind(this);
+    (this: any).handleCurrencyChange = this.handleCurrencyChange.bind(this);
+  }
+
+  handleAmountChange(event: SyntheticInputEvent<*>) {
+    const { price, onChange } = this.props;
+    onChange({
+      currency: price.currency,
+      amount: parseInt(event.target.value, 10),
+    });
+  }
+
+  handleCurrencyChange(event: SyntheticInputEvent<*>) {
+    const { price, onChange } = this.props;
+    onChange({
+      currency: event.target.value,
+      amount: price.amount,
+    });
+  }
+
+  render() {
+    const { price, placeholder, min, disabled, name, label } = this.props;
+
+    return (
+      <FormRow padded>
+        <FormField
+          name={`${name}_amount`}
+          label={label}
+          type="number"
+          className="form-field input--price-amount"
+          min={min}
+          value={price.amount || ''}
+          onChange={this.handleAmountChange}
+          placeholder={placeholder || 5}
+          disabled={disabled}
+        />
+
+        <FormField
+          name={`${name}_currency`}
+          render={() => (
+            <select
+              id={`${name}_currency`}
+              className="form-field"
+              disabled={disabled}
+              onChange={this.handleCurrencyChange}
+              defaultValue={price.currency}
+            >
+              <option value="LBC">{__('LBRY Credits (LBC)')}</option>
+              <option value="USD">{__('US Dollars')}</option>
+            </select>
+          )}
+        />
+      </FormRow>
+    );
+  }
+}
+
+export default FormFieldPrice;
diff --git a/src/renderer/component/common/form-components/form-field.jsx b/src/renderer/component/common/form-components/form-field.jsx
new file mode 100644
index 000000000..ddea3f400
--- /dev/null
+++ b/src/renderer/component/common/form-components/form-field.jsx
@@ -0,0 +1,61 @@
+// @flow
+import * as React from 'react';
+
+type Props = {
+  name: string,
+  label?: string,
+  render?: () => React.Node,
+  prefix?: string,
+  postfix?: string,
+  error?: string | boolean,
+  helper?: string | React.Node,
+  type?: string,
+  onChange?: any => any,
+  defaultValue?: string | number,
+  placeholder?: string | number,
+};
+
+export class FormField extends React.PureComponent<Props> {
+  render() {
+    const { render, label, prefix, postfix, error, helper, name, type, ...inputProps } = this.props;
+
+    // Allow a type prop to determine the input or more customizability with a render prop
+    let Input;
+    if (type) {
+      Input = () => <input type={type} id={name} {...inputProps} />;
+    } else if (render) {
+      Input = render;
+    }
+
+    return (
+      <div className="form-field">
+        {label && (
+          <label className="form-field__label" htmlFor={name}>
+            {label}
+          </label>
+        )}
+        <div className="form-field__input">
+          {prefix && (
+            <label htmlFor={name} className="form-field__prefix">
+              {prefix}
+            </label>
+          )}
+          {Input && <Input />}
+          {postfix && (
+            <label htmlFor={name} className="form-field__postfix">
+              {postfix}
+            </label>
+          )}
+        </div>
+        {error && (
+          <div className="form-field__error">
+            {typeof error === 'string' ? error : __('There was an error')}
+          </div>
+        )}
+        {helper && <div className="form-field__help">{helper}</div>}
+      </div>
+    );
+  }
+}
+
+export default FormField;
diff --git a/src/renderer/component/common/form-components/form-row.jsx b/src/renderer/component/common/form-components/form-row.jsx
new file mode 100644
index 000000000..5fc32169a
--- /dev/null
+++ b/src/renderer/component/common/form-components/form-row.jsx
@@ -0,0 +1,32 @@
+// @flow
+// Used as a wrapper for FormField to produce inline form elements
+import * as React from 'react';
+import classnames from 'classnames';
+
+type Props = {
+  children: React.Node,
+  padded?: boolean,
+  verticallyCentered?: boolean,
+};
+
+export class FormRow extends React.PureComponent<Props> {
+  static defaultProps = {
+    padded: false,
+  };
+
+  render() {
+    const { children, padded, verticallyCentered } = this.props;
+    return (
+      <div
+        className={classnames('form-row', {
+          'form-row--padded': padded,
+          'form-row--centered': verticallyCentered,
+        })}
+      >
+        {children}
+      </div>
+    );
+  }
+}
+
+export default FormRow;
diff --git a/src/renderer/component/common/form-components/form.jsx b/src/renderer/component/common/form-components/form.jsx
new file mode 100644
index 000000000..72e4d25af
--- /dev/null
+++ b/src/renderer/component/common/form-components/form.jsx
@@ -0,0 +1,26 @@
+// @flow
+import * as React from 'react';
+
+type Props = {
+  children: React.Node,
+  onSubmit: any => any,
+};
+
+export class Form extends React.PureComponent<Props> {
+  render() {
+    const { children, onSubmit } = this.props;
+    return (
+      <form
+        className="form"
+        onSubmit={event => {
+          event.preventDefault();
+          onSubmit(event);
+        }}
+      >
+        {children}
+      </form>
+    );
+  }
+}
+
+export default Form;
diff --git a/src/renderer/component/common/form-components/submit.jsx b/src/renderer/component/common/form-components/submit.jsx
new file mode 100644
index 000000000..c864a2b33
--- /dev/null
+++ b/src/renderer/component/common/form-components/submit.jsx
@@ -0,0 +1,21 @@
+// @flow
+import * as React from 'react';
+import Button from 'component/link';
+
+type Props = {
+  label: string,
+  disabled: boolean,
+};
+
+export class Submit extends React.PureComponent<Props> {
+  static defaultProps = {
+    label: 'Submit',
+  };
+
+  render() {
+    const { label, disabled } = this.props;
+    return <Button type="submit" label={label} disabled={disabled} />;
+  }
+}
+
+export default Submit;
diff --git a/src/renderer/component/common/form.jsx b/src/renderer/component/common/form.jsx
index c422e4b7f..796a17f61 100644
--- a/src/renderer/component/common/form.jsx
+++ b/src/renderer/component/common/form.jsx
@@ -1,95 +1,5 @@
-// @flow
-/* eslint-disable react/no-multi-comp */
-import * as React from 'react';
-import Button from 'component/link';
-import classnames from 'classnames';
-
-type FormRowProps = {
-  children: React.Node,
-  padded?: boolean,
-};
-
-export class FormRow extends React.PureComponent<FormRowProps> {
-  static defaultProps = {
-    padded: false,
-  };
-
-  render() {
-    const { children, padded } = this.props;
-    return <div className={classnames('form-row', { 'form-row--padded': padded })}>{children}</div>;
-  }
-}
-
-type FormFieldProps = {
-  render: () => React.Node,
-  label?: string,
-  prefix?: string,
-  postfix?: string,
-  error?: string | boolean,
-  helper?: string | React.Node,
-};
-
-export class FormField extends React.PureComponent<FormFieldProps> {
-  render() {
-    const { render, label, prefix, postfix, error, helper } = this.props;
-    /* eslint-disable jsx-a11y/label-has-for */
-    // Will come back to this on the settings page
-    // Need htmlFor on the label
-    return (
-      <div className="form-field">
-        {label && <label className="form-field__label">{label}</label>}
-        <div className="form-field__wrapper">
-          {prefix && <span className="form-field__prefix">{prefix}</span>}
-          {render()}
-          {postfix && <span className="form-field__postfix">{postfix}</span>}
-        </div>
-        {error && (
-          <div className="form-field__error">
-            {typeof error === 'string' ? error : __('There was an error')}
-          </div>
-        )}
-        {helper && <div className="form-field__help">{helper}</div>}
-      </div>
-    );
-    /* eslint-enable jsx-a11y/label-has-for */
-  }
-}
-
-type SubmitProps = {
-  label: string,
-  disabled: boolean,
-};
-
-export class Submit extends React.PureComponent<SubmitProps> {
-  static defaultProps = {
-    label: 'Submit',
-  };
-
-  render() {
-    const { label, disabled } = this.props;
-    return <Button type="submit" label={label} disabled={disabled} />;
-  }
-}
-
-type FormProps = {
-  children: React.Node,
-  onSubmit: any => any,
-};
-
-export class Form extends React.PureComponent<FormProps> {
-  render() {
-    const { children, onSubmit } = this.props;
-    return (
-      <form
-        className="form"
-        onSubmit={event => {
-          event.preventDefault();
-          onSubmit(event);
-        }}
-      >
-        {children}
-      </form>
-    );
-  }
-}
-/* eslint-enable react/no-multi-comp */
+export { Form } from './form-components/form';
+export { FormRow } from './form-components/form-row';
+export { FormField } from './form-components/form-field';
+export { FormFieldPrice } from './form-components/form-field-price';
+export { Submit } from './form-components/submit';
diff --git a/src/renderer/component/file-selector.js b/src/renderer/component/file-selector.js
deleted file mode 100644
index 18284268b..000000000
--- a/src/renderer/component/file-selector.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const { remote } = require('electron');
-
-class FileSelector extends React.PureComponent {
-  static propTypes = {
-    type: PropTypes.oneOf(['file', 'directory']),
-    initPath: PropTypes.string,
-    onFileChosen: PropTypes.func,
-  };
-
-  static defaultProps = {
-    type: 'file',
-  };
-
-  constructor(props) {
-    super(props);
-    this._inputElem = null;
-  }
-
-  componentWillMount() {
-    this.setState({
-      path: this.props.initPath || null,
-    });
-  }
-
-  handleButtonClick() {
-    remote.dialog.showOpenDialog(
-      {
-        properties: this.props.type == 'file' ? ['openFile'] : ['openDirectory', 'createDirectory'],
-      },
-      paths => {
-        if (!paths) {
-          // User hit cancel, so do nothing
-          return;
-        }
-
-        const path = paths[0];
-        this.setState({
-          path,
-        });
-        if (this.props.onFileChosen) {
-          this.props.onFileChosen(path);
-        }
-      }
-    );
-  }
-
-  render() {
-    return (
-      <div className="file-selector">
-        <button
-          type="button"
-          className="button-block button-alt file-selector__choose-button"
-          onClick={() => this.handleButtonClick()}
-        >
-          <span className="button__content">
-            <span className="button-label">
-              {this.props.type == 'file' ? __('Choose File') : __('Choose Directory')}
-            </span>
-          </span>
-        </button>{' '}
-        <span className="file-selector__path">
-          <input
-            className="input-copyable"
-            type="text"
-            ref={input => {
-              this._inputElem = input;
-            }}
-            onFocus={() => {
-              this._inputElem.select();
-            }}
-            readOnly="readonly"
-            value={this.state.path || __('No File Chosen')}
-          />
-        </span>
-      </div>
-    );
-  }
-}
-
-export default FileSelector;
diff --git a/src/renderer/component/fileActions/view.jsx b/src/renderer/component/fileActions/view.jsx
index 1d1dcbf71..fef714b4b 100644
--- a/src/renderer/component/fileActions/view.jsx
+++ b/src/renderer/component/fileActions/view.jsx
@@ -22,9 +22,8 @@ class FileActions extends React.PureComponent<Props> {
     const { fileInfo, uri, openModal, claimIsMine, vertical } = this.props;
 
     const claimId = fileInfo ? fileInfo.claim_id : '';
-    // showDelete = fileInfo && Object.keys(fileInfo).length > 0;
+    const showDelete = fileInfo && Object.keys(fileInfo).length > 0;
 
-    const showDelete = true;
     return (
       <section className={classnames('card__actions', { 'card__actions--vertical': vertical })}>
         <FileDownloadLink uri={uri} />
diff --git a/src/renderer/component/fileCard/view.jsx b/src/renderer/component/fileCard/view.jsx
index b7a72bb99..a30bbdacb 100644
--- a/src/renderer/component/fileCard/view.jsx
+++ b/src/renderer/component/fileCard/view.jsx
@@ -95,7 +95,7 @@ class FileCard extends React.PureComponent<Props> {
             </div>
           </div>
         </div>
-        {obscureNsfw && <NsfwOverlay />}
+        {shouldObscureNsfw && <NsfwOverlay />}
       </section>
     );
     /* eslint-enable jsx-a11y/click-events-have-key-events */
diff --git a/src/renderer/component/formField/view.jsx b/src/renderer/component/formField/view.jsx
index 0ce16256f..9d8dca9ec 100644
--- a/src/renderer/component/formField/view.jsx
+++ b/src/renderer/component/formField/view.jsx
@@ -2,7 +2,7 @@
 /* eslint-disable */
 import React from 'react';
 import PropTypes from 'prop-types';
-import FileSelector from 'component/file-selector.js';
+import FileSelector from 'component/common/file-selector';
 import SimpleMDE from 'react-simplemde-editor';
 import { formFieldNestedLabelTypes, formFieldId } from 'component/common/form';
 import style from 'react-simplemde-editor/dist/simplemde.min.css';
diff --git a/src/renderer/component/formFieldPrice/view.jsx b/src/renderer/component/formFieldPrice/view.jsx
index 71382bb47..405e9b8ce 100644
--- a/src/renderer/component/formFieldPrice/view.jsx
+++ b/src/renderer/component/formFieldPrice/view.jsx
@@ -1,63 +1,5 @@
-import React from 'react';
-import FormField from 'component/formField';
+// This just exists so the app builds. It will be removed
 
-class FormFieldPrice extends React.PureComponent {
-  constructor(props) {
-    super(props);
-    this.state = {
-      amount: props.defaultValue && props.defaultValue.amount ? props.defaultValue.amount : '',
-      currency:
-        props.defaultValue && props.defaultValue.currency ? props.defaultValue.currency : 'LBC',
-    };
-  }
-
-  handleChange(newValues) {
-    const newState = Object.assign({}, this.state, newValues);
-    this.setState(newState);
-    this.props.onChange({
-      amount: newState.amount,
-      currency: newState.currency,
-    });
-  }
-
-  handleFeeAmountChange(event) {
-    this.handleChange({
-      amount: event.target.value ? Number(event.target.value) : null,
-    });
-  }
-
-  handleFeeCurrencyChange(event) {
-    this.handleChange({ currency: event.target.value });
-  }
-
-  render() {
-    const { defaultValue, placeholder, min } = this.props;
-
-    return (
-      <span className="form-field">
-        <FormField
-          type="number"
-          name="amount"
-          min={min}
-          placeholder={placeholder || null}
-          step="any" // Unfortunately, you cannot set a step without triggering validation that enforces a multiple of the step
-          onChange={event => this.handleFeeAmountChange(event)}
-          defaultValue={defaultValue && defaultValue.amount ? defaultValue.amount : ''}
-          className="form-field__input--inline"
-        />
-        <FormField
-          type="select"
-          name="currency"
-          onChange={event => this.handleFeeCurrencyChange(event)}
-          defaultValue={defaultValue && defaultValue.currency ? defaultValue.currency : ''}
-          className="form-field__input--inline"
-        >
-          <option value="LBC">{__('LBRY Credits (LBC)')}</option>
-          <option value="USD">{__('US Dollars')}</option>
-        </FormField>
-      </span>
-    );
-  }
-}
+const FormFieldPrice = () => null;
 
 export default FormFieldPrice;
diff --git a/src/renderer/component/nsfwOverlay/view.jsx b/src/renderer/component/nsfwOverlay/view.jsx
index c89fe6da9..c3ab332dd 100644
--- a/src/renderer/component/nsfwOverlay/view.jsx
+++ b/src/renderer/component/nsfwOverlay/view.jsx
@@ -1,15 +1,11 @@
 import React from 'react';
-import Link from 'component/link';
+import Button from 'component/link';
 
-const NsfwOverlay = props => (
+const NsfwOverlay = () => (
   <div className="card-overlay">
     <p>
       {__('This content is Not Safe For Work. To view adult content, please change your')}{' '}
-      <Link
-        className="button-text"
-        onClick={() => props.navigateSettings()}
-        label={__('Settings')}
-      />.
+      <Button fakeLink navigate="/settings" label={__('settings')} />.
     </p>
   </div>
 );
diff --git a/src/renderer/component/walletSend/view.jsx b/src/renderer/component/walletSend/view.jsx
index dce943b8a..ec1114202 100644
--- a/src/renderer/component/walletSend/view.jsx
+++ b/src/renderer/component/walletSend/view.jsx
@@ -40,15 +40,7 @@ class WalletSend extends React.PureComponent<Props> {
             }}
             onSubmit={this.handleSubmit}
             validate={validateSendTx}
-            render={({
-              values,
-              errors,
-              touched,
-              handleChange,
-              handleBlur,
-              handleSubmit,
-              isSubmitting,
-            }) => (
+            render={({ values, errors, touched, handleChange, handleBlur, handleSubmit }) => (
               <Form onSubmit={handleSubmit}>
                 <FormRow>
                   <FormField
@@ -57,7 +49,7 @@ class WalletSend extends React.PureComponent<Props> {
                     error={!!values.amount && touched.amount && errors.amount}
                     render={() => (
                       <input
-                        className="input--lbc-amount"
+                        className="input--price-amount"
                         type="number"
                         name="amount"
                         min="0"
diff --git a/src/renderer/component/wunderbar/view.jsx b/src/renderer/component/wunderbar/view.jsx
index 2ba5388a2..bef705d66 100644
--- a/src/renderer/component/wunderbar/view.jsx
+++ b/src/renderer/component/wunderbar/view.jsx
@@ -74,6 +74,7 @@ class WunderBar extends React.PureComponent<Props> {
 
   input: ?HTMLInputElement;
   throttledGetSearchSuggestions: string => void;
+
   render() {
     const { searchQuery, isActive, address, suggestions } = this.props;
 
diff --git a/src/renderer/page/settings/index.js b/src/renderer/page/settings/index.js
index ca277df82..e4f4ff930 100644
--- a/src/renderer/page/settings/index.js
+++ b/src/renderer/page/settings/index.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import { connect } from 'react-redux';
 import * as settings from 'constants/settings';
 import { doClearCache } from 'redux/actions/app';
@@ -6,7 +5,6 @@ import {
   doSetDaemonSetting,
   doSetClientSetting,
   doGetThemes,
-  doSetTheme,
   doChangeLanguage,
 } from 'redux/actions/settings';
 import {
@@ -23,8 +21,7 @@ const select = state => ({
   showUnavailable: makeSelectClientSetting(settings.SHOW_UNAVAILABLE)(state),
   instantPurchaseEnabled: makeSelectClientSetting(settings.INSTANT_PURCHASE_ENABLED)(state),
   instantPurchaseMax: makeSelectClientSetting(settings.INSTANT_PURCHASE_MAX)(state),
-  showUnavailable: makeSelectClientSetting(settings.SHOW_UNAVAILABLE)(state),
-  theme: makeSelectClientSetting(settings.THEME)(state),
+  currentTheme: makeSelectClientSetting(settings.THEME)(state),
   themes: makeSelectClientSetting(settings.THEMES)(state),
   language: selectCurrentLanguage(state),
   languages: selectLanguages(state),
diff --git a/src/renderer/page/settings/view.jsx b/src/renderer/page/settings/view.jsx
index 84c7a80bf..78960140c 100644
--- a/src/renderer/page/settings/view.jsx
+++ b/src/renderer/page/settings/view.jsx
@@ -1,19 +1,112 @@
-import React from 'react';
-import FormField from 'component/formField';
-import { FormRow } from 'component/common/form';
+// @flow
+import * as React from 'react';
+import { FormField, FormFieldPrice } from 'component/common/form';
 import * as settings from 'constants/settings';
-import lbry from 'lbry.js';
-import Link from 'component/link';
-import FormFieldPrice from 'component/formFieldPrice';
+import Button from 'component/link';
 import Page from 'component/page';
+import FileSelector from 'component/common/file-selector';
 
-class SettingsPage extends React.PureComponent {
-  constructor(props) {
+export type Price = {
+  currency: string,
+  amount: number,
+};
+
+type DaemonSettings = {
+  download_directory: string,
+  disable_max_key_fee: boolean,
+  share_usage_data: boolean,
+};
+
+type Props = {
+  setDaemonSetting: (string, boolean | string | Price) => void,
+  setClientSetting: (string, boolean | string | Price) => void,
+  clearCache: () => Promise<any>,
+  getThemes: () => void,
+  daemonSettings: DaemonSettings,
+  showNsfw: boolean,
+  instantPurchaseEnabled: boolean,
+  instantPurchaseMax: Price,
+  showUnavailable: boolean,
+  currentTheme: string,
+  themes: Array<string>,
+  automaticDarkModeEnabled: boolean,
+};
+
+type State = {
+  clearingCache: boolean,
+};
+
+class SettingsPage extends React.PureComponent<Props, State> {
+  constructor(props: Props) {
     super(props);
 
     this.state = {
       clearingCache: false,
     };
+
+    (this: any).onDownloadDirChange = this.onDownloadDirChange.bind(this);
+    (this: any).onKeyFeeChange = this.onKeyFeeChange.bind(this);
+    (this: any).onInstantPurchaseMaxChange = this.onInstantPurchaseMaxChange.bind(this);
+    (this: any).onShowNsfwChange = this.onShowNsfwChange.bind(this);
+    (this: any).onShowUnavailableChange = this.onShowUnavailableChange.bind(this);
+    (this: any).onShareDataChange = this.onShareDataChange.bind(this);
+    (this: any).onThemeChange = this.onThemeChange.bind(this);
+    (this: any).onAutomaticDarkModeChange = this.onAutomaticDarkModeChange.bind(this);
+    (this: any).clearCache = this.clearCache.bind(this);
+    // (this: any).onLanguageChange = this.onLanguageChange.bind(this)
+  }
+
+  componentDidMount() {
+    this.props.getThemes();
+  }
+
+  onRunOnStartChange(event: SyntheticInputEvent<*>) {
+    this.setDaemonSetting('run_on_startup', event.target.checked);
+  }
+
+  onShareDataChange(event: SyntheticInputEvent<*>) {
+    this.setDaemonSetting('share_usage_data', event.target.checked);
+  }
+
+  onDownloadDirChange(newDirectory: string) {
+    this.setDaemonSetting('download_directory', newDirectory);
+  }
+
+  onKeyFeeChange(newValue: Price) {
+    this.setDaemonSetting('max_key_fee', newValue);
+  }
+
+  onKeyFeeDisableChange(isDisabled: boolean) {
+    this.setDaemonSetting('disable_max_key_fee', isDisabled);
+  }
+
+  onThemeChange(event: SyntheticInputEvent<*>) {
+    const { value } = event.target;
+    this.props.setClientSetting(settings.THEME, value);
+  }
+
+  onAutomaticDarkModeChange(event: SyntheticInputEvent<*>) {
+    this.props.setClientSetting(settings.AUTOMATIC_DARK_MODE_ENABLED, event.target.checked);
+  }
+
+  onInstantPurchaseEnabledChange(enabled: boolean) {
+    this.props.setClientSetting(settings.INSTANT_PURCHASE_ENABLED, enabled);
+  }
+
+  onInstantPurchaseMaxChange(newValue: Price) {
+    this.props.setClientSetting(settings.INSTANT_PURCHASE_MAX, newValue);
+  }
+
+  onShowNsfwChange(event: SyntheticInputEvent<*>) {
+    this.props.setClientSetting(settings.SHOW_NSFW, event.target.checked);
+  }
+
+  onShowUnavailableChange(event: SyntheticInputEvent<*>) {
+    this.props.setClientSetting(settings.SHOW_UNAVAILABLE, event.target.checked);
+  }
+
+  setDaemonSetting(name: string, value: boolean | string | Price) {
+    this.props.setDaemonSetting(name, value);
   }
 
   clearCache() {
@@ -24,329 +117,206 @@ class SettingsPage extends React.PureComponent {
       this.setState({ clearingCache: false });
       window.location.href = 'index.html';
     };
-    const clear = () => this.props.clearCache().then(success.bind(this));
+    const clear = () => this.props.clearCache().then(success);
 
     setTimeout(clear, 1000, { once: true });
   }
 
-  setDaemonSetting(name, value) {
-    this.props.setDaemonSetting(name, value);
-  }
-
-  onRunOnStartChange(event) {
-    this.setDaemonSetting('run_on_startup', event.target.checked);
-  }
-
-  onShareDataChange(event) {
-    this.setDaemonSetting('share_usage_data', event.target.checked);
-  }
-
-  onDownloadDirChange(event) {
-    this.setDaemonSetting('download_directory', event.target.value);
-  }
-
-  onKeyFeeChange(newValue) {
-    const setting = newValue;
-
-    // this is stupid and should be fixed... somewhere
-    if (setting && (setting.amount === undefined || setting.amount === null)) {
-      setting.amount = 0;
-    }
-
-    this.setDaemonSetting('max_key_fee', setting);
-  }
-
-  onKeyFeeDisableChange(isDisabled) {
-    this.setDaemonSetting('disable_max_key_fee', isDisabled);
-  }
-
-  onThemeChange(event) {
-    const { value } = event.target;
-    this.props.setClientSetting(settings.THEME, value);
-  }
-
-  onAutomaticDarkModeChange(event) {
-    this.props.setClientSetting(settings.AUTOMATIC_DARK_MODE_ENABLED, event.target.checked);
-  }
-
-  onInstantPurchaseEnabledChange(enabled) {
-    this.props.setClientSetting(settings.INSTANT_PURCHASE_ENABLED, enabled);
-  }
-
-  onInstantPurchaseMaxChange(newValue) {
-    this.props.setClientSetting(settings.INSTANT_PURCHASE_MAX, newValue);
-  }
-
-  // onMaxUploadPrefChange(isLimited) {
-  //   if (!isLimited) {
-  //     this.setDaemonSetting("max_upload", 0.0);
-  //   }
-  //   this.setState({
-  //     isMaxUpload: isLimited,
-  //   });
-  // }
-  //
-  // onMaxUploadFieldChange(event) {
-  //   this.setDaemonSetting("max_upload", Number(event.target.value));
-  // }
-  //
-  // onMaxDownloadPrefChange(isLimited) {
-  //   if (!isLimited) {
-  //     this.setDaemonSetting("max_download", 0.0);
-  //   }
-  //   this.setState({
-  //     isMaxDownload: isLimited,
-  //   });
-  // }
-  //
-  // onMaxDownloadFieldChange(event) {
-  //   this.setDaemonSetting("max_download", Number(event.target.value));
-  // }
-
-  onShowNsfwChange(event) {
-    this.props.setClientSetting(settings.SHOW_NSFW, event.target.checked);
-  }
-
-  onLanguageChange(e) {
-    this.props.changeLanguage(e.target.value);
-    this.forceUpdate();
-  }
-
-  onShowUnavailableChange(event) {
-    this.props.setClientSetting(settings.SHOW_UNAVAILABLE, event.target.checked);
-  }
-
-  componentWillMount() {
-    this.props.getThemes();
-  }
-
-  componentDidMount() {}
-
   render() {
     const {
       daemonSettings,
-      language,
-      languages,
       showNsfw,
       instantPurchaseEnabled,
       instantPurchaseMax,
       showUnavailable,
-      theme,
+      currentTheme,
       themes,
       automaticDarkModeEnabled,
     } = this.props;
 
-    if (!daemonSettings || Object.keys(daemonSettings).length === 0) {
-      return (
-        <main className="main--single-column">
-          <span className="empty">{__('Failed to load settings.')}</span>
-        </main>
-      );
-    }
+    const noDaemonSettings = !daemonSettings || Object.keys(daemonSettings).length === 0;
+
     return (
       <Page>
-        {/*
-        <section className="card">
-          <div className="card__content">
-            <h4>{__("Language")}</h4>
-          </div>
-          <div className="card__content">
-            <div className="form-row">
-              <FormField
-                type="select"
-                name="language"
-                defaultValue={language}
-                onChange={this.onLanguageChange.bind(this)}
-              >
-                <option value="en">{__("English")}</option>
-                {Object.keys(languages).map(dLang =>
-                  <option key={dLang} value={dLang}>
-                    {languages[dLang]}
-                  </option>
-                )}
-              </FormField>
-            </div>
-          </div>
-        </section> */}
-        <section className="card">
-          <div className="card__content">
-            <h4>{__('Download Directory')}</h4>
-          </div>
-          <div className="card__content">
-            <FormRow
-              type="directory"
-              name="download_directory"
-              defaultValue={daemonSettings.download_directory}
-              helper={__('LBRY downloads will be saved here.')}
-              onChange={this.onDownloadDirChange.bind(this)}
-            />
-          </div>
-        </section>
-        <section className="card">
-          <div className="card__content">
-            <h4>{__('Max Purchase Price')}</h4>
-          </div>
-          <div className="card__content">
-            <FormRow
-              type="radio"
-              name="max_key_fee"
-              onClick={() => {
-                this.onKeyFeeDisableChange(true);
-              }}
-              defaultChecked={daemonSettings.disable_max_key_fee}
-              label={__('No Limit')}
-            />
-            <div className="form-row">
-              <FormField
-                type="radio"
-                name="max_key_fee"
-                onClick={() => {
-                  this.onKeyFeeDisableChange(false);
-                }}
-                defaultChecked={!daemonSettings.disable_max_key_fee}
-                label={daemonSettings.disable_max_key_fee ? __('Choose limit') : __('Limit to')}
+        {noDaemonSettings ? (
+          <section className="card card--section">
+            <div className="card__title">{__('Failed to load settings.')}</div>
+          </section>
+        ) : (
+          <React.Fragment>
+            <section className="card card--section">
+              <div className="card__title">{__('Download Directory')}</div>
+              <span className="card__subtitle">{__('LBRY downloads will be saved here.')}</span>
+              <FileSelector
+                type="openDirectory"
+                currentPath={daemonSettings.download_directory}
+                onFileChosen={this.onDownloadDirChange}
               />
-              {!daemonSettings.disable_max_key_fee && (
+            </section>
+            <section className="card card--section">
+              <div className="card__title">{__('Max Purchase Price')}</div>
+              <span className="card__subtitle">
+                {__(
+                  'This will prevent you from purchasing any content over a certain cost, as a safety measure.'
+                )}
+              </span>
+              <div className="card__content">
+                <FormField
+                  type="radio"
+                  name="no_max_purchase_limit"
+                  checked={daemonSettings.disable_max_key_fee}
+                  postfix={__('No Limit')}
+                  onChange={() => {
+                    this.onKeyFeeDisableChange(true);
+                  }}
+                />
+                <FormField
+                  type="radio"
+                  name="max_purchase_limit"
+                  onChange={() => {
+                    this.onKeyFeeDisableChange(false);
+                  }}
+                  checked={!daemonSettings.disable_max_key_fee}
+                  postfix={__('Choose limit')}
+                />
                 <FormFieldPrice
-                  min="0"
-                  onChange={this.onKeyFeeChange.bind(this)}
-                  defaultValue={
+                  name="max_key_fee"
+                  label="Max purchase price"
+                  min={0}
+                  onChange={this.onKeyFeeChange}
+                  disabled={daemonSettings.disable_max_key_fee}
+                  price={
                     daemonSettings.max_key_fee
                       ? daemonSettings.max_key_fee
                       : { currency: 'USD', amount: 50 }
                   }
                 />
-              )}
-            </div>
-            <div className="form-field__helper">
-              {__(
-                'This will prevent you from purchasing any content over this cost, as a safety measure.'
-              )}
-            </div>
-          </div>
-        </section>
+              </div>
+            </section>
 
-        <section className="card">
-          <div className="card__content">
-            <h4>{__('Purchase Confirmations')}</h4>
-          </div>
-          <div className="card__content">
-            <FormRow
-              type="radio"
-              name="instant_purchase_max"
-              defaultChecked={!instantPurchaseEnabled}
-              label={__('Ask for confirmation of all purchases')}
-              onClick={e => {
-                this.onInstantPurchaseEnabledChange(false);
-              }}
-            />
-            <div className="form-row">
-              <FormField
-                type="radio"
-                name="instant_purchase_max"
-                defaultChecked={instantPurchaseEnabled}
-                label={`Single-click purchasing of content less than${
-                  instantPurchaseEnabled ? '' : '...'
-                }`}
-                onClick={e => {
-                  this.onInstantPurchaseEnabledChange(true);
-                }}
-              />
-              {instantPurchaseEnabled && (
-                <FormFieldPrice
-                  min="0.1"
-                  onChange={val => this.onInstantPurchaseMaxChange(val)}
-                  defaultValue={instantPurchaseMax}
+            <section className="card card--section">
+              <div className="card__title">{__('Purchase Confirmations')}</div>
+              <div className="card__subtitle">
+                {__(
+                  "When this option is chosen, LBRY won't ask you to confirm downloads below your chosen price."
+                )}
+              </div>
+              <div className="card__content">
+                <FormField
+                  type="radio"
+                  name="confirm_all_purchases"
+                  checked={!instantPurchaseEnabled}
+                  postfix={__('Always confirm before purchasing content')}
+                  onChange={() => {
+                    this.onInstantPurchaseEnabledChange(false);
+                  }}
                 />
-              )}
-            </div>
-            <div className="form-field__helper">
-              When this option is chosen, LBRY won't ask you to confirm downloads below the given
-              price.
-            </div>
-          </div>
-        </section>
 
-        <section className="card">
-          <div className="card__content">
-            <h4>{__('Content')}</h4>
-          </div>
-          <div className="card__content">
-            <FormRow
-              type="checkbox"
-              onChange={this.onShowUnavailableChange.bind(this)}
-              defaultChecked={showUnavailable}
-              label={__('Show unavailable content in search results')}
-            />
-            <FormRow
-              label={__('Show NSFW content')}
-              type="checkbox"
-              onChange={this.onShowNsfwChange.bind(this)}
-              defaultChecked={showNsfw}
-              helper={__(
-                'NSFW content may include nudity, intense sexuality, profanity, or other adult content. By displaying NSFW content, you are affirming you are of legal age to view mature content in your country or jurisdiction.  '
-              )}
-            />
-          </div>
-        </section>
+                <FormField
+                  type="radio"
+                  name="instant_purchases"
+                  checked={instantPurchaseEnabled}
+                  postfix={__('Only confirm purchases over a certain price')}
+                  onChange={() => {
+                    this.onInstantPurchaseEnabledChange(true);
+                  }}
+                />
+                <FormFieldPrice
+                  label={__('Confirmation price')}
+                  disabled={!instantPurchaseEnabled}
+                  min={0.1}
+                  onChange={this.onInstantPurchaseMaxChange}
+                  price={instantPurchaseMax}
+                />
+              </div>
+            </section>
 
-        <section className="card">
-          <div className="card__content">
-            <h4>{__('Share Diagnostic Data')}</h4>
-          </div>
-          <div className="card__content">
-            <FormRow
-              type="checkbox"
-              onChange={this.onShareDataChange.bind(this)}
-              defaultChecked={daemonSettings.share_usage_data}
-              label={__('Help make LBRY better by contributing diagnostic data about my usage')}
-            />
-          </div>
-        </section>
+            <section className="card card--section">
+              <div className="card__title">{__('Content Settings')}</div>
+              <div className="card__content">
+                <FormField
+                  type="checkbox"
+                  name="show_unavailable"
+                  onChange={this.onShowUnavailableChange}
+                  checked={showUnavailable}
+                  postfix={__('Show unavailable content in search results')}
+                />
+                <FormField
+                  type="checkbox"
+                  name="show_nsfw"
+                  onChange={this.onShowNsfwChange}
+                  checked={showNsfw}
+                  postfix={__('Show NSFW content')}
+                  helper={__(
+                    'NSFW content may include nudity, intense sexuality, profanity, or other adult content. By displaying NSFW content, you are affirming you are of legal age to view mature content in your country or jurisdiction.  '
+                  )}
+                />
+              </div>
+            </section>
 
-        <section className="card">
-          <div className="card__content">
-            <h4>{__('Theme')}</h4>
-          </div>
-          <div className="card__content">
-            <FormField
-              type="select"
-              onChange={this.onThemeChange.bind(this)}
-              defaultValue={theme}
-              className="form-field__input--inline"
-            >
-              {themes.map((theme, index) => (
-                <option key={theme} value={theme}>
-                  {theme}
-                </option>
-              ))}
-            </FormField>
+            <section className="card card--section">
+              <div className="card__title">{__('Share Diagnostic Data')}</div>
+              <div className="card__subtitle">{__('List what we are doing with the data here')}</div>
+              <div className="card__content">
+                <FormField
+                  type="checkbox"
+                  name="share_usage_data"
+                  onChange={this.onShareDataChange}
+                  checked={daemonSettings.share_usage_data}
+                  postfix={__(
+                    'Help make LBRY better by contributing diagnostic data about my usage'
+                  )}
+                />
+              </div>
+            </section>
 
-            <FormRow
-              type="checkbox"
-              onChange={this.onAutomaticDarkModeChange.bind(this)}
-              defaultChecked={automaticDarkModeEnabled}
-              label={__('Automatic dark mode (9pm to 8am)')}
-            />
-          </div>
-        </section>
+            <section className="card card--section">
+              <div className="card__title">{__('Theme')}</div>
 
-        <section className="card">
-          <div className="card__content">
-            <h4>{__('Application Cache')}</h4>
-          </div>
-          <div className="card__content">
-            <p>
-              <Link
-                label={this.state.clearingCache ? __('Clearing') : __('Clear the cache')}
-                icon="icon-trash"
-                button="alt"
-                onClick={this.clearCache.bind(this)}
-                disabled={this.state.clearingCache}
+              <FormField
+                name="theme_select"
+                render={() => (
+                  <select
+                    name="theme_select"
+                    id="theme_select"
+                    onChange={this.onThemeChange}
+                    value={currentTheme}
+                    disabled={automaticDarkModeEnabled}
+                  >
+                    {themes.map(theme => (
+                      <option key={theme} value={theme}>
+                        {theme}
+                      </option>
+                    ))}
+                  </select>
+                )}
               />
-            </p>
-          </div>
-        </section>
+
+              <FormField
+                type="checkbox"
+                name="automatic_dark_mode"
+                onChange={this.onAutomaticDarkModeChange}
+                checked={automaticDarkModeEnabled}
+                postfix={__('Automatic dark mode (9pm to 8am)')}
+              />
+            </section>
+
+            <section className="card card--section">
+              <div className="card__title">{__('Application Cache')}</div>
+              <span className="card__subtitle">
+                {__('This will delete your subscriptions, ... other stuff')}
+              </span>
+              <div className="card__content">
+                <Button
+                  label={this.state.clearingCache ? __('Clearing') : __('Clear the cache')}
+                  icon="AlertCircle"
+                  onClick={this.clearCache}
+                  disabled={this.state.clearingCache}
+                />
+              </div>
+            </section>
+          </React.Fragment>
+        )}
       </Page>
     );
   }
diff --git a/src/renderer/scss/_gui.scss b/src/renderer/scss/_gui.scss
index d76e75b96..4a8d92c9e 100644
--- a/src/renderer/scss/_gui.scss
+++ b/src/renderer/scss/_gui.scss
@@ -94,22 +94,39 @@ ul {
 }
 
 input {
-  cursor: pointer;
   border-bottom: var(--input-border-size) solid var(--input-border-color);
   color: var(--input-color);
   line-height: 1;
+  cursor: text;
 
-  &[type='text'] {
-    cursor: text;
+  &[type='radio'],
+  &[type='checkbox'],
+  &[type='file'],
+  &[type='select'] {
+    cursor: pointer;
+  }
+
+  &[type='file'] {
+    border-bottom: none;
   }
 
   &.input-copyable {
     background: var(--input-bg);
     color: var(--input-disabled-color);
-    width: 100%;
     font-family: 'Consolas', 'Lucida Console', 'Adobe Source Code Pro', monospace;
     border-bottom: 1px dotted var(--color-divider);
+    width: 100%;
+    flex: 1;
   }
+
+  &:disabled {
+    color: var(--input-disabled-color);
+    border-bottom: var(--input-border-size) solid var(--input-disabled-color);
+  }
+}
+
+button + input {
+  margin-left: $spacing-vertical * 2/3;
 }
 
 dl {
diff --git a/src/renderer/scss/all.scss b/src/renderer/scss/all.scss
index 541c9ecd1..89a8fc12e 100644
--- a/src/renderer/scss/all.scss
+++ b/src/renderer/scss/all.scss
@@ -6,7 +6,6 @@
 @import 'component/_button.scss';
 @import 'component/_card.scss';
 @import 'component/_file-download.scss';
-@import 'component/_file-selector.scss';
 @import 'component/_file-tile.scss';
 @import 'component/_form-field.scss';
 @import 'component/_header.scss';
diff --git a/src/renderer/scss/component/_button.scss b/src/renderer/scss/component/_button.scss
index 3a20ca105..7e0336834 100644
--- a/src/renderer/scss/component/_button.scss
+++ b/src/renderer/scss/component/_button.scss
@@ -1,4 +1,4 @@
-// This will go away
+// This will be moved and updated once we figure out how it should look
 // It's for the download progress "button"
 .faux-button-block {
   display: inline-block;
@@ -9,6 +9,8 @@
   text-align: center;
   border-radius: var(--button-radius);
   text-transform: uppercase;
+  color: var(--color-white);
+
   .icon {
     top: 0em;
   }
diff --git a/src/renderer/scss/component/_card.scss b/src/renderer/scss/component/_card.scss
index fbdc43dac..5bf0778d7 100644
--- a/src/renderer/scss/component/_card.scss
+++ b/src/renderer/scss/component/_card.scss
@@ -69,7 +69,7 @@
 .card__title {
   font-size: 1.5em;
   font-weight: 800;
-  padding: $spacing-vertical / 3 0;
+  padding: 0;
 }
 
 .card__title--small {
@@ -88,10 +88,20 @@
   padding-top: 0;
 }
 
-.card-media__internal-links {
-  position: absolute;
-  top: $spacing-vertical * 2/3;
-  right: $spacing-vertical * 2/3;
+// .card-media__internal__links should always be inside a card
+.card {
+  .card-media__internal-links {
+    position: absolute;
+    top: $spacing-vertical * 2/3;
+    right: $spacing-vertical * 2/3;
+  }
+}
+
+.card--small {
+  .card-media__internal-links {
+    top: $spacing-vertical * 1/3;
+    right: $spacing-vertical * 1/3;
+  }
 }
 
 // Channel info with buttons on the right side
@@ -107,7 +117,6 @@
 
 .card__content {
   margin-top: var(--card-margin);
-  margin-bottom: var(--card-margin);
 }
 
 .card__subtext-title {
diff --git a/src/renderer/scss/component/_file-selector.scss b/src/renderer/scss/component/_file-selector.scss
deleted file mode 100644
index 8172da203..000000000
--- a/src/renderer/scss/component/_file-selector.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-.form-field--file,
-.form-field--directory {
-  width: 100%;
-}
-
-.file-selector {
-  display: flex;
-}
-
-.file-selector__choose-button {
-  font-family: inherit;
-  line-height: 0;
-  color: inherit;
-  margin-right: 16px;
-}
-
-.file-selector__path {
-  font-size: 14px;
-  flex-grow: 2;
-  .input-copyable {
-    width: 100%;
-  }
-}
diff --git a/src/renderer/scss/component/_form-field.scss b/src/renderer/scss/component/_form-field.scss
index 5a1ad7406..ff2e743a1 100644
--- a/src/renderer/scss/component/_form-field.scss
+++ b/src/renderer/scss/component/_form-field.scss
@@ -1,27 +1,37 @@
 .form-row {
   display: flex;
   flex-direction: row;
+  align-items: flex-end;
 
   .form-field:not(:first-of-type) {
     padding-left: $spacing-vertical;
   }
 
   &.form-row--padded {
-    padding: $spacing-vertical * 2/3 0;
+    padding-top: $spacing-vertical * 2/3;
+  }
+
+  &.form-row--centered {
+    align-items: center;
   }
 }
 
-.form-field__wrapper {
+.form-field__input {
   display: flex;
-  padding: $spacing-vertical / 3 0;
+  padding-top: $spacing-vertical / 3;
 
-  // Hmm, not sure about this
-  // without this the checkbox isn't on the same line as other form-field text
-  input[type='checkbox'] {
+  input[type='checkbox'],
+  input[type='radio'] {
     margin-top: 5px;
   }
 }
 
+.form-field {
+  label {
+    cursor: pointer;
+  }
+}
+
 .form-field__error {
   color: var(--color-error);
 }
@@ -30,18 +40,24 @@
   color: var(--color-grey-dark);
 }
 
+.form-field__help {
+  color: var(--color-grey-dark);
+  font-size: 0.8em;
+  padding-top: $spacing-vertical * 1/3;
+}
+
 .form-field__prefix {
-  padding-right: 5px;
+  padding-right: $spacing-vertical * 1/3;
 }
 
 .form-field__postfix {
-  padding-left: 5px;
+  padding-left: $spacing-vertical * 1/3;
 }
 
 // Not sure if I like these
 // Maybe this should be in gui.scss?
-.input--lbc-amount {
-  width: 75px;
+.input--price-amount {
+  width: 50px;
   font-weight: 700;
 }
 
diff --git a/src/renderer/scss/component/_nav.scss b/src/renderer/scss/component/_nav.scss
index 4c793cea7..928d7a9f8 100644
--- a/src/renderer/scss/component/_nav.scss
+++ b/src/renderer/scss/component/_nav.scss
@@ -14,7 +14,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 5px;
+  padding: 0 5px;
 }
 
 .nav__actions-history {