EXPERIMENT Dashboard: Aspire brand kit visual refresh#16889
Draft
maddymontaquila wants to merge 9 commits intomainfrom
Draft
EXPERIMENT Dashboard: Aspire brand kit visual refresh#16889maddymontaquila wants to merge 9 commits intomainfrom
maddymontaquila wants to merge 9 commits intomainfrom
Conversation
Re-skin the dashboard with the official Aspire brand identity: - Add Poppins font (self-hosted woff2, 400-700 weights) as primary typeface - Define brand token CSS custom property system (palette, gradients, accents) - Update accent color from #512BD4 to #7455DD (brand primary purple) - Restyle nav sidebar with brand-tinted surfaces - Add gradient accent line to header bar - Update dark theme to use brand-aligned purple-tinted surfaces - Refresh login, error, and not-found pages with brand shadows/borders - Update reconnect modal with brand styling - Modernize data grids: uppercase headers, generous row padding, subtle purple hover states, brand-colored row borders - Add tab bar and search box styling refinements - Update link/anchor colors to brand purple - Badge pill styling with rounded corners - Thin scrollbars with brand accent color - Refresh assistant/chat panel borders and title typography All changes are CSS-only (no component logic changes). Both light and dark themes are updated to align with the brand kit while maintaining WCAG AA contrast compliance. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- Card container treatment for content areas with rounded corners and subtle shadows - Lavender page background (#F8F7FC) for warmth instead of stark white - Pill-shaped search boxes, rounded dropdowns and buttons - Floating pill-style tab bar instead of bordered tabs - Dark mode glassmorphism on nav/header with backdrop-filter - Grid rows without harsh lines, subtle transparent borders - Smooth page transitions with fade-slide-in animation - Circle hover states on icon buttons within content areas - Message bar modernization with rounded corners - Softer, rounded nav active states with fill backgrounds - Focus rings use brand purple with rounded outlines - Removed harsh border-left on main content area - Header uses subtle box-shadow instead of gradient accent line Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- Force table header row background to transparent (override --neutral-fill-layer-rest) - Add gradient background to page heading area (purple-to-magenta) - Remove grey from notification/message bar, use brand-tinted transparent - Apply Poppins font to data grid row cells for modern typography Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- Force .body-content and .layout-body-container to brand page color in dark mode - Override --neutral-layer-2 on body-content to prevent Fluent white background - Force content-layout card + inner table/main to dark surface in dark mode - Also fix light mode body to use lavender (#F8F7FC) via --neutral-layer-2 override - Toolbar forced to transparent background Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- Give the messagebar container an opaque brand gradient instead of a transparent tint over Fluent dark neutral - Apply the gradient in both layout-scoped CSS and global CSS for all viewport sizes - Add explicit table header surface tokens for light and dark themes - Target grid header th elements, not only td elements - Keep sortable grid header stealth buttons text-only so they do not render as white pills Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- Use a thin bright brand gradient when the messagebar area is empty - Expand to the full subtle banner only when a messagebar is present - Keep dark mode notification banners on the opaque brand-navy gradient - Apply Poppins to desktop sidebar navigation labels Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- Make row action buttons transparent at rest instead of dark Fluent pills - Make resource expand toggles compact and transparent at rest - Make toolbar filter/settings icon buttons transparent at rest - Use subtle brand-purple glass hover states in dark and light themes - Prevent selected/hovered grid row styles from reintroducing dark button backgrounds Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- Replace the stock reconnect card with a rounded brand-gradient shell - Add glassy dark/light modal interiors and blurred branded backdrop - Swap the old ripple animation for a conic gradient spinner - Use Poppins semibold text and pill-shaped retry button styling - Remove old global Fluent surface overrides that conflicted with the modal Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Contributor
|
🚀 Dogfood this PR with:
curl -fsSL https://raw.githubusercontent.com/microsoft/aspire/main/eng/scripts/get-aspire-cli-pr.sh | bash -s -- 16889Or
iex "& { $(irm https://raw.githubusercontent.com/microsoft/aspire/main/eng/scripts/get-aspire-cli-pr.ps1) } 16889" |
Member
|
Please add screenshots. |
Refine dashboard brand refresh styling across dense views, including resources, traces, structured logs, metrics, detail panes, menus, splitters, and selected states. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Contributor
|
Re-running the failed jobs in the CI workflow for this pull request because 1 job was identified as retry-safe transient failures in the CI run attempt.
|
Contributor
|
🎬 CLI E2E Test Recordings — 77 recordings uploaded (commit View all recordings
📹 Recordings uploaded automatically from CI run #25607414491 |
maddymontaquila
changed the title
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.
Description
Applies an Aspire brand refresh to the dashboard and polishes the dense views so the branch is ready for design review. This update keeps the refresh restrained and reusable: shared tokens live in
app.css, while page-specific layout fixes stay scoped to the relevant pages.Highlights:
Validation
src\Aspire.Dashboard\Aspire.Dashboard.csprojsuccessfully with isolated output paths.Checklist
Dark Mode:
Light mode:
