feat(ui): Modify Calendar Footer design and Unscheduled courses (#503)

* feat: update styling and text for unscheduled courses in footer

* refactor: correct offwhite theme colors

* fix(ui): adjust em dash spacing, footer bottom padding, and vertically align course text

---------

Co-authored-by: doprz <52579214+doprz@users.noreply.github.com>

src/shared/types/ThemeColors.ts

@@ -18,8 +18,7 @@ export const colors = {
     theme: {
         red: '#D10000',
         black: '#1A2024',
-        offwhite1: ' #D6D2C450',
+        offwhite: '#D6D2C4',
-        offwhite2: '#D6D2C420',
         black1: '#333F4850',
         black2: '#333F4820',
         staticwhite: '#FFFFFF',

src/views/components/calendar/Calendar.tsx

@@ -65,7 +65,7 @@ export default function Calendar(): JSX.Element {
                 <div className='h-screen flex overflow-auto'>
                     <div
                         className={clsx(
-                            'py-spacing-6 relative h-full min-h-screen w-full flex flex-none flex-col justify-between overflow-clip whitespace-nowrap border-r border-theme-offwhite1 shadow-[2px_0_10px,rgba(214_210_196_/_.1)] motion-safe:duration-300 motion-safe:ease-out-expo motion-safe:transition-[max-width] screenshot:hidden',
+                            'py-spacing-6 relative h-full min-h-screen w-full flex flex-none flex-col justify-between overflow-clip whitespace-nowrap border-r border-theme-offwhite/50 shadow-[2px_0_10px,rgba(214_210_196_/_.1)] motion-safe:duration-300 motion-safe:ease-out-expo motion-safe:transition-[max-width] screenshot:hidden',
                             {
                                 'max-w-[20.3125rem] ': showSidebar,
                                 'max-w-0 pointer-events-none': !showSidebar,

src/views/components/calendar/CalendarBottomBar.tsx

@@ -23,18 +23,18 @@ export default function CalendarBottomBar({ courseCells, setCourse }: CalendarBo
     const displayCourses = asyncCourseCells && asyncCourseCells.length > 0;
 
     return (
-        <div className='w-full flex py-1.25 pl-7.5 pr-6.25'>
+        <div className='w-full flex pl-spacing-7 pr-spacing-3 pt-spacing-4'>
             <div
-                className={clsx('flex flex-grow items-center gap-3.75 text-nowrap', {
+                className={clsx('flex flex-grow items-center gap-1 text-nowrap', {
                     'py-7.5': !displayCourses,
                 })}
             >
                 {displayCourses && (
                     <>
-                        <Text variant='p' className='text-ut-black'>
+                        <Text variant='p' className='text-ut-black uppercase'>
-                            ASYNC / OTHER
+                            Unscheduled
                         </Text>
-                        <Text variant='h4' className='text-gray-300'>
+                        <Text variant='h4' className='text-theme-offwhite/50'>
                             —
                         </Text>
                         <div className='inline-flex gap-2.5'>
@@ -46,7 +46,7 @@ export default function CalendarBottomBar({ courseCells, setCourse }: CalendarBo
                                             courseDeptAndInstr={courseDeptAndInstr}
                                             status={status}
                                             key={courseDeptAndInstr}
-                                            className={clsx(className, 'w-35! h-15!')}
+                                            className={clsx(className, 'w-35! h-12.5! items-center')}
                                             onClick={() => setCourse(block.course)}
                                             blockData={block}
                                         />

src/views/components/common/Divider.tsx

@@ -41,7 +41,7 @@ export default function Divider({ className, testId, size, orientation }: Divide
         <div
             style={style}
             data-testid={testId}
-            className={clsx('border-solid border-theme-offwhite1 w-0 h-0', className)}
+            className={clsx('border-solid border-theme-offwhite/50 w-0 h-0', className)}
         />
     );
 }

src/views/components/common/ScheduleListItem.tsx

@@ -166,7 +166,7 @@ export default function ScheduleListItem({ schedule, onClick }: ScheduleListItem
                                 as={ExtensionRootWrapper}
                                 className={clsx([
                                     styleResetClass,
-                                    'w-fit cursor-pointer origin-top-right rounded bg-white p-1 text-black shadow-lg transition border border-theme-offwhite1 focus:outline-none',
+                                    'w-fit cursor-pointer origin-top-right rounded bg-white p-1 text-black shadow-lg transition border border-theme-offwhite/50 focus:outline-none',
                                     'data-[closed]:(opacity-0 scale-95)',
                                     'data-[enter]:(ease-out-expo duration-150)',
                                     'data-[leave]:(ease-out duration-50)',

src/views/components/injected/CourseCatalogInjectedPopup/GradeDistribution.tsx

@@ -140,7 +140,7 @@ export default function GradeDistribution({ course }: GradeDistributionProps): J
             tickWidth: 1,
             tickLength: 10,
             tickColor: '#9CADB7',
-            crosshair: { color: extendedColors.theme.offwhite2 },
+            crosshair: { color: extendedColors.theme.offwhite },
             lineColor: '#9CADB7',
         },
         yAxis: {