feat: migrate styles to TailwindCSS

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

@@ -1,6 +1,3 @@
-@use 'sass:color';
-@use 'src/views/styles/colors.module.scss';
-
 .dayLabelContainer {
     display: flex;
     flex-direction: row;
@@ -32,7 +29,6 @@
 
 .day {
     gap: 5px;
-    color: colors.$burnt_orange;
     text-align: center;
     font-size: 14.22px;
     font-style: normal;

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import styles from './CalendarGrid.module.scss';
 import CalendarCell from '../CalendarGridCell/CalendarGridCell';
 import { DAY_MAP } from 'src/shared/types/CourseMeeting';
 
@@ -9,11 +8,12 @@ const grid = [];
 for (let i = 0; i < 13; i++) {
   const row = [];
   let hour = hoursOfDay[i];
-  row.push(<>
+  row.push(
-    <div key={hour} className={styles.timeBlock}>
+    <div key={hour} className="flex">
-      <div className={styles.timeLabelContainer}><p>{(hour % 12 === 0 ? 12 : hour % 12) + (hour < 12 ? ' AM' : ' PM')}</p></div>
+      <div className="flex flex-col items-end">
+        <p className="text-left">{(hour % 12 === 0 ? 12 : hour % 12) + (hour < 12 ? ' AM' : ' PM')}</p>
+      </div>
     </div>
-  </>
   );
   row.push(Array.from({ length: 5 }, (_, j) => <CalendarCell key={j} />));
   grid.push(row);
@@ -25,26 +25,26 @@ for (let i = 0; i < 13; i++) {
  */
 const Calendar: React.FC = (props) => {
   return (
-    <div className={styles.calendar}>
+    <div className="grid grid-cols-7">
-      <div className={styles.dayLabelContainer}>
+      <div className="flex justify-center items-center h-13 min-w-40 min-h-13 pb-15 gap-10 flex-1">
       </div>
       {/* Displaying the rest of the calendar */}
-      <div className={styles.timeAndGrid}>
+      <div className="flex">
-        {/* <div className={styles.timeColumn}>
+        {/* <div className="flex flex-col justify-between items-start flex-1">
-          <div className={styles.timeBlock}></div>
+          <div className="flex"></div>
           {hoursOfDay.map((hour) => (
-            <div key={hour} className={styles.timeBlock}>
+            <div key={hour} className="flex">
-              <div className={styles.timeLabelContainer}>
+              <div className="flex flex-col items-end">
                 <p>{hour % 12 === 0 ? 12 : hour % 12} {hour < 12 ? 'AM' : 'PM'}</p>
               </div>
             </div>
           ))}
         </div> */}
-        <div className={styles.calendarGrid}>
+        <div className="grid grid-cols-6 grid-rows-13">
           {/* Displaying day labels */}
-          <div className={styles.timeBlock}></div>
+          <div className="flex"></div>
           {daysOfWeek.map(day => (
-            <div key={day} className={styles.day}>
+            <div key={day} className="border border-solid border-gray-300 text-center">
               {day}
             </div>
           ))}

src/views/components/common/CalendarGridCell/CalendarGridCell.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import styles from './CalendarGridCell.module.scss';
 
 /**
  * Component representing each 1 hour time block of a calendar
@@ -7,10 +6,8 @@ import styles from './CalendarGridCell.module.scss';
  */
 const CalendarCell: React.FC = (props) => {
   return (
-    <div className={styles.calendarCell}>
+    <div className="flex w-56 h-12 min-w-12 min-h-10 flex-col justify-center items-start border border-gray-300">
-      <div className={styles.hourLine}>
+      <div className="w-full h-1 border-none rounded-none bg-gray-300 bg-opacity-25"></div>
-
-      </div>
     </div>
   );
 };