Merge pull request #3751 from Northeastern-Electric-Racing/3133-availability---make-editconfirm-availability-modals-larger

#3133 make edit/confirm availability modals larger

Author: walker-sean

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

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

@@ -32,7 +32,14 @@ const AvailabilityEditModal: React.FC<DRCEditModalProps> = ({
   };
 
   return (
-    <NERModal open={open} onHide={onCancel} title={header} onSubmit={onSubmit} submitText="Save">
+    <NERModal
+      open={open}
+      onHide={onCancel}
+      title={header}
+      onSubmit={onSubmit}
+      submitText="Save"
+      paperProps={{ maxWidth: '900px', maxHeight: '680px' }}
+    >
       <EditAvailability
         editedAvailabilities={confirmedAvailabilities}
         setEditedAvailabilities={setConfirmedAvailabilities}

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

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