Some style improovement

frontend/src/components/ContactDrawer/index.js

@@ -26,9 +26,10 @@ const useStyles = makeStyles(theme => ({
 		width: drawerWidth,
 		display: "flex",
 		borderTop: "1px solid rgba(0, 0, 0, 0.12)",
+		borderRight: "1px solid rgba(0, 0, 0, 0.12)",
+		borderBottom: "1px solid rgba(0, 0, 0, 0.12)",
 		borderTopRightRadius: 4,
 		borderBottomRightRadius: 4,
-		backgroundColor: "#eee",
 	},
 	header: {
 		display: "flex",
@@ -41,17 +42,16 @@ const useStyles = makeStyles(theme => ({
 	},
 	content: {
 		display: "flex",
+		backgroundColor: "#eee",
 		flexDirection: "column",
 		padding: "8px 0px 8px 8px",
-		// backgroundColor: "red",
 		height: "100%",
-		overflow: "scroll",
+		overflowY: "scroll",
 		"&::-webkit-scrollbar": {
 			width: "8px",
 			height: "8px",
 		},
 		"&::-webkit-scrollbar-thumb": {
-			// borderRadius: "2px",
 			boxShadow: "inset 0 0 6px rgba(0, 0, 0, 0.3)",
 			backgroundColor: "#e8e8e8",
 		},
@@ -97,13 +97,7 @@ const useStyles = makeStyles(theme => ({
 	},
 }));
 
-const ContactDrawer = ({
+const ContactDrawer = ({ open, handleDrawerClose, contact, loading }) => {
-	open,
-	children,
-	handleDrawerClose,
-	contact,
-	loading,
-}) => {
 	const classes = useStyles();
 
 	const [modalOpen, setModalOpen] = useState(false);

frontend/src/components/MessagesList/index.js

@@ -65,6 +65,7 @@ const useStyles = makeStyles(theme => ({
 
 	messagesHeader: {
 		display: "flex",
+		cursor: "pointer",
 		backgroundColor: "#eee",
 		flex: "none",
 		borderBottom: "1px solid rgba(0, 0, 0, 0.12)",
@@ -229,10 +230,9 @@ const MessagesList = () => {
 	const [hasMore, setHasMore] = useState(false);
 	const [searchParam, setSearchParam] = useState("");
 	const [pageNumber, setPageNumber] = useState(0);
+	const [drawerOpen, setDrawerOpen] = useState(false);
 	const lastMessageRef = useRef();
 
-	const [open, setOpen] = useState(true);
-
 	useEffect(() => {
 		setMessagesList([]);
 	}, [searchParam]);
@@ -366,7 +366,9 @@ const MessagesList = () => {
 		}
 	};
 
-	const handleUpdateTicketStatus = async (status, userId) => {
+	const handleUpdateTicketStatus = async (e, status, userId) => {
+		e.preventDefault();
+		e.stopPropagation();
 		try {
 			await api.put(`/tickets/${ticketId}`, {
 				status: status,
@@ -479,10 +481,10 @@ const MessagesList = () => {
 	};
 
 	const handleDrawerOpen = () => {
-		setOpen(true);
+		setDrawerOpen(true);
 	};
 	const handleDrawerClose = () => {
-		setOpen(false);
+		setDrawerOpen(false);
 	};
 
 	return (
@@ -491,10 +493,14 @@ const MessagesList = () => {
 				variant="outlined"
 				elevation={0}
 				className={clsx(classes.mainWrapper, {
-					[classes.mainWrapperShift]: open,
+					[classes.mainWrapperShift]: drawerOpen,
 				})}
 			>
-				<Card square className={classes.messagesHeader}>
+				<Card
+					square
+					className={classes.messagesHeader}
+					onClick={handleDrawerOpen}
+				>
 					<CardHeader
 						titleTypographyProps={{ noWrap: true }}
 						subheaderTypographyProps={{ noWrap: true }}
@@ -528,7 +534,7 @@ const MessagesList = () => {
 								<Button
 									startIcon={<ReplayIcon />}
 									size="small"
-									onClick={e => handleUpdateTicketStatus("open", userId)}
+									onClick={e => handleUpdateTicketStatus(e, "open", userId)}
 								>
 									Reabrir
 								</Button>
@@ -537,22 +543,15 @@ const MessagesList = () => {
 									<Button
 										startIcon={<ReplayIcon />}
 										size="small"
-										onClick={e => handleUpdateTicketStatus("pending", null)}
+										onClick={e => handleUpdateTicketStatus(e, "pending", null)}
 									>
 										Retornar
 									</Button>
-									<Button
-										startIcon={<ReplayIcon />}
-										size="small"
-										onClick={handleDrawerOpen}
-									>
-										Drawer
-									</Button>
 									<Button
 										size="small"
 										variant="contained"
 										color="primary"
-										onClick={e => handleUpdateTicketStatus("closed", userId)}
+										onClick={e => handleUpdateTicketStatus(e, "closed", userId)}
 									>
 										Resolver
 									</Button>
@@ -581,7 +580,7 @@ const MessagesList = () => {
 			</Paper>
 
 			<ContactDrawer
-				open={open}
+				open={drawerOpen}
 				handleDrawerClose={handleDrawerClose}
 				contact={contact}
 				loading={loading}

frontend/src/pages/Chat/index.js

@@ -17,7 +17,7 @@ const useStyles = makeStyles(theme => ({
 	},
 
 	chatPapper: {
-		// backgroundColor: "#eee",
+		// backgroundColor: "red",
 		display: "flex",
 		height: "100%",
 	},
@@ -49,7 +49,7 @@ const Chat = () => {
 
 	return (
 		<div className={classes.chatContainer}>
-			<Paper square className={classes.chatPapper}>
+			<div className={classes.chatPapper}>
 				<Grid container spacing={0}>
 					<Grid item xs={4} className={classes.contactsWrapper}>
 						<TicketsList />
@@ -66,7 +66,7 @@ const Chat = () => {
 						)}
 					</Grid>
 				</Grid>
-			</Paper>
+			</div>
 		</div>
 	);
 };

frontend/src/pages/Dashboard/index.js

@@ -1,15 +1,13 @@
 import React from "react";
 
+import Paper from "@material-ui/core/Paper";
+
 const Dashboard = () => {
 	return (
 		<div>
-			<a
+			<Paper variant="outlined" style={{ margin: 50 }}>
-				rel="bookmark"
-				target="_parent"
-				href="https://economicros.ddns.com.br:4043/"
-			>
 				teste
-			</a>
+			</Paper>
 		</div>
 	);
 };