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",
"recharts": "^2.0.2",
"socket.io-client": "^3.0.5",
"styled-components": "^5.3.5",
"use-sound": "^2.0.1",
"yup": "^0.32.8"
},

4
frontend/public/index.html
View File

@ -2,10 +2,6 @@
<html lang="en">
<head>
<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="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 "react-toastify/dist/ReactToastify.css";
import { createTheme, ThemeProvider } from "@material-ui/core/styles";
import { ptBR } from "@material-ui/core/locale";
import GlobalStyled from "./style/GlobalStyle";
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 (
<ThemeProvider theme={theme}>
<>
<GlobalStyled />
<Routes />
</ThemeProvider>
</>
);
};
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])
console.log('ticketIdRef: ',ticketIdRef, ' | lastRef: ',lastRef)
// console.log('ticketIdRef: ',ticketIdRef, ' | lastRef: ',lastRef)
useEffect(() => {
@ -82,7 +82,7 @@ const NotificationsPopOver = () => {
useEffect(() => {
console.log('888888888888888888888888888888888888888888888888888888888888888888')
// console.log('888888888888888888888888888888888888888888888888888888888888888888')
ticketIdRef.current = ticketIdUrl;
}, [ticketIdUrl]);

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

@ -115,7 +115,7 @@ const useWhatsApps = () => {
socket.on("whatsappSessionMonit", data => {
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 });
}

1
frontend/src/index.js
View File

@ -20,3 +20,4 @@ ReactDOM.render(
// document.getElementById("root")
// );

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

@ -1,28 +1,10 @@
import React, { useState, useContext } 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 React from "react";
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 = () => {
// return (
// <Typography variant="body2" color="textSecondary" align="center">
@ -36,122 +18,126 @@ import { AuthContext } from "../../context/Auth/AuthContext";
// );
// };
const useStyles = makeStyles((theme) => ({
paper: {
marginTop: theme.spacing(8),
display: "flex",
flexDirection: "column",
alignItems: "center",
},
avatar: {
margin: theme.spacing(1),
backgroundColor: theme.palette.secondary.main,
},
form: {
width: "100%", // Fix IE 11 issue.
marginTop: theme.spacing(1),
},
submit: {
margin: theme.spacing(3, 0, 2),
},
}));
// const useStyles = makeStyles((theme) => ({
// paper: {
// marginTop: theme.spacing(8),
// display: "flex",
// flexDirection: "column",
// alignItems: "center",
// },
// avatar: {
// margin: theme.spacing(1),
// backgroundColor: theme.palette.secondary.main,
// },
// form: {
// width: "100%", // Fix IE 11 issue.
// marginTop: theme.spacing(1),
// },
// submit: {
// margin: theme.spacing(3, 0, 2),
// },
// }));
const Login = () => {
const classes = useStyles();
// const classes = useStyles();
const [user, setUser] = useState({ email: "", password: "" });
const [showPassword, setShowPassword] = useState(false);
// const [user, setUser] = useState({ email: "", password: "" });
// const [showPassword, setShowPassword] = useState(false);
const { handleLogin } = useContext(AuthContext);
// const { handleLogin } = useContext(AuthContext);
const handleChangeInput = (e) => {
setUser({ ...user, [e.target.name]: e.target.value });
};
// const handleChangeInput = (e) => {
// setUser({ ...user, [e.target.name]: e.target.value });
// };
const handlSubmit = (e) => {
e.preventDefault();
handleLogin(user);
};
// const handlSubmit = (e) => {
// e.preventDefault();
// handleLogin(user);
// };
return (
<Container component="main" maxWidth="xs">
<CssBaseline />
<div className={classes.paper}>
// <Container component="main" maxWidth="xs">
// <CssBaseline />
// <div className={classes.paper}>
<Avatar className={classes.avatar} style={{ backgroundColor: "#ec5114" }}>
<PersonOutlineOutlined/>
</Avatar>
// <Avatar className={classes.avatar} style={{ backgroundColor: "#ec5114" }}>
// <PersonOutlineOutlined/>
// </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">
{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>
// <Link
// href="#"
// variant="body2"
// component={RouterLink}
// to="/signup"
// >
// {/* {i18n.t("login.buttons.register")} */}
// </Link>
<Link
href="#"
variant="body2"
component={RouterLink}
to="/signup"
>
{/* {i18n.t("login.buttons.register")} */}
</Link>
</Grid>
</Grid>
</form>
</div>
<Box mt={8}>{/* <Copyright /> */}</Box>
</Container>
// </Grid>
// </Grid>
// </form>
// </div>
// <Box mt={8}>{/* <Copyright /> */}</Box>
// </Container>
<ContainerLogin>
<h1>teste</h1>
<h2>teste</h2>
<p>Teste paragraph</p>
</ContainerLogin>
);
};

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