feat: modify Course Block text style and time and location text (#409)

src/views/components/calendar/CalendarCourseCell.tsx

@@ -101,7 +101,7 @@ export default function CalendarCourseCell({
                     {courseDeptAndInstr}
                 </Text>
                 {timeAndLocation && (
-                    <Text variant='h3-course' as='p'>
+                    <Text variant='h3-course' as='p' className='whitespace-pre-line'>
                         {timeAndLocation}
                     </Text>
                 )}

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

@@ -34,7 +34,7 @@
     font-size: 0.6875rem;
     font-weight: 400;
     letter-spacing: 0;
-    line-height: 100%; /* 0.6875rem */
+    line-height: 0.775rem;
 }
 
 .h3 {
@@ -58,7 +58,7 @@
 }
 
 .h1-course {
-    font-size: 1rem;
+    font-size: 0.9375rem;
     font-weight: 550;
     text-transform: capitalize;
     letter-spacing: 0;

src/views/components/injected/CourseCatalogInjectedPopup/HeadingAndActions.tsx

@@ -168,7 +168,7 @@ export default function HeadingAndActions({ course, activeSchedule, onClose }: H
                 <div className='mt-1 flex flex-col'>
                     {schedule.meetings.map(meeting => {
                         const daysString = meeting.getDaysString({ format: 'long', separator: 'long' });
-                        const timeString = meeting.getTimeString({ separator: ' to ', capitalize: false });
+                        const timeString = meeting.getTimeString({ separator: ' to ' });
                         return (
                             <Text
                                 key={

src/views/hooks/useFlattenedCourseSchedule.ts

@@ -147,10 +147,19 @@ function processInPersonMeetings(
     const { days, startTime, endTime, location } = meeting;
     const midnightIndex = 1440;
     const normalizingTimeFactor = 720;
-    const time = meeting.getTimeString({ separator: '-', capitalize: true });
-    const timeAndLocation = `${time}${location ? ` - ${location.building}` : ''}`;
+    const oneHour = 60;
+    const time = meeting.getTimeString({ separator: '–' });
     const normalizedStartTime = startTime >= midnightIndex ? startTime - normalizingTimeFactor : startTime;
     const normalizedEndTime = endTime >= midnightIndex ? endTime - normalizingTimeFactor : endTime;
+    const courseDuration = normalizedEndTime - normalizedStartTime;
+    let timeAndLocation = `${time}`;
+    if (location) {
+        if (courseDuration > oneHour) {
+            timeAndLocation += `\n${location.building} ${location.room}`;
+        } else {
+            timeAndLocation += `, ${location.building} ${location.room}`;
+        }
+    }
 
     return days.map(day => ({
         calendarGridPoint: {