Adds a notification dropdown to the navbar

[joshwingreene]

Changes

1. Adds a NotificationDropdown component. It will appear when the notification button is clicked.
2. Added a noContentStyles class to the NoContentStyles styled component for styling purposes
3. Exposed the isLoading const from the useInfiniteLoading hook
4. The NoContentStyles styled component will now set the color of paragraph elements that have the lead class.
5. Added a span around the "created a new agent named" text for the AgentCreationNotification component for dark mode styling purposes
6. Added relevant theming code
7. Made the NotificationButton into its own component
8. The NotificationButton will now be shown to the left of the hamburger button on mobile.
9. The ReadNotifications component now makes use of the useInfiniteLoading hook.
10. The mark all read buttons are now disabled when there are no unread notifications.
11. The useInfiniteLoading hook now handles the clearing of the loadedData const. This was the fix for the aforementioned duplicate key issue.

Purpose

• Adds a notification dropdown to the navbar

Approach

• On desktop, the dropdown will look like a normal dropdown with a few differences when it comes to positioning.
• On mobile, the dropdown will become a full-screen modal. However, there will be some space in between its border and the edges of the screen.

Notable Issue

@DropsOfSerenity It doesn't happen all of the time, but the notification dropdown will sometimes show on mobile when you click on the hamburger icon. I originally thought that the notification button in the hidden navbar was being clicked even though its visibility is set to hidden. However, it doesn't look like that's possible. Do you know what might be going on?

Learning

• I learned how to create a full-screen modal.

Testing Steps

1. Pull in the changes to your local copy of this branch and run it alongside the dj_starter_demo repo.
2. Test the notification dropdown on desktop and mobile

Screenshots/Demo

https://user-images.githubusercontent.com/2876874/206277207-747e3a1f-40d0-4a03-8484-8f93aa3505bb.mov

[joshwingreene]

Notification should be in a dropdown view from the topbar

[joshwingreene]

@DropsOfSerenity Okay. I have finished adding the notification button to the left of the hamburger button on mobile. While implementing this change, I realized that I hadn't sufficiently resolved a duplicate key issue that was related to the useInfiniteLoading hook and the Read Notifications component. So, I had to fix that.

Summary of the Changes

• Made the NotificationButton into its own component
• The NotificationButton will now be shown to the left of the hamburger button on mobile.
• The ReadNotifications component now makes use of the useInfiniteLoading hook.
• The mark all read buttons are now disabled when there are no unread notifications.
• The useInfiniteLoading hook now handles the clearing of the loadedData const. This was the fix for the aforementioned duplicate key issue.

Here's a demo:

https://user-images.githubusercontent.com/2876874/207737401-8924c9e1-d4dc-435d-922f-2118d01212b4.mov

Some Notes

• The positioning of the notification dropdown isn't as great when compared to the previous version when the width of the viewport is being changed.
• When you watch the video, you will see that the height of the dropdown isn't filling the entire space. This only happens when the developer tools are open.