(SP: 3) Refactor Tailwind theme: centralize tokens and remove duplication

[ViktorSvertoka]

Theme-aware button styles

Summary

This PR introduces a centralized, theme-aware button styling system based on design tokens.

Primary button colors are now defined via CSS variables and automatically adapt to light and dark themes without conditional logic in components.

What was added

• Accent color tokens for buttons:
  • --accent-primary
  • --accent-hover
• Dark theme overrides for accent tokens
• Reusable .btn component with hover state
• Centralized cursor behavior for buttons and button-like elements

Summary by CodeRabbit

• Style

  • Updated color theme with new accent-based variables for improved visual consistency
  • Enhanced button styling throughout the interface

• Refactor

  • Reorganized quiz card layout for better visual hierarchy and readability
  • Streamlined progress information display with clearer data presentation

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

[netlify]

✅ Deploy Preview for develop-devlovers ready!

Name	Link
🔨 Latest commit	0397b7f
🔍 Latest deploy log	https://app.netlify.com/projects/develop-devlovers/deploys/6966d9adf9e356000898af10
😎 Deploy Preview	https://deploy-preview-141--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 the CSS theming system by migrating from legacy :root to a @theme wrapper, removing sidebar and chart-specific color variables, and introducing new accent-based tokens. Simultaneously, the QuizCard component is restructured to reorganize layout, display title and description prominently, and adopt the new .btn class for consistency.

Changes

Cohort / File(s)	Summary
CSS Theme Refactoring frontend/app/globals.css	Migrated base theme from :root to @theme wrapper; removed legacy sidebar/chart color variables; introduced new accent tokens (--accent-primary, --accent-hover) for light and dark themes; added global interactive cursor styles; created @layer components with new .btn primitive class
Component Layout Updates frontend/components/quiz/QuizCard.tsx	Reorganized JSX structure with improved nesting of badges and badges containers; repositioned title and description rendering; reformatted time display; refactored progress section with explicit aligned spans; migrated button class from legacy to new .btn class; adjusted spacing and typography classes throughout

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related issues

• (SP: 3) Refactor Tailwind theme: centralize tokens and remove duplication #140: Directly implements Tailwind theme refactoring objectives including migration from :root to @theme, addition of @layer components, introduction of --accent- token set, and creation of .btn primitive.

Possibly related PRs

• feat(quiz): redesign quiz cards with categories and countdown timer #89: Modifies the same QuizCard component and benefits from the new .btn class styling introduced in the CSS refactoring.

Suggested reviewers

• AM1007

Poem

🐰 Hops through tokens bright and new,
From :root to @theme's cleaner view,
Accent colors dance in light and shade,
While buttons styled with .btn parade—
A rabbit cheers for themes remade! 🎨✨

🚥 Pre-merge checks | ✅ 2 | ❌ 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 (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the main change: refactoring the Tailwind theme to centralize tokens and remove duplication, which aligns with the CSS changes removing sidebar/chart variables and introducing accent-based tokens.

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

✨ Finishing touches

• 📝 Generate docstrings

---

🧹 Recent nitpick comments

frontend/app/globals.css (2)

126-133: Consider expanding .btn to include more button styles.

The .btn class only defines background-color, but consumers (like QuizCard.tsx) still need to add inline styles for text-white, rounded-lg, px-4 py-2.5, text-sm font-medium, and transition-colors. This partially undermines the goal of centralizing button styling.

Consider expanding the component to include common button properties:

♻️ Suggested enhancement

 @layer components {
   .btn {
     background-color: var(--accent-primary);
+    color: white;
+    border-radius: 0.5rem;
+    padding: 0.625rem 1rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+    transition: background-color 0.15s ease;
   }
   .btn:hover {
     background-color: var(--accent-hover);
   }
 }

---

119-123: Cursor rule for a elements may be overly broad.

Applying cursor: pointer to all anchor elements is generally redundant since browsers already apply this to links. More importantly, this could affect non-interactive anchor elements (e.g., <a> used as scroll targets without href). Consider scoping this rule to only anchors with an href attribute.

♻️ Suggested refinement

   button,
   [role='button'],
-  a {
+  a[href] {
     cursor: pointer;
   }

frontend/components/quiz/QuizCard.tsx (2)

77-82: Progress bar uses hardcoded color instead of theme tokens.

The progress bar uses bg-blue-600 while the PR introduces theme-aware accent tokens. In dark mode, the button accent changes to pink/red, but the progress bar remains blue, creating visual inconsistency.

Consider using the accent token for consistency:

♻️ Suggested change

           <div
-            className="h-full bg-blue-600 rounded-full transition-all"
+            className="h-full rounded-full transition-all"
-            style={{ width: `${percentage}%` }}
+            style={{ width: `${percentage}%`, backgroundColor: 'var(--accent-primary)' }}
           />

Alternatively, create a utility class in globals.css that applies the accent color.

---

85-90: Button styling relies heavily on inline classes.

The .btn class provides only the background color, requiring these inline utilities: block w-full text-center rounded-lg text-white px-4 py-2.5 text-sm font-medium transition-colors. If centralized styling is the goal, consider either:

1. Expanding .btn in globals.css to include these common properties, or
2. Creating a variant like .btn-primary that bundles these together.

This would reduce duplication if multiple components use similar buttons.

📜 Recent review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between eb4dc6a and 0397b7f.

📒 Files selected for processing (2)

• frontend/app/globals.css
• frontend/components/quiz/QuizCard.tsx

🧰 Additional context used

🧬 Code graph analysis (1)

frontend/components/quiz/QuizCard.tsx (2)

frontend/components/ui/badge.tsx (1)

• Badge (36-36)

frontend/db/seed-quiz-types.ts (2)

• t (42-48)
• p (37-40)

🔇 Additional comments (4)

frontend/app/globals.css (1)

69-70: New accent tokens look good for theme-aware button colors.

The --accent-primary and --accent-hover tokens with distinct values for light (blue) and dark (pink/red) themes enable automatic adaptation without conditional logic in components.

Also applies to: 106-107

frontend/components/quiz/QuizCard.tsx (3)

27-30: Safe percentage calculation.

The guard userProgress.totalQuestions > 0 correctly prevents division by zero, and the fallback to 0 is appropriate.

---

35-48: Clean reorganization of the card header.

The layout restructuring with badges grouped together, title prominently displayed with slug fallback, and optional description with line-clamp-2 is well organized and readable.

---

64-76: Progress stats section is well-structured.

The flex layout with justify-between cleanly separates best score, attempts count (with proper pluralization), and percentage. The conditional rendering based on userProgress is appropriate.

---

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.}