Repository navigation
Refactor UI - #86
Merged
Merged
Refactor UI#86
Conversation
Update webpack devServer port and documentation references.
- Replace subscription button with sun/moon theme toggle in navbar - Move About link to footer left side with separators - Update footer styling and class names
Import CSS directly from @rainbow-me/rainbowkit/styles.css and remove the duplicated local rainbowkit.css file.
…rides - Add centralized theme.tsx with CSS custom properties for dark/light themes - Remove all .light-theme class selectors from CSS files (22 total) - Convert hardcoded colors to theme variables across all CSS files - Add alpha variants for primary color (alpha-2 through alpha-50) - Add semantic alpha variants for error, warning, and info colors - Add overlay utility variables that swap between themes - Theme now uses data-theme attribute exclusively for switching
|
🚀 Preview: https://pr-86--openscan.netlify.app |
- Add --color-accent (purple #8b5cf6) with hover, muted, and alpha variants - Replace ~90 hardcoded #10b981 with var(--color-primary) - Replace #059669, #34d399, #3b82f6, #ef4444, #f59e0b, #8b5cf6 with theme vars - Convert all rgba() color values to corresponding alpha variables - Remove 15 duplicate class definitions in devtools.css - Fix light theme overrides in devtools.css to use theme variables - Add missing alpha variants: info-25/40/50, warning-25/40, error-30/40
Previously the toggle cycled through auto -> light -> dark -> auto, requiring two clicks to switch from dark to light mode. Now it simply toggles between light and dark based on the current visual state.
- Replace #6b7280 with var(--text-secondary) - Replace #9ca3af with var(--text-tertiary) - Replace #1f2937/#111827/#374151 with var(--text-primary) - Replace #e5e7eb borders with var(--border-primary) - Replace #f3f4f6 backgrounds with var(--bg-tertiary) - Replace #60a5fa with var(--color-info-hover) - Replace #7c3aed with var(--color-accent-muted) - Replace #000 button text with var(--text-inverse) - Replace rgba(255,255,255,*) overlays with var(--overlay-light-*)
- Wrap Settings page content in container-wide + page-card - Wrap DevTools page content in container-wide + page-card - Remove redundant max-width from devtools-content-wrapper
- Add box-shadow to match page-card styling - Remove redundant max-width, margin, and transition properties - Add comment noting relationship to page-card
- Create base.css with unified card, info-box, form, button, badge, and title classes - Consolidate page-card and block-display-card to share base styles - Merge info-box variants (default, vertical, arbitrum, optimism) with shared base - Unify form-input and form-select with shared styling - Consolidate button classes (button-primary, collapsible-button, inline variants) - Create section title hierarchy for tx, abi, profile, functions titles - Add comprehensive spacing utilities (mt, mb, ml, mr, gap) - Add flex utility classes (flex-column, flex-row, items-center, etc.) - Consolidate devtools-card and dev-section-container - Condense devtools flex/gap utilities into single-line definitions - Document relationships between CSS files for maintainability
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.
Theme System Refactoring
var(--color-*)) withdata-themeattribute instead of.light-themeclass selectorstheme.tsxwith CSS custom properties for dark/light themesCSS Consolidation & Base Utilities
base.csswith unified utility classes:page-card,block-display-card,devtools-card,dev-section-containerform-inputandform-selectwith shared stylingbutton-primary,collapsible-button, inline variantsmt-*,mb-*,ml-*,mr-*,gap-*)flex-column,flex-row,items-center,justify-between, etc.)UI Improvements
page-cardcontainerCleanup
.light-themeoverrides (replaced by theme variables)