all components were previously in user page

src/Components/UserPageComponents/Avatar.js

+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+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, {useState, useContext} from 'react';
+import styled from 'styled-components'
+import { Store } from '../../Store.js';
+import axios from 'axios'
+import {apiUrl, apiDomain} from '../../env';
+import noAvatar from "../../img/default_profile.png";
+import ModalAlterarAvatar from '../ModalAlterarAvatar/ModalAlterarAvatar.js'
+
+export default function ProfileAvatar (props) {
+    const {state} = useContext(Store)
+
+    const [currentAvatar, setAvatar] = useState(state.currentUser.userAvatar)
+
+    const [hoverBool, toggleHover] = React.useState(false)
+    const handleToggleHover = () => {toggleHover(!hoverBool)}
+
+    const [open, toggleOpen] = useState(false)
+    const controlModal = () => {toggleOpen(!open)}
+
+    return (
+        <>
+            <ModalAlterarAvatar
+                open={open}
+                handleClose={controlModal}
+                userAvatar={currentAvatar}
+            />
+
+            <ProfileAvatarDiv onMouseEnter={handleToggleHover} onMouseLeave={handleToggleHover} onClick={controlModal}>
+                <img src={currentAvatar ? apiDomain + currentAvatar : noAvatar} alt = "user avatar" style={{height : "inherit", width : "inherit", border:"0", verticalAlign:"middle"}}/>
+                <ChangeAvatarDiv  style={ {display : hoverBool ? 'flex' : 'none'}}>
+                    <span>Alterar Foto</span>
+                </ChangeAvatarDiv>
+            </ProfileAvatarDiv>
+
+        </>
+    )
+}
+
+const ProfileAvatarDiv = styled.div`
+    bottom : -55px;
+    left : 60px;
+    border-radius : 100%;
+    position : absolute;
+    width : 150px;
+    height : 150px;
+    overflow : hidden;
+    border : 8px solid #fff;
+    outline : 0;
+    cursor : pointer;
+    background-color : #a5a5a5;
+`
+
+const ChangeAvatarDiv = styled.div`
+  height : 40px;
+  position: absolute;
+  width : 100%;
+  bottom : 0;
+  display : flex;
+  background-color : #000;
+  color : #fff;
+  justify-content : center;
+`

src/Components/UserPageComponents/Cover.js

