fixed change avatar not working as intended bug

src/Components/ModalAlterarAvatar/ComponentAlterarAvatar.js

@@ -94,6 +94,7 @@ export default function ComponentAlterarAvatar (props) {
             type : 'USER_CHANGED_COVER',
             currUser : Object.assign(target, source)
         })
+        props.handleClose()
     }
 
     const completeSelection = () => {

src/Components/TabPanels/UserPageTabs/PanelEditarPerfil.js

@@ -28,6 +28,7 @@ import FormInput from "../../FormInput.js"
 import ValidateUserInput from '../../HelperFunctions/FormValidationFunction.js'
 import {apiDomain} from '../../../env.js'
 import ModalAlterarCover from '../../ModalAlterarCover/ModalAlterarCover.js'
+import ModalAlterarAvatar from '../../ModalAlterarAvatar/ModalAlterarAvatar.js'
 import Profile from '../../../img/default_profile0.png'
 
 export default function TabPanelEditarPerfil (props) {
@@ -92,6 +93,9 @@ export default function TabPanelEditarPerfil (props) {
         })
     }
 
+    const [alterarAvatatarOpen, toggleAlterarAvatar] = useState(false)
+    const controlModalAvatar = () => {toggleAlterarAvatar(!alterarAvatatarOpen)}
+
     const handleSubmit = (e) => {
         e.preventDefault()
         const info = {user : {name : formNome.value, description : formAboutMe.value, email : sessionStorage.getItem('@portalmec/uid')}}
@@ -112,6 +116,12 @@ export default function TabPanelEditarPerfil (props) {
                 cover={tempCover}
                 id={state.currentUser.id}
             />
+            <ModalAlterarAvatar
+                open={alterarAvatatarOpen}
+                handleClose={controlModalAvatar}
+                userAvatar={state.currentUser.avatar}
+                id={state.currentUser.id}
+            />
             <div className="card-config">
                 <h1 style={{fontWeight:"300"}}>Editar Perfil </h1>
                     <div className='content-div'>
@@ -129,9 +139,9 @@ export default function TabPanelEditarPerfil (props) {
                                     </label>
                                 </div>
                                 <ProfileAvatarDiv onMouseEnter={handleHoverAlterarFoto} onMouseLeave={handleHoverAlterarFoto}>
-                                    <img src={state.currentUser.avatar ? `${apiDomain}` + state.currentUser.avatar : Profile} alt = "user avatar" style={{border:"0", verticalAlign:"middle"}}/>
+                                    <img src={state.currentUser.avatar ? `${apiDomain}` + state.currentUser.avatar : Profile} alt = "user avatar"/>
                                     <ChangeAvatarDiv  style={ {display : hoverAlterarFoto ? 'flex' : 'none'}}>
-                                        <span>Alterar Foto</span>
+                                        <span onClick={()=>{controlModalAvatar()}}>Alterar Foto</span>
                                     </ChangeAvatarDiv>
                                 </ProfileAvatarDiv>
                             </HeaderContainer>
@@ -269,14 +279,21 @@ const ProfileAvatarDiv = styled.div`
     left : 120px !important;
     border-radius : 100%;
     position : absolute;
-    width : 100px !important;
-    height : 100px !important;
+    max-width : 100px !important;
+    max-height : 100px !important;
     overflow : hidden;
     border : 8px solid #fff;
     outline : 0;
     cursor : pointer;
     z-index : 10;
     background-color : #fff !important;
+
+    img {
+        border:0;
+        vertical-align:middle;
+        width : 100%;
+        height : 100%;
+    }
 `
 
 const HeaderContainer = styled.div`

src/Components/UserPageComponents/Avatar.js

@@ -34,7 +34,7 @@ export default function ProfileAvatar (props) {
     const [open, toggleOpen] = useState(false)
     const controlModal = () => {toggleOpen(!open)}
 
-    useEffect(() => {setAvatar(state.currentUser.avatar)}, state.currentUser.avatar)
+    useEffect(() => {setAvatar(state.currentUser.avatar)}, [state.currentUser.avatar])
 
     return (
         <>