layout responsivo 2ª parte

2026-04-22 21:50:12 +00:00 · 2021-09-07 13:00:51 -03:00
parent 50d6c42345
commit 4bf8ac4521
15 changed files with 2108 additions and 1951 deletions
--- a/frontend/src/App.js
+++ b/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": {
--- a/frontend/src/components/ColorPicker/index.js
+++ b/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>
  );
--- a/frontend/src/components/MainContainer/index.js
+++ b/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),
-		height: `calc(100% - 48px)`,
+    // padding: theme.spacing(2),
+    // 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>
  );
--- a/frontend/src/components/MessageInput/index.js
+++ b/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) => {
--- a/frontend/src/components/MessageOptionsMenu/index.js
+++ b/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();
  };
--- a/frontend/src/components/MessagesList/index.js
+++ b/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 => {
-			const messageIndex = state.findIndex(m => m.id === message.id);
+    messages.forEach((message) => {
+      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>
--- a/frontend/src/components/Ticket/index.js
+++ b/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
--- a/frontend/src/components/TicketHeader/index.js
+++ b/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>
      )}
--- a/frontend/src/components/TicketsManager/index.js
+++ b/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}>
--- a/frontend/src/pages/Contacts/index.js
+++ b/frontend/src/pages/Contacts/index.js
@@ -40,8 +40,8 @@ const reducer = (state, action) => {
    const contacts = action.payload;
    const newContacts = [];

-		contacts.forEach(contact => {
-			const contactIndex = state.findIndex(c => c.id === contact.id);
+    contacts.forEach((contact) => {
+      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);
                          }}
--- a/frontend/src/pages/Login/index.js
+++ b/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);
  };
--- a/frontend/src/pages/Queues/index.js
+++ b/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 => {
-			const queueIndex = state.findIndex(q => q.id === queue.id);
+    queues.forEach((queue) => {
+      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">
--- a/frontend/src/pages/Tickets/index.js
+++ b/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",
-		padding: theme.spacing(4),
+    // // backgroundColor: "#eee",
+    // 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>
--- a/frontend/src/pages/Users/index.js
+++ b/frontend/src/pages/Users/index.js
@@ -35,8 +35,8 @@ const reducer = (state, action) => {
    const users = action.payload;
    const newUsers = [];

-		users.forEach(user => {
-			const userIndex = state.findIndex(u => u.id === user.id);
+    users.forEach((user) => {
+      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);
                      }}