(SP: 2) [UI] Standardize quiz colors with accent variables + UI polish

[LesiaUKR]

Week 8

Goal

Align quiz UI colors with design system using CSS accent variables.

Actual Scope (expanded)

Instead of just magenta, implemented full color scheme alignment:

1. Button primary variant — CSS variables

• components/ui/button.tsx
• Changed from hardcoded bg-blue-600 to bg-[var(--accent-primary)]
• Light: blue (#1e5eff), Dark: magenta (#ff2d55)
• Hover uses --accent-hover

2. CountdownTimer — traffic light colors

• components/quiz/CountdownTimer.tsx
• Changed default color from blue to green
• Traffic light system: green (>30%) → yellow (10-30%) → red (≤10%)

3. QuizQuestion — border-only feedback

• components/quiz/QuizQuestion.tsx
• Removed background fills from correct/incorrect answers
• Border-only: border-1 border-green-500 / border-1 border-red-500
• Explanation blocks: border-only (blue for correct, orange for incorrect)

4. QuizProgress — semi-transparent pagination

• components/quiz/QuizProgress.tsx
• Changed from solid to semi-transparent backgrounds: bg-blue-500/20
• Thinner border: border-2 → border
• Matches Q&A pagination style

5. Quizzes page — padding alignment

• app/[locale]/quizzes/page.tsx
• Added px-4 sm:px-6 lg:px-8 to match header padding
• Container no longer wider than header

6. Quizzes page — dynamic grid background

• app/[locale]/quizzes/page.tsx
• Added DynamicGridBackground wrapper (same as Q&A page)
• Quilted grid effect follows mouse cursor on hover
• Blue grid in light mode, pink/magenta in dark mode
• Added min-h-screen for full viewport coverage
• Visual consistency with Q&A browsing experience

Files Summary

Action	File
MODIFIED	components/ui/button.tsx
MODIFIED	components/quiz/CountdownTimer.tsx
MODIFIED	components/quiz/QuizQuestion.tsx
MODIFIED	components/quiz/QuizProgress.tsx
MODIFIED	app/[locale]/quizzes/page.tsx

Architectural Decisions

• CSS variables: Buttons adapt to theme automatically
• Traffic light UX: Intuitive time remaining indication
• Consistent styling: Quiz pagination matches Q&A pagination
• Border-only feedback: Cleaner, less visually overwhelming
• Browsing vs focus states: DynamicGridBackground on list pages (Q&A, Quizzes), clean UI on quiz flow pages (rules, active quiz) — visual transition signals "focus mode"