Replace hardcoded colors with theme palette and reuse task selection components

DashAI/front/src/components/HomeButton.jsx

@@ -20,7 +20,7 @@ function HomeButton({ title, description, to, Icon }) {
         to={to}
         component={RouterLink}
         underline="hover"
-        color="primary.contrastText"
+        color={theme.palette.text.primary}
       >
         {matches && (
           <Grid

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

@@ -1,60 +1,20 @@
-import { useEffect, useState } from "react";
-import { Box, Grid } from "@mui/material";
-import TaskBox from "../../components/generative/TaskBox";
-import SearchBar from "./SearchBar";
-import { getGenerativeTask } from "../../api/generativeTask";
-import CustomLayout from "../../components/custom/CustomLayout";
 import { useTranslation } from "react-i18next";
+import SelectOptionMenu from "../threeSectionLayout/SelectOptionMenu";
 
 export default function SelectTaskMenu({ tasks, goToNextStep }) {
   const { t } = useTranslation(["generative", "common"]);
 
-  const [search, setSearch] = useState("");
-
-  const filteredTasks = tasks.filter((task) =>
-    task.name.toLowerCase().includes(search.toLowerCase()),
-  );
-
   return (
-    <CustomLayout
+    <SelectOptionMenu
+      goToNextStep={() => goToNextStep(task.name, task.display_name)}
       title={t("generative:label.generativeModule")}
       subtitle={t("generative:label.selectGenerativeTask")}
-      padding={0}
-    >
-      <Box
-        display={"flex"}
-        height={"100%"}
-        width={"100%"}
-        flexDirection={"column"}
-        justifyContent={"flex-start"}
-      >
-        <Box width={"450px"}>
-          <SearchBar
-            placeholder={t("generative:label.searchTasks")}
-            value={search}
-            onChange={(e) => setSearch(e.target.value)}
-          />
-        </Box>
-
-        <Grid
-          container
-          direction="row"
-          justifyContent="flex-start"
-          alignItems="stretch"
-          spacing={1}
-          sx={{ mt: 2, mx: 0, maxWidth: "100%" }}
-        >
-          {filteredTasks.map((task, index) => (
-            <Grid size={{ xl: 4, lg: 6, md: 6, sm: 12, xs: 12 }} key={index}>
-              <TaskBox
-                taskName={task.display_name}
-                description={task.description}
-                onClick={() => goToNextStep(task.name, task.display_name)}
-              />
-            </Grid>
-          ))}
-        </Grid>
-      </Box>
-    </CustomLayout>
+      options={tasks.map((task) => ({
+        name: task.name,
+        display_name: task.display_name,
+        description: task.description,
+      }))}
+      searchBar={true}
+    />
   );
 }

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

@@ -1,7 +1,7 @@
 import { Box, Typography, Divider } from "@mui/material";
 import { useTheme } from "@mui/material/styles";
 import FolderIcon from "@mui/icons-material/Folder";
-import SearchBar from "./SearchBar";
+import SearchBar from "../threeSectionLayout/SearchBar";
 import { useEffect, useState } from "react";
 import InfoSessionModal from "./InfoSessionModal";
 import Footer from "./Footer";

DashAI/front/src/components/notebooks/datasetCreation/ConfigureAndUploadDatasetStep.jsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useCallback } from "react";
-import { Grid, CircularProgress } from "@mui/material";
+import { Grid, CircularProgress, useTheme } from "@mui/material";
 import FormSchemaButtonGroup from "../../shared/FormSchemaButtonGroup";
 import Upload from "./Upload";
 import { useSnackbar } from "notistack";
@@ -28,6 +28,7 @@ export default function ConfigureAndUploadDatasetStep({
 
   const { enqueueSnackbar } = useSnackbar();
   const { t } = useTranslation(["common", "datasets"]);
+  const theme = useTheme();
 
   useEffect(() => {
     if (onPreviewError) {
@@ -155,7 +156,8 @@ export default function ConfigureAndUploadDatasetStep({
         spacing={2}
         sx={{
           width: "100%",
-          backgroundColor: "#212121",
+          backgroundColor: theme.palette.ui.box,
+          border: `1px solid ${theme.palette.ui.border}`,
           padding: 4,
           borderRadius: 2,
         }}

DashAI/front/src/components/notebooks/datasetCreation/Upload.jsx

@@ -7,6 +7,7 @@ import {
   DialogContentText,
   Grid,
   Typography,
+  useTheme,
 } from "@mui/material";
 
 import PreviewDataset from "./PreviewDataset";
@@ -51,6 +52,7 @@ function Upload({
 
   const { enqueueSnackbar } = useSnackbar();
   const { t } = useTranslation(["datasets", "common"]);
+  const theme = useTheme();
 
   // helper to extract allowed extensions from acceptAttr (returns lowercase extensions like ".csv")
   const getAllowedExtensions = (accept) => {
@@ -273,14 +275,20 @@ function Upload({
               </Grid>
               {dragActive ? (
                 <Grid>
-                  <Typography variant="subtitle1">
+                  <Typography
+                    variant="subtitle1"
+                    sx={{ color: theme.palette.text.secondary }}
+                  >
                     {t("datasets:label.clickToUpload")}
                   </Typography>
                 </Grid>
               ) : (
                 <React.Fragment>
                   <Grid>
-                    <Typography variant="subtitle1">
+                    <Typography
+                      variant="subtitle1"
+                      sx={{ color: theme.palette.text.secondary }}
+                    >
                       {t("datasets:label.dragAndDropFileHere")}
                     </Typography>
                   </Grid>
@@ -343,12 +351,12 @@ function Upload({
       container
       direction="column"
       rowSpacing={1}
-      sx={{ width: "100%" }}
+      sx={{ width: "100%", bgcolor: theme.palette.ui.box }}
       data-tour="upload-area"
     >
       {/* state text */}
       <Grid sx={{ textAlign: "center" }}>
-        <DialogContentText>
+        <DialogContentText sx={{ color: theme.palette.text.primary }}>
           {datasetState === EMPTY && t("datasets:label.uploadYourDataset")}
           {datasetState === LOADING && t("datasets:label.datasetLoading")}
           {datasetState === LOADED && t("datasets:label.datasetPreview")}

DashAI/front/src/components/notebooks/tool/ConfigureToolModal.jsx

@@ -192,8 +192,8 @@ export default function ConfigureToolModal({
               {/* Tool Description */}
               <Box
                 sx={{
-                  bgcolor: "rgb(44, 44, 44)",
-                  border: "1px solid rgb(39, 39, 42)",
+                  bgcolor: "theme.palette.background.box",
+                  border: `1px solid ${theme.palette.divider}`,
                   borderRadius: 1.5,
                   p: 2,
                 }}