Improving UI/UX of the Explorer page Fixes #1451 #1738
Conversation
|
@yashkumar2603 is attempting to deploy a commit to the Public Convenience Ltd Team on Vercel. A member of the Team first needs to authorize it. |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
I noticed some issues with the responsiveness on mobile devices after the PR was deployed onto Vercel, I have fixed those. The problems were - - Table was sticking to the right side - Page title and the navbar was sticking to the left side Changes - - Added Media Query based font size handling and handled horizontal overflow in table
|
Hello Oliver, the PR I submitted yesterday had some issues with mobile responsiveness, as I saw after the Vercel preview deployment. I have fixed those in the same PR using as minimal haphazard CSS as possible, keeping the codebase clean. Please review the changes. Also, I need help understanding why the Cypress tests are failing; is it my fault? |
|
Hi @yashkumar2603, firstly thank you for taking the time to contribute to our project! Our Cypress end to end tests rely on having access to secrets, but because this is coming from a fork of our project these secrets are withheld from these runs of the tests for security reasons. So no, not your fault at all! As it's rare that we get external contributions like this we haven't looked at a way to make this work. We don't have end to end test coverage for the explorer pages, so in this case I think we'll be fine if they don't run here (although I'll run them locally as a check) We'll review your pull request soon, hopefully within the next week. Thanks again for your contribution! :) |
What does this change?
Fixes the issue #1451
This PR aims to solve the bland UI of the Explorer page, as mentioned in this issue. I have done this by restyling the page without using any extra dependencies or imports. I have added a few colors to the theme, which go well with the overall application color palette. Please let me know if they need to be changed. I am attaching an image of the new UI vs. the old UI of the explorer page below to give an idea of what the improvements look like -
New UI
Old UI -
How was this tested?
How have you tested your changes?
I have tested the UI via running a dev server.
And mobile and tablet responsiveness by testing on those devices. The new UI is responsive, smooth and works well even in low network speed.
Accessibility
If applicable to your changes, have you:
Lastly, this is my first contribution to any codebase of this size; please let me know of any mistakes I made. I want to learn more from the fantastic people.