hackforla / lucky-parking

Visualization of parking data to assist in understanding of the effects of parking policies on a neighborhood by neighborhood basis in the City of Los Angeles
https://www.hackforla.org/projects/lucky-parking.html
34 stars 60 forks source link

UI How It Works: How It Works Button #535

Closed dannycpham closed 1 year ago

dannycpham commented 1 year ago

User Story

As a user, I want to be able to understand how the website works. If I click on the How It Works button, I expect a modal to appear that would explain the functionality of the website.

Description

When a user clicks on the How It Works button, the user would see a new floating UI that explains how the site works.

This floating UI would always be on top of whatever screen that the user is on.

Please use the Figma for the exact language to use on the How It Works.

When a user has the How It Works UI active, the rest of the screen is dimmed and focus is on the new UI.

If a user clicks on the Got It button, the How It Works UI would disappear and the user can resume whatever their previous page was.

If a user clicks on outside of the How It Works UI, the UI would disappear and the user can resume whatever their previous page is.

Acceptance Criteria

  1. If a user clicks on the How It Works button, then a new UI would appear, dimming the rest of the screen.

Design References

Figma

Technical References

Material UI icons

Additional Information

No response