(SP: 3) [UI] QuizCard UX refactor with category accent colors + quiz flow styling

[LesiaUKR]

Week 6

Goal

Refactor QuizCard UX to match TopicCard design (from about page) with category-specific accent colors applied consistently across the entire quiz flow.

Actual Scope

1. QuizCard — category accent styling + hover effects

• components/quiz/QuizCard.tsx
• Added categorySlug prop to get accent color from categoryTabStyles
• Applied accent color to:
  • Badge background and border
  • Icons (FileText, Clock)
  • Progress bar fill
  • "Start Quiz" button (border + tint background)
  • Card border on hover
  • Glow effect on hover
• Hover animation: 4px lift + glow shadow

2. QuizzesSection — pass categorySlug to QuizCard

• components/quiz/QuizzesSection.tsx
• Added categorySlug: quiz.categorySlug ?? category.slug to QuizCard props

3. QuizContainer — Start Quiz button styling

• components/quiz/QuizContainer.tsx
• Get accentColor from categoryTabStyles based on categorySlug
• Styled rules page "Start Quiz" button:
  • Border: ${accentColor}50 (semi-transparent)
  • Background: ${accentColor}15 (tinted)
  • Text: accentColor
  • Glow span on hover
• Pass accentColor to QuizQuestion component

4. QuizQuestion — Next button styling

• components/quiz/QuizQuestion.tsx
• Added accentColor prop
• Styled "Next" button same as Start Quiz (border + tint + glow)

5. QuizProgress — pulsing border matches state

• components/quiz/QuizProgress.tsx
• Changed pulsing border to match answer state:
  • Blue: unanswered (default)
  • Green: correct answer
  • Red: incorrect answer

6. QuizResult — disqualified message

• components/quiz/QuizResult.tsx
• Added logic for integrity violations (> 3 violations):
  • Shows "disqualified" message instead of "no improvement"
  • Integrity < 70 means results not saved to leaderboard

7. Translations — disqualified message

• messages/en.json, uk.json, pl.json
• Added quiz.result.disqualified translation key

8. Quizzes page — Practice text accent

• app/[locale]/quizzes/page.tsx
• "Practice" text uses text-[var(--accent-primary)]

Files Summary

Action	File
MODIFIED	components/quiz/QuizCard.tsx
MODIFIED	components/quiz/QuizzesSection.tsx
MODIFIED	components/quiz/QuizContainer.tsx
MODIFIED	components/quiz/QuizQuestion.tsx
MODIFIED	components/quiz/QuizProgress.tsx
MODIFIED	components/quiz/QuizResult.tsx
MODIFIED	app/[locale]/quizzes/page.tsx
MODIFIED	messages/en.json
MODIFIED	messages/uk.json
MODIFIED	messages/pl.json

Design Decisions

Button styling pattern (border + tint, not solid fill)

style={{
  borderColor: `${accentColor}50`,
  backgroundColor: `${accentColor}15`,
  color: accentColor,
}}

• Consistent with tab button design
• Less aggressive than solid fill
• Glow effect on hover for interactivity

Category colors (from categoryTabStyles)

• Git: orange (#F97316)
• Vue: green (#42B883)
• React: cyan (#61DAFB)
• Angular: red (#DD0031)
• Node: green (#339933)
• etc.

QuizProgress pulse colors

• Blue for current unanswered question
• Green when user answered correctly
• Red when user answered incorrectly
• Provides immediate visual feedback

Disqualified logic

{pointsAwarded > 0
  ? t('pointsAwarded', { points: pointsAwarded })
  : violationsCount > 3
    ? t('disqualified')
    : t('noPointsAwarded')}

• 3+ violations = disqualified (integrity < 70)
• Clearer messaging vs generic "no improvement"

Result

• Unified visual language across quiz flow
• Category identity through consistent accent colors
• Better user feedback (progress states, disqualification)
• Professional hover interactions (glow, lift)