feat: improve frontend accessibility, modal stories and visual balance

[rohan911438]

Summary

This PR delivers a focused set of frontend UX, accessibility, Storybook, and API improvements across the ChainBridge platform.

Fixes #420
Fixes #423
Fixes #426
Fixes #432

---

Changes Implemented

#420 Frontend UX Audit – Reduce Teal Visual Dominance

Improvements

• Audited key frontend pages for excessive brand-color usage
• Reduced decorative teal backgrounds and glow effects
• Introduced more neutral operational surfaces for improved readability
• Preserved primary CTA prominence and brand identity
• Maintained semantic distinction between success, info, warning, and error states

Result

A cleaner visual hierarchy that improves focus on user actions while keeping the ChainBridge brand recognizable.

---

#423 Accessibility Improvements for Icon and Action Buttons

Improvements

• Audited navbar and marketplace interaction controls
• Added aria-label attributes to icon-only buttons
• Improved accessible names for mixed-action controls
• Enhanced keyboard navigation and screen-reader compatibility
• Verified accessibility behavior across updated routes

Result

Improved WCAG compliance and a more accessible experience for keyboard and assistive-technology users.

---

#426 Storybook Coverage for Swap Review & Signing Modals

Added Stories

• Swap Review State
• Transaction Signing State
• Signing Failed State
• Signing Complete State

Improvements

• Added realistic chain and token data for stories
• Improved developer review workflow
• Enabled accessibility validation through Storybook addons

Result

Critical swap flows can now be reviewed, tested, and documented without executing a live transaction.

---

#432 Pagination Metadata for Order List Responses

Backend Improvements

• Extended order list API responses with pagination metadata

• Added:

  • limit
  • offset
  • count

• Preserved existing filtering and sorting behavior

• Updated response schemas and backend tests

Example Response

{
  "items": [...],
  "limit": 20,
  "offset": 0,
  "count": 120
}

Result

Frontend consumers can now build accurate pagination controls and display result counts without additional requests.

---

Testing & Validation

Frontend

• Lint passes
• Build passes
• Accessibility checks pass
• Storybook renders successfully
• No visual regressions observed

Backend

• API tests pass
• Pagination metadata validated
• Existing filters remain functional
• Response schema verified

---

Impact

This PR improves:

• User accessibility
• UI clarity and visual balance
• Frontend component documentation
• API pagination usability
• Overall developer experience

---

Issues Closed

Fixes #420
Fixes #423
Fixes #426
Fixes #432

[drips-wave]

@rohan911438 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