From 958bacc12be1c185fe37eff21396f99bea9f46b5 Mon Sep 17 00:00:00 2001
From: Jasmine Tran <z5394841@ad.unsw.edu.au>
Date: Thu, 14 Sep 2023 16:50:59 +1000
Subject: [PATCH] able to change colors on tutorial card

---
 .../timetable/ExpandedEventView.tsx           | 30 ++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

diff --git a/client/src/components/timetable/ExpandedEventView.tsx b/client/src/components/timetable/ExpandedEventView.tsx
index 0e2a85e2d..52659db89 100644
--- a/client/src/components/timetable/ExpandedEventView.tsx
+++ b/client/src/components/timetable/ExpandedEventView.tsx
@@ -11,6 +11,7 @@ import {
   Save,
 } from '@mui/icons-material';
 import {
+  Button,
   Dialog,
   Grid,
   IconButton,
@@ -21,7 +22,7 @@ import {
   TextField,
   Typography,
 } from '@mui/material';
-import { styled } from '@mui/system';
+import { Box, styled } from '@mui/system';
 import { TimePicker } from '@mui/x-date-pickers';
 import React, { useContext, useState } from 'react';
 
@@ -31,6 +32,7 @@ import { CourseContext } from '../../context/CourseContext';
 import { EventTime } from '../../interfaces/Periods';
 import { ExpandedEventViewProps } from '../../interfaces/PropTypes';
 import {
+  StyledButtonContainer,
   StyledDialogContent,
   StyledDialogTitle,
   StyledListItem,
@@ -225,6 +227,12 @@ const ExpandedEventView: React.FC<ExpandedEventViewProps> = ({
     delete updatedEventData[id];
     setCreatedEvents(updatedEventData);
   };
+
+  const handleSaveNewTutorialColor = () => {
+    handleUpdateEvent(eventPeriod.event.id);
+    handleCloseDialog();
+  }
+
   return (
     <Dialog open={popupOpen} maxWidth="sm" onClose={handleCloseDialog}>
       {isEditing ? (
@@ -413,6 +421,26 @@ const ExpandedEventView: React.FC<ExpandedEventViewProps> = ({
               </StyledListItem>
             )}
           </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>
+          )}
         </>
       )}
     </Dialog>