Skip to content

Fix tour styles#701

Open
Creylay wants to merge 2 commits into
developfrom
fix/tour-styles
Open

Fix tour styles#701
Creylay wants to merge 2 commits into
developfrom
fix/tour-styles

Conversation

@Creylay

@Creylay Creylay commented Jun 16, 2026

Copy link
Copy Markdown
Collaborator

Summary

Fixed several visual inconsistencies in the tour/tutorial system that appeared in light mode and across both themes. The main issues were: hardcoded dark backgrounds in tip boxes that broke in light mode, a spotlight border that was invisible or the wrong color in light mode due to incorrect handling of Joyride's mix-blend-mode: hard-light overlay, and an overly intense interactive step pulse animation.


Type of Change

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

Changes (by file)

  • front/src/components/tour/TourProvider.jsx: Replaced hardLightInverse (computed only for dark backgrounds) with a mode-aware hlInverse(color, isDark) that correctly inverts the primary color through Joyride's mix-blend-mode: hard-light overlay — (255+x)/2 for dark pages, x/2 for light pages. Reduced pulse animation intensity and speed, and added a subtle glow to distinguish interactive steps from non-interactive ones in light mode.

  • front/src/constants/tours/datasetsTour.js: Updated download button color from legacy orange (#ef9f27) to primary blue (#2C7AFF). Replaced hardcoded dark green tip boxes (#1b2f26, color: white) with semi-transparent green (rgba(76, 175, 80, 0.12), color: inherit) so they render correctly in both themes.

  • front/src/constants/tours/notebookTour.js: Same tip box fix as datasetsTour.js.

  • front/src/constants/tours/experimentsTour.js: Replaced light-only hardcoded backgrounds (#e3f2fd, #fff3e0, #f0f9ff) with semi-transparent equivalents. Added left border accents to match the tip box style used in other tours.

  • front/src/constants/tours/modelsTour.js: Replaced dark-only text colors (#2e7d32, #d32f2f) with mid-brightness alternatives (#43A047, #e53935) readable on both light and dark dialog backgrounds. Changed color: #666 to color: inherit.


Testing

  • Verify the spotlight border appears in the correct primary blue in both light and dark mode.
  • Check that tip boxes are readable across the datasets, notebook, experiments, and models tours in both themes.
  • Confirm interactive steps have a subtle pulsing glow that distinguishes them from non-interactive steps in both modes.

@Creylay Creylay changed the title Fix/tour styles Fix tour styles Jun 17, 2026
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.

1 participant