Refactor components to utilize theme palette for consistent styling

DashAI/front/src/components/HomeButton.jsx

@@ -42,10 +42,15 @@ function HomeButton({ title, description, to, Icon }) {
                 alignItems="stretch"
                 sx={{ height: "100%" }}
               >
-                <Typography variant="h5" sx={{ mb: 1 }}>
+                <Typography variant="h5" color="text.primary" sx={{ mb: 1 }}>
                   {title}
                 </Typography>
-                <Typography sx={{ mb: 2 }} variant="caption" component="p">
+                <Typography
+                  sx={{ mb: 2 }}
+                  variant="caption"
+                  component="p"
+                  color="text.secondary"
+                >
                   {description}
                 </Typography>
               </Grid>
@@ -65,10 +70,20 @@ function HomeButton({ title, description, to, Icon }) {
             </Grid>
 
             <Grid size={{ xs: 12 }} sx={{ mb: 2 }}>
-              <Typography variant="h5" align="center" sx={{ mb: 1 }}>
+              <Typography
+                variant="h5"
+                align="center"
+                color="text.primary"
+                sx={{ mb: 1 }}
+              >
                 {title}
               </Typography>
-              <Typography variant="caption" component="p" align="center">
+              <Typography
+                variant="caption"
+                component="p"
+                align="center"
+                color="text.secondary"
+              >
                 {description}
               </Typography>
             </Grid>

DashAI/front/src/components/ResponsiveAppBar.jsx

@@ -38,7 +38,11 @@ function ResponsiveAppBar() {
   };
 
   return (
-    <AppBar position="sticky" enableColorOnDark sx={{ background: "#212121" }}>
+    <AppBar
+      position="sticky"
+      enableColorOnDark
+      sx={{ background: theme.palette.background.box }}
+    >
       <Container maxWidth="xl">
         <Toolbar>
           <Avatar
@@ -85,7 +89,9 @@ function ResponsiveAppBar() {
                   to={page.to}
                   selected={page.to === location.pathname}
                 >
-                  <Typography textAlign="center">{page.name}</Typography>
+                  <Typography color="text.primary" textAlign="center">
+                    {page.name}
+                  </Typography>
                 </MenuItem>
               ))}
             </Menu>
@@ -108,11 +114,17 @@ function ResponsiveAppBar() {
                 to={page.to}
                 key={page.name}
                 onClick={handleCloseNavMenu}
-                sx={{ my: 2, display: "block" }}
+                sx={{
+                  my: 2,
+                  display: "block",
+                  color:
+                    page.to === location.pathname
+                      ? theme.palette.primary.main
+                      : theme.palette.text.primary,
+                }}
                 size="large"
                 disabled={page.disabled}
                 disableRipple
-                color={page.to === location.pathname ? "primary" : "inherit"}
               >
                 {page.name}
               </Button>

DashAI/front/src/components/experiments/DivideDatasetColumns.jsx

@@ -8,6 +8,7 @@ import {
   Box,
   Chip,
 } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
 import { getColorByColumnType } from "../../utils";
 
 function DivideDatasetColumns({
@@ -23,6 +24,8 @@ function DivideDatasetColumns({
   outputHelperText = "",
   disabled = false,
 }) {
+  const theme = useTheme();
+
   const handleInputAutocompleteChange = (event, newValue) => {
     onInputColumnNamesChange(newValue);
   };
@@ -43,7 +46,7 @@ function DivideDatasetColumns({
     const { key, ...otherProps } = props;
     const columnType = columnTypes[option];
     const typeColor = columnType?.type
-      ? getColorByColumnType(columnType.type)
+      ? getColorByColumnType(columnType.type, theme)
       : null;
 
     return (
@@ -76,7 +79,7 @@ function DivideDatasetColumns({
       const { key, ...tagProps } = getTagProps({ index });
       const columnType = columnTypes[option];
       const typeColor = columnType?.type
-        ? getColorByColumnType(columnType.type)
+        ? getColorByColumnType(columnType.type, theme)
         : null;
 
       const label =

DashAI/front/src/components/experiments/PrepareDatasetStep.jsx

@@ -9,6 +9,7 @@ import {
   AlertTitle,
   Chip,
 } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
 import DivideDatasetColumns from "./DivideDatasetColumns";
 import SplitDatasetRows from "./SplitDatasetRows";
 import {
@@ -27,6 +28,7 @@ import { getColorByColumnType } from "../../utils";
  * @param {function} setNextEnabled function to enable or disable the "Next" button in the modal
  */
 function PrepareDatasetStep({ newExp, setNewExp, setNextEnabled }) {
+  const theme = useTheme();
   const [datasetInfo, setDatasetInfo] = useState({});
   const [datasetTypes, setDatasetTypes] = useState({});
   const { enqueueSnackbar } = useSnackbar();

DashAI/front/src/components/experiments/metrics/MetricCard.jsx

@@ -1,30 +1,33 @@
 import { Card, CardActionArea, Box, Typography, Chip } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
 import CheckIcon from "@mui/icons-material/Check";
 import TrendingUpIcon from "@mui/icons-material/TrendingUp";
 import TrendingDownIcon from "@mui/icons-material/TrendingDown";
 
-const splitColors = {
-  train: {
-    border: "#4caf50",
-    bg: "rgba(76,175,80,0.08)",
-  },
-  test: {
-    border: "#2196f3",
-    bg: "rgba(33,150,243,0.08)",
-  },
-  validation: {
-    border: "#ff9800",
-    bg: "rgba(255,152,0,0.08)",
-  },
-};
-
 export default function MetricCard({
   metric,
   isSelected,
   onToggle,
   splitType,
   disabled = false,
 }) {
+  const theme = useTheme();
+
+  const splitColors = {
+    train: {
+      border: theme.palette.chart.train,
+      bg: `${theme.palette.chart.train}14`, // ~8% opacity
+    },
+    test: {
+      border: theme.palette.chart.test,
+      bg: `${theme.palette.chart.test}14`,
+    },
+    validation: {
+      border: theme.palette.chart.validation,
+      bg: `${theme.palette.chart.validation}14`,
+    },
+  };
+
   const colors = splitColors[splitType];
 
   return (

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

@@ -1,13 +1,16 @@
 import { Typography } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
 
 export function ChatTimestamp({ timestamp, isUser }) {
+  const theme = useTheme();
+
   if (!timestamp) return null;
 
   return (
     <Typography
       variant="caption"
-      color="text.secondary"
       sx={{
+        color: theme.palette.text.secondary,
         display: "block",
         mt: 0.5,
         textAlign: isUser ? "right" : "left",

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

@@ -1,7 +1,9 @@
 import { Box, Typography } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
 import { useState, useEffect } from "react";
 
 export function WaitingAnimationChat({ isActive }) {
+  const theme = useTheme();
   const [dots, setDots] = useState("");
 
   useEffect(() => {
@@ -21,7 +23,7 @@ export function WaitingAnimationChat({ isActive }) {
 
   return (
     <Box sx={{ minWidth: "40px", minHeight: "24px" }}>
-      <Typography variant="body2" color="text.primary">
+      <Typography variant="body2" sx={{ color: theme.palette.text.primary }}>
         {dots}
       </Typography>
     </Box>

DashAI/front/src/components/models/DatasetVisualization.jsx

@@ -10,6 +10,7 @@ import {
   Tabs,
   Tab,
 } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
 import { AddCircleOutline as AddIcon } from "@mui/icons-material";
 import {
   getDatasetFile,
@@ -35,12 +36,14 @@ export default function DatasetVisualization({
   existingSessions = [],
   tasks = [],
 }) {
+  const theme = useTheme();
+
   if (!dataset) {
     return (
       <Box
         sx={{ display: "flex", justifyContent: "center", alignItems: "center" }}
       >
-        <CircularProgress sx={{ color: "#00BEBB" }} />
+        <CircularProgress sx={{ color: theme.palette.primary.main }} />
         <Typography>Loading...</Typography>
       </Box>
     );
@@ -221,7 +224,7 @@ export default function DatasetVisualization({
             {/* Tabs */}
             <Tabs
               sx={{
-                bgcolor: "#2C2C2C",
+                bgcolor: theme.palette.ui.panelDark,
                 borderRadius: 1,
                 minHeight: "48px",
                 "& .MuiTabs-indicator": {
@@ -330,7 +333,7 @@ export default function DatasetVisualization({
               gap: 2,
             }}
           >
-            <CircularProgress sx={{ color: "#00BEBB" }} />
+            <CircularProgress sx={{ color: theme.palette.primary.main }} />
             <Typography>Processing your dataset...</Typography>
             <Typography
               variant="body2"

DashAI/front/src/components/models/LeftBar.jsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from "react";
 import { Box, Divider, Typography, IconButton } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
 import { ChevronLeft } from "@mui/icons-material";
 import StorageIcon from "@mui/icons-material/Storage";
 import Biotech from "@mui/icons-material/Biotech";
@@ -27,6 +28,7 @@ export default function ModelsLeftBar({
   onToggle,
   handleNewSessionButton,
 }) {
+  const theme = useTheme();
   const [searchQuery, setSearchQuery] = useState("");
   const [filteredDatasets, setFilteredDatasets] = useState(datasets);
   const [filteredSessions, setFilteredSessions] = useState(sessions);
@@ -144,7 +146,7 @@ export default function ModelsLeftBar({
           <ChevronLeft />
         </IconButton>
       </Box>
-      <Divider sx={{ width: "100%", bgcolor: "#252836" }} />
+      <Divider sx={{ width: "100%", bgcolor: theme.palette.ui.borderDark }} />
 
       {/* Create new item button */}
       <Box p={2} sx={{ height: "64px", display: "flex", alignItems: "center" }}>
@@ -154,7 +156,7 @@ export default function ModelsLeftBar({
             title="New Dataset/Session"
           />
         ) : (
-          <Typography variant="body1" color="textSecondary">
+          <Typography variant="body1" color="text.secondary">
             Models Module
           </Typography>
         )}
@@ -169,7 +171,9 @@ export default function ModelsLeftBar({
         />
       </Box>
 
-      <Divider sx={{ width: "90%", bgcolor: "#252836", mx: "auto" }} />
+      <Divider
+        sx={{ width: "90%", bgcolor: theme.palette.ui.borderDark, mx: "auto" }}
+      />
 
       {/* Scrollable content */}
       <Box display="flex" flexDirection="column" flex={1} minHeight={0}>
@@ -185,7 +189,13 @@ export default function ModelsLeftBar({
           getItemDescription={getDatasetDescription}
         />
 
-        <Divider sx={{ width: "90%", bgcolor: "#252836", mx: "auto" }} />
+        <Divider
+          sx={{
+            width: "90%",
+            bgcolor: theme.palette.ui.borderDark,
+            mx: "auto",
+          }}
+        />
 
         <GroupedCollapsibleList
           groups={groupedSessions}

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

@@ -7,13 +7,15 @@ import {
   TextField,
   CircularProgress,
 } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
 import { ChevronRight, Search as SearchIcon } from "@mui/icons-material";
 import { useSnackbar } from "notistack";
 import SideBar from "../threeSectionLayout/SideBar";
 import { getComponents } from "../../api/component";
 import ModelListItem from "./model/ModelListItem";
 
 export default function ModelsRightBar({ session, onToggle, onModelClick }) {
+  const theme = useTheme();
   const [models, setModels] = useState([]);
   const [filteredModels, setFilteredModels] = useState([]);
   const [searchQuery, setSearchQuery] = useState("");
@@ -86,15 +88,17 @@ export default function ModelsRightBar({ session, onToggle, onModelClick }) {
         <Box
           sx={{
             p: 2,
-            borderBottom: "1px solid #333",
+            borderBottom: `1px solid ${theme.palette.ui.border}`,
             flexShrink: 0,
             height: 64,
             display: "flex",
             alignItems: "center",
             justifyContent: "space-between",
           }}
         >
-          <Typography variant="h6">Available Models</Typography>
+          <Typography variant="h6" color="text.primary">
+            Available Models
+          </Typography>
           <IconButton
             size="small"
             onClick={onToggle}