diff --git a/src/Components/TabPanels/Breadcrumbs.js b/src/Components/TabPanels/Breadcrumbs.js
index 1d208986d7bd89b210da95806d101796301a36d9..b8d3abe6016c6d10a47a8d5a6c98b9d86d276a05 100644
--- a/src/Components/TabPanels/Breadcrumbs.js
+++ b/src/Components/TabPanels/Breadcrumbs.js
@@ -20,29 +20,23 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
import React from 'react'
import styled from 'styled-components'
import Breadcrumbs from '@material-ui/core/Breadcrumbs';
-import {Link} from 'react-router-dom';
+import { Link } from 'react-router-dom';
-export default function CustomizedBreadcrumbs (props) {
+export default function CustomizedBreadcrumbs(props) {
return (
<BreadcrumbsDiv>
- <StyledBreadcrumbs>
- <Link to="/" style={{color:"#00bcd4", textDecoration:"none"}}>
+ <StyledBreadcrumbs contrast={props.contrast}>
+ <Link to="/">
Página Inicial
</Link>
{
- props.values.map( (value, i) =>
+ props.values.map((value, i) =>
<span key={i}>
{value}
</span>
)
}
- {/*<span>
- {props.currentPage}
- </span>
- <span>
- {props.value}
- </span> */}
</StyledBreadcrumbs>
</BreadcrumbsDiv>
)
@@ -61,7 +55,11 @@ const StyledBreadcrumbs = styled(Breadcrumbs)`
display : flex;
justify-content : flex-start;
max-width : 1170px;
+ a{
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ }
span {
- color : #a5a5a5;
+ color: ${props => props.contrast === "" ? "#a5a5a5" : "white"};
}
`
diff --git a/src/Components/TabPanels/PanelComponents/ButtonsArea.js b/src/Components/TabPanels/PanelComponents/ButtonsArea.js
index 1b8633ae0b05f6578b98fbbba427a3172775ed96..da75ecabf210f3c41fcd8d7bccece5fc86719143 100644
--- a/src/Components/TabPanels/PanelComponents/ButtonsArea.js
+++ b/src/Components/TabPanels/PanelComponents/ButtonsArea.js
@@ -23,19 +23,19 @@ import Button from '@material-ui/core/Button';
export function ButtonsAreaRecurso(props) {
return (
- <Carregados>
- <p style={{ margin: "0 0 10px", fontSize: "14px" }}>
+ <Carregados contrast={props.contrast}>
+ <p className="total">
{props.sliceLength} recursos carregados de {props.total}
</p>
{
!props.end &&
<React.Fragment>
- <ButtonMostrarMaisRecurso onClick={() => props.showMore(4)}>
- <span style={{ color: "#fff", fontSize: "14px", fontWeight: "500" }}>MOSTRAR MAIS 4</span>
+ <ButtonMostrarMaisRecurso contrast={props.contrast} onClick={() => props.showMore(4)}>
+ <span>MOSTRAR MAIS 4</span>
</ButtonMostrarMaisRecurso>
- <ButtonMostrarTodos onClick={() => { props.showMore(20) }}>
- <span style={{ color: "#666", fontSize: "14px", fontWeight: "500" }}>MOSTRAR MAIS 20</span>
+ <ButtonMostrarTodos contrast={props.contrast} onClick={() => { props.showMore(20) }}>
+ <span>MOSTRAR MAIS 20</span>
</ButtonMostrarTodos>
</React.Fragment>
}
@@ -46,19 +46,19 @@ export function ButtonsAreaRecurso(props) {
export function ButtonsAreaColecao(props) {
return (
- <Carregados>
- <p style={{ margin: "0 0 10px", fontSize: "14px" }}>
+ <Carregados contrast={props.contrast}>
+ <p className="total">
{props.sliceLength} coleções carregadas de {props.total}
</p>
{
!props.end &&
<React.Fragment>
- <ButtonMostrarMaisColecao onClick={() => { props.showMore(4) }}>
- <span style={{ color: "#fff", fontSize: "14px", fontWeight: "500" }}>MOSTRAR MAIS 4</span>
+ <ButtonMostrarMaisColecao contrast={props.contrast} onClick={() => { props.showMore(4) }}>
+ <span>MOSTRAR MAIS 4</span>
</ButtonMostrarMaisColecao>
- <ButtonMostrarTodos onClick={() => { props.showMore(20) }}>
- <span style={{ color: "#666", fontSize: "14px", fontWeight: "500" }}>MOSTRAR MAIS 20</span>
+ <ButtonMostrarTodos contrast={props.contrast} onClick={() => { props.showMore(20) }}>
+ <span>MOSTRAR MAIS 20</span>
</ButtonMostrarTodos>
</React.Fragment>
}
@@ -68,20 +68,20 @@ export function ButtonsAreaColecao(props) {
export function ButtonsAreaRede(props) {
return (
- <Carregados>
- <p style={{ margin: "0 0 10px", fontSize: "14px" }}>
+ <Carregados contrast={props.contrast}>
+ <p className="total">
{props.sliceLength} usuários carregados {props.total}
</p>
{
!props.end &&
<React.Fragment>
- <ButtonMostrarMaisRede onClick={() => { props.showMore(4) }}>
- <span style={{ color: "#fff", fontSize: "14px", fontWeight: "500" }}>MOSTRAR MAIS 4</span>
+ <ButtonMostrarMaisRede contrast={props.contrast} onClick={() => { props.showMore(4) }}>
+ <span>MOSTRAR MAIS 4</span>
</ButtonMostrarMaisRede>
- <ButtonMostrarTodos onClick={() => { props.showMore(20) }}>
- <span style={{ color: "#666", fontSize: "14px", fontWeight: "500" }}>MOSTRAR MAIS 20</span>
+ <ButtonMostrarTodos contrast={props.contrast} onClick={() => { props.showMore(20) }}>
+ <span>MOSTRAR MAIS 20</span>
</ButtonMostrarTodos>
</React.Fragment>
}
@@ -92,21 +92,29 @@ export function ButtonsAreaRede(props) {
const ButtonMostrarTodos = styled(Button)`
&:hover {
- background-color : #d5d5d5 !important;
+ background-color: ${props => props.contrast === "" ? "#d5d5d5 !important" : "rgba(255,255,0,0.24) !important"};
}
height : 36px !important;
padding-left : 16px !important;
padding-right : 16px !important;
font-weight : 500 !important;
border-radius : 3px !important;
- color :#666 !important;
- background-color: #e8e8e8 !important;
+ color: ${props => props.contrast === "" ? "#666 !important" : "yellow !important"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline !important"};
+ background-color: ${props => props.contrast === "" ? "#e8e8e8 !important" : "black !important"};
+ border: ${props => props.contrast === "" ? 0 : "1px solid white !important"};
min-width : 88px !important;
height : 36px !important;
`
const ButtonMostrarMaisRede = styled(Button)`
- background-color : #00bcd4 !important;
+ &:hover {
+ background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
+ }
+ color: ${props => props.contrast === "" ? "#fff !important" : "yellow !important"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline !important"};
+ background-color: ${props => props.contrast === "" ? "#00bcd4 !important" : "black !important"};
+ border: ${props => props.contrast === "" ? 0 : "1px solid white !important"};
font-size: 14px !important;
font-weight: 500 !important;
height: 36px !important;
@@ -122,7 +130,13 @@ const ButtonMostrarMaisRede = styled(Button)`
`
export const ButtonMostrarMaisColecao = styled(Button)`
- background-color : #503096 !important;
+ &:hover {
+ background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
+ }
+ color: ${props => props.contrast === "" ? "#fff !important" : "yellow !important"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline !important"};
+ background-color: ${props => props.contrast === "" ? "#503096 !important" : "black !important"};
+ border: ${props => props.contrast === "" ? 0 : "1px solid white !important"};
font-size: 14px !important;
font-weight: 500 !important;
height: 36px !important;
@@ -138,7 +152,13 @@ export const ButtonMostrarMaisColecao = styled(Button)`
`
export const ButtonMostrarMaisRecurso = styled(Button)`
- background-color : #ff7f00 !important;
+ &:hover {
+ background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
+ }
+ color: ${props => props.contrast === "" ? "#fff !important" : "yellow !important"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline !important"};
+ background-color: ${props => props.contrast === "" ? "#ff7f00 !important" : "black !important"};
+ border: ${props => props.contrast === "" ? 0 : "1px solid white !important"};
font-size: 14px !important;
font-weight: 500 !important;
height: 36px !important;
diff --git a/src/Components/TabPanels/PanelComponents/NoContent.js b/src/Components/TabPanels/PanelComponents/NoContent.js
index 7c8c7141476c3c2793931b448168ce3db00ddc50..698c2b6b1d89340cfbb134e1f95688dfc27da6ea 100644
--- a/src/Components/TabPanels/PanelComponents/NoContent.js
+++ b/src/Components/TabPanels/PanelComponents/NoContent.js
@@ -22,16 +22,16 @@ import defaultNoContent from '../../../img/img-16.png'
-export default function NoContent({text, image}) {
+export default function NoContent({ text, image, contrast }) {
return (
<DivTextoNoPublications>
<InnerDiv>
<ImgDiv>
- <img alt="" src={image || defaultNoContent } style={{ width: "130px", verticalAlign: "middle", border: "0" }} />
+ <img alt="" src={image || defaultNoContent} style={{ width: "130px", verticalAlign: "middle", border: "0" }} />
</ImgDiv>
<TextDiv>
- <NoPubSpan>{text}</NoPubSpan>
+ <NoPubSpan contrast={contrast}>{text}</NoPubSpan>
</TextDiv>
</InnerDiv>
</DivTextoNoPublications>
@@ -39,6 +39,7 @@ export default function NoContent({text, image}) {
}
const NoPubSpan = styled.span`
+ color: ${props => props.contrast === "" ? "#666" : "white"};
margin-top : 10px;
font-size : 24px;
font-family : Roboto;
@@ -64,10 +65,4 @@ export const DivTextoNoPublications = styled.div`
padding-left : 15px;
padding-right : 15px;
text-align : center;
-`
-
-// {/*const DivConteudoNaoPublicado = styled.div`
-// position : relative;
-// top : 50%;
-// transform : translateY(-50%);
-// `*/}
+`
\ No newline at end of file
diff --git a/src/Components/TabPanels/PanelComponents/PanelTitle.js b/src/Components/TabPanels/PanelComponents/PanelTitle.js
index cb139b40670af05ad9e9d7adc3fc8a873d378d3a..9214c68b3ec1604beae54e67bbf5672ee29a4605 100644
--- a/src/Components/TabPanels/PanelComponents/PanelTitle.js
+++ b/src/Components/TabPanels/PanelComponents/PanelTitle.js
@@ -2,12 +2,12 @@ import React from 'react'
import styled from 'styled-components'
import Grid from '@material-ui/core/Grid';
-export default function PanelTitle (props) {
+export default function PanelTitle(props) {
return (
- <Header container>
+ <Header container contrast={props.contrast}>
<Grid item xs={12}>
- <p className="titulo">{props.title} <b style={{fontWeight:"500", fontSize : "20px"}}>({props.length})</b></p>
- <hr/>
+ <p className="titulo">{props.title} <b style={{ fontWeight: "500", fontSize: "20px" }}>({props.length})</b></p>
+ <hr />
</Grid>
</Header>
)
@@ -21,7 +21,7 @@ const Header = styled(Grid)`
margin : 0;
line-height: normal;
font-style : normal;
- color : #757575;
+ color: ${props => props.contrast === "" ? "#757575" : "white"};
font-size : 1.857em;
padding-left : 15px;
padding-right : 15px;
diff --git a/src/Components/TabPanels/PanelComponents/TemplateCuradoria.js b/src/Components/TabPanels/PanelComponents/TemplateCuradoria.js
index d03415734eb03a7a7ea0ecb7671a50840240c815..98e2d50e254d3b97dabd16bbf3f1485cbde3b525 100644
--- a/src/Components/TabPanels/PanelComponents/TemplateCuradoria.js
+++ b/src/Components/TabPanels/PanelComponents/TemplateCuradoria.js
@@ -28,8 +28,9 @@ import LoadingSpinner from '../../LoadingSpinner.js';
export default function Template(props) {
console.log(props.sliceArr);
return (
- <WhiteContainer>
+ <WhiteContainer contrast={props.contrast}>
<Title
+ contrast={props.contrast}
title={props.titleText}
length={props.end}
/>
@@ -37,7 +38,7 @@ export default function Template(props) {
{
props.error ?
<p
- style={{ fontSize: "15px", fontWeight: "lighter", margin: "0 0 10px", display: "flex", justifyContent: "center", textAlign: "center" }}
+ className="errorText"
>
Erro ao tentar obter os dados
</p>
@@ -45,7 +46,7 @@ export default function Template(props) {
props.length === 0 ?
(
[
- <NoContent text={props.noContentText} />
+ <NoContent contrast={props.contrast} text={props.noContentText} />
]
)
:
@@ -80,6 +81,7 @@ export default function Template(props) {
<LoadingSpinner text="Carregando recurso..." />
:
<ButtonsAreaRecurso
+ contrast={props.contrast}
sliceLength={props.sliceArr.length}
length={props.length}
showMore={props.showMore}
diff --git a/src/Components/TabPanels/PanelComponents/TemplateRecurso.js b/src/Components/TabPanels/PanelComponents/TemplateRecurso.js
index d77f0208d3f072a5385a598d9d99c74e963cead2..dc8f2b75a9fe977e6fa77ac3adb640ee8f366b44 100644
--- a/src/Components/TabPanels/PanelComponents/TemplateRecurso.js
+++ b/src/Components/TabPanels/PanelComponents/TemplateRecurso.js
@@ -29,8 +29,9 @@ import noLearnObjFound from '../../../img/Pagina_vazia_Sem_publicar.png'
export default function Template(props) {
return (
- <WhiteContainer>
+ <WhiteContainer contrast={props.contrast}>
<Title
+ contrast={props.contrast}
title={props.titleText}
length={props.end}
/>
@@ -38,7 +39,7 @@ export default function Template(props) {
{
props.error ?
<p
- style={{ fontSize: "15px", fontWeight: "lighter", margin: "0 0 10px", display: "flex", justifyContent: "center", textAlign: "center" }}
+ className="errorText"
>
Erro ao tentar obter os dados
</p>
@@ -46,6 +47,7 @@ export default function Template(props) {
props.length === 0 ?
(
<NoContent
+ contrast={props.contrast}
text={props.noContentText}
image={noLearnObjFound}
/>
@@ -82,6 +84,7 @@ export default function Template(props) {
<LoadingSpinner text={'Carregando Recursos...'} />
:
<ButtonsAreaRecurso
+ contrast={props.contrast}
sliceLength={props.slice.length}
length={props.length}
showMore={props.showMore}
diff --git a/src/Components/TabPanels/StyledComponents.js b/src/Components/TabPanels/StyledComponents.js
index 182fd013462a57191b7482f708e4379537c4255c..e4eb39e0a46c34c075d70441f0f2ebfdf0462cbd 100644
--- a/src/Components/TabPanels/StyledComponents.js
+++ b/src/Components/TabPanels/StyledComponents.js
@@ -61,7 +61,8 @@ export const WhiteContainer = styled.div`
flex-direction : column;
margin-left : auto;
margin-right : auto;
- background-color : #fff;
+ background-color: ${props => props.contrast === "" ? "#fff" : "black"};
+ border: ${props => props.contrast === "" ? 0 : "1px solid white"};
box-shadow : 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
margin-bottom : 30px;
@@ -78,6 +79,16 @@ export const WhiteContainer = styled.div`
@media screen and (max-width: 768px) {
width : auto;
}
+
+ .errorText{
+ font-size: 15px;
+ color: ${props => props.contrast === "" ? "" : "white"}
+ font-weight: lighter;
+ margin: 0 0 10px;
+ display: flex;
+ justify-content: center;
+ text-align: center;
+ }
`
export const StyledGrid = styled(Grid)`
@@ -93,6 +104,11 @@ export const Carregados = styled.div`
position : relative;
margin-right : -15px;
margin-left : -15px;
+ .total{
+ margin: 0 0 10px;
+ font-size: 14px;
+ color: ${props => props.contrast === "" ? "" : "white"};
+ }
`
export const HeaderGrid = styled(Grid)`
@@ -146,7 +162,8 @@ export const ContainerStyled = styled.div`
/*User page and Public User page components: */
export const HeaderContainer = styled.div`
- background-color : #afeeee;
+ background-color: ${props => props.contrast === "" ? "#afeeee" : "black"};
+ border: ${props => props.contrast === "" ? 0 : "1px solid white"};
position : relative;
`
@@ -184,6 +201,14 @@ export const UserProfileInfoDiv = styled.div`
left : 260px;
overflow : hidden;
margin-bottom : 20px;
+ p{
+ font-size: 28px;
+ color: #fff;
+ padding: 5px 10px;
+ font-weight: 500;
+ background-color: ${props => props.contrast === "" ? "#77777796" : "black"};
+ border-radius: 5px;
+ }
`
export const CheckTeacherDiv = styled.div`
@@ -191,6 +216,9 @@ export const CheckTeacherDiv = styled.div`
padding-left : 250px;
margin-bottom : -10px;
display : absolute;
+ background-color: ${props => props.contrast === "" ? "" : "black"};
+ border-left: ${props => props.contrast === "" ? 0 : "1px solid white"};
+ border-right: ${props => props.contrast === "" ? 0 : "1px solid white"};
p {
margin : 0 0 10px;
@@ -198,6 +226,7 @@ export const CheckTeacherDiv = styled.div`
font-size: 15px;
line-height: 22px;
text-align: left;
+ color: ${props => props.contrast === "" ? "" : "white"};
span {
padding-right : 5px;
@@ -212,11 +241,15 @@ export const CheckTeacherDiv = styled.div`
`
export const StyledTabs = styled(Tabs)`
- .MuiTab-textColorPrimary.Mui-selected {
- color : #00bcd4;
+ .MuiTab-textColorPrimary{
+ color: ${props => props.contrast === "" ? "#666" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ font-weight: 400;
}
- .PrivateTabIndicator-colorPrimary-4 {
- background-color : #00bcd4 !important;
+ .MuiTab-textColorPrimary.Mui-selected {
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ text-decoration: none;
+ font-weight: 500;
}
`
@@ -225,6 +258,10 @@ export const RodapeDiv = styled.div`
flex-direction : row;
justify-content : flex-end;
padding-right : 15px;
+ background-color: ${props => props.contrast === "" ? "transparent" : "black"};
+ border-left: ${props => props.contrast === "" ? 0 : "1px solid white"};
+ border-right: ${props => props.contrast === "" ? 0 : "1px solid white"};
+ border-bottom: ${props => props.contrast === "" ? 0 : "1px solid white"};
.report-button {
@media screen and (max-width: 768px) {
@@ -235,7 +272,7 @@ export const RodapeDiv = styled.div`
`
export const NavBarContentContainer = styled(Container)`
- background-color : transparent;
+ background-color: ${props => props.contrast === "" ? "transparent" : "black"};
padding-bottom : 0;
overflow-x : hidden !important;
overflow-y : hiddden !important;
@@ -248,5 +285,5 @@ export const BackgroundDiv = styled.div`
font-size : 14px;
padding-bottom : 50px;
line-height : 20px;
- background : #f4f4f4;
+ background-color: ${props => props.contrast === "" ? " #f4f4f4" : "black"};
`
diff --git a/src/Components/TabPanels/UserPageTabs/PanelAtividades.js b/src/Components/TabPanels/UserPageTabs/PanelAtividades.js
index 9d4c315e717de98b9f73a9f923e2ef5c7b533f68..4decca656c7fe5d4f0ea87a57dbf39b3f391692d 100644
--- a/src/Components/TabPanels/UserPageTabs/PanelAtividades.js
+++ b/src/Components/TabPanels/UserPageTabs/PanelAtividades.js
@@ -208,7 +208,7 @@ export default function TabPanelAtividades(props) {
loadingMore ?
<LoadingSpinner contrast={props.contrast} text="Carregando mais atividades..." />
:
- <Grid container direction="row" alignItems="center" justify="flex-start">
+ <Grid container direction="row" alignItems="center" justify="flex-start" spacing={1}>
<Grid item xs={12} md={4}>
<LoadMoreButton onClick={() => { showMore(4) }}>CARREGAR MAIS 4</LoadMoreButton>
</Grid>
@@ -262,6 +262,7 @@ const MainContainerDesktop = styled.div`
margin-left : auto;
margin-right : auto;
background-color: ${props => props.contrast === "" ? "" : "black"};
+ border: ${props => props.contrast === "" ? "" : "1px solid white"};
@media screen and (min-width: 1200px) {
width : 1170px;
diff --git a/src/Components/TabPanels/UserPageTabs/PanelColecoes.js b/src/Components/TabPanels/UserPageTabs/PanelColecoes.js
index 3abc14f58d9dae31f8a949f890890dcfa0f85c25..19bc6ef573aa0b606340dd9f1f8bb6c6ee5ba765 100644
--- a/src/Components/TabPanels/UserPageTabs/PanelColecoes.js
+++ b/src/Components/TabPanels/UserPageTabs/PanelColecoes.js
@@ -151,7 +151,7 @@ export default function TabPanelColecoes(props) {
{
loading ?
(
- <LoadingSpinner text={'CARREGANDO COLEÇÕES'} />
+ <LoadingSpinner contrast={props.contrast} text={'CARREGANDO COLEÇÕES'} />
)
:
(
diff --git a/src/Components/TabPanels/UserPageTabs/PanelMeusRecursos.js b/src/Components/TabPanels/UserPageTabs/PanelMeusRecursos.js
index 46400fa191908298e8c373e83a5971b74da1dcf3..4f82ce7edac857cb6a6246a899140ad868180ebb 100644
--- a/src/Components/TabPanels/UserPageTabs/PanelMeusRecursos.js
+++ b/src/Components/TabPanels/UserPageTabs/PanelMeusRecursos.js
@@ -45,7 +45,7 @@ export default function TabPanelAtividades(props) {
const [drafts, setDrafts] = useState([]);
const [curating, setCurating] = useState([]);
- function handleSuccess(responseArr, headersArr) {
+ function handleSuccess(responseArr, headersArr) {
setErrorInLearnObj(responseArr[0].errors ? true : false)
setErrorInDrafts(responseArr[1].errors ? true : false)
setErrorInCurating(responseArr[2].errors ? true : false)
@@ -178,13 +178,14 @@ export default function TabPanelAtividades(props) {
{
loading ?
(
- <LoadingSpinner text={'Carregando Recursos'} />
+ <LoadingSpinner contrast={props.contrast} text={'Carregando Recursos'} />
)
:
(
[
<React.Fragment>
- <Template
+ <Template
+ contrast={props.contrast}
length={learningObjects.length}
titleText={learningObjects.length === 1 ? "Recurso Publicado" : "Recursos Publicados"}
noContentText={"Você ainda não publicou nenhum Recurso!"}
@@ -196,6 +197,7 @@ export default function TabPanelAtividades(props) {
/>
<Template
+ contrast={props.contrast}
length={drafts.length}
titleText={drafts.length === 1 ? "Rascunho Publicado" : "Rascunhos Publicados"}
noContentText={"Você não tem nenhum recurso sendo editado."}
@@ -207,6 +209,7 @@ export default function TabPanelAtividades(props) {
/>
<TemplateCuradoria
+ contrast={props.contrast}
length={curating.length}
titleText={curating.length === 1 ? "Recurso sendo avaliado pela curadoria" : "Recursos sendo avaliados pela curadoria"}
noContentText={"Você não tem nenhum recurso sendo avaliado pelos curadores."}
diff --git a/src/Components/UserPageComponents/EditProfileButton.js b/src/Components/UserPageComponents/EditProfileButton.js
index beaa7137501ba03fc9de6f46d14391c6e7072f13..de9e1d778682515aa40d1f60864d2b4fe5c7208d 100644
--- a/src/Components/UserPageComponents/EditProfileButton.js
+++ b/src/Components/UserPageComponents/EditProfileButton.js
@@ -18,25 +18,25 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
import React from 'react';
import { Store } from '../../Store.js';
import styled from 'styled-components'
-import {Link} from 'react-router-dom';
+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)
+export default function EditProfileButton({ contrast }) {
+ const { state } = React.useContext(Store)
return (
- <EditProfileAnchor to="/editarperfil">
+ <EditProfileAnchor to="/editarperfil" contrast={contrast}>
<Button>
- {state.windowSize.width >=900 ?
+ {state.windowSize.width >= 900 ?
(
<React.Fragment>
- <EditIcon style={{marginRight:"5px", verticalAlign:"middle"}}/> <span>EDITAR PERFIL</span>
+ <EditIcon className="icon" /> <span>EDITAR PERFIL</span>
</React.Fragment>
)
:
(
- <EditIcon style={{marginRight:"5px", verticalAlign:"middle"}}/>
+ <EditIcon className="icon" />
)
}
</Button>
@@ -47,28 +47,33 @@ export default function EditProfileButton () {
const EditProfileAnchor = styled(Link)`
Button {
box-shadow : 0 2px 5px 0 rgba(0,0,0,.26);
- background-color : #fafafa;
+ background-color: ${props => props.contrast === "" ? "#fafafa" : "black"};
position : absolute;
right : 10px;
top : 10px;
margin-bottom : 20px;
- color : #666;
+ color: ${props => props.contrast === "" ? "#666" : "yellow"};
padding : 0 10px;
- text-decoration : none;
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
border-radius : 3px;
@media screen and (min-width: 800px) {
min-height : 36px;
min-width : 88px;
}
line-height : 36px;
- border : 0;
+ border: ${props => props.contrast === "" ? "0" : "1px solid white"};
display: inline-block;
text-align : center;
:hover{
- background-color : #fafafa;
+ background-color: ${props => props.contrast === "" ? "#fafafa" : "rgba(255,255,0,0.24)"};
}
@media screen and (max-width: 600px) {
max-width : 44px !important ;
}
}
+ .icon{
+ margin-right: 5px;
+ vertical-align: middle;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
`
diff --git a/src/Components/UserPageComponents/SubmitterStatus.js b/src/Components/UserPageComponents/SubmitterStatus.js
index 1cb29365644038f8a8a9a115675ddf8f0af1ccfd..d36f53dc7412e5c83e7c54bdeb3b46bc7558a74e 100644
--- a/src/Components/UserPageComponents/SubmitterStatus.js
+++ b/src/Components/UserPageComponents/SubmitterStatus.js
@@ -15,13 +15,13 @@ 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 React, { useContext } from 'react';
import { Store } from '../../Store.js';
import CheckDecagram from '../../img/check-decagram-gray.svg'
-import {Link} from 'react-router-dom';
+import { Link } from 'react-router-dom';
-export default function SubmitterStatus (props) {
- const {state} = useContext(Store)
+export default function SubmitterStatus(props) {
+ const { state } = useContext(Store)
let text;
switch (state.currentUser.submitter_request) {
@@ -37,21 +37,21 @@ export default function SubmitterStatus (props) {
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} alt='check icon'/>
- </span>
- {text}
- <Link to={{
- pathname: '/editarperfil',
- tabValue: {
- value: 1
- }
- }}>
- <span style={{color:"#00bcd4"}}> SAIBA MAIS</span>
- </Link>
-
+ <p style={{ fontSize: "15px", lineHeight: "22px", textAlign: "left", margin: "0 0 10px" }}>
+ <span>
+ <span style={{ paddingRight: "5px" }}>
+ <img src={CheckDecagram} alt='check icon' />
+ </span>
+ {text}
+ <Link to={{
+ pathname: '/editarperfil',
+ tabValue: {
+ value: 1
+ }
+ }}>
+ <span style={state.contrast === "" ? { color: "#00bcd4" } : { color: "yellow", textDecoration: "underline", cursor: "pointer" }}> SAIBA MAIS</span>
+ </Link>
+
</span>
</p>
</React.Fragment>
diff --git a/src/Components/UserPageComponents/UserInfo.js b/src/Components/UserPageComponents/UserInfo.js
index 4782759f8f2e4eb70a86b03e13d8be603c035f6e..b8dde202a47fa21b4e53baa725421b115c762230 100644
--- a/src/Components/UserPageComponents/UserInfo.js
+++ b/src/Components/UserPageComponents/UserInfo.js
@@ -25,18 +25,8 @@ export default function UserInfo(props) {
const user = state.currentUser.name;
return (
- <UserProfileInfoDiv>
- <p
- style={{
- fontSize: "28px",
- color: "#fff",
- paddingTop: "5px",
- paddingBottom: "5px",
- fontWeight: "500",
- backgroundColor: "#77777796",
- borderRadius: "5px",
- }}
- >
+ <UserProfileInfoDiv contrast={state.contrast}>
+ <p>
{user}
</p>
</UserProfileInfoDiv>
diff --git a/src/Pages/UserPage.js b/src/Pages/UserPage.js
index c0266970426f39887b3158fd54e687e428411a64..b2475f4f433e747c3cdd933c405acad284fdd200 100644
--- a/src/Pages/UserPage.js
+++ b/src/Pages/UserPage.js
@@ -135,21 +135,21 @@ export default function UserPage(props) {
userAvatar={state.currentUser.avatar}
/>
- <BackgroundDiv>
- <CustomizedBreadcrumbs values={["Minha área", tabs[tabValue]]} />
+ <BackgroundDiv contrast={state.contrast}>
+ <CustomizedBreadcrumbs contrast={state.contrast} values={["Minha área", tabs[tabValue]]} />
<Grid container spacing={2}>
<Grid item xs={12}>
<div style={{ padding: "10px 0 8px 0" }}>
<UserProfileContainer>
- <HeaderContainer>
+ <HeaderContainer contrast={state.contrast}>
<Cover id={id} />
<ProfileAvatar id={id} />
{WIDTH <= 600 ? null : <UserInfo />}
- <EditProfileButton />
+ <EditProfileButton contrast={state.contrast} />
</HeaderContainer>
{WIDTH <= 600 ? (
<Grid
- style={{ marginTop: "4em" }}
+ style={state.contrast === "" ? { marginTop: "4em" } : { paddingTop: "4em", backgroundColor: "black", borderLeft: "1px solid white", borderRight: "1px solid white", }}
container
justify="center"
alignItems="center"
@@ -159,7 +159,7 @@ export default function UserPage(props) {
<Typography
variant="h4"
gutterBottom
- style={{ textAlign: "center" }}
+ style={state.contrast === "" ? { textAlign: "center" } : { color: "white", textAlign: "center" }}
>
{state.currentUser.name}
</Typography>
@@ -168,8 +168,8 @@ export default function UserPage(props) {
style={{
marginTop: "0.5em",
marginBottom: "0.5em",
- borderTop: "0.5px solid #eee",
- borderBottom: "0.5px solid #eee",
+ borderTop: "1px solid white",
+ borderBottom: "1px solid white",
}}
container
spacing={4}
@@ -178,7 +178,7 @@ export default function UserPage(props) {
direction="row"
>
<Grid item>
- <Typography variant="h6" onClick={(e) => { handleChangeTab(e, 4) }}>
+ <Typography style={state.contrast === "" ? {} : { color: "white" }} variant="h6" onClick={(e) => { handleChangeTab(e, 4) }}>
{loading ? (
<CircularProgress size={20} />
) : (
@@ -187,7 +187,7 @@ export default function UserPage(props) {
</Typography>
</Grid>
<Grid item>
- <Typography variant="h6" onClick={(e) => { handleChangeTab(e, 4) }}>
+ <Typography style={state.contrast === "" ? {} : { color: "white" }} variant="h6" onClick={(e) => { handleChangeTab(e, 4) }}>
{loading ? (
<CircularProgress size={20} />
) : (
@@ -198,25 +198,24 @@ export default function UserPage(props) {
</Grid>
</Grid>
) : (
- <CheckTeacherDiv>
+ <CheckTeacherDiv contrast={state.contrast}>
<SubmitterStatus />
</CheckTeacherDiv>
)}
- <RodapeDiv>
- <NavBarContentContainer>
+ <RodapeDiv contrast={state.contrast}>
+ <NavBarContentContainer contrast={state.contrast}>
<StyledTabs
+ contrast={state.contrast}
value={tabValue}
onChange={handleChangeTab}
indicatorColor="primary"
textColor="primary"
variant="scrollable"
scrollButtons="on"
- TabIndicatorProps={{
- style: { background: "#00bcd4" },
- }}
+ TabIndicatorProps={{ style: state.contrast === "" ? { background: "#00bcd4" } : { background: "yellow" } }}
>
{tabs.map((tab) => (
- <StyledTab label={tab} key={tab} />
+ <StyledTab contrast={state.contrast} label={tab} key={tab} />
))}
</StyledTabs>
</NavBarContentContainer>
@@ -249,10 +248,4 @@ export default function UserPage(props) {
}
const StyledTab = styled(Tab)`
- .Mui-selected {
- border-bottom-color: #00bcd4 !important;
- }
- .MuiTab-wrapper {
- border-bottom-color: #00bcd4 !important;
- }
`