Adds popup notif. (fixes #1183)

[victorialee13]

Summary

Improves the sign-out flow by showing a notification when the user signs out of their Google Account.
This update uses the global openSnackbar action to display a top-right toast message including the user's name or email (when available).
The logout notification appears before the session is cleared to ensure it is always visible to the user.

Test Plan

Manually signed it with test account and clicked 'Sign out'.
Dropdown menu closes and Snackbar appear top right corner
Message shows one of three choices

1. account name
2. account email
3. 'your account' as fallback
   After 800ms delay, session clears through clearSession() and redirects to /.

Issues

Closes #1183

[alexespejo]

Congrats on your first PR!!

This looks like a solid start! This is a smaller change so it's not too big but in the future if you can provide screen shots in the PR that would be good 🙂

When it comes to user signin notifications we typically use dialogs or popups like this to inform them:

We create an AlertDialog component for this particular instance

[victorialee13]

Summary
Changes Snackbar Notification which notifies users they have been signed out to instead using the AlertDialong Component

Test Plan
Manually signed it with test account and clicked 'Sign out'.

Closes #1183

[alexespejo]

We want the dialog to appear after the user has signed out. With the current logic the user has to click the "Confirm" button on this modal to actually log out (i.e if the user refreshes the page before they click "Confirm" they'll still be logged in).

I would look into the logic we use to determine if a user is logged in. You can also make use of local storage to save whether we're in a "logout" state in order to display the message.

[victorialee13]

In the LocalStorageKeys, added signoutNotice flag and uses it for proper behavior change: Clicking "Log out" immediately clears session and sets signoutNotice.

[alexespejo]

Aside: when we bind functions to event handlers like this we typically define a separate function in the body of the component just to create a separation of concerns :)

function onClick(){}
...
<AlertDialog>
onClose={onClick}
</AlertDialog>

[alexespejo]

You don't necessarily have to display the name of the user as the text might wrap with the screen on mobile

[alexespejo]

My fault, I gave bad instructions that are too overkill.

Revert the commits related to the suggested change.

The flow should be:

"Hit logout" -> invalidates session -> display alert -> "user hits close" -> reload the page

*the current issue is if you hit logout the user HAS to hit "close" in order to be properly invalidated without being dependent on the user input

[alexespejo]

fix: these changes aren't needed anymore, revert the file changes

[alexespejo]

Resolve the merge conflicts so the deployment can run