peter/siftlode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(glass): re-theme the public WatchPage onto the token system (Phase 3)

Browse source 
The standalone /watch share page was on a hard-coded slate/teal palette (it
renders outside <App> with no theme). Add a baseline theme (dark/midnight) in
main.tsx so the token CSS vars resolve on every route incl. the public pages,
then swap all of WatchPage's slate/teal/hex to theme tokens (bg-bg/text-fg/
text-muted/accent, surface/border), with the password card as glass. Now
consistent with the app's default look; the app still overrides with the user's
saved theme when it mounts.
This commit is contained in:
npeter83 2026-07-12 23:00:36 +02:00
parent b09923661a
commit f0330fa57f
2 changed files with 23 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

32
frontend/src/components/WatchPage.tsx
View file

@ -122,29 +122,29 @@ export default function WatchPage() {
};
return (
<div className="min-h-screen bg-[#0b0f14] text-slate-100 flex flex-col items-center">
<div className="min-h-screen bg-bg text-fg flex flex-col items-center">
<div className="w-full max-w-4xl px-4 py-6 flex-1 flex flex-col">
<div className="flex items-center gap-2 mb-5 text-sm text-slate-400">
<PlayCircle className="w-5 h-5 text-teal-400" />
<span className="font-semibold text-slate-200">Siftlode</span>
<div className="flex items-center gap-2 mb-5 text-sm text-muted">
<PlayCircle className="w-5 h-5 text-accent" />
<span className="font-semibold text-fg">Siftlode</span>
</div>
{status === "loading" && <div className="flex-1 grid place-items-center text-slate-400">{T.loading}</div>}
{status === "loading" && <div className="flex-1 grid place-items-center text-muted">{T.loading}</div>}
{status === "gone" && (
<div className="flex-1 grid place-items-center text-center">
<div>
<div className="text-lg font-semibold">{T.gone}</div>
<div className="text-sm text-slate-400 mt-1">{T.goneHint}</div>
<div className="text-sm text-muted mt-1">{T.goneHint}</div>
</div>
</div>
)}
{status === "password" && (
<div className="flex-1 grid place-items-center">
<div className="w-full max-w-sm rounded-2xl bg-slate-900/60 border border-slate-700 p-6">
<div className="w-full max-w-sm rounded-2xl glass p-6">
<div className="flex items-center gap-2 font-medium mb-4">
<Lock className="w-4 h-4 text-teal-400" /> {T.passwordTitle}
<Lock className="w-4 h-4 text-accent" /> {T.passwordTitle}
</div>
<input
type="password"
@ -153,13 +153,13 @@ export default function WatchPage() {
onChange={(e) => setPassword(e.target.value)}
onKeyDown={(e) => e.key === "Enter" && password && unlock()}
placeholder={T.passwordPlaceholder}
className="w-full rounded-lg bg-slate-800 border border-slate-700 px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-teal-500/40"
className="w-full rounded-lg bg-surface border border-border px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-accent/40"
/>
{error && <div className="text-sm text-red-400 mt-2">{error}</div>}
<button
onClick={unlock}
disabled={!password || unlocking}
className="mt-4 w-full rounded-lg bg-teal-600 hover:bg-teal-500 disabled:opacity-50 py-2 text-sm font-medium transition"
className="mt-4 w-full rounded-lg bg-accent text-accent-fg hover:opacity-90 disabled:opacity-50 py-2 text-sm font-medium transition"
>
{T.watch}
</button>
@ -171,7 +171,7 @@ export default function WatchPage() {
<div>
{/* Shrink-wrap the player to the video so a vertical/short clip renders as a narrow
player instead of a wide box with black bars; a landscape clip fills the width. */}
<div className="rounded-xl overflow-hidden bg-black border border-slate-800 w-fit max-w-full mx-auto">
<div className="rounded-xl overflow-hidden bg-black border border-border w-fit max-w-full mx-auto">
<video
controls
playsInline
@ -189,18 +189,18 @@ export default function WatchPage() {
href={meta.uploader_url}
target="_blank"
rel="noopener noreferrer"
className="text-sm text-slate-400 hover:text-teal-400 hover:underline"
className="text-sm text-muted hover:text-accent hover:underline"
>
{meta.uploader}
</a>
) : (
<div className="text-sm text-slate-400">{meta.uploader}</div>
<div className="text-sm text-muted">{meta.uploader}</div>
))}
</div>
{meta.allow_download && (
<a
href={meta.file_url}
className="shrink-0 inline-flex items-center gap-1.5 rounded-lg bg-slate-800 hover:bg-slate-700 px-3 py-2 text-sm font-medium transition"
className="shrink-0 inline-flex items-center gap-1.5 rounded-lg bg-surface hover:bg-card px-3 py-2 text-sm font-medium transition"
>
<Download className="w-4 h-4" /> {T.download}
</a>
@ -217,7 +217,7 @@ export default function WatchPage() {
target="_blank"
rel="noopener noreferrer"
title={url}
className="inline-flex items-center gap-1.5 text-sm text-slate-400 hover:text-teal-400 hover:underline min-w-0"
className="inline-flex items-center gap-1.5 text-sm text-muted hover:text-accent hover:underline min-w-0"
>
<Link2 className="w-3.5 h-3.5 shrink-0" />
<span className="truncate">{displayUrl(url)}</span>
@ -228,7 +228,7 @@ export default function WatchPage() {
</div>
)}
</div>
<div className="text-xs text-slate-600 py-4">{T.brand}</div>
<div className="text-xs text-muted py-4">{T.brand}</div>
</div>
);
}