feat: polish ui and ux on settings page

[alexdln]

Changes:

• Added focus to radio fieldsets, since it was completely unclear where the cursor was at that moment
• Changed the accent-color color of the "no color" option, as it was following the current accent-color, which looked strange
• Added a focus effect to the "toggle" element for the toggle elements, as it looked bad across the entire page and the rounding didn't fit the toggle element
• Added padding to the top and bottom of the toggle elements, as the height was only 24px
• Changed settings markup, as managing indents within child component through its parent is bad practice
• Added an invisible click zone to the back button and adjusted the text on mobile to be sr-only for the A11.
• Added hover to toggle and select buttons.

Closes #1025

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Feb 5, 2026 4:19pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Feb 5, 2026 4:19pm
npmx-lunaria	Ignored		Feb 5, 2026 4:19pm

[coderabbitai]

📝 Walkthrough

Walkthrough

This pull request introduces UI/UX refinements to the settings page components. Changes include adding focus-visible styling to fieldset elements in colour and theme picker components, updating the Toggle component with a new class prop and extended styling for focus and hover states, and refactoring the main settings page with improved spacing, accessibility labels, and conditional hover effects across theme and language selectors. The modifications maintain existing functionality whilst enhancing visual hierarchy and keyboard navigation support.

Possibly related PRs

• fix: remove border opacity on toggle #1011: Directly modifies Toggle.client.vue styling for toggle border, checked/unchecked states, and focus/hover classes.
• feat: accessible rings, accent colors & visual changes #904: Updates the same Settings components (AccentColorPicker.vue, BgThemePicker.vue, Toggle.client.vue, settings.vue) to improve focus-visible and accent styling throughout the settings UI.

Suggested reviewers

• danielroe
• 43081j

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description clearly details UI/UX improvements made to the settings page, directly corresponding to changes in the file summaries.
Linked Issues check	✅ Passed	The changes address all stated objectives from issue #1025: focus styling for keyboard navigation, colour adjustments, toggle element improvements, accessibility enhancements, and hover states.
Out of Scope Changes check	✅ Passed	All modifications are within the scope of polishing the settings page UI/UX as specified in issue #1025; no unrelated changes detected.

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

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

[danielroe]

so beautiful 😍