• The left and right padding for the calendar sidebar should be spacing-8 instead of 30px
• The top and bottom padding for the calendar sidebar should be spacing-6 instead of 20px
• Add a min-width: 20.3125rem; to the calendar sidebar
• When the window width is small, the logo changes to icon only. Now that the logo is in the sidebar, always show the icon + text.
• last min comment: When the window height is small, the position of the the scrollbar looks a bit funky. If anything, the Logo and Hamburger icon in the sidebar should be sticky just like the sidebar footer.

• Change the MY SCHEDULES text, RESOURCES text, hamburger icon, and plus icon to UTRP (theme) black: #1A2024. Next, change the footer social icons and settings icon to UT Black: #333F48
• Use spacing-7 to separate the calendar sidebar's header from the body/footer (in other words, between the logo and My Schedules section)
• The dividers/borders separating each section in the calendar sidebar should no longer have a top or bottom margin. After that change, use spacing-6 to separate each section (since it would also apply to the modified dividers, it would add spacing-6 to the top and bottom of the divider)
• 
• Use spacing-3 gap to separate each section title from it's content (in other words, to separate RESOURCES from the links or MY SCHEDULES from the schedule list)

• Use spacing-3 gap to separate each schedule in the schedule list under MY SCHEDULES (not sure if a component already exists for this list/each schedule. If so, just change it there)
• Use spacing-3 gap to separate the drag icon from the radio button and schedule name for each schedule in the schedule list.

• Use spacing-3 gap for the calendar sidebar's important links (also rename Important Links to Resource Links in the codebase)
• Use spacing-2 gap to separate each resource link from the up-right-arrow icon

• Use spacing-5 gap for the calendar sidebar's footer social icons

a039ea9

This commit also addresses #285.

• The social icons color is showing as #303030 and Im not sure why but its a color that has persisted in other areas (outside this PR) even though it is never used in any design. The social icons should be UT black (#333F48). Try finding why the #303030 color is overriding the UT black.

• Ensure each schedule row is fixed at a height of 30px (or 1.88rem) and each schedule row is separated by spacing-3 (see image below for the Figma design)

(ignore the spacing2 in the image. It should be spacing-3)

• I made an oopsie daisy on the drag indicators before the schedule names: In my figma, I had the width as 10px instead of 24px (which is the normal width for all icons). Drag indicators are an exception because I didn't want the extra space on the left of each drag indicator (it makes the schedule list look indented). Is it possible to try changing the width of the drag indicator so that it doesn't have extra empty space around the drag indicators? (if you see the image below, the drag indicator width should be like the purple rectangle, not the purple square since that adds extra space. The size of the icon should not change though, just the "boundaries" of the container the icon is in). After this, try comparing the PR with the Figma to see if padding is consistent and if it "looks" the same.

Another thing is the row gap between the logo and the social icons. It is too big of a gap because we are using two spacings instead of one. (I had to change the Figma slightly for this since it was an oversight)

• For the logo + hamburger button "header" have a top and bottom padding of spacing-6, but no top padding above the MY SCHEDULES/body container. This will allow some padding to always show on the sticky header when the window height is small and the body container is scrollable. (see first and second images below)
• For the footer, the purple area in the third image below is extra padding we do not need since we already have padding above the footer

Image 1: From Figma

(ignore the spacing5 in the image. It should be spacing-6)

Image 2: This is how it should look like when scroll is enabled because the window width is small (notice the gap between the body content and the header content)

Image 3: footer padding

One last small change! Everything else looks perfect.

LGTM

Think it looks and works finely, the one comment I have is that usually with these types of menus, when you click the button to collapse, you expect to be able to reopen it without having to move your mouse position

In this case, the button moves away and idk if this is just nitpicky i was wondering where the perfect spot would be to position it so opening and closing the button would always be done in the exact same spot