this commit is above login page

Menu done, top title page in progress

frontend/src/components/Base/MainContainer.jsx

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

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

@@ -1,11 +1,26 @@
 import styled from "styled-components";
 
-const MainContainer = styled.div`
+const MainContainer = styled.main`
+  padding-left: 97px;
+  padding-top: 26px;
+  margin-right: 16px;
+  position: relative;
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
-  justify-content: right;
+  align-items: flex-end;
+  height: 96vh;
+`;
+const TitleContainer = styled.div`
+  width: 100%;
+`;
+const ContentContainer = styled.div`
   width: 100%;
   height: 100vh;
+  overflow: hidden;
+  margin-top: 16px;
 `;
 
 export default MainContainer;
+
+export { TitleContainer, ContentContainer };
+

frontend/src/components/LoginComponents/AvatarCompany/H1Title.style.jsx

@@ -2,7 +2,7 @@ import styled from "styled-components";
 
 const H1Title = styled.h1`
   font-size: 32px;
-  font-family: "HelveticaHeavy";
+  font-family: "Helvetica85";
   text-transform: uppercase;
 `;
 export default H1Title

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

@@ -11,7 +11,7 @@ const CompanyStyled = styled.div`
   bottom: 16px;
   font-size: 10px;
   p{
-    font-family: "HelveticaHeavy";
+    font-family: "Helvetica85";
   }
 `;
 

frontend/src/components/LoginComponents/LoginForm/Btn/BtnSubmit.style.jsx

@@ -12,7 +12,7 @@ const BtnSubmitStyled = styled.button`
   border: none;
   border-radius: 6px;
   font-size: 14px;
-  font-family: "HelveticaRoman";
+  font-family: "Helvetica55";
   box-shadow: -1px 0px 8px 0px rgba(255,255,255,.25);
 `;
 

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

@@ -7,6 +7,7 @@ const MenuBottomStyled = styled.div`
   position: absolute;
   left: 12px;
   bottom: 16px;
