Pretty up the login page to match everywhere else

src/Foundation.hs

@@ -215,6 +215,7 @@ instance YesodAuth App where
       where loginForm :: Route App -> Widget
             loginForm action = do
               mtok <- reqToken <$> getRequest
+              setTitle "log in"
               $(widgetFile "auth/login")
     authHttpManager = getHttpManager
 

templates/auth/login.cassius

@@ -1,3 +1,14 @@
 body > main
   display: flex
   align-items: center
+  justify-content: center
+  .form-control
+    background-color: #1d1f21
+    color: #c9cacc
+    &:focus
+      background-color: #404449
+      color: #c9cacc
+  .input-group-addon
+    background-color: #000
+    color: #fff
+    width: 2.4rem

templates/auth/login.hamlet

@@ -5,20 +5,20 @@
   <div .card.bg-dark>
     <div .card-body>
       <div .form-group>
-        <label .sr-only for="auth-login-username">Username
+        <label .sr-only for="auth-login-username">username
         <div .input-group>
           <span .input-group-addon aria-hidden>
-            <i .fa.fa-user>
-          <input #auth-login-username .form-control type="text" name="username" required>
+            <i .fa.fa-at>
+          <input #auth-login-username .form-control type="text" name="username" placeholder="username" required>
 
       <div .form-group>
-        <label .sr-only for="auth-login-password">Password
+        <label .sr-only for="auth-login-password">password
         <div .input-group>
           <span .input-group-addon aria-hidden>
-            <i .fa.fa-key>
-          <input #auth-login-password .form-control type="password" name="password" required>
+            <i .fa.fa-asterisk>
+          <input #auth-login-password .form-control type="password" name="password" placeholder="password" required>
 
     <div .card-footer>
       <button type="submit" class="btn btn-primary">
         <i .fa.fa-sign-in>
-        Log In
+        log in