Skip to content

Commit 71250a5

Browse files
Robert27Robert27
committed
refactor: simplify card components by removing gradient backgrounds and unnecessary classes for improved readability
1 parent f9cfff0 commit 71250a5

8 files changed

Lines changed: 86 additions & 123 deletions

File tree

‎frontend/app/(app)/admin/admin-client.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -302,7 +302,7 @@ export function AdminDashboardClient() {
302302
entry={entry}
303303
organizerName={organizerMap.get(entry.organizer_id)}
304304
>
305-
<tr className="border-t cursor-pointer hover:bg-muted/50 transition-colors">
305+
<tr className="border-t cursor-pointer transition-colors">
306306
<td className="py-2 pr-4 align-top whitespace-nowrap">
307307
{format(new Date(entry.at), 'dd.MM.yyyy HH:mm')}
308308
</td>

‎frontend/app/(app)/analytics/page.tsx‎

Lines changed: 19 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -232,46 +232,35 @@ export default function AnalyticsPage() {
232232
{
233233
key: 'total',
234234
title: 'Änderungen gesamt',
235-
value: total,
236-
color: 'var(--chart-2)',
237-
gradient: 'from-blue-500/5 to-cyan-500/5'
235+
value: total
238236
},
239237
{
240238
key: 'create',
241239
title: 'Erstellungen',
242-
value: byType.CREATE || 0,
243-
color: 'var(--chart-3)',
244-
gradient: 'from-green-500/5 to-emerald-500/5'
240+
value: byType.CREATE || 0
245241
},
246242
{
247243
key: 'update',
248244
title: 'Aktualisierungen',
249-
value: byType.UPDATE || 0,
250-
color: 'var(--chart-4)',
251-
gradient: 'from-purple-500/5 to-pink-500/5'
245+
value: byType.UPDATE || 0
252246
},
253247
{
254248
key: 'delete',
255249
title: 'Löschungen',
256-
value: byType.DELETE || 0,
257-
color: 'var(--chart-5)',
258-
gradient: 'from-red-500/5 to-orange-500/5'
250+
value: byType.DELETE || 0
259251
}
260252
].map((kpi) => (
261253
<Card
262254
key={kpi.key}
263-
className="flex flex-col group relative overflow-hidden transition-all duration-300 hover:shadow-lg"
255+
className="flex flex-col transition-all duration-300 hover:shadow-lg"
264256
>
265-
<div
266-
className={`absolute inset-0 bg-gradient-to-br ${kpi.gradient} opacity-0 group-hover:opacity-100 transition-opacity duration-300`}
267-
/>
268-
<CardHeader className="items-center pb-0 relative">
257+
<CardHeader className="items-center pb-0">
269258
<CardTitle className="text-center line-clamp-1">
270259
{kpi.title}
271260
</CardTitle>
272261
<CardDescription>Letzte {days} Tage</CardDescription>
273262
</CardHeader>
274-
<CardContent className="flex-1 pb-0 relative">
263+
<CardContent className="flex-1 pb-0">
275264
<ChartContainer
276265
config={{
277266
value: {
@@ -351,15 +340,14 @@ export default function AnalyticsPage() {
351340

352341
<div className="grid gap-6 lg:grid-cols-2">
353342
{/* Timeline line chart */}
354-
<Card className="group relative overflow-hidden transition-all duration-300 hover:shadow-lg">
355-
<div className="absolute inset-0 bg-gradient-to-br from-blue-500/5 to-purple-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
356-
<CardHeader className="relative">
343+
<Card className="transition-all duration-300 hover:shadow-lg">
344+
<CardHeader>
357345
<CardTitle>Veränderungen im Zeitverlauf</CardTitle>
358346
<CardDescription>
359347
Tägliche Anzahl nach Typ gruppiert
360348
</CardDescription>
361349
</CardHeader>
362-
<CardContent className="relative">
350+
<CardContent>
363351
<ChartContainer
364352
config={{
365353
CREATE: { label: 'Create', color: COLORS.CREATE },
@@ -410,13 +398,12 @@ export default function AnalyticsPage() {
410398
</Card>
411399

412400
{/* Top changed events */}
413-
<Card className="group relative overflow-hidden transition-all duration-300 hover:shadow-lg">
414-
<div className="absolute inset-0 bg-gradient-to-br from-green-500/5 to-yellow-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
415-
<CardHeader className="relative">
401+
<Card className="transition-all duration-300 hover:shadow-lg">
402+
<CardHeader>
416403
<CardTitle>Meist geänderte Events</CardTitle>
417404
<CardDescription>Meiste Aktivität im Zeitraum</CardDescription>
418405
</CardHeader>
419-
<CardContent className="relative">
406+
<CardContent>
420407
<ChartContainer
421408
config={{
422409
count: {
@@ -455,13 +442,12 @@ export default function AnalyticsPage() {
455442

456443
{/* Distribution by type (fancy pie chart) */}
457444
<div className="grid gap-6 lg:grid-cols-3">
458-
<Card className="lg:col-span-1 group relative overflow-hidden transition-all duration-300 hover:shadow-lg">
459-
<div className="absolute inset-0 bg-gradient-to-br from-purple-500/5 to-pink-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
460-
<CardHeader className="relative">
445+
<Card className="lg:col-span-1 transition-all duration-300 hover:shadow-lg">
446+
<CardHeader>
461447
<CardTitle>Verteilung nach Typ</CardTitle>
462448
<CardDescription>Create / Update / Delete</CardDescription>
463449
</CardHeader>
464-
<CardContent className="relative">
450+
<CardContent>
465451
<ChartContainer
466452
config={{
467453
CREATE: { label: 'Create', color: COLORS.CREATE },
@@ -501,13 +487,12 @@ export default function AnalyticsPage() {
501487
</Card>
502488

503489
{/* Audit logs table */}
504-
<Card className="lg:col-span-2 group relative overflow-hidden transition-all duration-300 hover:shadow-lg">
505-
<div className="absolute inset-0 bg-gradient-to-br from-orange-500/5 to-yellow-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
506-
<CardHeader className="relative">
490+
<Card className="lg:col-span-2 transition-all duration-300 hover:shadow-lg">
491+
<CardHeader>
507492
<CardTitle>Audit-Log</CardTitle>
508493
<CardDescription>Einträge im gewählten Zeitraum</CardDescription>
509494
</CardHeader>
510-
<CardContent className="relative">
495+
<CardContent>
511496
<DataTable<AuditRow, unknown>
512497
tableId="analytics-audit"
513498
columns={[

‎frontend/app/(app)/ical/ical-client.tsx‎

Lines changed: 12 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -52,9 +52,8 @@ export function ICalClient({ backendUrl, userId }: ICalClientProps) {
5252

5353
<div className="grid gap-6 md:grid-cols-2">
5454
{/* Global Calendar */}
55-
<Card className="group relative overflow-hidden transition-all duration-300 hover:shadow-lg">
56-
<div className="absolute inset-0 bg-gradient-to-br from-blue-500/5 to-cyan-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
57-
<CardHeader className="relative">
55+
<Card className="transition-all duration-300 hover:shadow-lg">
56+
<CardHeader>
5857
<div className="flex items-center gap-2">
5958
<Globe className="h-5 w-5 " />
6059
<CardTitle>Alle Events</CardTitle>
@@ -64,7 +63,7 @@ export function ICalClient({ backendUrl, userId }: ICalClientProps) {
6463
Vereinen
6564
</CardDescription>
6665
</CardHeader>
67-
<CardContent className="space-y-4 relative">
66+
<CardContent className="space-y-4">
6867
<div className="space-y-2">
6968
<label htmlFor={globalIcalId} className="text-sm font-medium">
7069
iCal URL:
@@ -93,16 +92,15 @@ export function ICalClient({ backendUrl, userId }: ICalClientProps) {
9392

9493
{/* Personal Calendar or Admin Info */}
9594
{userId ? (
96-
<Card className="group relative overflow-hidden transition-all duration-300 hover:shadow-lg">
97-
<div className="absolute inset-0 bg-gradient-to-br from-green-500/5 to-emerald-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
98-
<CardHeader className="relative">
95+
<Card className="transition-all duration-300 hover:shadow-lg">
96+
<CardHeader>
9997
<div className="flex items-center gap-2">
10098
<Calendar className="h-5 w-5" />
10199
<CardTitle>Deine Vereins-Events</CardTitle>
102100
</div>
103101
<CardDescription>Events von deinem Verein</CardDescription>
104102
</CardHeader>
105-
<CardContent className="space-y-4 relative">
103+
<CardContent className="space-y-4">
106104
<div className="space-y-2">
107105
<label
108106
htmlFor={personalIcalId}
@@ -132,15 +130,14 @@ export function ICalClient({ backendUrl, userId }: ICalClientProps) {
132130
</CardContent>
133131
</Card>
134132
) : (
135-
<Card className="group relative overflow-hidden transition-all duration-300 hover:shadow-lg">
136-
<div className="absolute inset-0 bg-gradient-to-br from-purple-500/5 to-pink-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
137-
<CardHeader className="relative">
133+
<Card className="transition-all duration-300 hover:shadow-lg">
134+
<CardHeader>
138135
<div className="flex items-center gap-2">
139136
<Calendar className="h-5 w-5" />
140137
<CardTitle>Vereins-spezifische Kalender</CardTitle>
141138
</div>
142139
</CardHeader>
143-
<CardContent className="space-y-4 relative">
140+
<CardContent className="space-y-4">
144141
<div className="space-y-3 text-sm text-muted-foreground">
145142
<p>
146143
Als Administrator hast du keinen eigenen Vereins-Kalender.
@@ -164,15 +161,14 @@ export function ICalClient({ backendUrl, userId }: ICalClientProps) {
164161
</div>
165162

166163
{/* How to Use Section */}
167-
<Card className="group relative overflow-hidden transition-all duration-300 hover:shadow-lg">
168-
<div className="absolute inset-0 bg-gradient-to-br from-orange-500/5 to-yellow-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
169-
<CardHeader className="relative">
164+
<Card className="transition-all duration-300 hover:shadow-lg">
165+
<CardHeader>
170166
<CardTitle>So fügst du den Kalender hinzu</CardTitle>
171167
<CardDescription>
172168
Schritt-für-Schritt Anleitung für verschiedene Kalender-Apps
173169
</CardDescription>
174170
</CardHeader>
175-
<CardContent className="space-y-6 relative">
171+
<CardContent className="space-y-6">
176172
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
177173
<div className="space-y-2">
178174
<h4 className="font-medium">Google Calendar</h4>

‎frontend/app/(app)/organizers/page.tsx‎

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -98,10 +98,9 @@ export default function OrganizersPage() {
9898
.map((o) => (
9999
<Card
100100
key={o.id}
101-
className="group relative overflow-hidden transition-all duration-300 hover:shadow-lg"
101+
className="transition-all duration-300 hover:shadow-lg"
102102
>
103-
<div className="absolute inset-0 bg-gradient-to-br from-primary/5 to-blue-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
104-
<CardHeader className="relative">
103+
<CardHeader>
105104
<div className="flex flex-row items-start justify-between gap-4">
106105
<div className="flex-1 space-y-2">
107106
<CardTitle className="text-xl flex items-center gap-3">
@@ -123,7 +122,7 @@ export default function OrganizersPage() {
123122
</div>
124123
</div>
125124
</CardHeader>
126-
<CardContent className="space-y-4 relative">
125+
<CardContent className="space-y-4">
127126
{isProfileIncomplete && (
128127
<div className="rounded-lg border border-orange-200 bg-orange-50 p-4 dark:border-amber-800 dark:bg-amber-950">
129128
<div className="flex items-start gap-3">
@@ -163,7 +162,7 @@ export default function OrganizersPage() {
163162
href={o.website_url}
164163
target="_blank"
165164
rel="noreferrer"
166-
className="inline-flex items-center gap-2 px-3 py-2 bg-background border border-border rounded-lg text-sm text-blue-600 hover:bg-blue-50 transition-colors"
165+
className="inline-flex items-center gap-2 px-3 py-2 bg-background border border-border rounded-lg text-sm text-blue-600"
167166
>
168167
<svg
169168
className="h-4 w-4"
@@ -207,7 +206,7 @@ export default function OrganizersPage() {
207206
href={o.instagram_url}
208207
target="_blank"
209208
rel="noreferrer"
210-
className="inline-flex items-center gap-2 px-3 py-2 bg-background border border-border rounded-lg text-sm text-pink-600 hover:bg-pink-50 transition-colors"
209+
className="inline-flex items-center gap-2 px-3 py-2 bg-background border border-border rounded-lg text-sm text-pink-600"
211210
>
212211
<Instagram className="h-4 w-4" />
213212
Instagram
@@ -223,7 +222,7 @@ export default function OrganizersPage() {
223222
href={o.linkedin_url}
224223
target="_blank"
225224
rel="noreferrer"
226-
className="inline-flex items-center gap-2 px-3 py-2 bg-background border border-border rounded-lg text-sm text-sky-600 hover:bg-sky-50 transition-colors"
225+
className="inline-flex items-center gap-2 px-3 py-2 bg-background border border-border rounded-lg text-sm text-sky-600"
227226
>
228227
<Linkedin className="h-4 w-4" />
229228
LinkedIn
@@ -297,11 +296,10 @@ export default function OrganizersPage() {
297296
.map((o) => (
298297
<Card
299298
key={o.id}
300-
className="cursor-pointer group relative overflow-hidden transition-all duration-300 hover:shadow-lg"
299+
className="cursor-pointer transition-all duration-300 hover:shadow-lg"
301300
onClick={() => setViewing(o)}
302301
>
303-
<div className="absolute inset-0 bg-gradient-to-br from-purple-500/5 to-pink-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
304-
<CardHeader className="pb-3 relative">
302+
<CardHeader className="pb-3">
305303
<div className="flex items-center gap-3">
306304
<Avatar className="h-10 w-10 flex-shrink-0">
307305
<AvatarFallback className=" from-primary/90 to-primary bg-gradient-to-br text-primary-foreground font-semibold text-lg">
@@ -315,7 +313,7 @@ export default function OrganizersPage() {
315313
</div>
316314
</div>
317315
</CardHeader>
318-
<CardContent className="space-y-3 relative">
316+
<CardContent className="space-y-3">
319317
<p className="text-sm text-muted-foreground leading-relaxed line-clamp-3">
320318
{o.description_de ||
321319
o.description_en ||

0 commit comments

Comments
 (0)