+  z-index: 100;
   svg {
     max-width: 51px;
     max-height: 51px;
@@ -18,7 +19,7 @@ const MenuBottomStyled = styled.div`
     width: 129px;
     align-items: center;
     margin-left: 12px;
-    font-family: "HelveticaRoman";
+    font-family: "Helvetica55";
     font-size: 10px;
     color: ${color.pricinpal.blanco};
     display: ${({ hover }) => (hover ? "flex" : "none")};

frontend/src/components/Menu/MenuComponent.jsx

@@ -24,7 +24,7 @@ import MenuBottom from "./MenuBottom";
 import MenuTop from "./MenuTop";
 
 const MenuComponent = () => {
-  const [hover, setHover] = React.useState(true);
+  const [hover, setHover] = React.useState(false);
   const { whatsApps } = React.useContext(WhatsAppsContext);
   const { user } = React.useContext(AuthContext);
   const [connectionWarning, setConnectionWarning] = React.useState(false);
@@ -56,7 +56,7 @@ const MenuComponent = () => {
   }, [whatsApps]);
 
   return (
-    <MenuStyled hover={hover}>
+    <MenuStyled onMouseEnter={HoverMenu} onMouseLeave={HoverMenu} hover={hover}>
       <VideoComponent width={"100%"} zIndex={"-1"} position={"absolute"} />
       <MenuTop hover={hover}/>
       <MenuListStyled>

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

@@ -7,7 +7,7 @@ const MenuStyled = styled.nav`
   width: 76px;
   height: 100vh;
   background: ${color.pricinpal.grisOscuro}; //Same background login
-  z-index: 10;
+  z-index: 100;
   animation: ${(props) => (props.hover ? "hover" : "hoveroff")} 0.5s forwards;
   @keyframes hover {
     from {
@@ -55,7 +55,7 @@ const MenuListItemStyled = styled.li`
 
     p {
       text-transform: capitalize;
-      font-family: "HelveticaRoman";
+      font-family: "Helvetica55";
       font-size: 14px;
       opacity: ${(props) => (props.hover ? "1" : "0")};
       display: ${(props) => (props.hover ? "block" : "none")};

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

@@ -17,7 +17,7 @@ const MenuTitle = styled.p`
   display: ${({ hover }) => (hover ? "flex" : "none")};
   margin-left: 12px;
   align-items: center;
-  font-family: "HelveticaRoman";
+  font-family: "Helvetica55";
   color: ${color.pricinpal.naranja};
   font-size: 28px;
   text-transform: capitalize;

frontend/src/components/PageTitle/PageTitle.jsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { PageTitleStyled } from "./PageTitle.style";
+import UserBtn from "./UserBtn/UserBtn";
+
+import { AuthContext } from "../../context/Auth/AuthContext";
+
+import logo from "../../assets/images/Logo.png"
+
+const PageTitle = () => {
+  const { user } = React.useContext(AuthContext);
+  return (
+    <PageTitleStyled>
+      <h1>PageTitle</h1>
+      <UserBtn user={user} img={logo}/>
+    </PageTitleStyled>
+  );
+};
+
+export default PageTitle;
+

frontend/src/components/PageTitle/PageTitle.style.jsx

@@ -0,0 +1,34 @@
+import styled from "styled-components";
+import { color } from "../../style/varibles";
+
+const PageTitleStyled = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: nowrap;
+`;
+const UserBtnStyled = styled.button`
+  display: flex;
+  width: 218px;
+  padding: 16px;
+  text-align: left;
+  background-color: ${color.pricinpal.grisOscuro};
+  color: ${color.pricinpal.blanco};
+  border: none;
+  border-radius: 5px;
+  font-family: "Helvetica55";
+  letter-spacing: .5px;
+  font-size: 14px;
+  text-transform: capitalize;
+  align-items: center;
+  img{
+    background-color: white;
+    width: 24px;
+    height: 24px;
+    object-fit: contain;
+    border-radius: 50%;
+    margin-right: 12px;
+  }
+  `;
+
+export { PageTitleStyled, UserBtnStyled };

frontend/src/components/PageTitle/UserBtn/UserBtn.jsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { UserBtnStyled } from "../PageTitle.style";
+
+const UserBtn = ({ user, img }) => {
+  return (
+    <UserBtnStyled>
+      <img src={img} alt={user ? user.name : null} width="24px" />
+      Bem Vindo, {user ? user.name : null}
+    </UserBtnStyled>
+  );
+};
+
+export default UserBtn;
+

frontend/src/layout/index.js

@@ -21,11 +21,7 @@ const LoggedInLayout = ({ children }) => {
   return (
     <>
       <MenuComponent />
-      <MainContainer>
+      <MainContainer>{children ? children : null}</MainContainer>
-        <main>
-          {children ? children : null}
-        </main>
-      </MainContainer>
     </>
   );
 };

frontend/src/pages/Tickets/index.js

@@ -15,8 +15,9 @@ const useStyles = makeStyles((theme) => ({
     flex: 1,
     // // backgroundColor: "#eee",
     // padding: theme.spacing(4),
-    height: `calc(100% - 48px)`,
+    height: `100%`,
     overflowY: "hidden",
+    borderRadius: "5px",
   },
 
   chatPapper: {
@@ -75,9 +76,7 @@ const Chat = () => {
             item
             xs={12}
             md={4}
-            className={
+            className={ticketId ? classes.contactsWrapperSmall : classes.contactsWrapper}
-              ticketId ? classes.contactsWrapperSmall : classes.contactsWrapper
-            }
           >
             <TicketsManager />
           </Grid>

frontend/src/routes/Route.js

@@ -2,7 +2,6 @@ import React, { useContext } from "react";
 import { Route as RouterRoute, Redirect } from "react-router-dom";
 
 import { AuthContext } from "../context/Auth/AuthContext";
-import BackdropLoading from "../components/BackdropLoading";
 import Loading from "../components/LoadingScreen/Loading"
 
 const Route = ({ component: Component, isPrivate = false, ...rest }) => {

frontend/src/style/GlobalStyle.jsx

@@ -1,12 +1,12 @@
 import { createGlobalStyle } from "styled-components";
 import { texts, color } from "./varibles";
 
-import HelveticaRoman from "../assets/fonts/Helvetica_Neue_LT_Pro-Roman.otf";
+import Helvetica55 from "../assets/fonts/Helvetica_Neue_LT_Pro-Roman.otf";
-import HelveticaUl from "../assets/fonts/Helvetica_Neue_LT_Pro-UltraLight.otf";
+import Helvetica25 from "../assets/fonts/Helvetica_Neue_LT_Pro-UltraLight.otf";
-import HelveticaLt from "../assets/fonts/Helvetica_Neue_LT_Pro-Light.otf";
+import Helvetica45 from "../assets/fonts/Helvetica_Neue_LT_Pro-Light.otf";
-import HelveticaItalic from "../assets/fonts/Helvetica_Neue_LT_Pro-Italic.otf";
+import Helvetica56 from "../assets/fonts/Helvetica_Neue_LT_Pro-Italic.otf";
-import HelveticaHeavy from "../assets/fonts/Helvetica_Neue_LT_Pro-Heavy.otf";
+import Helvetica85 from "../assets/fonts/Helvetica_Neue_LT_Pro-Heavy.otf";
-import HelveticaBlack from "../assets/fonts/Helvetica_Neue_LT_Pro-Black.otf";
+import Helvetica95 from "../assets/fonts/Helvetica_Neue_LT_Pro-Black.otf";
 
 const GlobalStyled = createGlobalStyle`
 //RESET
@@ -56,40 +56,41 @@ table {
 
 //FONTS
 @font-face {
-    font-family: "HelveticaRoman";
+    font-family: "Helvetica55";
     font-style: normal;
     font-size: 12px;
-    src: url(${HelveticaRoman}) format('truetype');
+    src: url(${Helvetica55}) format('truetype');
 }
 @font-face {
-    font-family: "HelveticaUl";
+    font-family: "Helvetica25";
     font-style: normal;
-    src: url(${HelveticaUl}) format('truetype');
+    src: url(${Helvetica25}) format('truetype');
 }
 @font-face {
-    font-family: "HelveticaLt";
+    font-family: "Helvetica45";
     font-style: normal;
-    src: url(${HelveticaLt}) format('truetype');
+    src: url(${Helvetica45}) format('truetype');
 }
 @font-face {
-    font-family: "HelveticaItalic";
+    font-family: "Helvetica56";
     font-style: normal;
-    src: url(${HelveticaItalic}) format('truetype');
+    src: url(${Helvetica56}) format('truetype');
 }
 @font-face {
-    font-family: "HelveticaHeavy";
+    font-family: "Helvetica85";
     font-style: normal;
-    src: url(${HelveticaHeavy}) format('truetype');
+    src: url(${Helvetica85}) format('truetype');
 }
 @font-face {
-    font-family: "HelveticaBlack";
+    font-family: "Helvetica95";
     font-style: normal;
-    src: url(${HelveticaBlack}) format('truetype');
+    src: url(${Helvetica95}) format('truetype');
 }
 
 //Patterns
 html{
     overflow: hidden;
+    height: 100vh;
 }
 h1{
     ${texts.h1}

frontend/src/style/varibles.jsx

@@ -2,34 +2,34 @@ export const texts = {
   h1: {
     fontSize: "28px",
     paddingTop: "6px",
-    fontFamily: "HelveticaRoman",
+    fontFamily: "Helvetica55",
   },
   h1Login: {
     fontSize: "32px",
     paddingTop: "6px",
-    fontFamily: "HelveticaHeavy",
+    fontFamily: "Helvetica85",
   },
   h2: {
     fontSize: "21px",
     paddingTop: "6px",
-    fontFamily: "HelveticaRoman",
+    fontFamily: "Helvetica55",
   },
   p18: {
     fontSize: "18px",
-    fontFamily: "HelveticaRoman",
+    fontFamily: "Helvetica55",
   },
   p16: {
     fontSize: "16px",
-    fontFamily: "HelveticaRoman",
+    fontFamily: "Helvetica55",
   },
   p14: {
     fontSize: "14px",
-    fontFamily: "HelveticaRoman",
+    fontFamily: "Helvetica55",
   },
   p14UnderLine: {
     fontSize: "14px",
     textDecoretion: "underline",
-    fontFamily: "HelveticaRoman",
+    fontFamily: "Helvetica55",
   },
 };