kickern/app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add light/dark theme with settings page

Browse Source
This commit is contained in:
arnef
2026-09-10 10:02:43 +02:00
parent 56d9fa680c
commit a593e5c63a
20 changed files with 486 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/frontend/src/components/MatchDetailsSkeleton.tsx
+17 -15
View File
@@ -1,31 +1,32 @@
import { For } from "solid-js";
import { Card } from "./Card";
export function MatchDetailsSkeleton() {
return (
<div class="animate-pulse">
<div class="bg-gradient-to-b from-gray-800 to-gray-850 w-full py-5.5 px-10 border-b border-gray-800">
<div class="bg-gradient-to-b from-surface to-surface2 w-full py-5.5 px-10 border-b border-line">
<div class="flex items-center justify-between gap-2">
<div class="flex-1 flex items-center gap-2 justify-end">
<div
class="h-3 bg-gray-700 rounded w-16 animate-skeleton-loop"
class="h-3 bg-chip rounded w-16 animate-skeleton-loop"
style={{ "--delay": "0ms" }}
/>
<div
class="size-8 bg-gray-700 rounded-full animate-skeleton-loop"
class="size-8 bg-chip rounded-full animate-skeleton-loop"
style={{ "--delay": "50ms" }}
/>
</div>
<div
class="w-16 min-w-16 h-7 bg-gray-950/60 rounded-lg border border-gray-700/50 animate-skeleton-loop"
class="w-16 min-w-16 h-7 bg-elevated/60 rounded-lg border border-line/50 animate-skeleton-loop"
style={{ "--delay": "100ms" }}
/>
<div class="flex-1 flex items-center gap-2 justify-start">
<div
class="size-8 bg-gray-700 rounded-full animate-skeleton-loop"
class="size-8 bg-chip rounded-full animate-skeleton-loop"
style={{ "--delay": "50ms" }}
/>
<div
class="h-3 bg-gray-700 rounded w-16 animate-skeleton-loop"
class="h-3 bg-chip rounded w-16 animate-skeleton-loop"
style={{ "--delay": "0ms" }}
/>
</div>
@@ -35,29 +36,30 @@ export function MatchDetailsSkeleton() {
<div class="p-4 space-y-3">
<For each={[0, 1, 2, 3]}>
{(i) => (
<div
class="bg-gray-800/40 rounded-2xl p-3 border border-gray-800 animate-skeleton-loop"
<Card
variant="section"
class="p-3 animate-skeleton-loop"
style={{ "--delay": `${i * 120}ms` }}
>
<div class="flex justify-center mb-2">
<div class="h-2.5 bg-gray-700 rounded w-14" />
<div class="h-2.5 bg-chip rounded w-14" />
</div>
<div class="flex items-center gap-2">
<div class="flex-1 flex flex-col gap-2">
<div class="flex items-center gap-2 justify-end">
<div class="h-3 bg-gray-700 rounded w-16" />
<div class="size-8 bg-gray-700 rounded-full" />
<div class="h-3 bg-chip rounded w-16" />
<div class="size-8 bg-chip rounded-full" />
</div>
</div>
<div class="w-8 h-6 bg-gray-950/60 rounded border border-gray-700/50 flex-shrink-0" />
<div class="w-8 h-6 bg-elevated/60 rounded border border-line/50 flex-shrink-0" />
<div class="flex-1 flex flex-col gap-2">
<div class="flex items-center gap-2 justify-start">
<div class="size-8 bg-gray-700 rounded-full" />
<div class="h-3 bg-gray-700 rounded w-16" />
<div class="size-8 bg-chip rounded-full" />
<div class="h-3 bg-chip rounded w-16" />
</div>
</div>
</div>
</div>
</Card>
)}
</For>
</div>