trabalhando no esqueleto da pagina de usuario

src/Components/IllegalContentModal.js

@@ -112,7 +112,7 @@ export default function IllegalContentModal (props) {
             <Fade in={props.open}>
                 <StyledDivContainer >
                     <StyledDivContent>
-                        <StyledH2>{state.loginInfo.username}!</StyledH2>
+                        <StyledH2>{state.currentUser.username}!</StyledH2>
                         <div>
                             <StyledParagraph>Seu recurso não está de acordo com os termos</StyledParagraph>
                             </div>

src/Components/LoginModal.js

@@ -20,7 +20,7 @@ import React, {useContext} from 'react';
 import { Button } from '@material-ui/core';
 import Modal from '@material-ui/core/Modal';
 import Backdrop from '@material-ui/core/Backdrop';
-import Fade from '@material-ui/core/Fade';
+import Zoom from '@material-ui/core/Fade';
 import styled from 'styled-components'
 import LoginContainer from './LoginContainer'
 import {Store} from '../Store.js'
@@ -82,12 +82,12 @@ export default function LoginModal (props){
                 timeout: 500,
             }}
          >
-            <Fade in={props.open}>
+            <Zoom in={props.open} style={{ transitionDelay :"0.4ms"}}>
                 <LoginContainer handleClose={props.handleClose}
                  openSignUp={props.openSignUp}
                  handleLoginInfo={handleLoginInfo}
                 />
-            </Fade>
+            </Zoom>
         </StyledLogin>
     )
 }

src/Components/MenuBar.js

@@ -107,7 +107,7 @@ export default function MenuBar(props){
   ]
 
   const minhaArea = [
-      { name: "Perfil e Atividades", href: "/perfil/atualizacoes"},
+      { name: "Perfil e Atividades", href: "/perfil-atualizacoes"},
       { name: "Recursos Publicados", href: "/perfil/recursos-publicados"},
       { name: "Favoritos", href: "/perfil/favoritos"},
       { name: "Coleções", href: "/perfil/colecoes"},

src/Components/SignUpModal.js

@@ -90,7 +90,7 @@ export default function SignUpModal (props) {
         )
     }
 
