feat(tours): re-implement tour with inverse theme #95530
Merged
Conversation
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
to avoid a light border being shown for dark content and vice versa
only relevant for old theme, does nothing in chonk
github-actions
bot
added
the
Scope: Frontend
TkDodo
commented
Jul 15, 2025
Comment on lines
206
to
+210
| const navTourModalCss = css` | ||
| width: 545px; | ||
| [role='document'] { | ||
| box-shadow: none; | ||
| } |
There was a problem hiding this comment.
note: I turned off the box-shadow that is added by the GlobalModal, because it looked bad in light mode when we invert the content theme. When the content is dark, a light border added by the GlobalModal looked like this:
| <TourContainer> | ||
| <ImageContainer | ||
| alt={t('Preview of the issue details experience')} | ||
| src={issueDetailsPreview} |
There was a problem hiding this comment.
we got a new image here by @Jesse-Box that works in both light and dark mode, and is consistent with the other StartTour dialogs we have.
| {t('Maybe later')} | ||
| </TextTourAction> | ||
| <TourAction onClick={handleStartTour} autoFocus> | ||
| {t('Take a tour')} |
There was a problem hiding this comment.
I streamlined the wording between all three StartTour dialogs.
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
Jesse-Box
approved these changes
Jul 15, 2025
andrewshie-sentry
pushed a commit
that referenced
this pull request
Jul 21, 2025
This PR changes how tours are implemented in the platform. Instead of custom theming and custom theme values (like `theme.tour.background`), we now wrap the tour in it’s own `ThemeProvider` with an inverse theme - in light mode, the tour becomes dark, and in dark mode, it becomes light. That ensures tours stand out, while at the same time it allows for a streamlined implementation: We can use normal buttons, normal text and background colors and they will look good - in both the old UI and chonkUI. Therefore, this PR also removes the custom `theme.tour` values. | Tour light | Tour dark | |--------|--------| | <img width="630" height="470" alt="Screenshot 2025-07-15 at 14 34 47" src="https://github.com/user-attachments/assets/1ca10735-d676-4551-8ad0-7b9a2517df75" /> | <img width="630" height="470" alt="Screenshot 2025-07-15 at 14 34 42" src="https://github.com/user-attachments/assets/9f809b8a-fd28-4a44-afd7-7cb56f7dcd7f" /> | | <img width="630" height="470" alt="Screenshot 2025-07-15 at 14 34 53" src="https://github.com/user-attachments/assets/0302cf1e-b9b3-4c12-9fd8-cd28c6c1bf26" /> | <img width="630" height="470" alt="Screenshot 2025-07-15 at 14 34 34" src="https://github.com/user-attachments/assets/7d1bf1f3-b47c-41c3-b192-6a42a128b6ad" /> | Note: The `StartTour` dialog had to be changed 3 times, because it’s not a shared component. I plan to improve this in a follow-up, as there’s no need to re-implement this every time for every tour. | StartTour light | StartTour dark | |--------|--------| | <img width="1451" height="601" alt="Screenshot 2025-07-15 at 14 33 48" src="https://github.com/user-attachments/assets/8fe7ac9a-ae3e-456b-99bd-7432651a7abf" /> | <img width="1451" height="601" alt="Screenshot 2025-07-15 at 14 33 52" src="https://github.com/user-attachments/assets/6311c649-72e9-4130-88ee-ff9fac1f5702" /> | | <img width="1451" height="601" alt="Screenshot 2025-07-15 at 14 33 40" src="https://github.com/user-attachments/assets/57b540dd-a430-4336-8b94-dc94cb260cbc" /> | <img width="1451" height="601" alt="Screenshot 2025-07-15 at 14 33 57" src="https://github.com/user-attachments/assets/9aded215-b44b-4f28-a648-549b815ae4a4" /> |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
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.
This PR changes how tours are implemented in the platform. Instead of custom theming and custom theme values (like
theme.tour.background), we now wrap the tour in it’s ownThemeProviderwith an inverse theme - in light mode, the tour becomes dark, and in dark mode, it becomes light.That ensures tours stand out, while at the same time it allows for a streamlined implementation: We can use normal buttons, normal text and background colors and they will look good - in both the old UI and chonkUI.
Therefore, this PR also removes the custom
theme.tourvalues.Note: The
StartTourdialog had to be changed 3 times, because it’s not a shared component. I plan to improve this in a follow-up, as there’s no need to re-implement this every time for every tour.