From 580cec3c8248b03e3cd410bed3442b17327b4967 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 384ad5197..3fc8a26de 100644
--- a/web/src/features/perses-dashboards/components/PersesWrapper.tsx
+++ b/web/src/features/perses-dashboards/components/PersesWrapper.tsx
@@ -156,6 +156,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)',
           },
         },
       },
@@ -189,15 +190,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
@@ -225,6 +227,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: {
@@ -300,6 +307,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',
           },
         },
       },
@@ -355,6 +364,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',
+          },
+        },
+      },
     },
   };
 };