Merge branch 'ux-patch'

2017-10-15 08:25:28 -04:00 · 2017-10-15 08:25:28 -04:00 · 31be7086bb
commit 31be7086bb
parent eeec63a27e 06092cd8f9
24 changed files with 359 additions and 167 deletions
--- a/ui/dist/themes/dark.css
+++ b/ui/dist/themes/dark.css
@ -10,15 +10,27 @@
    --color-money: var(--color-primary);
    --color-meta-light: #757575;
    --color-dark-overlay: rgba(15, 21, 23, 0.85);
+    --color-download: rgba(255, 255, 255, 0.75);
+

    /* Text */
    --text-color: #FFF;
    --text-selection-bg: rgba(0,150,136, 0.95);

+    /* Form */
+    --form-label-color: rgba(255, 255, 255, 0.70);
+
    /* Input */
    --input-bg: transparent;
-    --input-active-bg: rgba(0,0,0, 0.5);
-    --input-border-color: rgba(255,255,255, 0.25);
+    --input-border-color: rgba(255,255,255, 0.70);
+    --input-hover-border-color: rgba(255, 255, 255, 1);
+
+    /* input:placeholder */
+    --input-placeholder-color: rgba(255,255,255, 0.5);
+
+    /* input:disabled */
+    --input-disabled-color: rgba(255, 255, 255, 0.50);
+    --input-disabled-border-color: rgba(255, 255, 255, 0.70);

    /* Search */
    --search-bg: rgba(0,0,0, 0.45);
--- a/ui/js/component/channelTile/view.jsx
+++ b/ui/js/component/channelTile/view.jsx
@ -1,4 +1,5 @@
 import React from "react";
