diff --git a/backend/src/controllers/WhatsAppSessionController.ts b/backend/src/controllers/WhatsAppSessionController.ts index 62c645f..83691b5 100644 --- a/backend/src/controllers/WhatsAppSessionController.ts +++ b/backend/src/controllers/WhatsAppSessionController.ts @@ -7,7 +7,7 @@ import UpdateWhatsAppService from "../services/WhatsappService/UpdateWhatsAppSer import { restartWhatsSession } from "../helpers/RestartWhatsSession"; -import path from 'path'; +import path from 'path'; // import { WWebJsw } from "../../WWebJS/session-bd_40" @@ -37,7 +37,7 @@ const update = async (req: Request, res: Response): Promise => { const restart = async (req: Request, res: Response): Promise => { - + const { whatsappId } = req.params; console.log('FROM REQUEST WHATSAPP ID: ', whatsappId) @@ -58,9 +58,9 @@ const remove = async (req: Request, res: Response): Promise => { const wbot = getWbot(whatsapp.id); console.log( - 'Desconectou s whatsapp.id: ', whatsapp.id, - ' | PATH TO DELETE',path.join(process.cwd(),'.wwebjs_auth', `session-bd_${whatsapp.id}`) - ) + 'Desconectou s whatsapp.id: ', whatsapp.id, + ' | PATH TO DELETE', path.join(process.cwd(), '.wwebjs_auth', `session-bd_${whatsapp.id}`) + ) //removeDir(path.join(process.cwd(),'.wwebjs_auth', `session-bd_${whatsapp.id}`)) diff --git a/backend/src/libs/wbot.ts b/backend/src/libs/wbot.ts index a3cdfdb..e692aec 100644 --- a/backend/src/libs/wbot.ts +++ b/backend/src/libs/wbot.ts @@ -47,8 +47,6 @@ const syncUnreadMessages = async (wbot: Session) => { export const initWbot = async (whatsapp: Whatsapp, backupSessionRestore: boolean = false): Promise => { return new Promise((resolve, reject) => { try { - - const io = getIO(); const sessionName = whatsapp.name; let sessionCfg; @@ -56,8 +54,6 @@ export const initWbot = async (whatsapp: Whatsapp, backupSessionRestore: boolean if (whatsapp && whatsapp.session) { sessionCfg = JSON.parse(whatsapp.session); } - - //NOVA OPÇÃO MD const wbot: Session = new Client({ session: sessionCfg, authStrategy: new LocalAuth({ clientId: 'bd_' + whatsapp.id }), @@ -155,7 +151,8 @@ export const initWbot = async (whatsapp: Whatsapp, backupSessionRestore: boolean const whatsIndex = backupSession.findIndex((id: number) => id === +whatsapp.id); - console.log(' whatsIndex: ', whatsIndex) + console.log(' whatsIndex: ', whatsIndex) + if (whatsIndex !== -1 || backupSessionRestore) { 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..bf2a45d 100644 --- a/frontend/src/App.js +++ b/frontend/src/App.js @@ -1,49 +1,15 @@ -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"; 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/assets/icons/Logohit.svg b/frontend/src/assets/icons/Logohit.svg new file mode 100644 index 0000000..c1d995d --- /dev/null +++ b/frontend/src/assets/icons/Logohit.svg @@ -0,0 +1,46 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/src/assets/icons/Menu/Accounttree.svg b/frontend/src/assets/icons/Menu/Accounttree.svg new file mode 100644 index 0000000..bf15f0e --- /dev/null +++ b/frontend/src/assets/icons/Menu/Accounttree.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/frontend/src/assets/icons/Menu/Configuration.svg b/frontend/src/assets/icons/Menu/Configuration.svg new file mode 100644 index 0000000..2d7ab1a --- /dev/null +++ b/frontend/src/assets/icons/Menu/Configuration.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/frontend/src/assets/icons/Menu/Contact.svg b/frontend/src/assets/icons/Menu/Contact.svg new file mode 100644 index 0000000..fab9da0 --- /dev/null +++ b/frontend/src/assets/icons/Menu/Contact.svg @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/frontend/src/assets/icons/Menu/Dashboard.svg b/frontend/src/assets/icons/Menu/Dashboard.svg new file mode 100644 index 0000000..fed1a02 --- /dev/null +++ b/frontend/src/assets/icons/Menu/Dashboard.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/assets/icons/Menu/Graph.svg b/frontend/src/assets/icons/Menu/Graph.svg new file mode 100644 index 0000000..5f6893f --- /dev/null +++ b/frontend/src/assets/icons/Menu/Graph.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/frontend/src/assets/icons/Menu/Mensage.svg b/frontend/src/assets/icons/Menu/Mensage.svg new file mode 100644 index 0000000..ca4ece1 --- /dev/null +++ b/frontend/src/assets/icons/Menu/Mensage.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/assets/icons/Menu/Notifications.svg b/frontend/src/assets/icons/Menu/Notifications.svg new file mode 100644 index 0000000..7153440 --- /dev/null +++ b/frontend/src/assets/icons/Menu/Notifications.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/assets/icons/Menu/Peoplealt.svg b/frontend/src/assets/icons/Menu/Peoplealt.svg new file mode 100644 index 0000000..b01baed --- /dev/null +++ b/frontend/src/assets/icons/Menu/Peoplealt.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/frontend/src/assets/icons/Menu/Send.svg b/frontend/src/assets/icons/Menu/Send.svg new file mode 100644 index 0000000..5215c0b --- /dev/null +++ b/frontend/src/assets/icons/Menu/Send.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/frontend/src/assets/icons/Menu/Signoff.svg b/frontend/src/assets/icons/Menu/Signoff.svg new file mode 100644 index 0000000..86dbd1a --- /dev/null +++ b/frontend/src/assets/icons/Menu/Signoff.svg @@ -0,0 +1,4 @@ + + + + diff --git a/frontend/src/assets/icons/Menu/Super.svg b/frontend/src/assets/icons/Menu/Super.svg new file mode 100644 index 0000000..9944ddd --- /dev/null +++ b/frontend/src/assets/icons/Menu/Super.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/assets/icons/Menu/Swap.svg b/frontend/src/assets/icons/Menu/Swap.svg new file mode 100644 index 0000000..66a538d --- /dev/null +++ b/frontend/src/assets/icons/Menu/Swap.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/assets/icons/Menu/Warning.svg b/frontend/src/assets/icons/Menu/Warning.svg new file mode 100644 index 0000000..e1e22ff --- /dev/null +++ b/frontend/src/assets/icons/Menu/Warning.svg @@ -0,0 +1,4 @@ + + + + diff --git a/frontend/src/assets/icons/Menu/Whatsapp.svg b/frontend/src/assets/icons/Menu/Whatsapp.svg new file mode 100644 index 0000000..7006dba --- /dev/null +++ b/frontend/src/assets/icons/Menu/Whatsapp.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/frontend/src/assets/icons/UserModal/perfil.svg b/frontend/src/assets/icons/UserModal/perfil.svg new file mode 100644 index 0000000..38d19d4 --- /dev/null +++ b/frontend/src/assets/icons/UserModal/perfil.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/frontend/src/assets/icons/UserModal/signoff.svg b/frontend/src/assets/icons/UserModal/signoff.svg new file mode 100644 index 0000000..ab8c0cd --- /dev/null +++ b/frontend/src/assets/icons/UserModal/signoff.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/frontend/src/assets/icons/email.svg b/frontend/src/assets/icons/email.svg new file mode 100644 index 0000000..fca904f --- /dev/null +++ b/frontend/src/assets/icons/email.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/assets/icons/key.svg b/frontend/src/assets/icons/key.svg new file mode 100644 index 0000000..326b03e --- /dev/null +++ b/frontend/src/assets/icons/key.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/assets/icons/visibility.svg b/frontend/src/assets/icons/visibility.svg new file mode 100644 index 0000000..004f0c5 --- /dev/null +++ b/frontend/src/assets/icons/visibility.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/assets/images/HitLogo/HIT-Logo_Blanco_48mm.svg b/frontend/src/assets/images/HitLogo/HIT-Logo_Blanco_48mm.svg new file mode 100644 index 0000000..aa7b667 --- /dev/null +++ b/frontend/src/assets/images/HitLogo/HIT-Logo_Blanco_48mm.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/frontend/src/assets/images/Logo.png b/frontend/src/assets/images/Logo.png new file mode 100644 index 0000000..16e0206 Binary files /dev/null and b/frontend/src/assets/images/Logo.png differ diff --git a/frontend/src/assets/videos/video.mp4 b/frontend/src/assets/videos/video.mp4 new file mode 100644 index 0000000..23baf11 Binary files /dev/null and b/frontend/src/assets/videos/video.mp4 differ diff --git a/frontend/src/components/Base/BTN/Btn.jsx b/frontend/src/components/Base/BTN/Btn.jsx new file mode 100644 index 0000000..9755fa4 --- /dev/null +++ b/frontend/src/components/Base/BTN/Btn.jsx @@ -0,0 +1,12 @@ +import React from "react"; +import BtnBaseStyled from "./Btn.styled"; + +const BtnComponent = ({ text, bgcolor, fontcolor,...props }) => { + return ( + + {text} + + ); +}; + +export default BtnComponent; diff --git a/frontend/src/components/Base/BTN/Btn.styled.jsx b/frontend/src/components/Base/BTN/Btn.styled.jsx new file mode 100644 index 0000000..9773520 --- /dev/null +++ b/frontend/src/components/Base/BTN/Btn.styled.jsx @@ -0,0 +1,24 @@ +import styled from "styled-components"; + +const BtnBaseStyled = styled.button` + cursor: pointer; + border: 1px solid ${({ bgcolor }) => bgcolor}; + background-color: ${({ bgcolor }) => bgcolor}; + color: ${({ fontcolor }) => fontcolor}; + padding: 6px 16px 3px; + border-radius: 5px; + margin: 12px 0; + font-size: 18px; + font-family: "Helvetica55"; + vertical-align: baseline; + transition: all 0.2s linear; + &:hover { + border: 1px solid ${({ bgcolor }) => bgcolor}; + color: ${({ bgcolor }) => bgcolor}; + background-color: ${({ fontcolor }) => fontcolor}; + transition: all 0.2s linear; + } +`; + +export default BtnBaseStyled; + diff --git a/frontend/src/components/Base/ContainerLogin/ContainerLogin.jsx b/frontend/src/components/Base/ContainerLogin/ContainerLogin.jsx new file mode 100644 index 0000000..38fb109 --- /dev/null +++ b/frontend/src/components/Base/ContainerLogin/ContainerLogin.jsx @@ -0,0 +1,9 @@ +import React from "react"; +import ContainerLoginStyled from "./ContainerLogin.style"; + +const ContainerLogin = ({ children }) => { + return {children}; +}; + +export default ContainerLogin; + diff --git a/frontend/src/components/Base/ContainerLogin/ContainerLogin.style.jsx b/frontend/src/components/Base/ContainerLogin/ContainerLogin.style.jsx new file mode 100644 index 0000000..63e2a06 --- /dev/null +++ b/frontend/src/components/Base/ContainerLogin/ContainerLogin.style.jsx @@ -0,0 +1,9 @@ +import styled from "styled-components"; +const ContainerLoginStyled = styled.div` + width: 100%; + height: 100vh; + display: flex; + flex-direction: row; + align-items: center; +`; +export default ContainerLoginStyled diff --git a/frontend/src/components/Base/Divider/DividerStyle.jsx b/frontend/src/components/Base/Divider/DividerStyle.jsx new file mode 100644 index 0000000..af195d5 --- /dev/null +++ b/frontend/src/components/Base/Divider/DividerStyle.jsx @@ -0,0 +1,16 @@ +import styled from "styled-components"; +import { color } from "../../../style/varibles"; + +const Divider = styled.span` + position:relative; + left: 28px; + display: block; + width: 19px; + margin: 21px 0; + border: 1px solid ${color.pricinpal.blanco}; + background: ${color.pricinpal.blanco}; + +`; + +export default Divider; + diff --git a/frontend/src/components/Base/Form/FormComponent.jsx b/frontend/src/components/Base/Form/FormComponent.jsx new file mode 100644 index 0000000..b3f5ae0 --- /dev/null +++ b/frontend/src/components/Base/Form/FormComponent.jsx @@ -0,0 +1,10 @@ +import React from "react"; +import FormComponentStyled from "./FormComponent.style"; + + +const FormComponent = ({ children, ...props }) => { + return {children}; +}; + +export default FormComponent; + diff --git a/frontend/src/components/Base/Form/FormComponent.style.jsx b/frontend/src/components/Base/Form/FormComponent.style.jsx new file mode 100644 index 0000000..737f157 --- /dev/null +++ b/frontend/src/components/Base/Form/FormComponent.style.jsx @@ -0,0 +1,10 @@ +import styled from "styled-components"; + +const FormComponentStyled = styled.form` + display: flex; + width: 100%; + flex-direction: column; + align-items: flex-start; +`; + +export default FormComponentStyled; diff --git a/frontend/src/components/Base/Form/Input/InputComponent.jsx b/frontend/src/components/Base/Form/Input/InputComponent.jsx new file mode 100644 index 0000000..1116aea --- /dev/null +++ b/frontend/src/components/Base/Form/Input/InputComponent.jsx @@ -0,0 +1,15 @@ +import React from "react"; +import LabelComponent from "../Label/LabelComponent"; +import { InputComponentStyled, InputContainerStyled } from "./InputComponent.style"; + +const InputComponent = ({ type, id, label, ...props }) => { + return ( + + + + + ); +}; + +export default InputComponent; + diff --git a/frontend/src/components/Base/Form/Input/InputComponent.style.jsx b/frontend/src/components/Base/Form/Input/InputComponent.style.jsx new file mode 100644 index 0000000..3ef411b --- /dev/null +++ b/frontend/src/components/Base/Form/Input/InputComponent.style.jsx @@ -0,0 +1,28 @@ +import styled from "styled-components"; +import { color } from "../../../../style/varibles"; + +const InputComponentStyled = styled.input` + background-color: ${color.pricinpal.grisOscuro}; + padding: 12px; + font-size: 14px; + font-family: "Helvetica85"; + color: ${color.pricinpal.blanco}; + border: 2px solid ${color.pricinpal.blanco}; + border-radius: 5px; + ::placeholder { + color: ${color.gradient.placeholder}; + } + &:focus { + outline: none; + } +`; + +const InputContainerStyled = styled.div` +width: 100%; + display: flex; + flex-direction: column; + margin: 12px 0; +`; + +export {InputComponentStyled,InputContainerStyled}; + diff --git a/frontend/src/components/Base/Form/Label/LabelComponent.jsx b/frontend/src/components/Base/Form/Label/LabelComponent.jsx new file mode 100644 index 0000000..e5a34ae --- /dev/null +++ b/frontend/src/components/Base/Form/Label/LabelComponent.jsx @@ -0,0 +1,11 @@ +import React from 'react'; +import LabelComponentStyled from "./LabelComponent.style" + + +const LabelComponent = ({label,forhtml}) => { + return ( + {label} + ) +} + +export default LabelComponent \ No newline at end of file diff --git a/frontend/src/components/Base/Form/Label/LabelComponent.style.jsx b/frontend/src/components/Base/Form/Label/LabelComponent.style.jsx new file mode 100644 index 0000000..8ce2670 --- /dev/null +++ b/frontend/src/components/Base/Form/Label/LabelComponent.style.jsx @@ -0,0 +1,14 @@ +import styled from "styled-components"; +import { color } from "../../../../style/varibles"; + +const LabelComponentStyled = styled.label` + color: ${color.pricinpal.blanco}; + text-align: left; + font-size: 16px; + font-family: "Helvetica85"; + text-transform: uppercase; + margin: 6px 0; +`; + +export default LabelComponentStyled; + diff --git a/frontend/src/components/Base/MainContainer/MainContainer.jsx b/frontend/src/components/Base/MainContainer/MainContainer.jsx new file mode 100644 index 0000000..b8bb60d --- /dev/null +++ b/frontend/src/components/Base/MainContainer/MainContainer.jsx @@ -0,0 +1,22 @@ +import React from "react"; +import PageTitle from "../../PageTitle/PageTitle"; + + +import MainContainerStyled, { + TitleContainerStyled, + ContentContainerStyled, +} from "./MainContainer.style"; + +const MainContainer = ({ children }) => { + return ( + + + + + {children} + + ); +}; + +export default MainContainer; + diff --git a/frontend/src/components/Base/MainContainer/MainContainer.style.jsx b/frontend/src/components/Base/MainContainer/MainContainer.style.jsx new file mode 100644 index 0000000..b2e7437 --- /dev/null +++ b/frontend/src/components/Base/MainContainer/MainContainer.style.jsx @@ -0,0 +1,26 @@ +import styled from "styled-components"; + +const MainContainerStyled = styled.main` + padding-left: 97px; + padding-top: 26px; + margin-right: 16px; + position: relative; + display: flex; + flex-direction: column; + align-items: flex-end; + height: 96vh; +`; +const TitleContainerStyled = styled.div` + width: 100%; +`; +const ContentContainerStyled = styled.div` + width: 100%; + height: 100vh; + overflow: hidden; + margin-top: 16px; +`; + +export default MainContainerStyled; + +export { TitleContainerStyled, ContentContainerStyled }; + diff --git a/frontend/src/components/ConfirmationModal/ConfirmationModal.jsx b/frontend/src/components/ConfirmationModal/ConfirmationModal.jsx new file mode 100644 index 0000000..0f8d424 --- /dev/null +++ b/frontend/src/components/ConfirmationModal/ConfirmationModal.jsx @@ -0,0 +1,39 @@ +import React from "react"; +import BtnComponent from "../Base/BTN/Btn"; + +import { + ConfirmationModalStyled, + ModalOverlayStyled, + ModalConfirmationBtns, +} from "./ConfirmationModal.style"; + +import { color } from "../../style/varibles"; + +const ConfirmationModal = ({ children, title, modal, click }) => { + const { handleModal, handleLogout } = click; + return ( + + +

{title}

+

{children}

+ + + + + + + ); +}; + +export default ConfirmationModal; + diff --git a/frontend/src/components/ConfirmationModal/ConfirmationModal.style.jsx b/frontend/src/components/ConfirmationModal/ConfirmationModal.style.jsx new file mode 100644 index 0000000..ceec6d9 --- /dev/null +++ b/frontend/src/components/ConfirmationModal/ConfirmationModal.style.jsx @@ -0,0 +1,45 @@ +import styled from "styled-components"; +import { color } from "../../style/varibles"; + +const ModalOverlayStyled = styled.div` + display: ${({modal}) => (modal ? "flex" : "none")}; + position: absolute; + justify-content: center; + align-items: center; + width: 100%; + height: 100vh; + background-color: #00000050; + z-index: 9999; + top: 0; + right: 0; +`; + +const ConfirmationModalStyled = styled.div` + position: relative; + display: flex; + flex-direction: column; + margin: 0 auto; + padding: 16px; + justify-content: center; + text-align: center; + z-index: 10000; + border-radius: 5px; + background-color: ${color.pricinpal.grisOscuro}; + width: 50%; + h1 { + margin: 16px 0; + } + p { + font-size: 18px; + margin: 16px 0; + } +`; + +const ModalConfirmationBtns = styled.div` + display: flex; + flex-direction: row; + justify-content: space-evenly; +`; + +export { ConfirmationModalStyled, ModalOverlayStyled, ModalConfirmationBtns }; + diff --git a/frontend/src/components/IconsComponents/Icons.jsx b/frontend/src/components/IconsComponents/Icons.jsx new file mode 100644 index 0000000..f9e00be --- /dev/null +++ b/frontend/src/components/IconsComponents/Icons.jsx @@ -0,0 +1,11 @@ +//Choice Icon by name in list +import React from "react"; + + +const Icons = ({ icon }) => { + console.log(icon); + return null; +}; + +export default Icons; + diff --git a/frontend/src/components/LoadingScreen/Loading.jsx b/frontend/src/components/LoadingScreen/Loading.jsx new file mode 100644 index 0000000..ca2e960 --- /dev/null +++ b/frontend/src/components/LoadingScreen/Loading.jsx @@ -0,0 +1,9 @@ +import React from "react"; + +import LoadingStyled from "./Loading.style" + +const Loading = () => { + return ; +}; + +export default Loading; diff --git a/frontend/src/components/LoadingScreen/Loading.style.jsx b/frontend/src/components/LoadingScreen/Loading.style.jsx new file mode 100644 index 0000000..c816907 --- /dev/null +++ b/frontend/src/components/LoadingScreen/Loading.style.jsx @@ -0,0 +1,55 @@ +import styled from "styled-components"; + +import {color} from "../../style/varibles" + +import logo from "../../assets/images/Logo.png"; + + + +const LoadingStyled = styled.div` + position: relative; + width: 100%; + height: 100vh; + background-color: #00000032; + display: flex; + text-align: center; + justify-items: center; + align-items: center; + &:after { + content: ""; + display: block; + margin: 0 auto; + border: 16px solid transparent; + border-top: 16px solid ${color.pricinpal.naranja}; + border-bottom: 16px solid ${color.pricinpal.grisOscuro}; + border-radius: 50%; + width: 220px; + height: 220px; + animation: spin 2s linear infinite; + } + &:before { + content: url(${logo}); + position: absolute; + display: block; + left: 0; + right: 0; + margin-left: auto; + margin-right: auto; + background-color: white; + padding: 24px; + border-radius: 50%; + width: 200px; + height: 200px; + } + @keyframes spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } + } +`; + +export default LoadingStyled; + diff --git a/frontend/src/components/LoginComponents/AvatarCompany/AvatarBlock.style.jsx b/frontend/src/components/LoginComponents/AvatarCompany/AvatarBlock.style.jsx new file mode 100644 index 0000000..c32d356 --- /dev/null +++ b/frontend/src/components/LoginComponents/AvatarCompany/AvatarBlock.style.jsx @@ -0,0 +1,16 @@ +import styled from "styled-components"; +import logo from "../../../assets/images/Logo.png"; + +const AvatarBlock = styled.div` +display: flex; +justify-content: center; +background-image: url(${logo}); +background-size: contain; +background-repeat: no-repeat; +background-color: white; +border-radius: 50%; +width: 45px; +height: 45px; +`; + +export default AvatarBlock; \ No newline at end of file diff --git a/frontend/src/components/LoginComponents/AvatarCompany/AvatarLogin.jsx b/frontend/src/components/LoginComponents/AvatarCompany/AvatarLogin.jsx new file mode 100644 index 0000000..bdb0028 --- /dev/null +++ b/frontend/src/components/LoginComponents/AvatarCompany/AvatarLogin.jsx @@ -0,0 +1,17 @@ +import React from "react"; + +import AvatarLoginStyle from "./AvatarLogin.style"; +import AvatarBlock from "./AvatarBlock.style"; +import H1Title from "./H1Title.style"; + +const AvatarLogin = () => { + return ( + + + OmniHit + + ); +}; + +export default AvatarLogin; + diff --git a/frontend/src/components/LoginComponents/AvatarCompany/AvatarLogin.style.jsx b/frontend/src/components/LoginComponents/AvatarCompany/AvatarLogin.style.jsx new file mode 100644 index 0000000..8cb97d9 --- /dev/null +++ b/frontend/src/components/LoginComponents/AvatarCompany/AvatarLogin.style.jsx @@ -0,0 +1,10 @@ +import styled from "styled-components"; + +const AvatarLoginStyle = styled.div` + display: flex; + flex-direction: row; + align-items: center; + gap: 16px; +`; + +export default AvatarLoginStyle; diff --git a/frontend/src/components/LoginComponents/AvatarCompany/H1Title.style.jsx b/frontend/src/components/LoginComponents/AvatarCompany/H1Title.style.jsx new file mode 100644 index 0000000..a846670 --- /dev/null +++ b/frontend/src/components/LoginComponents/AvatarCompany/H1Title.style.jsx @@ -0,0 +1,8 @@ +import styled from "styled-components"; + +const H1Title = styled.h1` + font-size: 32px; + font-family: "Helvetica85"; + text-transform: uppercase; +`; +export default H1Title \ No newline at end of file diff --git a/frontend/src/components/LoginComponents/CompanyLogo/Company.jsx b/frontend/src/components/LoginComponents/CompanyLogo/Company.jsx new file mode 100644 index 0000000..74a493c --- /dev/null +++ b/frontend/src/components/LoginComponents/CompanyLogo/Company.jsx @@ -0,0 +1,17 @@ +import React from "react"; + +import CompanyStyled from "./Company.style"; + +import { ReactComponent as Hit46mm } from "../../../assets/images/HitLogo/HIT-Logo_Blanco_48mm.svg"; + +const Company = () => { + return ( + + +

