From f842ef6e7801657e7ad67023fef1a43f854caa27 Mon Sep 17 00:00:00 2001 From: RenatoDiGiacomo Date: Mon, 18 Jul 2022 13:30:48 -0300 Subject: [PATCH] this commit is above login page Menu done, top title page in progress --- .../src/components/Base/MainContainer.jsx | 21 +++++++---- .../components/Base/MainContainer.style.jsx | 21 +++++++++-- .../AvatarCompany/H1Title.style.jsx | 2 +- .../CompanyLogo/Company.style.jsx | 2 +- .../LoginForm/Btn/BtnSubmit.style.jsx | 2 +- .../src/components/Menu/MenuBottom.style.jsx | 3 +- .../src/components/Menu/MenuComponent.jsx | 6 +-- .../components/Menu/MenuComponent.style.jsx | 4 +- .../src/components/Menu/MenuTop.style.jsx | 2 +- .../src/components/PageTitle/PageTitle.jsx | 20 ++++++++++ .../components/PageTitle/PageTitle.style.jsx | 34 +++++++++++++++++ .../components/PageTitle/UserBtn/UserBtn.jsx | 14 +++++++ frontend/src/layout/index.js | 8 +--- frontend/src/pages/Tickets/index.js | 7 ++-- frontend/src/routes/Route.js | 1 - frontend/src/style/GlobalStyle.jsx | 37 ++++++++++--------- frontend/src/style/varibles.jsx | 14 +++---- 17 files changed, 142 insertions(+), 56 deletions(-) create mode 100644 frontend/src/components/PageTitle/PageTitle.jsx create mode 100644 frontend/src/components/PageTitle/PageTitle.style.jsx create mode 100644 frontend/src/components/PageTitle/UserBtn/UserBtn.jsx diff --git a/frontend/src/components/Base/MainContainer.jsx b/frontend/src/components/Base/MainContainer.jsx index ac166d0..a9c9dbf 100644 --- a/frontend/src/components/Base/MainContainer.jsx +++ b/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 ( - {children} - ) -} + + + + + {children} + + ); +}; + +export default MainContainer; -export default Container \ No newline at end of file diff --git a/frontend/src/components/Base/MainContainer.style.jsx b/frontend/src/components/Base/MainContainer.style.jsx index 03fafad..0ca3664 100644 --- a/frontend/src/components/Base/MainContainer.style.jsx +++ b/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; - justify-content: right; + flex-direction: column; + 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 }; + diff --git a/frontend/src/components/LoginComponents/AvatarCompany/H1Title.style.jsx b/frontend/src/components/LoginComponents/AvatarCompany/H1Title.style.jsx index a3410d7..a846670 100644 --- a/frontend/src/components/LoginComponents/AvatarCompany/H1Title.style.jsx +++ b/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 \ No newline at end of file diff --git a/frontend/src/components/LoginComponents/CompanyLogo/Company.style.jsx b/frontend/src/components/LoginComponents/CompanyLogo/Company.style.jsx index ebd3bee..19381cc 100644 --- a/frontend/src/components/LoginComponents/CompanyLogo/Company.style.jsx +++ b/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"; } `; diff --git a/frontend/src/components/LoginComponents/LoginForm/Btn/BtnSubmit.style.jsx b/frontend/src/components/LoginComponents/LoginForm/Btn/BtnSubmit.style.jsx index 1ba7fb4..4c22e11 100644 --- a/frontend/src/components/LoginComponents/LoginForm/Btn/BtnSubmit.style.jsx +++ b/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); `; diff --git a/frontend/src/components/Menu/MenuBottom.style.jsx b/frontend/src/components/Menu/MenuBottom.style.jsx index 3e1b98c..3bd6f34 100644 --- a/frontend/src/components/Menu/MenuBottom.style.jsx +++ b/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")}; diff --git a/frontend/src/components/Menu/MenuComponent.jsx b/frontend/src/components/Menu/MenuComponent.jsx index 608315c..c4cb2fb 100644 --- a/frontend/src/components/Menu/MenuComponent.jsx +++ b/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,9 +56,9 @@ const MenuComponent = () => { }, [whatsApps]); return ( - + - + } text="Tickets" to="/tickets" hover={hover} /> } text="Contatos" to="contacts" hover={hover} /> diff --git a/frontend/src/components/Menu/MenuComponent.style.jsx b/frontend/src/components/Menu/MenuComponent.style.jsx index 18e701c..3a5b236 100644 --- a/frontend/src/components/Menu/MenuComponent.style.jsx +++ b/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")}; diff --git a/frontend/src/components/Menu/MenuTop.style.jsx b/frontend/src/components/Menu/MenuTop.style.jsx index 513a436..d84a42d 100644 --- a/frontend/src/components/Menu/MenuTop.style.jsx +++ b/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; diff --git a/frontend/src/components/PageTitle/PageTitle.jsx b/frontend/src/components/PageTitle/PageTitle.jsx new file mode 100644 index 0000000..2e355be --- /dev/null +++ b/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 ( + +

