Login page Done;

Menu WP. And in current removing MUI

frontend/src/assets/images/HitLogo/HIT-Logo_Blanco_48mm.svg

@@ -0,0 +1,9 @@
+<svg width="76" height="76" viewBox="0 0 76 76" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect width="76" height="76" fill="url(#pattern0)"/>
+<defs>
+<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_204_7817" transform="scale(0.00735294)"/>
+</pattern>
+<image id="image0_204_7817" width="136" height="136" xlink:href="data:image/png;base64,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"/>
+</defs>
+</svg>

frontend/src/components/Base/MainContainer.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import MainContainerStyled from "./MainContainer.style"
+
+const Container = ({children}) => {
+  return (
+    <MainContainerStyled>{children}</MainContainerStyled>
+  )
+}
+
+export default Container

frontend/src/components/Base/MainContainer.style.jsx

@@ -0,0 +1,11 @@
+import styled from "styled-components";
+
+const MainContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: right;
+  width: 100%;
+  height: 100vh;
+`;
+
+export default MainContainer;

frontend/src/components/LoadingScreen/Loading.jsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+import LoadingStyled from "./Loading.style"
+
+const Loading = () => {
+  return <LoadingStyled/>;
+};
+
+export default Loading;

frontend/src/components/LoadingScreen/Loading.style.jsx

@@ -0,0 +1,55 @@
+import styled from "styled-components";
+
+import {color} from "../../style/varibles"
+
+import logo from "../../assets/images/Logo.png";
+
+
+
+const LoadingStyled = styled.div`
+  position: relative;
+  width: 100%;
+  height: 100vh;
+  background-color: #00000032;
+  display: flex;
+  text-align: center;
+  justify-items: center;
+  align-items: center;
+  &:after {
+    content: "";
+    display: block;
+    margin: 0 auto;
+    border: 16px solid transparent;
+    border-top: 16px solid ${color.pricinpal.naranja};
+    border-bottom: 16px solid ${color.pricinpal.grisOscuro};
+    border-radius: 50%;
+    width: 220px;
+    height: 220px;
+    animation: spin 2s linear infinite;
+  }
+  &:before {
+    content: url(${logo});
+    position: absolute;
+    display: block;
+    left: 0;
+    right: 0;
+    margin-left: auto;
+    margin-right: auto;
+    background-color: white;
+    padding: 24px;
+    border-radius: 50%;
+    width: 200px;
+    height: 200px;
+  }
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+`;
+
+export default LoadingStyled;
+

frontend/src/components/LoginComponents/CompanyLogo/Company.jsx

@@ -1,9 +1,17 @@
-import React from 'react'
+import React from "react";
+
+import CompanyStyled from "./Company.style";
+
+import { ReactComponent as Hit46mm } from "../../../assets/images/HitLogo/HIT-Logo_Blanco_48mm.svg";
 
 const Company = () => {
   return (
-    <div>Company</div>
+    <CompanyStyled>
-  )
+      <Hit46mm />
-}
+      <p>Copyright Ⓒ 2022 HIT Communications. Todos os Direitos Reservados</p>
+    </CompanyStyled>
+  );
+};
+
+export default Company;
 
-export default Company

frontend/src/components/LoginComponents/CompanyLogo/Company.style.jsx

@@ -0,0 +1,19 @@
+import styled from "styled-components";
+
+const CompanyStyled = styled.div`
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  justify-content: right;
+  align-items: flex-end;
+  width: 100%;
+  right: 16px;
+  bottom: 16px;
+  font-size: 10px;
+  p{
+    font-family: "HelveticaHeavy";
+  }
+`;
+
+export default CompanyStyled;
+

frontend/src/components/LoginComponents/VideoTag/VideoLogin.jsx

@@ -1,15 +0,0 @@
-import React from "react";
-
-import StyleVideo from "./VideoLogin.style";
-import bgvideo from "../../../assets/videos/video.mp4";
-
-const VideoLogin = () => {
-  return (
-    <StyleVideo autoPlay muted loop id="bglogin">
-      <source src={bgvideo} type="video/mp4" />
-    </StyleVideo>
-  );
-};
-
-export default VideoLogin;
-

frontend/src/components/Menu/MenuComponent.jsx

@@ -0,0 +1,50 @@
+import React from "react";
+
+import { MenuStyled, MenuListStyled, MenuListItemStyled } from "./MenuComponent.style";
+
+import { WhatsAppsContext } from "../../context/WhatsApp/WhatsAppsContext";
+import { AuthContext } from "../../context/Auth/AuthContext";
+import VideoComponent from "../VideoTag/VideoComponent";
+
+const MenuComponent = () => {
+  const { whatsApps } = React.useContext(WhatsAppsContext);
+  const { user } = React.useContext(AuthContext);
+  const [connectionWarning, setConnectionWarning] = React.useState(false);
+
+  React.useEffect(() => {
+    const delayDebounceFn = setTimeout(() => {
+      if (whatsApps.length > 0) {
+        const offlineWhats = whatsApps.filter((whats) => {
+          return (
+            whats.status === "qrcode" ||
+            whats.status === "PAIRING" ||
+            whats.status === "DISCONNECTED" ||
+            whats.status === "TIMEOUT" ||
+            whats.status === "OPENING"
+          );
+        });
+        if (offlineWhats.length > 0) {
+          setConnectionWarning(true);
+        } else {
+          setConnectionWarning(false);
+        }
+      }
+    }, 2000);
+    return () => clearTimeout(delayDebounceFn);
+  }, [whatsApps]);
+
+  return (
+    <MenuStyled>
+      <VideoComponent width={"100%"} zIndex={"-1"} position={"absolute"} />
+      <MenuListStyled>
+        <MenuListItemStyled>link</MenuListItemStyled>
+        <MenuListItemStyled>link</MenuListItemStyled>
+        <MenuListItemStyled>link</MenuListItemStyled>
+        <MenuListItemStyled>link</MenuListItemStyled>
+      </MenuListStyled>
+    </MenuStyled>
+  );
+};
+
+export default MenuComponent;
+

frontend/src/components/Menu/MenuComponent.style.jsx

@@ -0,0 +1,36 @@
+import styled from "styled-components";
+import { color } from "../../style/varibles";
+
+//Nav
+const MenuStyled = styled.nav`
+  position: absolute;
+  width: 76px;
+  height: 100vh;
+  background: ${color.pricinpal.grisOscuro}; //Same background login
+  z-index: 10;
+`;
+//UL
+const MenuListStyled = styled.ul`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  z-index: 100;
+`;
+
+//LI
+const MenuListItemStyled = styled.li`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  gap: 6px;
+  color: ${color.pricinpal.blanco};
+  transition: all 0.2s linear;
+  &:hover {
+    color: ${color.pricinpal.naranja};
+    transition: all 0.2s linear;
+  }
+`;
+
+export { MenuStyled, MenuListStyled, MenuListItemStyled };
+

frontend/src/components/Menu/MenuTop.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { MenuTopStyled } from "./MenuTop.style";
+
+import video from "../../assets/videos/video.mp4"
+
+const MenuTop = () => {
+  return (
+    <MenuTopStyled>
+        <img src="" alt="" />
+    </MenuTopStyled>
+  )
+}
+
+export default MenuTop

frontend/src/components/Menu/MenuTop.style.jsx

@@ -0,0 +1,8 @@
+import styled from "styled-components";
+
+const MenuTopStyled = styled.div`
+  width: 100%;
+`;
+
+export { MenuTopStyled };
+

frontend/src/components/VideoTag/VideoComponent.jsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+import StyleVideo from "./VideoComponent.style";
+import bgvideo from "../../assets/videos/video.mp4";
+
+const VideoComponent = ({ width, zIndex,position, ...props }) => {
+  return (
+    <StyleVideo {...props} width={width} zIndex={zIndex} position={position} id="bglogin">
+      <source src={bgvideo} type="video/mp4" />
+    </StyleVideo>
+  );
+};
+
+export default VideoComponent;
+

frontend/src/components/VideoTag/VideoComponent.style.jsx

@@ -1,17 +1,17 @@
 import styled from "styled-components";
 
 const StyleVideo = styled.video`
