feat(ui): calendar sidebar redesign

src/shared/types/Spacing.ts

@@ -0,0 +1,14 @@
+/**
+ * An object representing various spacing values used throughout the application.
+ * Each key corresponds to a specific spacing size based on the 4px grid system.
+ */
+export const spacing = {
+    spacing0: '.125rem',
+    spacing1: '.25rem',
+    spacing2: '.5rem',
+    spacing3: '.75rem',
+    spacing4: '1rem',
+    spacing5: '1.25rem',
+    spacing6: '1.5rem',
+    spacing7: '2rem',
+} as const;

src/stories/components/ImportantLinks.stories.tsx → src/stories/components/ResourceLinks.stories.tsx

@@ -1,15 +1,15 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import ImportantLinks from '@views/components/calendar/ImportantLinks';
+import ResourceLinks from '@views/components/calendar/ResourceLinks';
 
 const meta = {
-    title: 'Components/Common/ImportantLinks',
-    component: ImportantLinks,
+    title: 'Components/Common/ResourceLinks',
+    component: ResourceLinks,
     parameters: {
         layout: 'centered',
     },
     tags: ['autodocs'],
     argTypes: {},
-} satisfies Meta<typeof ImportantLinks>;
+} satisfies Meta<typeof ResourceLinks>;
 export default meta;
 
 type Story = StoryObj<typeof meta>;

src/views/components/calendar/Calendar.tsx

@@ -1,21 +1,28 @@
 import type { CalendarTabMessages } from '@shared/messages/CalendarMessages';
 import type { Course } from '@shared/types/Course';
+import { CRX_PAGES } from '@shared/types/CRXPages';
+import { openReportWindow } from '@shared/util/openReportWindow';
 import CalendarBottomBar from '@views/components/calendar/CalendarBottomBar';
 import CalendarGrid from '@views/components/calendar/CalendarGrid';
 import CalendarHeader from '@views/components/calendar/CalendarHeader';
 import { CalendarSchedules } from '@views/components/calendar/CalendarSchedules';
-import ImportantLinks from '@views/components/calendar/ImportantLinks';
+import ResourceLinks from '@views/components/calendar/ResourceLinks';
 import Divider from '@views/components/common/Divider';
 import CourseCatalogInjectedPopup from '@views/components/injected/CourseCatalogInjectedPopup/CourseCatalogInjectedPopup';
 import { CalendarContext } from '@views/contexts/CalendarContext';
 import useCourseFromUrl from '@views/hooks/useCourseFromUrl';
 import { useFlattenedCourseSchedule } from '@views/hooks/useFlattenedCourseSchedule';
 import { MessageListener } from 'chrome-extension-toolkit';
+import clsx from 'clsx';
 import React, { useEffect, useState } from 'react';
 
-import CalendarFooter from './CalendarFooter';
-import TeamLinks from './TeamLinks';
+import OutwardArrowIcon from '~icons/material-symbols/arrow-outward';
+import MenuIcon from '~icons/material-symbols/menu';
 
+import { Button } from '../common/Button';
+import { LargeLogo } from '../common/LogoIcon';
+import Text from '../common/Text/Text';
+import CalendarFooter from './CalendarFooter';
 /**
  * Calendar page component
  */
@@ -54,25 +61,63 @@ export default function Calendar(): JSX.Element {
     return (
         <CalendarContext.Provider value>
             <div className='h-full w-full flex flex-col'>
-                <CalendarHeader
-                    onSidebarToggle={() => {
-                        setShowSidebar(!showSidebar);
-                    }}
-                />
-                <div className='h-full flex overflow-auto pl-3'>
-                    {showSidebar && (
-                        <div className='h-full flex flex-none flex-col justify-between pb-5 screenshot:hidden'>
-                            <div className='mb-3 h-full w-fit flex flex-col overflow-auto pb-2 pl-4.5 pr-4 pt-5'>
-                                <CalendarSchedules />
-                                <Divider orientation='horizontal' size='100%' className='my-5' />
-                                <ImportantLinks />
-                                <Divider orientation='horizontal' size='100%' className='my-5' />
-                                <TeamLinks />
-                            </div>
-                            <CalendarFooter />
+                <div className='h-screen flex overflow-auto'>
+                    <div
+                        className={clsx(
+                            'gap-y-spacing6 py-spacing5 relative h-full min-h-screen w-full flex flex-none flex-col justify-between overflow-clip whitespace-nowrap border-r border-ut-offwhite/75 shadow-[2px_0_10px,rgba(214_210_196_/_.1)] duration-300 ease-out-expo transition-property-max-width screenshot:hidden',
+                            {
+                                'max-w-[20.3125rem] ': showSidebar,
+                                'max-w-0 pointer-events-none': !showSidebar,
+                            }
+                        )}
+                        tabIndex={showSidebar ? 0 : -1}
+                        aria-hidden={!showSidebar}
+                        {...{ inert: !showSidebar ? '' : undefined }}
+                    >
+                        <div className='px-spacing7 sticky top-0 z-50 w-full flex items-center justify-between gap-x-3xl bg-white'>
+                            <LargeLogo />
+                            <Button
+                                variant='single'
+                                color='theme-black'
+                                onClick={() => {
+                                    setShowSidebar(!showSidebar);
+                                }}
+                                className='h-fit screenshot:hidden !p-0'
+                                icon={MenuIcon}
+                            />
+                        </div>
+
+                        <div className='gap-y-spacing5 py-spacing5 px-spacing7 relative h-full w-full flex grow flex-col overflow-x-clip overflow-y-auto'>
+                            <CalendarSchedules />
+                            <Divider orientation='horizontal' size='100%' />
+                            <ResourceLinks />
+                            <Divider orientation='horizontal' size='100%' />
+                            {/* <TeamLinks /> */}
+                            <a
+                                href={CRX_PAGES.REPORT}
+                                className='gap-spacing1 flex items-center text-ut-burntorange underline-offset-2 hover:underline'
+                                target='_blank'
+                                rel='noreferrer'
+                                onClick={event => {
+                                    event.preventDefault();
+                                    openReportWindow();
+                                }}
+                            >
+                                <Text variant='p'>Send us Feedback!</Text>
+                                <OutwardArrowIcon className='h-3 w-3' />
+                            </a>
                         </div>
-                    )}
+
+                        <CalendarFooter />
+                    </div>
+
                     <div className='h-full min-w-5xl flex flex-grow flex-col overflow-y-auto'>
+                        <CalendarHeader
+                            sidebarOpen={showSidebar}
+                            onSidebarToggle={() => {
+                                setShowSidebar(!showSidebar);
+                            }}
+                        />
                         <div className='min-h-2xl flex-grow overflow-auto pl-2 pr-4 pt-6 screenshot:min-h-xl'>
                             <CalendarGrid courseCells={courseCells} setCourse={setCourse} />
                         </div>

src/views/components/calendar/CalendarFooter.tsx

@@ -1,40 +1,57 @@
+import { openTabFromContentScript } from '@views/lib/openNewTabFromContentScript';
 import React from 'react';
 
 import DiscordIcon from '~icons/bi/discord';
+import SettingsIcon from '~icons/material-symbols/settings';
 import GithubIcon from '~icons/ri/github-fill';
 import InstagramIcon from '~icons/ri/instagram-line';
 import LinkedinIcon from '~icons/ri/linkedin-box-fill';
 
+import { Button } from '../common/Button';
 import Link from '../common/Link';
 
+/**
+ * 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);
+};
+
 /**
  * The footer section of the calendar's sidebar
  * @returns
  */
 export default function CalendarFooter(): JSX.Element {
     return (
-        <footer className='min-w-full w-0 pl-4.5 space-y-2'>
-            <div className='flex gap-2'>
+        <footer className='px-spacing7 pt-spacing3 min-w-full w-0 flex items-center justify-between bg-white'>
+            <div className='gap-spacing4 flex'>
                 <Link className='linkanimate' href='https://www.instagram.com/longhorndevelopers'>
-                    <InstagramIcon className='h-6 w-6' />
+                    <InstagramIcon className='h-6 w-6 fill-ut-black' />
                 </Link>
                 <Link className='linkanimate' href='https://discord.gg/7pQDBGdmb7'>
-                    <DiscordIcon className='h-6 w-6' />
+                    <DiscordIcon className='h-6 w-6 fill-ut-black' />
                 </Link>
                 <Link className='linkanimate' href='https://github.com/Longhorn-Developers'>
-                    <GithubIcon className='h-6 w-6' />
+                    <GithubIcon className='h-6 w-6 fill-ut-black' />
                 </Link>
                 <Link
                     className='linkanimate'
                     href='https://www.linkedin.com/company/longhorn-developers/posts/?feedView=all'
                 >
-                    <LinkedinIcon className='h-6 w-6 -mx-0.75' />
+                    <LinkedinIcon className='h-6 w-6 fill-ut-black -mx-0.75' />
                 </Link>
             </div>
-            <p className='text-2.5 text-ut-concrete font-light tracking-wide'>
-                UT Registration Plus is a project under Longhorn Developers, a student-led organization aimed at
-                addressing issues at UT Austin.
-            </p>
+            <div>
+                <Button
+                    className='h-fit !p-0'
+                    variant='single'
+                    icon={SettingsIcon}
+                    color='ut-black'
+                    onClick={handleOpenOptions}
+                />
+            </div>
         </footer>
     );
 }

src/views/components/calendar/CalendarHeader.tsx

@@ -2,34 +2,23 @@ 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';
 
-import MenuIcon from '~icons/material-symbols/menu';
 // import RefreshIcon from '~icons/material-symbols/refresh';
-import SettingsIcon from '~icons/material-symbols/settings';
-
-/**
- * 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);
-};
+import MenuIcon from '~icons/material-symbols/menu';
 
 interface CalendarHeaderProps {
+    sidebarOpen?: boolean;
     onSidebarToggle?: () => void;
 }
 
 /**
  * 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);
 
@@ -58,23 +47,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='single'
-                icon={MenuIcon}
-                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='single'
+                    color='theme-black'
+                    onClick={onSidebarToggle}
+                    className='h-fit screenshot:hidden !p-0'
+                    icon={MenuIcon}
+                />
+            )}
+
+            <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 && (
                     <>
@@ -86,7 +79,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='single' icon={SettingsIcon} color='theme-black' onClick={handleOpenOptions} />
             </div>
         </div>
     );

src/views/components/calendar/CalendarSchedules.tsx

@@ -27,18 +27,22 @@ export function CalendarSchedules() {
     };
 
     return (
-        <div className='min-w-full w-0 items-center'>
-            <div className='m0 m-b-2 w-full flex justify-between'>
-                <Text variant='h3' className='text-nowrap'>
+        <div className='space-y-spacing2 min-w-full w-0 items-center'>
+            <div className='m0 w-full flex justify-between'>
+                <Text variant='h3' className='text-nowrap text-theme-black'>
                     MY SCHEDULES
                 </Text>
-                <Button variant='single' color='theme-black' className='h-fit p-0 btn' onClick={handleAddSchedule}>
-                    <AddSchedule className='h-6 w-6' />
-                </Button>
+                <Button
+                    variant='single'
+                    color='theme-black'
+                    className='h-fit !p-0 btn'
+                    onClick={handleAddSchedule}
+                    icon={AddSchedule}
+                />
             </div>
             <div className='flex flex-col space-y-2.5'>
                 <List
-                    gap={10}
+                    gap={8}
                     draggables={schedules}
                     itemKey={s => s.id}
                     onReordered={reordered => {