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,
basepath: "/agw",
defaultErrorComponent: ({ error }) => (
<div style={{ padding: 20, color: "red" }}>
<div className="p-5 text-destructive">
<h2>Error</h2>
<pre>{error instanceof Error ? error.message : String(error)}</pre>
</div>

View File

@@ -78,7 +78,7 @@ export function UpcomingVotes() {
{item.summary}
</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
</span>
</Link>

View File

@@ -51,7 +51,7 @@ export function LegislationDetail({ legislationId }: LegislationDetailProps) {
{legislation.title}
</h1>
{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}
</span>
)}
@@ -78,7 +78,7 @@ export function LegislationDetail({ legislationId }: LegislationDetailProps) {
<button
type="button"
onClick={() => setShowFullText(!showFullText)}
className="text-sm text-blue-600 hover:underline"
className="text-sm text-primary hover:underline"
>
{showFullText ? "Volltext ausblenden" : "Volltext anzeigen"}
</button>

View File

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

View File

@@ -7,12 +7,12 @@ interface VoteWidgetProps {
}
const choices: { value: UserVoteChoice; label: string; color: string }[] = [
{ value: "ja", label: "Ja", color: "bg-green-600 hover:bg-green-700" },
{ value: "nein", label: "Nein", color: "bg-red-600 hover:bg-red-700" },
{ value: "ja", label: "Ja", color: "bg-primary hover:bg-primary/90" },
{ value: "nein", label: "Nein", color: "bg-secondary hover:bg-secondary/80" },
{
value: "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 }> =
{
yes: {
bg: "bg-green-100 dark:bg-green-900/40",
text: "text-green-800 dark:text-green-300",
bg: "bg-secondary",
text: "text-secondary-foreground",
label: "Ja",
},
no: {
bg: "bg-red-100 dark:bg-red-900/40",
text: "text-red-800 dark:text-red-300",
bg: "bg-muted",
text: "text-muted-foreground",
label: "Nein",
},
abstain: {

View File

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