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

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

Signed-off-by: Abhishek Desai <[email protected]>

Author: Abhishek Desai

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>

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;

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;
+}