diff --git a/src/Pages/UserPage.js b/src/Pages/UserPage.js index 25055b327db857ab3260b1e48416ba08c1ee8c6a..29d7c59c81ad3d85c79995bba7ce5823790ab56d 100644 --- a/src/Pages/UserPage.js +++ b/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> ] diff --git a/src/Store.js b/src/Store.js index 3c12dad71a80a9c9e93b8d0d4ca43e36e2608bc4..eaacb6bbe6105fc36d51008561821c1e38d015de 100644 --- a/src/Store.js +++ b/src/Store.js @@ -39,7 +39,9 @@ const initialState = { email : '', accessToken : '', client : '', - education : '' + education : '', + isCollaborativeTeacher : false, + userAvatar : '' } } diff --git a/src/img/check-decagram-gray.svg b/src/img/check-decagram-gray.svg new file mode 100644 index 0000000000000000000000000000000000000000..a2415acd16d87f63695aa51800458ade254c530c --- /dev/null +++ b/src/img/check-decagram-gray.svg @@ -0,0 +1,3 @@ +<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>