(SP: 7) [UI] Quiz UI polish: tabs styling, category accents, color scheme (#181, #193, #194)

[LesiaUKR]

Closes #181 #193 #194

Week 8

Goal

Unify quiz page visual design with Q&A page styling and implement category-specific accent colors across the entire quiz flow.

Scope

Shared CategoryTabButton (#181)

• Moved QaTabButton -> components/shared/CategoryTabButton.tsx
• Moved qaTabs.ts -> data/categoryStyles.ts
• Applied to both Q&A and Quizzes pages
• Deleted old Q&A-specific files

Color Scheme & UI Polish (#193)

• Button primary variant uses CSS variables (--accent-primary)
• CountdownTimer: traffic light colors (green -> yellow -> red)
• QuizQuestion: border-only feedback (no background fill)
• QuizProgress: semi-transparent backgrounds
• Quizzes page: DynamicGridBackground + padding alignment

QuizCard Category Accents (#194)

• QuizCard: accent color for badge, icons, progress bar, hover glow
• Start Quiz / Next buttons: border + tint styling with glow
• QuizProgress: pulsing border matches answer state
• QuizResult: disqualified message for integrity violations
• Translations: added quiz.result.disqualified key

Expected impact

• Consistent visual language across Q&A and Quiz pages
• Category identity through accent colors (React=cyan, Vue=green, Angular=red, etc.)
• Better UX with traffic light timer and visual feedback states
• Professional hover interactions (glow, lift effects)

Out of scope

• E2E tests
• Quiz flow logic changes
• Database schema changes

Summary by CodeRabbit

• New Features

  • Category-based color theming across quizzes, tabs and buttons; decorative hover accents.
  • New disqualification message shown when violations threshold is met (localized).

• Bug Fixes

  • Timer color updated from blue to green when >30% time remains.

• Style

  • Refined quiz progress visuals with semi-transparent backgrounds.
  • Improved answer feedback borders and themed button/card styling.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[netlify]

✅ Deploy Preview for develop-devlovers ready!

Name	Link
🔨 Latest commit	9345289
🔍 Latest deploy log	https://app.netlify.com/projects/develop-devlovers/deploys/6974f66af34eaf00089a0e15
😎 Deploy Preview	https://deploy-preview-195--develop-devlovers.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR refactors Q&A and quiz tab components into shared CategoryTabButton and categoryTabStyles, propagates per-category accentColor across quiz UI (cards, container, question, progress, timer), updates several UI stylings and navigation, and adds a disqualified quiz result message and translations.

Changes

Cohort / File(s)	Summary
Configuration .gitignore, frontend/.gitignore	Replaced ignored path frontend/docs/ with frontend/_dev-notes/.
Shared Tab Component & Styles frontend/components/shared/CategoryTabButton.tsx, frontend/data/categoryStyles.ts	Renamed and generalized QaTabButton → CategoryTabButton and qaTabStyles/QaTabStyle → categoryTabStyles/CategoryTabStyle for reuse.
Q&A Component Updates frontend/components/q&a/QaSection.tsx, frontend/components/q&a/AccordionList.tsx	Switched imports/usages to CategoryTabButton and categoryTabStyles.
Quiz Page Layout frontend/app/[locale]/quizzes/page.tsx, frontend/components/quiz/QuizzesSection.tsx	Wrapped quizzes page with DynamicGridBackground, expanded container width, replaced TabsTrigger with CategoryTabButton, and pass categorySlug into quiz payloads.
QuizCard & Theming frontend/components/quiz/QuizCard.tsx	Added categorySlug to quiz prop, compute accentColor from categoryTabStyles, applied themed CSS variables, glow and hover visuals, and colorized icons/progress.
Quiz Flow & Accent Propagation frontend/components/quiz/QuizContainer.tsx, frontend/components/quiz/QuizQuestion.tsx	Propagated accentColor prop to QuizQuestion, restyled start/next controls to use accentColor, and updated back-navigation to /[locale]/q&a.
Visual Refinements frontend/components/quiz/CountdownTimer.tsx, frontend/components/quiz/QuizProgress.tsx, frontend/components/quiz/QuizResult.tsx	Timer >30% color changed blue→green; progress items use translucent backgrounds and adjusted borders; QuizResult adds disqualified branch when violationsCount >= 3.
UI Button Theming frontend/components/ui/button.tsx	Primary button variant switched from fixed blue classes to CSS variable-based theming (--accent-primary, --accent-hover).
Translations frontend/messages/en.json, frontend/messages/pl.json, frontend/messages/uk.json	Added quiz.result.disqualified translation entries.

Sequence Diagram(s)

(omitted — changes are UI/theming and do not introduce new multi-actor control flow warranting a sequence diagram)

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

Possibly related issues

• (SP: 3) [UI] QuizCard UX refactor with category accent colors + quiz flow styling #194 — Overlaps on quiz UI and category-driven accent wiring (QuizCard, QuizzesSection, QuizContainer, QuizQuestion, QuizProgress, QuizResult, translations).
• (SP: 2) [UI] Standardize quiz colors with accent variables + UI polish #193 — Related refactor touching quiz UI theming and timer threshold/color adjustments.

Possibly related PRs

• (SP: 2) [Frontend] Q&A UI refresh #169 — Overlapping UI changes: DynamicGridBackground, tab-button components, and per-category style propagation.
• refactor: align leaderboard UI with brand style (fixed bg, css vars, … #182 — Also wraps pages with DynamicGridBackground; related background refactor.
• (SP: 1) [Frontend] Fix UI Q&A spacing, accordion borders, and button backgrounds #171 — Prior refactor of QA/category tab artifacts that this PR generalizes/renames.

Suggested labels

UI, refactor

Suggested reviewers

• AM1007
• ViktorSvertoka

Poem

🐇 I hopped through tabs and colors bright,

Shared buttons dancing in the light,
Cards now glow with accent cheer,
Timers turn green when time is near,
A rabbit cheers: reuse is here! 🎉

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main changes: Quiz UI polish with tabs styling, category accents, and color scheme updates, referencing all three closed issues.
Linked Issues check	✅ Passed	The pull request implements all core requirements from #181: created shared CategoryTabButton component, moved qaTabs.ts to categoryStyles.ts with proper renames, updated Q&A and Quiz pages to use shared component, expanded container to max-w-7xl, and removed obsolete files.
Out of Scope Changes check	✅ Passed	All changes align with stated objectives. Updates to color schemes (CountdownTimer, QuizProgress, QuizQuestion), theme variables in button.tsx, category accent colors in QuizCard, and disqualification messaging all support the UI polish goals without introducing logic changes or database modifications.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

frontend/components/quiz/QuizQuestion.tsx (1)

19-31: Guard against undefined accentColor.
If this component is reused without accentColor, the inline styles become invalid (e.g., undefined50). Consider a local default.

🛠️ Suggested fix

-export function QuizQuestion({
+export function QuizQuestion({
   question,
   status,
   selectedAnswerId,
   isCorrect,
   onAnswer,
   onNext,
   isLoading = false,
-  accentColor,
+  accentColor = '#3B82F6',
 }: QuizQuestionProps) {

Also applies to: 118-126, 129-132

🤖 Fix all issues with AI agents

In `@frontend/components/quiz/QuizResult.tsx`:
- Around line 142-146: The points/qualification conditional in QuizResult.tsx is
inconsistent: the ternary uses violationsCount > 3 while the warning banner and
rules use a 3+ threshold; update the condition that decides when to show
t('disqualified') (the branch using pointsAwarded and violationsCount) to use
violationsCount >= 3 so it matches the banner/rules and t('disqualified') logic
(ensure the symbols pointsAwarded, violationsCount and the disqualified
translation branch are updated).

🧹 Nitpick comments (3)

.gitignore (1)

67-67: Pattern is redundant but harmless.

The pattern frontend/_dev-notes/ in the root .gitignore is redundant with _dev-notes/ in frontend/.gitignore, since the frontend-specific ignore file already handles this pattern. While this redundancy doesn't cause issues, it's worth noting that maintaining the pattern in only one location (frontend/.gitignore) would be sufficient.

Note: Please ensure verification of the frontend/docs/ directory status as mentioned in the frontend/.gitignore review comment, since this change shifts ignored development documentation from docs/ to _dev-notes/.

frontend/app/[locale]/quizzes/page.tsx (1)

25-33: Consider applying DynamicGridBackground to the empty state as well.
The empty state skips the new background wrapper, so the page styling changes when there are no quizzes. If the intent is visual parity, wrap this branch too.

♻️ Possible adjustment

   if (!quizzes.length) {
     return (
-      <div className="mx-auto max-w-7xl py-12 px-4 sm:px-6 lg:px-8">
-        <h1 className="text-3xl font-bold mb-4">{t('title')}</h1>
-        <p className="text-gray-600 dark:text-gray-400">
-          {t('noQuizzes')}
-        </p>
-      </div>
+      <DynamicGridBackground className="min-h-screen bg-gray-50 transition-colors duration-300 dark:bg-transparent py-10">
+        <div className="relative z-10 mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <h1 className="text-3xl font-bold mb-4">{t('title')}</h1>
+          <p className="text-gray-600 dark:text-gray-400">
+            {t('noQuizzes')}
+          </p>
+        </div>
+      </DynamicGridBackground>
     );
   }

frontend/components/quiz/QuizzesSection.tsx (1)

89-109: Optional: center the new max-w-5xl wrapper if intended.
Right now the grid will be left-aligned; add mx-auto if you want it centered. The categorySlug pass-through looks correct.

♻️ Suggested tweak

-              {categoryQuizzes.length > 0 ? (
-                <div className="max-w-5xl">
+              {categoryQuizzes.length > 0 ? (
+                <div className="max-w-5xl mx-auto">