created a new TutorialColorPicker file, that is the exact same as Col…

…orPicker except with a Save button

client/src/components/controls/TutorialColorPicker.tsx

@@ -0,0 +1,78 @@
+import { Box, Button, ButtonGroup, ListItem, Popover, TextField } from '@mui/material';
+import { Colorful } from '@uiw/react-color';
+
+import { ColorIndicatorBox, StyledButtonContainer } from '../../styles/ControlStyles';
+import styled from '@emotion/styled';
+
+const BoxStyle = styled(Box)`
+  padding-bottom: 20px
+`
+const TutorialColorPicker: React.FC<any> = ({
+  color,
+  setColor,
+  colorPickerAnchorEl,
+  handleOpenColorPicker,
+  handleCloseColorPicker,
+  handleSaveNewTutorialColor,
+}) => {
+  // Whether the colour picker popover is shown
+  const openColorPickerPopover = Boolean(colorPickerAnchorEl);
+  const colorPickerPopoverId = openColorPickerPopover ? 'simple-popover' : undefined;
+
+  return (
+    <BoxStyle m={1} display="flex" justifyContent="center" alignItems="center">
+      <ColorIndicatorBox backgroundColor={color} onClick={handleOpenColorPicker} />
+      <StyledButtonContainer>
+        <ButtonGroup>
+          <Button
+            disableElevation
+            variant="contained"
+            size="small"
+            aria-describedby={colorPickerPopoverId}
+            onClick={handleOpenColorPicker}
+          >
+            Choose Colour
+          </Button>
+          <Button
+            variant="outlined"
+            size="small"
+            onClick={handleSaveNewTutorialColor}
+          >
+            Save
+          </Button>
+        </ButtonGroup>
+      </StyledButtonContainer>
+      <Popover
+        id={colorPickerPopoverId}
+        open={openColorPickerPopover}
+        anchorEl={colorPickerAnchorEl}
+        onClose={handleCloseColorPicker}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'left',
+        }}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'left',
+        }}
+      >
+        <ListItem alignItems="flex-start">
+          <Colorful onChange={(e) => setColor(e.hex)} color={color} />
+        </ListItem>
+        <ListItem alignItems="flex-start">
+          <TextField
+            id="outlined-required"
+            label="Hex"
+            variant="outlined"
+            value={color}
+            onChange={(e) => {
+              setColor(e.target.value);
+            }}
+          />
+        </ListItem>
+      </Popover>
+    </BoxStyle>
+  );
+};
+
+export default TutorialColorPicker;

client/src/components/timetable/ExpandedEventView.tsx

@@ -47,6 +47,7 @@ import { areValidEventTimes, createDateWithTime } from '../../utils/eventTimes';
 import ColorPicker from '../controls/ColorPicker';
 import DiscardDialog from './DiscardDialog';
 import DropdownOption from './DropdownOption';
+import TutorialColorPicker from '../controls/TutorialColorPicker';
 
 const StyledListItemIcon = styled(ListItemIcon)<ListItemIconProps & { isDarkMode: boolean }>`
   color: ${(props) => (props.isDarkMode ? '#FFFFFF' : '#212121')};
@@ -422,24 +423,14 @@ const ExpandedEventView: React.FC<ExpandedEventViewProps> = ({
             )}
           </StyledDialogContent>
           {eventPeriod.subtype === 'Tutoring' && (
-            <Box display="flex" justifyContent="center" alignItems="center" paddingBottom={1}>
-              <ColorPicker
-                color={newColor}
-                setColor={setNewColor}
-                colorPickerAnchorEl={colorPickerAnchorEl}
-                handleOpenColorPicker={handleOpenColorPicker}
-                handleCloseColorPicker={handleCloseColorPicker}
-              />
-              <div>
-                <Button
-                  variant="outlined"
-                  size="small"
-                  onClick={handleSaveNewTutorialColor}
-                >
-                  Save
-                </Button>
-              </div>
-            </Box>
+            <TutorialColorPicker
+              color={newColor}
+              setColor={setNewColor}
+              colorPickerAnchorEl={colorPickerAnchorEl}
+              handleOpenColorPicker={handleOpenColorPicker}
+              handleCloseColorPicker={handleCloseColorPicker}
+              handleSaveNewTutorialColor={handleSaveNewTutorialColor}
+            />
           )}
         </>
       )}