progredindo no header da tela de usuario

src/Pages/UserPage.js

@@ -28,6 +28,7 @@ import Link from '@material-ui/core/Link';
 import Popover from '@material-ui/core/Popover';
 import { Store } from '../Store.js';
 import EditIcon from '@material-ui/icons/Edit';
+import CheckDecagram from '../img/check-decagram-gray.svg'
 
 const HeaderDiv = styled.div`
     background-color : #f4f4f4;
@@ -58,6 +59,8 @@ const ContainerUserProfile = styled(Container)`
     magin-bottom: 30px;
     width : 1170px;
     margin-right : auto;
+    padding-left : 0 !important;
+    padding-right : 0 !important;
     margin-left : auto;
 `
 const HeaderContainer = styled(Container)`
@@ -120,9 +123,21 @@ const EditProfileAnchor = styled.a`
     }
 `
 
+const CheckTeacherDiv = styled.div`
+    font-size : 14px;
+    padding-top : 10px;
+    padding-left : 250px;
+    margin-bottom : -10px;
+    color : #666 !important;
+`
+
+const RodapeDiv = styled.div`
+
+`
+
 export default function UserPage (props){
     const {state, dispatch} = useContext(Store)
-    const userImg = ""
+    const coverImg = ''
     const [hoverAlterarFoto, handleAlterarFoto] = React.useState(false)
 
     const handleHoverAlterarFoto = () => {
@@ -155,11 +170,12 @@ export default function UserPage (props){
                                 </StyledBreadcrumbs>
                             </BreadcrumbsDiv>
 
+                        <div style={{display:"flex", flexDirection:"column"}}>
                             <MainContainerDesktop>
                                 <ContainerUserProfile>
                                     <HeaderContainer>
                                         <CoverContainer>
-                                            {userImg == "" && <span>cover art</span>}
+                                            {coverImg == "" && <span>cover art</span>}
                                             <input accept="image/*" style = {{display:"none"}} id="icon-button-file" type="file" />
                                             <label htmlFor="icon-button-file">
                                                 <Tooltip title={<span style={{fontSize:"14px", overflow:"hidden"}}>ALTERAR CAPA</span>} placement="left">
@@ -169,10 +185,10 @@ export default function UserPage (props){
                                                 </Tooltip>
                                             </label>
                                         </CoverContainer>
-                                        <ProfileAvatarDiv>
-                                            {userImg == "" && <span>user avatar</span>}
-                                            <ChangeAvatarDiv onMouseEnter={handleHoverAlterarFoto} onMouseLeave={handleHoverAlterarFoto}>
-                                                {hoverAlterarFoto && <span>Alterar Foto</span>}
+                                        <ProfileAvatarDiv onMouseEnter={handleHoverAlterarFoto} onMouseLeave={handleHoverAlterarFoto}>
+                                            <img src={state.userAvatar}/>
+                                            <ChangeAvatarDiv  style={ {display : hoverAlterarFoto ? 'flex' : 'none'}}>
+                                                <span>Alterar Foto</span>
                                             </ChangeAvatarDiv>
                                         </ProfileAvatarDiv>
                                         <UserProfileInfoDiv>
@@ -183,12 +199,44 @@ export default function UserPage (props){
                                         </UserProfileInfoDiv>
                                         <EditProfileAnchor href="/perfil/configuracoes/editarperfil">
                                             <Button>
-                                                <EditIcon style={{marginRight:"5px"}}/> <span>EDITAR PERFIL</span>
+                                                <EditIcon style={{marginRight:"5px", verticalAlign:"middle"}}/> <span>EDITAR PERFIL</span>
                                             </Button>
                                         </EditProfileAnchor>
                                     </HeaderContainer>
+                                    <CheckTeacherDiv>
+                                    <>
+                                    {
+                                        state.isCollaborativeTeacher ?
+                                        (
+                                            [
+                                                <>
+                                                <img src={CheckDecagram} style={{color:"#00bcd4"}}/>
+                                                <span>Professor(a)</span>
+                                                </>
+                                            ]
+                                        )
+                                        :
+                                        (
+                                            [
+                                                <p style={{fontSize:"15px", lineHeight:"22px", textAlign:"left", margin:"0 0 10px"}}>
+                                                <span style={{cursor:"pointer"}}>
+                                                <span style={{paddingRight:"5px"}}>
+                                                <img src={CheckDecagram}/>
+                                                </span>
+                                                Você é professor(a) e gostaria de publicar recursos?
+                                                <span style={{color:"#00bcd4"}}> SAIBA MAIS</span>
+                                                </span>
+                                                </p>
+                                            ]
+                                        )
+                                    }
+                                    </>
+                                    </CheckTeacherDiv>
+                                    <RodapeDiv>
+                                    </RodapeDiv>
                                 </ContainerUserProfile>
                             </MainContainerDesktop>
+                            </div>
                         </HeaderDiv>
                     </React.Fragment>
                 ]

src/Store.js

@@ -39,7 +39,9 @@ const initialState = {
       email : '',
       accessToken : '',
       client : '',
-      education : ''
+      education : '',
+      isCollaborativeTeacher : false,
+      userAvatar : ''
   }
 }
 

src/img/check-decagram-gray.svg

+<svg width="22" height="21" viewBox="0 0 22 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22 10.46L19.56 7.68L19.9 4L16.29 3.18L14.4 0L11 1.46L7.6 0L5.71 3.18L2.1 3.99L2.44 7.67L0 10.46L2.44 13.24L2.1 16.93L5.71 17.75L7.6 20.93L11 19.46L14.4 20.92L16.29 17.74L19.9 16.92L19.56 13.24L22 10.46ZM9 15.46L5 11.46L6.41 10.05L9 12.63L15.59 6.04L17 7.46L9 15.46Z" fill="#D1D1D1"/>
+</svg>