Small style adjustments

src/shared/types/CourseMeeting.ts

@@ -4,13 +4,13 @@ import { Serialized } from 'chrome-extension-toolkit';
  * a map of the days of the week that a class is taught, and the corresponding abbreviation
  */
 export const DAY_MAP = {
-    M: 'Monday',
-    T: 'Tuesday',
-    W: 'Wednesday',
-    TH: 'Thursday',
-    F: 'Friday',
-    S: 'Saturday',
-    SU: 'Sunday',
+    MON: 'Monday',
+    TUE: 'Tuesday',
+    WED: 'Wednesday',
+    THU: 'Thursday',
+    FRI: 'Friday',
+    SAT: 'Saturday',
+    SUN: 'Sunday',
 } as const;
 
 /** A day of the week that a class is taught */

src/stories/components/CalendarCourseCell.stories.tsx

@@ -45,7 +45,7 @@ export const Default: Story = {
             schedule: new CourseSchedule({
                 meetings: [
                     new CourseMeeting({
-                        days: [DAY_MAP.M, DAY_MAP.W, DAY_MAP.F],
+                        days: [DAY_MAP.MON, DAY_MAP.WED, DAY_MAP.FRI],
                         startTime: 480,
                         endTime: 570,
                         location: {

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

@@ -38,6 +38,7 @@
     font-style: normal;
     font-weight: 500;
     line-height: normal;
+    margin-top: 20px;
 }
 
 .timeAndGrid {

src/views/components/common/CalendarGrid/CalendarGrid.tsx

@@ -3,7 +3,7 @@ import styles from './CalendarGrid.module.scss';
 import CalendarCell from '../CalendarGridCell/CalendarGridCell';
 import { DAY_MAP } from 'src/shared/types/CourseMeeting';
 
-const daysOfWeek = Object.values(DAY_MAP).filter(d => d != "Saturday" && d != "Sunday")
+const daysOfWeek = Object.keys(DAY_MAP).filter(key => !['SAT', 'SUN'].includes(key));
 const hoursOfDay = Array.from({ length: 14 }, (_, index) => index + 8);
 const grid = Array.from({ length: 5 }, () =>
   Array.from({ length: 13 }, (_, columnIndex) => (
@@ -30,7 +30,7 @@ const Calendar: React.FC = (props) => {
           {hoursOfDay.map((hour) => (
             <div key={hour} className={styles.timeBlock}>
               <div className={styles.timeLabelContainer}>
-                <p>{hour % 12 === 0 ? 12 : hour % 12}:00 {hour < 12 ? 'AM' : 'PM'}</p>
+                <p>{hour % 12 === 0 ? 12 : hour % 12} {hour < 12 ? 'AM' : 'PM'}</p>
               </div>
             </div>
           ))}

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

@@ -1,7 +1,7 @@
 .calendarCell {
   display: flex;
-  width: 165px;
-  height: 52.231px;
+  width: 213.8px;
+  height: 44.769px;
   min-width: 45px;
   min-height: 40px;
   flex-direction: column;
@@ -11,7 +11,7 @@
 }
 
 .hourLine {
-  width: 165px;
+  width: 213.8px;
   height: 1px;
   border-radius: var(--border-radius-none, 0px);
   background: rgba(218, 220, 224, 0.25);