-    //useEffect(()=>{console.log(state.loginInfo)},[state.loginInfo])
+    //useEffect(()=>{console.log(state.currentUser)},[state.currentUser])
 
     return (
         <StyledModalSignUp

src/Pages/UserPage.js

@@ -16,32 +16,191 @@ GNU Affero General Public License for more details.
 You should have received a copy of the GNU Affero General Public License
 along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
 
-import React from 'react';
+import React, {useState, useContext} from 'react';
 import styled from 'styled-components'
+import { Container } from 'react-grid-system'
+import Button from '@material-ui/core/Button';
+import IconButton from '@material-ui/core/IconButton';
+import PhotoCamera from '@material-ui/icons/PhotoCamera';
+import Tooltip from '@material-ui/core/Tooltip';
+import Breadcrumbs from '@material-ui/core/Breadcrumbs';
+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';
 
-
-const maindDiv = styled.div`
+const HeaderDiv = styled.div`
     background-color : #f4f4f4;
     color : #666;
     font-size : 14px;
     line-height : 20px;
 `
-const breadcrumbsDiv = styled.div`
+
+const BreadcrumbsDiv = styled.div`
+    padding : 10px;
+    display : flex;
+    justify-content : center;
+`
+
+const StyledBreadcrumbs = styled(Breadcrumbs)`
     display : flex;
-    justify:content : center;
-    padding: 10px;
+    justify-content : flex-start;
+    max-width : 1170px;
+`
+
+const MainContainerDesktop = styled(Container)`
+    padding : 10px 0 8px 0;
+`
+
+const ContainerUserProfile = styled(Container)`
+    padding : 0;
+    background-color : #fff;
+    magin-bottom: 30px;
+    width : 1170px;
+    margin-right : auto;
+    margin-left : auto;
+`
+const HeaderContainer = styled(Container)`
+    background-color : #afeeee;
+    position :  relative;
+`
+
+const CoverContainer = styled(Container)`
+    height : 230px;
+    position : relative;
+`
+const ProfileAvatarDiv = styled.div`
+    bottom : -65px;
+    left : 60px;
+    border-radius : 100%;
+    position : absolute;
+    width : 150px;
+    height : 150px;
+    overflow : hidden;
+    border : 8px solid #fff;
+    outline : 0;
+    cursor : pointer;
+`
+const ChangeAvatarDiv = styled.div`
+    height : 40px;
+    position: absolute;
+    width : 100%;
+    bottom : 0;
+    display : flex;
+    background-color : #000;
+    color : #fff;
+    justify-content : center;
+`
+
+const UserProfileInfoDiv = styled.div`
+    position : absolute;
+    bottom : 0;
+    left : 260px;
+    overflow : hidden;
+    margin-bottom : 20px;
+`
+
+const EditProfileAnchor = styled.a`
+    Button {
+        background-color : #fafafa;
+        position : absolute;
+        right : 5px;
+        bottom : 0;
+        margin-bottom : 20px;
+        color : #666;
+        padding : 0 10px;
+        text-decoration : none;
+        border-radius : 3px;
+        min-height : 36px;
+        min-width : 88px;
+        line-height : 36px;
+        border : 0;
+        display: inline-block;
+        text-align : center;
+    }
 `
 
 export default function UserPage (props){
+    const {state, dispatch} = useContext(Store)
+    const userImg = ""
+    const [hoverAlterarFoto, handleAlterarFoto] = React.useState(false)
+
+    const handleHoverAlterarFoto = () => {
+        handleAlterarFoto(!hoverAlterarFoto)
+    }
+
+    const redirect = () => {
+        props.history.push('/')
+    }
+
+    return (
+        <>
+        {
+            state.userIsLoggedIn?
+            (
+                [
+                    <React.Fragment>
+                        <HeaderDiv>
+                            <BreadcrumbsDiv>
+                                <StyledBreadcrumbs>
+                                    <Link href="/" style={{color:"#00bcd4"}}>
+                                        Página Inicial
+                                    </Link>
+                                    <span style={{color:"#a5a5a5"}}>
+                                        Minha área
+                                    </span>
+                                    <span style={{color:"#a5a5a5"}}>
+                                        Atividades
+                                    </span>
+                                </StyledBreadcrumbs>
+                            </BreadcrumbsDiv>
+
+                            <MainContainerDesktop>
+                                <ContainerUserProfile>
+                                    <HeaderContainer>
+                                        <CoverContainer>
+                                            {userImg == "" && <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">
+                                                    <IconButton style={{position:"absolute",right:"0",top:"0",color:"#fff"}}color="primary" aria-label="upload picture" component="span">
+                                                        <PhotoCamera />
+                                                    </IconButton>
+                                                </Tooltip>
+                                            </label>
+                                        </CoverContainer>
+                                        <ProfileAvatarDiv>
+                                            {userImg == "" && <span>user avatar</span>}
+                                            <ChangeAvatarDiv onMouseEnter={handleHoverAlterarFoto} onMouseLeave={handleHoverAlterarFoto}>
+                                                {hoverAlterarFoto && <span>Alterar Foto</span>}
+                                            </ChangeAvatarDiv>
+                                        </ProfileAvatarDiv>
+                                        <UserProfileInfoDiv>
+                                            <p style={{fontSize:"28px", color:"#fff", marginBottom:"2px", fontWeight:"500"}}>{state.currentUser.username}</p>
+                                            <div style={{fontSize:"14px", color:"#fff", marginBottom:"2px"}}>
+                                                <p>{state.currentUser.education}</p>
+                                            </div>
+                                        </UserProfileInfoDiv>
+                                        <EditProfileAnchor href="/perfil/configuracoes/editarperfil">
+                                            <Button>
+                                                <EditIcon style={{marginRight:"5px"}}/> <span>EDITAR PERFIL</span>
+                                            </Button>
+                                        </EditProfileAnchor>
+                                    </HeaderContainer>
+                                </ContainerUserProfile>
+                            </MainContainerDesktop>
+                        </HeaderDiv>
+                    </React.Fragment>
+                ]
+            )
+            : (
+                <>
+                {redirect()}
+                </>
+            )
+        }
+        </>
 
-      return (
-        <mainDiv>
-            <breadcrumbsDiv>
-                <ol style={{listStyle:"none"}}>
-                    <li><a href="/"><span>Página Principal</span> </a> </li>/<li><span>Minha área</span></li>/<li><span>Atividades</span></li>
-                </ol>
-            </breadcrumbsDiv>
-        </mainDiv>
-      );
+      )
 
   }

src/Store.js

@@ -34,11 +34,12 @@ const initialState = {
     width: 0,
     height: 0
 },
-  loginInfo: {
+  currentUser: {
       username : 'Horstmann',
       email : '',
       accessToken : '',
-      client : ''
+      client : '',
+      education : ''
   }
 }
 
@@ -63,19 +64,19 @@ function reducer(state, action) {
       return {
           ...state,
           userIsLoggedIn:action.userLoggedIn,
-          loginInfo:action.login
+          currentUser:action.login
     }
     case 'USER_SIGNED_UP':
       return {
           ...state,
           userIsLoggedIn:action.userLoggedIn,
-          loginInfo:action.login
+          currentUser:action.login
     }
     case 'USER_LOGGED_OUT':
         return {
             ...state,
             userIsLoggedIn:action.userLoggedOut,
-            loginInfo:action.login
+            currentUser:action.login
         }
     case 'USER_AGREED_TO_PUBLICATION_TERMS':
         return {