From 77a1d67af34380dbbec6e75a443ce57b3d5b0e77 Mon Sep 17 00:00:00 2001
From: abhinavchadaga <abhinav.chadaga@utexas.edu>
Date: Thu, 1 Feb 2024 20:55:13 -0600
Subject: [PATCH] rename to course block and fix line height for styling

---
 .../components/CalendarCourse.stories.tsx     |  2 +-
 .../CalendarCourseMeeting.module.scss         | 34 +++++++++++++++++++
 .../CalendarCourseMeeting.tsx                 | 22 ++++++------
 .../CalendarCourseMeeting.module.scss         | 11 ------
 4 files changed, 47 insertions(+), 22 deletions(-)
 create mode 100644 src/views/components/common/CalendarCourseBlock/CalendarCourseMeeting.module.scss
 rename src/views/components/common/{CalendarCourseMeeting => CalendarCourseBlock}/CalendarCourseMeeting.tsx (66%)
 delete mode 100644 src/views/components/common/CalendarCourseMeeting/CalendarCourseMeeting.module.scss

diff --git a/src/stories/components/CalendarCourse.stories.tsx b/src/stories/components/CalendarCourse.stories.tsx
index 035789de..72388527 100644
--- a/src/stories/components/CalendarCourse.stories.tsx
+++ b/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',
diff --git a/src/views/components/common/CalendarCourseBlock/CalendarCourseMeeting.module.scss b/src/views/components/common/CalendarCourseBlock/CalendarCourseMeeting.module.scss
new file mode 100644
index 00000000..43cef66a
--- /dev/null
+++ b/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;
+            }
+        }
+    }
+}
diff --git a/src/views/components/common/CalendarCourseMeeting/CalendarCourseMeeting.tsx b/src/views/components/common/CalendarCourseBlock/CalendarCourseMeeting.tsx
similarity index 66%
rename from src/views/components/common/CalendarCourseMeeting/CalendarCourseMeeting.tsx
rename to src/views/components/common/CalendarCourseBlock/CalendarCourseMeeting.tsx
index cabf2154..dc651ca9 100644
--- a/src/views/components/common/CalendarCourseMeeting/CalendarCourseMeeting.tsx
+++ b/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>
     );
 };
diff --git a/src/views/components/common/CalendarCourseMeeting/CalendarCourseMeeting.module.scss b/src/views/components/common/CalendarCourseMeeting/CalendarCourseMeeting.module.scss
deleted file mode 100644
index f41b942b..00000000
--- a/src/views/components/common/CalendarCourseMeeting/CalendarCourseMeeting.module.scss
+++ /dev/null
@@ -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;
-}