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/SquadComparison.tsx
+12 -9
View File
@@ -1,17 +1,20 @@
import { For } from "solid-js";
import { Card } from "./Card";
export function SquadComparison(props: { homeTeam: any; awayTeam: any }) {
const homeMembers = () => props.homeRosters || [];
const awayMembers = () => props.awayRosters || [];
return (
<div class="bg-gray-800/50 rounded-2xl p-4 border border-gray-800 space-y-4 overflow-hidden">
<h3 class="text-xs font-bold uppercase tracking-wider text-gray-400 text-center">
<Card variant="section" class="p-4 space-y-4 overflow-hidden">
<h3 class="text-xs font-bold uppercase tracking-wider text-ink-muted text-center">
Kaderübersicht
</h3>
<div class="space-y-4">
{/* HEIM TEAM ROW */}
<div class="space-y-2">
<div class="text-[10px] uppercase font-bold text-emerald-400 px-1">
<div class="text-[10px] uppercase font-bold text-accent px-1">
{props.homeTeam.name}
</div>
{/* Horizontale Scrollbar */}
@@ -19,14 +22,14 @@ export function SquadComparison(props: { homeTeam: any; awayTeam: any }) {
<For each={homeMembers()}>
{(player) => (
<div class="flex flex-col items-center justify-center text-center w-14 flex-shrink-0 snap-start">
<div class="size-10 rounded-full border border-emerald-500/20 p-0.5 bg-gray-900 mb-1">
<div class="size-10 rounded-full border border-accent/20 p-0.5 bg-app mb-1">
<img
src={player.imageUrl || "/fallback-avatar.svg"}
class="size-full rounded-full object-cover"
alt=""
/>
</div>
<span class="text-[10px] text-gray-300 font-medium truncate w-full">
<span class="text-[10px] text-ink font-medium truncate w-full">
{player.name}
{/* Nur Nachname spart Platz */}
</span>
@@ -38,21 +41,21 @@ export function SquadComparison(props: { homeTeam: any; awayTeam: any }) {
{/* AUSWÄRTS TEAM ROW */}
<div class="space-y-2">
<div class="text-[10px] uppercase font-bold text-gray-400 px-1">
<div class="text-[10px] uppercase font-bold text-ink-muted px-1">
{props.awayTeam.name}
</div>
<div class="flex gap-3 overflow-x-auto pb-2 scrollbar-none snap-x">
<For each={awayMembers()}>
{(player) => (
<div class="flex flex-col items-center justify-center text-center w-14 flex-shrink-0 snap-start">
<div class="size-10 rounded-full border border-gray-700 p-0.5 bg-gray-900 mb-1">
<div class="size-10 rounded-full border border-line p-0.5 bg-app mb-1">
<img
src={player.imageUrl || "/fallback-avatar.svg"}
class="size-full rounded-full object-cover"
alt=""
/>
</div>
<span class="text-[10px] text-gray-300 font-medium truncate w-full">
<span class="text-[10px] text-ink font-medium truncate w-full">
{player.name.split(" ")[1] || player.name}
</span>
</div>
@@ -61,6 +64,6 @@ export function SquadComparison(props: { homeTeam: any; awayTeam: any }) {
</div>
</div>
</div>
</div>
</Card>
);
}