OS-3010. Set custom background color for autocompleted authorization …

…fields
hystax · Jan 9, 2025 · effaa52 · effaa52
1 parent 1d94690
commit effaa52
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 60 deletions.
diff --git a/ngui/ui/src/components/PasswordInput/PasswordInput.test.tsx b/ngui/ui/src/components/PasswordInput/PasswordInput.test.tsx
diff --git a/ngui/ui/src/components/PasswordInput/PasswordInput.tsx b/ngui/ui/src/components/PasswordInput/PasswordInput.tsx
diff --git a/ngui/ui/src/components/PasswordInput/index.ts b/ngui/ui/src/components/PasswordInput/index.ts
diff --git a/ngui/ui/src/theme.ts b/ngui/ui/src/theme.ts
@@ -10,6 +10,8 @@ import { isEmpty as isEmptyObject } from "utils/objects";
 const getLighten = (color, lightenAlpha = 0.2) => lighten(color, lightenAlpha);
 const getDarken = (color, darkenAlpha = 0.3) => darken(color, darkenAlpha);
 
+const getWebkitAutofillBackgroundColor = (theme) => lighten(theme.palette.lightBlue.main, 0.9);
+
 export const isMedia = (property) => property.startsWith("@media");
 
 const applyPaletteSettings = (settings) => {
@@ -361,9 +363,13 @@ const getThemeConfig = (settings = {}) => {
         }
       },
       MuiCssBaseline: {
-        styleOverrides: {
-          "#root": { display: "flex", flexDirection: "column", minHeight: "100vh" }
-        }
+        styleOverrides: (theme) => ({
+          "#root": { display: "flex", flexDirection: "column", minHeight: "100vh" },
+          // https://github.com/mui/material-ui/issues/33519
+          "input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active": {
+            WebkitBoxShadow: `0 0 0 30px ${getWebkitAutofillBackgroundColor(theme)} inset !important`
+          }
+        })
       },
       MuiDialogActions: {
         styleOverrides: {
@@ -412,6 +418,14 @@ const getThemeConfig = (settings = {}) => {
       MuiInputBase: {
         defaultProps: {
           size: "small"
+        },
+        styleOverrides: {
+          root: ({ theme }) => ({
+            // https://github.com/mui/material-ui/issues/33519
+            "&:has(> input:-webkit-autofill)": {
+              backgroundColor: getWebkitAutofillBackgroundColor(theme)
+            }
+          })
         }
       },
       MuiLink: {