revert browser newux changes (#5714)

browser/app/js/browser/ChangePasswordModal.js

@@ -26,6 +26,7 @@ import {
   ModalHeader,
   OverlayTrigger
 } from "react-bootstrap"
+import InputGroup from "./InputGroup"
 
 export class ChangePasswordModal extends React.Component {
   constructor(props) {
@@ -113,55 +114,51 @@ export class ChangePasswordModal extends React.Component {
   render() {
     const { hideChangePassword } = this.props
     return (
-      <Modal bsSize="sm" animation={false} show={true} className="settings">
-        <Modal.Header>Change Password</Modal.Header>
-        <Modal.Body className="m-t-20">
-          <div className="form-group">
-            <label className="form-group__label">Access key</label>
-            <input
-              type="text"
-              value={this.state.accessKey}
-              onChange={this.accessKeyChange.bind(this)}
-              id="accessKey"
-              className="form-group__field"
-              name="accesskey"
-              required="required"
-              autoComplete="false"
-              readonly={this.state.keysReadOnly}
-            />
-            <i className="form-group__helper" />
-          </div>
-          <div className="form-group">
-            <label className="form-group__label">Secret key</label>
-            <input
-              type={this.state.secretKeyVisible ? "text" : "password"}
-              value={this.state.secretKey}
-              onChange={this.secretKeyChange.bind(this)}
-              id="secretKey"
-              className="form-group__field"
-              name="secretKey"
-              required="required"
-              autoComplete="false"
-              readonly={this.state.keysReadOnly}
-            />
-            <i className="form-group__helper" />
-            <i
-              onClick={this.secretKeyVisible.bind(
-                this,
-                !this.state.secretKeyVisible
-              )}
-              className={
-                "form-group__addon zmdi " +
-                (this.state.secretKeyVisible ? "zmdi-eye-off" : "zmdi-eye")
-              }
-            />
-          </div>
-        </Modal.Body>
+      <Modal bsSize="sm" animation={false} show={true}>
+        <ModalHeader>Change Password</ModalHeader>
+        <ModalBody className="m-t-20">
+          <InputGroup
+            value={this.state.accessKey}
+            onChange={this.accessKeyChange.bind(this)}
+            id="accessKey"
+            label="Access Key"
+            name="accesskey"
+            type="text"
+            spellCheck="false"
+            required="required"
+            autoComplete="false"
+            align="ig-left"
+            readonly={this.state.keysReadOnly}
+          />
+          <i
+            onClick={this.secretKeyVisible.bind(
+              this,
+              !this.state.secretKeyVisible
+            )}
+            className={
+              "toggle-password fa fa-eye " +
+              (this.state.secretKeyVisible ? "toggled" : "")
+            }
+          />
+          <InputGroup
+            value={this.state.secretKey}
+            onChange={this.secretKeyChange.bind(this)}
+            id="secretKey"
+            label="Secret Key"
+            name="accesskey"
+            type={this.state.secretKeyVisible ? "text" : "password"}
+            spellCheck="false"
+            required="required"
+            autoComplete="false"
+            align="ig-left"
+            readonly={this.state.keysReadOnly}
+          />
+        </ModalBody>
         <div className="modal-footer">
           <button
             id="generate-keys"
             className={
-              "btn btn--link " + (this.state.keysReadOnly ? "hidden" : "")
+              "btn btn-primary " + (this.state.keysReadOnly ? "hidden" : "")
             }
             onClick={this.generateAuth.bind(this)}
           >
@@ -170,7 +167,7 @@ export class ChangePasswordModal extends React.Component {
           <button
             id="update-keys"
             className={
-              "btn btn--link " + (this.state.keysReadOnly ? "hidden" : "")
+              "btn btn-success " + (this.state.keysReadOnly ? "hidden" : "")
             }
             onClick={this.setAuth.bind(this)}
           >
@@ -178,7 +175,7 @@ export class ChangePasswordModal extends React.Component {
           </button>
           <button
             id="cancel-change-password"
-            className="btn btn--link"
+            className="btn btn-link"
             onClick={hideChangePassword}
           >
             Cancel