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 { ColorPickerProvider } from '@views/contexts/ColorPickerContext';
import type { CalendarGridCourse } from '@views/hooks/useFlattenedCourseSchedule'; import type { CalendarGridCourse } from '@views/hooks/useFlattenedCourseSchedule';
import clsx from 'clsx'; import clsx from 'clsx';
import type { ReactNode } from 'react';
import React from 'react'; import React from 'react';
import CalendarCourseBlock from './CalendarCourseCell'; import CalendarCourseBlock from './CalendarCourseCell';
@@ -18,44 +19,38 @@ type CalendarBottomBarProps = {
* @param courses - The list of courses to display in the calendar. * @param courses - The list of courses to display in the calendar.
* @returns The rendered bottom bar component. * @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 asyncCourseCells = courseCells?.filter(block => block.async);
const displayCourses = asyncCourseCells && asyncCourseCells.length > 0; const displayCourses = asyncCourseCells && asyncCourseCells.length > 0;
if (!displayCourses) return null;
return ( return (
<div className='w-full flex pl-spacing-7 pr-spacing-3 pt-spacing-4'> <div className='w-full flex pl-spacing-7 pr-spacing-3 pt-spacing-4'>
<div <div className='flex flex-grow items-center gap-1 text-nowrap'>
className={clsx('flex flex-grow items-center gap-1 text-nowrap', { <Text variant='p' className='text-ut-black uppercase'>
'py-7.5': !displayCourses, Async / Other
})} </Text>
> <Text variant='h4' className='text-theme-offwhite/50'>
{displayCourses && ( —
<> </Text>
<Text variant='p' className='text-ut-black uppercase'> <div className='inline-flex gap-2.5'>
Async / Other <ColorPickerProvider>
</Text> {asyncCourseCells.map(block => {
<Text variant='h4' className='text-theme-offwhite/50'> const { courseDeptAndInstr, status, className } = block.componentProps;
— return (
</Text> <CalendarCourseBlock
<div className='inline-flex gap-2.5'> key={block.course.uniqueId}
<ColorPickerProvider> courseDeptAndInstr={courseDeptAndInstr}
{asyncCourseCells.map(block => { status={status}
const { courseDeptAndInstr, status, className } = block.componentProps; className={clsx(className, 'w-35! h-12.5! items-center')}
return ( onClick={() => setCourse(block.course)}
<CalendarCourseBlock blockData={block}
key={block.course.uniqueId} />
courseDeptAndInstr={courseDeptAndInstr} );
status={status} })}
className={clsx(className, 'w-35! h-12.5! items-center')} </ColorPickerProvider>
onClick={() => setCourse(block.course)} </div>
blockData={block}
/>
);
})}
</ColorPickerProvider>
</div>
</>
)}
</div> </div>
</div> </div>
); );