chore: removed extra space at calendar footer (#557)

* chore: removed extra space at calendar footer

* chore: fixed eslint issues

* chore: changed return type to react node

* chore: displaycourses true fixes and checks fixed

* chore: prettier fix

src/views/components/calendar/CalendarBottomBar.tsx

@@ -3,6 +3,7 @@ import Text from '@views/components/common/Text/Text';
 import { ColorPickerProvider } from '@views/contexts/ColorPickerContext';
 import type { CalendarGridCourse } from '@views/hooks/useFlattenedCourseSchedule';
 import clsx from 'clsx';
+import type { ReactNode } from 'react';
 import React from 'react';
 
 import CalendarCourseBlock from './CalendarCourseCell';
@@ -18,19 +19,15 @@ type CalendarBottomBarProps = {
  * @param courses - The list of courses to display in the calendar.
  * @returns The rendered bottom bar component.
  */
-export default function CalendarBottomBar({ courseCells, setCourse }: CalendarBottomBarProps): JSX.Element {
+export default function CalendarBottomBar({ courseCells, setCourse }: CalendarBottomBarProps): ReactNode {
     const asyncCourseCells = courseCells?.filter(block => block.async);
     const displayCourses = asyncCourseCells && asyncCourseCells.length > 0;
 
+    if (!displayCourses) return null;
+
     return (
         <div className='w-full flex pl-spacing-7 pr-spacing-3 pt-spacing-4'>
-            <div
-                className={clsx('flex flex-grow items-center gap-1 text-nowrap', {
-                    'py-7.5': !displayCourses,
-                })}
-            >
-                {displayCourses && (
-                    <>
+            <div className='flex flex-grow items-center gap-1 text-nowrap'>
                 <Text variant='p' className='text-ut-black uppercase'>
                     Async / Other
                 </Text>
@@ -54,8 +51,6 @@ export default function CalendarBottomBar({ courseCells, setCourse }: CalendarBo
                         })}
                     </ColorPickerProvider>
                 </div>
-                    </>
-                )}
             </div>
         </div>
     );