Skip to content

Commit 84120af

Browse files
AmirMohammad CheraghaliAmirMohammad Cheraghali
AmirMohammad Cheraghali
authored and
AmirMohammad Cheraghali
committed
fix: adapt Dashboard tabs for Light Mode by using CSS variables
1 parent 1a8a22e commit 84120af

4 files changed

Lines changed: 335 additions & 288 deletions

File tree

‎src/components/dashboard/AccountSettings.tsx‎

Lines changed: 38 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -49,30 +49,30 @@ function ConfirmModal({ title, description, confirmLabel, confirmClass, requireP
4949

5050
return (
5151
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/70 backdrop-blur-sm">
52-
<div className="w-full max-w-md bg-neutral-900 border border-neutral-700 rounded-2xl shadow-2xl overflow-hidden">
53-
<div className="flex items-center justify-between px-6 py-4 border-b border-neutral-800">
52+
<div className="w-full max-w-md bg-[var(--bg-header)] border border-[var(--border-main)] rounded-2xl shadow-2xl overflow-hidden">
53+
<div className="flex items-center justify-between px-6 py-4 border-b border-[var(--border-main)]">
5454
<div className="flex items-center gap-2 text-red-400">
5555
<AlertTriangle className="w-4 h-4" />
5656
<span className="font-semibold text-sm">{title}</span>
5757
</div>
58-
<button onClick={onClose} className="p-1 text-neutral-500 hover:text-white transition-colors">
58+
<button onClick={onClose} className="p-1 text-[var(--text-muted)] hover:text-[var(--text-primary)] transition-colors">
5959
<X className="w-4 h-4" />
6060
</button>
6161
</div>
6262
<div className="p-6 space-y-4">
63-
<p className="text-sm text-neutral-300 leading-relaxed">{description}</p>
63+
<p className="text-sm text-[var(--text-secondary)] leading-relaxed">{description}</p>
6464

6565
{requirePhrase && (
6666
<div>
67-
<label className="block text-xs text-neutral-500 mb-1.5">
67+
<label className="block text-xs text-[var(--text-muted)] mb-1.5">
6868
Type <span className="font-mono text-red-400 bg-red-500/10 px-1 rounded">{requirePhrase}</span> to confirm
6969
</label>
7070
<input
7171
value={phrase}
7272
onChange={e => setPhrase(e.target.value)}
7373
onKeyDown={e => e.key === 'Enter' && canConfirm && handle()}
7474
autoFocus
75-
className="w-full px-3 py-2.5 bg-neutral-950 border border-neutral-700 rounded-lg text-sm text-white font-mono placeholder-neutral-700 focus:outline-none focus:ring-1 focus:ring-red-500 focus:border-red-500"
75+
className="w-full px-3 py-2.5 bg-[var(--bg-header)] border border-[var(--border-main)] rounded-lg text-sm text-[var(--text-primary)] font-mono placeholder-neutral-700 focus:outline-none focus:ring-1 focus:ring-red-500 focus:border-red-500"
7676
placeholder={requirePhrase}
7777
/>
7878
</div>
@@ -81,13 +81,13 @@ function ConfirmModal({ title, description, confirmLabel, confirmClass, requireP
8181
{err && <p className="text-xs text-red-400 bg-red-500/10 border border-red-500/20 rounded-lg px-3 py-2">{err}</p>}
8282

8383
<div className="flex gap-3 pt-1">
84-
<button onClick={onClose} className="flex-1 py-2.5 text-sm font-medium text-neutral-400 border border-neutral-700 rounded-lg hover:bg-neutral-800 hover:text-white transition-all">
84+
<button onClick={onClose} className="flex-1 py-2.5 text-sm font-medium text-[var(--text-secondary)] border border-[var(--border-main)] rounded-lg hover:bg-[var(--input-bg)] hover:text-[var(--text-primary)] transition-all">
8585
Cancel
8686
</button>
8787
<button
8888
onClick={handle}
8989
disabled={!canConfirm || running}
90-
className={`flex-1 flex items-center justify-center gap-2 py-2.5 text-sm font-medium rounded-lg transition-all disabled:opacity-40 disabled:cursor-not-allowed text-white ${confirmClass ?? 'bg-red-600 hover:bg-red-500'}`}
90+
className={`flex-1 flex items-center justify-center gap-2 py-2.5 text-sm font-medium rounded-lg transition-all disabled:opacity-40 disabled:cursor-not-allowed text-[var(--text-primary)] ${confirmClass ?? 'bg-red-600 hover:bg-red-500'}`}
9191
>
9292
{running ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : null}
9393
{confirmLabel}
@@ -161,12 +161,12 @@ function AvatarUpload({ userId, currentUrl, onUpdated }: { userId: string; curre
161161
onDragOver={e => e.preventDefault()}
162162
>
163163
<img
164-
className="h-20 w-20 rounded-full border-2 border-neutral-700 object-cover transition-opacity group-hover:opacity-70"
164+
className="h-20 w-20 rounded-full border-2 border-[var(--border-main)] object-cover transition-opacity group-hover:opacity-70"
165165
src={displayUrl}
166166
alt="Avatar"
167167
/>
168168
<div className="absolute inset-0 rounded-full flex items-center justify-center bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity">
169-
<Camera className="w-5 h-5 text-white" />
169+
<Camera className="w-5 h-5 text-[var(--text-primary)]" />
170170
</div>
171171
<input
172172
ref={fileRef}
@@ -180,8 +180,8 @@ function AvatarUpload({ userId, currentUrl, onUpdated }: { userId: string; curre
180180
{/* Controls */}
181181
<div className="space-y-2 min-w-0">
182182
<div>
183-
<p className="text-sm font-medium text-neutral-200">Profile Photo</p>
184-
<p className="text-xs text-neutral-500 mt-0.5">Max {MAX_AVATAR_MB} MB · JPG, PNG, or WebP</p>
183+
<p className="text-sm font-medium text-[var(--text-primary)]">Profile Photo</p>
184+
<p className="text-xs text-[var(--text-muted)] mt-0.5">Max {MAX_AVATAR_MB} MB · JPG, PNG, or WebP</p>
185185
</div>
186186

187187
{!file ? (
@@ -196,14 +196,14 @@ function AvatarUpload({ userId, currentUrl, onUpdated }: { userId: string; curre
196196
<button
197197
onClick={handleUpload}
198198
disabled={uploading}
199-
className="flex items-center gap-1.5 text-xs text-white bg-blue-600 hover:bg-blue-500 disabled:opacity-50 px-3 py-1.5 rounded-lg transition-colors"
199+
className="flex items-center gap-1.5 text-xs text-[var(--text-primary)] bg-blue-600 hover:bg-blue-500 disabled:opacity-50 px-3 py-1.5 rounded-lg transition-colors"
200200
>
201201
{uploading ? <Loader2 className="w-3 h-3 animate-spin" /> : <Check className="w-3 h-3" />}
202202
{uploading ? 'Uploading…' : 'Save Photo'}
203203
</button>
204204
<button
205205
onClick={() => { setFile(null); setPreview(null); setErrMsg(''); }}
206-
className="text-xs text-neutral-500 hover:text-white transition-colors px-2 py-1.5"
206+
className="text-xs text-[var(--text-muted)] hover:text-[var(--text-primary)] transition-colors px-2 py-1.5"
207207
>
208208
Discard
209209
</button>
@@ -292,15 +292,15 @@ export const AccountSettings = () => {
292292
return (
293293
<div className="max-w-3xl mx-auto space-y-6">
294294
<div>
295-
<h1 className="text-xl font-semibold text-white tracking-tight">Account Settings</h1>
296-
<p className="text-sm text-neutral-500 mt-0.5">Manage your profile, security, and account preferences.</p>
295+
<h1 className="text-xl font-semibold text-[var(--text-primary)] tracking-tight">Account Settings</h1>
296+
<p className="text-sm text-[var(--text-muted)] mt-0.5">Manage your profile, security, and account preferences.</p>
297297
</div>
298298

299299
{/* Profile Card */}
300-
<div className="bg-neutral-900 border border-neutral-800 rounded-xl overflow-hidden">
301-
<div className="px-6 py-4 border-b border-neutral-800 flex items-center gap-2">
300+
<div className="bg-[var(--bg-header)] border border-[var(--border-main)] rounded-xl overflow-hidden">
301+
<div className="px-6 py-4 border-b border-[var(--border-main)] flex items-center gap-2">
302302
<User className="w-4 h-4 text-blue-400" />
303-
<h2 className="text-sm font-semibold text-white">Profile Information</h2>
303+
<h2 className="text-sm font-semibold text-[var(--text-primary)]">Profile Information</h2>
304304
</div>
305305
<div className="p-6 space-y-6">
306306
{/* Avatar Upload */}
@@ -312,37 +312,37 @@ export const AccountSettings = () => {
312312
/>
313313
)}
314314

315-
<div className="border-t border-neutral-800 pt-5 space-y-4">
315+
<div className="border-t border-[var(--border-main)] pt-5 space-y-4">
316316
{/* Full Name */}
317317
<div>
318-
<label className="block text-sm font-medium text-neutral-300 mb-1.5">Display Name</label>
318+
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-1.5">Display Name</label>
319319
<input
320320
type="text"
321321
value={fullName}
322322
onChange={e => setFullName(e.target.value)}
323323
onKeyDown={e => e.key === 'Enter' && handleSaveProfile()}
324-
className="w-full max-w-sm px-3 py-2.5 bg-neutral-950 border border-neutral-700 rounded-lg text-sm text-white placeholder-neutral-600 focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
324+
className="w-full max-w-sm px-3 py-2.5 bg-[var(--bg-header)] border border-[var(--border-main)] rounded-lg text-sm text-[var(--text-primary)] placeholder-neutral-600 focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
325325
placeholder="Enter your full name"
326326
/>
327327
</div>
328328

329329
{/* Email (readonly) */}
330330
<div>
331-
<label className="block text-sm font-medium text-neutral-300 mb-1.5">Email Address</label>
331+
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-1.5">Email Address</label>
332332
<div className="relative max-w-sm">
333-
<Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-600" />
333+
<Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--text-muted)]" />
334334
<input
335335
type="email"
336336
disabled
337337
value={user?.email || ''}
338-
className="w-full pl-9 pr-3 py-2.5 bg-neutral-950 border border-neutral-800 rounded-lg text-sm text-neutral-500 cursor-not-allowed"
338+
className="w-full pl-9 pr-3 py-2.5 bg-[var(--bg-header)] border border-[var(--border-main)] rounded-lg text-sm text-[var(--text-muted)] cursor-not-allowed"
339339
/>
340340
</div>
341-
<p className="text-xs text-neutral-600 mt-1.5">Email cannot be changed.</p>
341+
<p className="text-xs text-[var(--text-muted)] mt-1.5">Email cannot be changed.</p>
342342
</div>
343343

344344
{/* Member since */}
345-
<p className="text-xs text-neutral-600">
345+
<p className="text-xs text-[var(--text-muted)]">
346346
Member since {new Date(user?.created_at || '').toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })}
347347
</p>
348348

@@ -364,28 +364,28 @@ export const AccountSettings = () => {
364364
</div>
365365

366366
{/* Security Card */}
367-
<div className="bg-neutral-900 border border-neutral-800 rounded-xl overflow-hidden">
368-
<div className="px-6 py-4 border-b border-neutral-800 flex items-center gap-2">
367+
<div className="bg-[var(--bg-header)] border border-[var(--border-main)] rounded-xl overflow-hidden">
368+
<div className="px-6 py-4 border-b border-[var(--border-main)] flex items-center gap-2">
369369
<Shield className="w-4 h-4 text-green-400" />
370-
<h2 className="text-sm font-semibold text-white">Security</h2>
370+
<h2 className="text-sm font-semibold text-[var(--text-primary)]">Security</h2>
371371
</div>
372372
<div className="p-6 space-y-4">
373373
<div>
374-
<label className="block text-sm font-medium text-neutral-300 mb-1.5">New Password</label>
374+
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-1.5">New Password</label>
375375
<input
376376
type="password"
377377
value={newPassword}
378378
onChange={e => setNewPassword(e.target.value)}
379379
onKeyDown={e => e.key === 'Enter' && handleChangePassword()}
380-
className="w-full max-w-sm px-3 py-2.5 bg-neutral-950 border border-neutral-700 rounded-lg text-sm text-white placeholder-neutral-600 focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
380+
className="w-full max-w-sm px-3 py-2.5 bg-[var(--bg-header)] border border-[var(--border-main)] rounded-lg text-sm text-[var(--text-primary)] placeholder-neutral-600 focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
381381
placeholder="Enter new password (min 6 chars)"
382382
/>
383383
</div>
384384
<div className="flex items-center gap-3 pt-1">
385385
<button
386386
onClick={handleChangePassword}
387387
disabled={isChangingPassword || newPassword.length < 6}
388-
className="flex items-center gap-2 border border-neutral-700 hover:border-neutral-500 hover:bg-neutral-800 text-neutral-300 px-4 py-2 rounded-lg text-sm font-medium transition-all disabled:opacity-40"
388+
className="flex items-center gap-2 border border-[var(--border-main)] hover:border-neutral-500 hover:bg-[var(--input-bg)] text-[var(--text-secondary)] px-4 py-2 rounded-lg text-sm font-medium transition-all disabled:opacity-40"
389389
>
390390
{isChangingPassword && <Loader2 className="w-3.5 h-3.5 animate-spin" />}
391391
Change Password
@@ -397,7 +397,7 @@ export const AccountSettings = () => {
397397
</div>
398398

399399
{/* Danger Zone */}
400-
<div className="bg-neutral-900 border border-red-500/25 rounded-xl overflow-hidden">
400+
<div className="bg-[var(--bg-header)] border border-red-500/25 rounded-xl overflow-hidden">
401401
<div className="px-6 py-4 border-b border-red-500/20 flex items-center gap-2">
402402
<AlertTriangle className="w-4 h-4 text-red-400" />
403403
<h2 className="text-sm font-semibold text-red-400">Danger Zone</h2>
@@ -406,8 +406,8 @@ export const AccountSettings = () => {
406406
{/* Clear all data */}
407407
<div className="p-6 flex items-center justify-between gap-4">
408408
<div>
409-
<p className="text-sm font-medium text-neutral-200">Clear All Data</p>
410-
<p className="text-xs text-neutral-500 mt-0.5 max-w-xs">
409+
<p className="text-sm font-medium text-[var(--text-primary)]">Clear All Data</p>
410+
<p className="text-xs text-[var(--text-muted)] mt-0.5 max-w-xs">
411411
Delete all your uploaded structures, files, collections, and activity logs. Your account remains active.
412412
</p>
413413
</div>
@@ -423,8 +423,8 @@ export const AccountSettings = () => {
423423
{/* Delete account */}
424424
<div className="p-6 flex items-center justify-between gap-4">
425425
<div>
426-
<p className="text-sm font-medium text-neutral-200">Delete Account</p>
427-
<p className="text-xs text-neutral-500 mt-0.5 max-w-xs">
426+
<p className="text-sm font-medium text-[var(--text-primary)]">Delete Account</p>
427+
<p className="text-xs text-[var(--text-muted)] mt-0.5 max-w-xs">
428428
Permanently remove all your data and sign you out. This action is irreversible.
429429
</p>
430430
</div>

0 commit comments

Comments
 (0)