codeforpdx / PASS

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

[Discovery] - Landing page styling adjustments #635

Open andycwilliams opened 1 month ago

andycwilliams commented 1 month ago

Describe the Current Behavior/Feature:

A few possible, small adjustments. Each one is related to KeyFeatures.jsx.

  1. The primary theme color has changed from a green to a blue, but the images used on the landing page have not been updated.
  2. Refactor the icons to fit on smaller screens. Currently, at least one icon looks strangely to the side when on a mobile viewport.
  3. Several minor optimizations for Material UI. See below for specifics.

On a small viewport:

IconIsKindOfOffCenterAndImagesAreStillGreen

On a slightly larger viewport:

2024-05-17 (3)

Rationale:

  1. The images should continue to match the theme.
  2. Minor visual improvement.
  3. Helps maintain consistency, matching how styling is handled elsewhere.

Proposed Changes:

  1. Replace the images with versions that match the theme.
  2. Could possibly make them conditionally render as a column rather than a row. Or by adjusting the titles themselves.
  3. Line 40 in KeyFeatures.jsx can be refactored from using <strong> to simply adding fontWeight in the Typography sx. Additionally, in Material UI components marginBottom can be simplified as mb (lines 27 and 48).