Browser: Update UI with new components and elements (#5671)

browser/app/js/browser/Login.js

@@ -16,11 +16,9 @@
 
 import React from "react"
 import { connect } from "react-redux"
-import classNames from "classnames"
 import logo from "../../img/logo.svg"
 import Alert from "../alert/Alert"
 import * as actionsAlert from "../alert/actions"
-import InputGroup from "./InputGroup"
 import web from "../web"
 import { Redirect } from "react-router-dom"
 
@@ -42,7 +40,7 @@ export class Login extends React.Component {
     web
       .Login({
         username: document.getElementById("accessKey").value,
-        password: document.getElementById("secretKey").value
+        password: document.getElementById("secretKey").value,
       })
       .then(res => {
         history.push("/")
@@ -74,39 +72,37 @@ export class Login extends React.Component {
     return (
       <div className="login">
         {alertBox}
-        <div className="l-wrap">
-          <form onSubmit={this.handleSubmit.bind(this)}>
-            <InputGroup
-              className="ig-dark"
-              label="Access Key"
-              id="accessKey"
-              name="username"
-              type="text"
-              spellCheck="false"
-              required="required"
-              autoComplete="username"
-            />
-            <InputGroup
-              className="ig-dark"
-              label="Secret Key"
-              id="secretKey"
-              name="password"
-              type="password"
-              spellCheck="false"
-              required="required"
-              autoComplete="new-password"
-            />
-            <button className="lw-btn" type="submit">
-              <i className="fa fa-sign-in" />
-            </button>
+        <div className="login__inner">
+          <div className="login__header">
+            <img className="login__logo" src={logo} alt="" />
+            <div className="login__host">{window.location.host}</div>
+          </div>
+          <form className="login__form" onSubmit={this.handleSubmit.bind(this)}>
+            <div className="form-group">
+              <input
+                placeholder="Access Key"
+                type="text"
+                id="accessKey"
+                className="form-group__field"
+                spellCheck="false"
+                required="required"
+              />
+              <i className="form-group__helper" />
+            </div>
+            <div className="form-group">
+              <input
+                placeholder="Secret Key"
+                type="password"
+                id="secretKey"
+                className="form-group__field"
+                spellCheck="false"
+                required="required"
+              />
+              <i className="form-group__helper" />
+            </div>
+            <button className="login__btn" type="submit" />
           </form>
         </div>
-        <div className="l-footer">
-          <a className="lf-logo" href="">
-            <img src={logo} alt="" />
-          </a>
-          <div className="lf-server">{window.location.host}</div>
-        </div>
       </div>
     )
   }
@@ -115,8 +111,13 @@ export class Login extends React.Component {
 const mapDispatchToProps = dispatch => {
   return {
     showAlert: (type, message) =>
-      dispatch(actionsAlert.set({ type: type, message: message })),
-    clearAlert: () => dispatch(actionsAlert.clear())
+      dispatch(
+        actionsAlert.set({
+          type: type,
+          message: message,
+        }),
+      ),
+    clearAlert: () => dispatch(actionsAlert.clear()),
   }
 }