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>

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 47fffd84504ce9e3fa122948b7fae8d3a06b1aee..603da2e16771202c10a344ce5013e374c74e29fc 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 f67298732645505a75909fe2aacafb307ff7fa0a..ca286cd0a816d578adc7b75e942bfefa42fcd309 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/styles.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles.scss
@@ -231,3 +231,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 !important;
+  -webkit-text-fill-color: inherit !important;
+  transition: background-color 5000s ease-in-out 0s;
+}