From 32a0c5483aab227b798a780ae924b4985d38c815 Mon Sep 17 00:00:00 2001
From: Gabriel Bernal <gbernal@redhat.com>
Date: Thu, 27 Aug 2026 11:56:56 +0200
Subject: [PATCH] OU-1423: fix: adjust perses mui theme to patternfly glass
 mode

Signed-off-by: Gabriel Bernal <gbernal@redhat.com>
---
 .../components/PersesWrapper.tsx              | 30 +++++++++++++++++--
 1 file changed, 27 insertions(+), 3 deletions(-)

diff --git a/web/src/features/perses-dashboards/components/PersesWrapper.tsx b/web/src/features/perses-dashboards/components/PersesWrapper.tsx
index e125c724a..322f97af3 100644
--- a/web/src/features/perses-dashboards/components/PersesWrapper.tsx
+++ b/web/src/features/perses-dashboards/components/PersesWrapper.tsx
@@ -154,6 +154,7 @@ const mapPatterflyThemeToMUI = (theme: 'light' | 'dark'): ThemeOptions => {
           root: {
             borderRadius: 'var(--pf-t--global--border--radius--medium)',
             borderColor: 'var(--pf-t--global--border--color--default)',
+            backgroundColor: 'var(--pf-t--global--background--color--primary--default)',
           },
         },
       },
@@ -187,15 +188,16 @@ const mapPatterflyThemeToMUI = (theme: 'light' | 'dark'): ThemeOptions => {
       MuiOutlinedInput: {
         styleOverrides: {
           notchedOutline: {
-            borderColor: 'var(--pf-t--global--border--color--default)',
+            borderColor: 'var(--pf-t--global--border--color--control--default)',
           },
           root: {
             '&:hover .MuiOutlinedInput-notchedOutline': {
-              borderColor: 'var(--pf-t--global--border--color--default)',
+              borderColor: 'var(--pf-t--global--border--color--clicked)',
             },
             '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
-              borderColor: 'var(--pf-t--global--border--color--default)',
+              borderColor: 'var(--pf-t--global--border--color--clicked)',
             },
+            backgroundColor: 'var(--pf-t--global--background--color--control--default)',
           },
           input: {
             // Dashboard Variables >> Text Variable
@@ -223,6 +225,11 @@ const mapPatterflyThemeToMUI = (theme: 'light' | 'dark'): ThemeOptions => {
               color: t_color_white.value,
             },
           },
+          outlinedSecondary: {
+            borderColor: 'var(--pf-t--global--border--color--default)',
+            borderRadius: 'var(--pf-t--global--border--radius--pill)',
+            color: isDark ? patternflyBlue100 : patternflyBlue300,
+          },
         },
       },
       MuiButtonGroup: {
@@ -298,6 +305,8 @@ const mapPatterflyThemeToMUI = (theme: 'light' | 'dark'): ThemeOptions => {
             '& .MuiButton-colorSecondary': {
               borderRadius: 'var(--pf-t--global--border--radius--pill) !important',
             },
+            backgroundColor: 'var(--pf-t--global--background--color--floating--default)',
+            backgroundImage: 'none',
           },
         },
       },
@@ -353,6 +362,21 @@ const mapPatterflyThemeToMUI = (theme: 'light' | 'dark'): ThemeOptions => {
           },
         },
       },
+      MuiAppBar: {
+        styleOverrides: {
+          root: {
+            backgroundColor: 'transparent !important',
+          },
+        },
+      },
+      MuiDialog: {
+        styleOverrides: {
+          paper: {
+            backgroundColor: 'var(--pf-t--global--background--color--floating--default)',
+            backgroundImage: 'none',
+          },
+        },
+      },
     },
   };
 };