Screams in Stylesheets

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

@@ -1,28 +1,6 @@
 @use 'sass:color';
 @use 'src/views/styles/colors.module.scss';
 
-.dayLabelContainer {
-    display: flex;
-    height: 13px;
-    min-width: 40px;
-    min-height: 13px;
-    padding-bottom: 15px;
-    justify-content: center;
-    align-items: center;
-    gap: 10px;
-    flex: 1 0 0;
-}
-
-.dayLabel {
-    color: colors.$burnt_orange;
-    text-align: center;
-    font-family: Roboto;
-    font-size: 14.22px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: normal;
-}
-
 .calendar {
     display: grid;
     grid-template-columns: auto repeat(5, 1fr);
@@ -31,6 +9,21 @@
 
 .day {
     gap: 5px;
+    display: flex;
+    height: 13px;
+    min-width: 40px;
+    min-height: 13px;
+    padding-bottom: 15px;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    flex: 1 0 0;
+    color: colors.$burnt_orange;
+    text-align: center;
+    font-size: 14.22px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
 }
 
 .timeBlock {

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

@@ -4,6 +4,8 @@ import CalendarCell from '../CalendarGridCell/CalendarGridCell';
 import { DAY_MAP } from 'src/shared/types/CourseMeeting';
 
 const daysOfWeek = Object.values(DAY_MAP);
+daysOfWeek.pop();
+daysOfWeek.pop();
 const hoursOfDay = Array.from({ length: 14 }, (_, index) => index + 8);
 
 /**
@@ -13,17 +15,27 @@ const hoursOfDay = Array.from({ length: 14 }, (_, index) => index + 8);
 const Calendar: React.FC = (props) => {
   return (
     <div className={styles.calendar}>
-      <div className={styles.dayLabelContainer}></div>
-      {daysOfWeek.map((day, dayIndex) => (
-        <div key={dayIndex} className={styles.day}>
-          <div className={styles.dayLabelContainer}>
-            <div className={styles.dayLabel}>{day}</div>
+      <div className={styles.dayLabelContainer}>
+        {/* Empty cell in the top-left corner */}
+        <div className={styles.day} />
+        {/* Displaying day labels */}
+        {daysOfWeek.map(day => (
+          <div key={day} className={styles.day}>
+            {day}
           </div>
-          {hoursOfDay.map((hour) => (
+        ))}
+      </div>
+
+      {/* Displaying the rest of the calendar */}
+      {hoursOfDay.map((hour) => (
+        <div key={hour} className={styles.row}>
+          {/* Hour column */}
+          <div className={styles.timeLabelContainer}>
+            <span>{hour}:00</span>
+          </div>
+          {/* Calendar cells for each day */}
+          {daysOfWeek.map((day, dayIndex) => (
             <div key={`${day}-${hour}`} className={styles.timeBlock}>
-              <div className={styles.timeLabelContainer}>
-                <span>{hour}:00</span>
-              </div>
               <CalendarCell />
             </div>
           ))}