Skip to content

Commit 6c5c425

Browse files
Copilot0xrinegade
Copilot
and
0xrinegade
committed
Phase 1 Complete: Fix theme system - Replace hardcoded ASCII classes with theme-aware CSS variables
Co-authored-by: 0xrinegade <[email protected]>
1 parent 747280e commit 6c5c425

File tree

5 files changed

+710
-210
lines changed

5 files changed

+710
-210
lines changed

‎src/components/Layout.js‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -128,31 +128,31 @@ export default function Layout({ children, title = 'OpenSVM P2P Exchange' }) {
128128
</a>
129129

130130
<div className="app-layout">
131-
{/* ASCII Header with proper responsive design */}
132-
<header className="ascii-header">
133-
<div className="ascii-header-content">
131+
{/* Theme-Aware Header with proper responsive design */}
132+
<header className="app-header">
133+
<div className="app-header-content">
134134
{/* Logo Section */}
135-
<div className="ascii-logo-section">
135+
<div className="app-logo-section">
136136
<Image
137137
src="/images/opensvm-logo.svg"
138138
alt="OpenSVM P2P Exchange"
139-
className="ascii-logo-image"
139+
className="app-logo-image"
140140
width={20}
141141
height={20}
142142
priority
143143
/>
144-
<h1 className="ascii-logo-text">OPENSVM P2P</h1>
144+
<h1 className="app-logo-text">OPENSVM P2P</h1>
145145
</div>
146146

147-
{/* Desktop Navigation - ASCII Styled with Full Width */}
148-
<nav className="ascii-nav-desktop">
149-
<div className="ascii-nav-tabs">
147+
{/* Desktop Navigation - Theme-Aware with Full Width */}
148+
<nav className="app-nav-desktop">
149+
<div className="app-nav-tabs">
150150
{/* Primary navigation items */}
151151
{topNavItems.map((item) => (
152152
<Link
153153
key={item.key}
154154
href={item.href}
155-
className={`ascii-nav-tab ${router.pathname === item.href ? 'active' : ''}`}
155+
className={`app-nav-tab ${router.pathname === item.href ? 'active' : ''}`}
156156
>
157157
{item.label}
158158
</Link>
@@ -164,7 +164,7 @@ export default function Layout({ children, title = 'OpenSVM P2P Exchange' }) {
164164
</nav>
165165

166166
{/* Header Controls - Simplified */}
167-
<div className="ascii-header-controls">
167+
<div className="app-header-controls">
168168
{/* Language selector */}
169169
<LanguageSelector
170170
languages={languages}
@@ -181,28 +181,28 @@ export default function Layout({ children, title = 'OpenSVM P2P Exchange' }) {
181181

182182
{/* Connected wallet info */}
183183
{connected && publicKey && (
184-
<span className="ascii-wallet-status">
184+
<span className="app-wallet-status">
185185
{publicKey.toString().slice(0, 6)}...{publicKey.toString().slice(-4)}
186186
</span>
187187
)}
188188

189189
{/* Phantom wallet connection button */}
190-
<div className="ascii-wallet-container">
190+
<div className="app-wallet-container">
191191
<PhantomWalletButton />
192192
</div>
193193
</div>
194194
</div>
195195
</header>
196196

197-
{/* Mobile Navigation - ASCII Grid Layout */}
198-
<nav className="ascii-nav-mobile">
199-
<div className="ascii-nav-grid">
197+
{/* Mobile Navigation - Theme-Aware Grid Layout */}
198+
<nav className="app-nav-mobile">
199+
<div className="app-nav-grid">
200200
{/* All navigation items in mobile grid */}
201201
{mobileNavItems.map((item) => (
202202
<Link
203203
key={item.key}
204204
href={item.href}
205-
className={`ascii-nav-button ${router.pathname === item.href ? 'active' : ''}`}
205+
className={`app-nav-button ${router.pathname === item.href ? 'active' : ''}`}
206206
>
207207
{item.label}
208208
</Link>

‎src/components/OfferCreation.js‎

Lines changed: 46 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -572,20 +572,19 @@ const OfferCreation = ({ onStartGuidedWorkflow }) => {
572572
}
573573
574574
.guided-workflow-button {
575-
background-color: var(--ascii-neutral-700);
576-
color: var(--ascii-white);
577-
border: 1px solid var(--ascii-neutral-800);
575+
background-color: var(--button-bg);
576+
color: var(--button-text);
577+
border: 1px solid var(--border-color);
578578
padding: 8px 16px;
579-
border-radius: 0;
579+
border-radius: var(--border-radius, 0px);
580580
cursor: pointer;
581-
font-size: 0.9rem;
581+
font-size: var(--font-size-sm, 12px);
582582
display: flex;
583583
align-items: center;
584584
gap: 8px;
585-
font-family: 'Courier New', Courier, monospace;
586-
text-transform: uppercase;
587-
transition: all var(--transition-normal);
588-
box-shadow: var(--shadow-sm);
585+
font-family: var(--font-family);
586+
transition: all 0.2s ease;
587+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
589588
}
590589
591590
.guided-workflow-button::before {
@@ -595,60 +594,60 @@ const OfferCreation = ({ onStartGuidedWorkflow }) => {
595594
justify-content: center;
596595
width: 18px;
597596
height: 18px;
598-
background-color: var(--ascii-neutral-500);
599-
border: 1px solid var(--ascii-neutral-600);
600-
border-radius: 0;
601-
font-size: 0.8rem;
602-
font-weight: bold;
597+
background-color: var(--secondary-bg);
598+
border: 1px solid var(--border-color);
599+
border-radius: var(--border-radius, 0px);
600+
font-size: var(--font-size-xs, 10px);
601+
font-weight: var(--font-weight-bold, 700);
603602
}
604603
605604
.guided-workflow-button:hover {
606-
background-color: var(--ascii-neutral-600);
605+
background-color: var(--button-hover);
607606
transform: translateY(-1px);
608-
box-shadow: var(--shadow-md);
607+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
609608
}
610609
611610
.input-error {
612-
border-color: #ef4444 !important;
613-
box-shadow: 0 0 0 1px #ef4444;
611+
border-color: var(--error-color) !important;
612+
box-shadow: 0 0 0 1px var(--error-color);
614613
}
615614
616615
.validation-error {
617-
color: #ef4444;
618-
font-size: 0.875rem;
616+
color: var(--error-color);
617+
font-size: var(--font-size-sm, 12px);
619618
margin-top: 0.25rem;
620619
}
621620
622621
.validation-warning {
623-
color: #f59e0b;
624-
font-size: 0.875rem;
622+
color: var(--warning-color);
623+
font-size: var(--font-size-sm, 12px);
625624
margin-top: 0.25rem;
626625
}
627626
628627
.price-info {
629-
background: var(--color-background-alt);
630-
border: 1px solid var(--color-border);
631-
border-radius: 4px;
628+
background: var(--secondary-bg);
629+
border: 1px solid var(--border-color);
630+
border-radius: var(--border-radius, 0px);
632631
padding: 12px;
633632
margin: 1rem 0;
634-
font-size: 0.9rem;
635-
color: var(--color-foreground-muted);
633+
font-size: var(--font-size-sm, 12px);
634+
color: var(--text-muted);
636635
}
637636
638637
.price-updated {
639638
margin-left: 10px;
640-
font-size: 0.8rem;
639+
font-size: var(--font-size-xs, 10px);
641640
opacity: 0.7;
642641
}
643642
644643
.warning-message {
645-
background: #fef3c7;
646-
border: 1px solid #f59e0b;
647-
color: #92400e;
644+
background: var(--secondary-bg);
645+
border: 1px solid var(--warning-color);
646+
color: var(--warning-color);
648647
padding: 12px;
649-
border-radius: 4px;
648+
border-radius: var(--border-radius, 0px);
650649
margin: 1rem 0;
651-
font-size: 0.9rem;
650+
font-size: var(--font-size-sm, 12px);
652651
}
653652
654653
.wallet-connection-prompt {
@@ -663,38 +662,38 @@ const OfferCreation = ({ onStartGuidedWorkflow }) => {
663662
}
664663
665664
.connection-issue {
666-
background-color: var(--ascii-neutral-600) !important;
667-
color: var(--ascii-red-400) !important;
665+
background-color: var(--secondary-bg) !important;
666+
color: var(--error-color) !important;
668667
cursor: not-allowed !important;
669668
}
670669
671670
.connection-issue-details {
672-
background: var(--color-background-alt);
673-
border: 1px solid var(--ascii-yellow-500);
674-
border-radius: 4px;
671+
background: var(--secondary-bg);
672+
border: 1px solid var(--warning-color);
673+
border-radius: var(--border-radius, 0px);
675674
padding: 16px;
676675
max-width: 400px;
677676
text-align: left;
678-
font-size: 0.9rem;
677+
font-size: var(--font-size-sm, 12px);
679678
}
680679
681680
.connection-status-message {
682681
margin: 0 0 12px 0;
683-
color: var(--ascii-blue-600);
684-
font-weight: 500;
685-
font-size: 0.95rem;
682+
color: var(--accent-color);
683+
font-weight: var(--font-weight-medium, 500);
684+
font-size: var(--font-size-sm, 12px);
686685
}
687686
688687
.connection-issue-details p {
689688
margin: 0 0 12px 0;
690-
color: var(--ascii-yellow-600);
691-
font-weight: 500;
689+
color: var(--warning-color);
690+
font-weight: var(--font-weight-medium, 500);
692691
}
693692
694693
.connection-issue-details ul {
695694
margin: 0 0 16px 0;
696695
padding-left: 20px;
697-
color: var(--color-foreground-muted);
696+
color: var(--text-muted);
698697
}
699698
700699
.connection-issue-details li {
@@ -703,11 +702,11 @@ const OfferCreation = ({ onStartGuidedWorkflow }) => {
703702
704703
.retry-connection-button {
705704
width: 100%;
706-
background-color: var(--ascii-blue-600) !important;
705+
background-color: var(--accent-color) !important;
707706
}
708707
709708
.retry-connection-button:hover {
710-
background-color: var(--ascii-blue-500) !important;
709+
background-color: var(--button-hover) !important;
711710
}
712711
`}</style>
713712
</div>

0 commit comments

Comments
 (0)