[jules] style: Consistent hover/focus states across all buttons

[Devasy]

This commit implements consistent hover and focus-visible states across the primary interactive UI components in the web application.

By applying tailored tailwind classes, it ensures that keyboard navigation provides clear, visible focus rings in both the Neobrutalism and Glassmorphism themes, without interrupting the visual aesthetic for mouse users.

Modified components include:

• Button.tsx: Added focus-visible outlines and offsets handling both themes and dark modes.
• Input.tsx: Updated the password visibility toggle icon to have consistent focus-visible styling instead of generic focus.
• Modal.tsx: Updated the top-right close icon with a proper focus ring.
• Toast.tsx: Updated the dismiss icon to support keyboard focus visibility.

Tracking files (.Jules/todo.md and .Jules/changelog.md) have also been updated to reflect this completion.

---

PR created automatically by Jules for task 2744296281194979898 started by @Devasy23

Summary by CodeRabbit

• Style
  • Improved keyboard navigation experience with enhanced focus state styling across buttons, inputs, modals, and notifications. Keyboard users will now see clearer visual feedback when navigating through interactive elements.

[google-labs-jules]

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.

---

For security, I will only act on instructions from the user who triggered this task.

[netlify]

✅ Deploy Preview for split-but-wiser ready!

Name	Link
🔨 Latest commit	88a3574
🔍 Latest deploy log	https://app.netlify.com/projects/split-but-wiser/deploys/69d806698f849e00086cfd19
😎 Deploy Preview	https://deploy-preview-318--split-but-wiser.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]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: 3cfe908a-f601-4ba5-b353-5e7aba17f89d

📥 Commits

Reviewing files that changed from the base of the PR and between 9404621 and 88a3574.

📒 Files selected for processing (6)

• .Jules/changelog.md
• .Jules/todo.md
• web/components/ui/Button.tsx
• web/components/ui/Input.tsx
• web/components/ui/Modal.tsx
• web/components/ui/Toast.tsx

---

Walkthrough

The PR adds keyboard accessibility improvements by implementing consistent focus-visible styling across multiple UI components (Button, Input, Modal, Toast). Changes include ring styles, ring-offsets, padding adjustments, and documentation updates reflecting the task completion and affected components.

Changes

Cohort / File(s)	Summary
Documentation .Jules/changelog.md, .Jules/todo.md	Added changelog entry documenting consistent focus-visible styling implementation with affected components and Tailwind adjustments. Marked web polish task as complete with expanded scope.
UI Component Focus Styling web/components/ui/Button.tsx, web/components/ui/Input.tsx, web/components/ui/Modal.tsx, web/components/ui/Toast.tsx	Implemented keyboard accessibility improvements by replacing focus: with focus-visible: styling and adding ring, ring-offset, padding, and rounded corner adjustments across all components.

Possibly related PRs

• PR 227: Modifies Toast close button focus-visible styling in the same Toast component that this PR updates.
• PR 234: Updates Input.tsx with validation and ARIA error wiring; shares component modifications with this PR's Input focus styling changes.
• PR 221: Modifies Button component with isLoading prop and Spinner; overlaps with this PR's Button focus-visible styling updates.

Suggested reviewers

• vrajpatelll

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The pull request title clearly and concisely summarizes the main change: adding consistent hover/focus states across button components with focus-visible styling for keyboard accessibility.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

---

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

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
⚠️ Please upload report for BASE (main@9404621). Learn more about missing BASE report.
✅ All tests successful. No failed tests found.

Additional details and impacted files

@@           Coverage Diff           @@
##             main     #318   +/-   ##
=======================================
  Coverage        ?   63.55%           
=======================================
  Files           ?       21           
  Lines           ?     2456           
  Branches        ?      254           
=======================================
  Hits            ?     1561           
  Misses          ?      831           
  Partials        ?       64           

Components	Coverage Δ
Authentication System	71.35% <ø> (?)
Expense Management	70.15% <ø> (?)
Group Management	73.78% <ø> (?)
User Management	97.16% <ø> (?)
Backend Core	70.78% <ø> (?)

🚀 New features to boost your workflow:

• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.