adriano.andrade
/
projeto-hit
mirror of https://github.com/AdrianoRobson/projeto-hit.git
1
1
Fork 0
Code Issues Packages Projects Releases Wiki Activity

this commit is above login page 

Menu done, top title page in progress
pull/2/head
RenatoDiGiacomo 2022-07-18 13:30:48 -03:00
parent dbe526cce7
commit f842ef6e78
17 changed files with 142 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
frontend/src/components/Base/MainContainer.jsx
View File

@ -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

21
frontend/src/components/Base/MainContainer.style.jsx
View File

@ -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 };

2
frontend/src/components/LoginComponents/AvatarCompany/H1Title.style.jsx
View File

@ -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

2
frontend/src/components/LoginComponents/CompanyLogo/Company.style.jsx
View File

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

2
frontend/src/components/LoginComponents/LoginForm/Btn/BtnSubmit.style.jsx
View File

@ -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);
`;

3
frontend/src/components/Menu/MenuBottom.style.jsx
View File

@ -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")};

6
frontend/src/components/Menu/MenuComponent.jsx
View File

@ -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 (
<MenuStyled hover={hover}>
<MenuStyled onMouseEnter={HoverMenu} onMouseLeave={HoverMenu} hover={hover}>
<VideoComponent width={"100%"} zIndex={"-1"} position={"absolute"} />
<MenuTop hover={hover} />
<MenuTop hover={hover}/>
<MenuListStyled>
<MenuItem icon={<Tickets />} text="Tickets" to="/tickets" hover={hover} />
<MenuItem icon={<Contact />} text="Contatos" to="contacts" hover={hover} />

4
frontend/src/components/Menu/MenuComponent.style.jsx
View File

@ -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")};

2
frontend/src/components/Menu/MenuTop.style.jsx
View File

@ -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;

20
frontend/src/components/PageTitle/PageTitle.jsx 100644
View File

@ -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;

34
frontend/src/components/PageTitle/PageTitle.style.jsx 100644
View File

@ -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 };

14
frontend/src/components/PageTitle/UserBtn/UserBtn.jsx 100644
View File

@ -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;

8
frontend/src/layout/index.js
View File

@ -20,12 +20,8 @@ const LoggedInLayout = ({ children }) => {
return (
<>
<MenuComponent/>
<MainContainer>
<main>
{children ? children : null}
</main>
</MainContainer>
<MenuComponent />
<MainContainer>{children ? children : null}</MainContainer>
</>
);
};

7
frontend/src/pages/Tickets/index.js
View File

@ -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}
>
<TicketsManager />
</Grid>

1
frontend/src/routes/Route.js
View File

@ -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 }) => {

37
frontend/src/style/GlobalStyle.jsx
View File

@ -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}

14
frontend/src/style/varibles.jsx
View File

@ -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",
},
};