reset flow fixes

resources/frontend_client/app/auth/partials/forgot_password.html

@@ -13,7 +13,7 @@
             </div>
             <div class="Grid-cell" ng-show="!sentNotification">
                 <form class="Login-wrapper bg-white Form-new bordered rounded shadowed" name="form" novalidate>
-                    <h3 class="Login-header mb3">Forgot password</h3>
+                    <h3 class="Login-header Form-offset mb3">Forgot password</h3>
 
                     <mb-form-message form="form"></mb-form-message>
 
@@ -31,9 +31,11 @@
                 </form>
             </div>
             <div class="Grid-cell" ng-show="sentNotification">
-                <div class="bg-white Form-new bordered rounded shadowed">
-                    <!-- TODO: need large success graphic -->
-                    <p>Check your email for instructions on how to reset your password.</p>
+                <div class="SuccessGroup bg-white p4 Form-new bordered rounded shadowed">
+                    <div class="SuccessMark">
+                        <cv-check-icon></cv-check-icon>
+                    </div>
+                    <p class="text-centered full">Check your email for instructions on how to reset your password.</p>
                 </div>
             </div>
         </div>

resources/frontend_client/app/auth/partials/login.html

@@ -13,7 +13,7 @@
             </div>
             <div class="Grid-cell">
                 <form class="Login-wrapper bg-white Form-new bordered rounded shadowed" name="form" novalidate>
-                    <h3 class="Login-header mb3">Sign in to Metabase</h3>
+                    <h3 class="Login-header Form-offset mb3">Sign in to Metabase</h3>
 
                     <mb-form-message form="form"></mb-form-message>
 

resources/frontend_client/app/auth/partials/password_reset.html

@@ -13,9 +13,9 @@
             </div>
             <div class="Grid-cell" ng-show="!resetSuccess">
                 <form class="Login-wrapper bg-white Form-new bordered rounded shadowed" name="form" novalidate>
-                    <h3 class="Login-header mb3">New password</h3>
+                    <h3 class="Login-header Form-offset mb3">New password</h3>
 
-                    <p>To keep your data secure, passwords need to be at least <b>8 characters</b> and include <b>at least one uppercase letter</b>, <b>one digit</b>, and <b>one special character.</b></p>
+                    <p class="Form-offset text-grey-3 mb3">To keep your data secure, passwords need to be at least <b>8 characters</b> and include <b>at least one uppercase letter</b>, <b>one digit</b>, and <b>one special character.</b></p>
 
                     <mb-form-message></mb-form-message>
 
@@ -39,8 +39,11 @@
                 </form>
             </div>
             <div class="Grid-cell" ng-show="resetSuccess">
-                <div class="bg-white Form-new bordered rounded shadowed">
+                <div class="SuccessGroup bg-white p4 Form-new bordered rounded shadowed">
                     <!-- TODO: need large success graphic -->
+                    <div class="SuccessMark">
+                        <cv-check-icon></cv-check-icon>
+                    </div>
                     <p>Your password has been reset.</p>
                     <p><a class="Button Button--primary">Sign in with your new password</a></p>
                 </div>

resources/frontend_client/app/components/icons/icons.js

@@ -9,6 +9,7 @@
         'Close',
         'ChevronDown',
         'ChevronRight',
+        'Check',
         'Dashboards',
         'Explore',
         'Gear',
@@ -52,4 +53,3 @@
     }
 
 }());
-

resources/frontend_client/app/css/login.css

@@ -37,3 +37,18 @@
 .brand-bridge {
     margin-left: -115px;
 }
+
+.SuccessGroup {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    color: var(--success-color);
+}
+
+.SuccessMark {
+    display: flex;
+    padding: 1em;
+    border: 3px solid var(--success-color);
+    border-radius: 99px;
+    color: var(--success-color);
+}