standardize design to s/w standard - fix non-standard color usage

- replace hardcoded green/red/blue colors with standard shadcn semantic colors
- use text-primary, text-secondary-foreground, text-muted-foreground instead of text-green-600/blue-600
- replace colored backgrounds with bg-secondary, bg-muted, bg-primary/5
- maintain proper contrast and accessibility with semantic color tokens
- ensure consistent black/white theme across all components
This commit is contained in:
2026-03-12 18:02:39 +01:00
parent 18da8d2361
commit 3c0ca0e4e0
8 changed files with 957 additions and 39 deletions

936
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@@ -5,7 +5,7 @@ const router = createRouter({
routeTree, routeTree,
basepath: "/agw", basepath: "/agw",
defaultErrorComponent: ({ error }) => ( defaultErrorComponent: ({ error }) => (
<div style={{ padding: 20, color: "red" }}> <div className="p-5 text-destructive">
<h2>Error</h2> <h2>Error</h2>
<pre>{error instanceof Error ? error.message : String(error)}</pre> <pre>{error instanceof Error ? error.message : String(error)}</pre>
</div> </div>

View File

@@ -78,7 +78,7 @@ export function UpcomingVotes() {
{item.summary} {item.summary}
</p> </p>
)} )}
<span className="inline-block mt-2 text-xs font-medium text-blue-600"> <span className="inline-block mt-2 text-xs font-medium text-primary">
Jetzt abstimmen Jetzt abstimmen
</span> </span>
</Link> </Link>

View File

@@ -51,7 +51,7 @@ export function LegislationDetail({ legislationId }: LegislationDetailProps) {
{legislation.title} {legislation.title}
</h1> </h1>
{legislation.beratungsstand && ( {legislation.beratungsstand && (
<span className="inline-block mt-2 text-xs px-2 py-1 rounded-full bg-blue-100 text-blue-800"> <span className="inline-block mt-2 text-xs px-2 py-1 rounded-full bg-secondary text-secondary-foreground">
{legislation.beratungsstand} {legislation.beratungsstand}
</span> </span>
)} )}
@@ -78,7 +78,7 @@ export function LegislationDetail({ legislationId }: LegislationDetailProps) {
<button <button
type="button" type="button"
onClick={() => setShowFullText(!showFullText)} onClick={() => setShowFullText(!showFullText)}
className="text-sm text-blue-600 hover:underline" className="text-sm text-primary hover:underline"
> >
{showFullText ? "Volltext ausblenden" : "Volltext anzeigen"} {showFullText ? "Volltext ausblenden" : "Volltext anzeigen"}
</button> </button>

View File

@@ -12,13 +12,13 @@ interface VoteResultProps {
} }
const VOTE_COLORS: Record<string, string> = { const VOTE_COLORS: Record<string, string> = {
yes: "bg-green-100 text-green-800", yes: "bg-secondary text-secondary-foreground",
ja: "bg-green-100 text-green-800", ja: "bg-secondary text-secondary-foreground",
no: "bg-red-100 text-red-800", no: "bg-muted text-muted-foreground",
nein: "bg-red-100 text-red-800", nein: "bg-muted text-muted-foreground",
abstain: "bg-gray-100 text-gray-600", abstain: "bg-accent text-accent-foreground",
enthaltung: "bg-gray-100 text-gray-600", enthaltung: "bg-accent text-accent-foreground",
no_show: "bg-gray-50 text-gray-400", no_show: "bg-muted/50 text-muted-foreground/70",
} }
const VOTE_LABELS: Record<string, string> = { const VOTE_LABELS: Record<string, string> = {
@@ -36,8 +36,8 @@ export function VoteResult({ userVote, politicianVotes }: VoteResultProps) {
return ( return (
<div className="space-y-4"> <div className="space-y-4">
<div className="p-3 rounded-lg bg-blue-50 border border-blue-200"> <div className="p-3 rounded-lg bg-primary/5 border border-border">
<p className="text-xs text-blue-600 font-medium">Dein Vote</p> <p className="text-xs text-primary font-medium">Dein Vote</p>
<p className="text-sm font-semibold mt-1">{userLabel}</p> <p className="text-sm font-semibold mt-1">{userLabel}</p>
</div> </div>
@@ -72,7 +72,7 @@ export function VoteResult({ userVote, politicianVotes }: VoteResultProps) {
{label} {label}
</span> </span>
{matches && ( {matches && (
<span className="text-xs text-green-600">= Dein Vote</span> <span className="text-xs text-primary">= Dein Vote</span>
)} )}
</div> </div>
</div> </div>

View File

@@ -7,12 +7,12 @@ interface VoteWidgetProps {
} }
const choices: { value: UserVoteChoice; label: string; color: string }[] = [ const choices: { value: UserVoteChoice; label: string; color: string }[] = [
{ value: "ja", label: "Ja", color: "bg-green-600 hover:bg-green-700" }, { value: "ja", label: "Ja", color: "bg-primary hover:bg-primary/90" },
{ value: "nein", label: "Nein", color: "bg-red-600 hover:bg-red-700" }, { value: "nein", label: "Nein", color: "bg-secondary hover:bg-secondary/80" },
{ {
value: "enthaltung", value: "enthaltung",
label: "Enthaltung", label: "Enthaltung",
color: "bg-gray-500 hover:bg-gray-600", color: "bg-muted hover:bg-muted/80",
}, },
] ]

View File

@@ -13,13 +13,13 @@ import {
const VOTE_COLORS: Record<string, { bg: string; text: string; label: string }> = const VOTE_COLORS: Record<string, { bg: string; text: string; label: string }> =
{ {
yes: { yes: {
bg: "bg-green-100 dark:bg-green-900/40", bg: "bg-secondary",
text: "text-green-800 dark:text-green-300", text: "text-secondary-foreground",
label: "Ja", label: "Ja",
}, },
no: { no: {
bg: "bg-red-100 dark:bg-red-900/40", bg: "bg-muted",
text: "text-red-800 dark:text-red-300", text: "text-muted-foreground",
label: "Nein", label: "Nein",
}, },
abstain: { abstain: {

View File

@@ -287,7 +287,7 @@ export function SettingsPage() {
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
{devHealth && ( {devHealth && (
<span <span
className={`text-xs ${devHealth === "ok" ? "text-green-600" : "text-destructive"}`} className={`text-xs ${devHealth === "ok" ? "text-foreground" : "text-destructive"}`}
> >
{devHealth} {devHealth}
</span> </span>
@@ -314,7 +314,7 @@ export function SettingsPage() {
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
{devPush && ( {devPush && (
<span <span
className={`text-xs ${devPush === "ok" ? "text-green-600" : "text-destructive"}`} className={`text-xs ${devPush === "ok" ? "text-foreground" : "text-destructive"}`}
> >
{devPush} {devPush}
</span> </span>
@@ -344,7 +344,9 @@ export function SettingsPage() {
<span className="text-sm">Alle Themen folgen</span> <span className="text-sm">Alle Themen folgen</span>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
{devTopics && ( {devTopics && (
<span className="text-xs text-green-600">{devTopics}</span> <span className="text-xs text-muted-foreground">
{devTopics}
</span>
)} )}
<Button <Button
size="sm" size="sm"
@@ -368,7 +370,7 @@ export function SettingsPage() {
<span className="text-sm">Allen Themen entfolgen</span> <span className="text-sm">Allen Themen entfolgen</span>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
{devUnfollowTopics && ( {devUnfollowTopics && (
<span className="text-xs text-green-600"> <span className="text-xs text-muted-foreground">
{devUnfollowTopics} {devUnfollowTopics}
</span> </span>
)} )}
@@ -389,7 +391,7 @@ export function SettingsPage() {
<span className="text-sm">Alle Abgeordnete folgen</span> <span className="text-sm">Alle Abgeordnete folgen</span>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
{devPoliticians && ( {devPoliticians && (
<span className="text-xs text-green-600"> <span className="text-xs text-muted-foreground">
{devPoliticians} {devPoliticians}
</span> </span>
)} )}
@@ -421,7 +423,7 @@ export function SettingsPage() {
<span className="text-sm">Allen Abgeordneten entfolgen</span> <span className="text-sm">Allen Abgeordneten entfolgen</span>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
{devUnfollowPoliticians && ( {devUnfollowPoliticians && (
<span className="text-xs text-green-600"> <span className="text-xs text-muted-foreground">
{devUnfollowPoliticians} {devUnfollowPoliticians}
</span> </span>
)} )}
@@ -442,7 +444,9 @@ export function SettingsPage() {
<span className="text-sm">Abgeordnete neu laden</span> <span className="text-sm">Abgeordnete neu laden</span>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
{devReload && ( {devReload && (
<span className="text-xs text-green-600">{devReload}</span> <span className="text-xs text-muted-foreground">
{devReload}
</span>
)} )}
<Button <Button
size="sm" size="sm"