Revert "Layout/login"
Renato Di Giacomo
GitHub
parent
427083c5bd
commit
50eb625877
|
|
@ -47,6 +47,8 @@ const syncUnreadMessages = async (wbot: Session) => {
|
||||||
export const initWbot = async (whatsapp: Whatsapp, backupSessionRestore: boolean = false): Promise<Session> => {
|
export const initWbot = async (whatsapp: Whatsapp, backupSessionRestore: boolean = false): Promise<Session> => {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
try {
|
try {
|
||||||
|
|
||||||
|
|
||||||
const io = getIO();
|
const io = getIO();
|
||||||
const sessionName = whatsapp.name;
|
const sessionName = whatsapp.name;
|
||||||
let sessionCfg;
|
let sessionCfg;
|
||||||
|
|
@ -54,6 +56,8 @@ export const initWbot = async (whatsapp: Whatsapp, backupSessionRestore: boolean
|
||||||
if (whatsapp && whatsapp.session) {
|
if (whatsapp && whatsapp.session) {
|
||||||
sessionCfg = JSON.parse(whatsapp.session);
|
sessionCfg = JSON.parse(whatsapp.session);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
//NOVA OPÇÃO MD
|
//NOVA OPÇÃO MD
|
||||||
const wbot: Session = new Client({
|
const wbot: Session = new Client({
|
||||||
session: sessionCfg, authStrategy: new LocalAuth({ clientId: 'bd_' + whatsapp.id }),
|
session: sessionCfg, authStrategy: new LocalAuth({ clientId: 'bd_' + whatsapp.id }),
|
||||||
|
|
@ -153,7 +157,6 @@ export const initWbot = async (whatsapp: Whatsapp, backupSessionRestore: boolean
|
||||||
|
|
||||||
console.log(' whatsIndex: ', whatsIndex)
|
console.log(' whatsIndex: ', whatsIndex)
|
||||||
|
|
||||||
|
|
||||||
if (whatsIndex !== -1 || backupSessionRestore) {
|
if (whatsIndex !== -1 || backupSessionRestore) {
|
||||||
|
|
||||||
if (whatsIndex !== -1) {
|
if (whatsIndex !== -1) {
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
REACT_APP_BACKEND_URL = http://localhost:8080/
|
||||||
|
|
@ -35,7 +35,6 @@
|
||||||
"react-toastify": "^6.0.9",
|
"react-toastify": "^6.0.9",
|
||||||
"recharts": "^2.0.2",
|
"recharts": "^2.0.2",
|
||||||
"socket.io-client": "^3.0.5",
|
"socket.io-client": "^3.0.5",
|
||||||
"styled-components": "^5.3.5",
|
|
||||||
"use-sound": "^2.0.1",
|
"use-sound": "^2.0.1",
|
||||||
"yup": "^0.32.8"
|
"yup": "^0.32.8"
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -2,6 +2,10 @@
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<title>OmniHit</title>
|
<title>OmniHit</title>
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
|
||||||
|
/>
|
||||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/apple-touch-icon.png" />
|
<link rel="apple-touch-icon" href="%PUBLIC_URL%/apple-touch-icon.png" />
|
||||||
|
|
||||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||||
|
|
|
||||||
|
|
@ -1,15 +1,49 @@
|
||||||
import React from "react";
|
import React, { useState, useEffect } from "react";
|
||||||
import Routes from "./routes";
|
import Routes from "./routes";
|
||||||
import "react-toastify/dist/ReactToastify.css";
|
import "react-toastify/dist/ReactToastify.css";
|
||||||
|
|
||||||
|
import { createTheme, ThemeProvider } from "@material-ui/core/styles";
|
||||||
|
import { ptBR } from "@material-ui/core/locale";
|
||||||
|
|
||||||
const App = () => {
|
const App = () => {
|
||||||
|
const [locale, setLocale] = useState();
|
||||||
|
|
||||||
|
const theme = createTheme(
|
||||||
|
{
|
||||||
|
scrollbarStyles: {
|
||||||
|
"&::-webkit-scrollbar": {
|
||||||
|
width: "8px",
|
||||||
|
height: "8px",
|
||||||
|
},
|
||||||
|
"&::-webkit-scrollbar-thumb": {
|
||||||
|
boxShadow: "inset 0 0 6px rgba(0, 0, 0, 0.3)",
|
||||||
|
|
||||||
|
backgroundColor: "#e8e8e8",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
palette: {
|
||||||
|
//primary: { main: "#2576d2" },
|
||||||
|
primary: { main: "#ec5114" },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
locale
|
||||||
|
);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const i18nlocale = localStorage.getItem("i18nextLng");
|
||||||
|
const browserLocale =
|
||||||
|
i18nlocale.substring(0, 2) + i18nlocale.substring(3, 5);
|
||||||
|
|
||||||
|
if (browserLocale === "ptBR") {
|
||||||
|
setLocale(ptBR);
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<ThemeProvider theme={theme}>
|
||||||
<Routes />
|
<Routes />
|
||||||
</>
|
</ThemeProvider>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default App;
|
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.
|
|
@ -1,46 +0,0 @@
|
||||||
<svg viewBox="0 0 272 209" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M26 1H1V80H26V48H52V80H76V2H52V33H26V1Z" fill="#D9D9D9"/>
|
|
||||||
<path d="M119 2H94V80H119V2Z" fill="#D9D9D9"/>
|
|
||||||
<path d="M203 2H128V17H154V80H178V17H203V2Z" fill="#D9D9D9"/>
|
|
||||||
<path d="M194 73H188V74H190V80H192V74H194V73Z" fill="#D9D9D9"/>
|
|
||||||
<path d="M198 73H195V80H197V76H198V79H199V80H200V79H201V76H202V80H204V73H201V75H200V78H199V75H198V73Z" fill="#D9D9D9"/>
|
|
||||||
<path d="M119 89V112H26V152H246V112H154V89H271V176H1V89H119Z" fill="#D9D9D9"/>
|
|
||||||
<path d="M23 193H18V190H17V189H16V188H9V189H8V190H7V192H6V200H7V202H8V203H9V204H15V203H17V201H18V199H23V201H22V204H21V205H20V206H19V207H17V208H8V207H6V206H5V205H4V204H3V202H2V200H1V191H2V189H3V188H4V187H5V186H6V185H8V184H11V183H14V184H17V185H19V186H20V187H21V188H22V191H23V193Z" fill="#D9D9D9"/>
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M33 190H36V191H39V192H40V193H41V194H42V196H43V202H42V205H41V206H40V207H38V208H31V207H29V206H28V205H27V202H26V196H27V194H28V193H29V192H30V191H33V190ZM31 197H30V202H31V204H32V205H37V204H38V202H39V197H38V195H37V194H35V193H34V194H32V195H31V197Z" fill="#D9D9D9"/>
|
|
||||||
<path d="M47 191V208H52V195H53V194H57V195H58V208H62V197H63V195H64V194H68V195H69V208H73V193H72V192H71V191H68V190H66V191H64V192H63V193H61V192H60V191H58V190H56V191H53V192H52V193H51V191H47Z" fill="#D9D9D9"/>
|
|
||||||
<path d="M78 191V208H83V195H84V194H88V195H89V208H93V197H94V195H95V194H99V195H100V208H104V193H103V192H102V191H99V190H97V191H95V192H94V193H92V192H91V191H89V190H87V191H84V192H83V193H82V191H78Z" fill="#D9D9D9"/>
|
|
||||||
<path d="M112 191H108V204H109V206H110V207H111V208H117V207H118V206H120V208H124V191H120V202H119V204H118V205H114V204H113V202H112V191Z" fill="#D9D9D9"/>
|
|
||||||
<path d="M128 208V191H132V193H133V192H134V191H137V190H139V191H142V192H143V194H144V208H140V196H139V194H134V195H133V197H132V208H128Z" fill="#D9D9D9"/>
|
|
||||||
<path d="M152 191H148V208H152V191Z" fill="#D9D9D9"/>
|
|
||||||
<path d="M152 184H148V188H152V184Z" fill="#D9D9D9"/>
|
|
||||||
<path d="M173 196H168V194H162V195H161V198H160V201H161V204H162V205H167V204H168V203H169V202H173V203H172V205H171V206H170V207H168V208H161V207H159V206H158V204H157V202H156V197H157V194H158V193H159V192H160V191H164V190H166V191H169V192H171V193H172V195H173V196Z" fill="#D9D9D9"/>
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M176 196V194H177V192H179V191H182V190H186V191H189V192H190V193H191V207H192V208H187V206H186V207H185V208H178V207H177V206H176V205H175V202H176V200H177V199H180V198H186V197H187V194H186V193H181V194H180V196H176ZM187 200H181V201H180V205H182V206H184V205H186V204H187V200Z" fill="#D9D9D9"/>
|
|
||||||
<path d="M197 191H194V194H197V207H199V208H204V205H202V204H201V194H204V191H201V186H197V191Z" fill="#D9D9D9"/>
|
|
||||||
<path d="M212 191H207V208H212V191Z" fill="#D9D9D9"/>
|
|
||||||
<path d="M212 184H207V188H212V184Z" fill="#D9D9D9"/>
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M215 198H216V195H217V193H218V192H220V191H223V190H225V191H229V192H230V193H231V194H232V197H233V202H232V204H231V206H230V207H228V208H220V207H219V206H218V205H217V204H216V201H215V198ZM227 194H221V195H220V203H221V204H222V205H227V204H228V201H229V197H228V195H227V194Z" fill="#D9D9D9"/>
|
|
||||||
<path d="M237 208V191H241V193H242V192H243V191H245V190H248V191H250V192H251V193H252V208H248V195H247V194H242V195H241V208H237Z" fill="#D9D9D9"/>
|
|
||||||
<path d="M271 195V194H270V193H269V192H268V191H265V190H262V191H258V192H257V194H256V197H257V199H259V200H263V201H266V202H267V205H265V206H263V205H260V203H256V205H257V206H258V207H259V208H268V207H269V206H270V205H271V200H270V199H268V198H264V197H261V196H260V194H261V193H266V194H267V195H271Z" fill="#D9D9D9"/>
|
|
||||||
<path d="M26 1H1V80H26V48H52V80H76V2H52V33H26V1Z" stroke="white" stroke-width="0.1"/>
|
|
||||||
<path d="M119 2H94V80H119V2Z" stroke="white" stroke-width="0.1"/>
|
|
||||||
<path d="M203 2H128V17H154V80H178V17H203V2Z" stroke="white" stroke-width="0.1"/>
|
|
||||||
<path d="M194 73H188V74H190V80H192V74H194V73Z" stroke="white" stroke-width="0.1"/>
|
|
||||||
<path d="M198 73H195V80H197V76H198V79H199V80H200V79H201V76H202V80H204V73H201V75H200V78H199V75H198V73Z" stroke="white" stroke-width="0.1"/>
|
|
||||||
<path d="M119 89V112H26V152H246V112H154V89H271V176H1V89H119Z" stroke="white" stroke-width="0.1"/>
|
|
||||||
<path d="M23 193H18V190H17V189H16V188H9V189H8V190H7V192H6V200H7V202H8V203H9V204H15V203H17V201H18V199H23V201H22V204H21V205H20V206H19V207H17V208H8V207H6V206H5V205H4V204H3V202H2V200H1V191H2V189H3V188H4V187H5V186H6V185H8V184H11V183H14V184H17V185H19V186H20V187H21V188H22V191H23V193Z" stroke="white" stroke-width="0.1"/>
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M33 190H36V191H39V192H40V193H41V194H42V196H43V202H42V205H41V206H40V207H38V208H31V207H29V206H28V205H27V202H26V196H27V194H28V193H29V192H30V191H33V190ZM31 197H30V202H31V204H32V205H37V204H38V202H39V197H38V195H37V194H35V193H34V194H32V195H31V197Z" stroke="white" stroke-width="0.1"/>
|
|
||||||
<path d="M47 191V208H52V195H53V194H57V195H58V208H62V197H63V195H64V194H68V195H69V208H73V193H72V192H71V191H68V190H66V191H64V192H63V193H61V192H60V191H58V190H56V191H53V192H52V193H51V191H47Z" stroke="white" stroke-width="0.1"/>
|
|
||||||
<path d="M78 191V208H83V195H84V194H88V195H89V208H93V197H94V195H95V194H99V195H100V208H104V193H103V192H102V191H99V190H97V191H95V192H94V193H92V192H91V191H89V190H87V191H84V192H83V193H82V191H78Z" stroke="white" stroke-width="0.1"/>
|
|
||||||
<path d="M112 191H108V204H109V206H110V207H111V208H117V207H118V206H120V208H124V191H120V202H119V204H118V205H114V204H113V202H112V191Z" stroke="white" stroke-width="0.1"/>
|
|
||||||
<path d="M128 208V191H132V193H133V192H134V191H137V190H139V191H142V192H143V194H144V208H140V196H139V194H134V195H133V197H132V208H128Z" stroke="white" stroke-width="0.1"/>
|
|
||||||
<path d="M152 191H148V208H152V191Z" stroke="white" stroke-width="0.1"/>
|
|
||||||
<path d="M152 184H148V188H152V184Z" stroke="white" stroke-width="0.1"/>
|
|
||||||
<path d="M173 196H168V194H162V195H161V198H160V201H161V204H162V205H167V204H168V203H169V202H173V203H172V205H171V206H170V207H168V208H161V207H159V206H158V204H157V202H156V197H157V194H158V193H159V192H160V191H164V190H166V191H169V192H171V193H172V195H173V196Z" stroke="white" stroke-width="0.1"/>
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M176 196V194H177V192H179V191H182V190H186V191H189V192H190V193H191V207H192V208H187V206H186V207H185V208H178V207H177V206H176V205H175V202H176V200H177V199H180V198H186V197H187V194H186V193H181V194H180V196H176ZM187 200H181V201H180V205H182V206H184V205H186V204H187V200Z" stroke="white" stroke-width="0.1"/>
|
|
||||||
<path d="M197 191H194V194H197V207H199V208H204V205H202V204H201V194H204V191H201V186H197V191Z" stroke="white" stroke-width="0.1"/>
|
|
||||||
<path d="M212 191H207V208H212V191Z" stroke="white" stroke-width="0.1"/>
|
|
||||||
<path d="M212 184H207V188H212V184Z" stroke="white" stroke-width="0.1"/>
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M215 198H216V195H217V193H218V192H220V191H223V190H225V191H229V192H230V193H231V194H232V197H233V202H232V204H231V206H230V207H228V208H220V207H219V206H218V205H217V204H216V201H215V198ZM227 194H221V195H220V203H221V204H222V205H227V204H228V201H229V197H228V195H227V194Z" stroke="white" stroke-width="0.1"/>
|
|
||||||
<path d="M237 208V191H241V193H242V192H243V191H245V190H248V191H250V192H251V193H252V208H248V195H247V194H242V195H241V208H237Z" stroke="white" stroke-width="0.1"/>
|
|
||||||
<path d="M271 195V194H270V193H269V192H268V191H265V190H262V191H258V192H257V194H256V197H257V199H259V200H263V201H266V202H267V205H265V206H263V205H260V203H256V205H257V206H258V207H259V208H268V207H269V206H270V205H271V200H270V199H268V198H264V197H261V196H260V194H261V193H266V194H267V195H271Z" stroke="white" stroke-width="0.1"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 7.2 KiB |
|
|
@ -1,3 +0,0 @@
|
||||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M16.5 8.25V2.25H11.25V4.5H6.75V2.25H1.5V8.25H6.75V6H8.25V13.5H11.25V15.75H16.5V9.75H11.25V12H9.75V6H11.25V8.25H16.5ZM5.25 6.75H3V3.75H5.25V6.75ZM12.75 11.25H15V14.25H12.75V11.25ZM12.75 3.75H15V6.75H12.75V3.75Z" fill="current" />
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 344 B |
|
|
@ -1,5 +0,0 @@
|
||||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.625 9C14.625 9.255 14.6025 9.495 14.5725 9.735L16.155 10.9725C16.2975 11.085 16.335 11.2875 16.245 11.4525L14.745 14.0475C14.6775 14.1675 14.55 14.235 14.4225 14.235C14.3775 14.235 14.3325 14.2275 14.2875 14.2125L12.42 13.4625C12.03 13.755 11.61 14.01 11.1525 14.1975L10.8675 16.185C10.845 16.365 10.6875 16.5 10.5 16.5H7.5C7.3125 16.5 7.155 16.365 7.1325 16.185L6.8475 14.1975C6.39 14.01 5.97 13.7625 5.58 13.4625L3.7125 14.2125C3.675 14.2275 3.63 14.235 3.585 14.235C3.45 14.235 3.3225 14.1675 3.255 14.0475L1.755 11.4525C1.665 11.2875 1.7025 11.085 1.845 10.9725L3.4275 9.735C3.3975 9.495 3.375 9.2475 3.375 9C3.375 8.7525 3.3975 8.505 3.4275 8.265L1.845 7.0275C1.7025 6.915 1.6575 6.7125 1.755 6.5475L3.255 3.9525C3.3225 3.8325 3.45 3.765 3.5775 3.765C3.6225 3.765 3.6675 3.7725 3.7125 3.7875L5.58 4.5375C5.97 4.245 6.39 3.99 6.8475 3.8025L7.1325 1.815C7.155 1.635 7.3125 1.5 7.5 1.5H10.5C10.6875 1.5 10.845 1.635 10.8675 1.815L11.1525 3.8025C11.61 3.99 12.03 4.2375 12.42 4.5375L14.2875 3.7875C14.325 3.7725 14.37 3.765 14.415 3.765C14.55 3.765 14.6775 3.8325 14.745 3.9525L16.245 6.5475C16.335 6.7125 16.2975 6.915 16.155 7.0275L14.5725 8.265C14.6025 8.505 14.625 8.745 14.625 9ZM13.125 9C13.125 8.8425 13.1175 8.685 13.0875 8.4525L12.9825 7.605L13.65 7.08L14.4525 6.4425L13.9275 5.535L12.975 5.9175L12.18 6.24L11.4975 5.715C11.1975 5.49 10.8975 5.3175 10.575 5.1825L9.78 4.86L9.66 4.0125L9.5175 3H8.475L8.325 4.0125L8.205 4.86L7.41 5.1825C7.1025 5.31 6.795 5.49 6.4725 5.73L5.7975 6.24L5.0175 5.925L4.065 5.5425L3.54 6.45L4.35 7.08L5.0175 7.605L4.9125 8.4525C4.89 8.6775 4.875 8.85 4.875 9C4.875 9.15 4.89 9.3225 4.9125 9.555L5.0175 10.4025L4.35 10.9275L3.54 11.5575L4.065 12.465L5.0175 12.0825L5.8125 11.76L6.495 12.285C6.795 12.51 7.095 12.6825 7.4175 12.8175L8.2125 13.14L8.3325 13.9875L8.475 15H9.525L9.675 13.9875L9.795 13.14L10.59 12.8175C10.8975 12.69 11.205 12.51 11.5275 12.27L12.2025 11.76L12.9825 12.075L13.935 12.4575L14.46 11.55L13.65 10.92L12.9825 10.395L13.0875 9.5475C13.11 9.3225 13.125 9.1575 13.125 9Z" fill="current"/>
|
|
||||||
<path d="M9 10.5C8.175 10.5 7.5 9.825 7.5 9C7.5 8.175 8.175 7.5 9 7.5C9.825 7.5 10.5 8.175 10.5 9C10.5 9.825 9.825 10.5 9 10.5Z" fill="current"/>
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.0875 8.4525C13.1175 8.685 13.125 8.8425 13.125 9C13.125 9.1575 13.11 9.3225 13.0875 9.5475L12.9825 10.395L13.65 10.92L14.46 11.55L13.935 12.4575L12.9825 12.075L12.2025 11.76L11.5275 12.27C11.205 12.51 10.8975 12.69 10.59 12.8175L9.795 13.14L9.675 13.9875L9.525 15H8.475L8.3325 13.9875L8.2125 13.14L7.4175 12.8175C7.095 12.6825 6.795 12.51 6.495 12.285L5.8125 11.76L5.0175 12.0825L4.065 12.465L3.54 11.5575L4.35 10.9275L5.0175 10.4025L4.9125 9.555C4.89 9.3225 4.875 9.15 4.875 9C4.875 8.85 4.89 8.6775 4.9125 8.4525L5.0175 7.605L4.35 7.08L3.54 6.45L4.065 5.5425L5.0175 5.925L5.7975 6.24L6.4725 5.73C6.795 5.49 7.1025 5.31 7.41 5.1825L8.205 4.86L8.325 4.0125L8.475 3H9.5175L9.66 4.0125L9.78 4.86L10.575 5.1825C10.8975 5.3175 11.1975 5.49 11.4975 5.715L12.18 6.24L12.975 5.9175L13.9275 5.535L14.4525 6.4425L13.65 7.08L12.9825 7.605L13.0875 8.4525ZM6 9C6 7.3425 7.3425 6 9 6C10.6575 6 12 7.3425 12 9C12 10.6575 10.6575 12 9 12C7.3425 12 6 10.6575 6 9Z" fill="current"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 3.3 KiB |
|
|
@ -1,10 +0,0 @@
|
||||||
<svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<g clip-path="url(#clip0_3_608)">
|
|
||||||
<path d="M15 0H3V1.50146H15V0ZM3 18.0176H15V16.5161H3V18.0176ZM15 3.00293H3C2.175 3.00293 1.5 3.67859 1.5 4.50439V13.5132C1.5 14.339 2.175 15.0146 3 15.0146H15C15.825 15.0146 16.5 14.339 16.5 13.5132V4.50439C16.5 3.67859 15.825 3.00293 15 3.00293ZM9 5.06744C9.93 5.06744 10.6875 5.82568 10.6875 6.75659C10.6875 7.6875 9.93 8.44574 9 8.44574C8.07 8.44574 7.3125 7.6875 7.3125 6.75659C7.3125 5.82568 8.07 5.06744 9 5.06744ZM12.75 12.7625H5.25V11.6364C5.25 10.3826 7.7475 9.75952 9 9.75952C10.2525 9.75952 12.75 10.3826 12.75 11.6364V12.7625Z" fill="current" />
|
|
||||||
</g>
|
|
||||||
<defs>
|
|
||||||
<clipPath id="clip0_3_608">
|
|
||||||
<rect width="18" height="18.0176" fill="white" />
|
|
||||||
</clipPath>
|
|
||||||
</defs>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 857 B |
|
|
@ -1,3 +0,0 @@
|
||||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M14.25 3.75V5.25H11.25V3.75H14.25ZM6.75 3.75V8.25H3.75V3.75H6.75ZM14.25 9.75V14.25H11.25V9.75H14.25ZM6.75 12.75V14.25H3.75V12.75H6.75ZM15.75 2.25H9.75V6.75H15.75V2.25ZM8.25 2.25H2.25V9.75H8.25V2.25ZM15.75 8.25H9.75V15.75H15.75V8.25ZM8.25 11.25H2.25V15.75H8.25V11.25Z" fill="current"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 397 B |
|
|
@ -1,8 +0,0 @@
|
||||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<rect y="12.8572" width="3.21405" height="5.14286" fill="current"/>
|
|
||||||
<rect x="4.82104" y="9.42859" width="3.21405" height="8.57143" fill="current"/>
|
|
||||||
<rect x="8.83862" y="10.2858" width="3.21405" height="7.71429" fill="current"/>
|
|
||||||
<rect x="13.6597" y="6.85718" width="3.21405" height="11.1429" fill="current"/>
|
|
||||||
<path d="M1.52958 10.4316L6.2278 5.30322L9.99732 8.15878L14.9687 3.26353" stroke="current"/>
|
|
||||||
<path d="M16.3949 1.58979L15.7113 5.3475L12.9312 2.5939L16.3949 1.58979Z" fill="current"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 595 B |
|
|
@ -1,3 +0,0 @@
|
||||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M15 1.5H3C2.175 1.5 1.5075 2.175 1.5075 3L1.5 16.5L4.5 13.5H15C15.825 13.5 16.5 12.825 16.5 12V3C16.5 2.175 15.825 1.5 15 1.5ZM13.5 10.5H4.5V9H13.5V10.5ZM13.5 8.25H4.5V6.75H13.5V8.25ZM13.5 6H4.5V4.5H13.5V6Z" fill="current"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 337 B |
|
|
@ -1,3 +0,0 @@
|
||||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M9 16.5C9.825 16.5 10.5 15.825 10.5 15H7.5C7.5 15.825 8.1675 16.5 9 16.5ZM13.5 12V8.25C13.5 5.9475 12.27 4.02 10.125 3.51V3C10.125 2.3775 9.6225 1.875 9 1.875C8.3775 1.875 7.875 2.3775 7.875 3V3.51C5.7225 4.02 4.5 5.94 4.5 8.25V12L3 13.5V14.25H15V13.5L13.5 12Z" fill="white"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 389 B |
|
|
@ -1,6 +0,0 @@
|
||||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5024 9.84747C13.5299 10.545 14.2499 11.49 14.2499 12.75V15H17.2499V12.75C17.2499 11.115 14.5724 10.1475 12.5024 9.84747Z" fill="current" />
|
|
||||||
<path d="M6.75 9C8.40685 9 9.75 7.65685 9.75 6C9.75 4.34315 8.40685 3 6.75 3C5.09315 3 3.75 4.34315 3.75 6C3.75 7.65685 5.09315 9 6.75 9Z" fill="current" />
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.2499 9C12.9074 9 14.2499 7.6575 14.2499 6C14.2499 4.3425 12.9074 3 11.2499 3C10.8974 3 10.5674 3.075 10.2524 3.18C10.8749 3.9525 11.2499 4.935 11.2499 6C11.2499 7.065 10.8749 8.0475 10.2524 8.82C10.5674 8.925 10.8974 9 11.2499 9Z" fill="current" />
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.75 9.75C4.7475 9.75 0.75 10.755 0.75 12.75V15H12.75V12.75C12.75 10.755 8.7525 9.75 6.75 9.75Z" fill="current" />
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 935 B |
|
|
@ -1,3 +0,0 @@
|
||||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M17 9L2 2V8L13 9L2 10V16L17 9Z" fill="current" />
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 165 B |
|
|
@ -1,4 +0,0 @@
|
||||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M14.6257 4.41706C14.3603 4.15175 13.9303 4.15175 13.6648 4.41706C13.3995 4.68238 13.3995 5.11246 13.6648 5.37778C14.9115 6.62446 15.598 8.28202 15.598 10.0451C15.598 11.8081 14.9115 13.4656 13.6648 14.7122C12.3783 15.9988 10.6886 16.642 8.99843 16.6418C7.30826 16.6417 5.61773 15.9983 4.33101 14.7116C1.75803 12.1386 1.7583 7.95194 4.33146 5.37877C4.59678 5.11346 4.59678 4.68328 4.33146 4.41806C4.06615 4.15275 3.63606 4.15275 3.37066 4.41806C0.267772 7.52095 0.267501 12.5697 3.37021 15.6724C4.92206 17.2243 6.96015 18.0001 8.99852 18C11.0363 17.9999 13.0744 17.2243 14.6257 15.673C16.129 14.1698 16.9568 12.1712 16.9568 10.0452C16.9569 7.91915 16.1289 5.92036 14.6257 4.41706Z" fill="white"/>
|
|
||||||
<path d="M8.99772 8.80131C9.37301 8.80131 9.67709 8.49713 9.67709 8.12194V0.679365C9.67709 0.304174 9.37301 0 8.99772 0C8.62244 0 8.31836 0.304174 8.31836 0.679365V8.12194C8.31836 8.49722 8.62244 8.80131 8.99772 8.80131Z" fill="white"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.0 KiB |
|
|
@ -1,3 +0,0 @@
|
||||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M0 10H2V8H0V10ZM0 14H2V12H0V14ZM0 6H2V4H0V6ZM4 10H18V8H4V10ZM4 14H18V12H4V14ZM4 4V6H18V4H4Z" fill="current"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 222 B |
|
|
@ -1,3 +0,0 @@
|
||||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M3.99 7.71429L0 12.8571L3.99 18V14.1429H11V11.5714H3.99V7.71429ZM18 5.14286L14.01 0V3.85714H7V6.42857H14.01V10.2857L18 5.14286Z" fill="current"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 258 B |
|
|
@ -1,4 +0,0 @@
|
||||||
<svg width="18" height="22" viewBox="0 0 18 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M9.24655 1.56501L9 1.42527L8.75345 1.56501L4.83845 3.78403L4.83842 3.78398L4.83157 3.78801L0.952337 6.06899L0.70804 6.21263L0.705787 6.49603L0.670016 10.996H0.669953L0.670016 11.004L0.705787 15.504L0.70804 15.7874L0.952337 15.931L4.83157 18.212L4.83153 18.212L4.83845 18.216L8.75345 20.435L9 20.5747L9.24655 20.435L13.1616 18.216L13.1616 18.216L13.1684 18.212L17.0477 15.931L17.292 15.7874L17.2942 15.504L17.33 11.004H17.33L17.33 10.996L17.2942 6.49603L17.292 6.21263L17.0477 6.06899L13.1684 3.78801L13.1685 3.78795L13.1616 3.78403L9.24655 1.56501Z" stroke="white"/>
|
|
||||||
<path d="M9.75556 5L9.64444 13.5581H8.35556L8.24444 5H9.75556ZM9 17C8.72593 17 8.49074 16.8973 8.29444 16.6919C8.09815 16.4864 8 16.2403 8 15.9535C8 15.6667 8.09815 15.4205 8.29444 15.2151C8.49074 15.0097 8.72593 14.907 9 14.907C9.27407 14.907 9.50926 15.0097 9.70556 15.2151C9.90185 15.4205 10 15.6667 10 15.9535C10 16.1434 9.9537 16.3178 9.86111 16.4767C9.77222 16.6357 9.65185 16.7636 9.5 16.8605C9.35185 16.9535 9.18519 17 9 17Z" fill="white"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.1 KiB |
|
|
@ -1,4 +0,0 @@
|
||||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M13.319 10.343C13.284 10.3262 11.9717 9.68 11.7385 9.59607C11.6433 9.56189 11.5413 9.52852 11.4329 9.52852C11.2557 9.52852 11.1068 9.61682 10.9909 9.79028C10.8598 9.98512 10.463 10.449 10.3404 10.5875C10.3244 10.6058 10.3025 10.6277 10.2894 10.6277C10.2777 10.6277 10.0746 10.5441 10.0131 10.5173C8.60542 9.90587 7.53693 8.43543 7.39042 8.18746C7.3695 8.15181 7.36862 8.13562 7.36844 8.13562C7.37359 8.11674 7.42092 8.06929 7.44535 8.0448C7.51683 7.97409 7.59426 7.88087 7.66918 7.7907C7.70466 7.74798 7.74019 7.7052 7.77508 7.66487C7.88378 7.53841 7.93217 7.44022 7.98828 7.3265L8.01767 7.26741C8.15466 6.99525 8.03766 6.76557 7.99985 6.69141C7.96881 6.62935 7.41473 5.29209 7.35582 5.15159C7.21416 4.81257 7.02697 4.65472 6.76685 4.65472C6.74271 4.65472 6.76685 4.65472 6.66563 4.65899C6.54237 4.66419 5.87117 4.75256 5.57441 4.93963C5.2597 5.13804 4.72729 5.77049 4.72729 6.88275C4.72729 7.8838 5.36255 8.82897 5.6353 9.18845C5.64208 9.1975 5.65453 9.21591 5.67259 9.24233C6.71711 10.7678 8.01925 11.8983 9.33927 12.4256C10.6101 12.9332 11.2119 12.9919 11.554 12.9919C11.554 12.9919 11.554 12.9919 11.554 12.9919C11.6978 12.9919 11.8129 12.9806 11.9144 12.9706L11.9788 12.9645C12.4178 12.9255 13.3825 12.4256 13.602 11.8158C13.7749 11.3355 13.8205 10.8107 13.7054 10.6202C13.6267 10.4907 13.4909 10.4255 13.319 10.343Z" fill="current" />
|
|
||||||
<path d="M9.16001 0C4.28505 0 0.318971 3.93627 0.318971 8.77459C0.318971 10.3395 0.737763 11.8713 1.53111 13.2119L0.0126202 17.6912C-0.0156655 17.7747 0.00537342 17.867 0.0671462 17.9299C0.111737 17.9755 0.172224 18 0.233997 18C0.257666 18 0.28151 17.9964 0.30477 17.989L4.97542 16.5048C6.25354 17.1877 7.69809 17.5482 9.16007 17.5482C14.0346 17.5482 18.0002 13.6124 18.0002 8.77459C18.0002 3.93627 14.0346 0 9.16001 0ZM9.16001 15.7204C7.78435 15.7204 6.45195 15.3232 5.30661 14.5716C5.26809 14.5463 5.22339 14.5334 5.17839 14.5334C5.1546 14.5334 5.13076 14.537 5.10756 14.5443L2.76785 15.2881L3.52315 13.0598C3.54757 12.9876 3.53536 12.9081 3.49036 12.8466C2.61818 11.6549 2.15713 10.2469 2.15713 8.77459C2.15713 4.94416 5.2986 1.82782 9.15995 1.82782C13.0208 1.82782 16.162 4.94416 16.162 8.77459C16.162 12.6046 13.021 15.7204 9.16001 15.7204Z" fill="current" />
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 2.3 KiB |
|
|
@ -1,3 +0,0 @@
|
||||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="current" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M9 0C4.032 0 0 4.032 0 9C0 13.968 4.032 18 9 18C13.968 18 18 13.968 18 9C18 4.032 13.968 0 9 0ZM12.249 5.706C13.212 5.706 13.986 6.48 13.986 7.443C13.986 8.406 13.212 9.18 12.249 9.18C11.286 9.18 10.512 8.406 10.512 7.443C10.503 6.48 11.286 5.706 12.249 5.706ZM6.849 4.284C8.019 4.284 8.973 5.238 8.973 6.408C8.973 7.578 8.019 8.532 6.849 8.532C5.679 8.532 4.725 7.578 4.725 6.408C4.725 5.229 5.67 4.284 6.849 4.284ZM6.849 12.501V15.876C4.689 15.201 2.979 13.536 2.223 11.412C3.168 10.404 5.526 9.891 6.849 9.891C7.326 9.891 7.929 9.963 8.559 10.089C7.083 10.872 6.849 11.907 6.849 12.501ZM9 16.2C8.757 16.2 8.523 16.191 8.289 16.164V12.501C8.289 11.223 10.935 10.584 12.249 10.584C13.212 10.584 14.877 10.935 15.705 11.619C14.652 14.292 12.051 16.2 9 16.2Z" fill="current" />
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 895 B |
|
|
@ -1,4 +0,0 @@
|
||||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="current" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M14.6257 4.41706C14.3603 4.15175 13.9303 4.15175 13.6648 4.41706C13.3995 4.68238 13.3995 5.11246 13.6648 5.37778C14.9115 6.62446 15.598 8.28202 15.598 10.0451C15.598 11.8081 14.9115 13.4656 13.6648 14.7122C12.3783 15.9988 10.6886 16.642 8.99843 16.6418C7.30826 16.6417 5.61773 15.9983 4.33101 14.7116C1.75803 12.1386 1.7583 7.95194 4.33146 5.37877C4.59678 5.11346 4.59678 4.68328 4.33146 4.41806C4.06615 4.15275 3.63606 4.15275 3.37066 4.41806C0.267772 7.52095 0.267501 12.5697 3.37021 15.6724C4.92206 17.2243 6.96015 18.0001 8.99852 18C11.0363 17.9999 13.0744 17.2243 14.6257 15.673C16.129 14.1698 16.9568 12.1712 16.9568 10.0452C16.9569 7.91915 16.1289 5.92036 14.6257 4.41706Z" fill="current" />
|
|
||||||
<path d="M8.99772 8.80131C9.37301 8.80131 9.67709 8.49713 9.67709 8.12194V0.679365C9.67709 0.304174 9.37301 0 8.99772 0C8.62244 0 8.31836 0.304174 8.31836 0.679365V8.12194C8.31836 8.49722 8.62244 8.80131 8.99772 8.80131Z" fill="current" />
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.0 KiB |
|
|
@ -1,3 +0,0 @@
|
||||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M12.8334 3.49998C12.8334 2.85831 12.3084 2.33331 11.6667 2.33331H2.33341C1.69175 2.33331 1.16675 2.85831 1.16675 3.49998V10.5C1.16675 11.1416 1.69175 11.6666 2.33341 11.6666H11.6667C12.3084 11.6666 12.8334 11.1416 12.8334 10.5V3.49998ZM11.6667 3.49998L7.00008 6.41665L2.33341 3.49998H11.6667ZM11.6667 10.5H2.33341V4.66665L7.00008 7.58331L11.6667 4.66665V10.5Z" fill="white"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 488 B |
|
|
@ -1,3 +0,0 @@
|
||||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M12.8333 11.0834H9.33333V8.75002H7.77C7.105 10.1617 5.67 11.0834 4.08333 11.0834C1.83167 11.0834 0 9.25169 0 7.00002C0 4.74835 1.83167 2.91669 4.08333 2.91669C5.67 2.91669 7.09917 3.83835 7.77 5.25002H14V8.75002H12.8333V11.0834ZM10.5 9.91669H11.6667V7.58335H12.8333V6.41669H6.965L6.83083 6.02585C6.4225 4.86502 5.31417 4.08335 4.08333 4.08335C2.47333 4.08335 1.16667 5.39002 1.16667 7.00002C1.16667 8.61002 2.47333 9.91669 4.08333 9.91669C5.31417 9.91669 6.4225 9.13502 6.83083 7.97419L6.965 7.58335H10.5V9.91669ZM4.08333 8.75002C3.12083 8.75002 2.33333 7.96252 2.33333 7.00002C2.33333 6.03752 3.12083 5.25002 4.08333 5.25002C5.04583 5.25002 5.83333 6.03752 5.83333 7.00002C5.83333 7.96252 5.04583 8.75002 4.08333 8.75002ZM4.08333 6.41669C3.7625 6.41669 3.5 6.67919 3.5 7.00002C3.5 7.32085 3.7625 7.58335 4.08333 7.58335C4.40417 7.58335 4.66667 7.32085 4.66667 7.00002C4.66667 6.67919 4.40417 6.41669 4.08333 6.41669Z" fill="white"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.0 KiB |
|
|
@ -1,3 +0,0 @@
|
||||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M6.99992 3.49998C9.21075 3.49998 11.1824 4.74248 12.1449 6.70831C11.1824 8.67415 9.21075 9.91665 6.99992 9.91665C4.78909 9.91665 2.81742 8.67415 1.85492 6.70831C2.81742 4.74248 4.78909 3.49998 6.99992 3.49998ZM6.99992 2.33331C4.08325 2.33331 1.59242 4.14748 0.583252 6.70831C1.59242 9.26915 4.08325 11.0833 6.99992 11.0833C9.91658 11.0833 12.4074 9.26915 13.4166 6.70831C12.4074 4.14748 9.91658 2.33331 6.99992 2.33331ZM6.99992 5.24998C7.80492 5.24998 8.45825 5.90331 8.45825 6.70831C8.45825 7.51331 7.80492 8.16665 6.99992 8.16665C6.19492 8.16665 5.54158 7.51331 5.54158 6.70831C5.54158 5.90331 6.19492 5.24998 6.99992 5.24998ZM6.99992 4.08331C5.55325 4.08331 4.37492 5.26165 4.37492 6.70831C4.37492 8.15498 5.55325 9.33331 6.99992 9.33331C8.44659 9.33331 9.62492 8.15498 9.62492 6.70831C9.62492 5.26165 8.44659 4.08331 6.99992 4.08331Z" fill="white"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 966 B |
|
|
@ -1,9 +0,0 @@
|
||||||
<svg width="76" height="76" viewBox="0 0 76 76" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
||||||
<rect width="76" height="76" fill="url(#pattern0)"/>
|
|
||||||
<defs>
|
|
||||||
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
|
|
||||||
<use xlink:href="#image0_204_7817" transform="scale(0.00735294)"/>
|
|
||||||
</pattern>
|
|
||||||
<image id="image0_204_7817" width="136" height="136" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIgAAACICAYAAAA8uqNSAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABhtJREFUeNrsnY1V4zoQRm0OBaSDdQdrKthQwctWQKgAtoLNVhBeBQkVkK3AoQL8KsBUQDrwk2AEg5Dt2A4kJPee482fbI1GnzRj4bWjCAAAAAAAAAAAAAAAAAAAAAD2idj+U5Zlal4GrXaM42Wb8qYOe/y0pX25qWdVc8zEvCR9jtml7Z9EYewsdsIS46SsbEmHOoZle4YNx5z0PWaXtn8Sk13QxhGTKCAQQCCAQACBAAKBL8UxLojyDvsMW5ZfdainQCA7QBzHv9ru02EdyC7OnRJigBwEEAgAAgEEAggEdvY0t8Ofo7/h7gMSiOE37iPEAAIBQCCAQACBAAKB/TnN/dOyvF0HGePyAxFIHMeTNuXl/6MgEEIMIBBAIAAIBBAIIBBAIIBAAIEAAoE9g/+buyXKspxGr/dsy+X9X7MtzWZ/+xXHcY5ADpfr6PXmefb9ZfR8Qz77R81htCM31kMgW8LODmYWeVDvIxHFKHq+GwA5CLxjISLJd8WgYzXF3X5wXUXU/hqSouH3ZUc7+rKpdiy9Yy5UPxSMFwAA2OdkWs7Jx+bl7EDa3Ht9wVvD2GtckppE7W/M9lXZxPpCeij+4jQXEAggEEAggEAAgQACAQQCCAQAgUATfa4os4/RyL9gmzdh82dcP/MRdLt16SaePwu7T5eH9xJigBwEEAggEEAggEAAgQACAQQCgEAAgQACAQQCCAQQCCAQQCBwQPS55PCMq8oQSB1j3EeIAQQCgEAAgQACAQQCCAQQCCAQQCAACAQAAAC2Qex/UZZlEj0/WO9H9Pr8tNs4jheH7Ci59mX45LQ4nnxiva6upal3uW0n1N2K6s5sgwMWyItvPuj4Y7NlsqXqe8dkG+0+VobY57bqm5wV0fPjOZ2x9jUz28mBasT64yNHcBK9PoNGD8Slqn87ApGwosVhn8p0Jb85YVijU/N5pMONzCpORKumpzmpyxQLU7ZQdQxk+l7W7OvKvdQjtidN+7YYyUFbzPu5eZlX7PNig25XTRlLbso1Ph/XlDldw5eNbW/ysf79XT/a2UNNZbOK6e/dVGcfzRUIRffeFJmpEHXnlbX731SFMi/kZV65WaD+R1e3t+8wYE8ZKDcLtCWpCjHWzoBdztaBKjOtCNtTL4y8oSrESH88Bto+rkgXshofp9LO6pTC66TRmiNt6jky84xN/A5RFYeMeQw4brLGvvdeA296CCRky6xGIJm3n7Yvq+ioiWfvUL6/946VhQRi+8fzc+bZO1qzXVOv7x+lT2e+L/2GDtcQx6BCjcOAY/Wx04C4XIcmDc69DDgoU/Y4Bz/2EMhloH1ZSCBeW2/U8fVgS6StmVdm7NtWY68vkHvVoXoWcJ1/V9OuNNCuqtnyKWHuutSun/h47WKpxLY8UMbFZvfbX72/7Fs0xOIrFx/V17fy20olcX3OtBbqeE35jB5I+knc9g7Up7LZWG4/n9s2i+PtwJn2TGafbFV+z53tAb+/+K4iP1yq496LwL6Z7V+b/7izmFw1OPWdI4rO5OPcdaraV7PyGhI1ZOGraEdoEmnNfrl3jELPFuZlFvBF3yWDh4bP6/JTBDtyJyKy2VlucRQY0ReB9Y4L9f6/mpGkhbGr93Hf+FqOFxJG3nrGVInixAgolhmlL98bPreJBteyfHEiM6AbtKMjFRr0VHMn0+FYYudIjfa5lF8pQaVq1S/R0/8W0TPTmeQVl9HmHoisV5ancny3XGAFk8rMMlAroXlgwAXDV00u6PpppPKXseqjtivemWxTa5+Eo3lV4nnXcG/3UUWiVdacRmU6KQokeKGELKs5cxhWnPr5yWfSdKP6uhVS3+4KW2Y1h/eTSucX/5RyXOXPiiQ1DZzi1p7me+3yfXzjJapvzsSOVexcmS9sYmVH2ZmXQ1hV/vFi7dyUX8mISdWoXchC28oLNbk3upeBkb70yoZWL1cVq4u5n08Y+85lih+o/MmGyH/WWCHNm2wxdZybOh48fxWS4F2pGD9Tsb2QpPaHDnniz+8yEyTKL2/aavtA+um3mjVCfVTVLt/H5+KTC9WGl36MAAAAAAAAAAAAAAAAAAAAAGCv+F+AAQAt3NKZGb10BQAAAABJRU5ErkJggg=="/>
|
|
||||||
</defs>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
|
@ -1,12 +0,0 @@
|
||||||
import React from "react";
|
|
||||||
import BtnBaseStyled from "./Btn.styled";
|
|
||||||
|
|
||||||
const BtnComponent = ({ text, bgcolor, fontcolor,...props }) => {
|
|
||||||
return (
|
|
||||||
<BtnBaseStyled bgcolor={bgcolor} fontcolor={fontcolor} {...props}>
|
|
||||||
{text}
|
|
||||||
</BtnBaseStyled>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default BtnComponent;
|
|
||||||
|
|
@ -1,24 +0,0 @@
|
||||||
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;
|
|
||||||
|
|
||||||
|
|
@ -1,9 +0,0 @@
|
||||||
import React from "react";
|
|
||||||
import ContainerLoginStyled from "./ContainerLogin.style";
|
|
||||||
|
|
||||||
const ContainerLogin = ({ children }) => {
|
|
||||||
return <ContainerLoginStyled>{children}</ContainerLoginStyled>;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ContainerLogin;
|
|
||||||
|
|
||||||
|
|
@ -1,9 +0,0 @@
|
||||||
import styled from "styled-components";
|
|
||||||
const ContainerLoginStyled = styled.div`
|
|
||||||
width: 100%;
|
|
||||||
height: 100vh;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
`;
|
|
||||||
export default ContainerLoginStyled
|
|
||||||
|
|
@ -1,16 +0,0 @@
|
||||||
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;
|
|
||||||
|
|
||||||
|
|
@ -1,10 +0,0 @@
|
||||||
import React from "react";
|
|
||||||
import FormComponentStyled from "./FormComponent.style";
|
|
||||||
|
|
||||||
|
|
||||||
const FormComponent = ({ children, ...props }) => {
|
|
||||||
return <FormComponentStyled {...props}>{children}</FormComponentStyled>;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default FormComponent;
|
|
||||||
|
|
||||||
|
|
@ -1,10 +0,0 @@
|
||||||
import styled from "styled-components";
|
|
||||||
|
|
||||||
const FormComponentStyled = styled.form`
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-start;
|
|
||||||
`;
|
|
||||||
|
|
||||||
export default FormComponentStyled;
|
|
||||||
|
|
@ -1,15 +0,0 @@
|
||||||
import React from "react";
|
|
||||||
import LabelComponent from "../Label/LabelComponent";
|
|
||||||
import { InputComponentStyled, InputContainerStyled } from "./InputComponent.style";
|
|
||||||
|
|
||||||
const InputComponent = ({ type, id, label, ...props }) => {
|
|
||||||
return (
|
|
||||||
<InputContainerStyled>
|
|
||||||
<LabelComponent forhtml={id} label={label} />
|
|
||||||
<InputComponentStyled type={type} id={id} {...props} />
|
|
||||||
</InputContainerStyled>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default InputComponent;
|
|
||||||
|
|
||||||
|
|
@ -1,28 +0,0 @@
|
||||||
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};
|
|
||||||
|
|
||||||
|
|
@ -1,11 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
import LabelComponentStyled from "./LabelComponent.style"
|
|
||||||
|
|
||||||
|
|
||||||
const LabelComponent = ({label,forhtml}) => {
|
|
||||||
return (
|
|
||||||
<LabelComponentStyled forhtml={forhtml}>{label}</LabelComponentStyled>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default LabelComponent
|
|
||||||
|
|
@ -1,14 +0,0 @@
|
||||||
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;
|
|
||||||
|
|
||||||
|
|
@ -1,22 +0,0 @@
|
||||||
import React from "react";
|
|
||||||
import PageTitle from "../../PageTitle/PageTitle";
|
|
||||||
|
|
||||||
|
|
||||||
import MainContainerStyled, {
|
|
||||||
TitleContainerStyled,
|
|
||||||
ContentContainerStyled,
|
|
||||||
} from "./MainContainer.style";
|
|
||||||
|
|
||||||
const MainContainer = ({ children }) => {
|
|
||||||
return (
|
|
||||||
<MainContainerStyled>
|
|
||||||
<TitleContainerStyled>
|
|
||||||
<PageTitle />
|
|
||||||
</TitleContainerStyled>
|
|
||||||
<ContentContainerStyled>{children}</ContentContainerStyled>
|
|
||||||
</MainContainerStyled>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default MainContainer;
|
|
||||||
|
|
||||||
|
|
@ -1,26 +0,0 @@
|
||||||
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 };
|
|
||||||
|
|
||||||
|
|
@ -1,39 +0,0 @@
|
||||||
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 (
|
|
||||||
<ModalOverlayStyled modal={modal} onClick={handleModal}>
|
|
||||||
<ConfirmationModalStyled>
|
|
||||||
<h1>{title}</h1>
|
|
||||||
<p>{children}</p>
|
|
||||||
<ModalConfirmationBtns>
|
|
||||||
<BtnComponent
|
|
||||||
text="Cancelar"
|
|
||||||
bgcolor={color.pricinpal.blanco}
|
|
||||||
fontcolor={color.pricinpal.grisOscuro}
|
|
||||||
onClick={handleModal}
|
|
||||||
/>
|
|
||||||
<BtnComponent
|
|
||||||
text="Sim"
|
|
||||||
bgcolor={color.status.yes}
|
|
||||||
fontcolor={color.pricinpal.blanco}
|
|
||||||
onClick={handleLogout}
|
|
||||||
/>
|
|
||||||
</ModalConfirmationBtns>
|
|
||||||
</ConfirmationModalStyled>
|
|
||||||
</ModalOverlayStyled>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ConfirmationModal;
|
|
||||||
|
|
||||||
|
|
@ -1,45 +0,0 @@
|
||||||
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 };
|
|
||||||
|
|
||||||
|
|
@ -1,11 +0,0 @@
|
||||||
//Choice Icon by name in list
|
|
||||||
import React from "react";
|
|
||||||
|
|
||||||
|
|
||||||
const Icons = ({ icon }) => {
|
|
||||||
console.log(icon);
|
|
||||||
return null;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Icons;
|
|
||||||
|
|
||||||
|
|
@ -1,9 +0,0 @@
|
||||||
import React from "react";
|
|
||||||
|
|
||||||
import LoadingStyled from "./Loading.style"
|
|
||||||
|
|
||||||
const Loading = () => {
|
|
||||||
return <LoadingStyled/>;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Loading;
|
|
||||||
|
|
@ -1,55 +0,0 @@
|
||||||
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;
|
|
||||||
|
|
||||||
|
|
@ -1,16 +0,0 @@
|
||||||
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;
|
|
||||||
|
|
@ -1,17 +0,0 @@
|
||||||
import React from "react";
|
|
||||||
|
|
||||||
import AvatarLoginStyle from "./AvatarLogin.style";
|
|
||||||
import AvatarBlock from "./AvatarBlock.style";
|
|
||||||
import H1Title from "./H1Title.style";
|
|
||||||
|
|
||||||
const AvatarLogin = () => {
|
|
||||||
return (
|
|
||||||
<AvatarLoginStyle>
|
|
||||||
<AvatarBlock />
|
|
||||||
<H1Title>OmniHit</H1Title>
|
|
||||||
</AvatarLoginStyle>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default AvatarLogin;
|
|
||||||
|
|
||||||
|
|
@ -1,10 +0,0 @@
|
||||||
import styled from "styled-components";
|
|
||||||
|
|
||||||
const AvatarLoginStyle = styled.div`
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
gap: 16px;
|
|
||||||
`;
|
|
||||||
|
|
||||||
export default AvatarLoginStyle;
|
|
||||||
|
|
@ -1,8 +0,0 @@
|
||||||
import styled from "styled-components";
|
|
||||||
|
|
||||||
const H1Title = styled.h1`
|
|
||||||
font-size: 32px;
|
|
||||||
font-family: "Helvetica85";
|
|
||||||
text-transform: uppercase;
|
|
||||||
`;
|
|
||||||
export default H1Title
|
|
||||||
|
|
@ -1,17 +0,0 @@
|
||||||
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 (
|
|
||||||
<CompanyStyled>
|
|
||||||
<Hit46mm />
|
|
||||||
<p>Copyright Ⓒ 2022 HIT Communications. Todos os Direitos Reservados</p>
|
|
||||||
</CompanyStyled>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Company;
|
|
||||||
|
|
||||||
|
|
@ -1,19 +0,0 @@
|
||||||
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;
|
|
||||||
|
|
||||||
|
|
@ -1,9 +0,0 @@
|
||||||
import React from "react";
|
|
||||||
import BtnSubmitStyled from "./BtnSubmit.style";
|
|
||||||
|
|
||||||
const BtnSubmit = ({ submit }) => {
|
|
||||||
return <BtnSubmitStyled type={submit}>Login</BtnSubmitStyled>;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default BtnSubmit;
|
|
||||||
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
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;
|
|
||||||
|
|
||||||
|
|
@ -1,19 +0,0 @@
|
||||||
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;
|
|
||||||
|
|
@ -1,31 +0,0 @@
|
||||||
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 (
|
|
||||||
<InputBlockStyled>
|
|
||||||
<EmailIcon />
|
|
||||||
<InputComponentStyled type={type} name={name} placeholder={placeholder} {...props} />
|
|
||||||
</InputBlockStyled>
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
return (
|
|
||||||
<InputBlockStyled>
|
|
||||||
<KeyIcon />
|
|
||||||
<InputComponentStyled type={password ? "password" : "text"} name={name} {...props} />
|
|
||||||
<VisibilityIcon onClick={() => setPassword(!password)} />
|
|
||||||
</InputBlockStyled>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
export default InputComponent;
|
|
||||||
|
|
||||||
|
|
@ -1,12 +0,0 @@
|
||||||
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;
|
|
||||||
|
|
||||||
|
|
@ -1,9 +0,0 @@
|
||||||
import styled from "styled-components";
|
|
||||||
|
|
||||||
const LoginBlockStyled = styled.div`
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
`;
|
|
||||||
export default LoginBlockStyled;
|
|
||||||
|
|
||||||
|
|
@ -1,41 +0,0 @@
|
||||||
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 (
|
|
||||||
<LoginBlockStyled>
|
|
||||||
<AvatarLogin />
|
|
||||||
<LoginFormStyled noValidate onSubmit={handlSubmit}>
|
|
||||||
<InputComponent
|
|
||||||
type="text"
|
|
||||||
name="email"
|
|
||||||
placeholder="Digite o e-email de acesso"
|
|
||||||
icon="email"
|
|
||||||
value={user}
|
|
||||||
onChange={handleChangeInput}
|
|
||||||
requered
|
|
||||||
/>
|
|
||||||
<InputComponent
|
|
||||||
type="password"
|
|
||||||
name="password"
|
|
||||||
placeholder="Digite o e-email de acesso"
|
|
||||||
icon="key"
|
|
||||||
value={password}
|
|
||||||
onChange={handleChangeInput}
|
|
||||||
requered
|
|
||||||
/>
|
|
||||||
{/*! Esqueceu a senha é relevante? */}
|
|
||||||
<BtnSubmit type="submit" />
|
|
||||||
</LoginFormStyled>
|
|
||||||
</LoginBlockStyled>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default LoginForm;
|
|
||||||
|
|
||||||
|
|
@ -1,8 +0,0 @@
|
||||||
import styled from "styled-components";
|
|
||||||
|
|
||||||
const LoginFormStyled = styled.form`
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
margin-top: 16px;
|
|
||||||
`;
|
|
||||||
export default LoginFormStyled;
|
|
||||||
|
|
@ -1,15 +0,0 @@
|
||||||
import React from "react";
|
|
||||||
import { ReactComponent as LogoHit } from "../../assets/icons/Logohit.svg";
|
|
||||||
import MenuBottomStyled from "./MenuBottom.style";
|
|
||||||
|
|
||||||
const MenuBottom = ({ hover }) => {
|
|
||||||
return (
|
|
||||||
<MenuBottomStyled hover={hover}>
|
|
||||||
<LogoHit />
|
|
||||||
<p>Copyright © 2022 HIT Communications. Todos os direitos reservados.</p>
|
|
||||||
</MenuBottomStyled>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default MenuBottom;
|
|
||||||
|
|
||||||
|
|
@ -1,31 +0,0 @@
|
||||||
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;
|
|
||||||
|
|
||||||
|
|
@ -1,83 +0,0 @@
|
||||||
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 (
|
|
||||||
<MenuStyled onMouseEnter={HoverMenu} onMouseLeave={HoverMenu} hover={hover}>
|
|
||||||
<VideoComponent width={"100%"} zIndex={"-1"} position={"absolute"} />
|
|
||||||
<MenuTop hover={hover}/>
|
|
||||||
<MenuListStyled>
|
|
||||||
<MenuItem icon={<Tickets />} text="Tickets" to="/tickets" hover={hover} />
|
|
||||||
<MenuItem icon={<Contact />} text="Contatos" to="/contacts" hover={hover} />
|
|
||||||
<MenuItem icon={<Reminder />} text="Lembretes" to="/schedulesReminder" hover={hover} />
|
|
||||||
<MenuItem icon={<FastAanswer />} text="Respostas" to="" hover={hover} />
|
|
||||||
<Divider />
|
|
||||||
<MenuItem icon={<Users />} text="Usuários" to="/users" hover={hover} />
|
|
||||||
<MenuItem icon={<Rows />} text="Filas" to="/Queues" hover={hover} />
|
|
||||||
<MenuItem icon={<Conetions />} text="Conexões" to="/connections" hover={hover} />
|
|
||||||
<MenuItem icon={<Dashboard />} text="Dashboard" to="/" hover={hover} />
|
|
||||||
<MenuItem icon={<FastResumes />} text="Relatórios" to="report" hover={hover} />
|
|
||||||
<MenuItem icon={<Super />} text="Supervisão" to="" hover={hover} />
|
|
||||||
<Divider />
|
|
||||||
<MenuItem icon={<Configuration />} text="Configurações" to="/Settings" hover={hover} />
|
|
||||||
</MenuListStyled>
|
|
||||||
<MenuBottom hover={hover} />
|
|
||||||
</MenuStyled>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default MenuComponent;
|
|
||||||
|
|
||||||
|
|
@ -1,79 +0,0 @@
|
||||||
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 };
|
|
||||||
|
|
||||||
|
|
@ -1,22 +0,0 @@
|
||||||
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) => <RouterLink to={to} ref={ref} {...itemProps} />),
|
|
||||||
[to]
|
|
||||||
);
|
|
||||||
return (
|
|
||||||
<MenuListItemStyled hover={hover}>
|
|
||||||
<RenderLink>
|
|
||||||
{icon ? icon : ""}
|
|
||||||
<p>{text ? text : ""}</p>
|
|
||||||
</RenderLink>
|
|
||||||
</MenuListItemStyled>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default MenuItem;
|
|
||||||
|
|
||||||
|
|
@ -1,18 +0,0 @@
|
||||||
import React from "react";
|
|
||||||
import img from "../../assets/images/Logo.png";
|
|
||||||
|
|
||||||
import { MenuTopStyled, MenuTopFrameStyled, MenuTitle } from "./MenuTop.style";
|
|
||||||
|
|
||||||
const MenuTop = ({hover}) => {
|
|
||||||
return (
|
|
||||||
<MenuTopStyled>
|
|
||||||
<MenuTopFrameStyled>
|
|
||||||
<img src={img} alt="" style={{ width: "100%" }} />
|
|
||||||
</MenuTopFrameStyled>
|
|
||||||
<MenuTitle hover={hover}>OmniHit</MenuTitle>
|
|
||||||
</MenuTopStyled>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default MenuTop;
|
|
||||||
|
|
||||||
|
|
@ -1,28 +0,0 @@
|
||||||
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 };
|
|
||||||
|
|
||||||
|
|
@ -1,25 +0,0 @@
|
||||||
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 (
|
|
||||||
<PageTitleStyled>
|
|
||||||
<h1>PageTitle</h1>
|
|
||||||
<UserBtn user={user} img={logo} modal={modal} modalSet={handleModal} />
|
|
||||||
</PageTitleStyled>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default PageTitle;
|
|
||||||
|
|
||||||
|
|
@ -1,68 +0,0 @@
|
||||||
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,
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
@ -1,41 +0,0 @@
|
||||||
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 (
|
|
||||||
<>
|
|
||||||
<UserBtnStyled onClick={modalSet}>
|
|
||||||
<img src={img} alt={user ? user.name : null} width="24px" />
|
|
||||||
Bem Vindo, {user ? user.name : null}
|
|
||||||
</UserBtnStyled>
|
|
||||||
<UserModalStyled modal={modal}>
|
|
||||||
<UserModalListStyled>
|
|
||||||
<UserItem title="Perfil" icon={<Perfil />} />
|
|
||||||
<UserItem title="Sair" icon={<Signoff />} onClick={handleModal} />
|
|
||||||
</UserModalListStyled>
|
|
||||||
</UserModalStyled>
|
|
||||||
<UserModal />
|
|
||||||
<ConfirmationModal title="Sair?" modal={modalConfirm} click={{ handleModal, handleLogout }}>
|
|
||||||
Deseja Sair do sistema?
|
|
||||||
</ConfirmationModal>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default UserBtn;
|
|
||||||
|
|
||||||
|
|
@ -1,14 +0,0 @@
|
||||||
import React from "react";
|
|
||||||
import { UserModalItemStyled } from "../PageTitle.style";
|
|
||||||
|
|
||||||
const UserItem = ({ icon, title, onClick }) => {
|
|
||||||
return (
|
|
||||||
<UserModalItemStyled onClick={onClick}>
|
|
||||||
{icon}
|
|
||||||
{title}
|
|
||||||
</UserModalItemStyled>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default UserItem;
|
|
||||||
|
|
||||||
|
|
@ -1,43 +0,0 @@
|
||||||
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 (
|
|
||||||
<ModalOverlayStyled>
|
|
||||||
<UserModalStyled>
|
|
||||||
<div style={style}>
|
|
||||||
<h1>Imagem</h1>
|
|
||||||
<p>Desc</p>
|
|
||||||
</div>
|
|
||||||
<FormComponent method="get">
|
|
||||||
<InputComponent id="nome" label="Nome" type="text" />
|
|
||||||
<InputComponent id="email" label="E-mail" type="email" />
|
|
||||||
<InputComponent id="password" label="Senha" type="password" />
|
|
||||||
<UserBtns>
|
|
||||||
<BtnComponent text="Cancelar" />
|
|
||||||
<BtnComponent text="Salvar" />
|
|
||||||
</UserBtns>
|
|
||||||
</FormComponent>
|
|
||||||
</UserModalStyled>
|
|
||||||
</ModalOverlayStyled>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default UserModal;
|
|
||||||
|
|
||||||
|
|
@ -1,34 +0,0 @@
|
||||||
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 };
|
|
||||||
|
|
||||||
|
|
@ -1,15 +0,0 @@
|
||||||
import React from "react";
|
|
||||||
|
|
||||||
import StyleVideo from "./VideoComponent.style";
|
|
||||||
import bgvideo from "../../assets/videos/video.mp4";
|
|
||||||
|
|
||||||
const VideoComponent = ({ width, zIndex,position, ...props }) => {
|
|
||||||
return (
|
|
||||||
<StyleVideo {...props} width={width} zIndex={zIndex} position={position} id="bglogin">
|
|
||||||
<source src={bgvideo} type="video/mp4" />
|
|
||||||
</StyleVideo>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default VideoComponent;
|
|
||||||
|
|
||||||
|
|
@ -1,17 +0,0 @@
|
||||||
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;
|
|
||||||
|
|
||||||
|
|
@ -6,6 +6,9 @@ const AuthContext = createContext();
|
||||||
|
|
||||||
const AuthProvider = ({ children }) => {
|
const AuthProvider = ({ children }) => {
|
||||||
const { loading, user, isAuth, handleLogin, handleLogout } = useAuth();
|
const { loading, user, isAuth, handleLogin, handleLogout } = useAuth();
|
||||||
|
|
||||||
|
//{console.log('authContext teste: ', user)}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<AuthContext.Provider
|
<AuthContext.Provider
|
||||||
value={{ loading, user, isAuth, handleLogin, handleLogout }}
|
value={{ loading, user, isAuth, handleLogin, handleLogout }}
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,13 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import ReactDOM from "react-dom";
|
import ReactDOM from "react-dom";
|
||||||
|
import CssBaseline from "@material-ui/core/CssBaseline";
|
||||||
|
|
||||||
import GlobalStyled from "./style/GlobalStyle";
|
|
||||||
import App from "./App";
|
import App from "./App";
|
||||||
|
|
||||||
ReactDOM.render(
|
ReactDOM.render(
|
||||||
<>
|
<CssBaseline>
|
||||||
<GlobalStyled />
|
|
||||||
<App />
|
<App />
|
||||||
</>,
|
</CssBaseline>,
|
||||||
document.getElementById("root")
|
document.getElementById("root")
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
@ -21,4 +20,3 @@ ReactDOM.render(
|
||||||
|
|
||||||
// document.getElementById("root")
|
// document.getElementById("root")
|
||||||
// );
|
// );
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,145 +0,0 @@
|
||||||
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) => <RouterLink to={to} ref={ref} {...itemProps} />),
|
|
||||||
[to]
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<li>
|
|
||||||
<ListItem button component={renderLink} className={className}>
|
|
||||||
{icon ? <ListItemIcon>{icon}</ListItemIcon> : null}
|
|
||||||
<ListItemText primary={primary} />
|
|
||||||
</ListItem>
|
|
||||||
</li>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
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 (
|
|
||||||
<div onClick={drawerClose}>
|
|
||||||
<ListItemLink
|
|
||||||
to="/tickets"
|
|
||||||
primary={i18n.t("mainDrawer.listItems.tickets")}
|
|
||||||
icon={<WhatsAppIcon />}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<ListItemLink
|
|
||||||
to="/contacts"
|
|
||||||
primary={i18n.t("mainDrawer.listItems.contacts")}
|
|
||||||
icon={<ContactPhoneOutlinedIcon />}
|
|
||||||
/>
|
|
||||||
<ListItemLink to="/schedulesReminder" primary="Lembretes" icon={<SendOutlined />} />
|
|
||||||
<ListItemLink
|
|
||||||
to="/quickAnswers"
|
|
||||||
primary={i18n.t("mainDrawer.listItems.quickAnswers")}
|
|
||||||
icon={<QuestionAnswerOutlinedIcon />}
|
|
||||||
/>
|
|
||||||
<Can
|
|
||||||
role={user.profile}
|
|
||||||
perform="drawer-admin-items:view"
|
|
||||||
yes={() => (
|
|
||||||
<>
|
|
||||||
<Divider />
|
|
||||||
<ListSubheader inset>{i18n.t("mainDrawer.listItems.administration")}</ListSubheader>
|
|
||||||
<ListItemLink
|
|
||||||
to="/users"
|
|
||||||
primary={i18n.t("mainDrawer.listItems.users")}
|
|
||||||
icon={<PeopleAltOutlinedIcon />}
|
|
||||||
/>
|
|
||||||
<ListItemLink
|
|
||||||
to="/queues"
|
|
||||||
primary={i18n.t("mainDrawer.listItems.queues")}
|
|
||||||
icon={<AccountTreeOutlinedIcon />}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<ListItemLink
|
|
||||||
to="/connections"
|
|
||||||
primary={i18n.t("mainDrawer.listItems.connections")}
|
|
||||||
icon={
|
|
||||||
<Badge badgeContent={connectionWarning ? "!" : 0} color="error">
|
|
||||||
<SyncAltIcon />
|
|
||||||
</Badge>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<ListItemLink to="/" primary="Dashboard" icon={<DashboardOutlinedIcon />} />
|
|
||||||
|
|
||||||
<ListItemLink to="/report" primary="Relatório" icon={<ReportOutlinedIcon />} />
|
|
||||||
|
|
||||||
<Can
|
|
||||||
role={user.profile}
|
|
||||||
perform="settings-view:show"
|
|
||||||
yes={() => (
|
|
||||||
<ListItemLink
|
|
||||||
to="/settings"
|
|
||||||
primary={i18n.t("mainDrawer.listItems.settings")}
|
|
||||||
icon={<SettingsOutlinedIcon />}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default MainListItems;
|
|
||||||
|
|
@ -1,6 +1,28 @@
|
||||||
import React, { useContext, useEffect, useState } from "react";
|
import React, { useContext, useEffect, useState } from "react";
|
||||||
import { Link as RouterLink } from "react-router-dom";
|
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 { i18n } from "../translate/i18n";
|
||||||
import { WhatsAppsContext } from "../context/WhatsApp/WhatsAppsContext";
|
import { WhatsAppsContext } from "../context/WhatsApp/WhatsAppsContext";
|
||||||
import { AuthContext } from "../context/Auth/AuthContext";
|
import { AuthContext } from "../context/Auth/AuthContext";
|
||||||
|
|
@ -10,14 +32,25 @@ function ListItemLink(props) {
|
||||||
const { icon, primary, to, className } = props;
|
const { icon, primary, to, className } = props;
|
||||||
|
|
||||||
const renderLink = React.useMemo(
|
const renderLink = React.useMemo(
|
||||||
() => React.forwardRef((itemProps, ref) => <RouterLink to={to} ref={ref} {...itemProps} />),
|
() =>
|
||||||
|
React.forwardRef((itemProps, ref) => (
|
||||||
|
<RouterLink to={to} ref={ref} {...itemProps} />
|
||||||
|
)),
|
||||||
[to]
|
[to]
|
||||||
);
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<li>
|
||||||
|
<ListItem button component={renderLink} className={className}>
|
||||||
|
{icon ? <ListItemIcon>{icon}</ListItemIcon> : null}
|
||||||
|
<ListItemText primary={primary} />
|
||||||
|
</ListItem>
|
||||||
|
</li>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
const MainListItems = (props) => {
|
const MainListItems = (props) => {
|
||||||
|
const { drawerClose } = props;
|
||||||
const { whatsApps } = useContext(WhatsAppsContext);
|
const { whatsApps } = useContext(WhatsAppsContext);
|
||||||
const { user } = useContext(AuthContext);
|
const { user } = useContext(AuthContext);
|
||||||
const [connectionWarning, setConnectionWarning] = useState(false);
|
const [connectionWarning, setConnectionWarning] = useState(false);
|
||||||
|
|
@ -45,9 +78,90 @@ const MainListItems = (props) => {
|
||||||
}, [whatsApps]);
|
}, [whatsApps]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ul>
|
<div onClick={drawerClose}>
|
||||||
<li></li>
|
|
||||||
</ul>
|
|
||||||
|
<ListItemLink
|
||||||
|
to="/tickets"
|
||||||
|
primary={i18n.t("mainDrawer.listItems.tickets")}
|
||||||
|
icon={<WhatsAppIcon />}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<ListItemLink
|
||||||
|
to="/contacts"
|
||||||
|
primary={i18n.t("mainDrawer.listItems.contacts")}
|
||||||
|
icon={<ContactPhoneOutlinedIcon />}
|
||||||
|
/>
|
||||||
|
<ListItemLink
|
||||||
|
to="/schedulesReminder"
|
||||||
|
primary="Lembretes"
|
||||||
|
icon={<SendOutlined />}
|
||||||
|
/>
|
||||||
|
<ListItemLink
|
||||||
|
to="/quickAnswers"
|
||||||
|
primary={i18n.t("mainDrawer.listItems.quickAnswers")}
|
||||||
|
icon={<QuestionAnswerOutlinedIcon />}
|
||||||
|
/>
|
||||||
|
<Can
|
||||||
|
role={user.profile}
|
||||||
|
perform="drawer-admin-items:view"
|
||||||
|
yes={() => (
|
||||||
|
<>
|
||||||
|
<Divider />
|
||||||
|
<ListSubheader inset>
|
||||||
|
{i18n.t("mainDrawer.listItems.administration")}
|
||||||
|
</ListSubheader>
|
||||||
|
<ListItemLink
|
||||||
|
to="/users"
|
||||||
|
primary={i18n.t("mainDrawer.listItems.users")}
|
||||||
|
icon={<PeopleAltOutlinedIcon />}
|
||||||
|
/>
|
||||||
|
<ListItemLink
|
||||||
|
to="/queues"
|
||||||
|
primary={i18n.t("mainDrawer.listItems.queues")}
|
||||||
|
icon={<AccountTreeOutlinedIcon />}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<ListItemLink
|
||||||
|
to="/connections"
|
||||||
|
primary={i18n.t("mainDrawer.listItems.connections")}
|
||||||
|
icon={
|
||||||
|
<Badge badgeContent={connectionWarning ? "!" : 0} color="error">
|
||||||
|
<SyncAltIcon />
|
||||||
|
</Badge>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<ListItemLink
|
||||||
|
to="/"
|
||||||
|
primary="Dashboard"
|
||||||
|
icon={<DashboardOutlinedIcon />}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<ListItemLink
|
||||||
|
to="/report"
|
||||||
|
primary="Relatório"
|
||||||
|
icon={<ReportOutlinedIcon />}
|
||||||
|
/>
|
||||||
|
|
||||||
|
|
||||||
|
<Can
|
||||||
|
role={user.profile}
|
||||||
|
perform="settings-view:show"
|
||||||
|
yes={() => (
|
||||||
|
<ListItemLink
|
||||||
|
to="/settings"
|
||||||
|
primary={i18n.t("mainDrawer.listItems.settings")}
|
||||||
|
icon={<SettingsOutlinedIcon />}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,271 +0,0 @@
|
||||||
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 <BackdropLoading />;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={classes.root}>
|
|
||||||
<Drawer
|
|
||||||
variant={drawerVariant}
|
|
||||||
className={drawerOpen ? classes.drawerPaper : classes.drawerPaperClose}
|
|
||||||
classes={{
|
|
||||||
paper: clsx(
|
|
||||||
classes.drawerPaper,
|
|
||||||
!drawerOpen && classes.drawerPaperClose
|
|
||||||
),
|
|
||||||
}}
|
|
||||||
open={drawerOpen}
|
|
||||||
>
|
|
||||||
<div className={classes.toolbarIcon}>
|
|
||||||
<IconButton onClick={() => setDrawerOpen(!drawerOpen)}>
|
|
||||||
<ChevronLeftIcon />
|
|
||||||
</IconButton>
|
|
||||||
</div>
|
|
||||||
<Divider />
|
|
||||||
<List>
|
|
||||||
<MainListItems drawerClose={drawerClose} />
|
|
||||||
</List>
|
|
||||||
<Divider />
|
|
||||||
</Drawer>
|
|
||||||
<UserModal
|
|
||||||
open={userModalOpen}
|
|
||||||
onClose={() => setUserModalOpen(false)}
|
|
||||||
userId={user?.id}
|
|
||||||
/>
|
|
||||||
<AppBar
|
|
||||||
position="absolute"
|
|
||||||
className={clsx(classes.appBar, drawerOpen && classes.appBarShift)}
|
|
||||||
color={process.env.NODE_ENV === "development" ? "inherit" : "primary"}
|
|
||||||
>
|
|
||||||
<Toolbar variant="dense" className={classes.toolbar}>
|
|
||||||
<IconButton
|
|
||||||
edge="start"
|
|
||||||
color="inherit"
|
|
||||||
aria-label="open drawer"
|
|
||||||
onClick={() => setDrawerOpen(!drawerOpen)}
|
|
||||||
className={clsx(
|
|
||||||
classes.menuButton,
|
|
||||||
drawerOpen && classes.menuButtonHidden
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<MenuIcon />
|
|
||||||
</IconButton>
|
|
||||||
<Typography
|
|
||||||
component="h1"
|
|
||||||
variant="h6"
|
|
||||||
color="inherit"
|
|
||||||
noWrap
|
|
||||||
className={classes.title}
|
|
||||||
>
|
|
||||||
|
|
||||||
OMNIHIT
|
|
||||||
|
|
||||||
</Typography>
|
|
||||||
{user.id && <NotificationsPopOver />}
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<IconButton
|
|
||||||
aria-label="account of current user"
|
|
||||||
aria-controls="menu-appbar"
|
|
||||||
aria-haspopup="true"
|
|
||||||
onClick={handleMenu}
|
|
||||||
color="inherit"
|
|
||||||
>
|
|
||||||
<AccountCircle />
|
|
||||||
</IconButton>
|
|
||||||
<Menu
|
|
||||||
id="menu-appbar"
|
|
||||||
anchorEl={anchorEl}
|
|
||||||
getContentAnchorEl={null}
|
|
||||||
anchorOrigin={{
|
|
||||||
vertical: "bottom",
|
|
||||||
horizontal: "right",
|
|
||||||
}}
|
|
||||||
transformOrigin={{
|
|
||||||
vertical: "top",
|
|
||||||
horizontal: "right",
|
|
||||||
}}
|
|
||||||
open={menuOpen}
|
|
||||||
onClose={handleCloseMenu}
|
|
||||||
>
|
|
||||||
<MenuItem onClick={handleOpenUserModal}>
|
|
||||||
{i18n.t("mainDrawer.appBar.user.profile")}
|
|
||||||
</MenuItem>
|
|
||||||
<MenuItem onClick={handleClickLogout}>
|
|
||||||
{i18n.t("mainDrawer.appBar.user.logout")}
|
|
||||||
</MenuItem>
|
|
||||||
</Menu>
|
|
||||||
</div>
|
|
||||||
</Toolbar>
|
|
||||||
</AppBar>
|
|
||||||
<main className={classes.content}>
|
|
||||||
<div className={classes.appBarSpacer} />
|
|
||||||
|
|
||||||
{children ? children : null}
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default LoggedInLayout;
|
|
||||||
|
|
@ -1,28 +1,271 @@
|
||||||
import React from "react";
|
import React, { useState, useContext, useEffect } from "react";
|
||||||
|
import clsx from "clsx";
|
||||||
|
|
||||||
import Loading from "../components/LoadingScreen/Loading";
|
import {
|
||||||
import MainContainer from "../components/Base/MainContainer/MainContainer";
|
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 { AuthContext } from "../context/Auth/AuthContext";
|
||||||
|
import BackdropLoading from "../components/BackdropLoading";
|
||||||
import { i18n } from "../translate/i18n";
|
import { i18n } from "../translate/i18n";
|
||||||
import MenuComponent from "../components/Menu/MenuComponent";
|
|
||||||
|
//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",
|
||||||
|
},
|
||||||
|
}));
|
||||||
|
|
||||||
const LoggedInLayout = ({ children }) => {
|
const LoggedInLayout = ({ children }) => {
|
||||||
const { handleLogout, loading, isAuth } = React.useContext(AuthContext);
|
const classes = useStyles();
|
||||||
const logout = (e) => {
|
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();
|
||||||
handleLogout();
|
handleLogout();
|
||||||
};
|
};
|
||||||
const { user } = React.useContext(AuthContext);
|
|
||||||
|
|
||||||
|
const drawerClose = () => {
|
||||||
|
if (document.body.offsetWidth < 600) {
|
||||||
|
setDrawerOpen(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
if (loading) {
|
if (loading) {
|
||||||
return <Loading />;
|
return <BackdropLoading />;
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<div className={classes.root}>
|
||||||
<MenuComponent />
|
<Drawer
|
||||||
<MainContainer>{children ? children : null}</MainContainer>
|
variant={drawerVariant}
|
||||||
</>
|
className={drawerOpen ? classes.drawerPaper : classes.drawerPaperClose}
|
||||||
|
classes={{
|
||||||
|
paper: clsx(
|
||||||
|
classes.drawerPaper,
|
||||||
|
!drawerOpen && classes.drawerPaperClose
|
||||||
|
),
|
||||||
|
}}
|
||||||
|
open={drawerOpen}
|
||||||
|
>
|
||||||
|
<div className={classes.toolbarIcon}>
|
||||||
|
<IconButton onClick={() => setDrawerOpen(!drawerOpen)}>
|
||||||
|
<ChevronLeftIcon />
|
||||||
|
</IconButton>
|
||||||
|
</div>
|
||||||
|
<Divider />
|
||||||
|
<List>
|
||||||
|
<MainListItems drawerClose={drawerClose} />
|
||||||
|
</List>
|
||||||
|
<Divider />
|
||||||
|
</Drawer>
|
||||||
|
<UserModal
|
||||||
|
open={userModalOpen}
|
||||||
|
onClose={() => setUserModalOpen(false)}
|
||||||
|
userId={user?.id}
|
||||||
|
/>
|
||||||
|
<AppBar
|
||||||
|
position="absolute"
|
||||||
|
className={clsx(classes.appBar, drawerOpen && classes.appBarShift)}
|
||||||
|
color={process.env.NODE_ENV === "development" ? "inherit" : "primary"}
|
||||||
|
>
|
||||||
|
<Toolbar variant="dense" className={classes.toolbar}>
|
||||||
|
<IconButton
|
||||||
|
edge="start"
|
||||||
|
color="inherit"
|
||||||
|
aria-label="open drawer"
|
||||||
|
onClick={() => setDrawerOpen(!drawerOpen)}
|
||||||
|
className={clsx(
|
||||||
|
classes.menuButton,
|
||||||
|
drawerOpen && classes.menuButtonHidden
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<MenuIcon />
|
||||||
|
</IconButton>
|
||||||
|
<Typography
|
||||||
|
component="h1"
|
||||||
|
variant="h6"
|
||||||
|
color="inherit"
|
||||||
|
noWrap
|
||||||
|
className={classes.title}
|
||||||
|
>
|
||||||
|
|
||||||
|
OMNIHIT
|
||||||
|
|
||||||
|
</Typography>
|
||||||
|
{user.id && <NotificationsPopOver />}
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<IconButton
|
||||||
|
aria-label="account of current user"
|
||||||
|
aria-controls="menu-appbar"
|
||||||
|
aria-haspopup="true"
|
||||||
|
onClick={handleMenu}
|
||||||
|
color="inherit"
|
||||||
|
>
|
||||||
|
<AccountCircle />
|
||||||
|
</IconButton>
|
||||||
|
<Menu
|
||||||
|
id="menu-appbar"
|
||||||
|
anchorEl={anchorEl}
|
||||||
|
getContentAnchorEl={null}
|
||||||
|
anchorOrigin={{
|
||||||
|
vertical: "bottom",
|
||||||
|
horizontal: "right",
|
||||||
|
}}
|
||||||
|
transformOrigin={{
|
||||||
|
vertical: "top",
|
||||||
|
horizontal: "right",
|
||||||
|
}}
|
||||||
|
open={menuOpen}
|
||||||
|
onClose={handleCloseMenu}
|
||||||
|
>
|
||||||
|
<MenuItem onClick={handleOpenUserModal}>
|
||||||
|
{i18n.t("mainDrawer.appBar.user.profile")}
|
||||||
|
</MenuItem>
|
||||||
|
<MenuItem onClick={handleClickLogout}>
|
||||||
|
{i18n.t("mainDrawer.appBar.user.logout")}
|
||||||
|
</MenuItem>
|
||||||
|
</Menu>
|
||||||
|
</div>
|
||||||
|
</Toolbar>
|
||||||
|
</AppBar>
|
||||||
|
<main className={classes.content}>
|
||||||
|
<div className={classes.appBarSpacer} />
|
||||||
|
|
||||||
|
{children ? children : null}
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,28 @@
|
||||||
import React from "react";
|
import React, { useState, useContext } from "react";
|
||||||
import { AuthContext } from "../../context/Auth/AuthContext";
|
import { Link as RouterLink } from "react-router-dom";
|
||||||
|
|
||||||
|
import {
|
||||||
|
Avatar,
|
||||||
|
Button,
|
||||||
|
CssBaseline,
|
||||||
|
TextField,
|
||||||
|
Grid,
|
||||||
|
Box,
|
||||||
|
Typography,
|
||||||
|
Container,
|
||||||
|
InputAdornment,
|
||||||
|
IconButton,
|
||||||
|
Link
|
||||||
|
} from '@material-ui/core';
|
||||||
|
|
||||||
|
import { /*LockOutlined,*/ PersonOutlineOutlined, Visibility, VisibilityOff } from '@material-ui/icons';
|
||||||
|
|
||||||
|
import { makeStyles } from "@material-ui/core/styles";
|
||||||
|
|
||||||
import { i18n } from "../../translate/i18n";
|
import { i18n } from "../../translate/i18n";
|
||||||
|
|
||||||
import ContainerLogin from "../../components/Base/ContainerLogin/ContainerLogin";
|
import { AuthContext } from "../../context/Auth/AuthContext";
|
||||||
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 = () => {
|
// const Copyright = () => {
|
||||||
// return (
|
// return (
|
||||||
// <Typography variant="body2" color="textSecondary" align="center">
|
// <Typography variant="body2" color="textSecondary" align="center">
|
||||||
|
|
@ -21,30 +36,33 @@ import Company from "../../components/LoginComponents/CompanyLogo/Company";
|
||||||
// );
|
// );
|
||||||
// };
|
// };
|
||||||
|
|
||||||
// const useStyles = makeStyles((theme) => ({
|
const useStyles = makeStyles((theme) => ({
|
||||||
// paper: {
|
paper: {
|
||||||
// marginTop: theme.spacing(8),
|
marginTop: theme.spacing(8),
|
||||||
// display: "flex",
|
display: "flex",
|
||||||
// flexDirection: "column",
|
flexDirection: "column",
|
||||||
// alignItems: "center",
|
alignItems: "center",
|
||||||
// },
|
},
|
||||||
// avatar: {
|
avatar: {
|
||||||
// margin: theme.spacing(1),
|
margin: theme.spacing(1),
|
||||||
// backgroundColor: theme.palette.secondary.main,
|
backgroundColor: theme.palette.secondary.main,
|
||||||
// },
|
},
|
||||||
// form: {
|
form: {
|
||||||
// width: "100%", // Fix IE 11 issue.
|
width: "100%", // Fix IE 11 issue.
|
||||||
// marginTop: theme.spacing(1),
|
marginTop: theme.spacing(1),
|
||||||
// },
|
},
|
||||||
// submit: {
|
submit: {
|
||||||
// margin: theme.spacing(3, 0, 2),
|
margin: theme.spacing(3, 0, 2),
|
||||||
// },
|
},
|
||||||
// }));
|
}));
|
||||||
|
|
||||||
const Login = () => {
|
const Login = () => {
|
||||||
const [user, setUser] = React.useState({ email: "", password: "" });
|
const classes = useStyles();
|
||||||
|
|
||||||
const { handleLogin } = React.useContext(AuthContext);
|
const [user, setUser] = useState({ email: "", password: "" });
|
||||||
|
const [showPassword, setShowPassword] = useState(false);
|
||||||
|
|
||||||
|
const { handleLogin } = useContext(AuthContext);
|
||||||
|
|
||||||
const handleChangeInput = (e) => {
|
const handleChangeInput = (e) => {
|
||||||
setUser({ ...user, [e.target.name]: e.target.value });
|
setUser({ ...user, [e.target.name]: e.target.value });
|
||||||
|
|
@ -56,16 +74,84 @@ const Login = () => {
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ContainerLogin>
|
<Container component="main" maxWidth="xs">
|
||||||
<VideoComponent width={"350px"} autoPlay muted loop position={"relative"} />
|
<CssBaseline />
|
||||||
<LoginForm
|
<div className={classes.paper}>
|
||||||
handleChangeInput={handleChangeInput}
|
|
||||||
handlSubmit={handlSubmit}
|
<Avatar className={classes.avatar} style={{ backgroundColor: "#ec5114" }}>
|
||||||
user={user.email}
|
<PersonOutlineOutlined/>
|
||||||
password={user.password}
|
</Avatar>
|
||||||
|
|
||||||
|
|
||||||
|
<Typography component="h1" variant="h5">
|
||||||
|
{i18n.t("login.title")}
|
||||||
|
</Typography>
|
||||||
|
<form className={classes.form} noValidate onSubmit={handlSubmit}>
|
||||||
|
<TextField
|
||||||
|
variant="outlined"
|
||||||
|
margin="normal"
|
||||||
|
required
|
||||||
|
fullWidth
|
||||||
|
id="email"
|
||||||
|
label={i18n.t("login.form.email")}
|
||||||
|
name="email"
|
||||||
|
value={user.email}
|
||||||
|
onChange={handleChangeInput}
|
||||||
|
autoComplete="email"
|
||||||
|
autoFocus
|
||||||
/>
|
/>
|
||||||
<Company />
|
<TextField
|
||||||
</ContainerLogin>
|
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>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -15,9 +15,8 @@ const useStyles = makeStyles((theme) => ({
|
||||||
flex: 1,
|
flex: 1,
|
||||||
// // backgroundColor: "#eee",
|
// // backgroundColor: "#eee",
|
||||||
// padding: theme.spacing(4),
|
// padding: theme.spacing(4),
|
||||||
height: `100%`,
|
height: `calc(100% - 48px)`,
|
||||||
overflowY: "hidden",
|
overflowY: "hidden",
|
||||||
borderRadius: "5px",
|
|
||||||
},
|
},
|
||||||
|
|
||||||
chatPapper: {
|
chatPapper: {
|
||||||
|
|
@ -76,7 +75,9 @@ const Chat = () => {
|
||||||
item
|
item
|
||||||
xs={12}
|
xs={12}
|
||||||
md={4}
|
md={4}
|
||||||
className={ticketId ? classes.contactsWrapperSmall : classes.contactsWrapper}
|
className={
|
||||||
|
ticketId ? classes.contactsWrapperSmall : classes.contactsWrapper
|
||||||
|
}
|
||||||
>
|
>
|
||||||
<TicketsManager />
|
<TicketsManager />
|
||||||
</Grid>
|
</Grid>
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@ import React, { useContext } from "react";
|
||||||
import { Route as RouterRoute, Redirect } from "react-router-dom";
|
import { Route as RouterRoute, Redirect } from "react-router-dom";
|
||||||
|
|
||||||
import { AuthContext } from "../context/Auth/AuthContext";
|
import { AuthContext } from "../context/Auth/AuthContext";
|
||||||
import Loading from "../components/LoadingScreen/Loading"
|
import BackdropLoading from "../components/BackdropLoading";
|
||||||
|
|
||||||
const Route = ({ component: Component, isPrivate = false, ...rest }) => {
|
const Route = ({ component: Component, isPrivate = false, ...rest }) => {
|
||||||
const { isAuth, loading } = useContext(AuthContext);
|
const { isAuth, loading } = useContext(AuthContext);
|
||||||
|
|
@ -10,7 +10,7 @@ const Route = ({ component: Component, isPrivate = false, ...rest }) => {
|
||||||
if (!isAuth && isPrivate) {
|
if (!isAuth && isPrivate) {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{loading && <Loading />}
|
{loading && <BackdropLoading />}
|
||||||
<Redirect to={{ pathname: "/login", state: { from: rest.location } }} />
|
<Redirect to={{ pathname: "/login", state: { from: rest.location } }} />
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
@ -19,7 +19,7 @@ const Route = ({ component: Component, isPrivate = false, ...rest }) => {
|
||||||
if (isAuth && !isPrivate) {
|
if (isAuth && !isPrivate) {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{loading && <Loading />}
|
{loading && <BackdropLoading />}
|
||||||
<Redirect to={{ pathname: "/", state: { from: rest.location } }} />;
|
<Redirect to={{ pathname: "/", state: { from: rest.location } }} />;
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
@ -27,7 +27,7 @@ const Route = ({ component: Component, isPrivate = false, ...rest }) => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{loading && <Loading />}
|
{loading && <BackdropLoading />}
|
||||||
<RouterRoute {...rest} component={Component} />
|
<RouterRoute {...rest} component={Component} />
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -8,9 +8,9 @@ import Dashboard from "../pages/Dashboard/";
|
||||||
import Report from "../pages/Report/";
|
import Report from "../pages/Report/";
|
||||||
import SchedulesReminder from "../pages/SchedulesReminder/";
|
import SchedulesReminder from "../pages/SchedulesReminder/";
|
||||||
|
|
||||||
import Login from "../pages/Login/";
|
|
||||||
import Signup from "../pages/Signup/";
|
|
||||||
import Tickets from "../pages/Tickets/";
|
import Tickets from "../pages/Tickets/";
|
||||||
|
import Signup from "../pages/Signup/";
|
||||||
|
import Login from "../pages/Login/";
|
||||||
import Connections from "../pages/Connections/";
|
import Connections from "../pages/Connections/";
|
||||||
import Settings from "../pages/Settings/";
|
import Settings from "../pages/Settings/";
|
||||||
import Users from "../pages/Users";
|
import Users from "../pages/Users";
|
||||||
|
|
|
||||||
|
|
@ -1,113 +0,0 @@
|
||||||
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;
|
|
||||||
|
|
||||||
|
|
@ -1,60 +0,0 @@
|
||||||
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"
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
Loading…
Reference in New Issue