Exporting calendar redesign

[NIDHI2023]

Summary

Implements Lucy's design changes for the exporting Google/Apple calendar feature.

• Got rid of bookmark
• Changed TA unfinished indicator to be a red dot when there is someone in "Ahead"

Redesigned modal:

• Buttons are now vertical
• Functionality is the same
• Got rid of repeating office hour title, now is just course code and OH name
• Added date and time as subtitle

With overflowing text:

Test Plan

• Change the "Ahead" number of students and make sure red dot appears when there is at least one, otherwise should go away
• Make sure Calendar Export modal shows expected name, date, and times for any office hour
• Check if styling remains consistent for long OH names
• Check if buttons work as expected

Notes

• Added dependency (ran yarn add @mui/icons-material)

Breaking Changes

None

Checklist

• I have updated the documentation accordingly.
• My PR adds a @ts-ignore

[dti-github-bot]

[diff-counting] Significant lines: 262.

[stevenyuser]

Hi Nidhi, the redesign looks pretty good! I think the design very closely matches Lucy's Figma designs and looks a lot better than the previous version.

I have some minor suggestions/bugs:

• There's a CSS error when the location of the OH session is two lines

• When clicking "Add to GCal", I think it should open a GCal link on a new tab instead of opening the GCal link on the same tab. One way to do this is by changing your current GCal Button from this:

<Button href={getGoogleCalendarLink()} className="export-btn" >
    <Button.Content icon>
        <Icon name='google' />
        Add to GCal
    </Button.Content>
</Button>

to this:

<Button
    onClick={() => window.open(getGoogleCalendarLink(), "_blank")}
    className="export-btn"
>
    <Button.Content icon>
        <Icon name="google" />
        Add to GCal
    </Button.Content>
</Button>

Other than that, everything looks great! Good job!

[burninglilies]

Hi Nidhi! Great work on this speedy PR. Aside from Stevens suggestion about opening Calendar in new tab and trying to make Session names one line I just have one more suggestion. Since we are no longer using the bookmark icon nor Google or Apple Icon it would also be a good to remove them from our media as well if they are not being used.