fix: queue color picker not working

frontend/src/components/ColorPicker/index.js

@@ -1,8 +1,9 @@
+import { Dialog } from "@material-ui/core";
 import React, { useState } from "react";
 
 import { GithubPicker } from "react-color";
 
-const ColorPicker = ({ onChange, currentColor }) => {
+const ColorPicker = ({ onChange, currentColor, handleClose, open }) => {
 	const [color, setColor] = useState(currentColor);
 
 	const handleChange = color => {
@@ -10,7 +11,11 @@ const ColorPicker = ({ onChange, currentColor }) => {
 	};
 
 	return (
-		<div>
+		<Dialog
+			onClose={handleClose}
+			aria-labelledby="simple-dialog-title"
+			open={open}
+		>
 			<GithubPicker
 				width={"100%"}
 				triangle="hide"
@@ -18,7 +23,7 @@ const ColorPicker = ({ onChange, currentColor }) => {
 				onChange={handleChange}
 				onChangeComplete={color => onChange(color.hex)}
 			/>
-		</div>
+		</Dialog>
 	);
 };
 

frontend/src/components/QueueModal/index.js

@@ -19,7 +19,8 @@ import { i18n } from "../../translate/i18n";
 import api from "../../services/api";
 import toastError from "../../errors/toastError";
 import ColorPicker from "../ColorPicker";
-import { InputAdornment } from "@material-ui/core";
+import { IconButton, InputAdornment } from "@material-ui/core";
+import { Colorize } from "@material-ui/icons";
 
 const useStyles = makeStyles(theme => ({
 	root: {
@@ -71,6 +72,7 @@ const QueueModal = ({ open, onClose, queueId }) => {
 		greetingMessage: "",
 	};
 
+	const [colorPickerModalOpen, setColorPickerModalOpen] = useState(false);
 	const [queue, setQueue] = useState(initialState);
 
 	useEffect(() => {
@@ -116,13 +118,7 @@ const QueueModal = ({ open, onClose, queueId }) => {
 
 	return (
 		<div className={classes.root}>
-			<Dialog
-				open={open}
-				onClose={handleClose}
-				maxWidth="sm"
-				fullWidth
-				scroll="paper"
-			>
+			<Dialog open={open} onClose={handleClose} scroll="paper">
 				<DialogTitle>
 					{queueId
 						? `${i18n.t("queueModal.title.edit")}`
@@ -156,6 +152,9 @@ const QueueModal = ({ open, onClose, queueId }) => {
 								<Field
 									as={TextField}
 									label={i18n.t("queueModal.form.color")}
+									name="color"
+									id="color"
+									// disabled
 									InputProps={{
 										startAdornment: (
 											<InputAdornment position="start">
@@ -165,20 +164,26 @@ const QueueModal = ({ open, onClose, queueId }) => {
 												></div>
 											</InputAdornment>
 										),
+										endAdornment: (
+											<IconButton
+												size="small"
+												color="default"
+												onClick={() => setColorPickerModalOpen(true)}
+											>
+												<Colorize />
+											</IconButton>
+										),
 									}}
-									name="color"
-									error={touched.color && Boolean(errors.color)}
-									helperText={touched.color && errors.color}
 									variant="outlined"
 									margin="dense"
 								/>
 								<ColorPicker
-									label={"Pick Color"}
-									currentColor={queue.color}
+									open={colorPickerModalOpen}
+									handleClose={() => setColorPickerModalOpen(false)}
 									onChange={color => {
 										values.color = color;
-										setQueue(prevState => {
-											return { ...prevState, color };
+										setQueue(() => {
+											return { ...values, color };
 										});
 									}}
 								/>