[UI] : Implement Mobile Responsiveness for Payment operations

Riddhiagrawal001 commented 2 months ago

Description

Payments operations page need to be optimised for mobile devices to ensure a seamless user experience across various screen sizes and resolutions.

Pages to Update:

Payment Operations Home page (Route: /dashboard/payments)
Details of a payment(Route:/dashboard/payments/${payment_id}/${profile_id})

Requirements

Ensure all elements (text, images, buttons, etc.) scale appropriately for mobile viewports.
Changes for mobile responsiveness doesn't hamper the existing web view
Test across multiple devices and browsers (iOS, Android, Chrome, Safari, etc.).

Current pages in mobile view

Payment Processors Home page
Details of a payment

Acceptance Criteria

Each page must be fully functional and visually optimised for mobile devices.
Navigation elements (menus, buttons) should be easily clickable and accessible on touchscreens.
The design should maintain visual consistency with the desktop version while being mobile-friendly.
Proper testing and verification on different devices and screen sizes.
Changes for mobile responsiveness doesn't hamper the existing web view

Submission Process:

Ask the maintainers for assignment of the issue, you can request for assignment by commenting on the issue itself.
Once assigned, submit a pull request (PR).
Maintainers will review and provide feedback, if any.
Maintainers can unassign issues due to inactivity, read more here.
For this issue, please submit a PR on juspay/hyperswitch-control-center repo, and link it to the issue.

Refer here for Terms and conditions for the contest.

nishantharkut commented 1 month ago

Please assign me this issue @Riddhiagrawal001

gorakhnathy7 commented 1 month ago

Hey @nishantharkut, Thanks for showing interest in this. To ensure everyone gets a fair chance to participate and contribute during Hacktoberfest, we are assigning only one issue at a time per person. Please let us know once you've completed your current issue, and you can start working on the next one right after.

sangram-mkj-01 commented 1 month ago

Hi, I would like to work on this. Please assign this to me. Thanks

gorakhnathy7 commented 1 month ago

Hey @sangram-mkj-01 Assigning this issue to you, thanks for your interest.

sangram-mkj-01 commented 1 month ago

@gorakhnathy7 thanks for assigning this issue to me. I'll start working on this right away

sangram-mkj-01 commented 1 month ago

Hi, @gorakhnathy7 I've cloned the repo but can't find the file I need to make changes to. Can you please help me on this? Thank you

gorakhnathy7 commented 1 month ago

Hey @sangram-mkj-01

For this issue, please submit a PR on juspay/hyperswitch-control-center repo, and link it to the issue. The issue corresponds to this repo.

alpit4 commented 1 month ago

Can I work on this issue?

gorakhnathy7 commented 1 month ago

Sure @alpit4 Assigning this to you, Happy coding🥳

Vaibhav91one commented 3 weeks ago

Hi @gorakhnathy7 Please assign this issue to me (if stale).

gorakhnathy7 commented 3 weeks ago

Hey @alpit4 kindly let us know if you are still working on this issue?

juspay / hyperswitch