ui: style login page

Add some initial styling to the login page.

Contributes to cockroachdb#24939.

Release note: None

pkg/ui/src/views/login/loginPage.styl

@@ -0,0 +1,43 @@
+@require "~styl/base/palette.styl"
+
+.login-page
+  display flex
+  align-items center
+  justify-content center
+  height 100%
+  width 100%
+  position absolute
+
+  .heading
+    text-transform none
+    letter-spacing default
+
+  .aside
+    margin-top 12px
+    line-height 24px
+    letter-spacing 1px
+    color #666
+    width 350px
+
+  .input-text
+    letter-spacing 2px
+    line-height 17px
+    padding 12px 24px
+    vertical-align middle
+    border 1px solid $button-border-color
+    border-radius 4px
+    margin 12px 0
+    color $body-color
+
+  .submit-button
+    text-transform uppercase
+    font-size 14px
+    letter-spacing 2px
+    line-height 17px
+    padding 12px 24px
+    vertical-align middle
+    border 0px none
+    border-radius 4px
+    margin 24px 0
+    color $background-color
+    background-color $link-color

pkg/ui/src/views/login/loginPage.tsx

@@ -5,6 +5,9 @@ import { withRouter, WithRouterProps } from "react-router";
 
 import { doLogin, LoginAPIState } from "src/redux/login";
 import { AdminUIState } from "src/redux/state";
+import docsURL from "src/util/docs";
+
+import "./loginPage.styl";
 
 interface LoginPageProps {
   loginState: LoginAPIState;
@@ -54,27 +57,39 @@ class LoginPage extends React.Component<LoginPageProps & WithRouterProps, LoginP
 
   render() {
     return (
-      <div>
+      <div className="login-page">
         <Helmet>
           <title>Login</title>
         </Helmet>
         <section className="section">
-          <h1>Login</h1>
+          <h1 className="heading">Sign in to the Console</h1>
+          <p className="aside">
+            Please contact your database administrator for
+            account access and password restoration.
+            For more information, see{" "}
+            <a href={docsURL("admin-ui-overview.html")}>the documentation</a>.
+          </p>
           {this.props.loginState.error
             ? <div className="login-page__error">Login error: {this.props.loginState.error}</div>
             : null}
           <form onSubmit={this.handleSubmit}>
             <input
               type="text"
+              className="input-text"
               onChange={this.handleUpdateUsername}
               value={this.state.username}
             /><br />
             <input
               type="password"
+              className="input-text"
               onChange={this.handleUpdatePassword}
               value={this.state.password}
             /><br />
-            <input type="submit" disabled={this.props.loginState.inProgress} />
+            <input
+              type="submit"
+              className="submit-button"
+              disabled={this.props.loginState.inProgress}
+            />
           </form>
         </section>
       </div>