+import CardMedia from "component/cardMedia";
 import { TruncatedText, BusyMessage } from "component/common.js";

 class ChannelTile extends React.PureComponent {
@ -18,29 +19,38 @@ class ChannelTile extends React.PureComponent {

  render() {
    const { claim, navigate, isResolvingUri, totalItems, uri } = this.props;
+    let channelName, channelId;
+
+    if (claim) {
+      channelName = claim.name;
+      channelId = claim.claim_id;
+    }

    let onClick = () => navigate("/show", { uri });

    return (
      <section className="file-tile card">
        <div onClick={onClick} className="card__link">
-          <div className="file-tile__content">
-            <div className="card__title-primary">
-              <h3>
-                <TruncatedText lines={1}>{uri}</TruncatedText>
-              </h3>
-            </div>
-            <div className="card__content card__subtext">
-              {isResolvingUri &&
-                <BusyMessage message={__("Resolving channel")} />}
-              {totalItems > 0 &&
-                <span>
-                  This is a channel with {totalItems}{" "}
-                  {totalItems === 1 ? " item" : " items"} inside of it.
-                </span>}
-              {!isResolvingUri &&
-                !totalItems &&
-                <span className="empty">This is an empty channel.</span>}
+          <div className={"card__inner file-tile__row"}>
+            {channelName && <CardMedia title={channelName} thumbnail={null} />}
+            <div className="file-tile__content">
+              <div className="card__title-primary">
+                <h3>
+                  <TruncatedText lines={1}>{channelName || uri}</TruncatedText>
+                </h3>
+              </div>
+              <div className="card__content card__subtext">
+                {isResolvingUri &&
+                  <BusyMessage message={__("Resolving channel")} />}
+                {totalItems > 0 &&
+                  <span>
+                    This is a channel with {totalItems}{" "}
+                    {totalItems === 1 ? " item" : " items"} inside of it.
+                  </span>}
+                {!isResolvingUri &&
+                  !totalItems &&
+                  <span className="empty">This is an empty channel.</span>}
+              </div>
            </div>
          </div>
        </div>
--- a/ui/js/component/fileTile/view.jsx
+++ b/ui/js/component/fileTile/view.jsx
@ -84,6 +84,11 @@ class FileTile extends React.PureComponent {

    let onClick = () => navigate("/show", { uri });

+    let name = "";
+    if (claim) {
+      name = claim.name;
+    }
+
    let description = "";
    if (isClaimed) {
      description = metadata && metadata.description;
@ -114,7 +119,7 @@ class FileTile extends React.PureComponent {
      >
        <div onClick={onClick} className="card__link">
          <div className={"card__inner file-tile__row"}>
-            <CardMedia title={title} thumbnail={thumbnail} />
+            <CardMedia title={title || name} thumbnail={thumbnail} />
            <div className="file-tile__content">
              <div className="card__title-primary">
                <span className="card__indicators">
@ -125,9 +130,8 @@ class FileTile extends React.PureComponent {
                  {showLocal && fileInfo && <Icon icon={icons.LOCAL} />}
                </span>
                <h3>
-                  <TruncatedText lines={1}>{title}</TruncatedText>
+                  <TruncatedText lines={1}>{title || name}</TruncatedText>
                </h3>
-                <span className="file-tile__uri">{uri}</span>
              </div>
              {description &&
                <div className="card__content card__subtext">
--- a/ui/js/component/form.js
+++ b/ui/js/component/form.js
@ -46,6 +46,10 @@ export class FormRow extends React.PureComponent {
    // helper: React.PropTypes.html,
  };

+  static defaultProps = {
+    isFocus: false,
+  };
+
  constructor(props) {
    super(props);

@ -101,8 +105,12 @@ export class FormRow extends React.PureComponent {
    return this._field.getOptions();
  }

-  focus() {
-    this._field.focus();
+  onFocus() {
+    this.setState({ isFocus: true });
+  }
+
+  onBlur() {
+    this.setState({ isFocus: false });
  }

  render() {
@ -117,6 +125,7 @@ export class FormRow extends React.PureComponent {
    }
    delete fieldProps.helper;
    delete fieldProps.errorMessage;
+    delete fieldProps.isFocus;

    return (
      <div className="form-row">
@ -124,14 +133,16 @@ export class FormRow extends React.PureComponent {
          ? <div
              className={
                "form-row__label-row " +
-                (this.props.labelPrefix ? "form-row__label-row--prefix" : "")
+                (this.props.labelPrefix ? "form-row__label-row--prefix" : "") +
+                (this.state.isFocus ? "focus " : "")
              }
            >
              <label
                htmlFor={elementId}
                className={
                  "form-field__label " +
-                  (this.state.isError ? "form-field__label--error" : "")
+                  (this.state.isError ? "form-field__label--error" : " ") +
+                  (this.state.isFocus ? "focus" : " ")
                }
              >
                {this.props.label}
@ -143,6 +154,8 @@ export class FormRow extends React.PureComponent {
            this._field = ref ? ref.getWrappedInstance() : null;
          }}
          hasError={this.state.isError}
+          onFocus={this.onFocus.bind(this)}
+          onBlur={this.onBlur.bind(this)}
          {...fieldProps}
        />
        {!this.state.isError && this.props.helper
--- a/ui/js/component/formField/view.jsx
+++ b/ui/js/component/formField/view.jsx
@ -93,10 +93,6 @@ class FormField extends React.PureComponent {
    });
  }

-  focus() {
-    this.refs.field.focus();
-  }
-
  getValue() {
    if (this.props.type == "checkbox") {
      return this.refs.field.checked;
@ -125,6 +121,7 @@ class FormField extends React.PureComponent {
        this.clearError();
      }
    }
+    this.props.onBlur && this.props.onBlur();
  }

  render() {
@ -137,6 +134,8 @@ class FormField extends React.PureComponent {
      renderElementInsideLabel =
        this.props.label && formFieldNestedLabelTypes.includes(this.props.type);

+    const isCheck = this.refs.field && this.refs.field.checked ? true : false;
+
    delete otherProps.type;
    delete otherProps.label;
    delete otherProps.hasError;
@ -155,6 +154,7 @@ class FormField extends React.PureComponent {
        ref="field"
        placeholder={this.props.placeholder}
        onBlur={() => this.validate()}
+        onFocus={() => this.props.onFocus && this.props.onFocus()}
        className={
          "form-field__input form-field__input-" +
          this.props.type +
@ -174,18 +174,18 @@ class FormField extends React.PureComponent {
        {this.props.prefix
          ? <span className="form-field__prefix">{this.props.prefix}</span>
          : ""}
-        {renderElementInsideLabel
-          ? <label
-              htmlFor={elementId}
-              className={
-                "form-field__label " +
-                (isError ? "form-field__label--error" : "")
-              }
-            >
-              {element}
-              {this.props.label}
-            </label>
-          : element}
+        {element}
+        {renderElementInsideLabel &&
+          <label
+            htmlFor={elementId}
+            className={
+              "form-field__label " +
+              (isError ? "form-field__label--error" : "") +
+              (isCheck ? " checked" : "")
+            }
+          >
+            {this.props.label}
+          </label>}
        {formFieldFileSelectorTypes.includes(this.props.type)
          ? <FileSelector
              type={this.props.type}
--- a/ui/js/component/link/view.jsx
+++ b/ui/js/component/link/view.jsx
@ -1,5 +1,5 @@
 import React from "react";
-import { Icon } from "component/common.js";
+import Icon from "component/icon";

 const Link = props => {
  const {
--- a/ui/js/component/publishForm/internal/channelSection.jsx
+++ b/ui/js/component/publishForm/internal/channelSection.jsx
@ -110,7 +110,7 @@ class ChannelSection extends React.PureComponent {
      </FormRow>
    );
    if (fetchingChannels) {
-      channelContent.push(
+      channelContent = (
        <BusyMessage message="Updating channels" key="loading" />
      );
    }
--- a/ui/js/component/publishForm/view.jsx
+++ b/ui/js/component/publishForm/view.jsx
@ -542,7 +542,6 @@ class PublishForm extends React.PureComponent {
            <div className="card__content">
              <FormRow
                name="file"
-                label="File"
                ref="file"
                type="file"
                onChange={event => {
@ -585,9 +584,11 @@ class PublishForm extends React.PureComponent {
                      }}
                    />
                  </div>
+                  <div className="card__content">
+                    <h4>{__("Description")}</h4>
+                  </div>
                  <div className="card__content">
                    <FormRow
-                      label={__("Description")}
                      type="SimpleMDE"
                      ref="meta_description"
                      name="description"
@ -637,15 +638,12 @@ class PublishForm extends React.PureComponent {

          <section className="card">
            <div className="card__title-primary">
-              <h4>{__("Access")}</h4>
+              <h4>{__("Price")}</h4>
              <div className="card__subtitle">
                {__("How much does this content cost?")}
              </div>
            </div>
            <div className="card__content">
-              <div className="form-row__label-row">
-                <label className="form-row__label">{__("Price")}</label>
-              </div>
              <FormRow
                label={__("Free")}
                type="radio"
@ -676,8 +674,14 @@ class PublishForm extends React.PureComponent {
                    )}
                  </div>
                : null}
+            </div>
+          </section>
+          <section className="card">
+            <div className="card__title-primary">
+              <h4>{__("License")}</h4>
+            </div>
+            <div className="card__content">
              <FormRow
-                label="License"
                type="select"
                value={this.state.licenseType}
                ref={row => {
@ -687,7 +691,7 @@ class PublishForm extends React.PureComponent {
                  this.handleLicenseTypeChange(event);
                }}
              >
-                <option />
+                <option>{__("None")}</option>
                <option value="publicDomain">{__("Public Domain")}</option>
                <option
                  value="cc-by"
--- a/ui/js/component/transactionListRecent/view.jsx
+++ b/ui/js/component/transactionListRecent/view.jsx
@ -2,6 +2,7 @@ import React from "react";
 import { BusyMessage } from "component/common";
 import Link from "component/link";
 import TransactionList from "component/transactionList";
+import * as icons from "constants/icons";

 class TransactionListRecent extends React.PureComponent {
  componentWillMount() {
@ -29,7 +30,9 @@ class TransactionListRecent extends React.PureComponent {
          <div className="card__actions card__actions--bottom">
            <Link
              navigate="/history"
-              label={__("See Full History")}
+              label={__("Full History")}
+              icon={icons.HISTORY}
+              className="no-underline"
              button="text"
            />
          </div>}
--- a/ui/js/constants/icons.js
+++ b/ui/js/constants/icons.js
@ -1,3 +1,4 @@
 export const FEATURED = "rocket";
 export const LOCAL = "folder";
 export const FILE = "file";
+export const HISTORY = "history";
--- a/ui/js/modal/modalRemoveFile/view.jsx
+++ b/ui/js/modal/modalRemoveFile/view.jsx
@ -50,25 +50,21 @@ class ModalRemoveFile extends React.PureComponent {
        </p>

        <section>
-          <label>
-            <FormField
-              type="checkbox"
-              checked={deleteChecked}
-              onClick={this.handleDeleteCheckboxClicked.bind(this)}
-            />{" "}
-            {__("Delete this file from my computer")}
-          </label>
+          <FormField
+            type="checkbox"
+            checked={deleteChecked}
+            onClick={this.handleDeleteCheckboxClicked.bind(this)}
+            label={__("Delete this file from my computer")}
+          />
        </section>
        {claimIsMine &&
          <section>
-            <label>
-              <FormField
-                type="checkbox"
-                checked={abandonClaimChecked}
-                onClick={this.handleAbandonClaimCheckboxClicked.bind(this)}
-              />{" "}
-              {__("Abandon the claim for this URI")}
-            </label>
+            <FormField
+              type="checkbox"
+              checked={abandonClaimChecked}
+              onClick={this.handleAbandonClaimCheckboxClicked.bind(this)}
+              label={__("Abandon the claim for this URI")}
+            />
          </section>}
      </Modal>
    );
--- a/ui/js/page/settings/view.jsx
+++ b/ui/js/page/settings/view.jsx
@ -148,7 +148,7 @@ class SettingsPage extends React.PureComponent {
        {/*
        <section className="card">
          <div className="card__content">
-            <h3>{__("Language")}</h3>
+            <h4>{__("Language")}</h4>
          </div>
          <div className="card__content">
            <div className="form-row">
@ -170,7 +170,7 @@ class SettingsPage extends React.PureComponent {
        </section> */}
        <section className="card">
          <div className="card__content">
-            <h3>{__("Download Directory")}</h3>
+            <h4>{__("Download Directory")}</h4>
          </div>
          <div className="card__content">
            <FormRow
@ -184,14 +184,9 @@ class SettingsPage extends React.PureComponent {
        </section>
        <section className="card">
          <div className="card__content">
-            <h3>{__("Purchase Settings")}</h3>
+            <h4>{__("Max Purchase Price")}</h4>
          </div>
          <div className="card__content">
-            <div className="form-row__label-row">
-              <label className="form-row__label">
-                {__("Max Purchase Price")}
-              </label>
-            </div>
            <FormRow
              type="radio"
              name="max_key_fee"
@ -232,12 +227,13 @@ class SettingsPage extends React.PureComponent {
              )}
            </div>
          </div>
+        </section>
+
+        <section className="card">
+          <div className="card__content">
+            <h4>{__("Purchase Confirmations")}</h4>
+          </div>
          <div className="card__content">
-            <div className="form-row__label-row">
-              <label className="form-row__label">
-                {__("Purchase Confirmations")}
-              </label>
-            </div>
            <FormRow
              type="radio"
              name="instant_purchase_max"
@ -276,7 +272,7 @@ class SettingsPage extends React.PureComponent {

        <section className="card">
          <div className="card__content">
-            <h3>{__("Content")}</h3>
+            <h4>{__("Content")}</h4>
          </div>
          <div className="card__content">
            <FormRow
@ -285,8 +281,6 @@ class SettingsPage extends React.PureComponent {
              defaultChecked={showUnavailable}
              label={__("Show unavailable content in search results")}
            />
-          </div>
-          <div className="card__content">
            <FormRow
              label={__("Show NSFW content")}
              type="checkbox"
@ -301,7 +295,7 @@ class SettingsPage extends React.PureComponent {

        <section className="card">
          <div className="card__content">
-            <h3>{__("Share Diagnostic Data")}</h3>
+            <h4>{__("Share Diagnostic Data")}</h4>
          </div>
          <div className="card__content">
            <FormRow
@ -317,7 +311,7 @@ class SettingsPage extends React.PureComponent {

        <section className="card">
          <div className="card__content">
-            <h3>{__("Theme")}</h3>
+            <h4>{__("Theme")}</h4>
          </div>
          <div className="card__content">
            <FormField
@ -338,7 +332,7 @@ class SettingsPage extends React.PureComponent {

        <section className="card">
          <div className="card__content">
-            <h3>{__("Application Cache")}</h3>
+            <h4>{__("Application Cache")}</h4>
          </div>
          <div className="card__content">
            <p>
--- a/ui/scss/_gui.scss
+++ b/ui/scss/_gui.scss
@ -9,6 +9,7 @@ body
  color: var(--text-color);
  font-family: 'Roboto', sans-serif;
  line-height: var(--font-line-height);
+  user-select: none;
 }

 /* Custom text selection */
--- a/ui/scss/_vars.scss
+++ b/ui/scss/_vars.scss
@ -13,13 +13,13 @@ $text-color: #000;
  --color-primary-light: saturate(lighten(#155B4A, 50%), 20%);
  --color-light-alt: hsl(hue(#155B4A), 15, 85);
  --color-dark-overlay: rgba(32,32,32,0.9);
-  --color-help: rgba(0,0,0,.6);
+  --color-help: rgba(0, 0, 0, 0.54);
  --color-notice: #8a6d3b;
  --color-error: #a94442;
  --color-load-screen-text: #c3c3c3;
  --color-meta-light: #505050;
  --color-money: #216C2A;
-  --color-download: #444;
+  --color-download: rgba(0, 0, 0, 0.75);
  --color-canvas: #f5f5f5;
  --color-bg: #ffffff;
  --color-bg-alt: #D9D9D9;
@ -53,13 +53,27 @@ $text-color: #000;
  /* Window */
  --window-bg: var(--color-canvas);

+  /* Form */
+  --form-label-color: rgba(0, 0, 0, 0.54);
+
  /* Input */
  --input-bg: transparent;
-  --input-active-bg: transparent;
  --input-width: 330px;
  --input-color: var(--text-color);
  --input-border-size: 2px;
-  --input-border-color: rgba(0,0,0,.25);
+  --input-border-color: rgba(0, 0, 0, 0.42);
+  /* input:active */
+  --input-active-bg: transparent;
+
+  /* input:disabled */
+  --input-disabled-border-color: rgba(0, 0, 0, 0.42);
+  --input-disabled-color: rgba(0, 0, 0, 0.54);
+
+  /* input:hover */
+  --input-hover-border-color: rgba(0, 0, 0, 0.87);
+ /* input:placeholder */
+  --input-placeholder-color: rgba(0, 0, 0, 0.42);
+  --input-placeholder-opacity: 1;

  /* Select */
  --select-bg: var(--color-bg-alt);
--- a/ui/scss/all.scss
+++ b/ui/scss/all.scss
@ -25,4 +25,6 @@
@import "component/_tabs.scss";
@import "component/_media.scss";
@import "component/_divider.scss";
+@import "component/_checkbox.scss";
+@import "component/_radio.scss";
@import "page/_show.scss";
--- a/ui/scss/component/_button.scss
+++ b/ui/scss/component/_button.scss
@ -45,6 +45,7 @@ $button-focus-shift: 12%;
  cursor: pointer;
  font-weight: 500;
  font-size: 14px;
+  user-select: none;
  transition: background var(--animation-duration) var(--animation-style);
 }

--- a/ui/scss/component/_card.scss
+++ b/ui/scss/component/_card.scss
@ -7,6 +7,7 @@
  border-radius: var(--card-radius);
  margin-bottom: var(--card-margin);
  overflow: auto;
+  user-select: text;

  //below added to prevent scrollbar on long titles when show page loads, would prefer a cleaner CSS solution
  overflow-x: hidden;
@ -49,6 +50,8 @@
 .card__actions {
  margin-top: var(--card-margin);
  margin-bottom: var(--card-margin);
+  user-select: none; 
+
 }
 .card__actions--bottom {
  margin-top: $spacing-vertical * 1/3;
--- a/ui/scss/component/_checkbox.scss
+++ b/ui/scss/component/_checkbox.scss
@ -0,0 +1,69 @@
+*, *:before, *:after {
+  box-sizing: border-box;
+}
+
+$md-checkbox-checked-color: var(--color-primary);
+$md-checkbox-border-color: var(--input-border-color);
+$md-checkbox-size: 20px;
+$md-checkbox-padding: 4px;
+$md-checkmark-width: 2px;
+$md-checkmark-color: #FFF;
+
+.form-field--checkbox {
+  position: relative;
+
+  label {
+    cursor: pointer;
+    &:before, &:after {
+      content: "";
+      position: absolute;
+      left:0;
+      top: 0;
+    }
+
+    &:before {
+      // box
+      width: $md-checkbox-size;
+      height: $md-checkbox-size;
+      background: transparent;
+      border: 2px solid $md-checkbox-border-color;
+      border-radius: 2px;
+      cursor: pointer;
+      transition: background .3s;
+    }
+
+    &:after {
+      // checkmark
+    }
+  }
+
+  input[type="checkbox"] {
+    outline: 0;
+    visibility: hidden;
+    margin-right: 16px;
+
+    &:checked {
+
+       + label:before{
+        background: $md-checkbox-checked-color;
+        border:none;
+      }
+      + label:after {
+
+        $md-checkmark-size: $md-checkbox-size - 2*$md-checkbox-padding;
+
+        transform: rotate(-45deg);
+
+        top: ($md-checkbox-size / 2) - ($md-checkmark-size / 4) - $md-checkbox-size/10;
+        left: $md-checkbox-padding;
+        width: $md-checkmark-size;
+        height: $md-checkmark-size / 2;
+
+        border: $md-checkmark-width solid $md-checkmark-color;
+        border-top-style: none;
+        border-right-style: none;
+      }
+    }
+  }
+
+}
--- a/ui/scss/component/_file-download.scss
+++ b/ui/scss/component/_file-download.scss
@ -12,7 +12,7 @@
 .file-download__overlay
 {
  background: var(--color-download);
-  color: white;
+  color: var(--color-bg);
  position: absolute;
  white-space: nowrap;
  overflow: hidden;
--- a/ui/scss/component/_file-selector.scss
+++ b/ui/scss/component/_file-selector.scss
@ -1,3 +1,8 @@
+.form-field--file,
+.form-field--directory {
+  width: 100%;
+}
+
 .file-selector {
  display: flex;
 }
@ -11,4 +16,8 @@

 .file-selector__path {
  font-size: 14px;
+  flex-grow: 2;
+  .input-copyable {
+    width: 100%;
+  }
 }
--- a/ui/scss/component/_form-field.scss
+++ b/ui/scss/component/_form-field.scss
@ -1,10 +1,3 @@
-
-@mixin placeholder {
-  &::-webkit-input-placeholder {@content}
-  &:-moz-placeholder {@content}
-  &:-ms-input-placeholder {@content}
-}
-
 .form-row-submit
 {
  margin-top: $spacing-vertical;
@ -16,7 +9,7 @@

 .form-row__label-row {
  margin-top: $spacing-vertical * 5/6;
-  margin-bottom: $spacing-vertical * 1/6;
+  margin-bottom: 0px;
  line-height: 1;
  font-size:calc( 0.9 * var(--font-size));
 }
@ -25,25 +18,9 @@
  margin-right: 5px;
 }

-input[type="text"].input-copyable {
-  background: var(--input-bg);
-  border-bottom: var(--input-border-size) solid var(--input-border-color);
-  color: var(--input-color);
-  line-height: 1;
-  padding-top: $spacing-vertical * 1/3;
-  padding-bottom: $spacing-vertical * 1/3;
-  width: var(--input-width);
-  padding-left: 5px;
-  padding-right: 5px;
-  width: 100%;
-  &:focus {
-    border-color: var(--color-primary);
-    background: none !important;
-  }
-}
-
 .form-field {
  display: inline-block;
+  margin: 8px 0;

  input[type="checkbox"],
  input[type="radio"] {
@ -63,61 +40,71 @@ input[type="text"].input-copyable {
    }
  }

+  input[type="text"].input-copyable {
+    background: var(--input-bg);
+    color:  var(--input-disabled-color);
+    line-height: 1;
+    padding-top: $spacing-vertical * 1/3;
+    padding-bottom: $spacing-vertical * 1/3;
+    padding-left: 5px;
+    padding-right: 5px;
+    width: 100%;
+  }
+
+  input[readonly] {
+      color:  var(--input-disabled-color) !important;
+      border-bottom: 1px dashed var(--input-disabled-border-color) !important;
+  }
+
+  input[readonly]:focus {
+      background: var(--input-bg) !important;
+      border-bottom: 1px dashed var(--input-disabled-border-color) !important;
+  }
+
  textarea,
  input[type="text"],
  input[type="password"],
  input[type="email"],
  input[type="number"],
  input[type="search"],
-  input[type="date"] {
-    @include placeholder {
-      color: lighten($text-color, 60%);
-    }
-    transition: all  var(--transition-duration) var(--transition-type);
+  input[type="date"]{
+    background: var(--input-bg);
+    border-bottom: var(--input-border-size) solid var(--input-border-color);
+    caret-color:  var(--color-primary);
+    color: var(--input-color);
    cursor: pointer;
-    padding-left: 1px;
-    padding-right: 1px;
+    line-height: 1;
+    padding:0 1px 8px 1px;
    box-sizing: border-box;
    -webkit-appearance: none;
-    background: var(--input-bg);
-    color: var(--input-color);
-    &[readonly] {
-      background-color: var(--input-bg);
-    }
-  }
+    transition: all  var(--transition-duration) var(--transition-type);

-  input[type="text"],
-  input[type="password"],
-  input[type="email"],
-  input[type="number"],
-  input[type="search"],
-  input[type="date"] {
-    border-bottom: var(--input-border-size) solid var(--input-border-color);
-    line-height: 1;
-    padding-top: $spacing-vertical * 1/3;
-    padding-bottom: $spacing-vertical * 1/3;
+    &::-webkit-input-placeholder {
+      color: var(--input-placeholder-color);
+      opacity: var(--input-placeholder-opacity) !important;
+   }
+
+    &:focus {
+      border-color: var(--color-primary);
+      background: var(--input-active-bg);
+    }
+
+    &:hover:not(:focus){
+      border-color: var(--input-hover-border-color);
+    }

    &.form-field__input--error {
      border-color: var(--color-error);
    }
+
    &.form-field__input--inline {
      padding-top: 0;
      padding-bottom: 0;
-      border-bottom-width: 1px;
+      border-bottom-width:  var(--input-border-size);
      margin-left: 8px;
      margin-right: 8px;
    }
-  }

-  textarea:focus,
-  input[type="text"]:focus,
-  input[type="password"]:focus,
-  input[type="email"]:focus,
-  input[type="number"]:focus,
-  input[type="search"]:focus,
-  input[type="date"]:focus {
-    border-color: var(--color-primary);
-    background: var(--input-active-bg);
  }

  textarea {
@ -129,12 +116,22 @@ input[type="text"].input-copyable {
  display: block;
 }

+
 .form-field__label, .form-row__label {
-  color: var(--color-help);
+  color: var(--form-label-color);
  &[for] {  cursor: pointer; }
  > input[type="checkbox"], input[type="radio"] {
    margin-right: 6px;
  }
+
+  &.focus {
+    color: var(--color-primary) !important;
+  }
+
+  &.checked {
+    color: var(--text-color) !important;
+  }
+
 }

 .form-row__label-row .form-field__label--error {
--- a/ui/scss/component/_markdown-editor.scss
+++ b/ui/scss/component/_markdown-editor.scss
@ -1,20 +1,22 @@
 .CodeMirror {
-    background: var(--input-active-bg) !important;
-    border: 1px solid var(--input-border-color) !important;
+    background: var(--color-canvas) !important;
+    border: 0px !important;
+    border-radius: 0px !important;
    color: var(--text-color) !important;
-}
-
-.CodeMirror-fullscreen {
-    background: var(--input-bg);
+    box-shadow: var(--box-shadow-layer);
 }

 .editor-toolbar {
-    border: 1px solid var(--input-border-color) !important;
-    border-bottom: 0 !important;
+    opacity: 1 !important;
+    border: 0 !important;
+    background: var(--color-bg-alt);
+    border-radius: 0 !important;
+    box-shadow: var(--box-shadow-layer);
 }

 .editor-toolbar i.separator {
-    border-color:  var(--input-border-color) !important;
+  border: 0 !important;
+  border-right: var(--divider) !important;
 }

 .editor-toolbar.fullscreen {
@ -22,26 +24,29 @@
 }

 div.editor-toolbar a {
+    opacity: 0.64;
    color:  var(--text-color) !important;
 }

 .editor-toolbar a.active,
 .editor-toolbar a:hover {
+    opacity: 1;
    background: var(--button-bg) !important;
    border-color: transparent !important;
 }

 .editor-toolbar.disabled-for-preview a:not(.no-disable) {
-    background: transparent !important;
+    background:  var(--color-bg-alt) !important;
    border-color: transparent !important;
 }

 .editor-statusbar {
-    color: #959694;
+    color: var(--form-label-color) !important;
 }

 .editor-preview {
    background: var(--card-bg) !important;
+    border: 0 !important;
 }

 .editor-preview-side {
@ -79,7 +84,7 @@ div.editor-toolbar a {
 }

 .CodeMirror .CodeMirror-cursor{
-    border-color: var(--text-color) !important;
+    border-color: var(--color-primary) !important;
 }

 .CodeMirror .CodeMirror-code .cm-comment {
--- a/ui/scss/component/_radio.scss
+++ b/ui/scss/component/_radio.scss
@ -0,0 +1,54 @@
+$md-radio-checked-color: var(--color-primary);
+$md-radio-border-color: var(--input-border-color);
+$md-radio-size: 20px;
+$md-radio-checked-size: 10px;
+$md-radio-ripple-size: 15px;
+
+.form-field--radio {
+    position: relative;
+
+    label {
+      cursor: pointer;
+
+      &:before, &:after {
+        content: "";
+        position: absolute;
+        left:0;
+        top: 0;
+        border-radius: 50%;
+        transition: all .3s ease;
+        transition-property: transform, border-color;
+      }
+
+      &:before {
+        width: $md-radio-size;
+        height: $md-radio-size;
+        background: transparent;
+        border: 2px solid $md-radio-border-color;
+        cursor: pointer;
+      }
+
+      &:after {
+          top: $md-radio-size / 2 - $md-radio-checked-size / 2;
+          left: $md-radio-size / 2 - $md-radio-checked-size / 2;
+          width:$md-radio-checked-size;
+          height:$md-radio-checked-size;
+          transform: scale(0);
+          background:$md-radio-checked-color;
+      }
+
+    }
+
+    input[type="radio"] {
+        visibility: hidden;
+        margin-right: 16px;
+
+        &:checked + label:before {
+            border-color: $md-radio-checked-color;
+        }
+
+        &:checked + label:after {
+            transform: scale(1);
+        }
+    }
+}
--- a/ui/scss/component/_scrollbar.scss
+++ b/ui/scss/component/_scrollbar.scss
@ -1,12 +1,12 @@
 ::-webkit-scrollbar {
-    width: 7px;
+    width: 8px;
    overflow: auto;
 }

 ::-webkit-scrollbar-track {
    background: var(--scrollbar-track-bg);
    border-radius: var(--scrollbar-radius);
-    margin: 4px 0;
+    margin: 4px;
 }

 ::-webkit-scrollbar-thumb {