diff --git a/src/Components/ComponentAlterarAvatar.js b/src/Components/ComponentAlterarAvatar.js
index 3115167a84baaa71524a03d397ccc7aa4c3edc94..f6ed1c11912221e8b2bb46ccf0294bc119e13b2f 100644
--- a/src/Components/ComponentAlterarAvatar.js
+++ b/src/Components/ComponentAlterarAvatar.js
@@ -29,9 +29,10 @@ import CloseIcon from '@material-ui/icons/Close';
import Profile from '../img/default_profile0.png'
const ChangeAvatarDiv = styled.div`
- color:rgba(255,255,255,.7);
+ color : rgba(255,255,255,.7);
background-color:rgba(0,0,0,.5);
- position: absolute;bottom: 0;
+ position: absolute;
+ bottom: 0;
width: inherit;
text-align: center;
font-size: 18px;
@@ -44,54 +45,6 @@ const ChangeAvatarDiv = styled.div`
justify-content: center;
`
-export default function ComponentAlterarAvatar (props) {
-
-
-
- return (
- <ModalDiv style={{maxWidth:"500px", maxHeight:"500px"}}>
- <HeaderDiv>
- <span style={{width:"32px"}}/>
- <StyledH2>Editar Foto</StyledH2>
- <StyledCloseModalButton onClick={props.handleClose}>
- <CloseIcon/>
- </StyledCloseModalButton>
- </HeaderDiv>
- <DialogDiv>
- <div style={{marginTop:"0"}}>
- <form>
- <DivAlterarFoto>
- <DivFlowHolder>
- <AvatarCircleDiv>
- {
- props.userAvatar == '' || props.userAvatar == null ?
- (
-
- <img src={Profile} alt={'user avatar'} style={{height:"inherit", width:"inherit", objectFit:"cover"}}/>
- ):
- (
- <img src={this.props.userAvatar} alt={'user avatar'} style={{height:"inherit", width:"inherit", objectFit:"cover"}}/>
- )
- }
- <ChangeAvatarDiv>
- <span>Alterar</span>
- <input accept="image/*" id="icon-button-file"
- type="file"
- onChange={(e) => props.handleFile(e.target.files) }/>
- </ChangeAvatarDiv>
- </AvatarCircleDiv>
- </DivFlowHolder>
- </DivAlterarFoto>
- <ButtonsDiv>
- <ButtonCancelar><span>Cancelar</span></ButtonCancelar><ButtonConfirmar><span>Salvar Alterações</span></ButtonConfirmar>
- </ButtonsDiv>
- </form>
- </div>
- </DialogDiv>
- </ModalDiv>
- )
-
-}
const ModalDiv = styled.div`
background-color : #fff;
@@ -102,70 +55,70 @@ const ModalDiv = styled.div`
flex-direction : column;
`
-const ButtonConfirmar = styled(Button)`
- color : rgba(255,255,255,0.87);
- background-color: rgb(0,188,212);
- display: inline-block;
- position: relative;
- cursor: pointer;
- min-height: 36px;
- min-width: 88px;
- line-height: 36px;
- vertical-align: middle;
- align-items: center;
- text-align: center;
- border-radius: 3px;
- box-sizing: border-box;
- user-select: none;
- border: 0;
- padding: 0 6px;
- margin: 6px 8px;
- background: transparent;
- background-color: transparent;
- color: currentColor;
- white-space: nowrap;
- text-transform: uppercase;
- font-weight: 500;
- font-size: 14px;
- font-style: inherit;
- font-variant: inherit;
- font-family: inherit;
- text-decoration: none;
- overflow: hidden;
+const StyledButtonConfirmar = styled(Button)`
+ background-color : #00acc1 !important;
+ color: #fff !important;
+ display: inline-block !important;
+ position: relative !important;
+ cursor: pointer !important;
+ min-height: 36px !important;
+ min-width: 88px !important;
+ line-height: 36px !important;
+ vertical-align: middle !important;
+ align-items: center !important;
+ text-align: center !important;
+ border-radius: 4px !important;
+ box-sizing: border-box !important;
+ user-select: none !important;
+ border: 0 !important;
+ padding: 0 6px !important;
+ margin: 6px 8px !important;
+ background: transparent !important;
+ background-color: transparent !important;
+ color: currentColor !important;
+ white-space: nowrap !important;
+ text-transform: uppercase !important;
+ font-weight: 500 !important;
+ font-size: 14px !important;
+ font-style: inherit !important;
+ font-variant: inherit !important;
+ font-family: inherit !important;
+ text-decoration: none !important;
+ overflow: hidden !important;
`
const ButtonCancelar = styled(Button)`
- outline : none;
- display: inline-block;
- position: relative;
- cursor: pointer;
- min-height: 36px;
- min-width: 88px;
- line-height: 36px;
- vertical-align: middle;
- align-items: center;
- text-align: center;
- border-radius: 3px;
- box-sizing: border-box;
- user-select: none;
- border: 0;
- padding: 0 6px;
- margin: 6px 8px;
- background:transparent;
- color: currentColor;
- white-space: nowrap;
- text-transform: uppercase;
- font-weight: 500;
- font-size: 14px;
- font-style: inherit;
- font-variant: inherit;
- font-family: inherit;
- text-decoration: none;
- overflow: hidden;
+ outline : none !important;
+ display: inline-block !important;
+ position: relative !important;
+ cursor: pointer !important;
+ min-height: 36px !important;
+ min-width: 88px !important;
+ line-height: 36px !important;
+ vertical-align: middle !important;
+ align-items: center !important;
+ text-align: center !important;
+ border-radius: 3px !important;
+ box-sizing: border-box !important;
+ user-select: none !important;
+ border: 0 !important;
+ padding: 0 6px !important;
+ margin: 6px 8px !important;
+ background:transparent !important;
+ color: currentColor !important;
+ white-space: nowrap !important;
+ text-transform: uppercase !important;
+ font-weight: 500 !important;
+ font-size: 14px !important;
+ font-style: inherit !important;
+ font-variant: inherit !important;
+ font-family: inherit !important;
+ text-decoration: none !important;
+ overflow: hidden !important;
`
const ButtonsDiv = styled.div`
- display: flex;
+ display : flex;
justify-content:flex-end;
`
@@ -224,3 +177,50 @@ const StyledCloseModalButton = styled(Button)`
height : 40px;
margin : 0 6px;
`
+
+export default function ComponentAlterarAvatar (props) {
+ return (
+ <ModalDiv style={{maxWidth:"500px", maxHeight:"500px"}}>
+ <HeaderDiv>
+ <span style={{width:"32px"}}/>
+ <StyledH2>Editar Foto</StyledH2>
+ <StyledCloseModalButton onClick={props.handleClose}>
+ <CloseIcon/>
+ </StyledCloseModalButton>
+ </HeaderDiv>
+ <DialogDiv>
+ <div style={{marginTop:"0"}}>
+ <form>
+ <DivAlterarFoto>
+ <DivFlowHolder>
+ <AvatarCircleDiv>
+ {
+ props.userAvatar == '' || props.userAvatar == null ?
+ (
+
+ <img src={Profile} alt={'user avatar'} style={{height:"inherit", width:"inherit", objectFit:"cover"}}/>
+ ):
+ (
+ <img src={this.props.userAvatar} alt={'user avatar'} style={{height:"inherit", width:"inherit", objectFit:"cover"}}/>
+ )
+ }
+ <ChangeAvatarDiv>
+ <span>Alterar</span>
+ <input accept="image/*" id="icon-button-file"
+ type="file"
+ onChange={(e) => props.handleFile(e.target.files) }
+ style={{display:"none"}}/>
+ </ChangeAvatarDiv>
+ </AvatarCircleDiv>
+ </DivFlowHolder>
+ </DivAlterarFoto>
+ <ButtonsDiv>
+ <ButtonCancelar onClick={props.handleClose}><span>Cancelar</span></ButtonCancelar><StyledButtonConfirmar><span>Salvar Alterações</span></StyledButtonConfirmar>
+ </ButtonsDiv>
+ </form>
+ </div>
+ </DialogDiv>
+ </ModalDiv>
+ )
+
+}
diff --git a/src/Components/ContainerRedeVazia.js b/src/Components/ContainerRedeVazia.js
new file mode 100644
index 0000000000000000000000000000000000000000..287e33c18aed5b93b82c96e2c0cfd34e8cfe7da7
--- /dev/null
+++ b/src/Components/ContainerRedeVazia.js
@@ -0,0 +1,72 @@
+import React, {useContext, useState, useEffect} from 'react'
+import styled from 'styled-components'
+import { Container } from 'react-grid-system'
+import {ButtonMostrarTodos, ButtonMostrarMais, BtnAlinhaRecPvt, DivContainerRecursosPublicados, ContainerDivStyled, DivTitulo, StyledP, StyledHR} from './TabPanelMeusRecursos.js'
+import NoRede1 from '../img/no-rede-1.png'
+import NoRede2 from '../img/no-rede-2.png'
+import NoRede3 from '../img/no-rede-3.png'
+import Paper from '@material-ui/core/Paper';
+import TabRedeImgDiv from './TabRedeImgDiv.js'
+
+export default function ContainerRedeVazia (props) {
+ return (
+ <React.Fragment>
+ <ContainerDivStyled>
+ <Paper elevation={3}>
+ <div>
+ <RedeVaziaBoxContainer>
+ <StyledSpan>Você ainda não tem uma rede.
+ <br/>
+ Veja como começar:
+ </StyledSpan>
+ <StyledSpan>
+ <StyledHr/>
+ <DivColumns>
+ <TabRedeImgDiv img={NoRede1} text={"Para encontrar um usuário especÃfico, você pode utilizar a barra de busca e selecionar a busca por \"pessoas\""}/>
+ <TabRedeImgDiv img={NoRede2} text={"Você pode começar a seguir uma pessoa clicando no botão \"seguir\" no card (A) ou na página dela (B)"}/>
+ <TabRedeImgDiv img={NoRede3} text={"Pronto! Agora você poderá acompanhar os novos recursos e coleções dessa pessoas na sua página, na aba \"Perfil e Atividades\""}/>
+ </DivColumns>
+ </StyledSpan>
+ </RedeVaziaBoxContainer>
+ </div>
+ </Paper>
+ </ContainerDivStyled>
+ </React.Fragment>
+ )
+}
+
+const DivColumns = styled.div`
+ display : flex;
+ flex-direction : row;
+ aling-items : space-between
+ padding-right : 15px;
+ padding-left : 15px
+`
+
+const StyledHr = styled.hr`
+ margin-top : 20px;
+ margin-bottom : 20px;
+ border : 0;
+ border-top: 1px solid #eee;
+`
+
+const RedeVaziaBoxContainer = styled.div`
+ background-color : #fff;
+ box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+ padding: 30px;
+ padding-right: 30px;
+ padding-left: 30px;
+ margin-bottom: 30px;
+ text-align: center;
+ height: 100%;
+ padding-left: 0 !important;
+ padding-right: 0 !important;
+ margin-top: 20px;
+}
+`
+const StyledSpan = styled.span`
+ font-weight : lighter;
+ margin-top: 0;
+ font-family: Roboto;
+ font-size: 24px;
+`
diff --git a/src/Components/LoginModal.js b/src/Components/LoginModal.js
index 052084e7e177ddee4f5fd4a5707fa6791d1658d5..3b0482fd647207cd6bb133d2b22c79487087925d 100644
--- a/src/Components/LoginModal.js
+++ b/src/Components/LoginModal.js
@@ -69,19 +69,17 @@ export default function LoginModal (props){
userLoggedIn: !state.userIsLoggedIn,
login: {
id : response.data.id,
- username : response.data.name,
- email : response.data.email,
+ username : response.data.data.name,
+ email : response.data.data.email,
accessToken : response.headers['access-token'],
clientToken : response.headers.client,
- userAvatar : response.data.avatar_file_name,
- userCover : response.data.cover_file_name
+ userAvatar : response.data.data.avatar_file_name,
+ userCover : response.data.data.cover_file_name
}
}
)
- // console.log(response.headers)
- console.log(login)
- // console.log(response.data.data.name)
- // console.log(response.data.data.uid)
+ props.handleClose();
+ props.openSnackbar();
localStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
localStorage.setItem('@portalmec/clientToken', response.headers.client,)
sessionStorage.setItem('@portalmec/id', response.data.data.id)
@@ -91,8 +89,6 @@ export default function LoginModal (props){
localStorage.setItem('@portalmec/email', login.email)
localStorage.setItem('@portalmec/senha', login.senha) //MUDAR ISSO ASAP
}
- props.handleClose();
- props.openSnackbar();
}, (error) => {
{handleSnackbar(true)}
}
@@ -120,7 +116,7 @@ export default function LoginModal (props){
timeout: 500,
}}
>
- <Zoom in={props.open} style={{ transitionDelay :"0.4ms"}}>
+ <Zoom in={props.open} style={{ transitionDelay :"0.2ms"}}>
<LoginContainer handleClose={props.handleClose}
openSignUp={props.openSignUp}
handleLoginInfo={handleLoginInfo}
diff --git a/src/Components/TabPanelMeusRecursos.js b/src/Components/TabPanelMeusRecursos.js
index 1f2b432b49f754cfa3055bde367635da22796bb0..29864d8c201f65b224631b54abab898340b94e64 100644
--- a/src/Components/TabPanelMeusRecursos.js
+++ b/src/Components/TabPanelMeusRecursos.js
@@ -23,7 +23,7 @@ export default function TabPanelAtividades (props) {
axios.all([
axios.get((`${apiUrl}/users/` + props.id + '/learning_objects'), props.config),
axios.get((`${apiUrl}/users/` + props.id + '/drafts'), props.config),
- axios.get((`${apiUrl}/users/` + props.id + '/submissions?stats=submitted'), props.config)
+ axios.get((`${apiUrl}/users/` + props.id + '/submissions?status=submitted'), props.config)
])
.then( (responseArr) => {
handleLoading(false)
diff --git a/src/Components/TabPanelRede.js b/src/Components/TabPanelRede.js
index e3f3aa61aa8141b339621cc3bd9de01fd894621c..8a7f2d4b0cf95e5ad5b14c36da7e73b748a56450 100644
--- a/src/Components/TabPanelRede.js
+++ b/src/Components/TabPanelRede.js
@@ -6,43 +6,144 @@ import Button from '@material-ui/core/Button';
import {ButtonMostrarTodos, ButtonMostrarMais, BtnAlinhaRecPvt, DivContainerRecursosPublicados, ContainerDivStyled, DivTitulo, StyledP, StyledHR} from './TabPanelMeusRecursos.js'
import axios from 'axios'
import {apiUrl} from '../env';
+import LoadingSpinner from './LoadingSpinner.js'
+import ContainerRedeVazia from './ContainerRedeVazia.js'
+import {NoPubSpan, DivConteudoNaoPublicado, DivTextoNoPublications} from './TabPanelMeusRecursos.js'
export default function TabPanelRede (props) {
-
+ const [loading, handleLoading] = useState(true)
+
+ const [followingList, setFollowing] = useState([])
+ const [followingListLength, setFollowingLength] = useState(0)
+
+ const [followersList, setFollowers] = useState([])
+ const [followersListLength, setFollowersLength] = useState(1)
+
+ useEffect( () => {
+ axios.all([
+ axios.get((`${apiUrl}/users/` + props.id + '/following/User'), props.config),
+ axios.get((`${apiUrl}/users/` + props.id + '/followers'), props.config)
+ ])
+ .then( (responseArr) => {
+ handleLoading(false)
+ console.log(responseArr)
+ console.log(responseArr[0].data)
+ console.log(responseArr[1].data)
+
+
+ },
+ (error) => {
+ handleLoading(false)
+ console.log('error while running axios all')
+ }
+ )
+ }, [])
return (
- <React.Fragment>
- <ContainerDivStyled>
- <Paper elevation={3}>
- <DivTitulo>
- <StyledP>Seguidor <b style={{fontWeight:"700", fontSize:"20px"}}>(1)</b></StyledP>
- <StyledHR/>
- </DivTitulo>
- <div style={{height : "400px"}}>
- <DivContainerRecursosPublicados>
- </DivContainerRecursosPublicados>
- <BtnAlinhaRecPvt>
- <p style={{margin:"0 0 10px", fontSize:"14px"}}>Carregado 1 de 1</p>
- </BtnAlinhaRecPvt>
- </div>
- </Paper>
- </ContainerDivStyled>
-
- <ContainerDivStyled>
- <Paper elevation={3}>
- <DivTitulo>
- <StyledP>Seguindo <b style={{fontWeight:"700", fontSize:"20px"}}>(1)</b></StyledP>
- <StyledHR/>
- </DivTitulo>
- <div style={{height : "400px"}}>
- <DivContainerRecursosPublicados>
- </DivContainerRecursosPublicados>
- <BtnAlinhaRecPvt>
- <p style={{margin:"0 0 10px", fontSize:"14px"}}>Carregado 1 de 1</p>
- </BtnAlinhaRecPvt>
- </div>
- </Paper>
- </ContainerDivStyled>
- </React.Fragment>
+ <>
+ {
+ loading ?
+ (
+ [
+ <LoadingSpinner text={'CARREGANDO...'}/>
+ ]
+ )
+ :
+ (
+ [
+ <>
+ {
+ followingListLength == 0 && followersListLength == 0 ?
+ (
+ [
+ <>
+ <ContainerRedeVazia/>
+ </>
+ ]
+ )
+ :
+ (
+ [
+ <React.Fragment>
+ <ContainerDivStyled>
+ <Paper elevation={3}>
+ <DivTitulo>
+ <StyledP>Seguidor <b style={{fontWeight:"700", fontSize:"20px"}}>({followingListLength})</b></StyledP>
+ <StyledHR/>
+ </DivTitulo>
+ <div style={{height : "400px"}}>
+ {
+ followingListLength == 0 ?
+ (
+ [
+ <>
+ <DivTextoNoPublications>
+ <DivConteudoNaoPublicado>
+ <NoPubSpan>Você não possui nenhum seguidor.</NoPubSpan>
+ </DivConteudoNaoPublicado>
+ </DivTextoNoPublications>
+ </>
+ ]
+ )
+ :
+ (
+ [
+ <>
+ <DivContainerRecursosPublicados/>
+ <BtnAlinhaRecPvt>
+ <p style={{margin:"0 0 10px", fontSize:"14px"}}>Carregado 1 de 1</p>
+ </BtnAlinhaRecPvt>
+ </>
+ ]
+ )
+ }
+ </div>
+ </Paper>
+ </ContainerDivStyled>
+
+ <ContainerDivStyled>
+ <Paper elevation={3}>
+ <DivTitulo>
+ <StyledP>Seguindo <b style={{fontWeight:"700", fontSize:"20px"}}>({followersListLength})</b></StyledP>
+ <StyledHR/>
+ </DivTitulo>
+ <div style={{height : "400px"}}>
+ {
+ followersListLength == 0 ?
+ (
+ [
+ <>
+ <DivTextoNoPublications>
+ <DivConteudoNaoPublicado>
+ <NoPubSpan>Você ainda não segue nenhum outro usuário.</NoPubSpan>
+ </DivConteudoNaoPublicado>
+ </DivTextoNoPublications>
+ </>
+ ]
+ )
+ :
+ (
+ [
+ <>
+ <DivContainerRecursosPublicados/>
+ <BtnAlinhaRecPvt>
+ <p style={{margin:"0 0 10px", fontSize:"14px"}}>Carregado 1 de 1</p>
+ </BtnAlinhaRecPvt>
+ </>
+ ]
+ )
+ }
+ </div>
+ </Paper>
+ </ContainerDivStyled>
+ </React.Fragment>
+ ]
+ )
+ }
+ </>
+ ]
+ )
+ }
+ </>
)
}
diff --git a/src/Components/TabRedeImgDiv.js b/src/Components/TabRedeImgDiv.js
new file mode 100644
index 0000000000000000000000000000000000000000..95ab72c3c4d79436d142f9d7acde608179c2a977
--- /dev/null
+++ b/src/Components/TabRedeImgDiv.js
@@ -0,0 +1,10 @@
+import React from 'react'
+
+export default function TabRedeImgDiv (props) {
+ return (
+ <div style={{width:"33.33333333%", textAlign : "center"}}>
+ <img src={props.img} alt={'no rede 1'} style={{width : "100%", verticalAlign : "middle", border : "0"}}/>
+ <p style={{fontSize : "14px", fontFamily : "Roboto", margin : "0 0 10px"}}>{props.text}</p>
+ </div>
+ )
+}
diff --git a/src/Pages/UserPage.js b/src/Pages/UserPage.js
index e39dbe78513fcffff61ae14e4a54e018561cd649..890265873066e97416b40fdfa166d8795b5b77de 100644
--- a/src/Pages/UserPage.js
+++ b/src/Pages/UserPage.js
@@ -39,7 +39,7 @@ import TabPanelColecoes from '../Components/TabPanelColecoes.js'
import TabPanelRede from '../Components/TabPanelRede.js'
import axios from 'axios'
import {apiUrl} from '../env';
-import ModarAlterarAvatar from '../Components/ModalAlterarAvatar.js'
+import ModalAlterarAvatar from '../Components/ModalAlterarAvatar.js'
export default function UserPage (props){
const {state, dispatch} = useContext(Store)
@@ -77,7 +77,6 @@ export default function UserPage (props){
'Cookie': ''
})
.then( (response) => {
- console.log(response)
dispatch ({
type : 'USER_ACCESSED_USER_PAGE',
set: {
@@ -91,7 +90,6 @@ export default function UserPage (props){
collectionsCount: response.data.collections_count,
}
})
- console.log(state.currentUser)
},
(error) => {
console.log('error while running ComponentDidMout')
@@ -107,6 +105,11 @@ export default function UserPage (props){
setValue(newValue)
}
+ const updateCover = (selectorFiles : FileList) => {
+ console.log(selectorFiles)
+ console.log(selectorFiles[0].name)
+ }
+
return (
<>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,400,500&display=swap" rel="stylesheet"/>
@@ -115,7 +118,7 @@ export default function UserPage (props){
(
[
<React.Fragment>
- <ModarAlterarAvatar
+ <ModalAlterarAvatar
open={modalOpen}
handleClose={modalControl}
/>
@@ -136,13 +139,13 @@ export default function UserPage (props){
</BreadcrumbsDiv>
<div style={{display:"flex", flexDirection:"column"}}>
- <MainContainerDesktop>
+ <MainContainerDesktop maxwidth="xl">
<Paper elevation={3} style= {{width:"max-content"}}>
<ContainerUserProfile>
<HeaderContainer>
<CoverContainer>
<img src={state.currentUser.userCover} alt = "user cover avatar" style= {{width:"100%", height:"100%", objectFit : "cover" }}/>
- <input accept="image/*" style = {{display:"none"}} id="icon-button-file" type="file" />
+ <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">
@@ -158,7 +161,7 @@ export default function UserPage (props){
</ChangeAvatarDiv>
</ProfileAvatarDiv>
<UserProfileInfoDiv>
- <p style={{fontSize:"28px", color:"#fff", marginBottom:"2px", fontWeight:"500"}}>{user}</p>
+ <p style={{fontSize:"28px", color:"#fff", marginBottom:"2px", fontWeight:"500", backgroundColor:"#77777796", backgroundRadius : "8px"}}>{user}</p>
<div style={{fontSize:"14px", color:"#fff", marginBottom:"2px"}}>
<p>{state.currentUser.education}</p>
</div>
@@ -207,6 +210,7 @@ export default function UserPage (props){
textColor ="primary"
variant = "scrollable"
scrollButtons = "auto"
+ TabIndicatorProps={{style : {background:"#00bcd4"}}}
>
<StyledTab label="Atividades"/>
<StyledTab label="Meus Recursos"/>
@@ -242,35 +246,38 @@ export default function UserPage (props){
}
- const HeaderDiv = styled.div`
+const HeaderDiv = styled.div`
background-color : #f4f4f4;
color : #666;
font-size : 14px;
line-height : 20px;
padding-bottom : 40px;
- `
+`
- const ContainerNoPad = styled.div`
- min-width : "1170px"
- `
+const ContainerNoPad = styled.div`
+ min-width : 1170px;
+`
- const BreadcrumbsDiv = styled.div`
- padding : 10px;
- display : flex;
- justify-content : center;
+const BreadcrumbsDiv = styled.div`
+ padding : 10px;
+ display : flex;
+ justify-content : center;
`
- const StyledBreadcrumbs = styled(Breadcrumbs)`
+const StyledBreadcrumbs = styled(Breadcrumbs)`
display : flex;
justify-content : flex-start;
max-width : 1170px;
- `
+`
- const MainContainerDesktop = styled(Container)`
+const MainContainerDesktop = styled(Container)`
padding : 10px 0 8px 0;
- `
+ .MuiContainer-maxWidthXl {
+ max-width : 1170px !important;
+ }
+`
- const ContainerUserProfile = styled(Container)`
+const ContainerUserProfile = styled(Container)`
padding : 0;
background-color : #fff;
margin-bottom: 30px;
@@ -279,17 +286,18 @@ export default function UserPage (props){
padding-left : 0 !important;
padding-right : 0 !important;
margin-left : auto;
- `
- const HeaderContainer = styled(Container)`
+`
+const HeaderContainer = styled(Container)`
background-color : #afeeee;
position : relative;
- `
+`
- const CoverContainer = styled(Container)`
+ const CoverContainer = styled(Container)`
height : 230px;
position : relative;
- `
- const ProfileAvatarDiv = styled.div`
+`
+
+const ProfileAvatarDiv = styled.div`
bottom : -65px;
left : 60px;
border-radius : 100%;
@@ -300,8 +308,9 @@ export default function UserPage (props){
border : 8px solid #fff;
outline : 0;
cursor : pointer;
- `
- export const ChangeAvatarDiv = styled.div`
+`
+
+export const ChangeAvatarDiv = styled.div`
height : 40px;
position: absolute;
width : 100%;
@@ -310,18 +319,19 @@ export default function UserPage (props){
background-color : #000;
color : #fff;
justify-content : center;
- `
+`
- const UserProfileInfoDiv = styled.div`
+const UserProfileInfoDiv = styled.div`
position : absolute;
bottom : 0;
left : 260px;
overflow : hidden;
margin-bottom : 20px;
- `
+`
- const EditProfileAnchor = styled.a`
+const EditProfileAnchor = styled.a`
Button {
+ box-shadow : 0 2px 5px 0 rgba(0,0,0,.26);
background-color : #fafafa;
position : absolute;
right : 5px;
@@ -337,29 +347,32 @@ export default function UserPage (props){
border : 0;
display: inline-block;
text-align : center;
+ :hover{
+ background-color : #fafafa;
+ }
}
- `
+`
- const CheckTeacherDiv = styled.div`
+const CheckTeacherDiv = styled.div`
font-size : 14px;
padding-top : 10px;
padding-left : 250px;
margin-bottom : -10px;
color : #666 !important;
- `
+`
- const RodapeDiv = styled.div`
+const RodapeDiv = styled.div`
justify-content : flex-end;
display : flex;
- `
+`
- const NavBarContentContainer = styled(Container)`
+const NavBarContentContainer = styled(Container)`
background-color : #fff;
padding-bottom : 0;
overflow-x : hidden !important;
overflow-y : hid1den !important;
margin-right : 0 !important;
- `
+`
const StyledTabs = styled(Tabs)`
.MuiTab-textColorPrimary.Mui-selected {
diff --git a/src/img/no-rede-1.png b/src/img/no-rede-1.png
new file mode 100644
index 0000000000000000000000000000000000000000..7d4510823fa703462511b4b7f8f6643a2e72639f
Binary files /dev/null and b/src/img/no-rede-1.png differ
diff --git a/src/img/no-rede-2.png b/src/img/no-rede-2.png
new file mode 100644
index 0000000000000000000000000000000000000000..c94c169f7caecd6763d628b87e752a45b1cd1d79
Binary files /dev/null and b/src/img/no-rede-2.png differ
diff --git a/src/img/no-rede-3.png b/src/img/no-rede-3.png
new file mode 100644
index 0000000000000000000000000000000000000000..58b934c3bc3ee2dfa597b5386d66434973fca2cf
Binary files /dev/null and b/src/img/no-rede-3.png differ