Skip to content

Commit 8a5f53e

Browse files
Copilot0xrinegade
Copilot
and
0xrinegade
committed
Fix header controls - consistent alignment, same height, proper z-index for dropdowns, and ASCII styling
Co-authored-by: 0xrinegade <[email protected]>
1 parent 8d0b9fd commit 8a5f53e

File tree

6 files changed

+543
-289
lines changed

6 files changed

+543
-289
lines changed

‎src/components/LanguageSelector.js‎

Lines changed: 19 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -162,10 +162,10 @@ const LanguageSelector = ({
162162
};
163163

164164
return (
165-
<div className="language-selector relative inline-flex" ref={dropdownRef}>
165+
<div className="language-selector" ref={dropdownRef}>
166166
<button
167167
ref={triggerRef}
168-
className="inline-flex items-center justify-center gap-2 px-3 py-2 bg-white border border-gray-200 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-gray-500 transition-all duration-200 ease-in-out min-w-[90px]"
168+
className="language-selector-button"
169169
onClick={handleTriggerClick}
170170
onKeyDown={handleKeyDown}
171171
aria-label={`Current language: ${currentLanguage.name}. Click to change language`}
@@ -174,11 +174,11 @@ const LanguageSelector = ({
174174
aria-controls="language-dropdown"
175175
role="combobox"
176176
>
177-
<span className="text-sm font-medium">
177+
<span className="language-selector-text">
178178
{currentLanguage.country} {currentLanguage.code.toUpperCase()}
179179
</span>
180180
<DropdownIcon
181-
className={`h-5 w-5 ml-1.5 transition-transform duration-200 ${isOpen ? 'transform rotate-180' : ''}`}
181+
className={`language-dropdown-icon ${isOpen ? 'open' : ''}`}
182182
/>
183183
</button>
184184

@@ -187,21 +187,16 @@ const LanguageSelector = ({
187187
<div className="dropdown-backdrop" onClick={() => setIsOpen(false)} />
188188
<div
189189
id="language-dropdown"
190-
className="language-dropdown"
190+
className="language-selector-dropdown"
191191
style={{
192192
position: 'fixed',
193193
top: `${dropdownPosition.top}px`,
194194
left: `${dropdownPosition.left}px`,
195-
zIndex: 99999,
196-
minWidth: '200px',
197-
backgroundColor: 'var(--color-background)',
198-
border: '1px solid var(--color-border)',
199-
borderRadius: 'var(--radius-md)',
200-
boxShadow: 'var(--shadow-lg)'
195+
zIndex: 99999
201196
}}
202197
>
203198
<div
204-
className="py-1 max-h-60 overflow-auto"
199+
className="language-dropdown-list"
205200
role="listbox"
206201
aria-label="Language options"
207202
>
@@ -210,38 +205,28 @@ const LanguageSelector = ({
210205
<button
211206
key={language.code}
212207
ref={el => optionRefs.current[index] = el}
213-
className={`language-option w-full flex items-center px-4 py-3 text-sm text-left hover:bg-gray-100 focus:bg-gray-100 focus:outline-none transition-colors duration-150 ${
214-
language.code === currentLocale
215-
? 'bg-gray-800 text-white'
216-
: 'text-gray-700'
208+
className={`language-option ${
209+
language.code === currentLocale ? 'active' : ''
217210
} ${
218-
focusedIndex === index ? 'bg-gray-100' : '' // Keep focus style separate
211+
focusedIndex === index ? 'focused' : ''
219212
}`}
220213
onClick={() => handleLanguageSelect(language.code)}
221214
onKeyDown={handleKeyDown}
222215
role="option"
223216
aria-selected={language.code === currentLocale}
224217
tabIndex={-1}
225218
>
226-
<span className="font-medium">
227-
{language.country}{language.code.toUpperCase()}
219+
<span className="language-option-flag">
220+
{language.country}
221+
</span>
222+
<span className="language-option-code">
223+
{language.code.toUpperCase()}
224+
</span>
225+
<span className="language-option-name">
226+
{language.name}
228227
</span>
229-
<span className="ml-3">{language.name}</span>
230228
{language.code === currentLocale && (
231-
<svg
232-
className="w-4 h-4 ml-auto text-white"
233-
fill="none"
234-
viewBox="0 0 24 24"
235-
stroke="currentColor"
236-
aria-hidden="true"
237-
>
238-
<path
239-
strokeLinecap="round"
240-
strokeLinejoin="round"
241-
strokeWidth={2}
242-
d="M5 13l4 4L19 7"
243-
/>
244-
</svg>
229+
<span className="language-option-check">✓</span>
245230
)}
246231
</button>
247232
))}

‎src/components/Layout.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -160,6 +160,15 @@ export default function Layout({ children, title = 'OpenSVM P2P Exchange' }) {
160160

161161
{/* Language selector */}
162162
<LanguageSelector
163+
languages={[
164+
{ code: 'en', name: 'English', country: '🇺🇸' },
165+
{ code: 'es', name: 'Español', country: '🇪🇸' },
166+
{ code: 'fr', name: 'Français', country: '🇫🇷' },
167+
{ code: 'de', name: 'Deutsch', country: '🇩🇪' },
168+
{ code: 'ja', name: '日本語', country: '🇯🇵' },
169+
{ code: 'ko', name: '한국어', country: '🇰🇷' },
170+
{ code: 'zh', name: '中文', country: '🇨🇳' }
171+
]}
163172
currentLocale={currentLocale}
164173
onLanguageChange={handleLanguageChange}
165174
/>

‎src/components/NetworkSelector.js‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -171,14 +171,12 @@ export const NetworkSelector = ({ networks, selectedNetwork, onSelectNetwork })
171171
aria-label={`Current network: ${network.name}. Press Enter or Space to open network options`}
172172
>
173173
<div
174-
className="w-3 h-3 rounded-full mr-1.5"
174+
className="network-indicator"
175175
style={{ backgroundColor: network.color }}
176176
/>
177-
<span>{network.name}</span>
177+
<span className="network-selector-text">{network.name}</span>
178178
<DropdownIcon
179-
className={`h-4 w-4 ml-1.5 transition-transform duration-200 ${
180-
isOpen ? 'transform rotate-180' : ''
181-
}`}
179+
className={`network-dropdown-icon ${isOpen ? 'open' : ''}`}
182180
/>
183181
</button>
184182

@@ -209,7 +207,7 @@ export const NetworkSelector = ({ networks, selectedNetwork, onSelectNetwork })
209207
tabIndex={-1}
210208
>
211209
<div
212-
className="w-3 h-3 rounded-full mr-1.5"
210+
className="network-indicator"
213211
style={{ backgroundColor: network.color }}
214212
/>
215213
<span className="network-option-name">{network.name}</span>

‎src/components/PhantomWalletButton.js‎

Lines changed: 36 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -47,25 +47,24 @@ export const PhantomWalletButton = ({ className = '' }) => {
4747
// If connected, show disconnect button
4848
if (connected && walletAddress) {
4949
return (
50-
<div className={`relative ${className}`}>
50+
<div className={`ascii-wallet-button-container ${className}`}>
5151
<button
5252
onClick={handleDisconnect}
53-
className="flex items-center gap-2 px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors"
53+
className="ascii-wallet-button connected"
5454
title={`Connected to ${walletAddress}`}
5555
>
56-
<div className="w-6 h-6 flex items-center justify-center">
56+
<div className="ascii-wallet-icon">
5757
<Image
5858
src="/images/phantom-logo.svg"
5959
alt="Phantom"
60-
width={16}
61-
height={16}
60+
width={12}
61+
height={12}
6262
/>
6363
</div>
64-
<div className="w-2 h-2 bg-green-300 rounded-full"></div>
65-
<span className="hidden sm:inline">
66-
{`${walletAddress.slice(0, 4)}...${walletAddress.slice(-4)}`}
64+
<span className="ascii-wallet-status-indicator">●</span>
65+
<span className="ascii-wallet-text">
66+
CONNECT PHANTOM
6767
</span>
68-
<span className="sm:hidden">Connected</span>
6968
</button>
7069
</div>
7170
);
@@ -76,10 +75,10 @@ export const PhantomWalletButton = ({ className = '' }) => {
7675
return (
7776
<button
7877
disabled
79-
className={`flex items-center gap-2 px-4 py-2 bg-blue-500 text-white rounded-lg opacity-50 cursor-not-allowed ${className}`}
78+
className={`ascii-wallet-button connecting ${className}`}
8079
>
81-
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
82-
<span>Connecting...</span>
80+
<span className="ascii-wallet-spinner">⟳</span>
81+
<span className="ascii-wallet-text">CONNECTING...</span>
8382
</button>
8483
);
8584
}
@@ -89,72 +88,70 @@ export const PhantomWalletButton = ({ className = '' }) => {
8988
<>
9089
<button
9190
onClick={handleConnect}
92-
className={`flex items-center gap-2 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors ${className}`}
91+
className={`ascii-wallet-button ${className}`}
9392
>
94-
<div className="w-6 h-6 flex items-center justify-center">
93+
<div className="ascii-wallet-icon">
9594
<Image
9695
src="/images/phantom-logo.svg"
9796
alt="Phantom"
98-
width={16}
99-
height={16}
97+
width={12}
98+
height={12}
10099
/>
101100
</div>
102-
<span>Connect Phantom</span>
101+
<span className="ascii-wallet-text">CONNECT PHANTOM</span>
103102
</button>
104103

105104
{/* Install Phantom Modal */}
106105
{showInstallModal && (
107-
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
108-
<div className="bg-white rounded-lg p-6 w-full max-w-md relative">
106+
<div className="ascii-modal-backdrop">
107+
<div className="ascii-modal">
109108
{/* Close button */}
110109
<button
111110
onClick={() => setShowInstallModal(false)}
112-
className="absolute top-4 right-4 text-gray-400 hover:text-gray-600"
111+
className="ascii-modal-close"
113112
aria-label="Close"
114113
>
115-
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
116-
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
117-
</svg>
114+
✕
118115
</button>
119116

120117
{/* Modal content */}
121-
<div className="pt-4">
122-
<div className="flex items-center justify-center mb-4">
118+
<div className="ascii-modal-content">
119+
<div className="ascii-modal-icon">
123120
<Image
124121
src="/images/phantom-logo.svg"
125122
alt="Phantom"
126-
width={64}
127-
height={64}
123+
width={32}
124+
height={32}
128125
/>
129126
</div>
130127

131-
<h2 className="text-xl font-bold text-center mb-4">Install Phantom Wallet</h2>
128+
<h2 className="ascii-modal-title">INSTALL PHANTOM WALLET</h2>
132129

133-
<p className="text-gray-600 text-center mb-6">
134-
Phantom wallet is required to use this application. It's a secure and easy-to-use Solana wallet.
130+
<p className="ascii-modal-text">
131+
PHANTOM WALLET IS REQUIRED TO USE THIS APPLICATION. IT'S A SECURE AND EASY-TO-USE SOLANA WALLET.
135132
</p>
136133

137-
<div className="space-y-3">
134+
<div className="ascii-modal-actions">
138135
<a
139136
href="https://phantom.app/"
140137
target="_blank"
141138
rel="noopener noreferrer"
142-
className="block w-full px-4 py-3 bg-purple-600 text-white text-center rounded-lg hover:bg-purple-700 transition-colors font-medium"
139+
className="ascii-button primary"
143140
>
144-
Download Phantom Wallet
141+
DOWNLOAD PHANTOM WALLET
145142
</a>
146143

147144
<button
148145
onClick={() => setShowInstallModal(false)}
149-
className="block w-full px-4 py-3 bg-gray-200 text-gray-800 text-center rounded-lg hover:bg-gray-300 transition-colors"
146+
className="ascii-button secondary"
150147
>
151-
Cancel
148+
CANCEL
152149
</button>
153150
</div>
154151

155-
<div className="mt-4 p-3 bg-blue-50 rounded-lg">
156-
<p className="text-sm text-blue-800">
157-
<strong>Note:</strong> After installing Phantom, refresh this page and try connecting again.
152+
<div className="ascii-modal-note">
153+
<p className="ascii-modal-note-text">
154+
NOTE: AFTER INSTALLING PHANTOM, REFRESH THIS PAGE AND TRY CONNECTING AGAIN.
158155
</p>
159156
</div>
160157
</div>
@@ -164,7 +161,7 @@ export const PhantomWalletButton = ({ className = '' }) => {
164161

165162
{/* Error display */}
166163
{error && (
167-
<div className="absolute top-full left-0 mt-2 p-2 bg-red-100 border border-red-400 text-red-700 rounded text-sm max-w-xs">
164+
<div className="ascii-error-tooltip">
168165
{error}
169166
</div>
170167
)}

0 commit comments

Comments
 (0)