Color fixes#1594
Merged
Merged
Conversation
…e it to bottom panel
Contributor
There was a problem hiding this comment.
Pull request overview
This PR refactors hardcoded color values to use CSS variables for better theme support, standardizes text casing to sentence case across the UI, and introduces several UX improvements including a new placeholder component for dashboards loading states and clickable table rows in the charts list.
Changes:
- Replaced hardcoded hex colors with theme-aware CSS variables (e.g.,
var(--color-accentedPalette-500),var(--color-warnPalette-500)) across 20+ component stylesheets - Standardized all user-facing text to use sentence case (e.g., "Edit widget" instead of "Edit Widget")
- Added PlaceholderDashboardsComponent to provide a more appropriate loading skeleton for dashboards list
- Made table rows clickable in charts list with improved hover states and navigation
- Improved chart edit page layout with sticky action bar at bottom
Reviewed changes
Copilot reviewed 31 out of 31 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/src/app/components/skeletons/placeholder-dashboards/placeholder-dashboards.component.ts | New skeleton component for dashboards loading state |
| frontend/src/app/components/skeletons/placeholder-dashboards/placeholder-dashboards.component.html | HTML template for dashboards placeholder with 6 card skeletons |
| frontend/src/app/components/skeletons/placeholder-dashboards/placeholder-dashboards.component.css | Responsive grid styling for placeholder cards |
| frontend/src/app/components/profile/profile-sidebar/profile-sidebar.component.css | Updated border and background colors to use CSS variables |
| frontend/src/app/components/dashboards/widget-renderers/text-widget/text-widget.component.css | Updated link colors to use accented palette variable |
| frontend/src/app/components/dashboards/widget-renderers/table-widget/table-widget.component.css | Replaced hardcoded error colors with theme variables |
| frontend/src/app/components/dashboards/widget-renderers/dashboard-widget/dashboard-widget.component.css | Updated error color to use theme variable |
| frontend/src/app/components/dashboards/widget-renderers/counter-widget/counter-widget.component.css | Replaced error and accent colors with CSS variables |
| frontend/src/app/components/dashboards/widget-renderers/chart-widget/chart-widget.component.css | Updated error colors to use theme variables |
| frontend/src/app/components/dashboards/widget-edit-dialog/widget-edit-dialog.component.html | Changed text to sentence case (e.g., "Edit widget") |
| frontend/src/app/components/dashboards/widget-edit-dialog/widget-edit-dialog.component.css | Updated accent color and removed dark mode override |
| frontend/src/app/components/dashboards/widget-delete-dialog/widget-delete-dialog.component.html | Changed button text to sentence case |
| frontend/src/app/components/dashboards/widget-delete-dialog/widget-delete-dialog.component.css | Updated warning icon color to use palette variable |
| frontend/src/app/components/dashboards/dashboards-sidebar/dashboards-sidebar.component.css | Replaced hardcoded colors with theme variables, removed redundant dark mode overrides |
| frontend/src/app/components/dashboards/dashboards-list/dashboards-list.component.ts | Switched from PlaceholderTableDataComponent to PlaceholderDashboardsComponent |
| frontend/src/app/components/dashboards/dashboards-list/dashboards-list.component.html | Changed button text to sentence case, updated placeholder component |
| frontend/src/app/components/dashboards/dashboards-list/dashboards-list.component.css | Added :host styling for height management, updated colors to use CSS variables |
| frontend/src/app/components/dashboards/dashboard-view/dashboard-view.component.html | Changed all button and menu text to sentence case |
| frontend/src/app/components/dashboards/dashboard-view/dashboard-view.component.css | Updated widget background, border, and resize handle colors to use CSS variables |
| frontend/src/app/components/dashboards/dashboard-edit-dialog/dashboard-edit-dialog.component.html | Changed dialog title to sentence case |
| frontend/src/app/components/dashboards/dashboard-delete-dialog/dashboard-delete-dialog.component.html | Changed dialog title and button text to sentence case |
| frontend/src/app/components/dashboards/dashboard-delete-dialog/dashboard-delete-dialog.component.css | Updated warning icon color to use palette variable |
| frontend/src/app/components/dashboards/chart-mini-preview/chart-mini-preview.component.css | Updated stroke colors to use background color variable, removed redundant dark mode overrides |
| frontend/src/app/components/charts/charts-list/charts-list.component.ts | Added Router injection and openQuery method for clickable rows |
| frontend/src/app/components/charts/charts-list/charts-list.component.html | Removed individual cell links, made rows clickable, changed text to sentence case |
| frontend/src/app/components/charts/charts-list/charts-list.component.css | Added :host styling, row hover states, updated delete action colors to use CSS variables |
| frontend/src/app/components/charts/chart-edit/chart-edit.component.ts | Removed unused cancel method |
| frontend/src/app/components/charts/chart-edit/chart-edit.component.html | Removed back button from header, changed all text to sentence case, moved actions to sticky bar |
| frontend/src/app/components/charts/chart-edit/chart-edit.component.css | Added :host styling, made actions sticky at bottom with shadow, updated border colors to use CSS variables |
| frontend/src/app/components/charts/chart-delete-dialog/chart-delete-dialog.component.html | Changed dialog title and button text to sentence case |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| justify-content: center; | ||
| height: 100%; | ||
| color: var(--mdc-theme-error, #f44336); | ||
| color: var(--color-warnDarkPalette-500); |
There was a problem hiding this comment.
The error color should use var(--color-warnPalette-500) for light mode, with a media query override for dark mode using var(--color-warnDarkPalette-500). Currently, it's using the dark palette color in both light and dark modes, which is inconsistent with other error messages in the codebase (see table-widget, chart-widget, counter-widget components).
Comment on lines
+3
to
+7
| @Component({ | ||
| selector: 'app-placeholder-dashboards', | ||
| templateUrl: './placeholder-dashboards.component.html', | ||
| styleUrls: ['./placeholder-dashboards.component.css'], | ||
| }) |
There was a problem hiding this comment.
This component is missing the imports array in its decorator metadata, making it non-standalone. Since it's being imported directly into another component's imports array (dashboards-list.component.ts), it needs to be standalone. Add imports: [] to the @component decorator to make this component standalone, matching the pattern used by other skeleton components like PlaceholderTableDataComponent.
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.
No description provided.