WEB-15: Implement Announcement Preview Popup

[belle-hu]

Overview

Implement UI for tapping on an announcement within Active Announcements or Past Announcements and displaying a popup.

Changes Made

• Revised how dateInRange is called within existing code (AnnouncementCell) because the LiveIndicator was not being displayed properly. I discovered the existing code was calling dateInRange with the arguments in the wrong order.
• Uploaded a placeholder image for the user doing the scheduling of the announcement (lauren.png)
• Modified page.tsx to revise the hardcoded data; added a new hardcoded Announcement object so that we had an upcoming announcement (because we didn't have any hardcoded announcements before). Revise the id numbers of the hardcoded data because there were two announcements with id 4.
• Created a new icon CrossThinIcon to represent the close button of the popup
• Implemented ModalLiveIndicator, ModalUpcomingIndicator, ModalPastIndicator. Implemented a new variant of the existing LiveIndicator because the existing one was statically programmed to be in a specific position. ModalLiveIndicator, ModalUpcomingIndicator, and ModalPastIndicator are all dynamically positioned.
• Implemented ButtonPrimary2 for the "Delete Announcement" button
• Implemented ButtonPrimary3 for the "End Live Announcement" button
• I needed to implement ButtonPrimary2 and ButtonPrimary3 because the existing Primary1 and Secondary1 hardcode the caret icon.
• Implemented AnnouncementModal.tsx to handle all the UI logic for the popup

Screenshots

[vinnie4k]

This looks awesome! Just a couple changes to your grouping approach as well as CSS styling, but other than that, this is very solid.

I collapsed a few div elements in the image below, but overall it should be grouped like such:

Make sure that when you create a commit, please prepend WEB-15: to the commit message. For example, WEB-15: Fix div element grouping.

Very impressive work Belle!