Skip to content

Feat/homepage navbar redesign#537

Merged
cristian-tamblay merged 62 commits into
developfrom
feat/homepage-navbar-redesign
Apr 13, 2026
Merged

Feat/homepage navbar redesign#537
cristian-tamblay merged 62 commits into
developfrom
feat/homepage-navbar-redesign

Conversation

@Creylay
Copy link
Copy Markdown
Collaborator

@Creylay Creylay commented Apr 10, 2026

Summary

Complete UI redesign of the homepage and navbar. Replaces the old theme palette with an Amber Dark + Neutral Light
design system, switches fonts to IBM Plex Sans/Mono, redesigns the homepage layout into a sidebar + 2×2 module card
grid, and reworks the navbar with tab-style navigation and an amber active indicator. Also includes responsiveness
improvements, tour integration fixes, multilingual metric descriptions, delete confirmation dialogs, and general
cleanup of deprecated/unused code.


Type of Change

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

Changes (by file)

Theme & Fonts

  • front/src/styles/theme.js: replaced full palette (Amber Dark + Neutral Light), added IBM Plex typography
    variants, custom data-type and accent colors, removed unused MuiDataGrid overrides and language parameter
  • front/public/index.html: added IBM Plex Sans & Mono via Google Fonts CDN
  • front/src/index.css: updated base font-family references
  • front/src/contexts/ThemeContext.jsx: removed language arg from getTheme call
  • front/src/utils/plotlyTheme.js: aligned Plotly chart colors with new theme

Navbar

  • front/src/components/ResponsiveAppBar.jsx: redesigned with IBM Plex tab labels, Workbench badge, amber active
    indicator, improved responsive behavior
  • front/src/components/hardware/HardwareMonitorButton.jsx: restyled to match navbar icon button pattern
  • front/src/components/tour/NavbarTourButton.jsx: new component — moved tour widget into the navbar
  • front/src/components/tour/TourProvider.jsx: integrated NOOP_REGISTRY fallback for safer context handling
  • front/src/contexts/TourRegistryContext.jsx: new context for tour step registry

Homepage

  • front/src/pages/home/Home.jsx: redesigned layout — sidebar + 2×2 amber module card grid with icons and
    descriptions
  • front/src/components/HomeButton.jsx: replaced with amber-design module card component
  • front/src/components/threeSectionLayout/OptionBox.jsx: refactored to use ButtonBase, enhanced styling and layout

Three-Section Layout

  • front/src/components/threeSectionLayout/CollapsibleList.jsx: updated typography to use theme variants
  • front/src/components/threeSectionLayout/GroupedCollapsibleList.jsx: improved navbar icon color, title typography,
    stable scrollbar gutter
  • front/src/components/threeSectionLayout/DeleteConfirmationModal.jsx: added delete confirmation dialogs with i18n
    support
  • front/src/components/threeSectionLayout/ItemBox.jsx: minor styling tweaks
  • front/src/components/threeSectionLayout/ItemMenu.jsx: minor styling tweaks

Models & Datasets

  • front/src/pages/models/ModelsContent.jsx: layout adjustments
  • front/src/components/models/ModelsRightBar.jsx: improved title/toggle alignment
  • front/src/components/models/ModelsLeftBar.jsx: added left bar icons
  • front/src/pages/datasets/DatasetsContent.jsx: layout adjustments
  • front/src/components/notebooks/RightBar.jsx: improved title/toggle alignment
  • front/src/components/notebooks/DatasetNotebookLeftBar.jsx: added left bar icons

Generative

  • front/src/pages/generative/GenerativeContent.jsx: layout adjustments
  • front/src/components/generative/SelectModelMenu.jsx: improved tour element handling and scrolling
  • front/src/components/generative/SessionForm.jsx: improved tour handling
  • front/src/components/generative/SessionBar.jsx: updated Footer import path
  • front/src/components/generative/Footer.jsx: removed (unused)

Backend (metrics)

  • back/metrics/classification/*.py: added multilingual descriptions (en/es) for all classification metrics
  • back/metrics/regression/*.py: added multilingual descriptions (en/es) for all regression metrics
  • back/metrics/translation/*.py: added multilingual descriptions (en/es) for all translation metrics

i18n

  • front/src/utils/i18n/locales/{en,es}/home.json: updated with new sidebar links, module tags and chip labels
  • front/src/utils/i18n/locales/{en,es}/datasets.json: added delete confirmation strings
  • front/src/utils/i18n/locales/{en,es}/models.json: added delete confirmation strings
  • front/src/utils/i18n/locales/{en,es}/generative.json: added missing keys

Tests

  • front/src/test-utils/renderWithProviders.jsx: new test utility with theme and i18n providers
  • front/src/components/HomeButton.test.jsx: new tests for HomeButton
  • front/src/components/ResponsiveAppBar.test.jsx: new tests for navbar
  • front/src/components/hardware/HardwareMonitorButton.test.jsx: new tests
  • front/src/components/jobs/JobQueueWidget.test.jsx: new tests
  • front/src/components/tour/TourButton.test.jsx: new tests
  • front/src/pages/home/Home.test.jsx: new tests for home page

Cleanup

  • front/src/App.jsx: removed unused routes for experiments and explainers
  • front/src/constants/tours/homeTour.js: removed explainability/pipelines tour steps
  • front/src/components/tour/tourStyles.js: updated primary colors to match new theme

Testing (optional)

  • Verify dark and light mode render correctly with the new Amber/Neutral palette
  • Check navbar responsiveness on small screens (hamburger menu)
  • Verify homepage module cards link to correct routes
  • Confirm JobQueueWidget is visible and not hidden behind the AppBar

Notes (optional)

  • The @mui/x-data-grid dependency was removed in a prior commit; this PR cleans up the remaining datagridLocale
    references and MuiDataGrid theme overrides that survived a merge conflict.
  • The language parameter was removed from getTheme() since its only consumer (DataGrid locale) no longer exists.

Irozuku added 30 commits March 25, 2026 17:32
Creylay added 26 commits April 2, 2026 14:51
… context handling and remove unnecessary timeouts
@cristian-tamblay cristian-tamblay merged commit 171f56e into develop Apr 13, 2026
19 checks passed
@cristian-tamblay cristian-tamblay deleted the feat/homepage-navbar-redesign branch April 13, 2026 13:53
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.

3 participants