more add

frontend/src/components/Base/Form/Input/InputComponent.jsx

@@ -2,11 +2,11 @@ import React from "react";
 import LabelComponent from "../Label/LabelComponent";
 import { InputComponentStyled, InputContainerStyled } from "./InputComponent.style";
 
-const InputComponent = ({ type, id, label, ...props }) => {
+const InputComponent = ({ type, id, label, value, ...props }) => {
   return (
     <InputContainerStyled>
       <LabelComponent forhtml={id} label={label} />
-      <InputComponentStyled type={type} id={id} {...props} />
+      <InputComponentStyled type={type} id={id} value={value} {...props} />
     </InputContainerStyled>
   );
 };

frontend/src/components/Base/MainContainer/MainContainer.style.jsx

@@ -9,6 +9,9 @@ const MainContainerStyled = styled.main`
   flex-direction: column;
   align-items: flex-end;
   height: 96vh;
+  @media only screen and (max-height: 790px) {
+    padding-top: 12px;
+  }
 `;
 const TitleContainerStyled = styled.div`
   width: 100%;

frontend/src/components/Menu/MenuComponent.style.jsx

@@ -73,6 +73,9 @@ const MenuListItemStyled = styled.li`
     fill: ${color.pricinpal.naranja};
     transition: all 0.1s linear;
   }
+  @media only screen and (max-height: 790px) {
+    margin: 6px 28px;
+  }
 `;
 
 export { MenuStyled, MenuListStyled, MenuListItemStyled };

frontend/src/components/PageTitle/PageTitle.style.jsx

@@ -40,6 +40,7 @@ const UserModalStyled = styled.div`
   right: 2rem;
   top: 5.5rem;
   border-radius: 5px;
+  z-index: 999;
   box-shadow: ${color.shadow.dark} ${color.gradient.bgOpacity};
 `;
 

frontend/src/components/PageTitle/UserBtn/UserBtn.jsx

@@ -11,11 +11,16 @@ import UserModal from "../../UserModal/UserModal";
 
 const UserBtn = ({ user, img, modal, modalSet }) => {
   const [modalConfirm, setModalConfirm] = React.useState(false);
+  const [modalUser, setModalUser] = React.useState(false);
   const { handleLogout } = React.useContext(AuthContext);
 
   const handleModal = () => {
     setModalConfirm(!modalConfirm);
   };
+  const handleModalUser = (e)=>{
+    e.preventDefault()
+    setModalUser(!modalUser)
+  }
 
   return (
     <>
@@ -23,13 +28,13 @@ const UserBtn = ({ user, img, modal, modalSet }) => {
         <img src={img} alt={user ? user.name : null} width="24px" />
         Bem Vindo, {user ? user.name : null}
       </UserBtnStyled>
-      <UserModalStyled modal={modal}>
+      <UserModalStyled modal={modal} onMouseLeave={modalSet}>
         <UserModalListStyled>
-          <UserItem title="Perfil" icon={<Perfil />} />
+          <UserItem title="Perfil" icon={<Perfil />} onClick={handleModalUser} />
           <UserItem title="Sair" icon={<Signoff />} onClick={handleModal} />
         </UserModalListStyled>
       </UserModalStyled>
-      <UserModal />
+      <UserModal modal={modalUser} click={handleModalUser}/>
       <ConfirmationModal title="Sair?" modal={modalConfirm} click={{ handleModal, handleLogout }}>
         Deseja Sair do sistema?
       </ConfirmationModal>

frontend/src/components/UserModal/UserModal.jsx

@@ -1,37 +1,43 @@
 import React from "react";
+import { color } from "../../style/varibles";
 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 BtnComponent from "../Base/BTN/Btn";
 import FormComponent from "../Base/Form/FormComponent";
 import InputComponent from "../Base/Form/Input/InputComponent";
+import UserModalComponent from "./UserModalImg/UserModalComponent";
 
-const style = {
-  width: "100%",
-  justifyContent: "flex-start",
-  display: "flex",
-  flexDirection: "column",
-  alignItems: "center",
-}
+import UserImg from "../../assets/images/User/user.jpg";
+
+const UserModal = ({ modal, click }) => {
+  const { user } = React.useContext(AuthContext);
+
+  const initalData = {
+    name: user.name,
+    email: user.email,
+    perfil:user.profile,
+  }
+  console.log(user);
 
-const UserModal = () => {
   return (
-    <ModalOverlayStyled>
+    <ModalOverlayStyled modal={modal}>
       <UserModalStyled>
-        <div style={style}>
-          <h1>Imagem</h1>
-          <p>Desc</p>
-        </div>
+        <UserModalComponent img={UserImg} desc="Clique na imagem para alterar" />
         <FormComponent method="get">
-          <InputComponent id="nome" label="Nome" type="text" />
-          <InputComponent id="email" label="E-mail" type="email" />
+          <InputComponent id="nome" label="Nome" type="text"  value={initalData.name}/>
+          <InputComponent id="email" label="E-mail" type="email"  value={initalData.email}/>
           <InputComponent id="password" label="Senha" type="password" />
           <UserBtns>
-            <BtnComponent text="Cancelar" />
-            <BtnComponent text="Salvar" />
+            <BtnComponent text="Cancelar" onClick={click} />
+            <BtnComponent
+              text="Salvar"
+              bgcolor={color.status.yes}
+              fontcolor={color.pricinpal.blanco}
+            />
           </UserBtns>
         </FormComponent>
       </UserModalStyled>
@@ -41,3 +47,10 @@ const UserModal = () => {
 
 export default UserModal;
 
+/*{name: 'teste', id: 2, email: 'teste@teste.com', profile: 'master', tokenVersion: 0, …}
+email: "teste@teste.com"
+id: 2
+name: "teste"
+profile: "master"
+queues: []
+tokenVersion: 0 */

frontend/src/components/UserModal/UserModal.style.jsx

@@ -2,15 +2,14 @@ import styled from "styled-components";
 import { color } from "../../style/varibles";
 
 const ModalOverlayStyled = styled.div`
