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

Start Progress. 

Removing MUI Components, and starting a new layout
creation varibles and patterns
pull/1/head
RenatoDiGiacomo 2022-07-07 16:15:14 -03:00
parent bb04db9708
commit c1c5ede9f0
21 changed files with 270 additions and 179 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/.env.example
View File

@ -1 +0,0 @@
REACT_APP_BACKEND_URL = http://localhost:8080/

1
frontend/package.json
View File

@ -35,6 +35,7 @@
"react-toastify": "^6.0.9", "react-toastify": "^6.0.9",
"recharts": "^2.0.2", "recharts": "^2.0.2",
"socket.io-client": "^3.0.5", "socket.io-client": "^3.0.5",
"styled-components": "^5.3.5",
"use-sound": "^2.0.1", "use-sound": "^2.0.1",
"yup": "^0.32.8" "yup": "^0.32.8"
}, },

4
frontend/public/index.html
View File

@ -2,10 +2,6 @@
<html lang="en"> <html lang="en">
<head> <head>
<title>OmniHit</title> <title>OmniHit</title>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/apple-touch-icon.png" /> <link rel="apple-touch-icon" href="%PUBLIC_URL%/apple-touch-icon.png" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />

45
frontend/src/App.js
View File

@ -1,49 +1,16 @@
import React, { useState, useEffect } from "react"; import React from "react";
import Routes from "./routes"; import Routes from "./routes";
import "react-toastify/dist/ReactToastify.css"; import "react-toastify/dist/ReactToastify.css";
import GlobalStyled from "./style/GlobalStyle";
import { createTheme, ThemeProvider } from "@material-ui/core/styles";
import { ptBR } from "@material-ui/core/locale";
const App = () => { const App = () => {
const [locale, setLocale] = useState();
const theme = createTheme(
{
scrollbarStyles: {
"&::-webkit-scrollbar": {
width: "8px",
height: "8px",
},
"&::-webkit-scrollbar-thumb": {
boxShadow: "inset 0 0 6px rgba(0, 0, 0, 0.3)",
backgroundColor: "#e8e8e8",
},
},
palette: {
//primary: { main: "#2576d2" },
primary: { main: "#ec5114" },
},
},
locale
);
useEffect(() => {
const i18nlocale = localStorage.getItem("i18nextLng");
const browserLocale =
i18nlocale.substring(0, 2) + i18nlocale.substring(3, 5);
if (browserLocale === "ptBR") {
setLocale(ptBR);
}
}, []);
return ( return (
<ThemeProvider theme={theme}> <>
<GlobalStyled />
<Routes /> <Routes />
</ThemeProvider> </>
); );
}; };
export default App; export default App;

BIN
frontend/src/assets/fonts/Bashira Free.ttf 100644
View File

Binary file not shown.

BIN
frontend/src/assets/fonts/DMSerifDisplay-Italic.ttf 100644
View File

Binary file not shown.

BIN
frontend/src/assets/fonts/DMSerifDisplay-Regular.ttf 100644
View File

Binary file not shown.

BIN
frontend/src/assets/fonts/Helvetica_Neue_LT_Pro-Black.otf 100644
View File

Binary file not shown.

BIN
frontend/src/assets/fonts/Helvetica_Neue_LT_Pro-Heavy.otf 100644
View File

Binary file not shown.

BIN
frontend/src/assets/fonts/Helvetica_Neue_LT_Pro-Italic.otf 100644
View File

Binary file not shown.

BIN
frontend/src/assets/fonts/Helvetica_Neue_LT_Pro-Light.otf 100644
View File

Binary file not shown.

BIN
frontend/src/assets/fonts/Helvetica_Neue_LT_Pro-Roman.otf 100644
View File

Binary file not shown.

BIN
frontend/src/assets/fonts/Helvetica_Neue_LT_Pro-UltraLight.otf 100644
View File

Binary file not shown.

BIN
frontend/src/assets/fonts/galascript.ttf 100644
View File

