rename to course block and fix line height for styling

src/stories/components/CalendarCourse.stories.tsx

@@ -3,7 +3,7 @@ import { Course, Status } from 'src/shared/types/Course';
 import { CourseMeeting, DAY_MAP } from 'src/shared/types/CourseMeeting';
 import { CourseSchedule } from 'src/shared/types/CourseSchedule';
 import Instructor from 'src/shared/types/Instructor';
-import CalendarCourse from 'src/views/components/common/CalendarCourseMeeting/CalendarCourseMeeting';
+import CalendarCourse from 'src/views/components/common/CalendarCourseBlock/CalendarCourseMeeting';
 
 const meta = {
     title: 'Components/Common/CalendarCourseMeeting',

src/views/components/common/CalendarCourseBlock/CalendarCourseMeeting.module.scss

@@ -0,0 +1,34 @@
+.component {
+    display: flex;
+    padding: 7px 7px 9px 7px;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 5px;
+    flex: 1 0 0;
+    align-self: stretch;
+    border-radius: 4px;
+    background: #cbd5e1;
+    .content {
+        display: flex;
+        gap: 7px;
+        .course-detail {
+            display: flex;
+            flex-direction: column;
+            gap: 5px;
+            width: 154px;
+            .course {
+                font-size: 16px;
+                line-height: 16px;
+                font-weight: 600;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+            .time-and-location {
+                font-size: 11px;
+                line-height: 11px;
+                font-weight: 400;
+            }
+        }
+    }
+}

src/views/components/common/CalendarCourseBlock/CalendarCourseMeeting.tsx

@@ -29,17 +29,19 @@ const CalendarCourseMeeting: React.FC<CalendarCourseMeetingProps> = ({
 }: CalendarCourseMeetingProps) => {
     let meeting: CourseMeeting | null = meetingIdx !== undefined ? course.schedule.meetings[meetingIdx] : null;
     return (
-        <div className={styles['calendar-course']}>
-            <div>
-                {course.department} {course.number} - {course.instructors[0].lastName}
-            </div>
-            {meeting && (
-                <div>
-                    {`${meeting.getTimeString({ separator: '-', capitalize: true })}${
-                        meeting.location ? ` - ${meeting.location.building}` : ''
-                    }`}
+        <div className={styles.component}>
+            <div className={styles.content}>
+                <div className={styles['course-detail']}>
+                    <div className={styles.course}>
+                        {course.department} {course.number} - {course.instructors[0].lastName}
+                    </div>
+                    <div className={styles['time-and-location']}>
+                        {`${meeting.getTimeString({ separator: '-', capitalize: true })}${
+                            meeting.location ? ` - ${meeting.location.building}` : ''
+                        }`}
+                    </div>
                 </div>
-            )}
+            </div>
         </div>
     );
 };

src/views/components/common/CalendarCourseMeeting/CalendarCourseMeeting.module.scss

@@ -1,11 +0,0 @@
-.calendar-course {
-    display: flex;
-    padding: 7px 7px 9px 7px;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 5px;
-    flex: 1 0 0;
-    align-self: stretch;
-    border-radius: 4px;
-    background: #cbd5e1;
-}