layout responsivo 2ª parte

frontend/src/App.js

@@ -2,13 +2,13 @@ import React, { useState, useEffect } from "react";
 import Routes from "./routes";
 import "react-toastify/dist/ReactToastify.css";
 
-import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";
+import { createTheme, ThemeProvider } from "@material-ui/core/styles";
 import { ptBR } from "@material-ui/core/locale";
 
 const App = () => {
   const [locale, setLocale] = useState();
 
-	const theme = createMuiTheme(
+  const theme = createTheme(
     {
       scrollbarStyles: {
         "&::-webkit-scrollbar": {

frontend/src/components/ColorPicker/index.js

@@ -6,7 +6,7 @@ import { GithubPicker } from "react-color";
 const ColorPicker = ({ onChange, currentColor, handleClose, open }) => {
   const [selectedColor, setSelectedColor] = useState(currentColor);
 
-	const handleChange = color => {
+  const handleChange = (color) => {
     setSelectedColor(color.hex);
     handleClose();
   };
@@ -22,7 +22,7 @@ const ColorPicker = ({ onChange, currentColor, handleClose, open }) => {
         triangle="hide"
         color={selectedColor}
         onChange={handleChange}
-				onChangeComplete={color => onChange(color.hex)}
+        onChangeComplete={(color) => onChange(color.hex)}
       />
     </Dialog>
   );

frontend/src/components/MainContainer/index.js

@@ -3,11 +3,13 @@ import React from "react";
 import { makeStyles } from "@material-ui/core/styles";
 import Container from "@material-ui/core/Container";
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
   mainContainer: {
     flex: 1,
-		padding: theme.spacing(2),
+    // padding: theme.spacing(2),
-		height: `calc(100% - 48px)`,
+    // height: `calc(100% - 48px)`,
+    padding: 0,
+    height: "100%",
   },
 
   contentWrapper: {
@@ -22,7 +24,7 @@ const MainContainer = ({ children }) => {
   const classes = useStyles();
 
   return (
-		<Container className={classes.mainContainer}>
+    <Container className={classes.mainContainer} maxWidth={false}>
       <div className={classes.contentWrapper}>{children}</div>
     </Container>
   );

frontend/src/components/MessageInput/index.js

@@ -12,6 +12,7 @@ import CircularProgress from "@material-ui/core/CircularProgress";
 import { green } from "@material-ui/core/colors";
 import AttachFileIcon from "@material-ui/icons/AttachFile";
 import IconButton from "@material-ui/core/IconButton";
+import MoreVert from "@material-ui/icons/MoreVert";
 import MoodIcon from "@material-ui/icons/Mood";
 import SendIcon from "@material-ui/icons/Send";
 import CancelIcon from "@material-ui/icons/Cancel";
@@ -19,7 +20,13 @@ import ClearIcon from "@material-ui/icons/Clear";
 import MicIcon from "@material-ui/icons/Mic";
 import CheckCircleOutlineIcon from "@material-ui/icons/CheckCircleOutline";
 import HighlightOffIcon from "@material-ui/icons/HighlightOff";
-import { FormControlLabel, Switch } from "@material-ui/core";
+import {
+  FormControlLabel,
+  Hidden,
+  Menu,
+  MenuItem,
+  Switch,
+} from "@material-ui/core";
 import ClickAwayListener from "@material-ui/core/ClickAwayListener";
 
 import { i18n } from "../../translate/i18n";
@@ -39,6 +46,11 @@ const useStyles = makeStyles((theme) => ({
     flexDirection: "column",
     alignItems: "center",
     borderTop: "1px solid rgba(0, 0, 0, 0.12)",
+    [theme.breakpoints.down("sm")]: {
+      position: "fixed",
+      bottom: 0,
+      width: "100%",
+    },
   },
 
   newMessageBox: {
@@ -56,6 +68,7 @@ const useStyles = makeStyles((theme) => ({
     display: "flex",
     borderRadius: 20,
     flex: 1,
+    position: "relative",
   },
 
   messageInput: {
@@ -200,6 +213,7 @@ const MessageInput = ({ ticketStatus }) => {
   const [quickAnswers, setQuickAnswer] = useState([]);
   const [typeBar, setTypeBar] = useState(false);
   const inputRef = useRef();
+  const [anchorEl, setAnchorEl] = useState(null);
   const { setReplyingMessage, replyingMessage } =
     useContext(ReplyMessageContext);
   const { user } = useContext(AuthContext);
@@ -363,6 +377,14 @@ const MessageInput = ({ ticketStatus }) => {
     }
   };
 
+  const handleOpenMenuClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleMenuItemClick = (event) => {
+    setAnchorEl(null);
+  };
+
   const renderReplyingMessage = (message) => {
     return (
       <div className={classes.replyginMsgWrapper}>
@@ -429,6 +451,7 @@ const MessageInput = ({ ticketStatus }) => {
       <Paper square elevation={0} className={classes.mainWrapper}>
         {replyingMessage && renderReplyingMessage(replyingMessage)}
         <div className={classes.newMessageBox}>
+          <Hidden only={["sm", "xs"]}>
             <IconButton
               aria-label="emojiPicker"
               component="span"
@@ -483,6 +506,71 @@ const MessageInput = ({ ticketStatus }) => {
                 />
               }
             />
+          </Hidden>
+          <Hidden only={["md", "lg", "xl"]}>
+            <IconButton
+              aria-controls="simple-menu"
+              aria-haspopup="true"
+              onClick={handleOpenMenuClick}
+            >
+              <MoreVert></MoreVert>
+            </IconButton>
+            <Menu
+              id="simple-menu"
+              keepMounted
+              anchorEl={anchorEl}
+              open={Boolean(anchorEl)}
+              onClose={handleMenuItemClick}
+            >
+              <MenuItem onClick={handleMenuItemClick}>
+                <IconButton
+                  aria-label="emojiPicker"
+                  component="span"
+                  disabled={loading || recording || ticketStatus !== "open"}
+                  onClick={(e) => setShowEmoji((prevState) => !prevState)}
+                >
+                  <MoodIcon className={classes.sendMessageIcons} />
+                </IconButton>
+              </MenuItem>
+              <MenuItem onClick={handleMenuItemClick}>
+                <input
+                  multiple
+                  type="file"
+                  id="upload-button"
+                  disabled={loading || recording || ticketStatus !== "open"}
+                  className={classes.uploadInput}
+                  onChange={handleChangeMedias}
+                />
+                <label htmlFor="upload-button">
+                  <IconButton
+                    aria-label="upload"
+                    component="span"
+                    disabled={loading || recording || ticketStatus !== "open"}
+                  >
+                    <AttachFileIcon className={classes.sendMessageIcons} />
+                  </IconButton>
+                </label>
+              </MenuItem>
+              <MenuItem onClick={handleMenuItemClick}>
+                <FormControlLabel
+                  style={{ marginRight: 7, color: "gray" }}
+                  label={i18n.t("messagesInput.signMessage")}
+                  labelPlacement="start"
+                  control={
+                    <Switch
+                      size="small"
+                      checked={signMessage}
+                      onChange={(e) => {
+                        setSignMessage(e.target.checked);
+                      }}
+                      name="showAllTickets"
+                      color="primary"
+                    />
+                  }
+                />
+              </MenuItem>
+            </Menu>
+          </Hidden>
           <div className={classes.messageInputWrapper}>
             <InputBase
               inputRef={(input) => {

frontend/src/components/MessageOptionsMenu/index.js

@@ -26,7 +26,7 @@ const MessageOptionsMenu = ({ message, menuOpen, handleClose, anchorEl }) => {
     handleClose();
   };
 
-	const handleOpenConfirmationModal = e => {
+  const handleOpenConfirmationModal = (e) => {
     setConfirmationOpen(true);
     handleClose();
   };

frontend/src/components/MessagesList/index.js

@@ -29,7 +29,7 @@ import whatsBackground from "../../assets/wa-background.png";
 import api from "../../services/api";
 import toastError from "../../errors/toastError";
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
   messagesListWrapper: {
     overflow: "hidden",
     position: "relative",
@@ -45,6 +45,9 @@ const useStyles = makeStyles(theme => ({
     flexGrow: 1,
     padding: "20px 20px 20px 20px",
     overflowY: "scroll",
+    [theme.breakpoints.down("sm")]: {
+      paddingBottom: "90px",
+    },
     ...theme.scrollbarStyles,
   },
 
@@ -260,8 +263,8 @@ const reducer = (state, action) => {
     const messages = action.payload;
     const newMessages = [];
 
-		messages.forEach(message => {
+    messages.forEach((message) => {
-			const messageIndex = state.findIndex(m => m.id === message.id);
+      const messageIndex = state.findIndex((m) => m.id === message.id);
       if (messageIndex !== -1) {
         state[messageIndex] = message;
       } else {
@@ -274,7 +277,7 @@ const reducer = (state, action) => {
 
   if (action.type === "ADD_MESSAGE") {
     const newMessage = action.payload;
-		const messageIndex = state.findIndex(m => m.id === newMessage.id);
+    const messageIndex = state.findIndex((m) => m.id === newMessage.id);
 
     if (messageIndex !== -1) {
       state[messageIndex] = newMessage;
@@ -287,7 +290,7 @@ const reducer = (state, action) => {
 
   if (action.type === "UPDATE_MESSAGE") {
     const messageToUpdate = action.payload;
-		const messageIndex = state.findIndex(m => m.id === messageToUpdate.id);
+    const messageIndex = state.findIndex((m) => m.id === messageToUpdate.id);
 
     if (messageIndex !== -1) {
       state[messageIndex] = messageToUpdate;
@@ -357,7 +360,7 @@ const MessagesList = ({ ticketId, isGroup }) => {
 
     socket.on("connect", () => socket.emit("joinChatBox", ticketId));
 
-		socket.on("appMessage", data => {
+    socket.on("appMessage", (data) => {
       if (data.action === "create") {
         dispatch({ type: "ADD_MESSAGE", payload: data.message });
         scrollToBottom();
@@ -374,7 +377,7 @@ const MessagesList = ({ ticketId, isGroup }) => {
   }, [ticketId]);
 
   const loadMore = () => {
-		setPageNumber(prevPageNumber => prevPageNumber + 1);
+    setPageNumber((prevPageNumber) => prevPageNumber + 1);
   };
 
   const scrollToBottom = () => {
@@ -383,7 +386,7 @@ const MessagesList = ({ ticketId, isGroup }) => {
     }
   };
 
-	const handleScroll = e => {
+  const handleScroll = (e) => {
     if (!hasMore) return;
     const { scrollTop } = e.currentTarget;
 
@@ -405,11 +408,11 @@ const MessagesList = ({ ticketId, isGroup }) => {
     setSelectedMessage(message);
   };
 
-	const handleCloseMessageOptionsMenu = e => {
+  const handleCloseMessageOptionsMenu = (e) => {
     setAnchorEl(null);
   };
 
-	const checkMessageMedia = message => {
+  const checkMessageMedia = (message) => {
     if (message.mediaType === "image") {
       return <ModalImageCors imageUrl={message.mediaUrl} />;
     }
@@ -449,7 +452,7 @@ const MessagesList = ({ ticketId, isGroup }) => {
     }
   };
 
-	const renderMessageAck = message => {
+  const renderMessageAck = (message) => {
     if (message.ack === 0) {
       return <AccessTime fontSize="small" className={classes.ackIcons} />;
     }
@@ -518,7 +521,7 @@ const MessagesList = ({ ticketId, isGroup }) => {
     }
   };
 
-	const renderQuotedMessage = message => {
+  const renderQuotedMessage = (message) => {
     return (
       <div
         className={clsx(classes.quotedContainerLeft, {
@@ -557,7 +560,7 @@ const MessagesList = ({ ticketId, isGroup }) => {
                   id="messageActionsButton"
                   disabled={message.isDeleted}
                   className={classes.messageActionsButton}
-									onClick={e => handleOpenMessageOptionsMenu(e, message)}
+                  onClick={(e) => handleOpenMessageOptionsMenu(e, message)}
                 >
                   <ExpandMore />
                 </IconButton>
@@ -589,7 +592,7 @@ const MessagesList = ({ ticketId, isGroup }) => {
                   id="messageActionsButton"
                   disabled={message.isDeleted}
                   className={classes.messageActionsButton}
-									onClick={e => handleOpenMessageOptionsMenu(e, message)}
+                  onClick={(e) => handleOpenMessageOptionsMenu(e, message)}
                 >
                   <ExpandMore />
                 </IconButton>

frontend/src/components/Ticket/index.js

@@ -19,7 +19,7 @@ import toastError from "../../errors/toastError";
 
 const drawerWidth = 320;
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
   root: {
     display: "flex",
     height: "100%",
@@ -27,6 +27,25 @@ const useStyles = makeStyles(theme => ({
     overflow: "hidden",
   },
 
+  ticketInfo: {
+    maxWidth: "50%",
+    flexBasis: "50%",
+    [theme.breakpoints.down("sm")]: {
+      maxWidth: "80%",
+      flexBasis: "80%",
+    },
+  },
+  ticketActionButtons: {
+    maxWidth: "50%",
+    flexBasis: "50%",
+    display: "flex",
+    [theme.breakpoints.down("sm")]: {
+      maxWidth: "100%",
+      flexBasis: "100%",
+      marginBottom: "5px",
+    },
+  },
+
   mainWrapper: {
     flex: 1,
     height: "100%",
@@ -89,7 +108,7 @@ const Ticket = () => {
 
     socket.on("connect", () => socket.emit("joinChatBox", ticketId));
 
-		socket.on("ticket", data => {
+    socket.on("ticket", (data) => {
       if (data.action === "update") {
         setTicket(data.ticket);
       }
@@ -100,9 +119,9 @@ const Ticket = () => {
       }
     });
 
-		socket.on("contact", data => {
+    socket.on("contact", (data) => {
       if (data.action === "update") {
-				setContact(prevState => {
+        setContact((prevState) => {
           if (prevState.id === data.contact?.id) {
             return { ...prevState, ...data.contact };
           }
@@ -134,12 +153,16 @@ const Ticket = () => {
         })}
       >
         <TicketHeader loading={loading}>
+          <div className={classes.ticketInfo}>
             <TicketInfo
               contact={contact}
               ticket={ticket}
               onClick={handleDrawerOpen}
             />
+          </div>
+          <div className={classes.ticketActionButtons}>
             <TicketActionButtons ticket={ticket} />
+          </div>
         </TicketHeader>
         <ReplyMessageProvider>
           <MessagesList

frontend/src/components/TicketHeader/index.js

@@ -1,20 +1,29 @@
 import React from "react";
 
-import { Card } from "@material-ui/core";
+import { Card, Button } from "@material-ui/core";
 import { makeStyles } from "@material-ui/core/styles";
 import TicketHeaderSkeleton from "../TicketHeaderSkeleton";
+import ArrowBackIos from "@material-ui/icons/ArrowBackIos";
+import { useHistory } from "react-router-dom";
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
   ticketHeader: {
     display: "flex",
     backgroundColor: "#eee",
     flex: "none",
     borderBottom: "1px solid rgba(0, 0, 0, 0.12)",
+    [theme.breakpoints.down("sm")]: {
+      flexWrap: "wrap",
+    },
   },
 }));
 
 const TicketHeader = ({ loading, children }) => {
   const classes = useStyles();
+  const history = useHistory();
+  const handleBack = () => {
+    history.push("/tickets");
+  };
 
   return (
     <>
@@ -22,6 +31,9 @@ const TicketHeader = ({ loading, children }) => {
         <TicketHeaderSkeleton />
       ) : (
         <Card square className={classes.ticketHeader}>
+          <Button color="primary" onClick={handleBack}>
+            <ArrowBackIos />
+          </Button>
           {children}
         </Card>
       )}

frontend/src/components/TicketsManager/index.js

@@ -22,7 +22,7 @@ import { Can } from "../Can";
 import TicketsQueueSelect from "../TicketsQueueSelect";
 import { Button } from "@material-ui/core";
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
   ticketsWrapper: {
     position: "relative",
     display: "flex",
@@ -90,7 +90,7 @@ const TicketsManager = () => {
   const searchInputRef = useRef();
   const { user } = useContext(AuthContext);
 
-	const userQueueIds = user.queues.map(q => q.id);
+  const userQueueIds = user.queues.map((q) => q.id);
   const [selectedQueueIds, setSelectedQueueIds] = useState(userQueueIds || []);
 
   useEffect(() => {
@@ -101,7 +101,7 @@ const TicketsManager = () => {
 
   let searchTimeout;
 
-	const handleSearch = e => {
+  const handleSearch = (e) => {
     const searchedTerm = e.target.value.toLowerCase();
 
     clearTimeout(searchTimeout);
@@ -125,7 +125,7 @@ const TicketsManager = () => {
     <Paper elevation={0} variant="outlined" className={classes.ticketsWrapper}>
       <NewTicketModal
         modalOpen={newTicketModalOpen}
-				onClose={e => setNewTicketModalOpen(false)}
+        onClose={(e) => setNewTicketModalOpen(false)}
       />
       <Paper elevation={0} square className={classes.tabsHeader}>
         <Tabs
@@ -189,7 +189,7 @@ const TicketsManager = () => {
                       size="small"
                       checked={showAllTickets}
                       onChange={() =>
-												setShowAllTickets(prevState => !prevState)
+                        setShowAllTickets((prevState) => !prevState)
                       }
                       name="showAllTickets"
                       color="primary"
@@ -204,7 +204,7 @@ const TicketsManager = () => {
           style={{ marginLeft: 6 }}
           selectedQueueIds={selectedQueueIds}
           userQueues={user?.queues}
-					onChange={values => setSelectedQueueIds(values)}
+          onChange={(values) => setSelectedQueueIds(values)}
         />
       </Paper>
       <TabPanel value={tab} name="open" className={classes.ticketsWrapper}>

frontend/src/pages/Contacts/index.js

@@ -40,8 +40,8 @@ const reducer = (state, action) => {
     const contacts = action.payload;
     const newContacts = [];
 
-		contacts.forEach(contact => {
+    contacts.forEach((contact) => {
-			const contactIndex = state.findIndex(c => c.id === contact.id);
+      const contactIndex = state.findIndex((c) => c.id === contact.id);
       if (contactIndex !== -1) {
         state[contactIndex] = contact;
       } else {
@@ -54,7 +54,7 @@ const reducer = (state, action) => {
 
   if (action.type === "UPDATE_CONTACTS") {
     const contact = action.payload;
-		const contactIndex = state.findIndex(c => c.id === contact.id);
+    const contactIndex = state.findIndex((c) => c.id === contact.id);
 
     if (contactIndex !== -1) {
       state[contactIndex] = contact;
@@ -67,7 +67,7 @@ const reducer = (state, action) => {
   if (action.type === "DELETE_CONTACT") {
     const contactId = action.payload;
 
-		const contactIndex = state.findIndex(c => c.id === contactId);
+    const contactIndex = state.findIndex((c) => c.id === contactId);
     if (contactIndex !== -1) {
       state.splice(contactIndex, 1);
     }
@@ -79,7 +79,7 @@ const reducer = (state, action) => {
   }
 };
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
   mainPaper: {
     flex: 1,
     padding: theme.spacing(1),
@@ -132,7 +132,7 @@ const Contacts = () => {
   useEffect(() => {
     const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
 
-		socket.on("contact", data => {
+    socket.on("contact", (data) => {
       if (data.action === "update" || data.action === "create") {
         dispatch({ type: "UPDATE_CONTACTS", payload: data.contact });
       }
@@ -147,7 +147,7 @@ const Contacts = () => {
     };
   }, []);
 
-	const handleSearch = event => {
+  const handleSearch = (event) => {
     setSearchParam(event.target.value.toLowerCase());
   };
 
@@ -161,7 +161,7 @@ const Contacts = () => {
     setContactModalOpen(false);
   };
 
-	const handleSaveTicket = async contactId => {
+  const handleSaveTicket = async (contactId) => {
     if (!contactId) return;
     setLoading(true);
     try {
@@ -177,12 +177,12 @@ const Contacts = () => {
     setLoading(false);
   };
 
-	const hadleEditContact = contactId => {
+  const hadleEditContact = (contactId) => {
     setSelectedContactId(contactId);
     setContactModalOpen(true);
   };
 
-	const handleDeleteContact = async contactId => {
+  const handleDeleteContact = async (contactId) => {
     try {
       await api.delete(`/contacts/${contactId}`);
       toast.success(i18n.t("contacts.toasts.deleted"));
@@ -204,10 +204,10 @@ const Contacts = () => {
   };
 
   const loadMore = () => {
-		setPageNumber(prevState => prevState + 1);
+    setPageNumber((prevState) => prevState + 1);
   };
 
-	const handleScroll = e => {
+  const handleScroll = (e) => {
     if (!hasMore || loading) return;
     const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
     if (scrollHeight - (scrollTop + 100) < clientHeight) {
@@ -233,7 +233,7 @@ const Contacts = () => {
         }
         open={confirmOpen}
         onClose={setConfirmOpen}
-				onConfirm={e =>
+        onConfirm={(e) =>
           deletingContact
             ? handleDeleteContact(deletingContact.id)
             : handleimportContact()
@@ -262,7 +262,7 @@ const Contacts = () => {
           <Button
             variant="contained"
             color="primary"
-						onClick={e => setConfirmOpen(true)}
+            onClick={(e) => setConfirmOpen(true)}
           >
             {i18n.t("contacts.buttons.import")}
           </Button>
@@ -298,7 +298,7 @@ const Contacts = () => {
           </TableHead>
           <TableBody>
             <>
-							{contacts.map(contact => (
+              {contacts.map((contact) => (
                 <TableRow key={contact.id}>
                   <TableCell style={{ paddingRight: 0 }}>
                     {<Avatar src={contact.profilePicUrl} />}
@@ -325,7 +325,7 @@ const Contacts = () => {
                       yes={() => (
                         <IconButton
                           size="small"
-													onClick={e => {
+                          onClick={(e) => {
                             setConfirmOpen(true);
                             setDeletingContact(contact);
                           }}

frontend/src/pages/Login/index.js

@@ -30,7 +30,7 @@ import { AuthContext } from "../../context/Auth/AuthContext";
 // 	);
 // };
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
   paper: {
     marginTop: theme.spacing(8),
     display: "flex",
@@ -57,11 +57,11 @@ const Login = () => {
 
   const { handleLogin } = useContext(AuthContext);
 
-	const handleChangeInput = e => {
+  const handleChangeInput = (e) => {
     setUser({ ...user, [e.target.name]: e.target.value });
   };
 
-	const handlSubmit = e => {
+  const handlSubmit = (e) => {
     e.preventDefault();
     handleLogin(user);
   };

frontend/src/pages/Queues/index.js

@@ -28,7 +28,7 @@ import QueueModal from "../../components/QueueModal";
 import { toast } from "react-toastify";
 import ConfirmationModal from "../../components/ConfirmationModal";
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
   mainPaper: {
     flex: 1,
     padding: theme.spacing(1),
@@ -47,8 +47,8 @@ const reducer = (state, action) => {
     const queues = action.payload;
     const newQueues = [];
 
-		queues.forEach(queue => {
+    queues.forEach((queue) => {
-			const queueIndex = state.findIndex(q => q.id === queue.id);
+      const queueIndex = state.findIndex((q) => q.id === queue.id);
       if (queueIndex !== -1) {
         state[queueIndex] = queue;
       } else {
@@ -61,7 +61,7 @@ const reducer = (state, action) => {
 
   if (action.type === "UPDATE_QUEUES") {
     const queue = action.payload;
-		const queueIndex = state.findIndex(u => u.id === queue.id);
+    const queueIndex = state.findIndex((u) => u.id === queue.id);
 
     if (queueIndex !== -1) {
       state[queueIndex] = queue;
@@ -73,7 +73,7 @@ const reducer = (state, action) => {
 
   if (action.type === "DELETE_QUEUE") {
     const queueId = action.payload;
-		const queueIndex = state.findIndex(q => q.id === queueId);
+    const queueIndex = state.findIndex((q) => q.id === queueId);
     if (queueIndex !== -1) {
       state.splice(queueIndex, 1);
     }
@@ -113,7 +113,7 @@ const Queues = () => {
   useEffect(() => {
     const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
 
-		socket.on("queue", data => {
+    socket.on("queue", (data) => {
       if (data.action === "update" || data.action === "create") {
         dispatch({ type: "UPDATE_QUEUES", payload: data.queue });
       }
@@ -138,7 +138,7 @@ const Queues = () => {
     setSelectedQueue(null);
   };
 
-	const handleEditQueue = queue => {
+  const handleEditQueue = (queue) => {
     setSelectedQueue(queue);
     setQueueModalOpen(true);
   };
@@ -148,7 +148,7 @@ const Queues = () => {
     setSelectedQueue(null);
   };
 
-	const handleDeleteQueue = async queueId => {
+  const handleDeleteQueue = async (queueId) => {
     try {
       await api.delete(`/queue/${queueId}`);
       toast.success(i18n.t("Queue deleted successfully!"));
@@ -210,7 +210,7 @@ const Queues = () => {
           </TableHead>
           <TableBody>
             <>
-							{queues.map(queue => (
+              {queues.map((queue) => (
                 <TableRow key={queue.id}>
                   <TableCell align="center">{queue.name}</TableCell>
                   <TableCell align="center">

frontend/src/pages/Tickets/index.js

@@ -8,12 +8,13 @@ import TicketsManager from "../../components/TicketsManager/";
 import Ticket from "../../components/Ticket/";
 
 import { i18n } from "../../translate/i18n";
+import Hidden from "@material-ui/core/Hidden";
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
   chatContainer: {
     flex: 1,
-		// backgroundColor: "#eee",
+    // // backgroundColor: "#eee",
-		padding: theme.spacing(4),
+    // padding: theme.spacing(4),
     height: `calc(100% - 48px)`,
     overflowY: "hidden",
   },
@@ -30,6 +31,15 @@ const useStyles = makeStyles(theme => ({
     flexDirection: "column",
     overflowY: "hidden",
   },
+  contactsWrapperSmall: {
+    display: "flex",
+    height: "100%",
+    flexDirection: "column",
+    overflowY: "hidden",
+    [theme.breakpoints.down("sm")]: {
+      display: "none",
+    },
+  },
   messagessWrapper: {
     display: "flex",
     height: "100%",
@@ -42,6 +52,13 @@ const useStyles = makeStyles(theme => ({
     alignItems: "center",
     height: "100%",
     textAlign: "center",
+    borderRadius: 0,
+  },
+  ticketsManager: {},
+  ticketsManagerClosed: {
+    [theme.breakpoints.down("sm")]: {
+      display: "none",
+    },
   },
 }));
 
@@ -53,18 +70,30 @@ const Chat = () => {
     <div className={classes.chatContainer}>
       <div className={classes.chatPapper}>
         <Grid container spacing={0}>
-					<Grid item xs={4} className={classes.contactsWrapper}>
+          {/* <Grid item xs={4} className={classes.contactsWrapper}> */}
+          <Grid
+            item
+            xs={12}
+            md={4}
+            className={
+              ticketId ? classes.contactsWrapperSmall : classes.contactsWrapper
+            }
+          >
             <TicketsManager />
           </Grid>
-					<Grid item xs={8} className={classes.messagessWrapper}>
+          <Grid item xs={12} md={8} className={classes.messagessWrapper}>
+            {/* <Grid item xs={8} className={classes.messagessWrapper}> */}
             {ticketId ? (
               <>
                 <Ticket />
               </>
             ) : (
-							<Paper square variant="outlined" className={classes.welcomeMsg}>
+              <Hidden only={["sm", "xs"]}>
+                <Paper className={classes.welcomeMsg}>
+                  {/* <Paper square variant="outlined" className={classes.welcomeMsg}> */}
                   <span>{i18n.t("chat.noTicketMessage")}</span>
                 </Paper>
+              </Hidden>
             )}
           </Grid>
         </Grid>

frontend/src/pages/Users/index.js

@@ -35,8 +35,8 @@ const reducer = (state, action) => {
     const users = action.payload;
     const newUsers = [];
 
-		users.forEach(user => {
+    users.forEach((user) => {
-			const userIndex = state.findIndex(u => u.id === user.id);
+      const userIndex = state.findIndex((u) => u.id === user.id);
       if (userIndex !== -1) {
         state[userIndex] = user;
       } else {
@@ -49,7 +49,7 @@ const reducer = (state, action) => {
 
   if (action.type === "UPDATE_USERS") {
     const user = action.payload;
-		const userIndex = state.findIndex(u => u.id === user.id);
+    const userIndex = state.findIndex((u) => u.id === user.id);
 
     if (userIndex !== -1) {
       state[userIndex] = user;
@@ -62,7 +62,7 @@ const reducer = (state, action) => {
   if (action.type === "DELETE_USER") {
     const userId = action.payload;
 
-		const userIndex = state.findIndex(u => u.id === userId);
+    const userIndex = state.findIndex((u) => u.id === userId);
     if (userIndex !== -1) {
       state.splice(userIndex, 1);
     }
@@ -74,7 +74,7 @@ const reducer = (state, action) => {
   }
 };
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
   mainPaper: {
     flex: 1,
     padding: theme.spacing(1),
@@ -124,7 +124,7 @@ const Users = () => {
   useEffect(() => {
     const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
 
-		socket.on("user", data => {
+    socket.on("user", (data) => {
       if (data.action === "update" || data.action === "create") {
         dispatch({ type: "UPDATE_USERS", payload: data.user });
       }
@@ -149,16 +149,16 @@ const Users = () => {
     setUserModalOpen(false);
   };
 
-	const handleSearch = event => {
+  const handleSearch = (event) => {
     setSearchParam(event.target.value.toLowerCase());
   };
 
-	const handleEditUser = user => {
+  const handleEditUser = (user) => {
     setSelectedUser(user);
     setUserModalOpen(true);
   };
 
-	const handleDeleteUser = async userId => {
+  const handleDeleteUser = async (userId) => {
     try {
       await api.delete(`/users/${userId}`);
       toast.success(i18n.t("users.toasts.deleted"));
@@ -171,10 +171,10 @@ const Users = () => {
   };
 
   const loadMore = () => {
-		setPageNumber(prevState => prevState + 1);
+    setPageNumber((prevState) => prevState + 1);
   };
 
-	const handleScroll = e => {
+  const handleScroll = (e) => {
     if (!hasMore || loading) return;
     const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
     if (scrollHeight - (scrollTop + 100) < clientHeight) {
@@ -250,7 +250,7 @@ const Users = () => {
           </TableHead>
           <TableBody>
             <>
-							{users.map(user => (
+              {users.map((user) => (
                 <TableRow key={user.id}>
                   <TableCell align="center">{user.name}</TableCell>
                   <TableCell align="center">{user.email}</TableCell>
@@ -265,7 +265,7 @@ const Users = () => {
 
                     <IconButton
                       size="small"
-											onClick={e => {
+                      onClick={(e) => {
                         setConfirmModalOpen(true);
                         setDeletingUser(user);
                       }}