mgr/dashboard: amend the look & feel a bit

Amend the look & feel a bit in order to be more
similar to the login form.

Fixes: https://tracker.ceph.com/issues/48222
Signed-off-by: Tatjana Dehler <tdehler@suse.com>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login-password-form/login-password-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login-password-form/login-password-form.component.html
index 07c0b6d3bfd3c07558a325483b913d94fed56a2e..84fc9c663f2ef3596c8d69501d4ef915cb895b8f 100755 (executable)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login-password-form/login-password-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login-password-form/login-password-form.component.html
@@ -91,6 +91,7 @@
                       btnClass="btn-block"
                       (submitAction)="onSubmit()"
                       [form]="userForm"
+                      [disabled]="userForm.invalid"
                       i18n="form action button|Example: Create Pool@@formActionButton">
       {{ action | titlecase }} {{ resource | upperFirst }}
     </cd-submit-button>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login-password-form/login-password-form.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login-password-form/login-password-form.component.scss
index 25df0569e2b233a3e2ab072e5c1c4096a8ab2b4f..15addd1e8216273866704bb5d007f8c15305b94d 100755 (executable)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login-password-form/login-password-form.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login-password-form/login-password-form.component.scss
@@ -1,20 +1,36 @@
+@use 'sass:map';
 @use './src/styles/vendor/variables' as vv;
 
+$dark-secondary: darken(vv.$secondary, 4%);
+
 ::ng-deep cd-login-password-form {
   h4 {
     margin: 0 0 30px;
   }
 
+  .form-group {
+    background-color: $dark-secondary;
+    border-left: 4px solid vv.$white;
+
+    &:focus-within {
+      border-left: 4px solid map.get(vv.$theme-colors, 'accent');
+    }
+  }
+
   .btn-password,
   .btn-password:focus,
   .form-control,
   .form-control:focus {
-    background-color: vv.$gray-800;
-    color: vv.$white;
+    background-color: $dark-secondary;
+    border: 0;
+    box-shadow: none;
+    color: vv.$body-color-bright;
+    filter: none;
+    outline: none;
   }
 
   .form-control::placeholder {
-    color: vv.$gray-500;
+    color: vv.$gray-600;
   }
 
   .btn-password:focus {
@@ -25,3 +41,28 @@
     margin-left: 5px;
   }
 }
+
+// This will override the colors applied by chrome
+@keyframes autofill {
+  to {
+    background-color: $dark-secondary;
+    color: vv.$body-color-bright;
+  }
+}
+
+input:-webkit-autofill {
+  animation-fill-mode: both;
+  animation-name: autofill;
+  border-radius: 0;
+  box-shadow: 0 0 0 1000px $dark-secondary inset;
+  -webkit-text-fill-color: vv.$body-color-bright;
+  transition-property: none;
+}
+
+.invalid-feedback {
+  padding-left: 9px;
+}
+
+.is-invalid.cd-form-control {
+  border-color: transparent;
+}