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

src/shared/types/CourseMeeting.ts

@@ -108,7 +108,7 @@ export class CourseMeeting {
         }
 
         startTimeString += startMinute === 0 ? ':00' : `:${startMinute}`;
-        startTimeString += startHour >= 12 ? ' p.m.' : ' a.m.';
+        startTimeString += startHour >= 12 ? 'pm' : 'am';
 
         if (endHour === 0) {
             endTimeString = '12';
@@ -117,13 +117,9 @@ export class CourseMeeting {
         } else {
             endTimeString = `${endHour}`;
         }
-        endTimeString += endMinute === 0 ? ':00' : `:${endMinute}`;
-        endTimeString += endHour >= 12 ? ' p.m.' : ' a.m.';
 
-        if (options.capitalize) {
+        endTimeString += endMinute === 0 ? ':00' : `:${endMinute}`;
-            startTimeString = startTimeString.toUpperCase();
+        endTimeString += endHour >= 12 ? 'pm' : 'am';
-            endTimeString = endTimeString.toUpperCase();
-        }
 
         return `${startTimeString} ${options.separator} ${endTimeString}`;
     }
@@ -135,8 +131,6 @@ export class CourseMeeting {
 type TimeStringOptions = {
     /** the separator between the start and end times */
     separator: string;
-    /** capitalizes the AM/PM */
-    capitalize?: boolean;
 };
 
 /**

src/stories/components/calendar/CalendarCourseCell.stories.tsx

@@ -30,7 +30,7 @@ const meta = {
         courseDeptAndInstr: ExampleCourse.department,
         className: ExampleCourse.number,
         status: ExampleCourse.status,
-        timeAndLocation: ExampleCourse.schedule.meetings[0]!.getTimeString({ separator: '-' }),
+        timeAndLocation: ExampleCourse.schedule.meetings[0]!.getTimeString({ separator: '–' }),
 
         colors: getCourseColors('emerald', 500),
     },

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 oneHour = 60;
-    const timeAndLocation = `${time}${location ? ` - ${location.building}` : ''}`;
+    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: {