diff --git a/frontend/src/assets/icons/Logohit.svg b/frontend/src/assets/icons/Logohit.svg new file mode 100644 index 0000000..c1d995d --- /dev/null +++ b/frontend/src/assets/icons/Logohit.svg @@ -0,0 +1,46 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/src/assets/icons/Menu/Accounttree.svg b/frontend/src/assets/icons/Menu/Accounttree.svg index 32f1a7b..bf15f0e 100644 --- a/frontend/src/assets/icons/Menu/Accounttree.svg +++ b/frontend/src/assets/icons/Menu/Accounttree.svg @@ -1,3 +1,3 @@ - - + + \ No newline at end of file diff --git a/frontend/src/assets/icons/Menu/Configuration.svg b/frontend/src/assets/icons/Menu/Configuration.svg index 5dbf62c..2d7ab1a 100644 --- a/frontend/src/assets/icons/Menu/Configuration.svg +++ b/frontend/src/assets/icons/Menu/Configuration.svg @@ -1,5 +1,5 @@ - - - + + + diff --git a/frontend/src/assets/icons/Menu/Contact.svg b/frontend/src/assets/icons/Menu/Contact.svg index 7f6bd8c..fab9da0 100644 --- a/frontend/src/assets/icons/Menu/Contact.svg +++ b/frontend/src/assets/icons/Menu/Contact.svg @@ -1,10 +1,10 @@ - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/frontend/src/assets/icons/Menu/Dashboard.svg b/frontend/src/assets/icons/Menu/Dashboard.svg index 8549803..fed1a02 100644 --- a/frontend/src/assets/icons/Menu/Dashboard.svg +++ b/frontend/src/assets/icons/Menu/Dashboard.svg @@ -1,3 +1,3 @@ - + diff --git a/frontend/src/assets/icons/Menu/Graph.svg b/frontend/src/assets/icons/Menu/Graph.svg index 6a962fd..5f6893f 100644 --- a/frontend/src/assets/icons/Menu/Graph.svg +++ b/frontend/src/assets/icons/Menu/Graph.svg @@ -1,8 +1,8 @@ - - - - - - + + + + + + diff --git a/frontend/src/assets/icons/Menu/Peoplealt.svg b/frontend/src/assets/icons/Menu/Peoplealt.svg index f9c8ff4..b01baed 100644 --- a/frontend/src/assets/icons/Menu/Peoplealt.svg +++ b/frontend/src/assets/icons/Menu/Peoplealt.svg @@ -1,6 +1,6 @@ - - - - - + + + + + \ No newline at end of file diff --git a/frontend/src/assets/icons/Menu/Send.svg b/frontend/src/assets/icons/Menu/Send.svg index e3826db..5215c0b 100644 --- a/frontend/src/assets/icons/Menu/Send.svg +++ b/frontend/src/assets/icons/Menu/Send.svg @@ -1,9 +1,3 @@ - - - - - - - - - + + + \ No newline at end of file diff --git a/frontend/src/assets/icons/Menu/Swap.svg b/frontend/src/assets/icons/Menu/Swap.svg index b42c392..66a538d 100644 --- a/frontend/src/assets/icons/Menu/Swap.svg +++ b/frontend/src/assets/icons/Menu/Swap.svg @@ -1,3 +1,3 @@ - + diff --git a/frontend/src/components/Base/Divider/DividerStyle.jsx b/frontend/src/components/Base/Divider/DividerStyle.jsx new file mode 100644 index 0000000..af195d5 --- /dev/null +++ b/frontend/src/components/Base/Divider/DividerStyle.jsx @@ -0,0 +1,16 @@ +import styled from "styled-components"; +import { color } from "../../../style/varibles"; + +const Divider = styled.span` + position:relative; + left: 28px; + display: block; + width: 19px; + margin: 21px 0; + border: 1px solid ${color.pricinpal.blanco}; + background: ${color.pricinpal.blanco}; + +`; + +export default Divider; + diff --git a/frontend/src/components/Menu/MenuBottom.jsx b/frontend/src/components/Menu/MenuBottom.jsx new file mode 100644 index 0000000..d3b49f3 --- /dev/null +++ b/frontend/src/components/Menu/MenuBottom.jsx @@ -0,0 +1,15 @@ +import React from "react"; +import { ReactComponent as LogoHit } from "../../assets/icons/Logohit.svg"; +import MenuBottomStyled from "./MenuBottom.style"; + +const MenuBottom = ({ hover }) => { + return ( + + +

Copyright © 2022 HIT Communications. Todos os direitos reservados.

+ + ); +}; + +export default MenuBottom; + diff --git a/frontend/src/components/Menu/MenuBottom.style.jsx b/frontend/src/components/Menu/MenuBottom.style.jsx new file mode 100644 index 0000000..3e1b98c --- /dev/null +++ b/frontend/src/components/Menu/MenuBottom.style.jsx @@ -0,0 +1,30 @@ +import styled from "styled-components"; + +import { color } from "../../style/varibles"; + +const MenuBottomStyled = styled.div` + display: flex; + position: absolute; + left: 12px; + bottom: 16px; + 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: "HelveticaRoman"; + font-size: 10px; + color: ${color.pricinpal.blanco}; + display: ${({ hover }) => (hover ? "flex" : "none")}; + opacity: ${({ hover }) => (hover ? "1" : "0")}; + } +`; + +export default MenuBottomStyled; + diff --git a/frontend/src/components/Menu/MenuComponent.jsx b/frontend/src/components/Menu/MenuComponent.jsx index 27b243b..608315c 100644 --- a/frontend/src/components/Menu/MenuComponent.jsx +++ b/frontend/src/components/Menu/MenuComponent.jsx @@ -1,30 +1,30 @@ import React from "react"; -import VideoComponent from "../VideoTag/VideoComponent"; +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 { MenuStyled, MenuListStyled, MenuListItemStyled } from "./MenuComponent.style"; -import { WhatsAppsContext } from "../../context/WhatsApp/WhatsAppsContext"; -import { AuthContext } from "../../context/Auth/AuthContext"; - -import img from "../../assets/images/Logo.png"; +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 [hover, setHover] = React.useState(true); const { whatsApps } = React.useContext(WhatsAppsContext); const { user } = React.useContext(AuthContext); const [connectionWarning, setConnectionWarning] = React.useState(false); @@ -56,33 +56,25 @@ const MenuComponent = () => { }, [whatsApps]); return ( - + - - {/*Menu Top Header*/} -
-
- -
-
- {/*Menu Top Header*/} - + - {/* } to="/tickets" text="Tickets" hover={hover} /> */} - } text="Tickets" to="" hover={hover} /> - } text="Contatos" to="" hover={hover} /> - } text="Lembretes" to="" hover={hover} /> + } text="Tickets" to="/tickets" hover={hover} /> + } text="Contatos" to="contacts" hover={hover} /> + } text="Lembretes" to="/schedulesReminder" hover={hover} /> } text="Respostas" to="" hover={hover} /> -
- } text="Usuários" to="" hover={hover} /> - } text="Filas" to="" hover={hover} /> - } text="Conexões" to="" hover={hover} /> - } text="Dashboard" to="" hover={hover} /> - } text="Relatórios" to="" hover={hover} /> + + } text="Usuários" to="/users" hover={hover} /> + } text="Filas" to="/Queues" hover={hover} /> + } text="Conexões" to="/connections" hover={hover} /> + } text="Dashboard" to="/" hover={hover} /> + } text="Relatórios" to="report" hover={hover} /> } text="Supervisão" to="" hover={hover} /> -
- } text="Configurações" to="" hover={hover} /> + + } text="Configurações" to="/Settings" hover={hover} /> + ); }; diff --git a/frontend/src/components/Menu/MenuComponent.style.jsx b/frontend/src/components/Menu/MenuComponent.style.jsx index bc4833f..18e701c 100644 --- a/frontend/src/components/Menu/MenuComponent.style.jsx +++ b/frontend/src/components/Menu/MenuComponent.style.jsx @@ -45,20 +45,14 @@ const MenuListItemStyled = styled.li` margin: 12px 28px; gap: 6px; color: ${color.pricinpal.blanco}; - transition: all 0.2s linear; - &:hover { - color: ${color.pricinpal.naranja}; - } - & a { + transition: all 0.1s linear; + a { display: flex; align-items: center; color: ${color.pricinpal.blanco}; gap: 12px; text-decoration: none; - & :hover { - color: ${color.pricinpal.naranja}; - transition: all 0.2s linear; - } + p { text-transform: capitalize; font-family: "HelveticaRoman"; @@ -70,13 +64,15 @@ const MenuListItemStyled = styled.li` width: 18px; height: 18px; fill: ${color.pricinpal.blanco}; - transition: all 0.2s linear; - & :hover { - fill: ${color.pricinpal.naranja}; - transition: all 0.2s linear; - } + transition: all 0.1s linear; } } + &:hover a p, + &:hover a svg { + color: ${color.pricinpal.naranja}; + fill: ${color.pricinpal.naranja}; + transition: all 0.1s linear; + } `; export { MenuStyled, MenuListStyled, MenuListItemStyled }; diff --git a/frontend/src/components/Menu/MenuTop.jsx b/frontend/src/components/Menu/MenuTop.jsx index d7f6e78..dd75487 100644 --- a/frontend/src/components/Menu/MenuTop.jsx +++ b/frontend/src/components/Menu/MenuTop.jsx @@ -1,15 +1,18 @@ -import React from 'react'; +import React from "react"; +import img from "../../assets/images/Logo.png"; -import { MenuTopStyled } from "./MenuTop.style"; +import { MenuTopStyled, MenuTopFrameStyled, MenuTitle } from "./MenuTop.style"; -import video from "../../assets/videos/video.mp4" - -const MenuTop = () => { +const MenuTop = ({hover}) => { return ( - + + + + OmniHit - ) -} + ); +}; + +export default MenuTop; -export default MenuTop \ No newline at end of file diff --git a/frontend/src/components/Menu/MenuTop.style.jsx b/frontend/src/components/Menu/MenuTop.style.jsx index f9c9e95..513a436 100644 --- a/frontend/src/components/Menu/MenuTop.style.jsx +++ b/frontend/src/components/Menu/MenuTop.style.jsx @@ -1,8 +1,28 @@ import styled from "styled-components"; +import { color } from "../../style/varibles"; + const MenuTopStyled = styled.div` - width: 100%; + display: flex; + flex-direction: row; +`; +const MenuTopFrameStyled = styled.div` + min-width: 60px; + max-width: 60px; + padding: 8px; + background-color: ${color.pricinpal.blanco}; `; -export { MenuTopStyled }; +const MenuTitle = styled.p` + display: ${({ hover }) => (hover ? "flex" : "none")}; + margin-left: 12px; + align-items: center; + font-family: "HelveticaRoman"; + color: ${color.pricinpal.naranja}; + font-size: 28px; + text-transform: capitalize; + text-align: center; +`; + +export { MenuTopStyled, MenuTopFrameStyled, MenuTitle }; diff --git a/frontend/src/layout/MainListItems copy.js b/frontend/src/layout/MainListItems.OLD.js similarity index 100% rename from frontend/src/layout/MainListItems copy.js rename to frontend/src/layout/MainListItems.OLD.js diff --git a/frontend/src/layout/index copy.js b/frontend/src/layout/index.OLD.js similarity index 100% rename from frontend/src/layout/index copy.js rename to frontend/src/layout/index.OLD.js