Skip to content

Commit cb72dc9

Browse files
thakurdotdevthakurdotdev
committed
refactor: update landing page components to use consistent theme variables for colors and borders
1 parent 25d048b commit cb72dc9

11 files changed

Lines changed: 548 additions & 547 deletions

File tree

‎client/src/Pages/Releases/index.jsx‎

Lines changed: 46 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -88,59 +88,59 @@ const ReleasesPage = () => {
8888
const formattedSize = formatBytes(latestUpdate?.fileSize);
8989

9090
return (
91-
<div className='min-h-screen bg-[#050505] text-white selection:bg-white/20 selection:text-white px-4 sm:px-6 pt-28 pb-24'>
91+
<div className='min-h-screen bg-background text-foreground selection:bg-primary/30 selection:text-foreground px-4 sm:px-6 pt-28 pb-24'>
9292
<div className='max-w-4xl mx-auto space-y-12'>
9393
{/* Header Title */}
9494
<div className='text-center max-w-xl mx-auto space-y-3'>
95-
<div className='inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-900 border border-zinc-800 text-xs font-mono text-zinc-300'>
96-
<Smartphone size={13} className='text-zinc-400' />
95+
<div className='inline-flex items-center gap-2 px-3 py-1 rounded-full bg-secondary border border-border text-xs font-mono text-muted-foreground'>
96+
<Smartphone size={13} className='text-primary' />
9797
<span>SyncVibe for Android</span>
9898
</div>
9999

100-
<h1 className='text-3xl sm:text-5xl font-bold tracking-tight text-white leading-tight'>
100+
<h1 className='text-3xl sm:text-5xl font-bold tracking-tight text-foreground leading-tight'>
101101
Downloads & Releases
102102
</h1>
103103

104-
<p className='text-xs sm:text-sm text-zinc-400 leading-relaxed font-normal'>
104+
<p className='text-xs sm:text-sm text-muted-foreground leading-relaxed font-normal'>
105105
Download the latest APK build directly or review past release notes and checksums.
106106
</p>
107107
</div>
108108

109109
{/* Loading State */}
110110
{loading ? (
111111
<div className='py-20 flex flex-col items-center justify-center space-y-3'>
112-
<Loader2 className='w-6 h-6 animate-spin text-zinc-500' />
113-
<span className='text-xs text-zinc-500 font-mono'>Fetching latest build...</span>
112+
<Loader2 className='w-6 h-6 animate-spin text-primary' />
113+
<span className='text-xs text-muted-foreground font-mono'>Fetching latest build...</span>
114114
</div>
115115
) : (
116116
<>
117117
{/* Latest Release Primary Card */}
118-
<div className='rounded-2xl border border-zinc-800 bg-zinc-950/80 backdrop-blur-xl p-6 sm:p-8 space-y-6 shadow-2xl'>
118+
<div className='rounded-2xl border border-border bg-card/80 backdrop-blur-xl p-6 sm:p-8 space-y-6 shadow-2xl'>
119119
{/* Header Info */}
120-
<div className='flex flex-col sm:flex-row sm:items-center justify-between gap-4 pb-6 border-b border-zinc-800/80'>
120+
<div className='flex flex-col sm:flex-row sm:items-center justify-between gap-4 pb-6 border-b border-border/80'>
121121
<div className='space-y-1.5'>
122122
<div className='flex items-center gap-2.5'>
123-
<h2 className='text-xl sm:text-2xl font-bold text-white tracking-tight font-mono'>
123+
<h2 className='text-xl sm:text-2xl font-bold text-foreground tracking-tight font-mono'>
124124
v{version}
125125
</h2>
126-
<span className='px-2.5 py-0.5 rounded-full bg-white text-black text-[11px] font-bold font-mono'>
126+
<span className='px-2.5 py-0.5 rounded-full bg-primary text-primary-foreground text-[11px] font-bold font-mono'>
127127
LATEST
128128
</span>
129129
{latestUpdate?.critical && (
130-
<span className='px-2.5 py-0.5 rounded-full bg-red-500/20 text-red-400 border border-red-500/30 text-[10px] font-semibold'>
130+
<span className='px-2.5 py-0.5 rounded-full bg-destructive/20 text-destructive border border-destructive/30 text-[10px] font-semibold'>
131131
CRITICAL
132132
</span>
133133
)}
134134
</div>
135-
<p className='text-xs text-zinc-400 font-mono'>
135+
<p className='text-xs text-muted-foreground font-mono'>
136136
Released on {formatDate(latestUpdate?.createdAt || new Date())}
137137
</p>
138138
</div>
139139

140140
<a href={downloadUrl} target='_blank' rel='noopener noreferrer'>
141141
<Button
142142
size='lg'
143-
className='w-full sm:w-auto h-11 px-6 rounded-full bg-white text-black hover:bg-zinc-200 font-semibold text-xs cursor-pointer shadow-sm transition-all active:scale-98'
143+
className='w-full sm:w-auto h-11 px-6 rounded-full bg-primary hover:bg-primary/90 text-primary-foreground font-semibold text-xs cursor-pointer shadow-lg shadow-primary/25 transition-all active:scale-98'
144144
>
145145
<ArrowDownToLine className='mr-2 h-4 w-4' />
146146
<span>Download APK {formattedSize ? `(${formattedSize})` : ''}</span>
@@ -150,22 +150,22 @@ const ReleasesPage = () => {
150150

151151
{/* Release Metadata */}
152152
<div className='grid grid-cols-1 sm:grid-cols-3 gap-3'>
153-
<div className='p-3.5 rounded-xl bg-zinc-900/60 border border-zinc-800/60 space-y-1'>
154-
<div className='text-[10.5px] font-mono text-zinc-500 uppercase'>
153+
<div className='p-3.5 rounded-xl bg-secondary/60 border border-border space-y-1'>
154+
<div className='text-[10.5px] font-mono text-muted-foreground uppercase'>
155155
Architecture
156156
</div>
157-
<div className='text-xs font-semibold text-white font-mono'>Universal APK</div>
157+
<div className='text-xs font-semibold text-foreground font-mono'>Universal APK</div>
158158
</div>
159159

160-
<div className='p-3.5 rounded-xl bg-zinc-900/60 border border-zinc-800/60 space-y-1'>
161-
<div className='text-[10.5px] font-mono text-zinc-500 uppercase'>
160+
<div className='p-3.5 rounded-xl bg-secondary/60 border border-border space-y-1'>
161+
<div className='text-[10.5px] font-mono text-muted-foreground uppercase'>
162162
Compatibility
163163
</div>
164-
<div className='text-xs font-semibold text-white'>Android 8.0 & Higher</div>
164+
<div className='text-xs font-semibold text-foreground'>Android 8.0 & Higher</div>
165165
</div>
166166

167-
<div className='p-3.5 rounded-xl bg-zinc-900/60 border border-zinc-800/60 space-y-1'>
168-
<div className='text-[10.5px] font-mono text-zinc-500 uppercase'>
167+
<div className='p-3.5 rounded-xl bg-secondary/60 border border-border space-y-1'>
168+
<div className='text-[10.5px] font-mono text-muted-foreground uppercase'>
169169
Package Verification
170170
</div>
171171
<div className='text-xs font-semibold text-emerald-400 flex items-center gap-1'>
@@ -177,12 +177,12 @@ const ReleasesPage = () => {
177177

178178
{/* SHA-256 Checksum Box */}
179179
{latestUpdate?.sha256 && (
180-
<div className='p-3.5 rounded-xl bg-zinc-900/40 border border-zinc-800/60 flex items-center justify-between gap-3 text-xs'>
180+
<div className='p-3.5 rounded-xl bg-secondary/40 border border-border flex items-center justify-between gap-3 text-xs'>
181181
<div className='min-w-0 space-y-0.5'>
182-
<div className='text-[10.5px] font-mono text-zinc-500 uppercase'>
182+
<div className='text-[10.5px] font-mono text-muted-foreground uppercase'>
183183
SHA-256 Checksum
184184
</div>
185-
<div className='font-mono text-[11px] text-zinc-300 truncate'>
185+
<div className='font-mono text-[11px] text-foreground truncate'>
186186
{latestUpdate.sha256}
187187
</div>
188188
</div>
@@ -191,7 +191,7 @@ const ReleasesPage = () => {
191191
variant='ghost'
192192
size='sm'
193193
onClick={() => handleCopySha(latestUpdate.sha256)}
194-
className='h-8 px-2.5 rounded-lg text-zinc-400 hover:text-white hover:bg-zinc-800 shrink-0 text-xs'
194+
className='h-8 px-2.5 rounded-lg text-muted-foreground hover:text-foreground hover:bg-secondary shrink-0 text-xs'
195195
>
196196
{copiedSha ? (
197197
<span className='text-emerald-400 flex items-center gap-1'>
@@ -209,34 +209,34 @@ const ReleasesPage = () => {
209209
{/* Release Notes */}
210210
{latestUpdate?.releaseNotes && (
211211
<div className='space-y-2 pt-2'>
212-
<h3 className='text-xs font-semibold text-zinc-300 uppercase tracking-wider font-mono'>
212+
<h3 className='text-xs font-semibold text-foreground uppercase tracking-wider font-mono'>
213213
What's New in v{version}
214214
</h3>
215-
<div className='p-4 rounded-xl bg-zinc-900/30 border border-zinc-800/50 text-xs sm:text-sm text-zinc-300 leading-relaxed whitespace-pre-line'>
215+
<div className='p-4 rounded-xl bg-secondary/30 border border-border text-xs sm:text-sm text-foreground/90 leading-relaxed whitespace-pre-line'>
216216
{latestUpdate.releaseNotes}
217217
</div>
218218
</div>
219219
)}
220220
</div>
221221

222222
{/* How to Install Guide */}
223-
<div className='rounded-2xl border border-zinc-800/80 bg-zinc-950/40 p-6 space-y-4'>
224-
<h3 className='text-sm font-semibold text-white flex items-center gap-2'>
225-
<Info size={15} className='text-zinc-400' />
223+
<div className='rounded-2xl border border-border bg-card/60 p-6 space-y-4'>
224+
<h3 className='text-sm font-semibold text-foreground flex items-center gap-2'>
225+
<Info size={15} className='text-primary' />
226226
How to install the APK on Android
227227
</h3>
228228

229-
<div className='grid grid-cols-1 sm:grid-cols-3 gap-4 text-xs text-zinc-400'>
229+
<div className='grid grid-cols-1 sm:grid-cols-3 gap-4 text-xs text-muted-foreground'>
230230
<div className='space-y-1'>
231-
<span className='font-mono text-white font-semibold'>1. Download</span>
231+
<span className='font-mono text-foreground font-semibold'>1. Download</span>
232232
<p>Tap the Download APK button above to save the file to your device.</p>
233233
</div>
234234
<div className='space-y-1'>
235-
<span className='font-mono text-white font-semibold'>2. Allow Install</span>
235+
<span className='font-mono text-foreground font-semibold'>2. Allow Install</span>
236236
<p>When prompted, allow your browser to install apps from this source.</p>
237237
</div>
238238
<div className='space-y-1'>
239-
<span className='font-mono text-white font-semibold'>3. Open & Sync</span>
239+
<span className='font-mono text-foreground font-semibold'>3. Open & Sync</span>
240240
<p>Open SyncVibe, log in to your account, and start streaming in sync!</p>
241241
</div>
242242
</div>
@@ -246,8 +246,8 @@ const ReleasesPage = () => {
246246
{allUpdates.length > 1 && (
247247
<div className='space-y-4 pt-4'>
248248
<div className='flex items-center gap-2'>
249-
<History size={15} className='text-zinc-400' />
250-
<h3 className='text-sm font-semibold text-white'>Release History</h3>
249+
<History size={15} className='text-muted-foreground' />
250+
<h3 className='text-sm font-semibold text-foreground'>Release History</h3>
251251
</div>
252252

253253
<div className='space-y-2.5'>
@@ -259,23 +259,23 @@ const ReleasesPage = () => {
259259
return (
260260
<div
261261
key={update.id || update.version}
262-
className='rounded-xl border border-zinc-800/70 bg-zinc-950/40 overflow-hidden transition-colors'
262+
className='rounded-xl border border-border bg-card/40 overflow-hidden transition-colors'
263263
>
264264
<div
265-
className='p-4 flex items-center justify-between gap-4 cursor-pointer hover:bg-zinc-900/30'
265+
className='p-4 flex items-center justify-between gap-4 cursor-pointer hover:bg-secondary/40'
266266
onClick={() => toggleVersion(update.version)}
267267
>
268268
<div className='flex items-center gap-3 min-w-0'>
269-
<span className='font-mono font-semibold text-xs text-white'>
269+
<span className='font-mono font-semibold text-xs text-foreground'>
270270
v{update.version}
271271
</span>
272-
<span className='text-zinc-500 text-xs font-mono'>
272+
<span className='text-muted-foreground/60 text-xs font-mono'>
273273
{formatDate(update.createdAt)}
274274
</span>
275275
{updateSize && (
276276
<>
277-
<span className='text-zinc-600 text-xs'>•</span>
278-
<span className='text-zinc-400 text-xs font-mono'>
277+
<span className='text-muted-foreground/40 text-xs'>•</span>
278+
<span className='text-muted-foreground text-xs font-mono'>
279279
{updateSize}
280280
</span>
281281
</>
@@ -289,7 +289,7 @@ const ReleasesPage = () => {
289289
target='_blank'
290290
rel='noopener noreferrer'
291291
onClick={(e) => e.stopPropagation()}
292-
className='text-xs text-zinc-400 hover:text-white font-medium flex items-center gap-1 py-1 px-2.5 rounded-lg bg-zinc-900 border border-zinc-800'
292+
className='text-xs text-muted-foreground hover:text-foreground font-medium flex items-center gap-1 py-1 px-2.5 rounded-lg bg-secondary border border-border'
293293
>
294294
<Download size={12} />
295295
<span>APK</span>
@@ -298,15 +298,15 @@ const ReleasesPage = () => {
298298
<ChevronDown
299299
size={14}
300300
className={cn(
301-
'text-zinc-500 transition-transform duration-200',
301+
'text-muted-foreground transition-transform duration-200',
302302
isExpanded && 'transform rotate-180'
303303
)}
304304
/>
305305
</div>
306306
</div>
307307

308308
{isExpanded && update.releaseNotes && (
309-
<div className='px-4 pb-4 pt-1 text-xs text-zinc-400 leading-relaxed border-t border-zinc-800/50 whitespace-pre-line'>
309+
<div className='px-4 pb-4 pt-1 text-xs text-muted-foreground leading-relaxed border-t border-border whitespace-pre-line'>
310310
{update.releaseNotes}
311311
</div>
312312
)}

0 commit comments

Comments
 (0)