Modernize frontend: design tokens, unified tables, UX polish#368
Merged
Edwardvaneechoud merged 8 commits intomainfrom Mar 29, 2026
Merged
Modernize frontend: design tokens, unified tables, UX polish#368Edwardvaneechoud merged 8 commits intomainfrom
Edwardvaneechoud merged 8 commits intomainfrom
Conversation
…ance UX - Replace 30+ hardcoded hex colors (#22c55e, #ef4444, #f59e0b, etc.) with CSS design tokens (--color-success, --color-danger, --color-warning) across CatalogTreeNode, ArtifactDetailPanel, RunDetailPanel, FlowDetailPanel, KernelCard, and Header/run components for theme consistency and dark mode - Apply existing .styled-table class to catalog detail panel tables (RunDetailPanel, FlowDetailPanel, TableDetailPanel) and remove duplicated table base styles, reducing CSS by ~30 lines - Add shared _status-badges.css with unified status badge and text color utilities for consistent status indicators across all views - Add shared _detail-panels.css with reusable meta-grid, back-button, and section layout styles for detail panel views - Enhance empty states with title/subtitle pattern in FlowDetailPanel and SecretsView for better user guidance - Add subtle page fade transition (0.15s) on route changes via AppLayout - Add empty-state__title and empty-state__subtitle utility classes to _cards.css https://claude.ai/code/session_012RoLapoVECWQxbxLviCruw
✅ Deploy Preview for flowfile-wasm canceled.
|
… RunHistoryTable Resolves merge conflicts in ArtifactDetailPanel, FlowDetailPanel, and RunDetailPanel. Keeps main's RunHistoryTable component and scheduling features while preserving our design token replacements (CSS variables instead of hardcoded hex colors) and styled-table class additions. https://claude.ai/code/session_012RoLapoVECWQxbxLviCruw
… div DesignerView had 3 root-level conditional siblings (v-if, v-if, v-else-if/v-else) making it a fragment. Vue's <Transition> in AppLayout requires a single root element to animate. Wrapping in <div class="designer-view"> resolves the warning. https://claude.ai/code/session_012RoLapoVECWQxbxLviCruw
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
2 participants
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
--color-success,--color-danger,--color-warning, etc.) across 7 components for theme consistency and dark mode readiness.styled-tableclass to RunDetailPanel, FlowDetailPanel, and TableDetailPanel — removing ~30 lines of duplicated CSS_status-badges.css,_detail-panels.css) for consistent status badges, meta grids, and detail panel layouts across all viewsFiles changed (13)
#hexwithvar(--color-*).styled-tableclass, remove duplicate base styles_status-badges.css,_detail-panels.css_cards.cssempty-state__title/__subtitleclassesmain.cssTest plan
npx vite build --mode web— confirm clean buildhttps://claude.ai/code/session_012RoLapoVECWQxbxLviCruw