mgr/dashboard: fixed input field black after selecting an autofill browser input

fixes: https://tracker.ceph.com/issues/70720

Signed-off-by: Abhishek Desai <abhishek.desai1@ibm.com>
(cherry picked from commit 89e5e65ace6a303b134d8cad9e2db4988ae4602b)

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/modal/modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/modal/modal.component.html
index f9a328666d54eab907e2f83cc52e8b7638f05352..6f1cf42cea282cd0f785e67cd8ef9850fc066938 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/modal/modal.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/modal/modal.component.html
@@ -1,6 +1,6 @@
 <div [ngClass]="pageURL ? 'modal' : ''">
   <div [ngClass]="pageURL ? 'modal-dialog' : ''">
-    <div class="modal-content">
+    <div class="modal-content content-theme">
       <div class="modal-header">
         <h4 class="modal-title float-start">
           <ng-content select=".modal-title"></ng-content>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/modal/modal.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/modal/modal.component.scss
index 1681472cf859cbd2d6df148f3f0d1c9ba28bd893..1505dcdc73f7213e7a1e702d6adb9c2375bc40b8 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/modal/modal.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/modal/modal.component.scss
@@ -1,4 +1,5 @@
 @use './src/styles/defaults/mixins';
+@use './src/styles/themes/content';
 
 .modal-header {
   @include mixins.hf;

diff --git a/src/pybind/mgr/dashboard/frontend/src/styles.scss b/src/pybind/mgr/dashboard/frontend/src/styles.scss
index 05572fd4cb12f6f27cc37a836d952d9cfa100287..b09bbd5343b99c33bd02946f75e33a39192cdcf4 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/styles.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles.scss
@@ -229,3 +229,14 @@ legend {
   float: none;
   margin-top: 1rem;
 }
+
+// Fix for overridden browser autofill CSS.
+// This needs to be removed when using Carbon forms.
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active {
+  box-shadow: 0 0 0 10px $white inset;
+  -webkit-text-fill-color: inherit;
+  transition: background-color 5000s ease-in-out 0s;
+}