From 7d22f4b97cc867273d59d033ac1467a504afba97 Mon Sep 17 00:00:00 2001
From: Lucas Schoenfelder <les17@inf.ufpr.br>
Date: Sat, 8 Feb 2020 14:49:31 -0300
Subject: [PATCH] comecando a trabalhar na pagina de editar o perfil
---
src/App.js | 4 +-
src/Components/MenuBar.js | 2 +-
.../{ => TabPanels}/ContainerRedeVazia.js | 6 +-
.../{ => TabPanels}/TabPanelAtividades.js | 6 +-
.../{ => TabPanels}/TabPanelColecoes.js | 6 +-
.../TabPanels/TabPanelEditarPerfil.js | 72 ++++++++++++
.../{ => TabPanels}/TabPanelFavoritos.js | 4 +-
.../TabPanels/TabPanelGerenciarConta.js | 7 ++
.../{ => TabPanels}/TabPanelMeusRecursos.js | 4 +-
.../{ => TabPanels}/TabPanelRede.js | 4 +-
.../TabPanelSolicitarContaProfessor.js | 7 ++
.../{ => TabPanels}/TabRedeImgDiv.js | 0
src/Pages/EditProfilePage.js | 103 ++++++++++++++++++
src/Pages/UserPage.js | 62 ++++++-----
14 files changed, 242 insertions(+), 45 deletions(-)
rename src/Components/{ => TabPanels}/ContainerRedeVazia.js (95%)
rename src/Components/{ => TabPanels}/TabPanelAtividades.js (97%)
rename src/Components/{ => TabPanels}/TabPanelColecoes.js (98%)
create mode 100644 src/Components/TabPanels/TabPanelEditarPerfil.js
rename src/Components/{ => TabPanels}/TabPanelFavoritos.js (99%)
create mode 100644 src/Components/TabPanels/TabPanelGerenciarConta.js
rename src/Components/{ => TabPanels}/TabPanelMeusRecursos.js (99%)
rename src/Components/{ => TabPanels}/TabPanelRede.js (98%)
create mode 100644 src/Components/TabPanels/TabPanelSolicitarContaProfessor.js
rename src/Components/{ => TabPanels}/TabRedeImgDiv.js (100%)
create mode 100644 src/Pages/EditProfilePage.js
diff --git a/src/App.js b/src/App.js
index 517c0b30..3ad7a3b8 100644
--- a/src/App.js
+++ b/src/App.js
@@ -33,6 +33,7 @@ import { Store } from './Store'
import TermsPage from './Pages/TermsPage.js'
import PublicationPermissionsPage from './Pages/PublicationPermissionsPage.js'
import Contact from './Pages/Contact.js'
+import EditProfilePage from './Pages/EditProfilePage.js'
export default function App(){
// eslint-disable-next-line
@@ -72,7 +73,8 @@ export default function App(){
<Switch>
<Route path="/" exact={true} component={Home}/>
<Route path="/busca" component={Search} />
- <Route path="/perfil-atualizacoes" component={UserPage} />
+ <Route path="/perfil" component={UserPage} />
+ <Route path="/editarperfil" component={EditProfilePage} />
<Route path="/recurso" component={ResourcePage}/>
<Route path="/termos-publicar-recurso" component={TermsPage}/>
<Route path="/permission" component={PublicationPermissionsPage}/>
diff --git a/src/Components/MenuBar.js b/src/Components/MenuBar.js
index 74fce862..6ea7dc37 100644
--- a/src/Components/MenuBar.js
+++ b/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"},
{ name: "Recursos Publicados", href: "/perfil/recursos-publicados"},
{ name: "Favoritos", href: "/perfil/favoritos"},
{ name: "Coleções", href: "/perfil/colecoes"},
diff --git a/src/Components/ContainerRedeVazia.js b/src/Components/TabPanels/ContainerRedeVazia.js
similarity index 95%
rename from src/Components/ContainerRedeVazia.js
rename to src/Components/TabPanels/ContainerRedeVazia.js
index 287e33c1..ad3b5863 100644
--- a/src/Components/ContainerRedeVazia.js
+++ b/src/Components/TabPanels/ContainerRedeVazia.js
@@ -2,9 +2,9 @@ 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 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'
diff --git a/src/Components/TabPanelAtividades.js b/src/Components/TabPanels/TabPanelAtividades.js
similarity index 97%
rename from src/Components/TabPanelAtividades.js
rename to src/Components/TabPanels/TabPanelAtividades.js
index 074c12ed..5e416be8 100644
--- a/src/Components/TabPanelAtividades.js
+++ b/src/Components/TabPanels/TabPanelAtividades.js
@@ -4,9 +4,9 @@ import { Container } from 'react-grid-system'
import Paper from '@material-ui/core/Paper';
import Button from '@material-ui/core/Button';
import axios from 'axios'
-import {apiUrl} from '../env';
-import Bolo from '../img/Bolo.png'
-import LoadingSpinner from './LoadingSpinner.js'
+import {apiUrl} from '../../env';
+import Bolo from '../../img/Bolo.png'
+import LoadingSpinner from '../LoadingSpinner.js'
export default function TabPanelAtividades (props) {
const [notifications, setNotifications] = useState([]);
diff --git a/src/Components/TabPanelColecoes.js b/src/Components/TabPanels/TabPanelColecoes.js
similarity index 98%
rename from src/Components/TabPanelColecoes.js
rename to src/Components/TabPanels/TabPanelColecoes.js
index 9a3c44da..fbe39831 100644
--- a/src/Components/TabPanelColecoes.js
+++ b/src/Components/TabPanels/TabPanelColecoes.js
@@ -5,10 +5,10 @@ import Paper from '@material-ui/core/Paper';
import Button from '@material-ui/core/Button';
import {ButtonMostrarTodos, ButtonMostrarMais, BtnAlinhaRecPvt, DivContainerRecursosPublicados, ContainerDivStyled, DivTitulo, StyledP, StyledHR} from './TabPanelMeusRecursos.js'
import {NoPubSpan, DivConteudoNaoPublicado, DivTextoNoPublications} from './TabPanelMeusRecursos.js'
-import LoadingSpinner from './LoadingSpinner.js'
-import PaginaVaziaColecao from '../img/Pagina_vazia_colecao.png'
+import LoadingSpinner from '../LoadingSpinner.js'
+import PaginaVaziaColecao from '../../img/Pagina_vazia_colecao.png'
import axios from 'axios'
-import {apiUrl} from '../env';
+import {apiUrl} from '../../env';
import CreateNewFolderIcon from '@material-ui/icons/CreateNewFolder';
export default function TabPanelColecoes (props) {
diff --git a/src/Components/TabPanels/TabPanelEditarPerfil.js b/src/Components/TabPanels/TabPanelEditarPerfil.js
new file mode 100644
index 00000000..dc90dc09
--- /dev/null
+++ b/src/Components/TabPanels/TabPanelEditarPerfil.js
@@ -0,0 +1,72 @@
+import React, {useContext} from 'react'
+import styled from 'styled-components'
+import { Store } from '../../Store.js';
+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';
+
+export default function TabPanelEditarPerfil (props) {
+ const {state, dispatch} = useContext(Store)
+
+ const updateCover = (selectorFiles : FileList) => {
+ console.log(selectorFiles)
+ console.log(selectorFiles[0].name)
+ }
+
+ return (
+ <ContainerDIv>
+ <h1 style={{fontSize:"30px", fontWeight:"300", marginTop:"0", marginBottom:"10px"}}>Editar Perfil </h1>
+ <ContentDiv>
+ <div style={{padding:"0", display:"flex", flexDirection:"column"}}>
+ <HeaderContainer>
+ <div style={{position:"relative", height:"100%"}}>
+ <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" 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>
+ </div>
+ </HeaderContainer>
+ </div>
+ </ContentDiv>
+ </ContainerDIv>
+ )
+}
+
+const HeaderContainer = styled.div`
+ background-color : #afeeee;
+ position : relative;
+ height : 150px;
+ border-radius : 8px;
+`
+
+const ContentDiv = styled.div`
+ display : flex;
+ flex-direction : column;
+ align-content : stretch;
+ align-items : stretch;
+ font-family : 'Roboto', sans serif !important;
+ font-size : 14px;
+ justify-content : center;
+ line-height : 20px;
+ text-align : center;
+ color : #666;
+`
+
+const ContainerDIv = styled.div`
+ box-shadow : 0 0 5px 0rgba(0,0,0,.25);
+ background-color : #fff;
+ text-align : start;
+ margin-left : auto;
+ margin-right : auto;
+ padding : 40px;
+ margin : 20px 0 20px 10px;
+ border-radius : 3px;
+ display : flex;
+ flex-direction : column;
+`
diff --git a/src/Components/TabPanelFavoritos.js b/src/Components/TabPanels/TabPanelFavoritos.js
similarity index 99%
rename from src/Components/TabPanelFavoritos.js
rename to src/Components/TabPanels/TabPanelFavoritos.js
index 71c3e50a..3cb7ea74 100644
--- a/src/Components/TabPanelFavoritos.js
+++ b/src/Components/TabPanels/TabPanelFavoritos.js
@@ -4,10 +4,10 @@ import { Container } from 'react-grid-system'
import Paper from '@material-ui/core/Paper';
import Button from '@material-ui/core/Button';
import axios from 'axios'
-import {apiUrl} from '../env';
+import {apiUrl} from '../../env';
import {ButtonMostrarTodos, ButtonMostrarMais, BtnAlinhaRecPvt, DivContainerRecursosPublicados, ContainerDivStyled, DivTitulo, StyledP, StyledHR} from './TabPanelMeusRecursos.js'
import {NoPubSpan, DivConteudoNaoPublicado, DivTextoNoPublications} from './TabPanelMeusRecursos.js'
-import LoadingSpinner from './LoadingSpinner.js'
+import LoadingSpinner from '../LoadingSpinner.js'
export default function TabPanelFavoritos (props) {
const [loading, handleLoading] = useState(true)
diff --git a/src/Components/TabPanels/TabPanelGerenciarConta.js b/src/Components/TabPanels/TabPanelGerenciarConta.js
new file mode 100644
index 00000000..cb552890
--- /dev/null
+++ b/src/Components/TabPanels/TabPanelGerenciarConta.js
@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default function TabPanelGerenciarConta (props) {
+ return (
+ <span>a</span>
+ )
+}
diff --git a/src/Components/TabPanelMeusRecursos.js b/src/Components/TabPanels/TabPanelMeusRecursos.js
similarity index 99%
rename from src/Components/TabPanelMeusRecursos.js
rename to src/Components/TabPanels/TabPanelMeusRecursos.js
index 29864d8c..5e4c0616 100644
--- a/src/Components/TabPanelMeusRecursos.js
+++ b/src/Components/TabPanels/TabPanelMeusRecursos.js
@@ -4,8 +4,8 @@ import { Container } from 'react-grid-system'
import Paper from '@material-ui/core/Paper';
import Button from '@material-ui/core/Button';
import axios from 'axios'
-import {apiUrl} from '../env';
-import LoadingSpinner from './LoadingSpinner.js'
+import {apiUrl} from '../../env';
+import LoadingSpinner from '../LoadingSpinner.js'
export default function TabPanelAtividades (props) {
const [loading, handleLoading] = useState(true)
diff --git a/src/Components/TabPanelRede.js b/src/Components/TabPanels/TabPanelRede.js
similarity index 98%
rename from src/Components/TabPanelRede.js
rename to src/Components/TabPanels/TabPanelRede.js
index 8a7f2d4b..2eb21b00 100644
--- a/src/Components/TabPanelRede.js
+++ b/src/Components/TabPanels/TabPanelRede.js
@@ -5,8 +5,8 @@ import Paper from '@material-ui/core/Paper';
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 {apiUrl} from '../../env';
+import LoadingSpinner from '../LoadingSpinner.js'
import ContainerRedeVazia from './ContainerRedeVazia.js'
import {NoPubSpan, DivConteudoNaoPublicado, DivTextoNoPublications} from './TabPanelMeusRecursos.js'
diff --git a/src/Components/TabPanels/TabPanelSolicitarContaProfessor.js b/src/Components/TabPanels/TabPanelSolicitarContaProfessor.js
new file mode 100644
index 00000000..c350edba
--- /dev/null
+++ b/src/Components/TabPanels/TabPanelSolicitarContaProfessor.js
@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default function TabPanelSolicitarContaProfessor (props) {
+ return (
+ <span>a</span>
+ )
+}
diff --git a/src/Components/TabRedeImgDiv.js b/src/Components/TabPanels/TabRedeImgDiv.js
similarity index 100%
rename from src/Components/TabRedeImgDiv.js
rename to src/Components/TabPanels/TabRedeImgDiv.js
diff --git a/src/Pages/EditProfilePage.js b/src/Pages/EditProfilePage.js
new file mode 100644
index 00000000..f3f4e041
--- /dev/null
+++ b/src/Pages/EditProfilePage.js
@@ -0,0 +1,103 @@
+import React, {useState, useContext, useEffect} from 'react';
+import styled from 'styled-components'
+import {Link} from 'react-router-dom'
+import Breadcrumbs from '@material-ui/core/Breadcrumbs';
+import {BreadcrumbsDiv, StyledBreadcrumbs} from './UserPage.js'
+import Tabs from '@material-ui/core/Tabs'
+import Tab from '@material-ui/core/Tab';
+import Paper from '@material-ui/core/Paper';
+import TabPanelEditarPerfil from '../Components/TabPanels/TabPanelEditarPerfil.js'
+import TabPanelSolicitarContaProfessor from '../Components/TabPanels/TabPanelSolicitarContaProfessor.js'
+import TabPanelGerenciarConta from '../Components/TabPanels/TabPanelGerenciarConta.js'
+
+export default function EditProfilePage (props) {
+ const [tabs, setTabs] = useState([
+ 'Editar Perfil', 'Solicitar conta de Professor', 'Gerenciar Conta'
+ ])
+ const [tabValue, setTabValue] = useState(0)
+ const handleChangeTab = (e, newValue) => {
+ setTabValue(newValue)
+ }
+
+ return (
+ <div style={{backgroundColor:"#f4f4f4", color:"#666"}}>
+ <BreadcrumbsDiv>
+ <StyledBreadcrumbs>
+ <Link to="/" style={{color:"#00bcd4", textDecoration:"none"}}>
+ Página Inicial
+ </Link>
+ <span>
+ Minha área
+ </span>
+ <span>
+ Configurações da Conta
+ </span>
+ <span>
+ {tabs[tabValue]}
+ </span>
+ </StyledBreadcrumbs>
+ </BreadcrumbsDiv>
+
+ <MainContainerDiv>
+ <div style={{width : "auto", fontFamily:"Roboto"}}>
+ <Paper elevation={3} style= {{width:"max-content"}}>
+ <ConfiguracoesMenu>
+ <h4 style={{marginTop:"10px", fontFamily:"inherit", display:"flex", justifyContent:"center"}}>
+ Configurações da Conta
+ </h4>
+ <StyledTabs
+ orientation = "vertical"
+ variant = "scrollable"
+ value = {tabValue}
+ onChange = {handleChangeTab}
+ TabIndicatorProps = {{style : {display : "none"}}}
+ >
+ <StyledTab label={tabs[0]}/>
+ <StyledTab label={tabs[1]}/>
+ <StyledTab label={tabs[2]}/>
+ </StyledTabs>
+ </ConfiguracoesMenu>
+ </Paper>
+ </div>
+ <div style={{width : "auto", paddingLeft:"1em"}}>
+ <Paper elevation={3} style= {{width:"max-content"}}>
+ {tabValue === 0 && <TabPanelEditarPerfil/>}
+ {tabValue === 1 && <TabPanelSolicitarContaProfessor/>}
+ {tabValue === 2 && <TabPanelGerenciarConta/>}
+ </Paper>
+ </div>
+ </MainContainerDiv>
+ </div>
+ )
+}
+
+const StyledTabs = styled(Tabs)`
+ .Mui-selected {
+ background-color : #f4f4f4;
+ }
+`
+
+const StyledTab = styled(Tab)`
+ &:hover {
+ background-color : #6666663d;
+ }
+`
+
+const ConfiguracoesMenu = styled.div`
+ margin : 20px 0 20px 0;
+ border-radius : 3px;
+ padding : 20px 0;
+ background-color : #fff;
+ text-align : start;
+`
+
+const MainContainerDiv = styled.div`
+ padding : 0;
+ width : 1170;
+ margin-right : auto;
+ margin-left : auto;
+ display : flex;
+ flex-direction : row;
+ align-content : center;
+ justify-content : center;
+`
diff --git a/src/Pages/UserPage.js b/src/Pages/UserPage.js
index 89026587..2b9ce6e0 100644
--- a/src/Pages/UserPage.js
+++ b/src/Pages/UserPage.js
@@ -24,7 +24,7 @@ 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 {Link} from 'react-router-dom';
import Popover from '@material-ui/core/Popover';
import { Store } from '../Store.js';
import EditIcon from '@material-ui/icons/Edit';
@@ -32,11 +32,11 @@ import CheckDecagram from '../img/check-decagram-gray.svg'
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import Paper from '@material-ui/core/Paper';
-import TabPanelAtividades from '../Components/TabPanelAtividades.js'
-import TabPanelMeusRecursos from '../Components/TabPanelMeusRecursos.js'
-import TabPanelFavoritos from '../Components/TabPanelFavoritos.js'
-import TabPanelColecoes from '../Components/TabPanelColecoes.js'
-import TabPanelRede from '../Components/TabPanelRede.js'
+import TabPanelAtividades from '../Components/TabPanels/TabPanelAtividades.js'
+import TabPanelMeusRecursos from '../Components/TabPanels/TabPanelMeusRecursos.js'
+import TabPanelFavoritos from '../Components/TabPanels/TabPanelFavoritos.js'
+import TabPanelColecoes from '../Components/TabPanels/TabPanelColecoes.js'
+import TabPanelRede from '../Components/TabPanels/TabPanelRede.js'
import axios from 'axios'
import {apiUrl} from '../env';
import ModalAlterarAvatar from '../Components/ModalAlterarAvatar.js'
@@ -44,7 +44,10 @@ import ModalAlterarAvatar from '../Components/ModalAlterarAvatar.js'
export default function UserPage (props){
const {state, dispatch} = useContext(Store)
const [hoverAlterarFoto, handleAlterarFoto] = React.useState(false)
- const [value, setValue] = useState(0);
+ const [tabValue, setTabValue] = useState(0);
+ const [tabs, setTabs] = useState([
+ 'Atividades', 'Meus Recursos', 'Favoritos', 'Coleções', 'Rede'
+ ])
const user = localStorage.getItem('@portalmec/username')
const id = localStorage.getItem('@portalmec/id')
const [modalOpen, handleModal] = useState(false)
@@ -102,7 +105,7 @@ export default function UserPage (props){
}
const handleChangeTab = (event, newValue) => {
- setValue(newValue)
+ setTabValue(newValue)
}
const updateCover = (selectorFiles : FileList) => {
@@ -126,14 +129,14 @@ export default function UserPage (props){
<ContainerNoPad>
<BreadcrumbsDiv>
<StyledBreadcrumbs>
- <Link href="/" style={{color:"#00bcd4"}}>
+ <Link to="/" style={{color:"#00bcd4", textDecoration:"none"}}>
Página Inicial
</Link>
- <span style={{color:"#a5a5a5"}}>
+ <span>
Minha área
</span>
- <span style={{color:"#a5a5a5"}}>
- Atividades
+ <span>
+ {tabs[tabValue]}
</span>
</StyledBreadcrumbs>
</BreadcrumbsDiv>
@@ -166,7 +169,7 @@ export default function UserPage (props){
<p>{state.currentUser.education}</p>
</div>
</UserProfileInfoDiv>
- <EditProfileAnchor href="/perfil/configuracoes/editarperfil">
+ <EditProfileAnchor to="/editarperfil">
<Button>
<EditIcon style={{marginRight:"5px", verticalAlign:"middle"}}/> <span>EDITAR PERFIL</span>
</Button>
@@ -204,7 +207,7 @@ export default function UserPage (props){
<RodapeDiv>
<NavBarContentContainer>
<StyledTabs
- value ={value}
+ value ={tabValue}
onChange ={handleChangeTab}
indicatorColor ="primary"
textColor ="primary"
@@ -212,11 +215,11 @@ export default function UserPage (props){
scrollButtons = "auto"
TabIndicatorProps={{style : {background:"#00bcd4"}}}
>
- <StyledTab label="Atividades"/>
- <StyledTab label="Meus Recursos"/>
- <StyledTab label="Favoritos"/>
- <StyledTab label="Coleções"/>
- <StyledTab label="Rede"/>
+ <StyledTab label={tabs[0]}/>
+ <StyledTab label={tabs[1]}/>
+ <StyledTab label={tabs[2]}/>
+ <StyledTab label={tabs[3]}/>
+ <StyledTab label={tabs[4]}/>
</StyledTabs>
</NavBarContentContainer>
</RodapeDiv>
@@ -224,11 +227,11 @@ export default function UserPage (props){
</Paper>
</MainContainerDesktop>
</div>
- {value === 0 && <TabPanelAtividades id={id} config={config}/>}
- {value === 1 && <TabPanelMeusRecursos id={id} config={config}/>}
- {value === 2 && <TabPanelFavoritos id={id} config={config}/>}
- {value === 3 && <TabPanelColecoes id={id} config={config}/>}
- {value === 4 && <TabPanelRede id={id} config={config}/>}
+ {tabValue === 0 && <TabPanelAtividades id={id} config={config}/>}
+ {tabValue === 1 && <TabPanelMeusRecursos id={id} config={config}/>}
+ {tabValue === 2 && <TabPanelFavoritos id={id} config={config}/>}
+ {tabValue === 3 && <TabPanelColecoes id={id} config={config}/>}
+ {tabValue === 4 && <TabPanelRede id={id} config={config}/>}
</ContainerNoPad>
</HeaderDiv>
</React.Fragment>
@@ -258,16 +261,19 @@ const ContainerNoPad = styled.div`
min-width : 1170px;
`
-const BreadcrumbsDiv = styled.div`
+export const BreadcrumbsDiv = styled.div`
padding : 10px;
display : flex;
justify-content : center;
`
-const StyledBreadcrumbs = styled(Breadcrumbs)`
+export const StyledBreadcrumbs = styled(Breadcrumbs)`
display : flex;
justify-content : flex-start;
max-width : 1170px;
+ span {
+ color : #a5a5a5;
+ }
`
const MainContainerDesktop = styled(Container)`
@@ -329,7 +335,7 @@ const UserProfileInfoDiv = styled.div`
margin-bottom : 20px;
`
-const EditProfileAnchor = styled.a`
+const EditProfileAnchor = styled(Link)`
Button {
box-shadow : 0 2px 5px 0 rgba(0,0,0,.26);
background-color : #fafafa;
@@ -348,7 +354,7 @@ const EditProfileAnchor = styled.a`
display: inline-block;
text-align : center;
:hover{
- background-color : #fafafa;
+ background-color : #fafafa;
}
}
`
--
GitLab