Budget & Ausgaben {aktuellesJahr}
-
@@ -88,7 +89,7 @@ export function BudgetTracker({ leistung }: { leistung: Leistung }) {
ausgabeLoeschen.mutate(a.id)}
- className="shrink-0 text-red-600 underline"
+ className={`shrink-0 ${buttonStyles.smallDanger}`}
>
Löschen
@@ -133,7 +134,7 @@ export function BudgetTracker({ leistung }: { leistung: Leistung }) {
{ onSuccess: () => setNeueAusgabe((f) => ({ ...f, betrag: "", beschreibung: "" })) }
)
}
- className="rounded bg-slate-800 px-2 py-1 text-white disabled:opacity-50"
+ className={buttonStyles.smallPrimary}
>
+ Erfassen
diff --git a/pflegepilot_v3/frontend/src/lib/theme.ts b/pflegepilot_v3/frontend/src/lib/theme.ts
index 90b0b3f..7cbdf62 100644
--- a/pflegepilot_v3/frontend/src/lib/theme.ts
+++ b/pflegepilot_v3/frontend/src/lib/theme.ts
@@ -109,3 +109,41 @@ export function accentForKey(key: string): AccentName {
}
return ACCENT_NAMES[hash % ACCENT_NAMES.length];
}
+
+/**
+ * Wiederverwendbare Button-Stile fuer Aktions-Ausloeser. Ersetzt das
+ * verbreitete "nur unterstrichener Text" Muster (z. B. "Loeschen"/
+ * "Bearbeiten"/"PDF" als reiner Link) - wirkte optisch nach Entwicklung statt
+ * fertigem Produkt und war auf Touch-Geraeten schwer treffsicher zu tippen.
+ * Vier Farb-Varianten (neutral/primary/danger/success), je in normaler und
+ * kleiner (fuer dichte Listen/Tabellenzeilen) Groesse, plus eine Pill-Form
+ * fuer "+"-Aktionen ("+ Widerspruch", "+ eigene Leistung erfassen", ...).
+ * Alle Groessen liegen bei py-1.5+ fuer ausreichend grosse Tippflaechen.
+ */
+export const buttonStyles = {
+ secondary:
+ "inline-flex items-center justify-center gap-1 rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-700 transition hover:bg-slate-50 disabled:cursor-not-allowed disabled:opacity-50",
+ primary:
+ "inline-flex items-center justify-center gap-1 rounded-lg bg-slate-800 px-3 py-2 text-sm font-medium text-white transition hover:bg-slate-700 disabled:cursor-not-allowed disabled:opacity-50",
+ danger:
+ "inline-flex items-center justify-center gap-1 rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm font-medium text-red-700 transition hover:bg-red-100 disabled:cursor-not-allowed disabled:opacity-50",
+ success:
+ "inline-flex items-center justify-center gap-1 rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-2 text-sm font-medium text-emerald-700 transition hover:bg-emerald-100 disabled:cursor-not-allowed disabled:opacity-50",
+ small:
+ "inline-flex items-center justify-center gap-1 rounded-lg border border-slate-200 bg-white px-2.5 py-1.5 text-xs font-medium text-slate-600 transition hover:bg-slate-50 disabled:cursor-not-allowed disabled:opacity-50",
+ smallDanger:
+ "inline-flex items-center justify-center gap-1 rounded-lg border border-red-200 bg-red-50 px-2.5 py-1.5 text-xs font-medium text-red-700 transition hover:bg-red-100 disabled:cursor-not-allowed disabled:opacity-50",
+ smallSuccess:
+ "inline-flex items-center justify-center gap-1 rounded-lg border border-emerald-200 bg-emerald-50 px-2.5 py-1.5 text-xs font-medium text-emerald-700 transition hover:bg-emerald-100 disabled:cursor-not-allowed disabled:opacity-50",
+ smallPrimary:
+ "inline-flex items-center justify-center gap-1 rounded-lg bg-slate-800 px-2.5 py-1.5 text-xs font-medium text-white transition hover:bg-slate-700 disabled:cursor-not-allowed disabled:opacity-50",
+ add:
+ "inline-flex items-center justify-center gap-1 rounded-full border border-slate-300 bg-white px-3 py-1.5 text-xs font-medium text-slate-700 transition hover:border-slate-400 hover:bg-slate-50 disabled:cursor-not-allowed disabled:opacity-50",
+ /** Nativer
verliert unter Tailwind-Preflight seine
+ * Browser-Standard-Chrome und wirkt dadurch wie reiner Fliesstext statt
+ * eines Buttons - das ::file-selector-button-Pseudoelement wird ueber
+ * Tailwinds file:-Variante gezielt nachgestylt, damit es wie die uebrigen
+ * primary-Buttons der App aussieht. */
+ fileInput:
+ "block w-full text-sm text-slate-600 file:mr-3 file:cursor-pointer file:rounded-lg file:border-0 file:bg-slate-800 file:px-3 file:py-2 file:text-sm file:font-medium file:text-white file:transition hover:file:bg-slate-700 file:disabled:cursor-not-allowed file:disabled:opacity-50",
+} as const;