diff --git a/frontend/.env.example b/frontend/.env.example
deleted file mode 100644
index f890a22..0000000
--- a/frontend/.env.example
+++ /dev/null
@@ -1 +0,0 @@
-REACT_APP_BACKEND_URL = http://localhost:8080/
\ No newline at end of file
diff --git a/frontend/package.json b/frontend/package.json
index 80e12d7..3cf060b 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -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"
},
diff --git a/frontend/public/index.html b/frontend/public/index.html
index 3089fed..d3f8a8e 100644
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -2,10 +2,6 @@
OmniHit
-
diff --git a/frontend/src/App.js b/frontend/src/App.js
index e37774e..daa7878 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -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 (
-
+ <>
+
-
+
);
};
export default App;
+
diff --git a/frontend/src/assets/fonts/Bashira Free.ttf b/frontend/src/assets/fonts/Bashira Free.ttf
new file mode 100644
index 0000000..0174693
Binary files /dev/null and b/frontend/src/assets/fonts/Bashira Free.ttf differ
diff --git a/frontend/src/assets/fonts/DMSerifDisplay-Italic.ttf b/frontend/src/assets/fonts/DMSerifDisplay-Italic.ttf
new file mode 100644
index 0000000..fe3b132
Binary files /dev/null and b/frontend/src/assets/fonts/DMSerifDisplay-Italic.ttf differ
diff --git a/frontend/src/assets/fonts/DMSerifDisplay-Regular.ttf b/frontend/src/assets/fonts/DMSerifDisplay-Regular.ttf
new file mode 100644
index 0000000..3e298c5
Binary files /dev/null and b/frontend/src/assets/fonts/DMSerifDisplay-Regular.ttf differ
diff --git a/frontend/src/assets/fonts/Helvetica_Neue_LT_Pro-Black.otf b/frontend/src/assets/fonts/Helvetica_Neue_LT_Pro-Black.otf
new file mode 100644
index 0000000..a58c62b
Binary files /dev/null and b/frontend/src/assets/fonts/Helvetica_Neue_LT_Pro-Black.otf differ
diff --git a/frontend/src/assets/fonts/Helvetica_Neue_LT_Pro-Heavy.otf b/frontend/src/assets/fonts/Helvetica_Neue_LT_Pro-Heavy.otf
new file mode 100644
index 0000000..a094af1
Binary files /dev/null and b/frontend/src/assets/fonts/Helvetica_Neue_LT_Pro-Heavy.otf differ
diff --git a/frontend/src/assets/fonts/Helvetica_Neue_LT_Pro-Italic.otf b/frontend/src/assets/fonts/Helvetica_Neue_LT_Pro-Italic.otf
new file mode 100644
index 0000000..a523145
Binary files /dev/null and b/frontend/src/assets/fonts/Helvetica_Neue_LT_Pro-Italic.otf differ
diff --git a/frontend/src/assets/fonts/Helvetica_Neue_LT_Pro-Light.otf b/frontend/src/assets/fonts/Helvetica_Neue_LT_Pro-Light.otf
new file mode 100644
index 0000000..59e4660
Binary files /dev/null and b/frontend/src/assets/fonts/Helvetica_Neue_LT_Pro-Light.otf differ
diff --git a/frontend/src/assets/fonts/Helvetica_Neue_LT_Pro-Roman.otf b/frontend/src/assets/fonts/Helvetica_Neue_LT_Pro-Roman.otf
new file mode 100644
index 0000000..3aaee11
Binary files /dev/null and b/frontend/src/assets/fonts/Helvetica_Neue_LT_Pro-Roman.otf differ
diff --git a/frontend/src/assets/fonts/Helvetica_Neue_LT_Pro-UltraLight.otf b/frontend/src/assets/fonts/Helvetica_Neue_LT_Pro-UltraLight.otf
new file mode 100644
index 0000000..e695a10
Binary files /dev/null and b/frontend/src/assets/fonts/Helvetica_Neue_LT_Pro-UltraLight.otf differ
diff --git a/frontend/src/assets/fonts/galascript.ttf b/frontend/src/assets/fonts/galascript.ttf
new file mode 100644
index 0000000..c86353d
Binary files /dev/null and b/frontend/src/assets/fonts/galascript.ttf differ
diff --git a/frontend/src/components/Base/ContainerLogin.jsx b/frontend/src/components/Base/ContainerLogin.jsx
new file mode 100644
index 0000000..5129a2f
--- /dev/null
+++ b/frontend/src/components/Base/ContainerLogin.jsx
@@ -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 (
+ <>
+ {children}
+
+ );
+};
+
+export default ContainerLogin;
+
diff --git a/frontend/src/components/NotificationsPopOver/index.js b/frontend/src/components/NotificationsPopOver/index.js
index 411b4d2..e3e6326 100644
--- a/frontend/src/components/NotificationsPopOver/index.js
+++ b/frontend/src/components/NotificationsPopOver/index.js
@@ -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]);
diff --git a/frontend/src/hooks/useWhatsApps/index.js b/frontend/src/hooks/useWhatsApps/index.js
index 30a6aa9..19e8717 100644
--- a/frontend/src/hooks/useWhatsApps/index.js
+++ b/frontend/src/hooks/useWhatsApps/index.js
@@ -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 });
}
diff --git a/frontend/src/index.js b/frontend/src/index.js
index 8b5f35d..b77db2b 100644
--- a/frontend/src/index.js
+++ b/frontend/src/index.js
@@ -5,10 +5,10 @@ import CssBaseline from "@material-ui/core/CssBaseline";
import App from "./App";
ReactDOM.render(
-
-
- ,
- document.getElementById("root")
+
+
+ ,
+ document.getElementById("root")
);
// ReactDOM.render(
@@ -20,3 +20,4 @@ ReactDOM.render(
// document.getElementById("root")
// );
+
diff --git a/frontend/src/pages/Login/index.js b/frontend/src/pages/Login/index.js
index dd372f6..55aca92 100644
--- a/frontend/src/pages/Login/index.js
+++ b/frontend/src/pages/Login/index.js
@@ -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 (
//
@@ -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 (
-
-
-
-
-
-
-
-
+ //
+ //
+ //
-
- {i18n.t("login.title")}
-
-
-
+ //
+ // {i18n.t("login.title")}
+ //
+ //
+ //
teste
+ teste
+ Teste paragraph
+
);
};
diff --git a/frontend/src/style/GlobalStyle.jsx b/frontend/src/style/GlobalStyle.jsx
new file mode 100644
index 0000000..cb268e9
--- /dev/null
+++ b/frontend/src/style/GlobalStyle.jsx
@@ -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;
+
diff --git a/frontend/src/style/varibles.jsx b/frontend/src/style/varibles.jsx
new file mode 100644
index 0000000..26eaad2
--- /dev/null
+++ b/frontend/src/style/varibles.jsx
@@ -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"
+ }
+};
+