argoproj#44 Redesign confirm reset password page

saas/axops/src/ui/src/app/views/reset-password/reset-confirmation/reset-confirmation.html

@@ -1,10 +1,23 @@
-<div class="login">
-    <div class="login__box">
-        <div class="login__logo login__logo--neg"></div>
-        <h4>Your password was changed</h4>
-        <div>Check your email and click the link to confirm change.</div>
-        <div class="login__more-row">
-            <a routerLink="/login">{{ 'Go to Login' | translate }}</a>
+<div class="setup">
+    <div class="setup__shortcut">
+        <div class="argo"></div>
+        <div class="logo"></div>
+    </div>
+
+    <div class="setup__box">
+        <div class="setup__header">
+            <h1>{{ 'Password Reset Complete' | translate }}?</h1>
+        </div>
+        <div class="setup__content setup__content--reset-password-confirm">
+            <p>
+                {{ 'Your password has been updated. Now you continue to Sign In to Argo.' | translate }}
+            </p>
+
+            <div class="setup__btn-center setup__btn-center--additional-top-margin">
+                <a axButtonWave class="ax-button ax-button--base" routerLink="/login">
+                    {{ 'Sign In' | translate }}
+                </a>
+            </div>
         </div>
     </div>
-</div>
+</div>

saas/axops/src/ui/src/app/views/setup/setup.scss

@@ -54,7 +54,7 @@ $setup-box-content-shadow: 3px 3px 20px black;
 
     &__box {
         position: fixed;
-        top: 45%;
+        top: 40%;
         left: 50%;
         transform: translate(-50%, -50%);
     }
@@ -94,7 +94,7 @@ $setup-box-content-shadow: 3px 3px 20px black;
             width: 500px;
         }
 
-        &--forgot-password-confirm {
+        &--forgot-password-confirm, &--reset-password-confirm {
             width: 635px;
         }
     }