use our own UI components (#7295)

frontend/src/metabase/auth/containers/LoginApp.jsx

@@ -3,10 +3,11 @@ import { findDOMNode } from "react-dom";
 import { Link } from "react-router";
 import { connect } from "react-redux";
 
-import cx from "classnames";
 import { t } from "c-3po";
 import AuthScene from "../components/AuthScene.jsx";
 import SSOLoginButton from "../components/SSOLoginButton.jsx";
+import Button from "metabase/components/Button";
+import CheckBox from "metabase/components/CheckBox";
 import FormField from "metabase/components/form/FormField.jsx";
 import FormLabel from "metabase/components/form/FormLabel.jsx";
 import FormMessage from "metabase/components/form/FormMessage.jsx";
@@ -34,6 +35,7 @@ export default class LoginApp extends Component {
     this.state = {
       credentials: {},
       valid: false,
+      rememberMe: true,
     };
   }
 
@@ -198,21 +200,22 @@ export default class LoginApp extends Component {
               </FormField>
 
               <div className="Form-field">
-                <ul className="Form-offset">
-                  <input name="remember" type="checkbox" defaultChecked />{" "}
-                  <label className="inline-block">{t`Remember Me:`}</label>
-                </ul>
+                <div className="Form-offset flex align-center">
+                  <CheckBox
+                    name="remember"
+                    checked={this.state.rememberMe}
+                    onChange={() =>
+                      this.setState({ rememberMe: !this.state.rememberMe })
+                    }
+                  />
+                  <span className="ml1">{t`Remember Me`}</span>
+                </div>
               </div>
 
-              <div className="Form-actions p2 Grid Grid--full md-Grid--1of2">
-                <button
-                  className={cx("Button Grid-cell", {
-                    "Button--primary": this.state.valid,
-                  })}
-                  disabled={!this.state.valid}
-                >
+              <div className="Form-actions p4">
+                <Button primary={this.state.valid} disabled={!this.state.valid}>
                   {t`Sign in`}
-                </button>
+                </Button>
                 <Link
                   to={
                     "/auth/forgot_password" +
@@ -220,7 +223,7 @@ export default class LoginApp extends Component {
                       ? "?email=" + this.state.credentials.username
                       : "")
                   }
-                  className="Grid-cell py2 sm-py0 text-medium md-text-right text-centered flex-full link"
+                  className="Grid-cell py2 sm-py0 md-text-right text-centered flex-full link"
                   onClick={e => {
                     window.OSX ? window.OSX.resetPassword() : null;
                   }}