changed width/height override to optional props, made days of the week typography elements

Author: porpol

src/frontend/src/components/TimeSlot.tsx

@@ -28,15 +28,15 @@ const TimeSlot: React.FC<TimeSlotProps> = ({
   onMouseUp,
   onMouseOver,
   onClick,
-  heightOverride = undefined,
-  widthOverride = undefined,
+  heightOverride,
+  widthOverride,
   selected = false
 }) => {
   return (
     <Box
       sx={{
-        height: heightOverride ? heightOverride : small ? '25px' : '4.7vh',
-        width: widthOverride ? widthOverride : 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/EditAvailability.tsx

@@ -137,9 +137,9 @@ const EditAvailability: React.FC<EditAvailabilityProps> = ({
           widthOverride="106px"
           heightOverride="40px"
           text={
-            <>
+            <Typography>
               {getDayOfWeek(availability.dateSet)} <br /> {datePipe(availability.dateSet)}
-            </>
+            </Typography>
           }
           fontSize={'12px'}
         />