Improve light mode visual hierarchy and UI consistency across the Explorer#701
Open
Adii-45 wants to merge 3 commits into
Open
Improve light mode visual hierarchy and UI consistency across the Explorer#701Adii-45 wants to merge 3 commits into
Adii-45 wants to merge 3 commits into
Conversation
✅ Deploy Preview for otel-ecosystem-explorer canceled.
|
Contributor
There was a problem hiding this comment.
Pull request overview
Note
Copilot was unable to run its full agentic suite in this review.
This PR updates the app’s visual system to support more theme-aware surfaces (cards/shadows), consistent brand gradients, and always-dark code/terminal panes, then applies those tokens across Java Agent, Collector, Home, and shared UI components.
Changes:
- Added new design tokens for surfaces/shadows, hero gradient/grid opacity, and code pane colors.
- Introduced a reusable
text-gradient-brandutility and replaced repeated gradient class strings. - Refreshed multiple cards/rows/sections to use the new surface + code tokens and updated light/dark text treatments.
Reviewed changes
Copilot reviewed 25 out of 25 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| ecosystem-explorer/src/styles/tokens.css | Adds theme-aware surface/shadow/hero tokens and updates semantic color roles. |
| ecosystem-explorer/src/styles/index.css | Exposes new CSS variables and introduces text-gradient-brand utility. |
| ecosystem-explorer/src/features/java-agent/styles/filter-styles.ts | Adjusts active/inactive filter text colors for light/dark readability. |
| ecosystem-explorer/src/features/java-agent/java-instrumentation-list-page.tsx | Uses text-gradient-brand for the page title accent. |
| ecosystem-explorer/src/features/java-agent/java-configuration-list-page.tsx | Uses text-gradient-brand for the page title accent. |
| ecosystem-explorer/src/features/java-agent/java-agent-page.tsx | Uses text-gradient-brand for the page title accent. |
| ecosystem-explorer/src/features/java-agent/instrumentation-detail-page.tsx | Makes hero radial gradient use theme-swappable accent tokens. |
| ecosystem-explorer/src/features/java-agent/configuration/configuration-builder-page.tsx | Uses text-gradient-brand for the page title accent. |
| ecosystem-explorer/src/features/java-agent/configuration/components/section-card-shell.tsx | Moves section cards to bg-surface-card + shadow-surface. |
| ecosystem-explorer/src/features/java-agent/configuration/components/preview-card.tsx | Switches preview/code blocks to bg-code-bg/text-code-fg and surface tokens. |
| ecosystem-explorer/src/features/java-agent/configuration/components/instrumentation-row.tsx | Refactors row layout into header/body regions and applies surface tokens. |
| ecosystem-explorer/src/features/java-agent/configuration/components/instrumentation-config-field.tsx | Refactors field layout into header/body regions and applies surface tokens. |
| ecosystem-explorer/src/features/java-agent/configuration/components/configuration-toc-sidebar.tsx | Updates active/inactive link styling and search input to surface tokens. |
| ecosystem-explorer/src/features/java-agent/components/telemetry-section.tsx | Updates expandable cards to surface tokens and adds header/body styling. |
| ecosystem-explorer/src/features/java-agent/components/multi-instrumentation-group-card.tsx | Refactors card content regions and updates hover shadow token usage. |
| ecosystem-explorer/src/features/java-agent/components/instrumentation-filter-bar.tsx | Uses surface tokens and hero accent tokens for background gradient. |
| ecosystem-explorer/src/features/java-agent/components/instrumentation-card.tsx | Refactors card regions, adds hover affordance icon, and updates shadow token usage. |
| ecosystem-explorer/src/features/java-agent/components/attribute-table.tsx | Updates table header/striping backgrounds to muted tokens. |
| ecosystem-explorer/src/features/home/components/hero-section.tsx | Makes hero gradient/grid opacity configurable via CSS vars. |
| ecosystem-explorer/src/features/collector/collector-page.tsx | Uses text-gradient-brand for the page title accent. |
| ecosystem-explorer/src/features/collector/collector-components-page.tsx | Uses surface tokens for header card and text-gradient-brand for heading accent. |
| ecosystem-explorer/src/components/ui/navigation-card.tsx | Uses surface tokens and hover shadow token. |
| ecosystem-explorer/src/components/ui/detail-card.tsx | Uses surface tokens and hover shadow token. |
| ecosystem-explorer/src/components/layout/header.tsx | Aligns border token usage with new border color. |
| ecosystem-explorer/src/components/layout/footer.tsx | Aligns border token usage with new border color. |
Comment on lines
+62
to
64
| @utility text-gradient-brand { | ||
| @apply from-otel-orange to-otel-blue bg-gradient-to-r bg-clip-text text-transparent; | ||
| } |
Comment on lines
+75
to
+78
| <div | ||
| className={`flex flex-col gap-3 border-b border-border/40 px-4 py-3 cursor-pointer sm:flex-row sm:items-center sm:justify-between ${headerBgClass}`} | ||
| onClick={onToggleExpand} | ||
| > |
| {displayName} | ||
| </h3> | ||
| <div className="bg-primary/5 -translate-x-2 flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full opacity-0 transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100"> | ||
| <ArrowRight className="text-primary h-4 w-4" /> |
Comment on lines
+89
to
+91
| <span className="text-muted-foreground/70 text-[10px] font-bold tracking-wider uppercase"> | ||
| Signals | ||
| </span> |
Comment on lines
+99
to
+101
| <span className="text-muted-foreground/70 text-[10px] font-bold tracking-wider uppercase"> | ||
| Tags | ||
| </span> |
Comment on lines
+97
to
+99
| <span className="text-muted-foreground/70 text-[10px] font-bold tracking-wider uppercase"> | ||
| Signals | ||
| </span> |
Co-authored-by: otelbot <197425009+otelbot@users.noreply.github.com>
Adii-45
force-pushed
the
improve-light-mode-655
branch
from
017fe0b to
c65ca27
Compare
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.
What changed
Fixes #655
This PR overhauls the light mode experience across the OpenTelemetry Ecosystem Explorer by improving visual hierarchy, surface separation, contrast, and styling consistency while preserving existing functionality and dark mode behavior.
Styling system updates
bg-surface-cardshadow-surfaceshadow-surface-hovertext-gradient-brandutility and standardized branded page headings across the application.Java Agent experience improvements
Configuration Builder improvements
Collector and shared UI updates
Why
The previous light mode relied heavily on flat surfaces, translucent backgrounds, and strong orange accents, which reduced visual hierarchy and made dense content areas harder to scan.
This update introduces a more structured and modern light-mode design system that:
How it was tested
Is this a breaking change?
No.
This PR only modifies visual presentation, styling tokens, layout structure, and theme behavior. No application logic, APIs, routing, or data handling were changed.
Special notes for your reviewer
Screenshots
Checklist