Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

27. App info modal #62

Merged
merged 13 commits into from
Apr 4, 2024
Merged

27. App info modal #62

merged 13 commits into from
Apr 4, 2024

Conversation

eonflower
Copy link
Collaborator

Description

  • Added a button that toggles a modal to open
  • Styling consistent with rest of app
  • Tells user what the app is and how to use it
  • Gives credit to the devs and mentors 😉

Related Issue

closes #61

Acceptance Criteria

  • It should be styled to match the app
  • A modal should pop up
  • Add a description of how to use the app
  • Give user basic understanding of app

Type of Changes

accessibility, enhancement

Updates

Before

Screenshot 2024-04-03 at 7 02 15 PM

After

Screenshot 2024-04-03 at 7 02 35 PM
Screen.Recording.2024-04-03.at.7.05.56.PM.mov

Testing Steps / QA Criteria

  1. git pull from main
  2. git checkout an-issue-27
  3. click the help button in the navigation
  4. scroll on the modal
  5. ta-da 😃

Notes

I am not set in stone with the exact verbiage used. So if you want it to be said in a different way, feel free to let me know! I just used AI to help me come up with the wording.

Copy link

github-actions bot commented Apr 4, 2024

Visit the preview URL for this PR (updated for commit a5beeb4):

https://tcl-66-smart-shopping-list--pr62-an-issue-27-8sui0olu.web.app

(expires Thu, 11 Apr 2024 03:45:09 GMT)

🔥 via Firebase Hosting GitHub Action 🌎

Sign: 2dc16cb2a79cbd6723fdc511b73e0743df1d18d0

Copy link
Collaborator

@jeremiahfallin jeremiahfallin left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks good and works well but 2 things:

  1. Modals should be closeable using the ESC key for accessibility:
    https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/

  2. This isn't required to fix and more of an FYI, but it looks slightly wonky in Chrome on Windows:
    image

@jeremiahfallin jeremiahfallin self-requested a review April 4, 2024 03:39
Copy link
Collaborator

@jeremiahfallin jeremiahfallin left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice work, looks good to me!

@eonflower eonflower merged commit dbafc61 into main Apr 4, 2024
2 checks passed
@eonflower eonflower deleted the an-issue-27 branch April 4, 2024 03:45
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

27. App info modal
2 participants