#3133 fixed timeslot alignment in edit availability modal and changed text type to React.ReactNode in timeslot interface

Author: porpol

src/frontend/src/components/TimeSlot.tsx

@@ -2,7 +2,7 @@ import { Box } from '@mui/system';
 import { Icon } from '@mui/material';
 
 interface TimeSlotProps {
-  text?: string;
+  text?: React.ReactNode;
   fontSize?: string;
   backgroundColor?: string;
   icon?: string;

src/frontend/src/pages/SettingsPage/UserScheduleSettings/Availability/EditAvailability.tsx

@@ -129,33 +129,33 @@ const EditAvailability: React.FC<EditAvailabilityProps> = ({
           Invert Availability
         </NERButton>
       </Grid>
-      <TimeSlot backgroundColor={HeatmapColors[0]} widthOverride="102px" heightOverride="45px" />
+      <TimeSlot backgroundColor={HeatmapColors[0]} widthOverride="106px" heightOverride="px" />
       {currentlyDisplayedAvailabilities.map((availability) => (
         <TimeSlot
           key={availability.dateSet.getTime()}
           backgroundColor={HeatmapColors[0]}
-          widthOverride="102px"
-          heightOverride="45px"
-          text={getDayOfWeek(availability.dateSet) + ' ' + datePipe(availability.dateSet)}
+          widthOverride="106px"
+          heightOverride="px"
+          text={<>{getDayOfWeek(availability.dateSet)} <br /> {datePipe(availability.dateSet)}</>}
           fontSize={'12px'}
         />
       ))}
       {enumToArray(REVIEW_TIMES).map((time, timeIndex) => (
         <Grid container item>
           <TimeSlot
             backgroundColor={HeatmapColors[0]}
-            widthOverride="102px"
+            widthOverride="106px"
             heightOverride="32px"
             text={time}
-            fontSize={'13px'}
+            fontSize={'px'}
           />
           {currentlyDisplayedAvailabilities.map((availability, dayIndex) => {
             const backgroundColor = availability.availability.includes(timeIndex) ? HeatmapColors[3] : HeatmapColors[0];
             return (
               <TimeSlot
                 key={timeIndex * enumToArray(REVIEW_TIMES).length + dayIndex}
                 backgroundColor={backgroundColor}
-                widthOverride="102px"
+                widthOverride="106px"
                 heightOverride="32px"
                 onMouseDown={(e) => handleMouseDown(e, availability, timeIndex)}
                 onMouseEnter={(e) => handleMouseEnter(e, availability, timeIndex)}