committee-project-gallery | building a universal popup to display on all projects

[itsoliviasparks]

Developing a universal popup to display on all TCL projects on the upcoming gallery page on the-collab-lab.codes
This has been an ongoing effort over the last few months (along with @segdeha, @djtaylor8, and @aayushkh)

Hi Team,
Wanted to open a PR for this one to get everyones feedback before we add this to all projects.

I've developed a Popup component with styling (matching TCL site ✨) that is displayed to the user when they first get to the site.

I wanted to change as little of each project's code as possible to make this easy to implement regardless of how each team coded/styled their app. (Which is why I went with useState as a toggle rather than useEffect, but I'm open to switching or tackling another way. I've been outta react for a minute 😅)

I've been able to implement this on TCL-61, TCL-58, & TCL-55 with no issue! 💪

For the copy, I borrowed a lot from the TCL site, and wrote a list of what is/what isn't working.
@segdeha I would particularly love to hear your thoughts here!

[github-actions]

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

https://tcl-61-smart-shopping-list--pr45-popup-94chglgy.web.app

_{(expires Sun, 17 Dec 2023 00:15:06 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: c53baec83435703c923d25f6be479829f5c47562}

[segdeha]

This looks amazing, @itsoliviasparks, nice work!!!

Of course, I do have questions 😅 :

• How does this look on mobile? I assume it's kind of a full-screen takeover on a phone. Does the content easily scroll?
• The content of the modal is really thoughtful and complete! I almost wonder if you could take out that long paragraph towards the end to save space?
• This is a nitpick, but I'd change that sentence about TCL to be: "The Collab Lab provides collaborative, remote blah blah blah."
• I think we have a namespace in npm, is that right? Could we publish the component there so we can easily pull it in to all of the projects from a common place?
• Lastly, how well does this work with screen readers? What I'd expect as good behavior is that the modal/takeover has focus at first. When it's dismissed, focus goes to the top element in the app itself (whatever would have been focused if the modal wasn't there).

I'm going to default to approve on the PR to keep you unblocked. I trust your (& the rest of the team's) judgement to implement something that works well!

[segdeha]

Love it! See my comment for some questions, but otherwise this looks great!

[djtaylor8]

This looks amazing! Great work on this this!

[itsoliviasparks]

Great questions here @segdeha!!

This looks amazing, @itsoliviasparks, nice work!!!

Of course, I do have questions 😅 :

• How does this look on mobile? I assume it's kind of a full-screen takeover on a phone. Does the content easily scroll?

I haven't looked into this on mobile yet, but that's next on my to-dos now that I have everyone's buy-in!

• The content of the modal is really thoughtful and complete! I almost wonder if you could take out that long paragraph towards the end to save space?

For sure!

• This is a nitpick, but I'd change that sentence about TCL to be: "The Collab Lab provides collaborative, remote blah blah blah."

✅

• I think we have a namespace in npm, is that right? Could we publish the component there so we can easily pull it in to all of the projects from a common place?

I have never done that, but happy to! I can have a look into it

• Lastly, how well does this work with screen readers? What I'd expect as good behavior is that the modal/takeover has focus at first. When it's dismissed, focus goes to the top element in the app itself (whatever would have been focused if the modal wasn't there).

That's what I'm expecting too, but I can be sure to test it with a screen reader too!

I'm going to default to approve on the PR to keep you unblocked. I trust your (& the rest of the team's) judgement to implement something that works well!

🙏

[itsoliviasparks]

This component has been renamed to ArchivalNoticeModal & has moved to the shopping-list-utils repo. It will be added to each project through npm.