DerexXD/UT-Registration-Plus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
This commit is contained in:
ishita778
2025-03-18 04:00:46 -05:00
committed by GitHub
parent ca734dcd39
commit 0dcae25b93
1 changed files with 28 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
src/views/components/calendar/CalendarBottomBar.tsx
View File

@@ -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>
);