A personal media tracker built on the AT Protocol
opnshelf.xyz
chore: tailwind remove var
+59
-59
+59
-59
apps/web/src/components/onboarding/onboarding-content.tsx
+59
-59
apps/web/src/components/onboarding/onboarding-content.tsx
···
109
109
ONBOARDING_STEP_DETAILS[step - 1] ?? ONBOARDING_STEP_DETAILS[0];
110
110
111
111
return (
112
-
<div className="flex flex-1 justify-center bg-[var(--md-sys-color-surface)] p-4 md:p-6">
112
+
<div className="flex flex-1 justify-center bg-(--md-sys-color-surface) p-4 md:p-6">
113
113
<div className="grid w-full max-w-6xl gap-4 lg:grid-cols-[280px_minmax(0,1fr)]">
114
-
<aside className="flex flex-col gap-5 rounded-(--md-sys-shape-corner-extra-large) border border-[var(--md-sys-color-outline-variant)] bg-[var(--md-sys-color-surface-container-low)] p-5">
115
-
<p className="md-label-small m-0 uppercase tracking-[0.14em] text-[var(--md-sys-color-primary)]">
114
+
<aside className="flex flex-col gap-5 rounded-(--md-sys-shape-corner-extra-large) border border-(--md-sys-color-outline-variant) bg-(--md-sys-color-surface-container-low) p-5">
115
+
<p className="md-label-small m-0 uppercase tracking-[0.14em] text-(--md-sys-color-primary)">
116
116
Onboarding
117
117
</p>
118
118
<h1 className="md-headline-medium m-0">Welcome to OpnShelf</h1>
119
-
<p className="md-body-medium m-0 text-[var(--md-sys-color-on-surface-variant)]">
119
+
<p className="md-body-medium m-0 text-(--md-sys-color-on-surface-variant)">
120
120
This setup turns a blank profile into a ready-to-track shelf with
121
121
your preferred timezone and imported watch history.
122
122
</p>
···
136
136
key={item.title}
137
137
className={`flex items-start gap-3 rounded-(--md-sys-shape-corner-large) border p-3 ${
138
138
isActive
139
-
? "border-[var(--md-sys-color-outline)] bg-[var(--md-sys-color-surface-container)]"
139
+
? "border-(--md-sys-color-outline) bg-(--md-sys-color-surface-container)"
140
140
: "border-transparent"
141
141
}`}
142
142
>
143
143
<span
144
144
className={`inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-full ${
145
145
isComplete
146
-
? "bg-[var(--md-sys-color-primary)] text-[var(--md-sys-color-on-primary)]"
147
-
: "bg-[var(--md-sys-color-secondary-container)] text-[var(--md-sys-color-on-secondary-container)]"
146
+
? "bg-(--md-sys-color-primary) text-(--md-sys-color-on-primary)"
147
+
: "bg-(--md-sys-color-secondary-container) text-(--md-sys-color-on-secondary-container)"
148
148
}`}
149
149
>
150
150
{isComplete ? <Check size={16} /> : <StepIcon size={16} />}
151
151
</span>
152
152
<span className="grid gap-0.5">
153
-
<strong className="md-label-large text-[var(--md-sys-color-on-surface)]">
153
+
<strong className="md-label-large text-(--md-sys-color-on-surface)">
154
154
{item.title}
155
155
</strong>
156
-
<small className="md-body-small text-[var(--md-sys-color-on-surface-variant)]">
156
+
<small className="md-body-small text-(--md-sys-color-on-surface-variant)">
157
157
{item.description}
158
158
</small>
159
159
</span>
···
163
163
</ol>
164
164
</aside>
165
165
166
-
<section className="flex flex-col gap-4 rounded-(--md-sys-shape-corner-extra-large) border border-[var(--md-sys-color-outline-variant)] bg-[var(--md-sys-color-surface-container-low)] p-4 md:p-6">
166
+
<section className="flex flex-col gap-4 rounded-(--md-sys-shape-corner-extra-large) border border-(--md-sys-color-outline-variant) bg-(--md-sys-color-surface-container-low) p-4 md:p-6">
167
167
<header className="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
168
168
<div>
169
-
<p className="md-label-small m-0 uppercase text-[var(--md-sys-color-primary)]">
169
+
<p className="md-label-small m-0 uppercase text-(--md-sys-color-primary)">
170
170
Step {step} of {ONBOARDING_STEPS}
171
171
</p>
172
172
<h2 className="md-title-large m-0 mt-1">
173
173
{currentStepDetail.title}
174
174
</h2>
175
-
<p className="md-body-medium m-0 text-[var(--md-sys-color-on-surface-variant)]">
175
+
<p className="md-body-medium m-0 text-(--md-sys-color-on-surface-variant)">
176
176
{currentStepDetail.description}
177
177
</p>
178
178
</div>
179
-
<p className="md-title-medium m-0 text-[var(--md-sys-color-primary)]">
179
+
<p className="md-title-medium m-0 text-(--md-sys-color-primary)">
180
180
{progress}%
181
181
</p>
182
182
</header>
183
183
184
-
<div className="h-2 overflow-hidden rounded-full bg-[var(--md-sys-color-surface-container-high)]">
184
+
<div className="h-2 overflow-hidden rounded-full bg-(--md-sys-color-surface-container-high)">
185
185
<div
186
-
className="h-full rounded-full bg-[var(--md-sys-color-primary)] transition-[width] duration-300"
186
+
className="h-full rounded-full bg-(--md-sys-color-primary) transition-[width] duration-300"
187
187
style={{ width: `${progress}%` }}
188
188
/>
189
189
</div>
190
190
191
191
{step === 1 && (
192
-
<div className="animate-in fade-in slide-in-from-bottom-2 grid gap-4 rounded-(--md-sys-shape-corner-large) border border-[var(--md-sys-color-outline-variant)] bg-[var(--md-sys-color-surface-container)] p-4 duration-300">
192
+
<div className="animate-in fade-in slide-in-from-bottom-2 grid gap-4 rounded-(--md-sys-shape-corner-large) border border-(--md-sys-color-outline-variant) bg-(--md-sys-color-surface-container) p-4 duration-300">
193
193
<p className="md-body-medium m-0">
194
194
You can finish in under two minutes. We will save your display
195
195
name, timezone, and optionally import your viewing history.
196
196
</p>
197
-
<ul className="md-body-medium m-0 grid list-disc gap-2 pl-5 text-[var(--md-sys-color-on-surface-variant)]">
197
+
<ul className="md-body-medium m-0 grid list-disc gap-2 pl-5 text-(--md-sys-color-on-surface-variant)">
198
198
<li>Profile and timezone come first.</li>
199
199
<li>Import from Trakt username or CSV export.</li>
200
200
<li>You can skip import and start tracking instantly.</li>
···
215
215
)}
216
216
217
217
{step === 2 && (
218
-
<div className="animate-in fade-in slide-in-from-bottom-2 grid gap-4 rounded-(--md-sys-shape-corner-large) border border-[var(--md-sys-color-outline-variant)] bg-[var(--md-sys-color-surface-container)] p-4 duration-300">
219
-
<div className="grid grid-cols-[auto_1fr] items-center gap-4 rounded-(--md-sys-shape-corner-medium) border border-[var(--md-sys-color-outline-variant)] bg-[var(--md-sys-color-surface-container-high)] p-3">
220
-
<div className="h-13 w-13 overflow-hidden rounded-full border border-[var(--md-sys-color-outline)] bg-[var(--md-sys-color-surface-container-highest)]">
218
+
<div className="animate-in fade-in slide-in-from-bottom-2 grid gap-4 rounded-(--md-sys-shape-corner-large) border border-(--md-sys-color-outline-variant) bg-(--md-sys-color-surface-container) p-4 duration-300">
219
+
<div className="grid grid-cols-[auto_1fr] items-center gap-4 rounded-(--md-sys-shape-corner-medium) border border-(--md-sys-color-outline-variant) bg-(--md-sys-color-surface-container-high) p-3">
220
+
<div className="h-13 w-13 overflow-hidden rounded-full border border-(--md-sys-color-outline) bg-(--md-sys-color-surface-container-highest)">
221
221
{userAvatarUrl ? (
222
222
<img
223
223
src={userAvatarUrl}
···
225
225
className="h-full w-full object-cover"
226
226
/>
227
227
) : (
228
-
<div className="md-body-small grid h-full w-full place-items-center text-[var(--md-sys-color-on-surface-variant)]">
228
+
<div className="md-body-small grid h-full w-full place-items-center text-(--md-sys-color-on-surface-variant)">
229
229
No avatar
230
230
</div>
231
231
)}
232
232
</div>
233
233
<div>
234
234
<p className="md-title-small m-0">BlueSky profile linked</p>
235
-
<p className="md-body-small m-0 mt-1 text-[var(--md-sys-color-on-surface-variant)]">
235
+
<p className="md-body-small m-0 mt-1 text-(--md-sys-color-on-surface-variant)">
236
236
Avatar sync is active. Manual uploads will be added soon.
237
237
</p>
238
238
</div>
···
240
240
241
241
<div className="grid gap-3 md:grid-cols-2">
242
242
<label className="grid gap-1.5" htmlFor={displayNameId}>
243
-
<span className="md-label-small uppercase text-[var(--md-sys-color-on-surface-variant)]">
243
+
<span className="md-label-small uppercase text-(--md-sys-color-on-surface-variant)">
244
244
Display name
245
245
</span>
246
246
<input
···
256
256
</label>
257
257
258
258
<label className="grid gap-1.5" htmlFor={timezoneId}>
259
-
<span className="md-label-small uppercase text-[var(--md-sys-color-on-surface-variant)]">
259
+
<span className="md-label-small uppercase text-(--md-sys-color-on-surface-variant)">
260
260
Timezone
261
261
</span>
262
262
<select
···
279
279
</div>
280
280
281
281
<div className="grid gap-1.5">
282
-
<p className="md-label-small m-0 uppercase text-[var(--md-sys-color-on-surface-variant)]">
282
+
<p className="md-label-small m-0 uppercase text-(--md-sys-color-on-surface-variant)">
283
283
Clock style
284
284
</p>
285
-
<div className="inline-flex w-fit gap-1 rounded-(--md-sys-shape-corner-large) border border-[var(--md-sys-color-outline-variant)] bg-[var(--md-sys-color-surface-container-high)] p-1">
285
+
<div className="inline-flex w-fit gap-1 rounded-(--md-sys-shape-corner-large) border border-(--md-sys-color-outline-variant) bg-(--md-sys-color-surface-container-high) p-1">
286
286
<button
287
287
type="button"
288
288
className={`rounded-(--md-sys-shape-corner-medium) px-3.5 py-2 md-label-large ${
289
289
timeFormat === "12h"
290
-
? "bg-[var(--md-sys-color-secondary-container)] text-[var(--md-sys-color-on-secondary-container)]"
291
-
: "text-[var(--md-sys-color-on-surface-variant)]"
290
+
? "bg-(--md-sys-color-secondary-container) text-(--md-sys-color-on-secondary-container)"
291
+
: "text-(--md-sys-color-on-surface-variant)"
292
292
}`}
293
293
onClick={() => onTimeFormatChange("12h")}
294
294
>
···
298
298
type="button"
299
299
className={`rounded-(--md-sys-shape-corner-medium) px-3.5 py-2 md-label-large ${
300
300
timeFormat === "24h"
301
-
? "bg-[var(--md-sys-color-secondary-container)] text-[var(--md-sys-color-on-secondary-container)]"
302
-
: "text-[var(--md-sys-color-on-surface-variant)]"
301
+
? "bg-(--md-sys-color-secondary-container) text-(--md-sys-color-on-secondary-container)"
302
+
: "text-(--md-sys-color-on-surface-variant)"
303
303
}`}
304
304
onClick={() => onTimeFormatChange("24h")}
305
305
>
···
328
328
)}
329
329
330
330
{step === 3 && (
331
-
<div className="animate-in fade-in slide-in-from-bottom-2 grid gap-4 rounded-(--md-sys-shape-corner-large) border border-[var(--md-sys-color-outline-variant)] bg-[var(--md-sys-color-surface-container)] p-4 duration-300">
331
+
<div className="animate-in fade-in slide-in-from-bottom-2 grid gap-4 rounded-(--md-sys-shape-corner-large) border border-(--md-sys-color-outline-variant) bg-(--md-sys-color-surface-container) p-4 duration-300">
332
332
{importProgress.phase !== "idle" && (
333
-
<div className="grid gap-2 rounded-(--md-sys-shape-corner-medium) border border-[var(--md-sys-color-outline-variant)] bg-[var(--md-sys-color-surface-container-high)] p-3">
333
+
<div className="grid gap-2 rounded-(--md-sys-shape-corner-medium) border border-(--md-sys-color-outline-variant) bg-(--md-sys-color-surface-container-high) p-3">
334
334
<p className="md-label-large m-0">{importProgress.message}</p>
335
335
{importProgress.phase === "importing" ? (
336
336
<>
337
-
<div className="h-2 overflow-hidden rounded-full bg-[var(--md-sys-color-surface-container-highest)]">
337
+
<div className="h-2 overflow-hidden rounded-full bg-(--md-sys-color-surface-container-highest)">
338
338
<div
339
-
className="h-full rounded-full bg-[var(--md-sys-color-primary)] transition-[width] duration-300"
339
+
className="h-full rounded-full bg-(--md-sys-color-primary) transition-[width] duration-300"
340
340
style={{ width: `${importPercent}%` }}
341
341
/>
342
342
</div>
343
-
<p className="md-body-small m-0 text-[var(--md-sys-color-on-surface-variant)]">
343
+
<p className="md-body-small m-0 text-(--md-sys-color-on-surface-variant)">
344
344
{importProgress.processedItems} /{" "}
345
345
{importProgress.totalItems} items ({importPercent}%)
346
346
</p>
347
-
<p className="md-body-small m-0 text-[var(--md-sys-color-on-surface-variant)]">
347
+
<p className="md-body-small m-0 text-(--md-sys-color-on-surface-variant)">
348
348
Batch {importProgress.currentBatch} of{" "}
349
349
{importProgress.totalBatches}. Imported{" "}
350
350
{importProgress.imported}, skipped{" "}
···
353
353
</p>
354
354
</>
355
355
) : (
356
-
<p className="md-body-small m-0 text-[var(--md-sys-color-on-surface-variant)]">
356
+
<p className="md-body-small m-0 text-(--md-sys-color-on-surface-variant)">
357
357
Preparing data for import...
358
358
</p>
359
359
)}
···
361
361
)}
362
362
363
363
<div
364
-
className="inline-flex w-fit gap-1 rounded-(--md-sys-shape-corner-large) border border-[var(--md-sys-color-outline-variant)] bg-[var(--md-sys-color-surface-container-high)] p-1"
364
+
className="inline-flex w-fit gap-1 rounded-(--md-sys-shape-corner-large) border border-(--md-sys-color-outline-variant) bg-(--md-sys-color-surface-container-high) p-1"
365
365
role="tablist"
366
366
aria-label="Import source"
367
367
>
···
371
371
aria-selected={activeTab === "trakt"}
372
372
className={`rounded-(--md-sys-shape-corner-medium) px-3 py-2 md-label-large ${
373
373
activeTab === "trakt"
374
-
? "bg-[var(--md-sys-color-secondary-container)] text-[var(--md-sys-color-on-secondary-container)]"
375
-
: "text-[var(--md-sys-color-on-surface-variant)]"
374
+
? "bg-(--md-sys-color-secondary-container) text-(--md-sys-color-on-secondary-container)"
375
+
: "text-(--md-sys-color-on-surface-variant)"
376
376
}`}
377
377
onClick={() => onActiveTabChange("trakt")}
378
378
>
···
384
384
aria-selected={activeTab === "csv"}
385
385
className={`rounded-(--md-sys-shape-corner-medium) px-3 py-2 md-label-large ${
386
386
activeTab === "csv"
387
-
? "bg-[var(--md-sys-color-secondary-container)] text-[var(--md-sys-color-on-secondary-container)]"
388
-
: "text-[var(--md-sys-color-on-surface-variant)]"
387
+
? "bg-(--md-sys-color-secondary-container) text-(--md-sys-color-on-secondary-container)"
388
+
: "text-(--md-sys-color-on-surface-variant)"
389
389
}`}
390
390
onClick={() => onActiveTabChange("csv")}
391
391
>
···
396
396
{activeTab === "trakt" ? (
397
397
<div className="grid gap-3" role="tabpanel">
398
398
<label className="grid gap-1.5">
399
-
<span className="md-label-small uppercase text-[var(--md-sys-color-on-surface-variant)]">
399
+
<span className="md-label-small uppercase text-(--md-sys-color-on-surface-variant)">
400
400
Trakt username
401
401
</span>
402
402
<input
···
421
421
<div className="grid gap-3" role="tabpanel">
422
422
<label
423
423
htmlFor={fileInputId}
424
-
className={`inline-flex w-fit items-center gap-2 rounded-(--md-sys-shape-corner-medium) border border-dashed border-[var(--md-sys-color-outline)] bg-[var(--md-sys-color-surface)] px-3 py-2 md-label-large ${
424
+
className={`inline-flex w-fit items-center gap-2 rounded-(--md-sys-shape-corner-medium) border border-dashed border-(--md-sys-color-outline) bg-(--md-sys-color-surface) px-3 py-2 md-label-large ${
425
425
isImportBusy
426
426
? "pointer-events-none opacity-55"
427
-
: "hover:bg-[var(--md-sys-color-surface-container-high)]"
427
+
: "hover:bg-(--md-sys-color-surface-container-high)"
428
428
}`}
429
429
>
430
430
<FileSpreadsheet size={18} />
···
448
448
}}
449
449
disabled={isImportBusy}
450
450
/>
451
-
<p className="md-body-small m-0 text-[var(--md-sys-color-on-surface-variant)]">
451
+
<p className="md-body-small m-0 text-(--md-sys-color-on-surface-variant)">
452
452
Use the standard Trakt export columns: watched_at, action,
453
453
type, tmdb_id, season_number, episode_number.
454
454
</p>
···
475
475
)}
476
476
477
477
{step === 4 && (
478
-
<div className="animate-in fade-in slide-in-from-bottom-2 grid gap-4 rounded-(--md-sys-shape-corner-large) border border-[var(--md-sys-color-outline-variant)] bg-[var(--md-sys-color-surface-container)] p-4 duration-300">
478
+
<div className="animate-in fade-in slide-in-from-bottom-2 grid gap-4 rounded-(--md-sys-shape-corner-large) border border-(--md-sys-color-outline-variant) bg-(--md-sys-color-surface-container) p-4 duration-300">
479
479
<h3 className="md-title-large m-0">You are all set.</h3>
480
480
<p className="md-body-medium m-0">
481
481
Your profile is ready and your shelf can start collecting watch
482
482
history.
483
483
</p>
484
484
<div className="grid gap-3 sm:grid-cols-3">
485
-
<div className="rounded-(--md-sys-shape-corner-medium) border border-[var(--md-sys-color-outline-variant)] bg-[var(--md-sys-color-surface-container-high)] p-3">
486
-
<p className="md-label-small m-0 uppercase text-[var(--md-sys-color-on-surface-variant)]">
485
+
<div className="rounded-(--md-sys-shape-corner-medium) border border-(--md-sys-color-outline-variant) bg-(--md-sys-color-surface-container-high) p-3">
486
+
<p className="md-label-small m-0 uppercase text-(--md-sys-color-on-surface-variant)">
487
487
Imported
488
488
</p>
489
-
<strong className="md-headline-small mt-1 block text-[var(--md-sys-color-primary)]">
489
+
<strong className="md-headline-small mt-1 block text-(--md-sys-color-primary)">
490
490
{importResult.imported}
491
491
</strong>
492
492
</div>
493
-
<div className="rounded-(--md-sys-shape-corner-medium) border border-[var(--md-sys-color-outline-variant)] bg-[var(--md-sys-color-surface-container-high)] p-3">
494
-
<p className="md-label-small m-0 uppercase text-[var(--md-sys-color-on-surface-variant)]">
493
+
<div className="rounded-(--md-sys-shape-corner-medium) border border-(--md-sys-color-outline-variant) bg-(--md-sys-color-surface-container-high) p-3">
494
+
<p className="md-label-small m-0 uppercase text-(--md-sys-color-on-surface-variant)">
495
495
Skipped
496
496
</p>
497
-
<strong className="md-headline-small mt-1 block text-[var(--md-sys-color-primary)]">
497
+
<strong className="md-headline-small mt-1 block text-(--md-sys-color-primary)">
498
498
{importResult.skipped}
499
499
</strong>
500
500
</div>
501
-
<div className="rounded-(--md-sys-shape-corner-medium) border border-[var(--md-sys-color-outline-variant)] bg-[var(--md-sys-color-surface-container-high)] p-3">
502
-
<p className="md-label-small m-0 uppercase text-[var(--md-sys-color-on-surface-variant)]">
501
+
<div className="rounded-(--md-sys-shape-corner-medium) border border-(--md-sys-color-outline-variant) bg-(--md-sys-color-surface-container-high) p-3">
502
+
<p className="md-label-small m-0 uppercase text-(--md-sys-color-on-surface-variant)">
503
503
Failed
504
504
</p>
505
-
<strong className="md-headline-small mt-1 block text-[var(--md-sys-color-primary)]">
505
+
<strong className="md-headline-small mt-1 block text-(--md-sys-color-primary)">
506
506
{importResult.failed}
507
507
</strong>
508
508
</div>
509
509
</div>
510
510
511
511
{importResult.errors.length > 0 && (
512
-
<div className="max-h-[220px] overflow-auto rounded-(--md-sys-shape-corner-medium) border border-[var(--md-sys-color-error)] bg-[var(--md-sys-color-error-container)]/20 p-3">
513
-
<p className="md-label-large m-0 mb-2 text-[var(--md-sys-color-error)]">
512
+
<div className="max-h-[220px] overflow-auto rounded-(--md-sys-shape-corner-medium) border border-(--md-sys-color-error) bg-(--md-sys-color-error-container)/20 p-3">
513
+
<p className="md-label-large m-0 mb-2 text-(--md-sys-color-error)">
514
514
Import errors
515
515
</p>
516
-
<ul className="md-body-small m-0 grid list-disc gap-1 pl-4 text-[var(--md-sys-color-error)]">
516
+
<ul className="md-body-small m-0 grid list-disc gap-1 pl-4 text-(--md-sys-color-error)">
517
517
{importResult.errors.map((error) => (
518
518
<li key={error}>{error}</li>
519
519
))}