(SP: 1) [Frontend] Fix UI Q&A spacing, accordion borders, and button backgrounds

[ViktorSvertoka]

Summary

• Reused the dynamic grid background on the Q&A page and aligned layout spacing.
• Built reusable Q&A tab buttons with icons, hover effects, and category styles.
• Synced pagination styling with active category colors and improved mobile layout.
• Smoothed Q&A content transitions and improved accordion readability (solid cards).
• Removed Q&A search and cleaned related logic/types.

Changes

• Added DynamicGridBackground and shared it with About + Q&A.
• Introduced qaTabStyles data and QaTabButton component.
• Updated Q&A pagination visuals, accent colors, and responsive behavior.
• Adjusted Q&A accordion card styling and borders.
• Fixed locale switching for Q&A data fetch.

CLOSES: #170

Summary by CodeRabbit

• Style

  • Enhanced Q&A accordion items with accent-colored borders when hovered, focused, or opened
  • Updated pagination and tab button backgrounds for improved light/dark contrast
  • Switched light-mode code block theme for improved syntax highlighting

• Refactor

  • Adjusted Q&A route layout handling for QA pages
  • Simplified locale resolution to rely on the app’s locale hook

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

[netlify]

✅ Deploy Preview for develop-devlovers ready!

Name	Link
🔨 Latest commit	8fc2036
🔍 Latest deploy log	https://app.netlify.com/projects/develop-devlovers/deploys/696fc1b688c33f0008af0ac3
😎 Deploy Preview	https://deploy-preview-171--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

Applied visual and light-theme tweaks to Q&A UI and simplified locale resolution: added accordion hover/open border styling, per-item accent injection and card styles, updated tab/pagination backgrounds, switched CodeBlock light Prism theme, and replaced params-based locale derivation with useLocale().

Changes

Cohort / File(s)	Summary
Q&A component styling frontend/components/q&a/AccordionList.tsx, frontend/components/q&a/QaTabButton.tsx, frontend/components/q&a/Pagination.tsx	Introduced per-item accent CSS variable and Tailwind card classes for accordion items; added bg-white/90 / dark:bg-neutral-900/80 utilities to tab triggers and pagination buttons. Review visual classes and inline style (--qa-accent) injection.
CSS global rule frontend/app/globals.css	Added .qa-accordion-item rule to apply border color from --qa-accent on hover, focus-within, and when [data-state='open']; fixed a closing brace.
CodeBlock theme frontend/components/q&a/CodeBlock.tsx	Swapped light-mode Prism fallback theme from themes.vsLight to themes.github.
Layout route detection frontend/components/header/MainSwitcher.tsx	Added isQaPath() helper and conditional main wrapper classes to remove horizontal padding for QA routes.
Q&A locale hook frontend/components/q&a/useQaTabs.ts	Replaced params-based locale resolution with direct useLocale() usage (removed useParams and resolveLocale logic).

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related issues

• (SP: 2) [Frontend] Q&A UI refresh #168: Updates the same Q&A UI components (AccordionList, QaTabButton, Pagination); changes align with the Q&A UI refresh described.
• (SP: 1) [Frontend] Fix UI Q&A spacing, accordion borders, and button backgrounds #170: Addresses stated objectives for accordion borders, pagination/tab backgrounds, and locale switching for Q&A data fetch.

Possibly related PRs

• (SP: 2) [Frontend] Refactor Q&A Tabs: Extract Logic & Align Layout #129: Modifies Q&A components and locale logic (useQaTabs, AccordionList) — closely related refactor/logic overlap.
• feat(ui): add syntax highlighted code blocks with theme support and c… #68: Adds/changes CodeBlock usage and Prism theming — directly related to the CodeBlock theme adjustment.
• feat: add translations for blog, QA and quiz #126: Touches frontend/components/q&a/Pagination.tsx — related at the component styling level.

Suggested reviewers

• AM1007

Poem

🐰 I hopped through CSS and found a bright trace,
Borders that shimmer with each folded embrace,
Tabs wear soft whites, code now dressed in GitHub light,
Locale made simple — my hops feel just right,
Cheers to small changes that make the UI race! ✨

🚥 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 PR title clearly and specifically describes the main UI improvements: Q&A spacing fixes, accordion border styling, and button background updates.
Linked Issues check	✅ Passed	The code changes comprehensively address all coding requirements from issue #170: accordion styling with borders, button background updates, pagination styling, locale switching fix, and CSS variable implementation for accent colors.
Out of Scope Changes check	✅ Passed	All changes are directly aligned with issue #170 requirements: CSS styling, component enhancements, and locale handling. No unrelated modifications detected in the provided changeset.

_{✏️ 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

🤖 Fix all issues with AI agents

In `@frontend/components/q`&a/AccordionList.tsx:
- Line 10: The code references React.CSSProperties in AccordionList.tsx (e.g.,
the style type at the location previously using React.CSSProperties) but never
imports React, causing a TS error; fix it by adding a type-only import for
CSSProperties from 'react' (import type { CSSProperties } from 'react') and
replace uses of React.CSSProperties with CSSProperties (e.g., in the variable or
prop type annotations referenced in AccordionList.tsx).

🧹 Nitpick comments (1)

frontend/components/q&a/useQaTabs.ts (1)

26-26: Consider adding runtime validation for the locale cast.

The type assertion as Locale assumes useLocale() always returns a value matching your Locale type. If next-intl is configured with locales that don't match your SUPPORTED_LOCALES, this could cause issues.

🔧 Optional: Add validation to ensure locale compatibility

+import { SUPPORTED_LOCALES } from '@/components/q&a/types';
+
+function isValidLocale(value: string): value is Locale {
+  return SUPPORTED_LOCALES.includes(value as Locale);
+}
+
 export function useQaTabs() {
   const router = useRouter();
   const searchParams = useSearchParams();
-  const localeKey = useLocale() as Locale;
+  const rawLocale = useLocale();
+  const localeKey: Locale = isValidLocale(rawLocale) ? rawLocale : SUPPORTED_LOCALES[0];