From 0dcae25b93f576e92c28c43a536874d011dfc4ac Mon Sep 17 00:00:00 2001
From: ishita778 <122644722+ishita778@users.noreply.github.com>
Date: Tue, 18 Mar 2025 04:00:46 -0500
Subject: [PATCH] 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
---
 .../components/calendar/CalendarBottomBar.tsx | 61 +++++++++----------
 1 file changed, 28 insertions(+), 33 deletions(-)

diff --git a/src/views/components/calendar/CalendarBottomBar.tsx b/src/views/components/calendar/CalendarBottomBar.tsx
index 7b9831da..9a4b4141 100644
--- a/src/views/components/calendar/CalendarBottomBar.tsx
+++ b/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,44 +19,38 @@ 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 && (
-                    <>
-                        <Text variant='p' className='text-ut-black uppercase'>
-                            Async / Other
-                        </Text>
-                        <Text variant='h4' className='text-theme-offwhite/50'>
-                            —
-                        </Text>
-                        <div className='inline-flex gap-2.5'>
-                            <ColorPickerProvider>
-                                {asyncCourseCells.map(block => {
-                                    const { courseDeptAndInstr, status, className } = block.componentProps;
-                                    return (
-                                        <CalendarCourseBlock
-                                            key={block.course.uniqueId}
-                                            courseDeptAndInstr={courseDeptAndInstr}
-                                            status={status}
-                                            className={clsx(className, 'w-35! h-12.5! items-center')}
-                                            onClick={() => setCourse(block.course)}
-                                            blockData={block}
-                                        />
-                                    );
-                                })}
-                            </ColorPickerProvider>
-                        </div>
-                    </>
-                )}
+            <div className='flex flex-grow items-center gap-1 text-nowrap'>
+                <Text variant='p' className='text-ut-black uppercase'>
+                    Async / Other
+                </Text>
+                <Text variant='h4' className='text-theme-offwhite/50'>
+                    —
+                </Text>
+                <div className='inline-flex gap-2.5'>
+                    <ColorPickerProvider>
+                        {asyncCourseCells.map(block => {
+                            const { courseDeptAndInstr, status, className } = block.componentProps;
+                            return (
+                                <CalendarCourseBlock
+                                    key={block.course.uniqueId}
+                                    courseDeptAndInstr={courseDeptAndInstr}
+                                    status={status}
+                                    className={clsx(className, 'w-35! h-12.5! items-center')}
+                                    onClick={() => setCourse(block.course)}
+                                    blockData={block}
+                                />
+                            );
+                        })}
+                    </ColorPickerProvider>
+                </div>
             </div>
         </div>
     );