Binary file not shown.

20
frontend/src/components/Base/ContainerLogin.jsx 100644
View File

@ -0,0 +1,20 @@
import React from "react";
import styled from "styled-components";
const ContainerLoginStyled = styled.div`
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
`;
const ContainerLogin = ({ children }) => {
return (
<>
<ContainerLoginStyled>{children}</ContainerLoginStyled>
</>
);
};
export default ContainerLogin;

4
frontend/src/components/NotificationsPopOver/index.js
View File

@ -63,7 +63,7 @@ const NotificationsPopOver = () => {
const [lastRef] = useState(+history.location.pathname.split("/")[2]) const [lastRef] = useState(+history.location.pathname.split("/")[2])
console.log('ticketIdRef: ',ticketIdRef, ' | lastRef: ',lastRef) // console.log('ticketIdRef: ',ticketIdRef, ' | lastRef: ',lastRef)
useEffect(() => { useEffect(() => {
@ -82,7 +82,7 @@ const NotificationsPopOver = () => {
useEffect(() => { useEffect(() => {
console.log('888888888888888888888888888888888888888888888888888888888888888888') // console.log('888888888888888888888888888888888888888888888888888888888888888888')
ticketIdRef.current = ticketIdUrl; ticketIdRef.current = ticketIdUrl;
}, [ticketIdUrl]); }, [ticketIdUrl]);

2
frontend/src/hooks/useWhatsApps/index.js
View File

@ -115,7 +115,7 @@ const useWhatsApps = () => {
socket.on("whatsappSessionMonit", data => { socket.on("whatsappSessionMonit", data => {
if (data.action === "update") { if (data.action === "update") {
console.log('data.whatsappSessionSize: ', data.whatsappSessionSize) // console.log('data.whatsappSessionSize: ', data.whatsappSessionSize)
dispatch({ type: "UPDATE_WHATSAPPS_SESSION_MONIT", payload: data.whatsappSessionSize }); dispatch({ type: "UPDATE_WHATSAPPS_SESSION_MONIT", payload: data.whatsappSessionSize });
} }

9
frontend/src/index.js
View File

@ -5,10 +5,10 @@ import CssBaseline from "@material-ui/core/CssBaseline";
import App from "./App"; import App from "./App";
ReactDOM.render( ReactDOM.render(
<CssBaseline> <CssBaseline>
<App /> <App />
</CssBaseline>, </CssBaseline>,
document.getElementById("root") document.getElementById("root")
); );
// ReactDOM.render( // ReactDOM.render(
@ -20,3 +20,4 @@ ReactDOM.render(
// document.getElementById("root") // document.getElementById("root")
// ); // );

236
frontend/src/pages/Login/index.js
View File

@ -1,28 +1,10 @@
import React, { useState, useContext } from "react"; import React from "react";
import { Link as RouterLink } from "react-router-dom";
import {
Avatar,
Button,
CssBaseline,
TextField,
Grid,
Box,
Typography,
Container,
InputAdornment,
IconButton,
Link
} from '@material-ui/core';
import { /*LockOutlined,*/ PersonOutlineOutlined, Visibility, VisibilityOff } from '@material-ui/icons';
import { makeStyles } from "@material-ui/core/styles";
import { i18n } from "../../translate/i18n"; import { i18n } from "../../translate/i18n";
import { AuthContext } from "../../context/Auth/AuthContext"; import ContainerLogin from "../../components/Base/ContainerLogin";
//! Can i Delete this comment above?
// const Copyright = () => { // const Copyright = () => {
// return ( // return (
// <Typography variant="body2" color="textSecondary" align="center"> // <Typography variant="body2" color="textSecondary" align="center">
@ -36,122 +18,126 @@ import { AuthContext } from "../../context/Auth/AuthContext";
// ); // );
// }; // };
const useStyles = makeStyles((theme) => ({ // const useStyles = makeStyles((theme) => ({
paper: { // paper: {
marginTop: theme.spacing(8), // marginTop: theme.spacing(8),
display: "flex", // display: "flex",
flexDirection: "column", // flexDirection: "column",
alignItems: "center", // alignItems: "center",
}, // },
avatar: { // avatar: {
margin: theme.spacing(1), // margin: theme.spacing(1),
backgroundColor: theme.palette.secondary.main, // backgroundColor: theme.palette.secondary.main,
}, // },
form: { // form: {
width: "100%", // Fix IE 11 issue. // width: "100%", // Fix IE 11 issue.
marginTop: theme.spacing(1), // marginTop: theme.spacing(1),
}, // },
submit: { // submit: {
margin: theme.spacing(3, 0, 2), // margin: theme.spacing(3, 0, 2),
}, // },
})); // }));
const Login = () => { const Login = () => {
const classes = useStyles(); // const classes = useStyles();
const [user, setUser] = useState({ email: "", password: "" }); // const [user, setUser] = useState({ email: "", password: "" });
const [showPassword, setShowPassword] = useState(false); // const [showPassword, setShowPassword] = useState(false);
const { handleLogin } = useContext(AuthContext); // const { handleLogin } = useContext(AuthContext);
const handleChangeInput = (e) => { // const handleChangeInput = (e) => {
setUser({ ...user, [e.target.name]: e.target.value }); // setUser({ ...user, [e.target.name]: e.target.value });
}; // };
const handlSubmit = (e) => { // const handlSubmit = (e) => {
e.preventDefault(); // e.preventDefault();
handleLogin(user); // handleLogin(user);
}; // };
return ( return (
<Container component="main" maxWidth="xs"> // <Container component="main" maxWidth="xs">
<CssBaseline /> // <CssBaseline />
<div className={classes.paper}> // <div className={classes.paper}>
<Avatar className={classes.avatar} style={{ backgroundColor: "#ec5114" }}> // <Avatar className={classes.avatar} style={{ backgroundColor: "#ec5114" }}>
<PersonOutlineOutlined/> // <PersonOutlineOutlined/>
</Avatar> // </Avatar>
// <Typography component="h1" variant="h5">
// {i18n.t("login.title")}
// </Typography>
// <form className={classes.form} noValidate onSubmit={handlSubmit}>
// <TextField
// variant="outlined"
// margin="normal"
// required
// fullWidth
// id="email"
// label={i18n.t("login.form.email")}
// name="email"
// value={user.email}
// onChange={handleChangeInput}
// autoComplete="email"
// autoFocus
// />
// <TextField
// variant="outlined"
// margin="normal"
// required
// fullWidth
// name="password"
// label={i18n.t("login.form.password")}
// id="password"
// value={user.password}
// onChange={handleChangeInput}
// autoComplete="current-password"
// type={showPassword ? 'text' : 'password'}
// InputProps={{
// endAdornment: (
// <InputAdornment position="end">
// <IconButton
// aria-label="toggle password visibility"
// onClick={() => setShowPassword((e) => !e)}
// >
// {showPassword ? <VisibilityOff /> : <Visibility />}
// </IconButton>
// </InputAdornment>
// )
// }}
// />
// <Button
// type="submit"
// fullWidth
// variant="contained"
// color="primary"
// className={classes.submit}
// >
// {i18n.t("login.buttons.submit")}
// </Button>
// <Grid container>
// <Grid item>
<Typography component="h1" variant="h5"> // <Link
{i18n.t("login.title")} // href="#"
</Typography> // variant="body2"
<form className={classes.form} noValidate onSubmit={handlSubmit}> // component={RouterLink}
<TextField // to="/signup"
variant="outlined" // >
margin="normal" // {/* {i18n.t("login.buttons.register")} */}
required // </Link>
fullWidth
id="email"
label={i18n.t("login.form.email")}
name="email"
value={user.email}
onChange={handleChangeInput}
autoComplete="email"
autoFocus
/>
<TextField
variant="outlined"
margin="normal"
required
fullWidth
name="password"
label={i18n.t("login.form.password")}
id="password"
value={user.password}
onChange={handleChangeInput}
autoComplete="current-password"
type={showPassword ? 'text' : 'password'}
InputProps={{
endAdornment: (
<InputAdornment position="end">
<IconButton
aria-label="toggle password visibility"
onClick={() => setShowPassword((e) => !e)}
>
{showPassword ? <VisibilityOff /> : <Visibility />}
</IconButton>
</InputAdornment>
)
}}
/>
<Button
type="submit"
fullWidth
variant="contained"
color="primary"
className={classes.submit}
>
{i18n.t("login.buttons.submit")}
</Button>
<Grid container>
<Grid item>
<Link // </Grid>
href="#" // </Grid>
variant="body2" // </form>
component={RouterLink} // </div>
to="/signup" // <Box mt={8}>{/* <Copyright /> */}</Box>
> // </Container>
{/* {i18n.t("login.buttons.register")} */} <ContainerLogin>
</Link> <h1>teste</h1>
<h2>teste</h2>
</Grid> <p>Teste paragraph</p>
</Grid> </ContainerLogin>
</form>
</div>
<Box mt={8}>{/* <Copyright /> */}</Box>
</Container>
); );
}; };

65
frontend/src/style/GlobalStyle.jsx 100644
View File

@ -0,0 +1,65 @@
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";
const GlobalStyled = createGlobalStyle`
//FONTS
@font-face {
font-family: "HelveticaRoman";
font-style: normal;
font-size: 12px;
src: url(${HelveticaRoman}) format('truetype');
}
@font-face {
font-family: "HelveticaUl";
font-style: normal;
src: url(${HelveticaUl}) format('truetype');
}
@font-face {
font-family: "HelveticaLt";
font-style: normal;
src: url(${HelveticaLt}) format('truetype');
}
@font-face {
font-family: "HelveticaItalic";
font-style: normal;
src: url(${HelveticaItalic}) format('truetype');
}
@font-face {
font-family: "HelveticaHeavy";
font-style: normal;
src: url(${HelveticaHeavy}) format('truetype');
}
@font-face {
font-family: "HelveticaBlack";
font-style: normal;
src: url(${HelveticaBlack}) format('truetype');
}
//Patterns
h1{
${texts.h1}
color: ${color.pricinpal.blanco}
};
h2{
${texts.h2}
color: ${color.pricinpal.blanco}
}
p{
${texts.p14}
color: ${color.pricinpal.blanco}
}
body{
background: linear-gradient(to bottom, ${color.gradient.bgOpacity} 40% , ${color.complement.azulOscuro} 100%, ${color.complement.azulOscuro} 100%);
}
`;
export default GlobalStyled;

56
frontend/src/style/varibles.jsx 100644
View File

@ -0,0 +1,56 @@
export const texts = {
h1: {
fontSize: "28px",
paddingTop: "6px",
fontFamily: "HelveticaRoman",
},
h1Login: {
fontSize: "32px",
paddingTop: "6px",
fontFamily: "HelveticaHeavy",
},
h2: {
fontSize: "21px",
paddingTop: "6px",
fontFamily: "HelveticaRoman",
},
p18: {
fontSize: "18px",
fontFamily: "HelveticaRoman",
},
p16: {
fontSize: "16px",
fontFamily: "HelveticaRoman",
},
p14: {
fontSize: "14px",
fontFamily: "HelveticaRoman",
},
p14UnderLine: {
fontSize: "14px",
textDecoretion: "underline",
fontFamily: "HelveticaRoman",
},
};
export const color = {
pricinpal: {
naranja: "#FF7A00",
grisOscuro: "#3C3C3B",
blanco: "#FFFFFF",
},
complement:{
azulCielo: "#55A5DC",
azulOscuro: "#212F3C",
crisClaro: "#F6F6F6",
},
status:{
no: "#FF0000",
yes: "#00BE1E",
warning: "#FFC700"
},
gradient:{
bgOpacity:"#212F3CD8"
}
};