Styles change in chat

backend/src/models/Message.js

@@ -9,6 +9,14 @@ class Message extends Sequelize.Model {
 				body: { type: Sequelize.TEXT },
 				mediaUrl: { type: Sequelize.STRING },
 				mediaType: { type: Sequelize.STRING },
+				createdAt: {
+					type: Sequelize.DATE(6),
+					allowNull: false,
+				},
+				updatedAt: {
+					type: Sequelize.DATE(6),
+					allowNull: false,
+				},
 			},
 			{
 				sequelize,

frontend/src/components/Layout/MainDrawer.js

@@ -39,7 +39,7 @@ const useStyles = makeStyles(theme => ({
 		alignItems: "center",
 		justifyContent: "flex-end",
 		padding: "0 8px",
-		...theme.mixins.toolbar,
+		minHeight: "48px",
 	},
 	appBar: {
 		zIndex: theme.zIndex.drawer + 1,
@@ -85,10 +85,11 @@ const useStyles = makeStyles(theme => ({
 			width: theme.spacing(9),
 		},
 	},
-	appBarSpacer: theme.mixins.toolbar,
+	appBarSpacer: {
+		minHeight: "48px",
+	},
 	content: {
 		flex: 1,
-		// height: "100%",
 		overflow: "auto",
 	},
 	container: {
@@ -158,7 +159,7 @@ const MainDrawer = ({ appTitle, children }) => {
 				position="absolute"
 				className={clsx(classes.appBar, open && classes.appBarShift)}
 			>
-				<Toolbar className={classes.toolbar}>
+				<Toolbar variant="dense" className={classes.toolbar}>
 					<IconButton
 						edge="start"
 						color="inherit"

frontend/src/pages/Chat/Chat.js

@@ -12,28 +12,26 @@ const useStyles = makeStyles(theme => ({
 		flex: 1,
 		// backgroundColor: "#eee",
 		padding: theme.spacing(4),
-		height: `calc(100% - 64px)`,
+		height: `calc(100% - 48px)`,
 		overflowY: "hidden",
 	},
 
 	chatPapper: {
-		backgroundColor: "#eee",
+		// backgroundColor: "#eee",
 		display: "flex",
 		height: "100%",
-		overflowY: "hidden",
 	},
 
 	contactsWrapper: {
 		display: "flex",
 		height: "100%",
 		flexDirection: "column",
-		overflow: "hidden",
+		overflowY: "hidden",
 	},
 	messagessWrapper: {
 		display: "flex",
 		height: "100%",
 		flexDirection: "column",
-		overflow: "hidden",
 	},
 	welcomeMsg: {
 		backgroundColor: "#eee",
@@ -51,7 +49,7 @@ const Chat = () => {
 
 	return (
 		<div className={classes.chatContainer}>
-			<Paper square className={classes.chatPapper}>
+			<Paper square elevation={0} className={classes.chatPapper}>
 				<Grid container spacing={0}>
 					<Grid item xs={4} className={classes.contactsWrapper}>
 						<TicketsList />

frontend/src/pages/Chat/components/ContactsHeader/ContactsHeader.js

@@ -1,47 +0,0 @@
-import React from "react";
-
-import { makeStyles } from "@material-ui/core/styles";
-import Card from "@material-ui/core/Card";
-import CardHeader from "@material-ui/core/CardHeader";
-import IconButton from "@material-ui/core/IconButton";
-import MoreVertIcon from "@material-ui/icons/MoreVert";
-import Avatar from "@material-ui/core/Avatar";
-
-import profileDefaultPic from "../../../../Images/profile_default.png";
-
-const useStyles = makeStyles(theme => ({
-	contactsHeader: {
-		display: "flex",
-		flex: "none",
-		// height: 80,
-		backgroundColor: "#eee",
-		borderBottomLeftRadius: 0,
-		borderBottomRightRadius: 0,
-		borderTopRightRadius: 0,
-	},
-	settingsIcon: {
-		alignSelf: "center",
-		marginLeft: "auto",
-		padding: 8,
-	},
-}));
-
-const ContactsHeader = () => {
-	const classes = useStyles();
-
-	const username = localStorage.getItem("username");
-
-	return (
-		<Card variant="outlined" square className={classes.contactsHeader}>
-			<CardHeader
-				avatar={<Avatar alt="logged_user" src={profileDefaultPic} />}
-				title={username}
-			/>
-			<IconButton className={classes.settingsIcon} aria-label="settings">
-				<MoreVertIcon />
-			</IconButton>
-		</Card>
-	);
-};
-
-export default ContactsHeader;

frontend/src/pages/Chat/components/MessagesInput/MessagesInput.js

@@ -27,15 +27,16 @@ const useStyles = makeStyles(theme => ({
 	newMessageBox: {
 		background: "#eee",
 		display: "flex",
-		padding: "10px",
+		padding: "7px",
 		alignItems: "center",
+		borderTop: "1px solid rgba(0, 0, 0, 0.12)",
 	},
 
 	messageInputWrapper: {
 		padding: 6,
 		background: "#fff",
 		display: "flex",
-		borderRadius: 40,
+		borderRadius: 20,
 		flex: 1,
 	},
 
@@ -60,6 +61,7 @@ const useStyles = makeStyles(theme => ({
 		justifyContent: "space-between",
 		alignItems: "center",
 		backgroundColor: "#eee",
+		borderTop: "1px solid rgba(0, 0, 0, 0.12)",
 	},
 
 	emojiBox: {
@@ -240,11 +242,7 @@ const MessagesInput = ({ searchParam }) => {
 
 	if (media.preview)
 		return (
-			<Paper
-				variant="outlined"
-				square
-				className={classes.viewMediaInputWrapper}
-			>
+			<Paper elevation={0} square className={classes.viewMediaInputWrapper}>
 				<IconButton
 					aria-label="cancel-upload"
 					component="span"
@@ -274,7 +272,7 @@ const MessagesInput = ({ searchParam }) => {
 		);
 	else {
 		return (
-			<Paper variant="outlined" square className={classes.newMessageBox}>
+			<Paper square elevation={0} className={classes.newMessageBox}>
 				<IconButton
 					aria-label="emojiPicker"
 					component="span"
@@ -310,6 +308,8 @@ const MessagesInput = ({ searchParam }) => {
 						inputRef={input => input && !searchParam && input.focus()}
 						className={classes.messageInput}
 						placeholder="Escreva uma mensagem"
+						multiline
+						rowsMax={5}
 						value={inputMessage}
 						onChange={handleChangeInput}
 						disabled={recording}

frontend/src/pages/Chat/components/MessagesList/MessagesList.js

@@ -16,6 +16,7 @@ import CardHeader from "@material-ui/core/CardHeader";
 import ReplayIcon from "@material-ui/icons/Replay";
 import Avatar from "@material-ui/core/Avatar";
 import Button from "@material-ui/core/Button";
+import Paper from "@material-ui/core/Paper";
 import { green } from "@material-ui/core/colors";
 
 import whatsBackground from "../../../../Images/wa-background.png";
@@ -30,12 +31,16 @@ const useStyles = makeStyles(theme => ({
 		display: "flex",
 		flexDirection: "column",
 		overflow: "hidden",
+		borderTopLeftRadius: 0,
+		borderBottomLeftRadius: 0,
+		borderLeft: "0",
 	},
 
 	messagesHeader: {
 		display: "flex",
 		backgroundColor: "#eee",
 		flex: "none",
+		borderBottom: "1px solid rgba(0, 0, 0, 0.12)",
 	},
 
 	actionButtons: {
@@ -83,7 +88,8 @@ const useStyles = makeStyles(theme => ({
 	},
 
 	messageLeft: {
-		marginTop: 5,
+		marginRight: 20,
+		marginTop: 2,
 		minWidth: 100,
 		maxWidth: 600,
 		height: "auto",
@@ -92,20 +98,20 @@ const useStyles = makeStyles(theme => ({
 
 		backgroundColor: "#ffffff",
 		alignSelf: "flex-start",
-		borderTopLeftRadius: 8,
+		borderTopLeftRadius: 0,
 		borderTopRightRadius: 8,
-		borderBottomLeftRadius: 0,
+		borderBottomLeftRadius: 8,
 		borderBottomRightRadius: 8,
 		paddingLeft: 5,
 		paddingRight: 5,
 		paddingTop: 5,
 		paddingBottom: 0,
-		boxShadow: "0 2px 2px #808888",
+		boxShadow: "0 1px 1px #b3b3b3",
 	},
 
 	messageRight: {
 		marginLeft: 20,
-		marginTop: 5,
+		marginTop: 2,
 		minWidth: 100,
 		maxWidth: 600,
 		height: "auto",
@@ -122,7 +128,7 @@ const useStyles = makeStyles(theme => ({
 		paddingRight: 5,
 		paddingTop: 5,
 		paddingBottom: 0,
-		boxShadow: "0 2px 2px #808888",
+		boxShadow: "0 1px 1px #b3b3b3",
 	},
 
 	textContentItem: {
@@ -156,6 +162,7 @@ const useStyles = makeStyles(theme => ({
 		backgroundColor: "#e1f3fb",
 		margin: "10px",
 		borderRadius: "10px",
+		boxShadow: "0 1px 1px #b3b3b3",
 	},
 
 	dailyTimestampText: {
@@ -432,8 +439,8 @@ const MessagesList = () => {
 	};
 
 	return (
-		<div className={classes.mainWrapper}>
-			<Card variant="outlined" square className={classes.messagesHeader}>
+		<Paper variant="outlined" elevation={0} className={classes.mainWrapper}>
+			<Card square className={classes.messagesHeader}>
 				{contact.name ? (
 					<CardHeader
 						titleTypographyProps={{ noWrap: true }}
@@ -453,21 +460,33 @@ const MessagesList = () => {
 				)}
 
 				<div className={classes.actionButtons}>
-					<Button
-						startIcon={<ReplayIcon />}
-						size="small"
-						onClick={e => handleUpdateTicketStatus("pending")}
-					>
-						Retornar
-					</Button>
-					<Button
-						size="small"
-						variant="contained"
-						color="primary"
-						onClick={e => handleUpdateTicketStatus("closed", userId)}
-					>
-						Resolver
-					</Button>
+					{ticket.status === "closed" ? (
+						<Button
+							startIcon={<ReplayIcon />}
+							size="small"
+							onClick={e => handleUpdateTicketStatus("open", userId)}
+						>
+							Reabrir
+						</Button>
+					) : (
+						<>
+							<Button
+								startIcon={<ReplayIcon />}
+								size="small"
+								onClick={e => handleUpdateTicketStatus("pending", null)}
+							>
+								Retornar
+							</Button>
+							<Button
+								size="small"
+								variant="contained"
+								color="primary"
+								onClick={e => handleUpdateTicketStatus("closed", userId)}
+							>
+								Resolver
+							</Button>
+						</>
+					)}
 				</div>
 			</Card>
 			<div className={classes.messagesListWrapper}>
@@ -487,7 +506,7 @@ const MessagesList = () => {
 					</div>
 				) : null}
 			</div>
-		</div>
+		</Paper>
 	);
 };
 

frontend/src/pages/Chat/components/TicketsList/TicketsList.js

@@ -37,14 +37,13 @@ const useStyles = makeStyles(theme => ({
 		height: "100%",
 		flexDirection: "column",
 		overflow: "hidden",
+		borderTopRightRadius: 0,
+		borderBottomRightRadius: 0,
 	},
 
 	contactsHeader: {
 		display: "flex",
 		backgroundColor: "#eee",
-		borderBottomLeftRadius: 0,
-		borderBottomRightRadius: 0,
-		borderTopRightRadius: 0,
 	},
 
 	settingsIcon: {
@@ -55,9 +54,6 @@ const useStyles = makeStyles(theme => ({
 
 	openTicketsList: {
 		position: "relative",
-		borderTopLeftRadius: 0,
-		borderTopRightRadius: 0,
-		borderBottomRightRadius: 0,
 		height: "50%",
 		overflowY: "scroll",
 		"&::-webkit-scrollbar": {
@@ -67,13 +63,11 @@ const useStyles = makeStyles(theme => ({
 			boxShadow: "inset 0 0 6px rgba(0, 0, 0, 0.3)",
 			backgroundColor: "#e8e8e8",
 		},
+		borderTop: "2px solid rgba(0, 0, 0, 0.12)",
 	},
 
 	closedTicketsList: {
 		position: "relative",
-		borderTopLeftRadius: 0,
-		borderTopRightRadius: 0,
-		borderBottomRightRadius: 0,
 		flex: 1,
 		overflowY: "scroll",
 		"&::-webkit-scrollbar": {
@@ -83,6 +77,7 @@ const useStyles = makeStyles(theme => ({
 			boxShadow: "inset 0 0 6px rgba(0, 0, 0, 0.3)",
 			backgroundColor: "#e8e8e8",
 		},
+		borderTop: "2px solid rgba(0, 0, 0, 0.12)",
 	},
 
 	ticketsListHeader: {
@@ -90,12 +85,12 @@ const useStyles = makeStyles(theme => ({
 		// flexShrink: 0,
 		// -webkitBoxAlign: "center",
 		alignItems: "center",
-		fontWeight: 600,
+		fontWeight: 500,
 		fontSize: "16px",
 		height: "56px",
 		// backgroundColor: "#eee",
 		color: "rgb(67, 83, 105)",
-		padding: "0px 24px",
+		padding: "0px 12px",
 		borderBottom: "1px solid rgba(0, 0, 0, 0.12)",
 	},
 
@@ -305,11 +300,16 @@ const TicketsList = () => {
 
 	const resetUnreadMessages = ticketId => {
 		setTickets(prevState => {
-			let aux = [...prevState];
-			let ticketIndex = aux.findIndex(ticket => ticket.id === +ticketId);
-			aux[ticketIndex].unreadMessages = 0;
-
-			return aux;
+			const ticketIndex = prevState.findIndex(
+				ticket => ticket.id === +ticketId
+			);
+			if (ticketIndex !== -1) {
+				let aux = [...prevState];
+				aux[ticketIndex].unreadMessages = 0;
+				return aux;
+			} else {
+				return prevState;
+			}
 		});
 	};
 
@@ -338,8 +338,7 @@ const TicketsList = () => {
 	};
 
 	const countTickets = status => {
-		const ticketsFound = tickets.filter(ticket => ticket.status === status)
-			.length;
+		const ticketsFound = tickets.filter(t => t.status === status).length;
 
 		if (ticketsFound === 0) return "";
 		return ticketsFound;
@@ -434,8 +433,8 @@ const TicketsList = () => {
 	};
 
 	return (
-		<div className={classes.contactsWrapper}>
-			<Paper square variant="outlined" className={classes.root}>
+		<Paper elevation={0} variant="outlined" className={classes.contactsWrapper}>
+			<Paper elevation={0}>
 				<Tabs
 					value={tab}
 					onChange={handleChangeTab}
@@ -456,7 +455,7 @@ const TicketsList = () => {
 					/>
 				</Tabs>
 			</Paper>
-			<Paper variant="outlined" square className={classes.contactsSearchBox}>
+			<Paper square elevation={0} className={classes.contactsSearchBox}>
 				<div className={classes.serachInputWrapper}>
 					<SearchIcon className={classes.searchIcon} />
 					<InputBase
@@ -474,7 +473,7 @@ const TicketsList = () => {
 			</Paper>
 			{tab === "open" ? (
 				<>
-					<Paper variant="outlined" className={classes.openTicketsList}>
+					<Paper square elevation={0} className={classes.openTicketsList}>
 						<List style={{ paddingTop: 0 }}>
 							<div className={classes.ticketsListHeader}>
 								Meus tickets
@@ -485,7 +484,7 @@ const TicketsList = () => {
 							{renderTickets("open")}
 						</List>
 					</Paper>
-					<Paper variant="outlined" className={classes.openTicketsList}>
+					<Paper square elevation={0} className={classes.openTicketsList}>
 						<List style={{ paddingTop: 0 }}>
 							<div className={classes.ticketsListHeader}>
 								Aguardando
@@ -498,7 +497,7 @@ const TicketsList = () => {
 					</Paper>
 				</>
 			) : (
-				<Paper variant="outlined" className={classes.closedTicketsList}>
+				<Paper square elevation={0} className={classes.closedTicketsList}>
 					<List>{renderTickets("closed")}</List>
 				</Paper>
 			)}
@@ -508,7 +507,7 @@ const TicketsList = () => {
 				<source src={require("../../../../util/sound.ogg")} type="audio/ogg" />
 				<embed hidden={true} autostart="false" loop={false} src="./sound.mp3" />
 			</audio>
-		</div>
+		</Paper>
 	);
 };
 

frontend/src/pages/WhatsAuth/WhatsAuth.js

@@ -14,27 +14,19 @@ import Qrcode from "./components/Qrcode";
 const useStyles = makeStyles(theme => ({
 	root: {
 		display: "flex",
+		padding: theme.spacing(4),
 	},
 
-	title: {
-		flexGrow: 1,
-	},
-
-	appBarSpacer: theme.mixins.toolbar,
 	content: {
 		flexGrow: 1,
 
 		overflow: "auto",
 	},
-	container: {
-		// paddingTop: theme.spacing(4),
-		// paddingBottom: theme.spacing(4),
-		height: `calc(100% - 64px)`,
-	},
 	paper: {
 		padding: theme.spacing(2),
 		display: "flex",
 		overflow: "auto",
+		alignItems: "center",
 		flexDirection: "column",
 	},
 	fixedHeight: {
@@ -52,7 +44,7 @@ const WhatsAuth = () => {
 	useEffect(() => {
 		const fetchSession = async () => {
 			try {
-				const res = await api.get("/whatsapp/session");
+				const res = await api.get("/whatsapp/session/1");
 				setQrCode(res.data.qrcode);
 				setSession(res.data);
 			} catch (err) {
@@ -73,9 +65,9 @@ const WhatsAuth = () => {
 
 		socket.on("whats_auth", data => {
 			if (data.action === "authentication") {
-				history.push("/chat");
 				setQrCode("");
 				setSession(data.session);
+				history.push("/chat");
 			}
 		});
 
@@ -87,35 +79,22 @@ const WhatsAuth = () => {
 	console.log(session);
 
 	return (
-		<div>
-			<div className={classes.root}>
-				<main className={classes.content}>
-					<div className={classes.appBarSpacer} />
-					<Container maxWidth="lg" className={classes.container}>
-						<Grid container spacing={3}>
-							{session.status === "pending" ? (
-								<Grid item xs={6}>
-									<Paper className={classes.paper}>
-										<Qrcode qrCode={qrCode} />
-									</Paper>
-								</Grid>
-							) : (
-								<Grid item xs={6}>
-									<Paper className={classes.paper}>
-										<Bateryinfo sessio={session} />
-									</Paper>
-								</Grid>
-							)}
-
-							{/* <Grid item xs={12} md={4} lg={3}>
-									<Paper className={fixedHeightPaper}>
-										<h1>paper2</h1>
-									</Paper>
-								</Grid> */}
-						</Grid>
-					</Container>
-				</main>
-			</div>
+		<div className={classes.root}>
+			<Grid container spacing={3}>
+				{session.status === "pending" ? (
+					<Grid item xs={12}>
+						<Paper className={classes.paper}>
+							<Qrcode qrCode={qrCode} />
+						</Paper>
+					</Grid>
+				) : (
+					<Grid item xs={6}>
+						<Paper className={classes.paper}>
+							<Bateryinfo sessio={session} />
+						</Paper>
+					</Grid>
+				)}
+			</Grid>
 		</div>
 	);
 };

frontend/src/pages/WhatsAuth/components/Qrcode.js

@@ -5,7 +5,7 @@ import Typography from "@material-ui/core/Typography";
 const Qrcode = ({ qrCode }) => {
 	return (
 		<div>
-			<Typography component="h2" variant="h6" color="primary" gutterBottom>
+			<Typography color="primary" gutterBottom>
 				Leia o QrCode para iniciar a sessão
 			</Typography>
 			<QRCode value={qrCode} size={256} />