Start Progress.
Removing MUI Components, and starting a new layout creation varibles and patternspull/1/head
RenatoDiGiacomo
parent
bb04db9708
commit
c1c5ede9f0
|
|
@ -1 +0,0 @@
|
|||
REACT_APP_BACKEND_URL = http://localhost:8080/
|
||||
|
|
@ -5,7 +5,7 @@
|
|||
"dependencies": {
|
||||
"@date-io/date-fns": "^1.3.13",
|
||||
"@emotion/react": "^11.7.1",
|
||||
"@emotion/styled": "^11.6.0",
|
||||
"@emotion/styled": "^11.6.0",
|
||||
"@material-ui/core": "^4.12.1",
|
||||
"@material-ui/icons": "^4.9.1",
|
||||
"@material-ui/lab": "^4.0.0-alpha.56",
|
||||
|
|
@ -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"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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" />
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -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;
|
||||
|
||||
|
|
@ -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]);
|
||||
|
|
|
|||
|
|
@ -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 });
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,10 +5,10 @@ import CssBaseline from "@material-ui/core/CssBaseline";
|
|||
import App from "./App";
|
||||
|
||||
ReactDOM.render(
|
||||
<CssBaseline>
|
||||
<App />
|
||||
</CssBaseline>,
|
||||
document.getElementById("root")
|
||||
<CssBaseline>
|
||||
<App />
|
||||
</CssBaseline>,
|
||||
document.getElementById("root")
|
||||
);
|
||||
|
||||
// ReactDOM.render(
|
||||
|
|
@ -20,3 +20,4 @@ ReactDOM.render(
|
|||
|
||||
// document.getElementById("root")
|
||||
// );
|
||||
|
||||
|
|
|
|||
|
|
@ -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}>
|
||||
|
||||
<Avatar className={classes.avatar} style={{ backgroundColor: "#ec5114" }}>
|
||||
<PersonOutlineOutlined/>
|
||||
</Avatar>
|
||||
|
||||
// <Container component="main" maxWidth="xs">
|
||||
// <CssBaseline />
|
||||
// <div className={classes.paper}>
|
||||
|
||||
<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>
|
||||
// <Avatar className={classes.avatar} style={{ backgroundColor: "#ec5114" }}>
|
||||
// <PersonOutlineOutlined/>
|
||||
// </Avatar>
|
||||
|
||||
</Grid>
|
||||
</Grid>
|
||||
</form>
|
||||
</div>
|
||||
<Box mt={8}>{/* <Copyright /> */}</Box>
|
||||
</Container>
|
||||
// <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>
|
||||
|
||||
// </Grid>
|
||||
// </Grid>
|
||||
// </form>
|
||||
// </div>
|
||||
// <Box mt={8}>{/* <Copyright /> */}</Box>
|
||||
// </Container>
|
||||
<ContainerLogin>
|
||||
<h1>teste</h1>
|
||||
<h2>teste</h2>
|
||||
<p>Teste paragraph</p>
|
||||
</ContainerLogin>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
@ -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"
|
||||
}
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue