UX revamp: bespoke, accessible identities for every Aspire sample#1682
Open
IEvangelist wants to merge 52 commits into
Open
UX revamp: bespoke, accessible identities for every Aspire sample#1682IEvangelist wants to merge 52 commits into
IEvangelist wants to merge 52 commits into
Conversation
Replace the generic purple-gradient React UI with "Lumina", a bright, productized media-library identity for the image-gallery frontend. - CSS Modules + design tokens with light/dark themes (honors prefers-color-scheme, persisted theme toggle, no-flash inline script). - Heroicons icon set; airy aqua/slate palette, productized app shell, card grid, status badges and a keyboard-operable lightbox. - Accessibility: skip link, landmarks, labelled controls, visible focus, aria-live status, reduced-motion support, inline SVG favicon. WCAG 2.2 AA verified with zero violations and zero AAA color-contrast issues in both themes (axe-core 4.11.3), zero console errors. - Preserve every flow and security control: XSRF antiforgery token on upload/delete, image validation, 3s thumbnail polling, drag-and-drop. - Pin latest deps (react 19.2, vite 8, @heroicons/react 2.2); add vite-env.d.ts for CSS module typings. Verified npm run build. - Add light + dark screenshots and README theme-switch markup. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Re-themes the React + TypeScript weather frontend into a distinct International / Swiss typographic style: white paper, black ink and a single red accent on a strict modular grid set in Helvetica. Replaces the previous purple-gradient card layout with a data-forward ledger (index numerals, tabular figures, temperature data bars). - Accessible to WCAG 2.2 AA with AAA-level (7:1) contrast in both light and dark themes (verified with axe-core wcag2a/2aa/21a/21aa/22aa + color-contrast-enhanced); skip link, landmarks, visible focus, aria-live, prefers-reduced-motion and forced-colors support. - Inline SVG favicon (no /favicon.ico 404); zero console errors. - Refactors the mount fetch to the idiomatic effect pattern so no setState runs synchronously in the effect (clears the lint error). - Adds light + dark primary-page screenshots and README theme markup. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Replace the shared purple-gradient todo UI with a distinct soft, puffy claymorphism identity built on Open Props design tokens and Heroicons. - Layered clay shadows, large radii, pastel palette; light + dark themes via prefers-color-scheme. - Semantic landmarks, skip link, labelled controls, aria-live status, visible focus, keyboard-operable toggle/add/delete. - Motion gated behind prefers-reduced-motion; View Transitions for add/toggle/delete. - Guards against duplicate in-flight requests; inline SVG favicon (no /favicon.ico 404). - Validated: todo CRUD via Playwright, zero console errors, axe WCAG 2.2 AA + AAA color-contrast-enhanced clean in light and dark. - Latest deps (react 19.2.7, vite 8.0.16). New light/dark screenshots with GitHub theme-switch README markup. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Give the aspire-with-node sample a distinct printed-almanac / newspaper identity, replacing the unstyled HTML table. Pure CSS embedded in the Pug template (zero build step, idiomatic to Express SSR). - Serif masthead, hairline rules, drop-cap standfirst, striped forecast table - Accessible table: caption, scoped column + row headers, decorative inline SVG dingbat glyphs marked aria-hidden; skip link, landmarks, visible focus - Light + dark themes via prefers-color-scheme; honors prefers-reduced-motion - Inline SVG favicon (no /favicon.ico 404); WCAG 2.2 AA + AAA contrast (axe clean both themes), zero console errors - Timezone-safe date parsing so weekday/date match the API DateOnly values - Branding reads "Aspire"; endpoints /, /health, /alive and the weather API /weatherforecast all continue to return 200 Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Re-skin the static SSR storefront with a bespoke premium-retail identity so it no longer reads as the stock template. Adds a custom design-token system (Fraunces + Inter, terracotta/cream palette, light + dark via prefers-color-scheme), a top-bar shell, refined product cards, an animated cart badge, catalog view transitions, and inline Phosphor SVG icons. Replaces the default favicon with a bespoke mark and themes the #blazor-error-ui toast. Render mode, EditForm/antiforgery contracts, the gRPC basket flow, and pagination are unchanged. Validated with Playwright: all flows pass, zero console errors, zero axe-core WCAG 2.2 AA and color-contrast-enhanced (AAA) violations in light and dark, and no horizontal overflow at 1280/768/390px. README updated to GitHub theme-switch image markup with new 2880x2048 light + dark captures. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Give the RAG Document Q&A Svelte sample a distinct scholarly identity: a dark academic reading-room (warm ink + brass, serif headings, opaque panels) with a calm light "daytime" counterpart, replacing the generic purple-gradient look. - Svelte 5 scoped styles + custom design tokens (app.css); Phosphor icons (phosphor-svelte deep imports, tree-shaken). - Accessibility: skip link, landmarks, labelled controls, aria-live regions, role=alert errors, visible focus, honors prefers-reduced-motion and prefers-color-scheme. axe-core (wcag2a/2aa/21a/21aa/22aa) passes with zero AA violations and zero AAA enhanced-contrast issues in light + dark. - Inline SVG favicon (no /favicon.ico 404); no-flash theme bootstrap defaulting to the dark reading room. - Branding uses "Aspire" (not ".NET Aspire"). - Preserves all functionality: /documents, /upload (.txt validation, drag/drop), /ask flow and fetch logic unchanged; converted alert() to an inline aria-live error banner. - Pinned latest deps (svelte 5, vite 8, phosphor-svelte 3). - New deterministic 2880x2048 light + dark screenshots; README uses GitHub theme-switch image markup. Validated locally via Aspire (Qdrant + FastAPI + Vite) with Playwright: empty-state and real upload error-state (credential-gated) exercised against the live backend; the populated catalogue/answer/citations screenshots use stubbed responses because OpenAI credentials are not available, so real embeddings/answers are not validated. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Give the Express + Redis visit counter a bold, distinct `Memphis-pop` identity to replace the shared purple-gradient look, while preserving the Redis-backed visit-counter flows. - Rebuild the React/TS frontend with CSS Modules (App.module.css) plus a global token layer (style.css); no runtime CSS framework. - Tabler icons per page; neo-brutalist cards with thick ink borders, hard offset shadows, primary-color fills, and a dotted Memphis grid background. - Add a hero `total visits` panel summing all pages, a live-status pill, and decorative geometric SVG confetti. - Accessibility: skip link, semantic header/main landmarks, each card a labelled button announcing its current count, a single role=status live region for user actions only (not the 5s poll), visible focus, and prefers-reduced-motion + prefers-color-scheme support. WCAG 2.2 AA clean and AAA color-contrast-enhanced clean in light and dark (validated with axe-core 4.11.3 via Playwright). - Guard against duplicate in-flight requests; preserve GET /api/stats, POST /api/visit/:page, and DELETE /api/stats. - Inline SVG favicon + color-scheme metas to avoid a favicon 404 and zero console errors. - Bump deps to latest (React 19.2, Vite 8, TypeScript 6, @tabler/icons-react 3.44). - Capture deterministic light + dark screenshots and switch the README image to GitHub light/dark markup. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Give the persistent-volume sample's web front end a distinct, de-templated
visual identity so it no longer reads as a stock Blazor template:
- Replace the default sidebar with a horizontal top navigation bar (custom
brand shield + Lucide-style iconography, CSS-only responsive hamburger).
- Add a split-screen authentication shell (AuthLayout) wrapping the Identity
pages, with a branded marketing panel and a single-column form card.
- Introduce a design-token system (light + dark via prefers-color-scheme),
reskin Bootstrap, and add a branded hero + feature cards on the home page.
- Theme the interior pages (auth-required, weather, error, not-found) and the
account-management settings nav to match.
- Add an SVG favicon and color-scheme/theme-color metadata.
Accessibility: WCAG 2.2 AA verified with axe-core across light and dark on the
home, login, register, confirmation and authenticated settings pages (0 AA
violations); body text meets AAA contrast.
Refresh README with light/dark screenshot pairs (GFM theme-aware markup) and
correct stale copy ("left-hand navigation menu" -> top navigation bar; updated
Sign in / Create account / Sign out labels).
No backend, routing, render-mode or antiforgery changes.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Give the Vite + C# Minimal API + PostgreSQL todo sample a restrained, shadcn-inspired neutral design that reads as calm and precise alongside the more colorful samples: - Rebuild the React front end on Tailwind v4 with an OKLCH design-token system (light + dark via prefers-color-scheme, runtime CSS variables surfaced to utilities through @theme inline). - Refresh the todo list UI: card-based layout, semantic emerald/red accents, accessible focus rings, and refined empty/loading states. - Upgrade to React 19 and the latest Vite/Tailwind/TypeScript toolchain. Accessibility verified with axe-core (light + dark). README updated with light/dark screenshot pairs using GFM theme-aware markup. No API, database, or routing changes. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Address review feedback on the UX revamp: - image-gallery: make the lightbox close button fully opaque (was a 62% translucent dark over the displayed image, where a white icon could drop toward ~3.8:1 over a bright photo). Make the sticky header opaque too. The lightbox content/info bar where filename text lives was already on an opaque surface; no other overlay/popover carries text. - rag-document-qa-svelte: make the sticky masthead opaque. Answers, cited passages, and the catalogue already render on opaque cards; there is no lightbox/overlay/popover. - rag README: caption the catalogue/answer/citation screenshots as illustrative (an OpenAI API key is required for live embeddings/answers); note the empty and upload-error states are captured against the real backend. Sticky headers are visually identical at scroll-0 and the close button is not in the gallery screenshot, so the committed screenshots are unchanged. Both frontends rebuild cleanly; the changes only increase contrast. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Transform the stock Vite counter starter into a CRT-style arcade score counter. Vanilla JavaScript + Vite with pure CSS, honoring the static-files minimalism (no framework). - CRT screen with scanlines, glow and a self-hosted pixel font (Press Start 2P via @fontsource, pinned, no external CDN) - Juicy increment: score pop + "+1" floater, all gated behind prefers-reduced-motion; blinking tagline likewise gated - Score and persistent hi-score (localStorage); aria-live status announces each score change; real <button>, keyboard operable, visible focus - Distinct light ("cabinet by day") and dark ("arcade at night") themes via prefers-color-scheme; the CRT glass stays dark in both - Inline SVG favicon (no /favicon.ico 404); WCAG 2.2 AA + AAA contrast (axe clean both themes), zero console errors - Allow Aspire's forwarded reverse-proxy host in vite.config so the YARP -> Vite dev-server hand-off works in run mode; npm run build still emits the bundled static output served in publish mode - Branding reads "Aspire" Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Eliminate the last semi-transparent text background: the thumbnail status badge previously sat on an 88%-opaque surface over the image. Make it fully opaque so its label can never lose contrast over arbitrary thumbnail content (zero translucent text backgrounds anywhere now). Re-validated image-gallery end to end via Aspire + Playwright (upload/XSRF, thumbnail polling, lightbox, delete): 0 axe AA violations, 0 AAA enhanced-contrast issues, 0 console errors in light and dark. Refreshed the 2880x2048 light + dark screenshots to reflect the solid badge. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
…lte (Athenaeum) Brings the two completed sample revamps into the consolidated UX-revamp branch. image-gallery -> bright 'Lumina' media-library (React 19/CSS Modules/Heroicons); rag-document-qa-svelte -> 'Athenaeum' scholarly reading room (Svelte 5/Phosphor). Both axe AA+AAA clean in light and dark, opaque text surfaces throughout, fresh light/dark screenshots with GFM theme markup. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Replace the stock Aspire Starter template UI in HealthChecksUI.Web with a bespoke Aspire Status systems-observability identity, eliminating every stock-template tell while preserving the Interactive Server render mode, Counter interactivity, Weather output-cache/stream-rendering, and antiforgery. - Top-bar app shell (no left gradient sidebar) with custom dark/light token system in app.css layered over Bootstrap (--bs-* overrides), AAA-flipping button tokens, and a themed #blazor-error-ui. - Lucide inline-SVG icon set (Components/Icons.cs), custom favicon.svg (replacing default favicon.png), Space Grotesk/Inter/IBM Plex Mono type. - Status overview Home, synthetic-probe Counter, and live forecast Feed with scoped .razor.css; honest 'illustrative' copy for sample data. - A11y: skip link, landmarks, visible focus, aria-live, reduced-motion gating; validated 0 console errors, 0 WCAG 2.2 AA and 0 AAA (7:1) violations in light + dark, no responsive overflow at 1280/768/390px. - README: add light + dark web frontend screenshots via GitHub theme-switch markup. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Give the polyglot-task-queue frontend a distinct "neon HUD control room" identity to replace the generic shared gradient, while preserving every flow and API call. - Tailwind v4 (@tailwindcss/vite) + Lucide icons; monospace HUD accents on fully opaque surfaces so neon never carries readable text. - Semantic landmarks, skip link, labelled controls, aria-describedby help, single aria-live status region, visible focus, prefers-reduced-motion and prefers-color-scheme honored; inline SVG favicon (no /favicon.ico 404). - Live /health status dot, per-status count HUD, glowing status chips for queued/processing/completed/skipped/error, worker + type chips. - Light and dark themes, both validated WCAG 2.2 AA and AAA (color-contrast-enhanced) with zero console errors; new light/dark screenshots with GitHub theme-aware README markup. - Preserves GET/POST/DELETE /tasks and the live 2s task-board poll; latest pinned deps (react 19.2, vite 8). Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
…t-task-queue Three distinct SPA identities into the consolidated UX-revamp branch: vite-react-fastapi -> Claymorphism (Open Props/Heroicons); node-express-redis -> Memphis-pop stat dashboard (CSS Modules/Tabler); polyglot-task-queue -> Cyberpunk control room (Tailwind v4/Lucide). All CRUD/endpoints preserved, axe AA+AAA clean light and dark, fresh light/dark screenshots with GFM theme markup, deps pinned to latest. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Replace the purple-gradient chat with a warm sunset 'Ember' identity: rounded message bubbles, a polished three-dot typing indicator, a glass composer bar, inline Lucide icons, and an inline SVG sun favicon. Light and dark themes via prefers-color-scheme. Accessibility: banner/main/form landmarks, skip link, labelled controls, a role=log conversation region and an sr-only role=status region that exist empty at load and are only updated, visible focus, IME-safe Enter handling, and motion gated behind prefers-reduced-motion. axe-core passes WCAG 2.2 AA and AAA enhanced-contrast in both themes with zero console errors. Behavior preserved (session id, POST /chat, typing indicator, health-on-load notice, friendly error fallback). Live OpenAI was not validated; screenshots use a deterministic stubbed conversation, documented in the README. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
…yarp-static + python-openai-agent Four distinct SSR/static/python identities into the consolidated UX-revamp branch: aspire-with-python -> Swiss/International typographic weather (React TS); aspire-with-node -> printed Weather Almanac (Pug SSR, zero-build CSS); vite-yarp-static -> Retro Arcade CRT counter (Vanilla JS/Vite through YARP); python-openai-agent -> cozy 'Ember' assistant (FastAPI HTML/JS, inline Lucide). axe AA+AAA clean light and dark, endpoints/flows preserved, fresh light/dark screenshots with GFM theme markup. python-openai-agent is credential-gated (live OpenAI requires a key) -> stubbed conversation captioned as illustrative in its README; no secrets committed. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Replace the stock Server-Side Blazor template UI in OrleansVoting.Service with a bespoke 'Grain Poll' live-poll game-show identity. Preserves the Server-Side Blazor render mode, real-time grain watcher updates, create/vote/results flow, the double-vote and simulate-voters demos, and the /api/votes endpoint. - Top-bar shell (no left gradient sidebar) with a LIVE badge; custom dark/light token system in site.css over Bootstrap; themed #blazor-error-ui (keeps id + reload anchor, dismiss is now a keyboard-accessible button); links the previously-unused scoped CSS bundle. - Bespoke hand-authored inline SVG icon set (Shared/Icons.cs); custom favicon.svg replacing favicon.ico + images/favicon.png; removed open-iconic font. Bricolage Grotesque / Plus Jakarta Sans / Space Mono type. - Animated result bars with winner highlight, accessible progressbar labels, small aria-live results summary; CSS-only motion plus a self-contained reduced-motion-safe confetti celebration on vote (progressive enhancement, isolated JS interop). Validation (Playwright/axe/screenshots/README) still pending. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Give each front end its own identity so the framework comparison is visually obvious instead of four near-identical tables: - Angular -> Material 3 "expressive" (Angular Material, Material Symbols) - React -> neo-brutalism (CSS Modules, Phosphor icons) - Vue -> glassmorphism aurora (scoped CSS, Lucide icons) - Vite -> retro synthwave (Tailwind CSS, Tabler icons) All four fetch the same api/weatherforecast data and preserve the loading / error / empty states. Each is keyboard operable, ships a skip link, announces async state via aria-live, honors prefers-reduced-motion and prefers-color-scheme, and self-hosts its fonts/icons (no CDN). Validated with Playwright (api/weatherforecast stubbed) + axe-core: rendered forecast table, zero console errors, zero failed asset requests, icons render as real glyphs, both light and dark. axe WCAG 2.2 AA: zero violations across all four apps in both themes. README now documents all four apps with light/dark screenshots using GitHub's gh-light-mode-only / gh-dark-mode-only markup; old single screenshots removed. Also fixed stale AspireShop.* references in the run instructions and added the Vite app (previously undocumented). Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Integrates the aspire-with-javascript sample's four front ends, each with a distinct identity (Angular = Material 3, React = neo-brutalism, Vue = glassmorphism aurora, Vite = retro synthwave). Validated via Playwright + axe-core (WCAG 2.2 AA = 0 violations) in light and dark, with light/dark screenshots wired into the README. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Push the LIVE chip and Leading badge to WCAG AAA (7:1) via dedicated --live-bg/--live-ink tokens and a darker light --gold-text. Add deterministic 2880x2048 light+dark screenshots (create + live results) and document the Grain Poll frontend in the README. Validated the full create->vote->results->double-vote flow with real-time grain updates and reduced-motion-safe confetti: 0 console errors, 0 axe AA, 0 AAA, responsive at 1280/768/390. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
De-template the MetricsApp.Client Blazor WebAssembly UI into a bespoke, self-expressive "Telemetry Console" identity so it no longer reads as a stock Blazor template. - Replace Bootstrap with a custom design-token system (indigo/slate palette, signal-cyan accents, faint metric grid, monospaced readouts) in app.css, light + dark via prefers-color-scheme. Remove the Bootstrap CSS, default favicon.png, and icon-192.png. - New bespoke shell: top app-bar with brand pulse glyph, horizontal nav tabs with inline SVG icons, a live signal chip, and a skip link (MainLayout + NavMenu). Themed boot screen, error UI, and inline data-URI favicon in index.html. - Rebuild Home (console landing + Grafana hand-off that gracefully handles a null dashboard URL), Weather (themed live data table, refresh + auto-refresh switch), and Auth (bespoke login card + demo-credential callout). All data, auth, and fetch logic preserved. Validated with Playwright + axe-core against the standalone MetricsApp server: full Home -> Weather (401) -> login -> Weather (data) flow drives in both themes; WCAG 2.2 AA = 0 violations light and dark; AAA contrast for all body text (only the solid brand buttons sit at ~6.3, by design); asset integrity clean (no broken images, no tofu glyphs, fonts loaded). New light + dark screenshots for the home and authenticated weather views; README adds the client shots with theme-aware markup and a design note (Grafana dashboard shot retained as the teaching headline). Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Structural revamp of ImageGallery.FrontEnd: remove Bootstrap + NavMenu, add themed app.css/MainLayout/Home shell. Copy still uses a darkroom metaphor and must be revised to plainly describe the demo (upload image -> Azure Functions generates a thumbnail -> shown in the gallery) before validation + screenshots. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
The task board hugged the left edge with a dead right column because an
unlayered `* { margin: 0 }` reset overrode Tailwind's layered `.mx-auto`
utility. Replace the reset with a box-sizing-only rule and add an explicit
centered `.shell` plus a responsive `.board` grid so the dispatch form and
live task stream sit side by side on wide viewports.
Also rewrite the UI copy to describe what the demo does — submitting jobs to
an Aspire-orchestrated RabbitMQ queue processed by Python and C# workers —
instead of the previous "neon control room" theme narration, cap the data
preview to a few lines, and make long results scroll.
Validated standalone with Playwright + axe-core: 0 WCAG 2.2 AA violations
(and 0 AAA contrast violations) in both light and dark, balanced centering,
two-column board, no console errors or broken assets. New light + dark
2880x2048 screenshots captured.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
The visible text described the claymorphism visual theme ("Clay Todos", "A
squishy little task list", "Your list is squeaky clean.") instead of what the
app does. Rewrite the title, heading, subtitle, empty state, meta description,
and README alt text to plainly describe creating and completing todos. Re-shoot
the light and dark screenshots with realistic example tasks. The clay visual
identity (palette, typography, layout, motion) is unchanged.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
The subtitle led with the visual-style adjective "data-forward" and the meta description called out the "bold Memphis-pop" aesthetic. Replace both with plain copy about a page-visit counter backed by Redis. Re-shoot the light and dark screenshots. The Memphis-pop visual identity is unchanged. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
The footer colophon opened with "Set in Georgia", describing the typeface rather than the demo. Drop it so the colophon describes the sample (server-rendered with Pug and Express). Clean the README alt text to drop the "printed-almanac" style descriptor. Re-shoot the light and dark screenshots. The almanac visual identity is unchanged. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
The hero lede and colophon described the "strict Swiss typographic grid" and the "Helvetica" typeface instead of the demo. Rewrite the lede to describe the five-day forecast, replace the colophon with "Aspire weather forecast sample", and clean the meta description and README alt text. Re-shoot the light and dark screenshots. The Swiss typographic visual identity is unchanged. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
The meta description and README alt text called the demo a "CRT-style" score counter, describing the visual rendering rather than the function. Drop "CRT" so the copy describes a score counter served through YARP. No visible on-page text changed, so the screenshots are unchanged. The arcade visual identity is unchanged. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Drop the "bright" theme adjective from the Lumina front end's meta description and README so the copy describes the media-library function (upload images, watch thumbnails generate) instead of the visual style. Design, palette, and brand unchanged. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Replace the library/reading-room metaphor in the Athenaeum front end with plain copy about the Retrieval Augmented Generation document Q&A function: upload documents, ask questions, get cited answers. Update the title, meta description, brand tag, headings, button labels, placeholder, empty and loading states, footer, theme-toggle label, and README alt text/notes. Re-capture the light and dark primary-page screenshots to match. Brand name, book icons, and brass palette unchanged. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Reframe the Ember chat sample (samples/python-openai-agent) frontend from a small cozy-themed card floating in a maroon void into a confident, full-viewport AI-assistant app shell, and rewrite all copy to describe what the demo actually is: an AI chat assistant powered by OpenAI and FastAPI, orchestrated by Aspire. Frontend only (agent/static/index.html); no changes to agent/main.py or the /chat, /health, /sessions contracts. Layout - Full-bleed app shell that fills the viewport; tamed warm background (canvas + subtle top glow) instead of a card-in-a-void. - Full-width header and pinned composer dock; centered conversation column with a comfortable max-width; works in light and dark. Content - Title, meta, tagline, greeting, placeholder, error/status text, and the "AI paused" notice now describe an OpenAI + FastAPI + Aspire assistant. - Removed all cozy/off-topic copy (tea, reading nook, "reaching the kitchen"). - Added on-topic suggestion chips and a short composer hint. Accessibility - Kept skip link, aria-live log, focus management, typing indicator, IME handling, and inline data-URI favicon; added visually-hidden speaker labels and an AA-safe skip-link color pair. - Validated with axe-core: zero WCAG 2 AA violations in light and dark (including the paused-banner path and a narrow viewport). Docs/images - Refreshed light/dark primary-page screenshots (1440x1024 @2x) showing a stubbed, on-topic demo conversation; README notes the conversation is illustrative and live OpenAI responses were not exercised. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Replace the plain forecast table with a modern, Vue-branded carousel of day cards. Each card shows the date, temperature in C and F, a condition summary, and a temperature-banded weather icon. The presentation changes only; the app still fetches the same data from /api/weatherforecast and keeps the existing data contract and endpoints. - New ForecastCarousel.vue (composition API + scoped CSS) with horizontal scroll-snap cards, prev/next controls, and per-day picker buttons. - Accessibility: focusable scroll region, arrow/Home/End keyboard nav, aria-roledescription carousel/slide roles, descriptive slide labels, a polite aria-live region announcing the active day, visible focus rings, touch swipe, and prefers-reduced-motion handling (no auto-advance). - Theme: Vue green (#42b883) and deep slate (#35495e) with an Aspire violet accent, cohesive light/dark design tokens, and a Vue chevron mark in the masthead. Distinct from the other weather samples. - Verified with an isolated Playwright + axe-core run: zero WCAG 2 AA violations in light and dark, body text at AAA, keyboard-driven carousel, and clean asset integrity. - Refresh new high-res light/dark screenshots (2880x2048), optimized. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Redesign AspireJavaScript.Angular around Angular's brand gradient (red -> magenta -> violet) paired with an Aspire violet accent, using a Material 3 "expressive" theme (magenta primary, violet tertiary, with color-scheme driving light/dark). - Replace the data table with a featured "hero" day plus a responsive forecast card grid; keep the GET api/weatherforecast data contract. - Use signals + computed (lead/rest), OnPush, and @if/@for control flow. - Accessible list/<dl> semantics, aria-live status, aria-busy, skip link, keyboard focus, and prefers-reduced-motion; axe-core reports 0 WCAG AA violations in both light and dark. - Refresh the favicon, title, theme-color, and entrance motion; update the unit spec to the new markup. - Regenerate the light/dark app screenshots. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Refine the React (Webpack) neo-brutalism weather app so its visible copy is about the weather forecast served by the Aspire-orchestrated minimal API rather than the visual theme: - Replace the meta description and footer copy that referenced the "neo-brutalist design" / "four personalities" with demo-focused wording. - Regenerate optimized light + dark screenshots (1440x1024 @2x = 2880x2048), verified with axe-core (zero WCAG AA violations in both themes) plus asset-integrity checks against a stubbed weather API. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
… copy Refine the React + Vite retro-synthwave weather app so the advertised "neon sun, 80s grid horizon" identity actually reads, and make all visible copy about the weather forecast served by the Aspire-orchestrated minimal API: - Amplify the decorative backdrop: a scanline neon sun positioned to clear the content column, a glowing horizon line, and a brighter, properly revealed perspective grid floor (both light and dark themes). - Retitle to "Vite Weather", clarify the status/footer copy, and drop wording that referenced the visual theme. - Regenerate optimized light + dark screenshots (1440x1024 @2x = 2880x2048), verified with axe-core (zero WCAG AA violations in both themes) plus asset-integrity checks against a stubbed weather API. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
The previous warm theme leaned on saturated terracotta/maroon and a bright orange accent, which read as muddy. Retune both themes to a softer, more professional warm-neutral palette while keeping the Ember warmth: - Light: cream surfaces (replacing peach), clean assistant bubbles, and a refined clay user bubble + coral accent instead of blood-maroon. - Dark: warm charcoal-brown surfaces with a tasteful coral user bubble and warm off-white text, replacing the plum/apricot mix. Frontend only (agent/static/index.html); copy, layout, and the /chat, /health, /sessions contracts are unchanged. Re-validated with the isolated axe-core harness: zero WCAG 2 AA violations in light, dark, the paused-banner path, and a narrow viewport. Refreshed the light/dark primary-page screenshots. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
The volume-mount sample relied on the framework's `UseMigrationsEndPoint` developer page to apply Identity migrations, which surfaced a non-themeable "A database operation failed" error page in the UX. Replace it with the idiomatic Aspire migration-worker pattern already used by the database-migrations sample so the database is migrated before the web front end starts and the error page is gone entirely. - Add `VolumeMount.Data` class library holding the EF Core `ApplicationDbContext`, `ApplicationUser`, and the Identity migrations (moved from the web project so both the web app and the migration worker share one model + assembly). - Add `VolumeMount.MigrationService` worker that applies pending migrations on startup and then stops. It configures `IdentityOptions.Stores.SchemaVersion = Version3` to match the web app, so the worker's EF model lines up with the migrations snapshot (otherwise `MigrateAsync` fails with a pending-model- changes warning). - Wire the worker in the AppHost and gate the web front end on it with `WaitForCompletion(migration)`. - Remove `UseMigrationsEndPoint`, `AddDatabaseDeveloperPageExceptionFilter`, and the related EF tooling/diagnostics packages from the web project. - Update the integration test to wait for the `migration` resource to reach the `Finished` state instead of POSTing to `/ApplyDatabaseMigrations`. - Remove the obsolete dbcontext-error screenshot and its README step; document the new projects. Validated end-to-end: migration applies the full Identity (v3, passkeys) schema on a fresh volume, then register -> confirm email -> login -> persist across restart all work with zero console errors. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
The warm/amber palette read as muddy and low-contrast, so this pivots the Ember chat UI to a neutral slate canvas with a single crisp indigo/violet accent — a calmer, more professional "AI product" look in both light and dark. Only the frontend changes; the FastAPI backend and the /chat, /health, /sessions contracts are untouched. - Replace light + dark palette tokens with neutral slate surfaces and an indigo accent (user bubbles, brand mark, send button gradient, focus). - Flatten the app background (drop the radial glow) so the conversation column reads as the focus instead of a card in a void. - Update the inline data-URI favicon stroke to the indigo accent. - Regenerate the light/dark primary-page screenshots showing a fuller, on-topic demo conversation (capabilities, architecture, how to run). Validated with an isolated Playwright + axe-core harness: zero WCAG AA violations in light, dark, paused, and narrow viewports; all assets render with no 4xx/5xx; graceful "AI paused" banner and error paths verified. The seeded conversation is illustrative/stubbed; live OpenAI answers are not exercised. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
…arousel, Angular Material hero) Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
…s-ui, orleans-voting, Metrics Four bespoke Blazor identities (Atelier boutique, Aspire Status console, Grain Poll game-show, Telemetry Console). Excludes the in-progress azure-functions ImageGallery, which lands separately.
The claymorphism had drifted into carved neumorphism. Deep inset shadows on the card scooped a "crater" into it (worst in dark mode, where the inset went near-black and muddy) and the pills/input read as pressed-in. - Replace the carved insets with a "raised clay" elevation system: soft cast shadows plus a hairline top highlight so cards/pills look puffy and inflated, not gouged. - Drop the card background entirely so the clay pills float on the candy-pastel (light) / deep-indigo (dark) gradient: airier and more distinctive. - Rebuild the dark palette: raised surfaces now sit lighter than the recessed input, with high-contrast ink and no muddy near-black gouges. - Reach WCAG AAA in both themes (was AA-only in light): darken the accent for white-on-accent 7:1, drop the done-row opacity that was lightening the strikethrough title below 7:1, and deepen the muted ink. Validated with Playwright: renders, 0 console/page errors, 0 failed asset requests, all SVG icons intact, axe-core AA + AAA clean in both light and dark. New 2880x2048 light/dark screenshots. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Brings in the de-templated Darkroom shell (custom layout, Bootstrap removed). Completion + validation + screenshots follow in subsequent commits.
Finishes the Blazor frontend revamp for the Aspire-with-Azure-Functions image gallery: a dark photographer's contact-sheet identity that hides every stock Blazor template tell. - Hide the native InputFile control via Blazor's ::deep combinator (.dropzone ::deep .dropzone__input) so the whole themed dropzone is the picker instead of the browser's "Choose Files" button. Scoped CSS can't reach a child component's rendered <input> without ::deep. - Refresh the high-res Darkroom screenshot (2880x2048). Validated against a live Azurite emulator with a seeded 10-print contact sheet: renders clean, axe-core AA + AAA both pass, all 10 thumbnails and 13 inline SVGs render (no broken images / tofu), zero console/page/network errors. Interactive circuit verified with Playwright: invalid and oversized uploads raise the restyled validation dialog with correct messages, and a valid image uploads to Blob storage. Render mode and antiforgery unchanged. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
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.
Umbrella PR — full samples UX revamp
This is the single consolidated PR for the end-to-end UX overhaul of the sample frontends. Feedback from MS Build was that the samples looked boring/repetitive and "samey" (nearly every app a purple gradient). This effort gives each sample its own distinct, self-expressive visual identity while keeping every app accessible, secure, and functionally identical.
Work was produced across several coordinated working branches and integrated into this one branch (
ievangelist/samples-ux-revamp); per-fleet branches were merged in as each sample landed, so reviewers get one place to review everything. (Individual exploratory PRs were closed in favor of this one — #1681, #1683, #1684.)Quality bar (applied to every sample)
<img>, no "tofu" glyphs.#gh-dark-mode-only/#gh-light-mode-onlytheme-aware markup.Co-authored-by: Copilottrailer.Sample status — 17 / 17 integrated ✅
Verified against
main: the file changes for every sample below are present in this branch (real frontend diffs, not just screenshots).JS / TS SPAs + SSR
vite-csharp-postgres— Quiet Office (React 19 + Tailwind v4, OKLCH tokens, shadcn-minimal)vite-react-fastapi— Claymorphism todo app (Open Props / Heroicons, React + FastAPI)node-express-redis— Memphis-pop visit dashboard (CSS Modules / Tabler, React TS)polyglot-task-queue— Cyberpunk task board (Tailwind v4 / Lucide, React TS)aspire-with-python— Swiss/International typographic weather (React TS, plain CSS)aspire-with-node— printed Weather Almanac (Pug SSR, zero-build CSS, SVG dingbats)vite-yarp-static— Retro Arcade counter (Vanilla JS / Vite, served through YARP)python-openai-agent— Ember AI assistant (FastAPI HTML/JS) — credential-gated; conversation in the screenshot is stubbed/illustrativeaspire-with-javascript— weather four ways, each a distinct identity: React neo-brutalism, Vue forecast carousel (Vue-green theming), Angular Material 3 (brand-gradient hero + day cards), Vite retro-synthwavePilot re-themes
image-gallery— Lumina bright media library (React 19 / CSS Modules / Heroicons)rag-document-qa-svelte— Athenaeum scholarly reading room (Svelte 5 / Phosphor) — credential-gated; answer/citation shots illustrativevolume-mount— Vault (Blazor, fully de-templated: top-nav, split-screen auth, themed settings). Also converted to the idiomatic Aspire migration-worker pattern, eliminating the old non-themeable "database operation failed" developer error page.Blazor
aspire-shop— Atelier Aspire editorial boutique (static SSR, view-transitions catalog→cart)health-checks-ui— Aspire Status systems-observability console (Blazor Server)orleans-voting— Grain Poll live game-show (animated result bars, confetti on vote)Metrics— Telemetry Console (Blazor WASM, charts-forward indigo theme)aspire-with-azure-functions— Darkroom Studio photographer's contact sheet (Blazor Server). Dark-only by design; validated against a live Azurite emulator with Playwright (upload validation dialog + blob upload exercised), axe-core AA and AAA clean.Notes
python-openai-agent,rag-document-qa-svelte,aspire-with-azure-functions) were validated best-effort: UI + non-AI/non-cloud paths driven via Playwright, AI/worker responses stubbed for the screenshots and documented as illustrative.aspire-with-azure-functionsWorkerExtensions/ProtectedData.dll issue blocks the full test-project build locally; samples were validated via live runs instead.Co-authored-by: Copilot 223556219+Copilot@users.noreply.github.com