Merge branch 'ux-patch'

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.70);
-    --input-border-color: rgba(255,255,255, 0.25);
+    --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);

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__inner file-tile__row"}>
-            <div className="card__title-primary">
+            {channelName && <CardMedia title={channelName} thumbnail={null} />}
-              <h3>
+            <div className="file-tile__content">
-                <TruncatedText lines={1}>{uri}</TruncatedText>
+              <div className="card__title-primary">
-              </h3>
+                <h3>
-            </div>
+                  <TruncatedText lines={1}>{channelName || uri}</TruncatedText>
-            <div className="card__content card__subtext">
+                </h3>
-              {isResolvingUri &&
+              </div>
-                <BusyMessage message={__("Resolving channel")} />}
+              <div className="card__content card__subtext">
-              {totalItems > 0 &&
+                {isResolvingUri &&
-                <span>
+                  <BusyMessage message={__("Resolving channel")} />}
-                  This is a channel with {totalItems}{" "}
+                {totalItems > 0 &&
-                  {totalItems === 1 ? " item" : " items"} inside of it.
+                  <span>
-                </span>}
+                    This is a channel with {totalItems}{" "}
-              {!isResolvingUri &&
+                    {totalItems === 1 ? " item" : " items"} inside of it.
-                !totalItems &&
+                  </span>}
-                <span className="empty">This is an empty channel.</span>}
+                {!isResolvingUri &&
+                  !totalItems &&
+                  <span className="empty">This is an empty channel.</span>}
+              </div>
             </div>
           </div>
         </div>

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">

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() {
+  onFocus() {
-    this._field.focus();
+    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

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
+        {element}
-          ? <label
+        {renderElementInsideLabel &&
-              htmlFor={elementId}
+          <label
-              className={
+            htmlFor={elementId}
-                "form-field__label " +
+            className={
-                (isError ? "form-field__label--error" : "")
+              "form-field__label " +
-              }
+              (isError ? "form-field__label--error" : "") +
-            >
+              (isCheck ? " checked" : "")
-              {element}
+            }
-              {this.props.label}
+          >
-            </label>
+            {this.props.label}
-          : element}
+          </label>}
         {formFieldFileSelectorTypes.includes(this.props.type)
           ? <FileSelector
               type={this.props.type}

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 {

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" />
       );
     }

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"

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>}

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";

ui/js/modal/modalRemoveFile/view.jsx

@@ -50,25 +50,21 @@ class ModalRemoveFile extends React.PureComponent {
         </p>
 
         <section>
-          <label>
+          <FormField
-            <FormField
+            type="checkbox"
-              type="checkbox"
+            checked={deleteChecked}
-              checked={deleteChecked}
+            onClick={this.handleDeleteCheckboxClicked.bind(this)}
-              onClick={this.handleDeleteCheckboxClicked.bind(this)}
+            label={__("Delete this file from my computer")}
-            />{" "}
+          />
-            {__("Delete this file from my computer")}
-          </label>
         </section>
         {claimIsMine &&
           <section>
-            <label>
+            <FormField
-              <FormField
+              type="checkbox"
-                type="checkbox"
+              checked={abandonClaimChecked}
-                checked={abandonClaimChecked}
+              onClick={this.handleAbandonClaimCheckboxClicked.bind(this)}
-                onClick={this.handleAbandonClaimCheckboxClicked.bind(this)}
+              label={__("Abandon the claim for this URI")}
-              />{" "}
+            />
-              {__("Abandon the claim for this URI")}
-            </label>
           </section>}
       </Modal>
     );

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>

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 */

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);

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";

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);
 }
 

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;

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;
+      }
+    }
+  }
+
+}

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;

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%;
+  }
 }

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

ui/scss/component/_markdown-editor.scss

@@ -1,20 +1,22 @@
 .CodeMirror {
-    background: var(--input-active-bg) !important;
+    background: var(--color-canvas) !important;
-    border: 1px solid var(--input-border-color) !important;
+    border: 0px !important;
+    border-radius: 0px !important;
     color: var(--text-color) !important;
-}
+    box-shadow: var(--box-shadow-layer);
-
-.CodeMirror-fullscreen {
-    background: var(--input-bg);
 }
 
 .editor-toolbar {
-    border: 1px solid var(--input-border-color) !important;
+    opacity: 1 !important;
-    border-bottom: 0 !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 {

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);
+        }
+    }
+}

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 {