Feat/homepage navbar redesign#537
Merged
Merged
Conversation
… and applyThemeToLayout functions
… steps for generative and plugins sections
…yling, and improve layout
…ist components to use theme typography
…table scrollbar gutter
… with localization support
…rove alignment of title and toggle button
…d regression modules
… consistency in English and Spanish
…nt properties for improved customization
… context handling and remove unnecessary timeouts
…and update tour step target
…ng and enhance scrolling behavior
cristian-tamblay
approved these changes
Apr 13, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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
Changes (by file)
Theme & Fonts
front/src/styles/theme.js: replaced full palette (Amber Dark + Neutral Light), added IBM Plex typographyvariants, custom data-type and accent colors, removed unused MuiDataGrid overrides and
languageparameterfront/public/index.html: added IBM Plex Sans & Mono via Google Fonts CDNfront/src/index.css: updated base font-family referencesfront/src/contexts/ThemeContext.jsx: removedlanguagearg fromgetThemecallfront/src/utils/plotlyTheme.js: aligned Plotly chart colors with new themeNavbar
front/src/components/ResponsiveAppBar.jsx: redesigned with IBM Plex tab labels, Workbench badge, amber activeindicator, improved responsive behavior
front/src/components/hardware/HardwareMonitorButton.jsx: restyled to match navbar icon button patternfront/src/components/tour/NavbarTourButton.jsx: new component — moved tour widget into the navbarfront/src/components/tour/TourProvider.jsx: integrated NOOP_REGISTRY fallback for safer context handlingfront/src/contexts/TourRegistryContext.jsx: new context for tour step registryHomepage
front/src/pages/home/Home.jsx: redesigned layout — sidebar + 2×2 amber module card grid with icons anddescriptions
front/src/components/HomeButton.jsx: replaced with amber-design module card componentfront/src/components/threeSectionLayout/OptionBox.jsx: refactored to use ButtonBase, enhanced styling and layoutThree-Section Layout
front/src/components/threeSectionLayout/CollapsibleList.jsx: updated typography to use theme variantsfront/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 i18nsupport
front/src/components/threeSectionLayout/ItemBox.jsx: minor styling tweaksfront/src/components/threeSectionLayout/ItemMenu.jsx: minor styling tweaksModels & Datasets
front/src/pages/models/ModelsContent.jsx: layout adjustmentsfront/src/components/models/ModelsRightBar.jsx: improved title/toggle alignmentfront/src/components/models/ModelsLeftBar.jsx: added left bar iconsfront/src/pages/datasets/DatasetsContent.jsx: layout adjustmentsfront/src/components/notebooks/RightBar.jsx: improved title/toggle alignmentfront/src/components/notebooks/DatasetNotebookLeftBar.jsx: added left bar iconsGenerative
front/src/pages/generative/GenerativeContent.jsx: layout adjustmentsfront/src/components/generative/SelectModelMenu.jsx: improved tour element handling and scrollingfront/src/components/generative/SessionForm.jsx: improved tour handlingfront/src/components/generative/SessionBar.jsx: updated Footer import pathfront/src/components/generative/Footer.jsx: removed (unused)Backend (metrics)
back/metrics/classification/*.py: added multilingual descriptions (en/es) for all classification metricsback/metrics/regression/*.py: added multilingual descriptions (en/es) for all regression metricsback/metrics/translation/*.py: added multilingual descriptions (en/es) for all translation metricsi18n
front/src/utils/i18n/locales/{en,es}/home.json: updated with new sidebar links, module tags and chip labelsfront/src/utils/i18n/locales/{en,es}/datasets.json: added delete confirmation stringsfront/src/utils/i18n/locales/{en,es}/models.json: added delete confirmation stringsfront/src/utils/i18n/locales/{en,es}/generative.json: added missing keysTests
front/src/test-utils/renderWithProviders.jsx: new test utility with theme and i18n providersfront/src/components/HomeButton.test.jsx: new tests for HomeButtonfront/src/components/ResponsiveAppBar.test.jsx: new tests for navbarfront/src/components/hardware/HardwareMonitorButton.test.jsx: new testsfront/src/components/jobs/JobQueueWidget.test.jsx: new testsfront/src/components/tour/TourButton.test.jsx: new testsfront/src/pages/home/Home.test.jsx: new tests for home pageCleanup
front/src/App.jsx: removed unused routes for experiments and explainersfront/src/constants/tours/homeTour.js: removed explainability/pipelines tour stepsfront/src/components/tour/tourStyles.js: updated primary colors to match new themeTesting (optional)
Notes (optional)
@mui/x-data-griddependency was removed in a prior commit; this PR cleans up the remainingdatagridLocalereferences and
MuiDataGridtheme overrides that survived a merge conflict.languageparameter was removed fromgetTheme()since its only consumer (DataGrid locale) no longer exists.