codeforpdx / PASS

PASS project - with HMIS module integration
MIT License
24 stars 24 forks source link

[Enhancement] - Site/Application Theme Updates #605

Closed leekahung closed 2 months ago

leekahung commented 3 months ago

Describe the Current Behavior/Feature:

With updates from the UX/UI team Figma board (see https://www.figma.com/file/sqbOHqUVtmuWvlN6KLujnt/Pass-Designs?type=design&node-id=1216-2986&mode=design&t=lc9UZaWY194NPspe-0), we could start implementing some of the changes from there. As a start, we could begin with the UI theming, specifically on the main font and color palettes using our existing theme.js.

As there are currently three separate groups of font-sizes (one for mobile, two for desktop), we can do size updates in a follow-up issue.

Rationale:

Integrating design changes with existing UI

leekahung commented 2 months ago

Had recently discovered during our in-person meeting the location of the new color palette on Figma, which would be beneficial as we change up the site theme.

Screenshot 2024-04-25 at 7 10 27 PM (2)

Also updated the issue description to narrow the scope.

JaeGif commented 2 months ago

@leekahung I've nearly done with just the color theming and have been working on the Profile page CSS to get it closer to the Figma frames. I think what I'll do is finish just the coloring for this issue, and open another issue to finish the profile page theming.

For the color scheme, I've updated theme.js with the new color codes and am incrementally swapping the old and new schemes. Some components CSS needs to be changed so they're accessing the correct theme as well since the themes were renamed.

Wrangling MUI components takes a minute 😵‍💫 so I'm happy to move the component CSS to a separate issue. I can imagine tests needing to be rewritten with layout changes as well.