search

juspay / hyperswitch

An open source payments switch written in Rust to make payments fast, reliable and affordable
https://hyperswitch.io/
Apache License 2.0
12.66k stars 1.35k forks source link

[UI] : Implement Mobile Responsiveness for Home page #6127

Open Riddhiagrawal001 opened 2 months ago

Riddhiagrawal001 commented 2 months ago

Description

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

Pages to Update:

  1. Home page (Route:/dashboard/home)

Requirements

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

Current pages in mobile view

image

Acceptance Criteria

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

Submission Process:

Refer here for Terms and conditions for the contest.

Vaibhav91one commented 2 months ago

Please assign this issue to me @Riddhiagrawal001 .

Riddhiagrawal001 commented 2 months ago

Hi @Vaibhav91one , I have assigned the issue to you, and it is now ready for you to pick up . Let me know if you have issues regarding this

Vaibhav91one commented 2 months ago

Thanks @Riddhiagrawal001. Will let you know if I have any queires.

Vaibhav91one commented 2 months ago

Hi @Riddhiagrawal001, I am having a little trouble with finding the right files. I found the component to work with in the following repo, control center. Please do guide.

gorakhnathy7 commented 1 month ago

yes @Vaibhav91one You need to submit a PR on https://github.com/juspay/hyperswitch-control-center repo itself.

Vaibhav91one commented 1 month ago

Thanks @gorakhnathy7 for the clarification.

Vaibhav91one commented 1 month ago

Hi @gorakhnathy7, when I do npm run start, I get the following error. Is the start script using environment variables by an chance.

Screenshot 2024-10-09 234245

Vaibhav91one commented 1 month ago

@gorakhnathy7 Attached the ss, I dont know how it got removed. I was just checking for your response and saw that ss is not present. šŸ˜‚šŸ˜‚

Vaibhav91one commented 1 month ago

Hi @gorakhnathy7 , @Riddhiagrawal001 Does this work ? and also should I make changes in .res or in .res.js.

fix-1

Vaibhav91one commented 1 month ago

Please provide feedback @gorakhnathy7 @Riddhiagrawal001.

Riddhiagrawal001 commented 1 month ago

Hi @gorakhnathy7 , @Riddhiagrawal001 Does this work ? and also should I make changes in .res or in .res.js.

Also make changes in .res file as .res.js is the trasnpiled version of .res Yes this does looks fine . You can add some padding at the top to look better in mobile version

Vaibhav91one commented 1 month ago

Hi @gorakhnathy7 , @Riddhiagrawal001 Does this work ? and also should I make changes in .res or in .res.js.

Also make changes in .res file as .res.js is the trasnpiled version of .res Yes this does looks fine . You can add some padding at the top to look better in mobile version

Will do @Riddhiagrawal001.

Vaibhav91one commented 1 month ago

@Riddhiagrawal001, Raised PR Request