Fix input validation styles (#1778)

* Fix input validation styles

* Remove green borders

common/components/NonceField.scss

@@ -34,7 +34,7 @@
   &-refresh {
     position: absolute;
     right: 0;
-    bottom: 0rem;
+    bottom: 1rem;
     padding: 0.75rem 1rem;
   }
 }

common/components/WalletDecrypt/components/DeterministicWalletsModal.scss

@@ -37,12 +37,6 @@
       padding-right: $space;
       border: none;
     }
-
-    .form-control {
-      display: inline-block;
-      width: auto;
-      margin: 0 0 0 10px;
-    }
   }
 
   &-addresses {

common/components/ui/Input.scss

@@ -85,13 +85,13 @@
         border-color: $brand-danger;
         box-shadow: inset 0px 0px 0px 1px $brand-danger;
       }
+      &.valid.has-value {
+        border-color: #8dd17b;
+        box-shadow: inset 0px 0px 0px 1px #8dd17b;
+      }
       &:focus {
         border-color: #4295bc;
         box-shadow: inset 0px 0px 0px 1px #4295bc;
-        &.valid {
-          border-color: #8dd17b;
-          box-shadow: inset 0px 0px 0px 1px #8dd17b;
-        }
       }
     }
   }

common/components/ui/Input.tsx

@@ -28,10 +28,7 @@ class Input extends React.Component<OwnProps, State> {
     const classname = classnames(
       this.props.className,
       'input-group-input',
-      'form-control',
+      this.state.isStateless ? '' : isValid ? (showValidAsPlain ? '' : '') : `invalid`,
-      this.state.isStateless
-        ? ''
-        : isValid ? (showValidAsPlain ? '' : `is-valid valid`) : `is-invalid invalid`,
       this.state.hasBlurred && 'has-blurred',
       hasValue && 'has-value'
     );

common/components/ui/OldDropdown.tsx

@@ -70,14 +70,7 @@ export default class DropdownComponent<T> extends PureComponent<Props<T>, State>
 
     return (
       <ul className={menuClass} style={searchable ? searchableStyle : undefined}>
-        {searchable && (
+        {searchable && <input placeholder={'Search'} onChange={onSearchChange} value={search} />}
-          <input
-            className="form-control"
-            placeholder={'Search'}
-            onChange={onSearchChange}
-            value={search}
-          />
-        )}
 
         {options
           .filter(option => {

common/components/ui/SimpleSelect.tsx

@@ -1,27 +0,0 @@
-import React, { PureComponent } from 'react';
-
-interface Props {
-  value?: string;
-  options: string[];
-  onChange(event: React.FormEvent<HTMLSpanElement>): void;
-}
-
-export default class SimpleSelect extends PureComponent<Props, {}> {
-  public render() {
-    return (
-      <select
-        value={this.props.value || this.props.options[0]}
-        className="form-control"
-        onChange={this.props.onChange}
-      >
-        {this.props.options.map((obj, i) => {
-          return (
-            <option value={obj} key={i}>
-              {obj}
-            </option>
-          );
-        })}
-      </select>
-    );
-  }
-}

common/components/ui/TextArea.tsx

@@ -27,10 +27,7 @@ class TextArea extends React.Component<OwnProps, State> {
     const classname = classnames(
       this.props.className,
       'input-group-input',
-      'form-control',
+      this.state.isStateless ? '' : isValid ? (showValidAsPlain ? '' : '') : `invalid`,
-      this.state.isStateless
-        ? ''
-        : isValid ? (showValidAsPlain ? '' : `is-valid valid`) : `is-invalid invalid`,
       this.state.hasBlurred && 'has-blurred'
     );
 

common/containers/Tabs/Swap/components/CurrencySwap.tsx

@@ -316,7 +316,7 @@ export default class CurrencySwap extends PureComponent<Props, State> {
                 <div className="input-group input-group-inline">
                   <Input
                     id="origin-swap-input"
-                    isValid={this.isMinMaxValid(origin.amount, origin.label, destination.label)}
+                    isValid={!originErr}
                     type="number"
                     placeholder={translateRaw('SEND_AMOUNT_SHORT')}
                     value={isNaN(origin.amount) ? '' : origin.amount}
@@ -336,7 +336,7 @@ export default class CurrencySwap extends PureComponent<Props, State> {
                   <div className="input-group-header">{translate('SWAP_RECEIVE_INPUT_LABEL')}</div>
                   <Input
                     id="destination-swap-input"
-                    isValid={this.isMinMaxValid(origin.amount, origin.label, destination.label)}
+                    isValid={!destinationErr}
                     type="number"
                     placeholder={translateRaw('SEND_AMOUNT_SHORT')}
                     value={isNaN(destination.amount) ? '' : destination.amount}

common/containers/Tabs/Swap/components/SupportFooter.tsx

@@ -87,7 +87,7 @@ Rate: ${rates[pair].rate} ${origin.label}/${destination.label}`;
               isValid={true}
               showValidAsPlain={true}
               defaultValue={fallbackBody}
-              className="form-control input-sm"
+              className="input-sm"
               rows={9}
             />
           ) : null}

common/sass/mixins.scss

@@ -6,7 +6,6 @@
   padding: 0;
   background: none;
   border: none;
-  z-index: 999;
   cursor: pointer;
 }
 

common/sass/styles/overrides/forms.scss

@@ -12,12 +12,6 @@ label {
   }
 }
 
-label + .form-control,
-label + input,
-label + textarea {
-  margin-top: 0;
-}
-
 input[type='radio'],
 input[type='checkbox'] {
   margin: 3px 0 0;
@@ -29,24 +23,6 @@ input[readonly] {
   cursor: text !important;
 }
 
-.form-control {
-  margin-bottom: $space-sm;
-  transition: $transition;
-  padding: $input-padding;
-  @include mono;
-
-  &:focus {
-    border-color: $input-border-focus;
-    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 1px rgba($brand-primary, 0.5);
-  }
-}
-
-input.form-control,
-select.form-control {
-  padding-top: 0;
-  padding-bottom: 0;
-}
-
 .form-group {
   display: block;
   margin-bottom: $form-group-margin-bottom;
@@ -58,31 +34,6 @@ select.form-control {
   font-weight: 500;
 }
 
-// Custom feedback classes
-@mixin form-control-state($color) {
-  border-color: lighten($color, 20%);
-  @include input-shadow($color);
-
-  &:focus {
-    border-color: lighten($color, 5%);
-    @include input-focus-shadow($color);
-  }
-}
-
-.form-control {
-  &.is-valid {
-    @include form-control-state($brand-success);
-  }
-
-  &.is-invalid {
-    @include form-control-state($brand-danger);
-  }
-
-  &.is-semivalid {
-    @include form-control-state($brand-warning);
-  }
-}
-
 .help-block {
   &.is-valid {
     color: $brand-success;