Copyright Ⓒ 2022 HIT Communications. Todos os Direitos Reservados

+ + ); +}; + +export default Company; + diff --git a/frontend/src/components/LoginComponents/CompanyLogo/Company.style.jsx b/frontend/src/components/LoginComponents/CompanyLogo/Company.style.jsx new file mode 100644 index 0000000..19381cc --- /dev/null +++ b/frontend/src/components/LoginComponents/CompanyLogo/Company.style.jsx @@ -0,0 +1,19 @@ +import styled from "styled-components"; + +const CompanyStyled = styled.div` + position: absolute; + display: flex; + flex-direction: column; + justify-content: right; + align-items: flex-end; + width: 100%; + right: 16px; + bottom: 16px; + font-size: 10px; + p{ + font-family: "Helvetica85"; + } +`; + +export default CompanyStyled; + diff --git a/frontend/src/components/LoginComponents/LoginForm/Btn/BtnSubmit.jsx b/frontend/src/components/LoginComponents/LoginForm/Btn/BtnSubmit.jsx new file mode 100644 index 0000000..a7ae3b7 --- /dev/null +++ b/frontend/src/components/LoginComponents/LoginForm/Btn/BtnSubmit.jsx @@ -0,0 +1,9 @@ +import React from "react"; +import BtnSubmitStyled from "./BtnSubmit.style"; + +const BtnSubmit = ({ submit }) => { + return Login; +}; + +export default BtnSubmit; + diff --git a/frontend/src/components/LoginComponents/LoginForm/Btn/BtnSubmit.style.jsx b/frontend/src/components/LoginComponents/LoginForm/Btn/BtnSubmit.style.jsx new file mode 100644 index 0000000..4c22e11 --- /dev/null +++ b/frontend/src/components/LoginComponents/LoginForm/Btn/BtnSubmit.style.jsx @@ -0,0 +1,20 @@ +import styled from "styled-components"; + +import { color } from "../../../../style/varibles"; + +const BtnSubmitStyled = styled.button` + cursor: pointer; + width: 342px; + padding: 12px; + margin-top: 16px; + background-color: ${color.complement.azulCielo}; + color: ${color.pricinpal.blanco}; + border: none; + border-radius: 6px; + font-size: 14px; + font-family: "Helvetica55"; + box-shadow: -1px 0px 8px 0px rgba(255,255,255,.25); +`; + +export default BtnSubmitStyled; + diff --git a/frontend/src/components/LoginComponents/LoginForm/Inputs/InputBlock.style.jsx b/frontend/src/components/LoginComponents/LoginForm/Inputs/InputBlock.style.jsx new file mode 100644 index 0000000..a87f470 --- /dev/null +++ b/frontend/src/components/LoginComponents/LoginForm/Inputs/InputBlock.style.jsx @@ -0,0 +1,19 @@ +import styled from "styled-components"; + +import { color } from "../../../../style/varibles"; + +const InputBlockStyled = styled.div` + width: 320px; + display: flex; + flex-direction: row; + background: ${color.complement.azulOscuro}; + color: ${color.complement.azulCielo}; + font-size: 11px; + margin: 8px 0; + padding: 12px; + border: none; + border-radius: 5px; + gap: 12px; +`; + +export default InputBlockStyled; \ No newline at end of file diff --git a/frontend/src/components/LoginComponents/LoginForm/Inputs/InputComponent.jsx b/frontend/src/components/LoginComponents/LoginForm/Inputs/InputComponent.jsx new file mode 100644 index 0000000..cb74ea7 --- /dev/null +++ b/frontend/src/components/LoginComponents/LoginForm/Inputs/InputComponent.jsx @@ -0,0 +1,31 @@ +import React from "react"; + +import { ReactComponent as EmailIcon } from "../../../../assets/icons/email.svg"; +import { ReactComponent as KeyIcon } from "../../../../assets/icons/key.svg"; +import { ReactComponent as VisibilityIcon } from "../../../../assets/icons/visibility.svg"; + +import InputBlockStyled from "./InputBlock.style"; +import InputComponentStyled from "./InputComponent.style"; + +const InputComponent = ({ name, type, placeholder, icon, ...props }) => { + const [password, setPassword] = React.useState(true); + + if (name === "email") { + return ( + + + + + ); + } else { + return ( + + + + setPassword(!password)} /> + + ); + } +}; +export default InputComponent; + diff --git a/frontend/src/components/LoginComponents/LoginForm/Inputs/InputComponent.style.jsx b/frontend/src/components/LoginComponents/LoginForm/Inputs/InputComponent.style.jsx new file mode 100644 index 0000000..4e6c60d --- /dev/null +++ b/frontend/src/components/LoginComponents/LoginForm/Inputs/InputComponent.style.jsx @@ -0,0 +1,12 @@ +import styled from "styled-components"; +import { color } from "../../../../style/varibles"; + +const InputComponentStyled = styled.input` + width: 100%; + background: transparent; + border: none; + color: ${color.complement.azulCielo}; +`; + +export default InputComponentStyled; + diff --git a/frontend/src/components/LoginComponents/LoginForm/LoginBlock.style.jsx b/frontend/src/components/LoginComponents/LoginForm/LoginBlock.style.jsx new file mode 100644 index 0000000..1d4f8c4 --- /dev/null +++ b/frontend/src/components/LoginComponents/LoginForm/LoginBlock.style.jsx @@ -0,0 +1,9 @@ +import styled from "styled-components"; + +const LoginBlockStyled = styled.div` + width: 100%; + display: flex; + flex-direction: column; +`; +export default LoginBlockStyled; + diff --git a/frontend/src/components/LoginComponents/LoginForm/LoginForm.jsx b/frontend/src/components/LoginComponents/LoginForm/LoginForm.jsx new file mode 100644 index 0000000..1a3d0b2 --- /dev/null +++ b/frontend/src/components/LoginComponents/LoginForm/LoginForm.jsx @@ -0,0 +1,41 @@ +import React from "react"; + +import AvatarLogin from "../AvatarCompany/AvatarLogin"; +import BtnSubmit from "./Btn/BtnSubmit"; +import InputComponent from "./Inputs/InputComponent"; + +import LoginBlockStyled from "./LoginBlock.style"; +import LoginFormStyled from "./LoginForm.style"; + +const LoginForm = ({ user,password, handlSubmit, handleChangeInput }) => { + return ( + + + + + + {/*! Esqueceu a senha é relevante? */} + + + + ); +}; + +export default LoginForm; + diff --git a/frontend/src/components/LoginComponents/LoginForm/LoginForm.style.jsx b/frontend/src/components/LoginComponents/LoginForm/LoginForm.style.jsx new file mode 100644 index 0000000..980c06a --- /dev/null +++ b/frontend/src/components/LoginComponents/LoginForm/LoginForm.style.jsx @@ -0,0 +1,8 @@ +import styled from "styled-components"; + +const LoginFormStyled = styled.form` + display: flex; + flex-direction: column; + margin-top: 16px; +`; +export default LoginFormStyled; diff --git a/frontend/src/components/Menu/MenuBottom.jsx b/frontend/src/components/Menu/MenuBottom.jsx new file mode 100644 index 0000000..d3b49f3 --- /dev/null +++ b/frontend/src/components/Menu/MenuBottom.jsx @@ -0,0 +1,15 @@ +import React from "react"; +import { ReactComponent as LogoHit } from "../../assets/icons/Logohit.svg"; +import MenuBottomStyled from "./MenuBottom.style"; + +const MenuBottom = ({ hover }) => { + return ( + + +

Copyright © 2022 HIT Communications. Todos os direitos reservados.

+ + ); +}; + +export default MenuBottom; + diff --git a/frontend/src/components/Menu/MenuBottom.style.jsx b/frontend/src/components/Menu/MenuBottom.style.jsx new file mode 100644 index 0000000..3bd6f34 --- /dev/null +++ b/frontend/src/components/Menu/MenuBottom.style.jsx @@ -0,0 +1,31 @@ +import styled from "styled-components"; + +import { color } from "../../style/varibles"; + +const MenuBottomStyled = styled.div` + display: flex; + position: absolute; + left: 12px; + bottom: 16px; + z-index: 100; + svg { + max-width: 51px; + max-height: 51px; + min-width: 51px; + min-height: 51px; + } + p { + display: block; + width: 129px; + align-items: center; + margin-left: 12px; + font-family: "Helvetica55"; + font-size: 10px; + color: ${color.pricinpal.blanco}; + display: ${({ hover }) => (hover ? "flex" : "none")}; + opacity: ${({ hover }) => (hover ? "1" : "0")}; + } +`; + +export default MenuBottomStyled; + diff --git a/frontend/src/components/Menu/MenuComponent.jsx b/frontend/src/components/Menu/MenuComponent.jsx new file mode 100644 index 0000000..047aedc --- /dev/null +++ b/frontend/src/components/Menu/MenuComponent.jsx @@ -0,0 +1,83 @@ +import React from "react"; + +import { WhatsAppsContext } from "../../context/WhatsApp/WhatsAppsContext"; +import { AuthContext } from "../../context/Auth/AuthContext"; + +import { MenuStyled, MenuListStyled } from "./MenuComponent.style"; + +import { ReactComponent as Tickets } from "../../assets/icons/Menu/Whatsapp.svg"; +import { ReactComponent as Contact } from "../../assets/icons/Menu/Contact.svg"; +import { ReactComponent as Reminder } from "../../assets/icons/Menu/Send.svg"; +import { ReactComponent as FastAanswer } from "../../assets/icons/Menu/Mensage.svg"; +import { ReactComponent as Users } from "../../assets/icons/Menu/Peoplealt.svg"; +import { ReactComponent as Rows } from "../../assets/icons/Menu/Accounttree.svg"; +import { ReactComponent as Conetions } from "../../assets/icons/Menu/Swap.svg"; +import { ReactComponent as Dashboard } from "../../assets/icons/Menu/Dashboard.svg"; +import { ReactComponent as FastResumes } from "../../assets/icons/Menu/Graph.svg"; +import { ReactComponent as Super } from "../../assets/icons/Menu/Super.svg"; +import { ReactComponent as Configuration } from "../../assets/icons/Menu/Configuration.svg"; + +import VideoComponent from "../VideoTag/VideoComponent"; +import MenuItem from "./MenuItem"; +import Divider from "../Base/Divider/DividerStyle"; +import MenuBottom from "./MenuBottom"; +import MenuTop from "./MenuTop"; + +const MenuComponent = () => { + const [hover, setHover] = React.useState(false); + const { whatsApps } = React.useContext(WhatsAppsContext); + const { user } = React.useContext(AuthContext); + const [connectionWarning, setConnectionWarning] = React.useState(false); + + const HoverMenu = () => { + setHover(!hover); + }; + + React.useEffect(() => { + const delayDebounceFn = setTimeout(() => { + if (whatsApps.length > 0) { + const offlineWhats = whatsApps.filter((whats) => { + return ( + whats.status === "qrcode" || + whats.status === "PAIRING" || + whats.status === "DISCONNECTED" || + whats.status === "TIMEOUT" || + whats.status === "OPENING" + ); + }); + if (offlineWhats.length > 0) { + setConnectionWarning(true); + } else { + setConnectionWarning(false); + } + } + }, 2000); + return () => clearTimeout(delayDebounceFn); + }, [whatsApps]); + + return ( + + + + + } text="Tickets" to="/tickets" hover={hover} /> + } text="Contatos" to="/contacts" hover={hover} /> + } text="Lembretes" to="/schedulesReminder" hover={hover} /> + } text="Respostas" to="" hover={hover} /> + + } text="Usuários" to="/users" hover={hover} /> + } text="Filas" to="/Queues" hover={hover} /> + } text="Conexões" to="/connections" hover={hover} /> + } text="Dashboard" to="/" hover={hover} /> + } text="Relatórios" to="report" hover={hover} /> + } text="Supervisão" to="" hover={hover} /> + + } text="Configurações" to="/Settings" hover={hover} /> + + + + ); +}; + +export default MenuComponent; + diff --git a/frontend/src/components/Menu/MenuComponent.style.jsx b/frontend/src/components/Menu/MenuComponent.style.jsx new file mode 100644 index 0000000..3a5b236 --- /dev/null +++ b/frontend/src/components/Menu/MenuComponent.style.jsx @@ -0,0 +1,79 @@ +import styled from "styled-components"; +import { color } from "../../style/varibles"; + +//Nav +const MenuStyled = styled.nav` + position: absolute; + width: 76px; + height: 100vh; + background: ${color.pricinpal.grisOscuro}; //Same background login + z-index: 100; + animation: ${(props) => (props.hover ? "hover" : "hoveroff")} 0.5s forwards; + @keyframes hover { + from { + width: 76px; + } + to { + width: 218px; + } + } + @keyframes hoveroff { + from { + width: 218px; + } + to { + width: 76px; + } + } +`; + +//UL +const MenuListStyled = styled.ul` + margin-top: 16px; + position: relative; + display: flex; + flex-direction: column; + justify-content: center; + z-index: 100; +`; + +//LI +const MenuListItemStyled = styled.li` + cursor: pointer; + display: flex; + flex-direction: row; + margin: 12px 28px; + gap: 6px; + color: ${color.pricinpal.blanco}; + transition: all 0.1s linear; + a { + display: flex; + align-items: center; + color: ${color.pricinpal.blanco}; + gap: 12px; + text-decoration: none; + + p { + text-transform: capitalize; + font-family: "Helvetica55"; + font-size: 14px; + opacity: ${(props) => (props.hover ? "1" : "0")}; + display: ${(props) => (props.hover ? "block" : "none")}; + } + svg { + width: 18px; + height: 18px; + fill: ${color.pricinpal.blanco}; + transition: all 0.1s linear; + } + } + &:hover a p, + &:hover a svg { + color: ${color.pricinpal.naranja}; + fill: ${color.pricinpal.naranja}; + transition: all 0.1s linear; + } +`; + +export { MenuStyled, MenuListStyled, MenuListItemStyled }; + diff --git a/frontend/src/components/Menu/MenuItem.jsx b/frontend/src/components/Menu/MenuItem.jsx new file mode 100644 index 0000000..27cb391 --- /dev/null +++ b/frontend/src/components/Menu/MenuItem.jsx @@ -0,0 +1,22 @@ +import React from "react"; +import { Link as RouterLink } from "react-router-dom"; + +import { MenuListItemStyled } from "./MenuComponent.style"; + +const MenuItem = ({ icon, text, to, hover }) => { + const RenderLink = React.useMemo( + () => React.forwardRef((itemProps, ref) => ), + [to] + ); + return ( + + + {icon ? icon : ""} +

