update input styles

ui/dist/themes/dark.css

@@ -15,9 +15,13 @@
     --text-color: #FFF;
     --text-selection-bg: rgba(0,150,136, 0.95);
 
+    /* Form */
+    --form-label-color: rgba(255, 255, 255, 0.54);
+
     /* Input */
     --input-bg: transparent;
-    --input-border-color: rgba(255,255,255, 0.25);
+    --input-border-color: rgba(255,255,255, 0.36);
+    --input-hover-border-color: rgba(255, 255, 255, 0.75);
 
     /* Search */
     --search-bg: rgba(0,0,0, 0.45);

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,14 @@ export class FormRow extends React.PureComponent {
     return this._field.getOptions();
   }
 
-  focus() {
-    this._field.focus();
+  onFocus() {
+    //this._field.focus();
+    this.setState({ isFocus: true });
+  }
+
+  onBlur() {
+    //this._field.focus();
+    this.setState({ isFocus: false });
   }
 
   render() {
@@ -117,6 +127,7 @@ export class FormRow extends React.PureComponent {
     }
     delete fieldProps.helper;
     delete fieldProps.errorMessage;
+    delete fieldProps.isFocus;
 
     return (
       <div className="form-row">
@@ -124,14 +135,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 +156,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() {
@@ -155,6 +152,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 +

ui/scss/_vars.scss

@@ -53,13 +53,17 @@ $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.34);
+  --input-hover-border-color: rgba(0, 0, 0, 0.75);
 
   /* Select */
   --select-bg: var(--color-bg-alt);

ui/scss/component/_form-field.scss

@@ -103,22 +103,36 @@ input[readonly]:focus {
     &.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);
+  textarea,
+  input[type="text"],
+  input[type="password"],
+  input[type="email"],
+  input[type="number"],
+  input[type="search"],
+  input[type="date"]{
+
+    & ::-webkit-input-placeholder { /* WebKit browsers */
+    color: var(--input-color);
+     opacity: 0.54 !important;
+   }
+
+    caret-color:  var(--color-primary);
+
+    &:focus {
+      border-color: var(--color-primary) !important;
       background: var(--input-active-bg);
     }
+    &:hover {
+      border-color: var(--input-hover-border-color);
+    }
+
+  }
 
   textarea {
     padding: 2px;
@@ -129,12 +143,18 @@ input[readonly]:focus {
   display: block;
 }
 
+
 .form-field__label, .form-row__label {
-  color: var(--color-label);
+  color: var(--form-label-color);
   &[for] {  cursor: pointer; }
   > input[type="checkbox"], input[type="radio"] {
     margin-right: 6px;
   }
+
+  &.focus {
+    color: var(--color-primary) !important;
+  }
+
 }
 
 .form-row__label-row .form-field__label--error {