Improve UI on desktop screens

[Keith-Web3]

Overview

We need to improve the UI of the frontend app on desktop screens. It currently doesn't look too good.
Currently, it looks like this

Action Items

Remove scrollbars showing up in the container element

[github-actions]

Hi @Keith-Web3! 👋
Thank you for opening an issue for Chayn! We appreciate your contribution and will get back to you as soon as possible. Please read the CONTRIBUTING.md file to learn more about contributing to Chayn. Happy coding!

[kyleecodes]

Hey @Keith-Web3!👋

Thank you for creating this issue! I agree the desktop UI can be improved! However, where scrolling is necessary, we will keep them for accessibility reasons. But the design can be improved upon! For instance:

• Remove horizontal scrolling
• Responsively move scrollbars when all content is visible
• Make aesthetic changes while complying with Chayn's theme and accessible GUI standards - make scrollbars look like scrollbars, function intuitively, contrast not too high
• Move most important information above the scroll to improve viewer retention

More resources here:
https://www.nngroup.com/articles/scrolling-and-scrollbars/
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/scrollbar_role
https://ux.stackexchange.com/questions/33384/accessible-custom-scrollbars

If you would like to complete any of the steps above, I'll assign you this issue.

Thanks again!

[Keith-Web3]

Yeah, I would like to work on the issue.

[kyleecodes]

Great! @Keith-Web3 you are assigned.

Starting this week we are currently in the process of updating this app entirely, from the docs to the dependencies. If you encounter any difficulties, please reach out here we'll be happy to help! Your feedback is highly appreciated.

[Keith-Web3]

@kyleecodes I noticed some of the packages were installed as far back as three years ago and it's causing some install conflicts. I guess this would be fixed in the ongoing update so should I hold the UI changes till the updates are done?

[kyleecodes]

@Keith-Web3 thank you for your patience! We had to wait another week to begin upgrading this project, but we are back now and I just saw your message.

If none of these install conflicts interrupt your ability to work on the UI, I would ignore them. However, if these install conflicts interfere with editing the UI, please report them here. Some may be quick fixes, but if not, I can troubleshoot the issues here or open new issues for solving these conflicts.

Can you share a screenshot or copy-paste the install conflicts you're experiencing? Thanks again.

[kyleecodes]

Hey @Keith-Web3, we have decided to archive this repo and Your Story Matters. I'm unassigning you this issue.

We invite you to extend your ideas to our newer open-source project, Bloom, which is similar to this project, but with more features and actively maintained!

Check out Bloom here: https://github.com/chaynHQ/bloom-frontend

Thank you for your interest!

[Keith-Web3]

Alright, cool. I'll check it out