Refactor components to utilize theme palette for consistent styling - #415
Refactor components to utilize theme palette for consistent styling#415Felipedino wants to merge 1 commit into
Conversation
There was a problem hiding this comment.
Pull request overview
This pull request refactors UI components across the application to use the MUI theme palette instead of hardcoded color values, improving maintainability and ensuring visual consistency. The changes include adding new palette sections to the theme configuration and updating numerous components to reference these theme values.
Changes:
- Extended theme.js with new palette sections (status, dataType, chart, ui, accent) with comprehensive documentation
- Refactored utility functions (getColorByStatus, getColorByColumnType) to accept theme parameter with fallback support
- Updated 30+ components to use theme palette values via useTheme hook instead of hardcoded colors
Reviewed changes
Copilot reviewed 49 out of 49 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| DashAI/front/src/utils/index.js | Added theme parameter to color utility functions with fallback handling |
| DashAI/front/src/styles/theme.js | Extended palette with status, dataType, chart, ui, and accent color categories |
| DashAI/front/src/pages/results/constants/initialColumns.jsx | Updated status cell rendering to use theme colors |
| DashAI/front/src/pages/results/components/*.jsx | Replaced hardcoded colors with theme palette references |
| DashAI/front/src/pages/home/Home.jsx | Applied theme colors to Typography components |
| DashAI/front/src/components/threeSectionLayout/*.jsx | Refactored sidebar components to use theme for borders, backgrounds, and icons |
| DashAI/front/src/components/predictions/*.jsx | Updated prediction components with theme-based styling |
| DashAI/front/src/components/pipelines/*.jsx | Applied theme colors to pipeline visualization elements |
| DashAI/front/src/components/notebooks/*.jsx | Refactored notebook components to use theme palette |
| DashAI/front/src/components/models/*.jsx | Updated model visualization with theme colors |
| DashAI/front/src/components/generative/*.jsx | Applied theme styling to chat components |
| DashAI/front/src/components/experiments/*.jsx | Updated experiment components with theme colors |
| DashAI/front/src/components/*.jsx | Refactored shared components (ResponsiveAppBar, HomeButton, etc.) |
Comments suppressed due to low confidence (1)
DashAI/front/src/components/predictions/PredictionsTable.jsx:74
- Duplicate sx prop detected. The second sx prop on line 70 will override the first one on line 68, causing the color styling to be lost. These should be merged into a single sx prop with all the necessary styles.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <Typography | ||
| variant="caption" | ||
| sx={{ color: theme.palette.text.secondary }} | ||
| > |
There was a problem hiding this comment.
There's an inconsistency in how theme colors are applied across this PR. Some components use the MUI shorthand color prop (e.g., color="text.primary"), while others use explicit theme references in sx props (e.g., sx={{ color: theme.palette.text.primary }}). For better maintainability and consistency, consider standardizing on one approach throughout the codebase. The MUI shorthand (color="text.primary") is generally preferred as it's cleaner and allows MUI to handle theme resolution automatically.
| renderCell: (params) => { | ||
| const color = getColorByStatus(params.value); | ||
|
|
||
| return <StyledCell color={color}>{params.value}</StyledCell>; | ||
| // Using a render function to access theme through hook | ||
| const StatusCell = () => { | ||
| const theme = useTheme(); | ||
| const color = getColorByStatus(params.value, theme); | ||
| return <StyledCell color={color}>{params.value}</StyledCell>; | ||
| }; | ||
| return <StatusCell />; | ||
| }, |
There was a problem hiding this comment.
Using a React hook inside a renderCell callback by creating a component is an anti-pattern. The useTheme hook should be called at the component level, not inside renderCell. Since initialColumns is exported as a module-level constant, consider either: 1) Moving this to be a function that accepts theme as a parameter, or 2) Using the theme from the styled component context. The current approach creates a new component on every render which is inefficient and may cause issues with React's reconciliation.
| * @param {function} setNextEnabled function to enable or disable the "Next" button in the modal | ||
| */ | ||
| function PrepareDatasetStep({ newExp, setNewExp, setNextEnabled }) { | ||
| const theme = useTheme(); |
There was a problem hiding this comment.
Unused variable theme.
| Typography, | ||
| IconButton, | ||
| } from "@mui/material"; | ||
| import { useTheme } from "@mui/material/styles"; |
There was a problem hiding this comment.
Unused import useTheme.
| import { useTheme } from "@mui/material/styles"; |
This pull request refactors several UI components to consistently use the MUI theme for colors and styling, improving maintainability and ensuring a unified look across the application. Hardcoded color values are replaced with references to the theme palette, and color props are set directly from the theme where appropriate. The changes affect navigation bars, buttons, cards, dataset visualization, and generative chat components.
Theme integration and color consistency:
ResponsiveAppBar.jsxwith values from the MUI theme palette, including navigation button and menu item colors. [1] [2] [3]HomeButton.jsxto use theme palette colors for primary and secondary text in all Typography components. [1] [2]MetricCard.jsx,RunCard.jsx, andChatTimeStamp.jsxto use theme palette colors for split types, text, and status indicators, removing hardcoded color values. [1] [2] [3] [4]Dataset and models module styling:
DatasetVisualization.jsx,LeftBar.jsx, andRightBar.jsxto use theme palette colors for progress indicators, backgrounds, dividers, and text, replacing previous static color codes. [1] [2] [3] [4] [5] [6] [7]Component-level theme usage:
useThemehook to multiple components (DivideDatasetColumns.jsx,PrepareDatasetStep.jsx,WaitingAnimationChat.jsx, etc.) and passed theme to utility functions where needed to ensure dynamic color selection. [1] [2] [3] [4] [5] [6] [7]Typography improvements:
Divider and panel background updates: