From 441e4c02310208d06123635d40a5600dad6d58c0 Mon Sep 17 00:00:00 2001
From: Nicola Benaglia <nico.benaz@gmail.com>
Date: Tue, 27 May 2025 09:02:58 +0200
Subject: [PATCH] Refactor deprecated MUI component

---
 src/components/Theme/ThemeManager.tsx | 39 +++++++++++++++------------
 1 file changed, 22 insertions(+), 17 deletions(-)

diff --git a/src/components/Theme/ThemeManager.tsx b/src/components/Theme/ThemeManager.tsx
index 1bfee78..f254a74 100644
--- a/src/components/Theme/ThemeManager.tsx
+++ b/src/components/Theme/ThemeManager.tsx
@@ -16,6 +16,7 @@ import {
   Tab,
   ListItemButton,
   useTheme,
+  ListItem,
 } from '@mui/material';
 import { Sketch } from '@uiw/react-color';
 import DeleteIcon from '@mui/icons-material/Delete';
@@ -269,24 +270,28 @@ export default function ThemeManager() {
             <ListItemText
               primary={`${theme?.name || `Theme ${index + 1}`} ${theme?.id === currentThemeId ? '(Current)' : ''}`}
             />
-            <ListItemSecondaryAction>
-              {theme.id !== 'default' && (
-                <>
-                  <IconButton onClick={() => exportTheme(theme)}>
-                    <FileDownloadIcon />
+            <ListItem
+              secondaryAction={
+                <Box sx={{ display: 'flex', gap: 1 }}>
+                  {theme.id !== 'default' && (
+                    <>
+                      <IconButton onClick={() => exportTheme(theme)}>
+                        <FileDownloadIcon />
+                      </IconButton>
+                      <IconButton onClick={() => handleEditTheme(theme.id)}>
+                        <EditIcon />
+                      </IconButton>
+                      <IconButton onClick={() => handleDeleteTheme(theme.id)}>
+                        <DeleteIcon />
+                      </IconButton>
+                    </>
+                  )}
+                  <IconButton onClick={() => handleApplyTheme(theme)}>
+                    <CheckIcon />
                   </IconButton>
-                  <IconButton onClick={() => handleEditTheme(theme.id)}>
-                    <EditIcon />
-                  </IconButton>
-                  <IconButton onClick={() => handleDeleteTheme(theme.id)}>
-                    <DeleteIcon />
-                  </IconButton>
-                </>
-              )}
-              <IconButton onClick={() => handleApplyTheme(theme)}>
-                <CheckIcon />
-              </IconButton>
-            </ListItemSecondaryAction>
+                </Box>
+              }
+            ></ListItem>
           </ListItemButton>
         ))}
       </List>