💄: Configure all component to be compatible with the ArgoCD dark mode #55
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
There was a problem hiding this comment.
Pull Request Overview
This PR updates several Storybook stories to include dark mode variants for improved compatibility with ArgoCD’s dark mode, and it also revises the Storybook preview configuration.
- Added dark mode story variants across multiple components (StatusPanel, StateScreen, IconStatusSync, IconStatusHealth, ApplicationMapNode, ApplicationMapNavigationControls, ApplicationMap).
- Updated the Storybook preview configuration by introducing a new preview.tsx file and removing the older preview.ts file.
Reviewed Changes
Copilot reviewed 9 out of 9 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| src/components/StatusPanel.stories.tsx | Added dark mode variants for StatusPanel stories. |
| src/components/StateScreen.stories.tsx | Renamed “Basic” to “Default” and added corresponding dark mode variant. |
| src/components/IconStatusSync.stories.tsx | Introduced new dark mode variants for sync status stories. |
| src/components/IconStatusHealth.stories.tsx | Added dark mode variants for health status stories. |
| src/components/ApplicationMapNode.stories.tsx | Added dark mode variant for ApplicationMapNode story. |
| src/components/ApplicationMapNavigationControls.stories.tsx | Renamed story to “Default” and added a dark mode variant. |
| src/components/ApplicationMap.stories.tsx | Added dark mode variants for default, complex topology, and selection stories. |
| .storybook/preview.tsx | New preview configuration supporting dark mode through a withColorScheme decorator. |
| .storybook/preview.ts | Removed outdated preview configuration. |
xunleii
force-pushed
the
feat/add-dark-mode
branch
2 times, most recently
from
0b2b332 to
9481aaf
Compare
Signed-off-by: Alexandre Nicolaie <[email protected]>
Signed-off-by: Alexandre Nicolaie <[email protected]>
Signed-off-by: Alexandre Nicolaie <[email protected]>
Signed-off-by: Alexandre Nicolaie <[email protected]>
The MiniMap is not so much usefull and is very tricky to configure the dark-mode without chaging the react-flow color mode Signed-off-by: Alexandre Nicolaie <[email protected]>
Refactored the ApplicationMapNode component to align with ArgoCD styling conventions. Updated the associated story to ensure the ApplicationSet icon and node kind text are rendered correctly. Signed-off-by: Alexandre Nicolaie <[email protected]>
xunleii
force-pushed
the
feat/add-dark-mode
branch
from
54c43aa to
aca42b8
Compare
There was a problem hiding this comment.
Pull Request Overview
This PR updates the ArgoCD extension to support dark mode across all components by refining styles and adding dedicated dark mode story variants. Key changes include:
- Updating SCSS variables and restructuring styles for the node icons and navigation panels.
- Replacing library-based control components with custom markup in ApplicationMapNavigationControls.
- Adding dark mode story variants and renaming stories consistently across multiple components.
Reviewed Changes
Copilot reviewed 15 out of 15 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| src/styles/index.scss | Revised color variables and removed deprecated control and node icon styles |
| src/index.tsx | Added an additional class for improved dark mode styling |
| src/components/*.{stories,tsx} | Added/upgraded dark mode story variants and updated component markup accordingly |
| src/components/ApplicationMapNavigationControls.tsx | Replaced Panel/ControlButton with custom markup for navigation controls |
| src/components/ApplicationMapNode.tsx & .stories.tsx | Updated node icon markup to align with the new dark mode design |
| .storybook/preview.tsx & .storybook/preview.ts | Transitioned to a new preview configuration that supports both light and dark themes |
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.
No description provided.