Touch up

[LawalRahman]

Closes #525

---

Closes #543

---

Closes #555

---

Closes #545

---

Here is a comprehensive pull request description you can use. It covers all the UI and accessibility improvements we made in the TouchUP branch:

---

Description

This PR introduces a series of frontend UI/UX touch-ups, focusing heavily on mobile responsiveness, component-level accessibility (a11y), and consistent adherence to the global Drips Wave design theme.

Key Changes & Improvements

1. Transaction History Table (RecentPayments.tsx)

• Accessibility Fixes: Added semantic <label> elements, aria-labels, th scope="col", and screen-reader-only table captions.
• Keyboard Navigation: Implemented tabIndex={0} and onKeyDown handlers allowing users to select transaction rows without a mouse.
• Theme Consistency: Standardized focus rings using the var(--pluto-500) Drips Wave accent color.

2. Onboarding Flow (RegistrationForm.tsx & register/page.tsx)

• Mobile Responsiveness: Adjusted container constraints, paddings (p-6 sm:p-12), text sizes, and flex gaps to prevent overflow and ensure comfortable reading on mobile screens.
• Visuals: Updated the registration call-to-action button and active input states to match the primary Drips Wave theme styling.

3. Button Component Polish (Button.tsx)

• Tactile Feedback: Added hover:-translate-y-[1px] and active:scale-[0.98] along with transition-all duration-300 ease-out for smoother, more tactile interaction states.
• Hover Aesthetics:
  • Primary: Enhanced the drop-shadow and dynamically scaled the backdrop glow on hover.
  • Secondary: Standardized the hover state to gently transition backgrounds to pluto-100 and borders to pluto-300.

4. Wallet Connection Modal (WalletSelector.tsx)

• Visibility Fix: Resolved a contrast bug where wallet connection labels were using text-white inside a bg-white container.
• Theme Alignment: Removed misplaced dark-mode background defaults (bg-white/[0.02]) in favor of light-theme variants (bg-[#F9F9F9]) to seamlessly match the surrounding interface.
• Responsive Layout: Resized connection option heights (h-14 sm:h-16) and margins, ensuring the modal remains compact and accessible on mobile devices. Cleaned up duplicated className attributes.

Verification

• Tested locally on both mobile (small viewport) and desktop breakpoints.
• Keyboard navigation and screen reader flow verified for the Transaction History Table.
• Design tokens verified against the Drips Wave aesthetic (var(--pluto-500)).

[vercel]

@LawalRahman is attempting to deploy a commit to the Emmanuel's projects Team on Vercel.

A member of the Team first needs to authorize it.

[drips-wave]

@LawalRahman Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits