feat(ui): calendar sidebar redesign

src/views/components/calendar/Calendar.tsx

@@ -1,5 +1,7 @@
 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';
@@ -13,9 +15,13 @@ import { useFlattenedCourseSchedule } from '@views/hooks/useFlattenedCourseSched
 import { MessageListener } from 'chrome-extension-toolkit';
 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 +60,52 @@ 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'>
+                <div className='h-screen flex overflow-auto'>
                     {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'>
+                        <div className='h-full flex flex-none flex-col justify-between border-r border-ut-offwhite/75 px-7.5 py-5 shadow-[2px_0_10px,rgba(214_210_196_/_.1)] screenshot:hidden'>
+                            <div className='h-full w-fit flex flex-col overflow-auto'>
+                                <div className='w-full flex items-center justify-between gap-x-3xl pb-[1.5625rem]'>
+                                    <LargeLogo />
+                                    <Button
+                                        variant='single'
+                                        color='theme-black'
+                                        onClick={() => {
+                                            setShowSidebar(!showSidebar);
+                                        }}
+                                        className='h-fit screenshot:hidden !p-0'
+                                    >
+                                        <MenuIcon className='size-6' />
+                                    </Button>
+                                </div>
                                 <CalendarSchedules />
                                 <Divider orientation='horizontal' size='100%' className='my-5' />
                                 <ImportantLinks />
                                 <Divider orientation='horizontal' size='100%' className='my-5' />
-                                <TeamLinks />
+                                {/* <TeamLinks /> */}
+                                <a
+                                    href={CRX_PAGES.REPORT}
+                                    className='flex items-center gap-0.5 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,20 +1,32 @@
+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='min-w-full w-0 flex items-center justify-between'>
+            <div className='flex gap-3.75'>
                 <Link className='linkanimate' href='https://www.instagram.com/longhorndevelopers'>
                     <InstagramIcon className='h-6 w-6' />
                 </Link>
@@ -31,10 +43,7 @@ export default function CalendarFooter(): JSX.Element {
                     <LinkedinIcon className='h-6 w-6 -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>
+            <Button variant='single' icon={SettingsIcon} color='ut-black' onClick={handleOpenOptions} />
         </footer>
     );
 }

src/views/components/calendar/CalendarHeader.tsx

@@ -2,36 +2,25 @@ 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);
+    const [enableDataRefreshing, setEnableDataRefreshing] = useState<boolean>(false);
 
     const [activeSchedule] = useSchedules();
 
@@ -58,23 +47,28 @@ 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'
+                >
+                    <MenuIcon className='size-6' />
+                </Button>
+            )}
+
+            <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 +80,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/ImportantLinks.tsx

@@ -22,26 +22,26 @@ const links: LinkItem[] = [
         text: 'Course Schedule Archives',
         url: 'https://registrar.utexas.edu/schedules/archive',
     },
+    {
+        text: 'My Degree Audit (IDA)',
+        url: 'https://utdirect.utexas.edu/apps/degree/audits/',
+    },
     // {
     //     text: "Summer '24 Course Schedule",
     //     url: 'https://utdirect.utexas.edu/apps/registrar/course_schedule/20246/',
     // },
+    // {
+    //     text: "'24-'25 Academic Calendar",
+    //     url: 'https://registrar.utexas.edu/calendars/24-25',
+    // },
     {
-        text: "'24-'25 Academic Calendar",
-        url: 'https://registrar.utexas.edu/calendars/24-25',
-    },
-    {
-        text: 'Registration Info Sheet',
+        text: 'Registration Info Sheet (RIS)',
         url: 'https://utdirect.utexas.edu/registrar/ris.WBX',
     },
     {
         text: 'Register for Courses',
         url: 'https://utdirect.utexas.edu/registration/chooseSemester.WBX',
     },
-    {
-        text: 'Degree Audit',
-        url: 'https://utdirect.utexas.edu/apps/degree/audits/',
-    },
 ];
 
 /**
@@ -50,8 +50,8 @@ const links: LinkItem[] = [
  */
 export default function ImportantLinks({ className }: Props): JSX.Element {
     return (
-        <article className={clsx(className, 'flex flex-col gap-2')}>
-            <Text variant='h3'>Useful Links</Text>
+        <article className={clsx(className, 'flex flex-col gap-2.5')}>
+            <Text variant='h3'>Resources</Text>
             {links.map(link => (
                 <a
                     key={link.text}

src/views/components/common/ScheduleTotalHoursAndCourses.tsx

@@ -24,36 +24,19 @@ export default function ScheduleTotalHoursAndCourses({
     totalCourses,
 }: ScheduleTotalHoursAndCoursesProps): JSX.Element {
     return (
-        <div className='min-w-full w-0 items-center whitespace-nowrap'>
-            <Text className='truncate text-ut-burntorange normal-case!' variant='h1' as='span'>
-                {scheduleName}
+        <div className='min-w-full flex flex-col items-start whitespace-nowrap'>
+            <Text className='truncate text-ut-burntorange' variant='h1' as='span'>
+                {`${scheduleName} `}
+            </Text>
+            <Text variant='h3' as='div' className='flex flex-row items-center gap-2.5 text-theme-black'>
+                <Text variant='h4' as='span' className='hidden text-ut-black uppercase screenshot:inline sm:inline'>
+                    {totalHours} {totalHours === 1 ? 'Hour' : 'Hours'}
+                </Text>
+
+                <Text variant='h4' as='span' className='hidden text-ut-black uppercase screenshot:inline sm:inline'>
+                    {totalCourses} {totalCourses === 1 ? 'Course' : 'Courses'}
+                </Text>
             </Text>
-            <div className='flex flex-row items-center gap-2.5 text-theme-black'>
-                <div className='flex flex-row items-center gap-1.25 text-theme-black'>
-                    <Text variant='h3' as='span' className='capitalize screenshot:inline sm:inline'>
-                        {totalHours}
-                    </Text>
-                    <Text
-                        variant='h3'
-                        as='span'
-                        className='capitalize screenshot:inline sm:inline font-all-small-caps!'
-                    >
-                        {totalHours === 1 ? 'HOUR' : 'HOURS'}
-                    </Text>
-                </div>
-                <div className='flex flex-row items-center gap-1.25 text-theme-black'>
-                    <Text variant='h3' as='span' className='capitalize screenshot:inline sm:inline'>
-                        {totalCourses}
-                    </Text>
-                    <Text
-                        variant='h3'
-                        as='span'
-                        className='capitalize screenshot:inline sm:inline font-all-small-caps!'
-                    >
-                        {totalCourses === 1 ? 'COURSE' : 'COURSES'}
-                    </Text>
-                </div>
-            </div>
         </div>
     );
 }