fix: CalendarCourseCell spacing

src/stories/components/CalendarCourseCell.stories.tsx

@@ -39,40 +39,31 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
-    args: {
-        course: new Course({
-            uniqueId: 123,
-            number: '311C',
-            fullName: "311C - Bevo's Default Course",
-            courseName: "Bevo's Default Course",
-            department: 'BVO',
-            creditHours: 3,
-            status: Status.WAITLISTED,
-            instructors: [new Instructor({ firstName: '', lastName: 'Bevo', fullName: 'Bevo' })],
-            isReserved: false,
-            url: '',
-            flags: [],
-            schedule: new CourseSchedule({
-                meetings: [
-                    new CourseMeeting({
-                        days: [DAY_MAP.M, DAY_MAP.W, DAY_MAP.F],
-                        startTime: 480,
-                        endTime: 570,
-                        location: {
-                            building: 'UTC',
-                            room: '123',
-                        },
-                    }),
-                ],
-            }),
-            instructionMode: 'In Person',
-            semester: {
-                year: 2024,
-                season: 'Spring',
-            },
-        }),
-        meetingIdx: 0,
-        color: 'red',
-    },
+export const Default: Story = {};
+
+export const Variants: Story = {
+    render: props => (
+        <div className='grid grid-cols-2 h-40 max-w-60 w-90vw gap-x-4 gap-y-2'>
+            <CalendarCourseCell
+                {...props}
+                course={new Course({ ...exampleCourse, status: Status.OPEN })}
+                colors={getCourseColors('green', 500)}
+            />
+            <CalendarCourseCell
+                {...props}
+                course={new Course({ ...exampleCourse, status: Status.CLOSED })}
+                colors={getCourseColors('teal', 400)}
+            />
+            <CalendarCourseCell
+                {...props}
+                course={new Course({ ...exampleCourse, status: Status.WAITLISTED })}
+                colors={getCourseColors('indigo', 400)}
+            />
+            <CalendarCourseCell
+                {...props}
+                course={new Course({ ...exampleCourse, status: Status.CANCELLED })}
+                colors={getCourseColors('red', 500)}
+            />
+        </div>
+    ),
 };

src/views/components/common/CalendarCourseCell/CalendarCourseCell.tsx

@@ -1,4 +1,6 @@
-import { Status } from '@shared/types/Course';
+import { Course, Status } from '@shared/types/Course';
+import { CourseMeeting } from '@shared/types/CourseMeeting';
+import clsx from 'clsx';
 import React from 'react';
 import { CourseColors, pickFontColor } from 'src/shared/util/colors';
 import ClosedIcon from '~icons/material-symbols/lock';
@@ -36,6 +38,7 @@ const CalendarCourseCell: React.FC<CalendarCourseCellProps> = ({ course, meeting
                 backgroundColor: colors.primaryColor,
             }}
         >
+<<<<<<< HEAD
             <div className='flex flex-1 flex-col gap-1'>
                 <Text variant='h1-course' className='leading-[75%]!'>
                     {courseDeptAndInstr}
@@ -43,6 +46,22 @@ const CalendarCourseCell: React.FC<CalendarCourseCellProps> = ({ course, meeting
                 {timeAndLocation && (
                     <Text variant='h3-course' className='leading-[75%]!'>
                         {timeAndLocation}
+=======
+            <div className='flex flex-1 flex-col gap-1 overflow-x-hidden'>
+                <Text
+                    variant='h1-course'
+                    className={clsx('-my-0.8 leading-tight', {
+                        truncate: meeting,
+                    })}
+                >
+                    {course.department} {course.number} - {course.instructors[0].lastName}
+                </Text>
+                {meeting && (
+                    <Text variant='h3-course' className='-mb-0.5'>
+                        {`${meeting.getTimeString({ separator: '–', capitalize: true })}${
+                            meeting.location ? ` – ${meeting.location.building}` : ''
+                        }`}
+>>>>>>> 73fe14e (fix calendar course cell spacing)
                     </Text>
                 )}
             </div>

src/views/components/common/PopupCourseBlock/PopupCourseBlock.tsx

@@ -1,8 +1,8 @@
-import clsx from 'clsx';
-import React, { useState } from 'react';
 import { Course, Status } from '@shared/types/Course';
+import { CourseColors, pickFontColor } from '@shared/util/colors';
 import { StatusIcon } from '@shared/util/icons';
-import { CourseColors, getCourseColors, pickFontColor } from '@shared/util/colors';
+import clsx from 'clsx';
+import React from 'react';
 import DragIndicatorIcon from '~icons/material-symbols/drag-indicator';
 import Text from '../Text/Text';
 
@@ -21,7 +21,12 @@ export interface PopupCourseBlockProps {
  *
  * @param props PopupCourseBlockProps
  */
-export default function PopupCourseBlock({ className, course, colors, dragHandleProps }: PopupCourseBlockProps): JSX.Element {
+export default function PopupCourseBlock({
+    className,
+    course,
+    colors,
+    dragHandleProps,
+}: PopupCourseBlockProps): JSX.Element {
     // whiteText based on secondaryColor
     const fontColor = pickFontColor(colors.primaryColor);
 
@@ -41,10 +46,7 @@ export default function PopupCourseBlock({ className, course, colors, dragHandle
             >
                 <DragIndicatorIcon className='h-6 w-6 text-white' />
             </div>
-            <Text
-                className={clsx('flex-1 py-3.5 text-ellipsis whitespace-nowrap overflow-hidden', fontColor)}
-                variant='h1-course'
-            >
+            <Text className={clsx('flex-1 py-3.5 truncate', fontColor)} variant='h1-course'>
                 <span className='px-0.5 font-450'>{course.uniqueId}</span> {course.department} {course.number} &ndash;{' '}
                 {course.instructors.length === 0 ? 'Unknown' : course.instructors.map(v => v.lastName)}
             </Text>