PageTitle

+ + + ); +}; + +export default PageTitle; + diff --git a/frontend/src/components/PageTitle/PageTitle.style.jsx b/frontend/src/components/PageTitle/PageTitle.style.jsx new file mode 100644 index 0000000..ee7511d --- /dev/null +++ b/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 }; diff --git a/frontend/src/components/PageTitle/UserBtn/UserBtn.jsx b/frontend/src/components/PageTitle/UserBtn/UserBtn.jsx new file mode 100644 index 0000000..301241e --- /dev/null +++ b/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 ( + + {user + Bem Vindo, {user ? user.name : null} + + ); +}; + +export default UserBtn; + diff --git a/frontend/src/layout/index.js b/frontend/src/layout/index.js index c53b3a7..b52d238 100644 --- a/frontend/src/layout/index.js +++ b/frontend/src/layout/index.js @@ -20,12 +20,8 @@ const LoggedInLayout = ({ children }) => { return ( <> - - -
- {children ? children : null} -
- + + {children ? children : null} ); }; diff --git a/frontend/src/pages/Tickets/index.js b/frontend/src/pages/Tickets/index.js index 80eb909..461145a 100644 --- a/frontend/src/pages/Tickets/index.js +++ b/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={ - ticketId ? classes.contactsWrapperSmall : classes.contactsWrapper - } + className={ticketId ? classes.contactsWrapperSmall : classes.contactsWrapper} > diff --git a/frontend/src/routes/Route.js b/frontend/src/routes/Route.js index c929f4e..788501e 100644 --- a/frontend/src/routes/Route.js +++ b/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 }) => { diff --git a/frontend/src/style/GlobalStyle.jsx b/frontend/src/style/GlobalStyle.jsx index 8e26379..42c8aea 100644 --- a/frontend/src/style/GlobalStyle.jsx +++ b/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 HelveticaUl from "../assets/fonts/Helvetica_Neue_LT_Pro-UltraLight.otf"; -import HelveticaLt from "../assets/fonts/Helvetica_Neue_LT_Pro-Light.otf"; -import HelveticaItalic from "../assets/fonts/Helvetica_Neue_LT_Pro-Italic.otf"; -import HelveticaHeavy from "../assets/fonts/Helvetica_Neue_LT_Pro-Heavy.otf"; -import HelveticaBlack from "../assets/fonts/Helvetica_Neue_LT_Pro-Black.otf"; +import Helvetica55 from "../assets/fonts/Helvetica_Neue_LT_Pro-Roman.otf"; +import Helvetica25 from "../assets/fonts/Helvetica_Neue_LT_Pro-UltraLight.otf"; +import Helvetica45 from "../assets/fonts/Helvetica_Neue_LT_Pro-Light.otf"; +import Helvetica56 from "../assets/fonts/Helvetica_Neue_LT_Pro-Italic.otf"; +import Helvetica85 from "../assets/fonts/Helvetica_Neue_LT_Pro-Heavy.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} diff --git a/frontend/src/style/varibles.jsx b/frontend/src/style/varibles.jsx index 26eaad2..cf09298 100644 --- a/frontend/src/style/varibles.jsx +++ b/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", }, };