Skip to content

fix: improve alert visibility and styling in dataset components#584

Merged
cristian-tamblay merged 3 commits into
developfrom
fix/improve-alert-visibility
Apr 29, 2026
Merged

fix: improve alert visibility and styling in dataset components#584
cristian-tamblay merged 3 commits into
developfrom
fix/improve-alert-visibility

Conversation

@Creylay
Copy link
Copy Markdown
Collaborator

@Creylay Creylay commented Apr 28, 2026

Summary

Improve alert visibility and enforce semantic color separation across the UI. Alert messages were visually indistinguishable from regular cards due to small icons, low background contrast, and a warning color nearly identical to the primary brand color. Additionally, alert colors (success, warning, error, info) were reused for unrelated purposes like data type chips, chart traces, and pie slices, diluting their meaning as status indicators. The retrain button was also changed to always use the primary color for consistency.


Type of Change

Check all that apply like this [x]:

  • Backend change
  • Frontend change
  • CI / Workflow change
  • Build / Packaging change
  • Bug fix
  • Documentation

Changes (by file)

  • DashAI/front/src/styles/theme.js: Change warning color from #f1ae61 to #fbc02d (golden yellow) to differentiate from primary #ef9f27. Update dataType colors so they no longer overlap with alert colors (integer → indigo, text → caramel, boolean → lime). Replace chart.train/chart.test with dedicated values and add a chart.palette array for general-purpose chart coloring.
  • DashAI/front/src/utils/index.js: Update hardcoded fallback colors for integer, text, and boolean data types to match the new theme values.
  • DashAI/front/src/components/notebooks/dataset/QualityAlerts.jsx: Increase icon size from small (~20px) to 24px, raise background opacity from ~3% to ~25%, and make the accordion border fully opaque.
  • DashAI/front/src/components/models/modelSession/PrepareDatasetStep.jsx: Increase icon size to 24px, add solid 1px severity-colored border, raise background opacity to ~25%, and reorder alerts so the missing values warning appears before column validation.
  • DashAI/front/src/components/notebooks/dataset/tabs/TextTab.jsx: Replace success/info/warning/error colors for length statistics (min/median/avg/max) with chart.train/test/validation/primary.
  • DashAI/front/src/components/notebooks/dataset/tabs/CategoricalTab.jsx: Replace pie chart slice colors with chart.palette instead of mixing alert and brand colors.
  • DashAI/front/src/components/notebooks/dataset/tabs/CorrelationsTab.jsx: Replace error.main/success.main in the correlation heatmap colorscale with dedicated soft red/green (#e57373/#81c784).
  • DashAI/front/src/pages/results/constants/graphsMaking.jsx: Replace alert-color-based trace palette with chart.palette from the theme.
  • DashAI/front/src/components/models/RunCard.jsx: Change retrain button from conditional warning/primary color to always use primary color.

@cristian-tamblay cristian-tamblay merged commit e6f3655 into develop Apr 29, 2026
19 checks passed
@cristian-tamblay cristian-tamblay deleted the fix/improve-alert-visibility branch April 29, 2026 12:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants