#3133 made edit availability modal larger as well as timeslots larger

Author: porpol

src/frontend/src/components/TimeSlot.tsx

@@ -13,6 +13,7 @@ interface TimeSlotProps {
   onMouseOver?: () => void;
   onClick?: () => void;
   heightOverride?: string;
+  widthOverride?: string;
   selected?: boolean;
 }
 
@@ -28,13 +29,14 @@ const TimeSlot: React.FC<TimeSlotProps> = ({
   onMouseOver,
   onClick,
   heightOverride = undefined,
+  widthOverride = undefined,
   selected = false
 }) => {
   return (
     <Box
       sx={{
         height: heightOverride ? heightOverride : small ? '25px' : '4.7vh',
-        width: small ? '81px' : '12.2%',
+        width: widthOverride ? widthOverride : small ? '81px' : '12.2%',
         backgroundColor,
         cursor: onMouseEnter ? 'pointer' : undefined,
         borderStyle: 'solid',

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

@@ -38,7 +38,7 @@ const AvailabilityEditModal: React.FC<DRCEditModalProps> = ({
       title={header}
       onSubmit={onSubmit}
       submitText="Save"
-      paperProps={{ maxWidth: '800px' }}
+      paperProps={{ maxWidth: '900px', maxHeight: '680px' }}
     >
       <EditAvailability
         editedAvailabilities={confirmedAvailabilities}

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

@@ -129,27 +129,34 @@ const EditAvailability: React.FC<EditAvailabilityProps> = ({
           Invert Availability
         </NERButton>
       </Grid>
-      <TimeSlot backgroundColor={HeatmapColors[0]} small={true} heightOverride="40px" />
+      <TimeSlot backgroundColor={HeatmapColors[0]} widthOverride="102px" heightOverride="45px" />
       {currentlyDisplayedAvailabilities.map((availability) => (
         <TimeSlot
           key={availability.dateSet.getTime()}
           backgroundColor={HeatmapColors[0]}
-          small={true}
-          heightOverride="40px"
+          widthOverride="102px"
+          heightOverride="45px"
           text={getDayOfWeek(availability.dateSet) + ' ' + datePipe(availability.dateSet)}
           fontSize={'12px'}
         />
       ))}
       {enumToArray(REVIEW_TIMES).map((time, timeIndex) => (
         <Grid container item>
-          <TimeSlot backgroundColor={HeatmapColors[0]} small={true} text={time} fontSize={'13px'} />
+          <TimeSlot
+            backgroundColor={HeatmapColors[0]}
+            widthOverride="102px"
+            heightOverride="32px"
+            text={time}
+            fontSize={'13px'}
+          />
           {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}
-                small={true}
+                widthOverride="102px"
+                heightOverride="32px"
                 onMouseDown={(e) => handleMouseDown(e, availability, timeIndex)}
                 onMouseEnter={(e) => handleMouseEnter(e, availability, timeIndex)}
                 onMouseUp={handleMouseUp}