diff --git a/src/Components/MenuBar.js b/src/Components/MenuBar.js
index f7c90fb551cd93e52d644afcc4d9b8d4a0cde73b..75550ecfa33bf8355e542b1907b02623c215346d 100644
--- a/src/Components/MenuBar.js
+++ b/src/Components/MenuBar.js
@@ -29,7 +29,7 @@ import styled from 'styled-components'
import { Store } from '../Store';
import CloudUploadIcon from '@material-ui/icons/CloudUpload';
import Notifications from "./Notifications.js"
-import CustomizedMenus from './MenuList'
+import MenuList from './MenuList'
const ContainerStyled = styled(Container)`
*{ text-decoration: none }
@@ -149,7 +149,7 @@ export default function MenuBar(props){
<Notifications/>
</div>
- <CustomizedMenus items={minhaArea}/>
+ <MenuList items={minhaArea}/>
</>
]
diff --git a/src/Components/MenuList.js b/src/Components/MenuList.js
index 5652912f35b10d55da9dc1ba178d80394267e8ae..ee25a683be17fe2bc9318fe7e07ba597f4ff43ab 100644
--- a/src/Components/MenuList.js
+++ b/src/Components/MenuList.js
@@ -42,7 +42,7 @@ const OverrideButton = styled(Button)`
text-transform : none !important;
`
-export default function CustomizedMenus(props) {
+export default function MenuList(props) {
const [anchorEl, setAnchorEl] = React.useState(null);
const { state, dispatch } = useContext(Store)
@@ -77,7 +77,16 @@ export default function CustomizedMenus(props) {
onMouseEnter={handleClick}
>
- <img src={Profile} alt={''} style={{maxWidth:"50px", maxHeight:"50px", borderRadius:"25px"}}/>
+ {
+ state.currentUser.userAvatar === '' ?
+ (
+
+ <img src={Profile} alt={''} style={{maxWidth:"50px", maxHeight:"50px", borderRadius:"25px"}}/>
+ ):
+ (
+ <img src={state.currentUser.userAvatar} alt={''}/>
+ )
+ }
<span style={{fontFamily:"inherit", fontWeight:"400", color:"#666"}}>Minha Ãrea </span> <KeyboardArrowDownIcon/>
</OverrideButton>
diff --git a/src/Components/TabAtividades.js b/src/Components/TabAtividades.js
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/Pages/UserPage.js b/src/Pages/UserPage.js
index 29d7c59c81ad3d85c79995bba7ce5823790ab56d..f30f99e97fadf1863592caa310a2c0ab4b0eadf1 100644
--- a/src/Pages/UserPage.js
+++ b/src/Pages/UserPage.js
@@ -29,116 +29,14 @@ 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;
- color : #666;
- font-size : 14px;
- line-height : 20px;
-`
-
-const BreadcrumbsDiv = styled.div`
- padding : 10px;
- display : flex;
- justify-content : center;
-`
-
-const StyledBreadcrumbs = styled(Breadcrumbs)`
- display : flex;
- 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;
- padding-left : 0 !important;
- padding-right : 0 !important;
- 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;
- }
-`
-
-const CheckTeacherDiv = styled.div`
- font-size : 14px;
- padding-top : 10px;
- padding-left : 250px;
- margin-bottom : -10px;
- color : #666 !important;
-`
-
-const RodapeDiv = styled.div`
-
-`
+import Tabs from '@material-ui/core/Tabs';
+import Tab from '@material-ui/core/Tab';
export default function UserPage (props){
const {state, dispatch} = useContext(Store)
const coverImg = ''
const [hoverAlterarFoto, handleAlterarFoto] = React.useState(false)
+ const [value, setValue] = useState(0);
const handleHoverAlterarFoto = () => {
handleAlterarFoto(!hoverAlterarFoto)
@@ -148,6 +46,10 @@ export default function UserPage (props){
props.history.push('/')
}
+ const handleChangeTab = (event, newValue) => {
+ setValue(newValue)
+ }
+
return (
<>
{
@@ -186,7 +88,7 @@ export default function UserPage (props){
</label>
</CoverContainer>
<ProfileAvatarDiv onMouseEnter={handleHoverAlterarFoto} onMouseLeave={handleHoverAlterarFoto}>
- <img src={state.userAvatar}/>
+ <img src={state.currentUser.userAvatar}/>
<ChangeAvatarDiv style={ {display : hoverAlterarFoto ? 'flex' : 'none'}}>
<span>Alterar Foto</span>
</ChangeAvatarDiv>
@@ -219,13 +121,13 @@ export default function UserPage (props){
(
[
<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>
+ <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>
]
)
@@ -233,6 +135,22 @@ export default function UserPage (props){
</>
</CheckTeacherDiv>
<RodapeDiv>
+ <NavBarContentContainer>
+ <Tabs
+ value ={value}
+ onChange ={handleChangeTab}
+ indicatorColor ="primary"
+ textColor ="primary"
+ variant = "scrollable"
+ scrollButtons = "auto"
+ >
+ <Tab label="Atividades"/>
+ <Tab label="Meus Recursos"/>
+ <Tab label="Favoritos"/>
+ <Tab label="Coleções"/>
+ <Tab label="Rede"/>
+ </Tabs>
+ </NavBarContentContainer>
</RodapeDiv>
</ContainerUserProfile>
</MainContainerDesktop>
@@ -252,3 +170,117 @@ export default function UserPage (props){
)
}
+
+ const HeaderDiv = styled.div`
+ background-color : #f4f4f4;
+ color : #666;
+ font-size : 14px;
+ line-height : 20px;
+ `
+
+ const BreadcrumbsDiv = styled.div`
+ padding : 10px;
+ display : flex;
+ justify-content : center;
+ `
+
+ const StyledBreadcrumbs = styled(Breadcrumbs)`
+ display : flex;
+ 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;
+ padding-left : 0 !important;
+ padding-right : 0 !important;
+ 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;
+ }
+ `
+
+ const CheckTeacherDiv = styled.div`
+ font-size : 14px;
+ padding-top : 10px;
+ padding-left : 250px;
+ margin-bottom : -10px;
+ color : #666 !important;
+ `
+
+ const RodapeDiv = styled.div`
+ justify-content : flex-end;
+ display : flex;
+ `
+
+ const NavBarContentContainer = styled(Container)`
+ background-color : #fff;
+ padding-bottom : 0;
+ overflow-x : hidden !important;
+ overflow-y : hid1den !important;
+ margin-right : 0 !important;
+ `
diff --git a/src/img/horstmann.jpg b/src/img/horstmann.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..a4e7e494f1615ddd3e2a650a2fc7099c8e4b3c1a
Binary files /dev/null and b/src/img/horstmann.jpg differ