feat(ui): calendar sidebar redesign (#464)

* feat: update calendar sidebar, footer, and header with Figma design

* chore: run lint

* feat: update header with Figma design

* chore: run lint

* chore: remove unused vars

* chore: fix types

* fix: adjust sidebar minimum width

* fix: update LogoIcon layout to ensure text is always displayed

* feat: add spacing constants

* fix: add sidebar styling with spacing system and sticky header

* fix: update spacing constants to use rem units

* refactor: replace padding with spacing system and colors with UTRP theme

* refactor: rename ImportantLinks to ResourceLinks

* refactor: simplify CalendarHeader button component by using icon prop

* feat: add sidebar open and close transition

* refactor: rename unused var

* fix: update social icon color

* feat: improve layout and spacing in calendar components

* refactor: remove unused GearSix icon and options handler

* feat: update calendar components with new icons and improved spacing

* fix: correct class name

* refactor: organize social links into array and update link styling

* refactor: remove unused import

* fix: adjust gap spacing in radio button

* fix: update divider component to use theme offwhite1

* fix: increase size of outward arrow icon

* feat: add getSpacingInPx function to convert rem to pixels

* fix: update gap spacing in CalendarSchedules component to use spacing system

* fix: rollback footer social icons to original icons

* fix: update Calendar styles to use theme offwhite1 and adjust padding to account for scrollbar

* fix: update LargeLogo component to use gap-spacing-3

* fix: update button variants to 'minimal' and adjust styles for consistency

* fix: adjust padding in Calendar component for better layout consistency

* fix: increase size of arrow icon

* fix: add shrink-0 to radio buttons

src/views/components/calendar/CalendarHeader.tsx

@@ -1,24 +1,14 @@
-import { GearSix, Sidebar } from '@phosphor-icons/react';
+import { Sidebar } from '@phosphor-icons/react';
 import { initSettings, OptionsStore } from '@shared/storage/OptionsStore';
 import { Button } from '@views/components/common/Button';
 import CourseStatus from '@views/components/common/CourseStatus';
 import Divider from '@views/components/common/Divider';
-import { LargeLogo } from '@views/components/common/LogoIcon';
 import ScheduleTotalHoursAndCourses from '@views/components/common/ScheduleTotalHoursAndCourses';
 import useSchedules from '@views/hooks/useSchedules';
-import { openTabFromContentScript } from '@views/lib/openNewTabFromContentScript';
 import React, { useEffect, useState } from 'react';
 
-/**
- * Opens the options page in a new tab.
- * @returns A promise that resolves when the options page is opened.
- */
-const handleOpenOptions = async (): Promise<void> => {
-    const url = chrome.runtime.getURL('/options.html');
-    await openTabFromContentScript(url);
-};
-
 interface CalendarHeaderProps {
+    sidebarOpen?: boolean;
     onSidebarToggle?: () => void;
 }
 
@@ -26,7 +16,7 @@ interface CalendarHeaderProps {
  * Renders the header component for the calendar.
  * @returns The JSX element representing the calendar header.
  */
-export default function CalendarHeader({ onSidebarToggle }: CalendarHeaderProps): JSX.Element {
+export default function CalendarHeader({ sidebarOpen, onSidebarToggle }: CalendarHeaderProps): JSX.Element {
     const [enableCourseStatusChips, setEnableCourseStatusChips] = useState<boolean>(false);
     const [_enableDataRefreshing, setEnableDataRefreshing] = useState<boolean>(false);
 
@@ -55,23 +45,27 @@ export default function CalendarHeader({ onSidebarToggle }: CalendarHeaderProps)
     }, []);
 
     return (
-        <div className='flex items-center gap-5 overflow-x-auto overflow-y-hidden border-b border-ut-offwhite px-7 py-4 md:overflow-x-hidden'>
-            <Button
-                variant='minimal'
-                icon={Sidebar}
-                color='ut-gray'
-                onClick={onSidebarToggle}
-                className='screenshot:hidden'
-            />
-            <LargeLogo />
-            <Divider className='mx-2 self-center md:mx-4' size='2.5rem' orientation='vertical' />
-            <div className='flex-1 screenshot:transform-origin-left screenshot:scale-120'>
+        <div className='min-h-[91px] flex items-center gap-5 overflow-x-auto overflow-y-hidden px-7 py-4 md:overflow-x-hidden'>
+            {!sidebarOpen && (
+                <Button
+                    variant='minimal'
+                    color='theme-black'
+                    onClick={onSidebarToggle}
+                    className='h-fit w-fit screenshot:hidden !p-0'
+                    icon={Sidebar}
+                />
+            )}
+
+            <div className='screenshot:transform-origin-left screenshot:scale-120'>
                 <ScheduleTotalHoursAndCourses
                     scheduleName={activeSchedule.name}
                     totalHours={activeSchedule.hours}
                     totalCourses={activeSchedule.courses.length}
                 />
             </div>
+
+            <Divider className='mx-2 self-center md:mx-4 screenshot:hidden' size='2.5rem' orientation='vertical' />
+
             <div className='hidden flex-row items-center justify-end gap-6 screenshot:hidden lg:flex'>
                 {enableCourseStatusChips && (
                     <>
@@ -83,7 +77,6 @@ export default function CalendarHeader({ onSidebarToggle }: CalendarHeaderProps)
 
                 {/* <Button variant='single' icon={UndoIcon} color='ut-black' />
                 <Button variant='single' icon={RedoIcon} color='ut-black' /> */}
-                <Button variant='minimal' icon={GearSix} color='theme-black' onClick={handleOpenOptions} />
             </div>
         </div>
     );