Skip to content

Commit 0397b7f

Browse files
ViktorSvertokaViktorSvertoka
committed
feat(ui): add theme-aware button styles with accent colors
1 parent eb4dc6a commit 0397b7f

2 files changed

Lines changed: 67 additions & 52 deletions

File tree

‎frontend/app/globals.css‎

Lines changed: 24 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -7,19 +7,7 @@
77
--color-foreground: var(--foreground);
88
--font-sans: var(--font-geist-sans);
99
--font-mono: var(--font-geist-mono);
10-
--color-sidebar-ring: var(--sidebar-ring);
11-
--color-sidebar-border: var(--sidebar-border);
12-
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
13-
--color-sidebar-accent: var(--sidebar-accent);
14-
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
15-
--color-sidebar-primary: var(--sidebar-primary);
16-
--color-sidebar-foreground: var(--sidebar-foreground);
17-
--color-sidebar: var(--sidebar);
18-
--color-chart-5: var(--chart-5);
19-
--color-chart-4: var(--chart-4);
20-
--color-chart-3: var(--chart-3);
21-
--color-chart-2: var(--chart-2);
22-
--color-chart-1: var(--chart-1);
10+
2311
--color-ring: var(--ring);
2412
--color-input: var(--input);
2513
--color-border: var(--border);
@@ -44,7 +32,7 @@
4432
--animate-pulse-soft: pulse-soft 2.8s ease-in-out infinite;
4533
}
4634

