fix: tweak banner colors

[bpierre]

Greptile Overview

Greptile Overview

Greptile Summary

This PR updates the testnet migration banner to use theme-aware CSS classes instead of hardcoded Tailwind colors.

Changes Made:

• Replaced bg-gray-100 with bg-base-alt for the banner background
• Replaced text-black with text-primary for the text color
• Removed border-gray-300 class (which was only setting border color without an actual border width, so it had no visual effect)

Why This Matters:
The old implementation used static colors (gray-100, black) that don't adapt to the user's color scheme preference. The new implementation uses the design system's semantic color tokens (base-alt, primary) which automatically adjust for light and dark modes:

• Light mode: bg-base-alt = #e5e5e5, text-primary = #0a0a0a
• Dark mode: bg-base-alt = #2a2a2a, text-primary = #f5f5f5

This ensures the banner remains readable and visually consistent across both color schemes, following the established design patterns used throughout the explorer application.

Confidence Score: 5/5

• This PR is safe to merge with no risks - it's a simple CSS class update that improves theme consistency.
• The changes are minimal, well-understood, and follow established patterns in the codebase. The new classes (bg-base-alt, text-primary) are already widely used throughout the application (found in 20+ files), proving they are stable and battle-tested. The removed border-gray-300 class had no visual effect since it only set border color without border width. No logic changes, no API modifications, and the change improves user experience by supporting dark mode properly.
• No files require special attention

Important Files Changed

File Analysis

Filename	Score	Overview
apps/explorer/src/routes/_layout.tsx	5/5	Updated banner colors from static gray/black to theme-aware colors (bg-base-alt, text-primary) for better dark mode support. Removed unused border-gray-300 class.

Sequence Diagram

sequenceDiagram
    participant User
    participant Browser
    participant Layout Component
    participant CSS Theme System
    
    User->>Browser: View Explorer Page
    Browser->>Layout Component: Render Layout
    Layout Component->>CSS Theme System: Apply bg-base-alt class
    CSS Theme System-->>Layout Component: Return #e5e5e5 (light) or #2a2a2a (dark)
    Layout Component->>CSS Theme System: Apply text-primary class
    CSS Theme System-->>Layout Component: Return #0a0a0a (light) or #f5f5f5 (dark)
    Layout Component->>Browser: Render banner with theme-aware colors
    Browser-->>User: Display banner (adapts to light/dark mode)

Loading

Important Files Changed

File Analysis

Filename	Score	Overview
apps/explorer/src/routes/_layout.tsx	5/5	Updated banner colors from static gray/black to theme-aware colors (bg-base-alt, text-primary) for better dark mode support. Removed unused border-gray-300 class.

Sequence Diagram

sequenceDiagram
    participant User
    participant Browser
    participant Layout Component
    participant CSS Theme System
    
    User->>Browser: View Explorer Page
    Browser->>Layout Component: Render Layout
    Layout Component->>CSS Theme System: Apply bg-base-alt class
    CSS Theme System-->>Layout Component: Return #e5e5e5 (light) or #2a2a2a (dark)
    Layout Component->>CSS Theme System: Apply text-primary class
    CSS Theme System-->>Layout Component: Return #0a0a0a (light) or #f5f5f5 (dark)
    Layout Component->>Browser: Render banner with theme-aware colors
    Browser-->>User: Display banner (adapts to light/dark mode)

Loading

[github-actions]

🚀 Deploying bpierre/fix-banner-colors with ⚡ Cloudflare Pages

Latest commit:	88051cee169540e6798b2b9972e56d5a7df7b202
Status:	✅ Deploy successful
Preview URL:	https://f0695f5e-explorer-devnet.porto.workers.dev
Branch Preview URL:

[greptile-apps]

_{No files reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}