feat: async text hiding on Calendar's Bottom Bar when there are no async courses (#152)

* feat: async text not visible when no async courses

* refactor: converted useState to boolean

* fix: remove unused import

* fix: maintain component height when hiding is enabled

* refactor: match stylings to figma

* refactor: padding change to match when there are courses to display

---------

Co-authored-by: Razboy20 <razboy20@gmail.com>

src/stories/components/calendar/CalendarBottomBar.stories.tsx

@@ -102,3 +102,14 @@ export const Default: Story = {
         </div>
     ),
 };
+export const Empty: Story = {
+    args: {
+        courses: [],
+        calendarRef: { current: null },
+    },
+    render: props => (
+        <div className='outline-red outline w-292.5!'>
+            <CalendarBottomBar {...props} />
+        </div>
+    ),
+};

src/views/components/calendar/CalendarBottomBar/CalendarBottomBar.tsx

@@ -24,28 +24,37 @@ type CalendarBottomBarProps = {
  * @returns {JSX.Element} The rendered bottom bar component.
  */
 export default function CalendarBottomBar({ courses, calendarRef }: CalendarBottomBarProps): JSX.Element {
+    const displayCourses = courses && courses.length > 0;
+
     return (
-        <div className='w-full flex py-1.25'>
+        <div className='w-full flex py-1.25 pl-7.5 pr-6.25'>
-            <div className='flex flex-grow items-center gap-3.75 pl-7.5 pr-2.5'>
+            <div
-                <Text variant='h4'>Async. and Other:</Text>
+                className={clsx('flex flex-grow items-center gap-3.75 text-nowrap', {
-                <div className='h-14 inline-flex gap-2.5'>
+                    'py-7.5': !displayCourses,
-                    {courses?.map(({ courseDeptAndInstr, status, colors, className }) => (
+                })}
-                        <CalendarCourseBlock
+            >
-                            courseDeptAndInstr={courseDeptAndInstr}
+                {displayCourses && (
-                            status={status}
+                    <>
-                            colors={colors}
+                        <Text variant='h4'>Other Classes:</Text>
-                            key={courseDeptAndInstr}
+                        <div className='inline-flex gap-2.5'>
-                            className={clsx(className, 'w-35!')}
+                            {courses.map(({ courseDeptAndInstr, status, colors, className }) => (
-                        />
+                                <CalendarCourseBlock
-                    ))}
+                                    courseDeptAndInstr={courseDeptAndInstr}
-                </div>
+                                    status={status}
+                                    colors={colors}
+                                    key={courseDeptAndInstr}
+                                    className={clsx(className, 'w-35! h-15!')}
+                                />
+                            ))}
+                        </div>
+                    </>
+                )}
             </div>
-            <div className='flex items-center pl-2.5 pr-7.5'>
+            <div className='flex items-center'>
-                <Divider orientation='vertical' size='1rem' className='mx-1.25' />
+                {displayCourses && <Divider orientation='vertical' size='1rem' className='mx-1.25' />}
                 <Button variant='single' color='ut-black' icon={CalendarMonthIcon} onClick={saveAsCal}>
                     Save as .CAL
                 </Button>
-                <Divider orientation='vertical' size='1rem' className='mx-1.25' />
                 <Button variant='single' color='ut-black' icon={ImageIcon} onClick={() => saveCalAsPng(calendarRef)}>
                     Save as .PNG
                 </Button>

src/views/components/calendar/CalendarCourseCell/CalendarCourseCell.tsx

@@ -56,30 +56,27 @@ export default function CalendarCourseCell({
 
     return (
         <div
-            className={clsx(
+            className={clsx('h-full w-full flex justify-center rounded p-2 cursor-pointer', fontColor, className)}
-                'h-full w-full flex justify-center rounded p-2 overflow-x-hidden cursor-default hover:cursor-pointer',
-                fontColor,
-                className
-            )}
             style={{
                 backgroundColor: colors.primaryColor,
             }}
             onClick={onClick}
         >
-            <div className='flex flex-1 flex-col gap-1 overflow-x-hidden'>
+            <div
+                className={clsx('flex flex-1 flex-col gap-0.25 overflow-hidden max-h-full', {
+                    'self-center': !timeAndLocation,
+                })}
+            >
                 <Text
                     variant='h1-course'
-                    className={clsx('-my-0.8 leading-tight', {
+                    className={clsx('leading-tight truncate', {
-                        truncate: timeAndLocation,
+                        '-my-0.8': timeAndLocation,
+                        'text-wrap': !timeAndLocation,
                     })}
                 >
                     {courseDeptAndInstr}
                 </Text>
-                {timeAndLocation && (
+                {timeAndLocation && <Text variant='h3-course'>{timeAndLocation}</Text>}
-                    <Text variant='h3-course' className='-mb-0.5'>
-                        {timeAndLocation}
-                    </Text>
-                )}
             </div>
             {rightIcon && (
                 <div