Add tests for the Settings page Appearance section and ThemeToggle wiring

[mikewheeleer]

Test the Settings page rendering and theme controls

Description

src/app/settings/page.tsx renders the Appearance section and the ThemeToggle, but the page itself has no test — the heading, the main landmark, the section structure, and the toggle's presence are unverified, so a refactor could quietly drop the only place a user changes theme. This issue adds page-level coverage.

Requirements and context

• Repository scope: Agentpay-Org/Agentpay-frontend only.
• Assert the <h1>Settings</h1>, the Appearance <h2>, and the descriptive copy render.
• Assert the ThemeToggle is present (mock localStorage/matchMedia in setup since jsdom lacks matchMedia).
• Assert the main landmark with id="main-content" exists for the skip link.

Suggested execution

• Fork the repo and create a branch
• git checkout -b test/testing-settings-page
• Implement changes
  • Write comprehensive tests in: create src/app/settings/page.test.tsx.
  • Add documentation: none beyond test descriptions.
  • Validate the page renders without matchMedia errors (stub it in the test).
• Test and commit

Test and commit

• Run npm run lint, npm run typecheck, and npm test.
• Cover edge cases: toggle present, headings present, and main landmark id.
• Include the npm test output and coverage for the page.

Example commit message

test(settings): cover Settings page Appearance section and ThemeToggle

Guidelines

• Minimum 95 percent test coverage for the page.
• Clear, reviewer-focused documentation.
• Timeframe: 96 hours.

Community & contribution rewards

• 💬 Join the AgentPay community on Discord for questions, reviews, and faster merges: https://discord.gg/eXvRKkgcv
• ⭐ This is a GrantFox OSS / Official Campaign task and may be rewarded. When your PR is merged you'll be prompted to rate the project — if this issue and the maintainers helped you ship, we'd be grateful for a 5-star rating. Clear questions in Discord and tidy, well-tested PRs are the fastest path to a merge and a reward.

[gloskull]

Hello, I have 4 years of experience delivering solutions for projects like this, covering backend, frontend, and smart contract development. After carefully reviewing your requirements, I have a clear understanding of the task and am confident in my ability to deliver a clean, efficient, and thoroughly tested solution on time. I prioritize code quality, maintainability, and industry best practices throughout the development process.
My PR will be submitted in under 10hours.

[real-venus]

Hey, I've read through the issue and I understand it.

Could you assign it to me? I can finish this within 24 hrs.

[grantfox-oss]

🦊 GrantFox — @real-venus has been assigned to this issue as part of the Official Campaign campaign!

Next steps:

1. Open a Pull Request referencing this issue (e.g., Closes #150)
2. Your PR will be reviewed by the Agentpay-Org maintainers

Good luck! Track your progress on GrantFox.