fix: add more components to theme.js to add github copilot suggested

Author: Felipedino

DashAI/front/src/components/generative/GenerativeChat.jsx

@@ -1,4 +1,5 @@
 import { Box, Divider, IconButton, Typography } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
 import React from "react";
 import InfoIcon from "@mui/icons-material/Info";
 import ArrowRightAltIcon from "@mui/icons-material/ArrowRightAlt";
@@ -21,6 +22,7 @@ import JobQueueWidget from "../jobs/JobQueueWidget";
 import { getRunStatus } from "../../utils/runStatus";
 
 export default function GenerativeChat({ sessionId, taskName, paramsVersion }) {
+  const theme = useTheme();
   const [history, setHistory] = useState([]);
   const [messages, setMessages] = useState([]);
   const [messagesWithHistory, setMessagesWithHistory] = useState([]);
@@ -251,11 +253,11 @@ export default function GenerativeChat({ sessionId, taskName, paramsVersion }) {
             width: "8px",
           },
           "&::-webkit-scrollbar-thumb": {
-            backgroundColor: "ui.border",
+            backgroundColor: theme.palette.ui.border,
             borderRadius: "4px",
           },
           "&::-webkit-scrollbar-thumb:hover": {
-            backgroundColor: "action.hover",
+            backgroundColor: theme.palette.ui.hover,
           },
         }}
       >

DashAI/front/src/components/generative/MessageContent.jsx

@@ -9,7 +9,7 @@ export function MessageContent({ messages, isUser, isWaiting }) {
   return (
     <Paper
       sx={{
-        backgroundColor: "ui.box",
+        backgroundColor: theme.palette.ui.box,
         color: "text.primary",
         padding: theme.spacing(1.5, 2),
         maxWidth: "100%",

DashAI/front/src/components/generative/SessionBar.jsx

@@ -150,7 +150,7 @@ export default function SessionBar({
             <Box
               sx={{
                 ml: 1,
-                bgcolor: "ui.border",
+                bgcolor: theme.palette.ui.border,
                 color: "text.primary",
                 borderRadius: "50%",
                 width: 20,

DashAI/front/src/components/generative/SessionBarHeader.jsx

@@ -15,7 +15,7 @@ export default function SessionBarHeader() {
         variant="h6"
         sx={{
           fontWeight: "bold",
-          "& span": { color: "accent.main" },
+          "& span": { color: theme.palette.accent.main },
         }}
       >
         <span>D</span>a<span>sh</span>

DashAI/front/src/components/generative/SessionList.jsx

@@ -49,11 +49,11 @@ export default function SessionList({
           width: "6px",
         },
         "&::-webkit-scrollbar-thumb": {
-          backgroundColor: "ui.border",
+          backgroundColor: theme.palette.ui.border,
           borderRadius: "3px",
         },
         "&::-webkit-scrollbar-thumb:hover": {
-          backgroundColor: "action.hover",
+          backgroundColor: theme.palette.ui.hover,
         },
         overflowY: "auto",
         flex: 1,
@@ -105,7 +105,7 @@ export default function SessionList({
               <Box
                 sx={{
                   ml: 1,
-                  bgcolor: "ui.border",
+                  bgcolor: theme.palette.ui.border,
                   color: "text.primary",
                   borderRadius: "50%",
                   width: 20,

DashAI/front/src/components/notebooks/RightBar.jsx

@@ -380,10 +380,10 @@ export default function RightBar({ notebook, onToggle }) {
                     "& .MuiToggleButton-root": {
                       color: "text.secondary",
                       border: "1px solid",
-                      borderColor: "ui.border",
+                      borderColor: theme.palette.ui.border,
                       "&.Mui-selected": {
-                        bgcolor: "ui.border",
-                        color: "accent.main",
+                        bgcolor: theme.palette.ui.border,
+                        color: theme.palette.accent.main,
                       },
                     },
                   }}

DashAI/front/src/components/notebooks/dataset/header/HeaderBox.jsx

@@ -1,15 +1,17 @@
 import React from "react";
 import { Box, Typography, Tooltip } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
 
 export function HeaderBox({ title, value, IconComponent, iconColor, bgColor }) {
+  const theme = useTheme();
   return (
     <Box
       sx={{
         minWidth: "140px",
         height: "100%",
         flex: "1 1 0",
         borderRadius: 2,
-        bgcolor: "ui.box",
+        bgcolor: theme.palette.ui.box,
         display: "flex",
         flexDirection: "column",
         justifyContent: "center",

DashAI/front/src/components/notebooks/dataset/tabs/CategoricalTab.jsx

@@ -23,7 +23,7 @@ export const CategoricalTab = ({ categoricalStats }) => {
     <Box display="flex" flexDirection="column" gap={4}>
       {Object.entries(categoricalStats).map(([column, stats]) => (
         <Card key={column} sx={{ borderRadius: 2 }}>
-          <CardContent sx={{ bgcolor: "ui.box" }}>
+          <CardContent sx={{ bgcolor: theme.palette.ui.box }}>
             {/* Header */}
             <Box display="flex" alignItems="center" mb={2}>
               <TitleIcon sx={{ color: "primary.main", mr: 1 }} />

DashAI/front/src/components/notebooks/dataset/tabs/NumericTab.jsx

@@ -14,7 +14,7 @@ export const NumericTab = ({ numericStats }) => {
     <Box display="flex" flexDirection="column" gap={4}>
       {Object.entries(numericStats).map(([column, stats]) => (
         <Card key={column} sx={{ borderRadius: 2 }}>
-          <CardContent sx={{ bgcolor: "ui.box" }}>
+          <CardContent sx={{ bgcolor: theme.palette.ui.box }}>
             {/* Title */}
             <Box display="flex" alignItems="center" mb={2}>
               <TrendingUpIcon sx={{ color: "primary.main", mr: 1 }} />

DashAI/front/src/components/notebooks/dataset/tabs/OverviewTab.jsx

@@ -61,7 +61,7 @@ const OverviewTab = ({
       </Card>
       {/* Missing Values Overview */}
       <Card>
-        <CardContent sx={{ bgcolor: "ui.box" }}>
+        <CardContent sx={{ bgcolor: theme.palette.ui.box }}>
           <Typography variant="h6" gutterBottom>
             Missing Values Overview
           </Typography>
@@ -95,7 +95,7 @@ const OverviewTab = ({
 
       {/* Column Types Distribution */}
       <Card>
-        <CardContent sx={{ bgcolor: "ui.box" }}>
+        <CardContent sx={{ bgcolor: theme.palette.ui.box }}>
           <Typography variant="h6" gutterBottom>
             Column Types Distribution
           </Typography>
@@ -107,7 +107,7 @@ const OverviewTab = ({
                   sx={{
                     p: 2,
                     textAlign: "center",
-                    bgcolor: "ui.disabled",
+                    bgcolor: theme.palette.ui.disabled,
                     borderRadius: 2,
                   }}
                 >