-  width: 350px;
+  position: ${(props) => (props.position === "relative" ? "relative" : "absolute")};
+  z-index: ${(props) => props.zIndex};
+  width: ${(props) => props.width};
   height: 100vh;
   object-fit: cover;
-  filter: grayscale(1) brightness(.3);
+  filter: grayscale(1) brightness(0.3);
   margin-right: 60px;
   @media screen and (max-width: 992px) {
     display: none;
   }
 `;
 
-
-
 export default StyleVideo;
 

frontend/src/context/Auth/AuthContext.js

@@ -6,9 +6,6 @@ const AuthContext = createContext();
 
 const AuthProvider = ({ children }) => {
 	const { loading, user, isAuth, handleLogin, handleLogout } = useAuth();
-
-	//{console.log('authContext teste:  ', user)}
-
 	return (
 		<AuthContext.Provider
 			value={{ loading, user, isAuth, handleLogin, handleLogout }}

frontend/src/layout/MainListItems copy.js

@@ -0,0 +1,145 @@
+import React, { useContext, useEffect, useState } from "react";
+import { Link as RouterLink } from "react-router-dom";
+
+import ListItem from "@material-ui/core/ListItem";
+import ListItemIcon from "@material-ui/core/ListItemIcon";
+import ListItemText from "@material-ui/core/ListItemText";
+import ListSubheader from "@material-ui/core/ListSubheader";
+import Divider from "@material-ui/core/Divider";
+import { Badge } from "@material-ui/core";
+import DashboardOutlinedIcon from "@material-ui/icons/DashboardOutlined";
+
+import ReportOutlinedIcon from "@material-ui/icons/ReportOutlined";
+import SendOutlined from "@material-ui/icons/SendOutlined";
+
+//import ReportOutlined from "@bit/mui-org.material-ui-icons.report-outlined";
+
+import WhatsAppIcon from "@material-ui/icons/WhatsApp";
+import SyncAltIcon from "@material-ui/icons/SyncAlt";
+import SettingsOutlinedIcon from "@material-ui/icons/SettingsOutlined";
+import PeopleAltOutlinedIcon from "@material-ui/icons/PeopleAltOutlined";
+import ContactPhoneOutlinedIcon from "@material-ui/icons/ContactPhoneOutlined";
+import AccountTreeOutlinedIcon from "@material-ui/icons/AccountTreeOutlined";
+import QuestionAnswerOutlinedIcon from "@material-ui/icons/QuestionAnswerOutlined";
+
+import { i18n } from "../translate/i18n";
+import { WhatsAppsContext } from "../context/WhatsApp/WhatsAppsContext";
+import { AuthContext } from "../context/Auth/AuthContext";
+import { Can } from "../components/Can";
+
+function ListItemLink(props) {
+  const { icon, primary, to, className } = props;
+
+  const renderLink = React.useMemo(
+    () => React.forwardRef((itemProps, ref) => <RouterLink to={to} ref={ref} {...itemProps} />),
+    [to]
+  );
+
+  return (
+    <li>
+      <ListItem button component={renderLink} className={className}>
+        {icon ? <ListItemIcon>{icon}</ListItemIcon> : null}
+        <ListItemText primary={primary} />
+      </ListItem>
+    </li>
+  );
+}
+
+const MainListItems = (props) => {
+  const { drawerClose } = props;
+  const { whatsApps } = useContext(WhatsAppsContext);
+  const { user } = useContext(AuthContext);
+  const [connectionWarning, setConnectionWarning] = useState(false);
+
+  useEffect(() => {
+    const delayDebounceFn = setTimeout(() => {
+      if (whatsApps.length > 0) {
+        const offlineWhats = whatsApps.filter((whats) => {
+          return (
+            whats.status === "qrcode" ||
+            whats.status === "PAIRING" ||
+            whats.status === "DISCONNECTED" ||
+            whats.status === "TIMEOUT" ||
+            whats.status === "OPENING"
+          );
+        });
+        if (offlineWhats.length > 0) {
+          setConnectionWarning(true);
+        } else {
+          setConnectionWarning(false);
+        }
+      }
+    }, 2000);
+    return () => clearTimeout(delayDebounceFn);
+  }, [whatsApps]);
+
+  return (
+    <div onClick={drawerClose}>
+      <ListItemLink
+        to="/tickets"
+        primary={i18n.t("mainDrawer.listItems.tickets")}
+        icon={<WhatsAppIcon />}
+      />
+
+      <ListItemLink
+        to="/contacts"
+        primary={i18n.t("mainDrawer.listItems.contacts")}
+        icon={<ContactPhoneOutlinedIcon />}
+      />
+      <ListItemLink to="/schedulesReminder" primary="Lembretes" icon={<SendOutlined />} />
+      <ListItemLink
+        to="/quickAnswers"
+        primary={i18n.t("mainDrawer.listItems.quickAnswers")}
+        icon={<QuestionAnswerOutlinedIcon />}
+      />
+      <Can
+        role={user.profile}
+        perform="drawer-admin-items:view"
+        yes={() => (
+          <>
+            <Divider />
+            <ListSubheader inset>{i18n.t("mainDrawer.listItems.administration")}</ListSubheader>
+            <ListItemLink
+              to="/users"
+              primary={i18n.t("mainDrawer.listItems.users")}
+              icon={<PeopleAltOutlinedIcon />}
+            />
+            <ListItemLink
+              to="/queues"
+              primary={i18n.t("mainDrawer.listItems.queues")}
+              icon={<AccountTreeOutlinedIcon />}
+            />
+
+            <ListItemLink
+              to="/connections"
+              primary={i18n.t("mainDrawer.listItems.connections")}
+              icon={
+                <Badge badgeContent={connectionWarning ? "!" : 0} color="error">
+                  <SyncAltIcon />
+                </Badge>
+              }
+            />
+
+            <ListItemLink to="/" primary="Dashboard" icon={<DashboardOutlinedIcon />} />
+
+            <ListItemLink to="/report" primary="Relatório" icon={<ReportOutlinedIcon />} />
+
+            <Can
+              role={user.profile}
+              perform="settings-view:show"
+              yes={() => (
+                <ListItemLink
+                  to="/settings"
+                  primary={i18n.t("mainDrawer.listItems.settings")}
+                  icon={<SettingsOutlinedIcon />}
+                />
+              )}
+            />
+          </>
+        )}
+      />
+    </div>
+  );
+};
+
+export default MainListItems;

frontend/src/layout/MainListItems.js

@@ -1,28 +1,6 @@
 import React, { useContext, useEffect, useState } from "react";
 import { Link as RouterLink } from "react-router-dom";
 
-import ListItem from "@material-ui/core/ListItem";
-import ListItemIcon from "@material-ui/core/ListItemIcon";
-import ListItemText from "@material-ui/core/ListItemText";
-import ListSubheader from "@material-ui/core/ListSubheader";
-import Divider from "@material-ui/core/Divider";
-import { Badge } from "@material-ui/core";
-import DashboardOutlinedIcon from "@material-ui/icons/DashboardOutlined";
-
-import ReportOutlinedIcon from       "@material-ui/icons/ReportOutlined";
-import SendOutlined from '@material-ui/icons/SendOutlined';
-
-//import ReportOutlined from "@bit/mui-org.material-ui-icons.report-outlined";
-
-
-import WhatsAppIcon from "@material-ui/icons/WhatsApp";
-import SyncAltIcon from "@material-ui/icons/SyncAlt";
-import SettingsOutlinedIcon from "@material-ui/icons/SettingsOutlined";
-import PeopleAltOutlinedIcon from "@material-ui/icons/PeopleAltOutlined";
-import ContactPhoneOutlinedIcon from "@material-ui/icons/ContactPhoneOutlined";
-import AccountTreeOutlinedIcon from "@material-ui/icons/AccountTreeOutlined";
-import QuestionAnswerOutlinedIcon from "@material-ui/icons/QuestionAnswerOutlined";
-
 import { i18n } from "../translate/i18n";
 import { WhatsAppsContext } from "../context/WhatsApp/WhatsAppsContext";
 import { AuthContext } from "../context/Auth/AuthContext";
@@ -32,25 +10,14 @@ function ListItemLink(props) {
   const { icon, primary, to, className } = props;
 
   const renderLink = React.useMemo(
-    () =>
+    () => React.forwardRef((itemProps, ref) => <RouterLink to={to} ref={ref} {...itemProps} />),
-      React.forwardRef((itemProps, ref) => (
-        <RouterLink to={to} ref={ref} {...itemProps} />
-      )),
     [to]
   );
 
-  return (
+ 
-    <li>
-      <ListItem button component={renderLink} className={className}>
-        {icon ? <ListItemIcon>{icon}</ListItemIcon> : null}
-        <ListItemText primary={primary} />
-      </ListItem>
-    </li>
-  );
 }
 
 const MainListItems = (props) => {
-  const { drawerClose } = props;
   const { whatsApps } = useContext(WhatsAppsContext);
   const { user } = useContext(AuthContext);
   const [connectionWarning, setConnectionWarning] = useState(false);
@@ -78,90 +45,9 @@ const MainListItems = (props) => {
   }, [whatsApps]);
 
   return (
-    <div onClick={drawerClose}>
+    <ul>
-     
+     <li></li>
-      
+    </ul>
-      <ListItemLink
-        to="/tickets"
-        primary={i18n.t("mainDrawer.listItems.tickets")}
-        icon={<WhatsAppIcon />}
-      />
-
-      <ListItemLink
-        to="/contacts"
-        primary={i18n.t("mainDrawer.listItems.contacts")}
-        icon={<ContactPhoneOutlinedIcon />}
-      />
-       <ListItemLink
-        to="/schedulesReminder"
-        primary="Lembretes"
-        icon={<SendOutlined />}
-      />
-      <ListItemLink
-        to="/quickAnswers"
-        primary={i18n.t("mainDrawer.listItems.quickAnswers")}
-        icon={<QuestionAnswerOutlinedIcon />}
-      />
-      <Can
-        role={user.profile}
-        perform="drawer-admin-items:view"
-        yes={() => (
-          <>
-            <Divider />
-            <ListSubheader inset>
-              {i18n.t("mainDrawer.listItems.administration")}
-            </ListSubheader>
-            <ListItemLink
-              to="/users"
-              primary={i18n.t("mainDrawer.listItems.users")}
-              icon={<PeopleAltOutlinedIcon />}
-            />
-            <ListItemLink
-              to="/queues"
-              primary={i18n.t("mainDrawer.listItems.queues")}
-              icon={<AccountTreeOutlinedIcon />}
-            />
-
-            <ListItemLink
-              to="/connections"
-              primary={i18n.t("mainDrawer.listItems.connections")}
-              icon={
-                <Badge badgeContent={connectionWarning ? "!" : 0} color="error">
-                  <SyncAltIcon />
-                </Badge>
-              }
-            />
-
-            <ListItemLink
-                    to="/"
-                    primary="Dashboard"
-                    icon={<DashboardOutlinedIcon />}
-            />
-
-            <ListItemLink
-                    to="/report"
-                    primary="Relatório"
-                    icon={<ReportOutlinedIcon />}
-            />
-
-
-            <Can
-                    role={user.profile}
-                    perform="settings-view:show"
-                    yes={() => (
-                      <ListItemLink
-                        to="/settings"
-                        primary={i18n.t("mainDrawer.listItems.settings")}
-                        icon={<SettingsOutlinedIcon />}
-                      />
-                    )}
-            />
-
-            
-          </>
-        )}
-      />
-    </div>
   );
 };
 

frontend/src/layout/index copy.js

@@ -0,0 +1,271 @@
+import React, { useState, useContext, useEffect } from "react";
+import clsx from "clsx";
+
+import {
+  makeStyles,
+  Drawer,
+  AppBar,
+  Toolbar,
+  List,
+  Typography,
+  Divider,
+  MenuItem,
+  IconButton,
+  Menu,
+} from "@material-ui/core";
+
+import MenuIcon from "@material-ui/icons/Menu";
+import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
+import AccountCircle from "@material-ui/icons/AccountCircle";
+
+import MainListItems from "./MainListItems";
+import NotificationsPopOver from "../components/NotificationsPopOver";
+import UserModal from "../components/UserModal";
+import { AuthContext } from "../context/Auth/AuthContext";
+import BackdropLoading from "../components/BackdropLoading";
+import { i18n } from "../translate/i18n";
+
+
+const drawerWidth = 240;
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    display: "flex",
+    height: "100vh",
+    [theme.breakpoints.down("sm")]: {
+      height: "calc(100vh - 56px)",
+    },
+  },
+
+  toolbar: {
+    paddingRight: 24, // keep right padding when drawer closed
+  },
+  toolbarIcon: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "flex-end",
+    padding: "0 8px",
+    minHeight: "48px",
+  },
+  appBar: {
+    zIndex: theme.zIndex.drawer + 1,
+    transition: theme.transitions.create(["width", "margin"], {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.leavingScreen,
+    }),
+  },
+  appBarShift: {
+    marginLeft: drawerWidth,
+    width: `calc(100% - ${drawerWidth}px)`,
+    transition: theme.transitions.create(["width", "margin"], {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.enteringScreen,
+    }),
+  },
+  menuButton: {
+    marginRight: 36,
+  },
+  menuButtonHidden: {
+    display: "none",
+  },
+  title: {
+    flexGrow: 1,
+  },
+  drawerPaper: {
+    position: "relative",
+    whiteSpace: "nowrap",
+    width: drawerWidth,
+    transition: theme.transitions.create("width", {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.enteringScreen,
+    }),
+  },
+  drawerPaperClose: {
+    overflowX: "hidden",
+    transition: theme.transitions.create("width", {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.leavingScreen,
+    }),
+    width: theme.spacing(7),
+    [theme.breakpoints.up("sm")]: {
+      width: theme.spacing(9),
+    },
+  },
+  appBarSpacer: {
+    minHeight: "48px",
+  },
+  content: {
+    flex: 1,
+    overflow: "auto",
+  },
+  container: {
+    paddingTop: theme.spacing(4),
+    paddingBottom: theme.spacing(4),
+  },
+  paper: {
+    padding: theme.spacing(2),
+    display: "flex",
+    overflow: "auto",
+    flexDirection: "column",
+  },
+}));
+
+const LoggedInLayout = ({ children }) => {
+  const classes = useStyles();
+  const [userModalOpen, setUserModalOpen] = useState(false);
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [menuOpen, setMenuOpen] = useState(false);
+  const { handleLogout, loading } = useContext(AuthContext);
+  const [drawerOpen, setDrawerOpen] = useState(true);
+  const [drawerVariant, setDrawerVariant] = useState("permanent");
+  const { user } = useContext(AuthContext);
+
+  useEffect(() => {
+    if (document.body.offsetWidth > 600) {
+      setDrawerOpen(true);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (document.body.offsetWidth < 600) {
+      setDrawerVariant("temporary");
+    } else {
+      setDrawerVariant("permanent");
+    }
+  }, [drawerOpen]);
+
+  const handleMenu = (event) => {
+    setAnchorEl(event.currentTarget);
+    setMenuOpen(true);
+  };
+
+  const handleCloseMenu = () => {
+    setAnchorEl(null);
+    setMenuOpen(false);
+  };
+
+  const handleOpenUserModal = () => {
+    setUserModalOpen(true);
+    handleCloseMenu();
+  };
+
+  const handleClickLogout = () => {
+    handleCloseMenu();
+    handleLogout();
+  };
+
+  const drawerClose = () => {
+    if (document.body.offsetWidth < 600) {
+      setDrawerOpen(false);
+    }
+  };
+
+  if (loading) {
+    return <BackdropLoading />;
+  }
+
+  return (
+    <div className={classes.root}>
+      <Drawer
+        variant={drawerVariant}
+        className={drawerOpen ? classes.drawerPaper : classes.drawerPaperClose}
+        classes={{
+          paper: clsx(
+            classes.drawerPaper,
+            !drawerOpen && classes.drawerPaperClose
+          ),
+        }}
+        open={drawerOpen}
+      >
+        <div className={classes.toolbarIcon}>
+          <IconButton onClick={() => setDrawerOpen(!drawerOpen)}>
+            <ChevronLeftIcon />
+          </IconButton>
+        </div>
+        <Divider />
+        <List>
+          <MainListItems drawerClose={drawerClose} />
+        </List>
+        <Divider />
+      </Drawer>
+      <UserModal
+        open={userModalOpen}
+        onClose={() => setUserModalOpen(false)}
+        userId={user?.id}
+      />
+      <AppBar
+        position="absolute"
+        className={clsx(classes.appBar, drawerOpen && classes.appBarShift)}
+        color={process.env.NODE_ENV === "development" ? "inherit" : "primary"}
+      >
+        <Toolbar variant="dense" className={classes.toolbar}>
+          <IconButton
+            edge="start"
+            color="inherit"
+            aria-label="open drawer"
+            onClick={() => setDrawerOpen(!drawerOpen)}
+            className={clsx(
+              classes.menuButton,
+              drawerOpen && classes.menuButtonHidden
+            )}
+          >
+            <MenuIcon />
+          </IconButton>
+          <Typography
+            component="h1"
+            variant="h6"
+            color="inherit"
+            noWrap
+            className={classes.title}
+          > 
+              
+            OMNIHIT 
+             
+          </Typography>
+          {user.id && <NotificationsPopOver />}
+
+          <div>
+            <IconButton
+              aria-label="account of current user"
+              aria-controls="menu-appbar"
+              aria-haspopup="true"
+              onClick={handleMenu}
+              color="inherit"
+            >
+              <AccountCircle />
+            </IconButton>
+            <Menu
+              id="menu-appbar"
+              anchorEl={anchorEl}
+              getContentAnchorEl={null}
+              anchorOrigin={{
+                vertical: "bottom",
+                horizontal: "right",
+              }}
+              transformOrigin={{
+                vertical: "top",
+                horizontal: "right",
+              }}
+              open={menuOpen}
+              onClose={handleCloseMenu}
+            >
+              <MenuItem onClick={handleOpenUserModal}>
+                {i18n.t("mainDrawer.appBar.user.profile")}
+              </MenuItem>
+              <MenuItem onClick={handleClickLogout}>
+                {i18n.t("mainDrawer.appBar.user.logout")}
+              </MenuItem>
+            </Menu>
+          </div>
+        </Toolbar>
+      </AppBar>
+      <main className={classes.content}>
+        <div className={classes.appBarSpacer} />
+
+        {children ? children : null}
+      </main>
+    </div>
+  );
+};
+
+export default LoggedInLayout;

frontend/src/layout/index.js

@@ -1,271 +1,32 @@
-import React, { useState, useContext, useEffect } from "react";
+import React from "react";
-import clsx from "clsx";
 
-import {
+import Loading from "../components/LoadingScreen/Loading";
-  makeStyles,
+import MainContainer from "../components/Base/MainContainer";
-  Drawer,
-  AppBar,
-  Toolbar,
-  List,
-  Typography,
-  Divider,
-  MenuItem,
-  IconButton,
-  Menu,
-} from "@material-ui/core";
-
-import MenuIcon from "@material-ui/icons/Menu";
-import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
-import AccountCircle from "@material-ui/icons/AccountCircle";
-
-import MainListItems from "./MainListItems";
-import NotificationsPopOver from "../components/NotificationsPopOver";
-import UserModal from "../components/UserModal";
 import { AuthContext } from "../context/Auth/AuthContext";
-import BackdropLoading from "../components/BackdropLoading";
 import { i18n } from "../translate/i18n";
-
+import MenuComponent from "../components/Menu/MenuComponent";
-//import MailLogo from '../assets/logo.jpg';
-
-const drawerWidth = 240;
-
-const useStyles = makeStyles((theme) => ({
-  root: {
-    display: "flex",
-    height: "100vh",
-    [theme.breakpoints.down("sm")]: {
-      height: "calc(100vh - 56px)",
-    },
-  },
-
-  toolbar: {
-    paddingRight: 24, // keep right padding when drawer closed
-  },
-  toolbarIcon: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "flex-end",
-    padding: "0 8px",
-    minHeight: "48px",
-  },
-  appBar: {
-    zIndex: theme.zIndex.drawer + 1,
-    transition: theme.transitions.create(["width", "margin"], {
-      easing: theme.transitions.easing.sharp,
-      duration: theme.transitions.duration.leavingScreen,
-    }),
-  },
-  appBarShift: {
-    marginLeft: drawerWidth,
-    width: `calc(100% - ${drawerWidth}px)`,
-    transition: theme.transitions.create(["width", "margin"], {
-      easing: theme.transitions.easing.sharp,
-      duration: theme.transitions.duration.enteringScreen,
-    }),
-  },
-  menuButton: {
-    marginRight: 36,
-  },
-  menuButtonHidden: {
-    display: "none",
-  },
-  title: {
-    flexGrow: 1,
-  },
-  drawerPaper: {
-    position: "relative",
-    whiteSpace: "nowrap",
-    width: drawerWidth,
-    transition: theme.transitions.create("width", {
-      easing: theme.transitions.easing.sharp,
-      duration: theme.transitions.duration.enteringScreen,
-    }),
-  },
-  drawerPaperClose: {
-    overflowX: "hidden",
-    transition: theme.transitions.create("width", {
-      easing: theme.transitions.easing.sharp,
-      duration: theme.transitions.duration.leavingScreen,
-    }),
-    width: theme.spacing(7),
-    [theme.breakpoints.up("sm")]: {
-      width: theme.spacing(9),
-    },
-  },
-  appBarSpacer: {
-    minHeight: "48px",
-  },
-  content: {
-    flex: 1,
-    overflow: "auto",
-  },
-  container: {
-    paddingTop: theme.spacing(4),
-    paddingBottom: theme.spacing(4),
-  },
-  paper: {
-    padding: theme.spacing(2),
-    display: "flex",
-    overflow: "auto",
-    flexDirection: "column",
-  },
-}));
 
 const LoggedInLayout = ({ children }) => {
-  const classes = useStyles();
+  const { handleLogout, loading, isAuth } = React.useContext(AuthContext);
-  const [userModalOpen, setUserModalOpen] = useState(false);
+  const { user } = React.useContext(AuthContext);
-  const [anchorEl, setAnchorEl] = useState(null);
-  const [menuOpen, setMenuOpen] = useState(false);
-  const { handleLogout, loading } = useContext(AuthContext);
-  const [drawerOpen, setDrawerOpen] = useState(false);
-  const [drawerVariant, setDrawerVariant] = useState("permanent");
-  const { user } = useContext(AuthContext);
 
-  useEffect(() => {
+  const logout = (e) => {
-    if (document.body.offsetWidth > 600) {
-      setDrawerOpen(true);
-    }
-  }, []);
-
-  useEffect(() => {
-    if (document.body.offsetWidth < 600) {
-      setDrawerVariant("temporary");
-    } else {
-      setDrawerVariant("permanent");
-    }
-  }, [drawerOpen]);
-
-  const handleMenu = (event) => {
-    setAnchorEl(event.currentTarget);
-    setMenuOpen(true);
-  };
-
-  const handleCloseMenu = () => {
-    setAnchorEl(null);
-    setMenuOpen(false);
-  };
-
-  const handleOpenUserModal = () => {
-    setUserModalOpen(true);
-    handleCloseMenu();
-  };
-
-  const handleClickLogout = () => {
-    handleCloseMenu();
     handleLogout();
   };
 
-  const drawerClose = () => {
-    if (document.body.offsetWidth < 600) {
-      setDrawerOpen(false);
-    }
-  };
-
   if (loading) {
-    return <BackdropLoading />;
+    return <Loading />;
   }
 
   return (
-    <div className={classes.root}>
+    <>
-      <Drawer
+      <MenuComponent/>
-        variant={drawerVariant}
+      <MainContainer>
-        className={drawerOpen ? classes.drawerPaper : classes.drawerPaperClose}
+        <main style={{ padding: "16px", marginLeft: "90px",marginBottom: "16px", width: "100%", height:"100vh", justifyItem: "right" }}>
-        classes={{
-          paper: clsx(
-            classes.drawerPaper,
-            !drawerOpen && classes.drawerPaperClose
-          ),
-        }}
-        open={drawerOpen}
-      >
-        <div className={classes.toolbarIcon}>
-          <IconButton onClick={() => setDrawerOpen(!drawerOpen)}>
-            <ChevronLeftIcon />
-          </IconButton>
-        </div>
-        <Divider />
-        <List>
-          <MainListItems drawerClose={drawerClose} />
-        </List>
-        <Divider />
-      </Drawer>
-      <UserModal
-        open={userModalOpen}
-        onClose={() => setUserModalOpen(false)}
-        userId={user?.id}
-      />
-      <AppBar
-        position="absolute"
-        className={clsx(classes.appBar, drawerOpen && classes.appBarShift)}
-        color={process.env.NODE_ENV === "development" ? "inherit" : "primary"}
-      >
-        <Toolbar variant="dense" className={classes.toolbar}>
-          <IconButton
-            edge="start"
-            color="inherit"
-            aria-label="open drawer"
-            onClick={() => setDrawerOpen(!drawerOpen)}
-            className={clsx(
-              classes.menuButton,
-              drawerOpen && classes.menuButtonHidden
-            )}
-          >
-            <MenuIcon />
-          </IconButton>
-          <Typography
-            component="h1"
-            variant="h6"
-            color="inherit"
-            noWrap
-            className={classes.title}
-          > 
-              
-            OMNIHIT 
-             
-          </Typography>
-          {user.id && <NotificationsPopOver />}
-
-          <div>
-            <IconButton
-              aria-label="account of current user"
-              aria-controls="menu-appbar"
-              aria-haspopup="true"
-              onClick={handleMenu}
-              color="inherit"
-            >
-              <AccountCircle />
-            </IconButton>
-            <Menu
-              id="menu-appbar"
-              anchorEl={anchorEl}
-              getContentAnchorEl={null}
-              anchorOrigin={{
-                vertical: "bottom",
-                horizontal: "right",
-              }}
-              transformOrigin={{
-                vertical: "top",
-                horizontal: "right",
-              }}
-              open={menuOpen}
-              onClose={handleCloseMenu}
-            >
-              <MenuItem onClick={handleOpenUserModal}>
-                {i18n.t("mainDrawer.appBar.user.profile")}
-              </MenuItem>
-              <MenuItem onClick={handleClickLogout}>
-                {i18n.t("mainDrawer.appBar.user.logout")}
-              </MenuItem>
-            </Menu>
-          </div>
-        </Toolbar>
-      </AppBar>
-      <main className={classes.content}>
-        <div className={classes.appBarSpacer} />
-
           {children ? children : null}
         </main>
-    </div>
+      </MainContainer>
+    </>
   );
 };
 

frontend/src/pages/Login/index.js

@@ -3,10 +3,9 @@ import { AuthContext } from "../../context/Auth/AuthContext";
 import { i18n } from "../../translate/i18n";
 
 import ContainerLogin from "../../components/Base/ContainerLogin";
-import VideoLogin from "../../components/LoginComponents/VideoTag/VideoLogin";
+import VideoComponent from "../../components/VideoTag/VideoComponent";
-import { Input } from "@mui/material";
-import AvatarLogin from "../../components/LoginComponents/AvatarCompany/AvatarLogin";
 import LoginForm from "../../components/LoginComponents/LoginForm/LoginForm";
+import Company from "../../components/LoginComponents/CompanyLogo/Company";
 
 //! Can i Delete this comment above?
 // const Copyright = () => {
@@ -44,7 +43,6 @@ import LoginForm from "../../components/LoginComponents/LoginForm/LoginForm";
 
 const Login = () => {
   const [user, setUser] = React.useState({ email: "", password: "" });
-  const [showPassword, setShowPassword] = React.useState(false);
 
   const { handleLogin } = React.useContext(AuthContext);
 
@@ -59,8 +57,14 @@ const Login = () => {
 
   return (
     <ContainerLogin>
-      <VideoLogin />
+      <VideoComponent width={"350px"} autoPlay muted loop position={"relative"} />
-      <LoginForm handleChangeInput={handleChangeInput} handlSubmit={handlSubmit} user={user.email} password={user.password} />
+      <LoginForm
+        handleChangeInput={handleChangeInput}
+        handlSubmit={handlSubmit}
+        user={user.email}
+        password={user.password}
+      />
+      <Company />
     </ContainerLogin>
   );
 };

frontend/src/routes/index.js

@@ -8,9 +8,9 @@ import Dashboard from "../pages/Dashboard/";
 import Report from "../pages/Report/";
 import SchedulesReminder from "../pages/SchedulesReminder/";
 
-import Tickets from "../pages/Tickets/";
-import Signup from "../pages/Signup/";
 import Login from "../pages/Login/";
+import Signup from "../pages/Signup/";
+import Tickets from "../pages/Tickets/";
 import Connections from "../pages/Connections/";
 import Settings from "../pages/Settings/";
 import Users from "../pages/Users";