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

fix: calendar course cell colors

Browse Source
This commit is contained in:
Razboy20
2024-02-17 12:53:50 -06:00
committed by doprz
parent 5dbee6f0c3
commit 74be880f9d
4 changed files with 72 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/views/components/common/CalendarCourseCell/CalendarCourseCell.tsx
View File

@@ -1,6 +1,7 @@
import { Course, Status } from '@shared/types/Course';
import { CourseMeeting } from '@shared/types/CourseMeeting';
import React from 'react';
import { Course, Status } from 'src/shared/types/Course';
import { CourseMeeting } from 'src/shared/types/CourseMeeting';
import { CourseColors, pickFontColor } from 'src/shared/util/colors';
import ClosedIcon from '~icons/material-symbols/lock';
import WaitlistIcon from '~icons/material-symbols/timelapse';
import CancelledIcon from '~icons/material-symbols/warning';
@@ -11,11 +12,14 @@ export interface CalendarCourseBlockProps {
course: Course;
/* index into course meeting array to display */
meetingIdx?: number;
/** The background color for the course. */
color: string;
colors: CourseColors;
}
const CalendarCourseBlock: React.FC<CalendarCourseBlockProps> = ({ course, meetingIdx }: CalendarCourseBlockProps) => {
const CalendarCourseBlock: React.FC<CalendarCourseBlockProps> = ({
course,
meetingIdx,
colors,
}: CalendarCourseBlockProps) => {
let meeting: CourseMeeting | null = meetingIdx !== undefined ? course.schedule.meetings[meetingIdx] : null;
let rightIcon: React.ReactNode | null = null;
if (course.status === Status.WAITLISTED) {
@@ -26,20 +30,34 @@ const CalendarCourseBlock: React.FC<CalendarCourseBlockProps> = ({ course, meeti
rightIcon = <CancelledIcon className='h-5 w-5' />;
}
// whiteText based on secondaryColor
const fontColor = pickFontColor(colors.primaryColor);
return (
<div className='w-full flex justify-center rounded bg-slate-300 p-2 text-ut-black'>
<div
className={`w-full flex justify-center rounded p-2 ${fontColor}`}
style={{
backgroundColor: colors.primaryColor,
}}
>
<div className='flex flex-1 flex-col gap-1'>
<Text variant='h1-course' className='leading-[75%]!'>
{course.department} {course.number} - {course.instructors[0].lastName}
</Text>
<Text variant='h3-course' className='leading-[75%]!'>
{`${meeting.getTimeString({ separator: '–', capitalize: true })}${
meeting.location ? ` – ${meeting.location.building}` : ''
}`}
{meeting &&
`${meeting.getTimeString({ separator: '–', capitalize: true })}${
meeting.location ? ` – ${meeting.location.building}` : ''
}`}
</Text>
</div>
{rightIcon && (
<div className='h-fit flex items-center justify-center justify-self-start rounded bg-slate-700 p-0.5 text-white'>
<div
className='h-fit flex items-center justify-center justify-self-start rounded p-0.5 text-white'
style={{
backgroundColor: colors.secondaryColor,
}}
>
{rightIcon}
</div>
)}