{text ? text : ""}

+ + + ); +}; + +export default MenuItem; + diff --git a/frontend/src/components/Menu/MenuTop.jsx b/frontend/src/components/Menu/MenuTop.jsx new file mode 100644 index 0000000..dd75487 --- /dev/null +++ b/frontend/src/components/Menu/MenuTop.jsx @@ -0,0 +1,18 @@ +import React from "react"; +import img from "../../assets/images/Logo.png"; + +import { MenuTopStyled, MenuTopFrameStyled, MenuTitle } from "./MenuTop.style"; + +const MenuTop = ({hover}) => { + return ( + + + + + OmniHit + + ); +}; + +export default MenuTop; + diff --git a/frontend/src/components/Menu/MenuTop.style.jsx b/frontend/src/components/Menu/MenuTop.style.jsx new file mode 100644 index 0000000..d84a42d --- /dev/null +++ b/frontend/src/components/Menu/MenuTop.style.jsx @@ -0,0 +1,28 @@ +import styled from "styled-components"; + +import { color } from "../../style/varibles"; + +const MenuTopStyled = styled.div` + display: flex; + flex-direction: row; +`; +const MenuTopFrameStyled = styled.div` + min-width: 60px; + max-width: 60px; + padding: 8px; + background-color: ${color.pricinpal.blanco}; +`; + +const MenuTitle = styled.p` + display: ${({ hover }) => (hover ? "flex" : "none")}; + margin-left: 12px; + align-items: center; + font-family: "Helvetica55"; + color: ${color.pricinpal.naranja}; + font-size: 28px; + text-transform: capitalize; + text-align: center; +`; + +export { MenuTopStyled, MenuTopFrameStyled, MenuTitle }; + diff --git a/frontend/src/components/PageTitle/PageTitle.jsx b/frontend/src/components/PageTitle/PageTitle.jsx new file mode 100644 index 0000000..6ba57c1 --- /dev/null +++ b/frontend/src/components/PageTitle/PageTitle.jsx @@ -0,0 +1,25 @@ +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 [modal, setModal] = React.useState(false); + const { user } = React.useContext(AuthContext); + + const handleModal = () => { + setModal(!modal); + }; + return ( + +

PageTitle

+ + + ); +}; + +export default PageTitle; + diff --git a/frontend/src/components/PageTitle/PageTitle.style.jsx b/frontend/src/components/PageTitle/PageTitle.style.jsx new file mode 100644 index 0000000..3847e9c --- /dev/null +++ b/frontend/src/components/PageTitle/PageTitle.style.jsx @@ -0,0 +1,68 @@ +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: 0.5px; + font-size: 14px; + text-transform: capitalize; + align-items: center; + cursor: pointer; + img { + background-color: white; + width: 24px; + height: 24px; + object-fit: contain; + border-radius: 50%; + margin-right: 12px; + } +`; + +const UserModalStyled = styled.div` + display: ${({ modal }) => (modal ? "flex" : "none")}; + position: absolute; + background-color: white; + padding: 12px; + right: 2rem; + top: 5.5rem; + border-radius: 5px; + box-shadow: ${color.shadow.dark} ${color.gradient.bgOpacity}; +`; + +const UserModalListStyled = styled.ul` + display: flex; + flex-direction: column; +`; + +const UserModalItemStyled = styled.li` + display: flex; + justify-content: left; + color: ${color.pricinpal.grisOscuro}; + margin: 6px 0; + cursor: pointer; + svg { + margin-right: 12px; + } +`; +export { + PageTitleStyled, + UserBtnStyled, + UserModalStyled, + UserModalListStyled, + UserModalItemStyled, +}; + diff --git a/frontend/src/components/PageTitle/UserBtn/UserBtn.jsx b/frontend/src/components/PageTitle/UserBtn/UserBtn.jsx new file mode 100644 index 0000000..8296bde --- /dev/null +++ b/frontend/src/components/PageTitle/UserBtn/UserBtn.jsx @@ -0,0 +1,41 @@ +import React from "react"; +import { UserBtnStyled, UserModalStyled, UserModalListStyled } from "../PageTitle.style"; + +import { AuthContext } from "../../../context/Auth/AuthContext"; +import UserItem from "./UserItem"; + +import { ReactComponent as Perfil } from "../../../assets/icons/UserModal/perfil.svg"; +import { ReactComponent as Signoff } from "../../../assets/icons/UserModal/signoff.svg"; +import ConfirmationModal from "../../ConfirmationModal/ConfirmationModal"; +import UserModal from "../../UserModal/UserModal"; + +const UserBtn = ({ user, img, modal, modalSet }) => { + const [modalConfirm, setModalConfirm] = React.useState(false); + const { handleLogout } = React.useContext(AuthContext); + + const handleModal = () => { + setModalConfirm(!modalConfirm); + }; + + return ( + <> + + {user + Bem Vindo, {user ? user.name : null} + + + + } /> + } onClick={handleModal} /> + + + + + Deseja Sair do sistema? + + + ); +}; + +export default UserBtn; + diff --git a/frontend/src/components/PageTitle/UserBtn/UserItem.jsx b/frontend/src/components/PageTitle/UserBtn/UserItem.jsx new file mode 100644 index 0000000..e243ad9 --- /dev/null +++ b/frontend/src/components/PageTitle/UserBtn/UserItem.jsx @@ -0,0 +1,14 @@ +import React from "react"; +import { UserModalItemStyled } from "../PageTitle.style"; + +const UserItem = ({ icon, title, onClick }) => { + return ( + + {icon} + {title} + + ); +}; + +export default UserItem; + diff --git a/frontend/src/components/UserModal/UserModal.jsx b/frontend/src/components/UserModal/UserModal.jsx new file mode 100644 index 0000000..3c55f1c --- /dev/null +++ b/frontend/src/components/UserModal/UserModal.jsx @@ -0,0 +1,43 @@ +import React from "react"; +import { ModalOverlayStyled, UserModalStyled, UserBtns } from "./UserModal.style"; + +import api from "../../services/api"; +import { AuthContext } from "../../context/Auth/AuthContext"; +import { Can } from "../Can"; +import BtnComponent from "../Base/BTN/Btn"; + +import FormComponent from "../Base/Form/FormComponent"; +import InputComponent from "../Base/Form/Input/InputComponent"; + +const style = { + width: "100%", + justifyContent: "flex-start", + display: "flex", + flexDirection: "column", + alignItems: "center", +} + +const UserModal = () => { + return ( + + +
+

Imagem

+

Desc

+
+ + + + + + + + + + + + ); +}; + +export default UserModal; + diff --git a/frontend/src/components/UserModal/UserModal.style.jsx b/frontend/src/components/UserModal/UserModal.style.jsx new file mode 100644 index 0000000..1cd8e9c --- /dev/null +++ b/frontend/src/components/UserModal/UserModal.style.jsx @@ -0,0 +1,34 @@ +import styled from "styled-components"; +import { color } from "../../style/varibles"; + +const ModalOverlayStyled = styled.div` + /* display: ${({ modal }) => (modal ? "flex" : "none")}; */ + display: flex; + position: absolute; + justify-content: center; + align-items: center; + width: 100%; + height: 100vh; + background-color: #00000050; + z-index: 9999; + top: 0; + right: 0; +`; +const UserModalStyled = styled.div` + position: relative; + display: flex; + flex-direction: row; + margin: 0 auto; + padding: 12px; + z-index: 10000; + border-radius: 5px; + background-color: ${color.pricinpal.grisOscuro}; + width: 50%; +`; +const UserBtns = styled.div` + display: flex; + flex-direction: row; + justify-content: space-between; +`; +export { ModalOverlayStyled, UserModalStyled,UserBtns }; + diff --git a/frontend/src/components/VideoTag/VideoComponent.jsx b/frontend/src/components/VideoTag/VideoComponent.jsx new file mode 100644 index 0000000..76bd1ce --- /dev/null +++ b/frontend/src/components/VideoTag/VideoComponent.jsx @@ -0,0 +1,15 @@ +import React from "react"; + +import StyleVideo from "./VideoComponent.style"; +import bgvideo from "../../assets/videos/video.mp4"; + +const VideoComponent = ({ width, zIndex,position, ...props }) => { + return ( + + + + ); +}; + +export default VideoComponent; + diff --git a/frontend/src/components/VideoTag/VideoComponent.style.jsx b/frontend/src/components/VideoTag/VideoComponent.style.jsx new file mode 100644 index 0000000..cb7b77e --- /dev/null +++ b/frontend/src/components/VideoTag/VideoComponent.style.jsx @@ -0,0 +1,17 @@ +import styled from "styled-components"; + +const StyleVideo = styled.video` + position: ${(props) => (props.position === "relative" ? "relative" : "absolute")}; + z-index: ${(props) => props.zIndex}; + width: ${(props) => props.width}; + height: 100vh; + object-fit: cover; + filter: grayscale(1) brightness(0.3); + margin-right: 60px; + @media screen and (max-width: 992px) { + display: none; + } +`; + +export default StyleVideo; + diff --git a/frontend/src/context/Auth/AuthContext.js b/frontend/src/context/Auth/AuthContext.js index 09cffd5..8b4487d 100644 --- a/frontend/src/context/Auth/AuthContext.js +++ b/frontend/src/context/Auth/AuthContext.js @@ -6,9 +6,6 @@ const AuthContext = createContext(); const AuthProvider = ({ children }) => { const { loading, user, isAuth, handleLogin, handleLogout } = useAuth(); - - //{console.log('authContext teste: ', user)} - return ( - - , - document.getElementById("root") + <> + + + , + document.getElementById("root") ); // ReactDOM.render( @@ -20,3 +21,4 @@ ReactDOM.render( // document.getElementById("root") // ); + diff --git a/frontend/src/layout/MainListItems.OLD.js b/frontend/src/layout/MainListItems.OLD.js new file mode 100644 index 0000000..68327f2 --- /dev/null +++ b/frontend/src/layout/MainListItems.OLD.js @@ -0,0 +1,145 @@ +import React, { useContext, useEffect, useState } from "react"; +import { Link as RouterLink } from "react-router-dom"; + +import ListItem from "@material-ui/core/ListItem"; +import ListItemIcon from "@material-ui/core/ListItemIcon"; +import ListItemText from "@material-ui/core/ListItemText"; +import ListSubheader from "@material-ui/core/ListSubheader"; +import Divider from "@material-ui/core/Divider"; +import { Badge } from "@material-ui/core"; +import DashboardOutlinedIcon from "@material-ui/icons/DashboardOutlined"; + +import ReportOutlinedIcon from "@material-ui/icons/ReportOutlined"; +import SendOutlined from "@material-ui/icons/SendOutlined"; + +//import ReportOutlined from "@bit/mui-org.material-ui-icons.report-outlined"; + +import WhatsAppIcon from "@material-ui/icons/WhatsApp"; +import SyncAltIcon from "@material-ui/icons/SyncAlt"; +import SettingsOutlinedIcon from "@material-ui/icons/SettingsOutlined"; +import PeopleAltOutlinedIcon from "@material-ui/icons/PeopleAltOutlined"; +import ContactPhoneOutlinedIcon from "@material-ui/icons/ContactPhoneOutlined"; +import AccountTreeOutlinedIcon from "@material-ui/icons/AccountTreeOutlined"; +import QuestionAnswerOutlinedIcon from "@material-ui/icons/QuestionAnswerOutlined"; + +import { i18n } from "../translate/i18n"; +import { WhatsAppsContext } from "../context/WhatsApp/WhatsAppsContext"; +import { AuthContext } from "../context/Auth/AuthContext"; +import { Can } from "../components/Can"; + +function ListItemLink(props) { + const { icon, primary, to, className } = props; + + const renderLink = React.useMemo( + () => React.forwardRef((itemProps, ref) => ), + [to] + ); + + return ( +
  • + + {icon ? {icon} : null} + + +
    • + ); +} + +const MainListItems = (props) => { + const { drawerClose } = props; + const { whatsApps } = useContext(WhatsAppsContext); + const { user } = useContext(AuthContext); + const [connectionWarning, setConnectionWarning] = useState(false); + + useEffect(() => { + const delayDebounceFn = setTimeout(() => { + if (whatsApps.length > 0) { + const offlineWhats = whatsApps.filter((whats) => { + return ( + whats.status === "qrcode" || + whats.status === "PAIRING" || + whats.status === "DISCONNECTED" || + whats.status === "TIMEOUT" || + whats.status === "OPENING" + ); + }); + if (offlineWhats.length > 0) { + setConnectionWarning(true); + } else { + setConnectionWarning(false); + } + } + }, 2000); + return () => clearTimeout(delayDebounceFn); + }, [whatsApps]); + + return ( +
    + } + /> + + } + /> + } /> + } + /> + ( + <> + + {i18n.t("mainDrawer.listItems.administration")} + } + /> + } + /> + + + + + } + /> + + } /> + + } /> + + ( + } + /> + )} + /> + + )} + /> +
    + ); +}; + +export default MainListItems; diff --git a/frontend/src/layout/MainListItems.js b/frontend/src/layout/MainListItems.js index c524b76..e079637 100644 --- a/frontend/src/layout/MainListItems.js +++ b/frontend/src/layout/MainListItems.js @@ -1,28 +1,6 @@ import React, { useContext, useEffect, useState } from "react"; import { Link as RouterLink } from "react-router-dom"; -import ListItem from "@material-ui/core/ListItem"; -import ListItemIcon from "@material-ui/core/ListItemIcon"; -import ListItemText from "@material-ui/core/ListItemText"; -import ListSubheader from "@material-ui/core/ListSubheader"; -import Divider from "@material-ui/core/Divider"; -import { Badge } from "@material-ui/core"; -import DashboardOutlinedIcon from "@material-ui/icons/DashboardOutlined"; - -import ReportOutlinedIcon from "@material-ui/icons/ReportOutlined"; -import SendOutlined from '@material-ui/icons/SendOutlined'; - -//import ReportOutlined from "@bit/mui-org.material-ui-icons.report-outlined"; - - -import WhatsAppIcon from "@material-ui/icons/WhatsApp"; -import SyncAltIcon from "@material-ui/icons/SyncAlt"; -import SettingsOutlinedIcon from "@material-ui/icons/SettingsOutlined"; -import PeopleAltOutlinedIcon from "@material-ui/icons/PeopleAltOutlined"; -import ContactPhoneOutlinedIcon from "@material-ui/icons/ContactPhoneOutlined"; -import AccountTreeOutlinedIcon from "@material-ui/icons/AccountTreeOutlined"; -import QuestionAnswerOutlinedIcon from "@material-ui/icons/QuestionAnswerOutlined"; - import { i18n } from "../translate/i18n"; import { WhatsAppsContext } from "../context/WhatsApp/WhatsAppsContext"; import { AuthContext } from "../context/Auth/AuthContext"; @@ -32,25 +10,14 @@ function ListItemLink(props) { const { icon, primary, to, className } = props; const renderLink = React.useMemo( - () => - React.forwardRef((itemProps, ref) => ( - - )), + () => React.forwardRef((itemProps, ref) => ), [to] ); - return ( -
  • - - {icon ? {icon} : null} - - -
    • - ); + } const MainListItems = (props) => { - const { drawerClose } = props; const { whatsApps } = useContext(WhatsAppsContext); const { user } = useContext(AuthContext); const [connectionWarning, setConnectionWarning] = useState(false); @@ -78,90 +45,9 @@ const MainListItems = (props) => { }, [whatsApps]); return ( -
    - - - } - /> - - } - /> - } - /> - } - /> - ( - <> - - - {i18n.t("mainDrawer.listItems.administration")} - - } - /> - } - /> - - - - - } - /> - - } - /> - - } - /> - - - ( - } - /> - )} - /> - - - - )} - /> -
    +
      +
    • +
    ); }; diff --git a/frontend/src/layout/index.OLD.js b/frontend/src/layout/index.OLD.js new file mode 100644 index 0000000..e4228b4 --- /dev/null +++ b/frontend/src/layout/index.OLD.js @@ -0,0 +1,271 @@ +import React, { useState, useContext, useEffect } from "react"; +import clsx from "clsx"; + +import { + makeStyles, + Drawer, + AppBar, + Toolbar, + List, + Typography, + Divider, + MenuItem, + IconButton, + Menu, +} from "@material-ui/core"; + +import MenuIcon from "@material-ui/icons/Menu"; +import ChevronLeftIcon from "@material-ui/icons/ChevronLeft"; +import AccountCircle from "@material-ui/icons/AccountCircle"; + +import MainListItems from "./MainListItems"; +import NotificationsPopOver from "../components/NotificationsPopOver"; +import UserModal from "../components/UserModal"; +import { AuthContext } from "../context/Auth/AuthContext"; +import BackdropLoading from "../components/BackdropLoading"; +import { i18n } from "../translate/i18n"; + + +const drawerWidth = 240; + +const useStyles = makeStyles((theme) => ({ + root: { + display: "flex", + height: "100vh", + [theme.breakpoints.down("sm")]: { + height: "calc(100vh - 56px)", + }, + }, + + toolbar: { + paddingRight: 24, // keep right padding when drawer closed + }, + toolbarIcon: { + display: "flex", + alignItems: "center", + justifyContent: "flex-end", + padding: "0 8px", + minHeight: "48px", + }, + appBar: { + zIndex: theme.zIndex.drawer + 1, + transition: theme.transitions.create(["width", "margin"], { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.leavingScreen, + }), + }, + appBarShift: { + marginLeft: drawerWidth, + width: `calc(100% - ${drawerWidth}px)`, + transition: theme.transitions.create(["width", "margin"], { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.enteringScreen, + }), + }, + menuButton: { + marginRight: 36, + }, + menuButtonHidden: { + display: "none", + }, + title: { + flexGrow: 1, + }, + drawerPaper: { + position: "relative", + whiteSpace: "nowrap", + width: drawerWidth, + transition: theme.transitions.create("width", { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.enteringScreen, + }), + }, + drawerPaperClose: { + overflowX: "hidden", + transition: theme.transitions.create("width", { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.leavingScreen, + }), + width: theme.spacing(7), + [theme.breakpoints.up("sm")]: { + width: theme.spacing(9), + }, + }, + appBarSpacer: { + minHeight: "48px", + }, + content: { + flex: 1, + overflow: "auto", + }, + container: { + paddingTop: theme.spacing(4), + paddingBottom: theme.spacing(4), + }, + paper: { + padding: theme.spacing(2), + display: "flex", + overflow: "auto", + flexDirection: "column", + }, +})); + +const LoggedInLayout = ({ children }) => { + const classes = useStyles(); + const [userModalOpen, setUserModalOpen] = useState(false); + const [anchorEl, setAnchorEl] = useState(null); + const [menuOpen, setMenuOpen] = useState(false); + const { handleLogout, loading } = useContext(AuthContext); + const [drawerOpen, setDrawerOpen] = useState(true); + const [drawerVariant, setDrawerVariant] = useState("permanent"); + const { user } = useContext(AuthContext); + + useEffect(() => { + if (document.body.offsetWidth > 600) { + setDrawerOpen(true); + } + }, []); + + useEffect(() => { + if (document.body.offsetWidth < 600) { + setDrawerVariant("temporary"); + } else { + setDrawerVariant("permanent"); + } + }, [drawerOpen]); + + const handleMenu = (event) => { + setAnchorEl(event.currentTarget); + setMenuOpen(true); + }; + + const handleCloseMenu = () => { + setAnchorEl(null); + setMenuOpen(false); + }; + + const handleOpenUserModal = () => { + setUserModalOpen(true); + handleCloseMenu(); + }; + + const handleClickLogout = () => { + handleCloseMenu(); + handleLogout(); + }; + + const drawerClose = () => { + if (document.body.offsetWidth < 600) { + setDrawerOpen(false); + } + }; + + if (loading) { + return ; + } + + return ( +
    + +
    + setDrawerOpen(!drawerOpen)}> + + +
    + + + + + +     + setUserModalOpen(false)} + userId={user?.id} + /> + + + setDrawerOpen(!drawerOpen)} + className={clsx( + classes.menuButton, + drawerOpen && classes.menuButtonHidden + )} + > + + + + + OMNIHIT + + + {user.id && } + +
    + + + + + + {i18n.t("mainDrawer.appBar.user.profile")} + + + {i18n.t("mainDrawer.appBar.user.logout")} + + +
    +     +     +
    +
    + + {children ? children : null} +
    +
    + ); +}; + +export default LoggedInLayout; diff --git a/frontend/src/layout/index.js b/frontend/src/layout/index.js index ce410d0..bf1bdec 100644 --- a/frontend/src/layout/index.js +++ b/frontend/src/layout/index.js @@ -1,271 +1,28 @@ -import React, { useState, useContext, useEffect } from "react"; -import clsx from "clsx"; +import React from "react"; -import { - makeStyles, - Drawer, - AppBar, - Toolbar, - List, - Typography, - Divider, - MenuItem, - IconButton, - Menu, -} from "@material-ui/core"; - -import MenuIcon from "@material-ui/icons/Menu"; -import ChevronLeftIcon from "@material-ui/icons/ChevronLeft"; -import AccountCircle from "@material-ui/icons/AccountCircle"; - -import MainListItems from "./MainListItems"; -import NotificationsPopOver from "../components/NotificationsPopOver"; -import UserModal from "../components/UserModal"; +import Loading from "../components/LoadingScreen/Loading"; +import MainContainer from "../components/Base/MainContainer/MainContainer"; import { AuthContext } from "../context/Auth/AuthContext"; -import BackdropLoading from "../components/BackdropLoading"; import { i18n } from "../translate/i18n"; - -//import MailLogo from '../assets/logo.jpg'; - -const drawerWidth = 240; - -const useStyles = makeStyles((theme) => ({ - root: { - display: "flex", - height: "100vh", - [theme.breakpoints.down("sm")]: { - height: "calc(100vh - 56px)", - }, - }, - - toolbar: { - paddingRight: 24, // keep right padding when drawer closed - }, - toolbarIcon: { - display: "flex", - alignItems: "center", - justifyContent: "flex-end", - padding: "0 8px", - minHeight: "48px", - }, - appBar: { - zIndex: theme.zIndex.drawer + 1, - transition: theme.transitions.create(["width", "margin"], { - easing: theme.transitions.easing.sharp, - duration: theme.transitions.duration.leavingScreen, - }), - }, - appBarShift: { - marginLeft: drawerWidth, - width: `calc(100% - ${drawerWidth}px)`, - transition: theme.transitions.create(["width", "margin"], { - easing: theme.transitions.easing.sharp, - duration: theme.transitions.duration.enteringScreen, - }), - }, - menuButton: { - marginRight: 36, - }, - menuButtonHidden: { - display: "none", - }, - title: { - flexGrow: 1, - }, - drawerPaper: { - position: "relative", - whiteSpace: "nowrap", - width: drawerWidth, - transition: theme.transitions.create("width", { - easing: theme.transitions.easing.sharp, - duration: theme.transitions.duration.enteringScreen, - }), - }, - drawerPaperClose: { - overflowX: "hidden", - transition: theme.transitions.create("width", { - easing: theme.transitions.easing.sharp, - duration: theme.transitions.duration.leavingScreen, - }), - width: theme.spacing(7), - [theme.breakpoints.up("sm")]: { - width: theme.spacing(9), - }, - }, - appBarSpacer: { - minHeight: "48px", - }, - content: { - flex: 1, - overflow: "auto", - }, - container: { - paddingTop: theme.spacing(4), - paddingBottom: theme.spacing(4), - }, - paper: { - padding: theme.spacing(2), - display: "flex", - overflow: "auto", - flexDirection: "column", - }, -})); +import MenuComponent from "../components/Menu/MenuComponent"; const LoggedInLayout = ({ children }) => { - const classes = useStyles(); - const [userModalOpen, setUserModalOpen] = useState(false); - const [anchorEl, setAnchorEl] = useState(null); - const [menuOpen, setMenuOpen] = useState(false); - const { handleLogout, loading } = useContext(AuthContext); - const [drawerOpen, setDrawerOpen] = useState(false); - const [drawerVariant, setDrawerVariant] = useState("permanent"); - const { user } = useContext(AuthContext); - - useEffect(() => { - if (document.body.offsetWidth > 600) { - setDrawerOpen(true); - } - }, []); - - useEffect(() => { - if (document.body.offsetWidth < 600) { - setDrawerVariant("temporary"); - } else { - setDrawerVariant("permanent"); - } - }, [drawerOpen]); - - const handleMenu = (event) => { - setAnchorEl(event.currentTarget); - setMenuOpen(true); - }; - - const handleCloseMenu = () => { - setAnchorEl(null); - setMenuOpen(false); - }; - - const handleOpenUserModal = () => { - setUserModalOpen(true); - handleCloseMenu(); - }; - - const handleClickLogout = () => { - handleCloseMenu(); + const { handleLogout, loading, isAuth } = React.useContext(AuthContext); + const logout = (e) => { handleLogout(); }; + const { user } = React.useContext(AuthContext); - const drawerClose = () => { - if (document.body.offsetWidth < 600) { - setDrawerOpen(false); - } - }; if (loading) { - return ; + return ; } return ( -
    - -
    - setDrawerOpen(!drawerOpen)}> - - -
    - - - - - -     - setUserModalOpen(false)} - userId={user?.id} - /> - - - setDrawerOpen(!drawerOpen)} - className={clsx( - classes.menuButton, - drawerOpen && classes.menuButtonHidden - )} - > - - - - - OMNIHIT - - - {user.id && } - -
    - - - - - - {i18n.t("mainDrawer.appBar.user.profile")} - - - {i18n.t("mainDrawer.appBar.user.logout")} - - -
    -     -     -
    -
    - - {children ? children : null} -
    -
    + <> + + {children ? children : null} + ); }; diff --git a/frontend/src/pages/Login/index.js b/frontend/src/pages/Login/index.js index dd372f6..217eb3f 100644 --- a/frontend/src/pages/Login/index.js +++ b/frontend/src/pages/Login/index.js @@ -1,28 +1,13 @@ -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 { AuthContext } from "../../context/Auth/AuthContext"; import { i18n } from "../../translate/i18n"; -import { AuthContext } from "../../context/Auth/AuthContext"; +import ContainerLogin from "../../components/Base/ContainerLogin/ContainerLogin"; +import VideoComponent from "../../components/VideoTag/VideoComponent"; +import LoginForm from "../../components/LoginComponents/LoginForm/LoginForm"; +import Company from "../../components/LoginComponents/CompanyLogo/Company"; +//! Can i Delete this comment above? // const Copyright = () => { // return ( // @@ -36,33 +21,30 @@ 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 [user, setUser] = React.useState({ email: "", password: "" }); - const [user, setUser] = useState({ email: "", password: "" }); - const [showPassword, setShowPassword] = useState(false); - - const { handleLogin } = useContext(AuthContext); + const { handleLogin } = React.useContext(AuthContext); const handleChangeInput = (e) => { setUser({ ...user, [e.target.name]: e.target.value }); @@ -74,84 +56,16 @@ const Login = () => { }; return ( - - -
    - - - - - - - - {i18n.t("login.title")} - -
    - - - setShowPassword((e) => !e)} - > - {showPassword ? : } - - - ) - }} - /> - - - - - - {/* {i18n.t("login.buttons.register")} */} - - - - - -
    - {/* */} -     + + + + + ); }; diff --git a/frontend/src/pages/Tickets/index.js b/frontend/src/pages/Tickets/index.js index 80eb909..461145a 100644 --- a/frontend/src/pages/Tickets/index.js +++ b/frontend/src/pages/Tickets/index.js @@ -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} > diff --git a/frontend/src/routes/Route.js b/frontend/src/routes/Route.js index fab61b3..788501e 100644 --- a/frontend/src/routes/Route.js +++ b/frontend/src/routes/Route.js @@ -2,7 +2,7 @@ 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 }) => { const { isAuth, loading } = useContext(AuthContext); @@ -10,7 +10,7 @@ const Route = ({ component: Component, isPrivate = false, ...rest }) => { if (!isAuth && isPrivate) { return ( <> - {loading && } + {loading && } ); @@ -19,7 +19,7 @@ const Route = ({ component: Component, isPrivate = false, ...rest }) => { if (isAuth && !isPrivate) { return ( <> - {loading && } + {loading && } ; ); @@ -27,7 +27,7 @@ const Route = ({ component: Component, isPrivate = false, ...rest }) => { return ( <> - {loading && } + {loading && } ); diff --git a/frontend/src/routes/index.js b/frontend/src/routes/index.js index ad0b229..431140c 100644 --- a/frontend/src/routes/index.js +++ b/frontend/src/routes/index.js @@ -8,9 +8,9 @@ import Dashboard from "../pages/Dashboard/"; import Report from "../pages/Report/"; import SchedulesReminder from "../pages/SchedulesReminder/"; -import Tickets from "../pages/Tickets/"; -import Signup from "../pages/Signup/"; import Login from "../pages/Login/"; +import Signup from "../pages/Signup/"; +import Tickets from "../pages/Tickets/"; import Connections from "../pages/Connections/"; import Settings from "../pages/Settings/"; import Users from "../pages/Users"; diff --git a/frontend/src/style/GlobalStyle.jsx b/frontend/src/style/GlobalStyle.jsx new file mode 100644 index 0000000..42c8aea --- /dev/null +++ b/frontend/src/style/GlobalStyle.jsx @@ -0,0 +1,113 @@ +import { createGlobalStyle } from "styled-components"; +import { texts, color } from "./varibles"; + +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 +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} + + +//FONTS +@font-face { + font-family: "Helvetica55"; + font-style: normal; + font-size: 12px; + src: url(${Helvetica55}) format('truetype'); +} +@font-face { + font-family: "Helvetica25"; + font-style: normal; + src: url(${Helvetica25}) format('truetype'); +} +@font-face { + font-family: "Helvetica45"; + font-style: normal; + src: url(${Helvetica45}) format('truetype'); +} +@font-face { + font-family: "Helvetica56"; + font-style: normal; + src: url(${Helvetica56}) format('truetype'); +} +@font-face { + font-family: "Helvetica85"; + font-style: normal; + src: url(${Helvetica85}) format('truetype'); +} +@font-face { + font-family: "Helvetica95"; + font-style: normal; + src: url(${Helvetica95}) format('truetype'); +} + +//Patterns +html{ + overflow: hidden; + height: 100vh; +} +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..ecf66e6 --- /dev/null +++ b/frontend/src/style/varibles.jsx @@ -0,0 +1,60 @@ +export const texts = { + h1: { + fontSize: "28px", + paddingTop: "6px", + fontFamily: "Helvetica55", + }, + h1Login: { + fontSize: "32px", + paddingTop: "6px", + fontFamily: "Helvetica85", + }, + h2: { + fontSize: "21px", + paddingTop: "6px", + fontFamily: "Helvetica55", + }, + p18: { + fontSize: "18px", + fontFamily: "Helvetica55", + }, + p16: { + fontSize: "16px", + fontFamily: "Helvetica55", + }, + p14: { + fontSize: "14px", + fontFamily: "Helvetica55", + }, + p14UnderLine: { + fontSize: "14px", + textDecoretion: "underline", + fontFamily: "Helvetica55", + }, +}; + +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", + placeholder:"#ffffff83" + }, + shadow:{ + dark:"2px 2px 4px 2px" + } +}; +