-  /* display: ${({ modal }) => (modal ? "flex" : "none")}; */
-  display: flex;
+  display: ${({ modal }) => (modal ? "flex" : "none")};
   position: absolute;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 100vh;
   background-color: #00000050;
-  z-index: 9999;
+  z-index: 100;
   top: 0;
   right: 0;
 `;
@@ -20,15 +19,16 @@ const UserModalStyled = styled.div`
   flex-direction: row;
   margin: 0 auto;
   padding: 12px;
-  z-index: 10000;
+  z-index: 101;
   border-radius: 5px;
   background-color: ${color.pricinpal.grisOscuro};
-  width: 50%;
+  width: 650px;
 `;
 const UserBtns = styled.div`
+  width: 100%;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
 `;
-export { ModalOverlayStyled, UserModalStyled,UserBtns };
+export { ModalOverlayStyled, UserModalStyled, UserBtns };
 

frontend/src/components/UserModal/UserModalImg/UserModalComponent.jsx

@@ -0,0 +1,14 @@
+import React from "react";
+
+import UserModalComponentStyled from "./UserModalComponent.style"
+
+const UserModalComponent = ({img, desc}) => {
+  return (
+    <UserModalComponentStyled>
+      <img src={img} alt="" />
+      <p>{desc}</p>
+    </UserModalComponentStyled>
+  );
+};
+
+export default UserModalComponent;

frontend/src/components/UserModal/UserModalImg/UserModalComponent.style.jsx

@@ -0,0 +1,27 @@
+import styled from "styled-components";
+import { color } from "../../../style/varibles";
+
+const UserModalComponentStyled = styled.div`
+  width: 100%;
+  max-width: 250px;
+  min-width: 250px;
+  justify-content: center;
+  align-items: center;
+  margin-right: 21px;
+  margin-top: 16px;
+  img {
+    width: 100%;
+    object-fit: contain;
+    border-radius: 5px;
+  }
+  p {
+    color: ${color.pricinpal.blanco};
+    font-size: 16px;
+    text-align: center;
+    font-family: "Helvetica55";
+    margin-top: 16px;
+  }
+`;
+
+export default UserModalComponentStyled;
+