47-
:root {
35+
@theme {
4836
--radius: 0.625rem;
4937
--background: oklch(1 0 0);
5038
--foreground: oklch(0.145 0 0);
@@ -77,6 +65,9 @@
7765
--sidebar-accent-foreground: oklch(0.205 0 0);
7866
--sidebar-border: oklch(0.922 0 0);
7967
--sidebar-ring: oklch(0.708 0 0);
68+
69+
--accent-primary: #1e5eff;
70+
--accent-hover: #174ad6;
8071
}
8172

8273
.dark {
@@ -111,15 +102,34 @@
111102
--sidebar-accent-foreground: oklch(0.985 0 0);
112103
--sidebar-border: oklch(1 0 0 / 10%);
113104
--sidebar-ring: oklch(0.556 0 0);
105+
106+
--accent-primary: #ff2d55;
107+
--accent-hover: #e0264b;
114108
}
115109

116110
@layer base {
117111
* {
118112
@apply border-border outline-ring/50;
119113
}
114+
120115
body {
121116
@apply bg-background text-foreground;
122117
}
118+
119+
button,
120+
[role='button'],
121+
a {
122+
cursor: pointer;
123+
}
124+
}
125+
126+
@layer components {
127+
.btn {
128+
background-color: var(--accent-primary);
129+
}
130+
.btn:hover {
131+
background-color: var(--accent-hover);
132+
}
123133
}
124134

125135
.no-select {

‎frontend/components/quiz/QuizCard.tsx‎

Lines changed: 43 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -24,62 +24,67 @@ interface QuizCardProps {
2424

2525
export function QuizCard({ quiz, userProgress }: QuizCardProps) {
2626
const t = useTranslations('quiz.card');
27-
const percentage = userProgress && userProgress.totalQuestions > 0
28-
? Math.round((userProgress.bestScore / userProgress.totalQuestions) * 100)
29-
: 0;
27+
const percentage =
28+
userProgress && userProgress.totalQuestions > 0
29+
? Math.round((userProgress.bestScore / userProgress.totalQuestions) * 100)
30+
: 0;
3031

3132
return (
3233
<div className="flex flex-col rounded-xl border border-gray-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-5 shadow-sm hover:shadow-md transition-shadow">
3334
<div className="flex-grow">
34-
<div className="flex gap-2 mb-3">
35-
<Badge variant="blue">{quiz.categoryName ?? t('uncategorized')}</Badge>
36-
{userProgress && (
37-
<Badge variant="success">{t('completed')}</Badge>
35+
<div className="flex gap-2 mb-3">
36+
<Badge variant="blue">
37+
{quiz.categoryName ?? t('uncategorized')}
38+
</Badge>
39+
{userProgress && <Badge variant="success">{t('completed')}</Badge>}
40+
</div>
41+
<h2 className="text-xl font-semibold mb-2">
42+
{quiz.title ?? quiz.slug}
43+
</h2>
44+
{quiz.description && (
45+
<p className="line-clamp-2 text-sm text-gray-600 dark:text-gray-400 mb-3">
46+
{quiz.description}
47+
</p>
3848
)}
39-
</div>
40-
<h2 className="text-xl font-semibold mb-2">
41-
{quiz.title ?? quiz.slug}
42-
</h2>
43-
{quiz.description && (
44-
<p className="line-clamp-2 text-sm text-gray-600 dark:text-gray-400 mb-3">
45-
{quiz.description}
46-
</p>
47-
)}
4849
<div className="flex gap-3 text-xs text-gray-500 mb-3">
4950
<span className="flex items-center gap-1">
5051
<FileText className="w-3.5 h-3.5 text-blue-500 dark:text-blue-400" />
5152
{quiz.questionsCount} {t('questions')}
5253
</span>
5354
<span className="flex items-center gap-1">
5455
<Clock className="w-3.5 h-3.5 text-blue-500 dark:text-blue-400" />
55-
{Math.floor((quiz.timeLimitSeconds ?? quiz.questionsCount * 30) / 60)} {t('min')}
56+
{Math.floor(
57+
(quiz.timeLimitSeconds ?? quiz.questionsCount * 30) / 60
58+
)}{' '}
59+
{t('min')}
5660
</span>
5761
</div>
5862
</div>
5963
{userProgress && (
60-
<div className="mb-6">
61-
<div className="flex justify-between text-xs mb-1.5">
62-
<span className="text-gray-600 dark:text-gray-400">
63-
{t('best')} {userProgress.bestScore}/{userProgress.totalQuestions}
64-
</span>
65-
<span className="text-gray-500">
66-
{userProgress.attemptsCount} {userProgress.attemptsCount === 1 ? t('attempt') : t('attempts')}
67-
</span>
68-
<span className="font-medium text-gray-900 dark:text-gray-100">
69-
{percentage}%
70-
</span>
71-
</div>
72-
<div className="h-1.5 bg-gray-200 dark:bg-neutral-800 rounded-full overflow-hidden">
73-
<div
74-
className="h-full bg-blue-600 rounded-full transition-all"
75-
style={{ width: `${percentage}%` }}
76-
/>
77-
</div>
78-
</div>
79-
)}
64+
<div className="mb-6">
65+
<div className="flex justify-between text-xs mb-1.5">
66+
<span className="text-gray-600 dark:text-gray-400">
67+
{t('best')} {userProgress.bestScore}/{userProgress.totalQuestions}
68+
</span>
69+
<span className="text-gray-500">
70+
{userProgress.attemptsCount}{' '}
71+
{userProgress.attemptsCount === 1 ? t('attempt') : t('attempts')}
72+
</span>
73+
<span className="font-medium text-gray-900 dark:text-gray-100">
74+
{percentage}%
75+
</span>
76+
</div>
77+
<div className="h-1.5 bg-gray-200 dark:bg-neutral-800 rounded-full overflow-hidden">
78+
<div
79+
className="h-full bg-blue-600 rounded-full transition-all"
80+
style={{ width: `${percentage}%` }}
81+
/>
82+
</div>
83+
</div>
84+
)}
8085
<Link
8186
href={`/quiz/${quiz.slug}`}
82-
className="block w-full text-center rounded-lg bg-blue-600 text-white px-4 py-2.5 text-sm font-medium hover:bg-blue-500 transition-colors"
87+
className="btn block w-full text-center rounded-lg text-white px-4 py-2.5 text-sm font-medium transition-colors"
8388
>
8489
{userProgress ? t('retake') : t('start')}
8590
</Link>

0 commit comments

Comments
 (0)