feat: Update HoverModelInfo and ModelListItem to use theme for consistent styling

Author: Felipedino

DashAI/front/src/components/models/model/HoverModelInfo.jsx

@@ -1,11 +1,14 @@
 import React from "react";
 import { Box, Typography, Popover } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
 
 export default function HoverModelInfo({
   anchorEl,
   hoveredModel,
   handleMouseLeave,
 }) {
+  const theme = useTheme();
+
   return (
     <Popover
       open={Boolean(anchorEl)}
@@ -23,8 +26,8 @@ export default function HoverModelInfo({
       sx={{
         pointerEvents: "none",
         "& .MuiPopover-paper": {
-          bgcolor: "rgb(20, 20, 24)",
-          border: "1px solid rgb(63, 63, 70)",
+          bgcolor: theme.palette.background.paper,
+          border: `1px solid ${theme.palette.divider}`,
           borderRadius: 2,
           p: 2,
           maxWidth: 320,
@@ -37,15 +40,15 @@ export default function HoverModelInfo({
           {/* Title */}
           <Typography
             variant="subtitle2"
-            sx={{ color: "rgb(250, 250, 250)", fontWeight: 600, mb: 1 }}
+            sx={{ color: theme.palette.text.primary, fontWeight: 600, mb: 1 }}
           >
             {hoveredModel.display_name || hoveredModel.name}
           </Typography>
 
           {/* Description */}
           <Typography
             variant="body2"
-            sx={{ color: "rgb(161, 161, 170)", lineHeight: 1.5 }}
+            sx={{ color: theme.palette.text.secondary, lineHeight: 1.5 }}
           >
             {hoveredModel.description ||
               hoveredModel.metadata?.description ||

DashAI/front/src/components/models/model/ModelListItem.jsx

@@ -35,16 +35,16 @@ export default function ModelListItem({ model, disabled = false, onClick }) {
         slotProps={{
           tooltip: {
             sx: {
-              bgcolor: "rgb(33, 33, 33)",
-              color: "rgb(255, 255, 255)",
+              bgcolor: theme.palette.background.paper,
+              color: theme.palette.text.primary,
               display: disabled ? "block" : "none",
-              border: "1px solid rgb(63, 63, 70)",
+              border: `1px solid ${theme.palette.divider}`,
               fontSize: "0.75rem",
               maxWidth: 300,
               "& .MuiTooltip-arrow": {
-                color: "rgb(33, 33, 33)",
+                color: theme.palette.background.paper,
                 "&::before": {
-                  border: "1px solid rgb(63, 63, 70)",
+                  border: `1px solid ${theme.palette.divider}`,
                 },
               },
             },
@@ -61,17 +61,21 @@ export default function ModelListItem({ model, disabled = false, onClick }) {
             alignItems: "center",
             gap: 1.5,
             p: 1.5,
-            bgcolor: disabled ? "rgb(32, 32, 32)" : "rgb(44, 44, 44)",
-            border: "1px solid rgb(39, 39, 42)",
+            bgcolor: disabled
+              ? theme.palette.ui.disabled
+              : theme.palette.ui.box,
+            border: `1px solid ${theme.palette.ui.border}`,
             borderRadius: 1,
             cursor: disabled ? "not-allowed" : "pointer",
             transition: "all 0.2s",
             opacity: disabled ? 0.5 : 1,
             filter: disabled ? "grayscale(0.6)" : "none",
             position: "relative",
             "&:hover": {
-              bgcolor: disabled ? "rgb(32, 32, 32)" : "rgb(60, 60, 60)",
-              borderColor: disabled ? "rgb(39, 39, 42)" : color,
+              bgcolor: disabled
+                ? theme.palette.ui.disabled
+                : theme.palette.action.hover,
+              borderColor: disabled ? theme.palette.ui.border : color,
               transform: disabled ? "none" : "translateX(4px)",
             },
             "&::after": disabled
@@ -96,14 +100,18 @@ export default function ModelListItem({ model, disabled = false, onClick }) {
               width: 36,
               height: 36,
               borderRadius: 1,
-              bgcolor: disabled ? "rgb(50, 50, 50)" : "rgb(63, 63, 70)",
-              color: disabled ? "rgb(150, 150, 150)" : "rgb(250, 250, 250)",
+              bgcolor: disabled
+                ? theme.palette.ui.disabled
+                : theme.palette.ui.border,
+              color: disabled
+                ? theme.palette.text.disabled
+                : theme.palette.text.primary,
               flexShrink: 0,
             }}
           >
             <ModelIcon
               iconName={iconName}
-              color={disabled ? "rgb(100, 100, 100)" : color}
+              color={disabled ? theme.palette.text.disabled : color}
             />
           </Box>
 
@@ -112,7 +120,9 @@ export default function ModelListItem({ model, disabled = false, onClick }) {
             <Typography
               variant="body2"
               sx={{
-                color: disabled ? "rgb(150, 150, 150)" : "rgb(250, 250, 250)",
+                color: disabled
+                  ? theme.palette.text.disabled
+                  : theme.palette.text.primary,
                 fontWeight: 500,
                 overflow: "hidden",
                 textOverflow: "ellipsis",