webcrumbs-community/webcrumbs

Style Dashboard Frontend Based on Figma Design

webcrumbs-community opened this issue · 11 comments

webcrumbs-community commented

Hey team, it's high time we make the WebCrumbs dashboard look simple - but good! We've got a solid Figma design to guide us through this endeavor. Let's get this done and knock everyone's socks off, shall we?

This issue replaces #64

Requirements:

  • Align with the Figma design found here.
  • Ensure the design is responsive and scales well on different screen sizes.
  • Maintain accessibility standards.
  • Test cross-browser compatibility.

To-Do

  • Work on the /admin directory using Material UI (already installed)
  • Implement color scheme, typography, spacing, roundings, etc., to mimic the figma design
  • Add UI elements like buttons, cards, etc., and the same copy as the figma design

For a clearer picture, it will end up looking like this:

This isn't just beautifying; it's all about enhancing user experience and usability. Trust me, they'll thank us later!

jsimples commented

I can take the lead on this one, and any help is appreciated!

  • ❤️1
Ashok-Kumar-dharanikota commented

Hi @jsimples , If you need any help please let me know. I would give my best to help you ☺️.

  • 🚀1
jsimples commented

Thank you, @Ashok-Kumar-dharanikota! I'm working on it right now and tell you soon how we can work together. That will be awesome.

jsimples commented

Hi, @Ashok-Kumar-dharanikota! Added a bunch of style to the admin. It's merged already. It's still missing the search bar and the user dropdown. I started it at NavBar.tsx but it's far from done. Let me know if you'd like to take a shot at it. I'll have more time to see it later today or tomorrow.

  • 👍1
Ashok-Kumar-dharanikota commented

Yes! I would like to give it a shot.

  • 🚀1
Ashok-Kumar-dharanikota commented

Hi @jsimples ,

Heres What i done.

image

Only pending thing is

  1. message and notification icons

I didnt find this icons present in asset folder.

webcrumbs-community commented

Nice work!! You can export the icons from the figma file.

Ashok-Kumar-dharanikota commented

Hi @webcrumbs-community , @jsimples

Here's the final cut. I left the drop-down menu as it is. Because there is a chance we will add more options to that.

image

please let me know if anything needs to be updated and I commented out some block of code. when I raise PR please let me know code changes if required i will update again.

Edit: I replaced 'Avatar' with 'Image'. It is unable to render either svg or jpg files.

  • 👍2
  • 🚀1
webcrumbs-community commented

Looking good. Agree with the drop-down as it is for now. You can send a PR. Thanks!!

jsimples commented

@Ashok-Kumar-dharanikota, it's looking super sharp!! I'd just add some spacing in the menu dropdown, but I understand we'll be editing it later. Cool! Good for PR

Ashok-Kumar-dharanikota commented

I am out of my town right now, and will raise the PR Today evening.

  • 👍1