+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+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, {useState, useContext} from 'react';
+import { Store } from '../../Store.js';
+import axios from 'axios'
+import {apiUrl, apiDomain} from '../../env';
+import {CoverContainer} from '../TabPanels/StyledComponents.js'
+import IconButton from '@material-ui/core/IconButton';
+import PhotoCamera from '@material-ui/icons/PhotoCamera';
+import Tooltip from '@material-ui/core/Tooltip';
+import ModalAlterarCover from '../ModalAlterarCover/ModalAlterarCover.js'
+
+export default function Cover (props) {
+    const {state} = useContext(Store)
+
+    const [currentCover, setCoverImg] = useState(state.currentUser.userCover)
+    const [tempCover, setTempCover] = useState('')
+
+    const [open, toggleOpen] = useState(false)
+    const controlModal = () => {toggleOpen(!open)}
+
+    const updateCover = (selectorFiles : FileList) => {
+        const objectURL = URL.createObjectURL(selectorFiles[0])
+        console.log(objectURL)
+        setTempCover(objectURL)
+        controlModal()
+    }
+
+    return (
+        <>
+            <ModalAlterarCover
+                open = {open}
+                handleClose={controlModal}
+                cover={tempCover}
+            />
+            <CoverContainer>
+                {currentCover && <img src={apiDomain + currentCover} alt = '' style= {{width:"100%", height:"100%", objectFit : "cover" }}/>}
+                <input accept="image/*" style = {{display:"none"}} id="icon-button-file" type="file" onChange={(e) => updateCover(e.target.files)}/>
+                <label htmlFor="icon-button-file">
+                    <Tooltip title={<span style={{fontSize:"14px", overflow:"hidden", transition:"all .5s ease"}}>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>
+        </>
+    )
+}

src/Components/UserPageComponents/EditProfileButton.js

+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+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, {useContext} from 'react';
+import { Store } from '../../Store.js';
+import styled from 'styled-components'
+import {Link} from 'react-router-dom';
+import EditIcon from '@material-ui/icons/Edit';
+import Button from '@material-ui/core/Button';
+
+export default function EditProfileButton () {
+    const {state} = React.useContext(Store)
+
+    return (
+        <EditProfileAnchor to="/editarperfil">
+            <Button>
+                {state.windowSize.width >=900 ?
+                    (
+                        <React.Fragment>
+                            <EditIcon style={{marginRight:"5px", verticalAlign:"middle"}}/> <span>EDITAR PERFIL</span>
+                        </React.Fragment>
+                    )
+                    :
+                    (
+                        <EditIcon style={{marginRight:"5px", verticalAlign:"middle"}}/>
+                    )
+                }
+            </Button>
+        </EditProfileAnchor>
+    )
+}
+
+const EditProfileAnchor = styled(Link)`
+  Button {
+      box-shadow : 0 2px 5px 0 rgba(0,0,0,.26);
+      background-color : #fafafa;
+      position : absolute;
+      right : 5px;
+      bottom : 0;
+      margin-bottom : 20px;
+      color : #666;
+      padding : 0 10px;
+      text-decoration : none;
+      border-radius : 3px;
+      @media screen and (min-width: 800px) {
+          min-height : 36px;
+          min-width : 88px;
+      }
+      line-height : 36px;
+      border : 0;
+      display: inline-block;
+      text-align : center;
+      :hover{
+        background-color : #fafafa;
+      }
+      @media screen and (max-width: 600px) {
+          max-width : 44px !important ;
+      }
+  }
+`

src/Components/UserPageComponents/SubmitterStatus.js

+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+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, {useContext} from 'react';
+import { Store } from '../../Store.js';
+import CheckDecagram from '../../img/check-decagram-gray.svg'
+
+export default function SubmitterStatus (props) {
+    const {state} = React.useContext(Store)
+
+    let text;
+    switch (state.currentUser.submitter_request) {
+        case 'requested':
+            text = "Verificando cadastro de professor(a)"
+            break;
+        case 'accepted':
+            text = "Professor(a)"
+            break;
+        default:
+            text = "Você é professor(a) e gostaria de publicar recursos?"
+    }
+
+    return (
+        <React.Fragment>
+            <p style={{fontSize:"15px", lineHeight:"22px", textAlign:"left", margin:"0 0 10px"}}>
+                <span style={{cursor:"pointer"}}>
+                                <span style={{paddingRight:"5px"}}>
+                                    <img src={CheckDecagram}/>
+                                </span>
+                                {text}
+                                <span style={{color:"#00bcd4"}}> SAIBA MAIS</span>
+                </span>
+            </p>
+        </React.Fragment>
+    )
+
+}

src/Components/UserPageComponents/UserInfo.js

+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+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, {useContext} from 'react';
+import { Store } from '../../Store.js';
+import {UserProfileInfoDiv} from '../TabPanels/StyledComponents.js'
+
+export default function UserInfo (props) {
+    const {state} = useContext(Store)
+
+    const user = state.currentUser.username
+    const education = state.currentUser.education
+
+    return (
+        <UserProfileInfoDiv>
+            <p style={{fontSize:"28px", color:"#fff", paddingTop:"5px", paddingBottom:"5px", fontWeight:"500", backgroundColor:"#77777796", borderRadius : "5px"}}>{user}</p>
+            <div style={{fontSize:"14px", color:"#fff", marginBottom:"2px"}}>
+                <p>{education}</p>
+            </div>
+        </UserProfileInfoDiv>
+    )
+}