fix #678

ui/js/component/form.js

@@ -128,21 +128,21 @@ export class FormRow extends React.PureComponent {
     delete fieldProps.isFocus;
 
     return (
-      <div className="form-row">
+      <div
+        className={"form-row" + (this.state.isFocus ? " form-row--focus" : "")}
+      >
         {this.props.label && !renderLabelInFormField
           ? <div
               className={
                 "form-row__label-row " +
-                (this.props.labelPrefix ? "form-row__label-row--prefix" : "") +
-                (this.state.isFocus ? "focus " : "")
+                (this.props.labelPrefix ? "form-row__label-row--prefix" : "")
               }
             >
               <label
                 htmlFor={elementId}
                 className={
                   "form-field__label " +
-                  (this.state.isError ? "form-field__label--error" : " ") +
-                  (this.state.isFocus ? "focus" : " ")
+                  (this.state.isError ? "form-field__label--error" : " ")
                 }
               >
                 {this.props.label}

ui/js/component/formField/view.jsx

@@ -134,8 +134,6 @@ 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;
@@ -179,9 +177,7 @@ class FormField extends React.PureComponent {
           <label
             htmlFor={elementId}
             className={
-              "form-field__label " +
-              (isError ? "form-field__label--error" : "") +
-              (isCheck ? " checked" : "")
+              "form-field__label " + (isError ? "form-field__label--error" : "")
             }
           >
             {this.props.label}

ui/scss/component/_form-field.scss

@@ -18,15 +18,16 @@
   margin-right: 5px;
 }
 
+.form-row--focus {
+  .form-field__label, .form-field__prefix {
+    color: var(--color-primary) !important;
+  }
+}
+
 .form-field {
   display: inline-block;
   margin: 8px 0;
 
-  input[type="checkbox"],
-  input[type="radio"] {
-    cursor: pointer;
-  }
-
   select {
     transition: outline var(--transition-duration) var(--transition-type);
     box-sizing: border-box;
@@ -40,6 +41,12 @@
     }
   }
 
+  input[type="radio"], input[type="checkbox"], {
+    &:checked + .form-field__label,  {
+      color: var(--text-color);
+    }
+  }
+
   input[type="text"].input-copyable {
     background: var(--input-bg);
     color:  var(--input-disabled-color);
@@ -116,22 +123,11 @@
   display: block;
 }
 
-
 .form-field__label, .form-row__label {
   color: var(--form-label-color);
-  &[for] {  cursor: pointer; }
-  > input[type="checkbox"], input[type="radio"] {
-    margin-right: 6px;
+  &[for] {
+    cursor: pointer;
   }
-
-  &.focus {
-    color: var(--color-primary) !important;
-  }
-
-  &.checked {
-    color: var(--text-color) !important;
-  }
-
 }
 
 .form-row__label-row .form-field__label--error {