diff --git a/src/Components/CriarColecaoForm.js b/src/Components/CriarColecaoForm.js
index ea8c05070f21519b8594a13c03897d69481b2556..9daabc90b4091e9b7a1db9b74018e5b49d89d64d 100644
--- a/src/Components/CriarColecaoForm.js
+++ b/src/Components/CriarColecaoForm.js
@@ -16,8 +16,8 @@ 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 React, { useContext } from 'react'
+import { Store } from '../Store.js'
import { Button } from '@material-ui/core';
import styled from 'styled-components'
import Radio from '@material-ui/core/Radio';
@@ -25,17 +25,17 @@ import RadioGroup from '@material-ui/core/RadioGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import FormControl from '@material-ui/core/FormControl';
import TextField from '@material-ui/core/TextField';
-import {postRequest} from './HelperFunctions/getAxiosConfig'
+import { postRequest } from './HelperFunctions/getAxiosConfig'
-export default function CriarColecaoForm (props) {
- const {state} = useContext(Store)
+export default function CriarColecaoForm(props) {
+ const { state } = useContext(Store)
const [value, setValue] = React.useState(-1);
/*values are set according to backend complaint id*/
const [options] = React.useState([
- {value : "pública", text :'Pública (Sua coleção estará disponível para todos)'},
- {value : "privada", text : 'Privada (Somente você poderá visualizar esta coleção)'}
+ { value: "pública", text: 'Pública (Sua coleção estará disponível para todos)' },
+ { value: "privada", text: 'Privada (Somente você poderá visualizar esta coleção)' }
])
const handleChange = (event) => {
@@ -43,8 +43,8 @@ export default function CriarColecaoForm (props) {
};
const [colName, setColName] = React.useState({
- key : false,
- value : "",
+ key: false,
+ value: "",
})
const handleColName = (e) => {
@@ -52,13 +52,14 @@ export default function CriarColecaoForm (props) {
const flag = userInput.length === 0 ? true : false
- setColName({...colName,
- key : flag,
- value : userInput
+ setColName({
+ ...colName,
+ key: flag,
+ value: userInput
})
}
- function handleSuccess (data) {
+ function handleSuccess(data) {
props.finalize(data.id)
}
const formSubmit = (e) => {
@@ -68,51 +69,51 @@ export default function CriarColecaoForm (props) {
const finalRadioValue = value === 'pública' ? 'public' : 'private'
const finalColName = colName
- if(!(finalColName.key)) {
+ if (!(finalColName.key)) {
let payload = {
- "collection" : {
- "name" : finalColName.value,
- "owner_id" : state.currentUser.id,
- "owner_type" : "User",
- "privacy" : finalRadioValue
+ "collection": {
+ "name": finalColName.value,
+ "owner_id": state.currentUser.id,
+ "owner_type": "User",
+ "privacy": finalRadioValue
}
}
- postRequest( `/collections/`, payload, handleSuccess, (error) =>{console.log(error)})
+ postRequest(`/collections/`, payload, handleSuccess, (error) => { console.log(error) })
}
}
return (
- <form onSubmit={(e) => {formSubmit(e)}} style={{textAlign : "left"}}>
+ <form onSubmit={(e) => { formSubmit(e) }} style={{ textAlign: "left" }}>
<StyledTextField
- id = {"col-name"}
+ id={"col-name"}
label={"Nome da coleção"}
- type = {"text"}
- value = {colName.value}
- onChange = {e => handleColName(e)}
- error = {colName.key}
-
- helperText = {colName.key ? <span>O nome é importante para identificar a sua coleção na plataforma.<br/>Ex: Matemática Ensino Médio </span> : ""}
- required = {true}
- style={{width:"100%"}}
+ type={"text"}
+ value={colName.value}
+ onChange={e => handleColName(e)}
+ error={colName.key}
+ contrast={state.contrast}
+ helperText={colName.key ? <span>O nome é importante para identificar a sua coleção na plataforma.<br />Ex: Matemática Ensino Médio </span> : ""}
+ required={true}
+ style={{ width: "100%" }}
/>
- <span style={{fontSize : "12px", color : "#b3b3b3"}}>Esta coleção é:</span>
+ <span style={{ fontSize: "12px", color: "#b3b3b3" }}>Esta coleção é:</span>
- <StyledFormControl component="fieldset">
+ <StyledFormControl contrast={state.contrast} component="fieldset">
<RadioGroup value={value} onChange={handleChange}>
{
options.map(option =>
- <FormControlLabel key={option.value} value={option.value} control={<Radio color="#673ab7"/>} label={option.text} />
+ <FormControlLabel key={option.value} value={option.value} control={<Radio color="#673ab7" />} label={option.text} />
)
}
</RadioGroup>
</StyledFormControl>
<ButtonsDiv>
- <ButtonCancelar onClick={props.handleClose}>CANCELAR</ButtonCancelar>
- <ButtonEnviar type="submit">CRIAR COLEÇÃO</ButtonEnviar>
+ <ButtonCancelar contrast={state.contrast} onClick={props.handleClose}>CANCELAR</ButtonCancelar>
+ <ButtonEnviar contrast={state.contrast} type="submit">CRIAR COLEÇÃO</ButtonEnviar>
</ButtonsDiv>
</form>
);
@@ -134,15 +135,15 @@ export const ButtonCancelar = styled(Button)`
padding-right : 16px !important;
font-weight : 500 !important;
border-radius : 3px !important;
- color :#666 !important;
+ color: ${props => props.contrast === "" ? "#666 !important" : "white !important"};
background-color: transparent;
min-width : 88px !important;
height : 36px !important;
`
export const ButtonEnviar = styled(Button)`
- background-color : #673ab7 !important;
- color : #fff !important;
+ background-color: ${props => props.contrast === "" ? "#673ab7 !important" : "black !important"};
+ color: ${props => props.contrast === "" ? "#fff !important" : "yellow !important"};
font-size: 14px !important;
font-weight: 500 !important;
height: 36px !important;
@@ -154,8 +155,11 @@ export const ButtonEnviar = styled(Button)`
min-width : 88px !important;
vertical-align : middle !important;
margin : 6px 8px !important;
- text-decoration : none !important;
-
+ text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"};
+ border: ${props => props.contrast === "" ? "" : "1px solid white !important"};
+ :hover{
+ background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
+ }
.MuiButton-label {
padding-right : 16px;
padding-left : 16px;
@@ -169,7 +173,7 @@ export const StyledTextField = styled(TextField)`
}
label.Mui-focused {
- color : #673ab7;
+ color: ${props => props.contrast === "" ? "#673ab7" : "yellow"};
}
label.Mui-focused.Mui-error {
@@ -177,7 +181,7 @@ export const StyledTextField = styled(TextField)`
}
.MuiInput-underline::after {
- border-bottom: 2px solid #673ab7;
+ color: ${props => props.contrast === "" ? "#673ab7" : "yellow"};
}
`
@@ -185,10 +189,11 @@ export const StyledFormControl = styled(FormControl)`
display : block !important;
.MuiFormControlLabel-root {
- color : #666;
+ color: ${props => props.contrast === "" ? "#666" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
}
.MuiIconButton-label {
- color : #666;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
}
.PrivateRadioButtonIcon-checked {
color : orange;
diff --git a/src/Components/CriarColecaoModal.js b/src/Components/CriarColecaoModal.js
index 73e7384fc040f415e947113c26b9ff56544f3d7f..ee7a10c1f80e89b3617ccd7909bbe1928e7bf5a5 100644
--- a/src/Components/CriarColecaoModal.js
+++ b/src/Components/CriarColecaoModal.js
@@ -25,22 +25,21 @@ import styled from 'styled-components'
import CriarColecaoForm from './CriarColecaoForm.js'
import CloseIcon from '@material-ui/icons/Close';
-function CloseModalButton (props) {
+function CloseModalButton(props) {
return (
<StyledCloseModalButton onClick={props.handleClose}>
- <CloseIcon/>
+ <CloseIcon style={props.contrast === "" ? { color: "#666" } : { color: "white" }} />
</StyledCloseModalButton>
)
}
-export default function CriarColecaoModal (props) {
+export default function CriarColecaoModal(props) {
return (
<StyledModal
aria-labelledby="transition-modal-title"
aria-describedby="transition-modal-description"
open={props.open}
-
centered="true"
onClose={props.handleClose}
closeAfterTransition
@@ -50,14 +49,14 @@ export default function CriarColecaoModal (props) {
}}
>
<Fade in={props.open}>
- <Container>
- <Header>
- <span style={{width:"32px"}}/>
+ <Container contrast={props.contrast}>
+ <Header contrast={props.contrast}>
+ <span style={{ width: "32px" }} />
<h2>Criar Coleção</h2>
- <CloseModalButton handleClose={props.handleClose}/>
+ <CloseModalButton handleClose={props.handleClose} contrast={props.contrast} />
</Header>
- <Content style={{paddingTop : "0"}}>
- <CriarColecaoForm handleClose={props.handleClose} finalize={props.handleClose}/>
+ <Content style={{ paddingTop: "0" }}>
+ <CriarColecaoForm handleClose={props.handleClose} finalize={props.handleClose} />
</Content>
</Container>
</Fade>
@@ -82,14 +81,13 @@ const Header = styled.div`
h2 {
font-size : 26px;
font-weight : lighter;
- color : #666
+ color: ${props => props.contrast === "" ? "#666" : "white"};
}
`
const StyledCloseModalButton = styled(Button)`
display : inline-block;
position : relative;
- float : right !important;
margin-right : -8px !important;
background : transparent !important;
min-width: 0 !important;
@@ -112,8 +110,8 @@ const StyledModal = styled(Modal)`
const Container = styled.div`
box-sizing : border-box;
box-shadow : 0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px rgba(0,0,0,.12);
- background-color : white;
- align : center;
+ background-color: ${props => props.contrast === "" ? "white" : "black"};
+ align-items : center;
display : flex;
flex-direction : column;
min-width : 240px;
diff --git a/src/Components/FormInput.js b/src/Components/FormInput.js
index 813877ed5261daf1e1723771ab71b77b07d0696d..eca4d8b4df263806e29e0fc6c2edf0707d72bb65 100644
--- a/src/Components/FormInput.js
+++ b/src/Components/FormInput.js
@@ -62,23 +62,23 @@ export default function FormInput(props) {
return (
- <StyledTextField
- label={props.placeholder}
- margin="normal"
- id = {props.name}
- name = {props.name}
- type = {props.inputType}
- value = {props.value}
- onChange = {props.handleChange}
- rows = {props.rows}
- error = {props.error}
- rowsMax = {props.rowsMax}
- InputProps={{className: classes.input}}
- required = {props.required}
- helperText ={props.help}
- style={{width:"100%"}}
- mask={props.mask}
- multiline={props.multi}
- />
+ <StyledTextField
+ label={props.placeholder}
+ margin="normal"
+ id={props.name}
+ name={props.name}
+ type={props.inputType}
+ value={props.value}
+ onChange={props.handleChange}
+ rows={props.rows}
+ error={props.error}
+ rowsMax={props.rowsMax}
+ InputProps={{ className: classes.input }}
+ required={props.required}
+ helperText={props.help}
+ style={{ width: "100%" }}
+ mask={props.mask}
+ multiline={props.multi}
+ />
);
}
diff --git a/src/Components/TabPanels/PanelComponents/TemplateColecao.js b/src/Components/TabPanels/PanelComponents/TemplateColecao.js
index b1526eb584834bb5c45f03436eef946c512b8512..2ccdd707cc5fc60df74e099997b2b60fab906835 100644
--- a/src/Components/TabPanels/PanelComponents/TemplateColecao.js
+++ b/src/Components/TabPanels/PanelComponents/TemplateColecao.js
@@ -71,8 +71,9 @@ export default function PanelTemplateColecao(props) {
}
return (
- <WhiteContainer>
+ <WhiteContainer contrast={props.contrast}>
<Title
+ contrast={props.contrast}
title={props.title}
length={props.end}
/>
@@ -80,17 +81,18 @@ export default function PanelTemplateColecao(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>
:
props.length === 0 ?
(
- <NoContent
- text={props.noContentText}
+ <NoContent
+ contrast={props.contrast}
+ text={props.noContentText}
image={noCollFound}
- />
+ />
)
:
(
@@ -106,9 +108,10 @@ export default function PanelTemplateColecao(props) {
</StyledGrid>
{
props.loadingMore ?
- <LoadingSpinner text={'Carregando Recursos...'} />
+ <LoadingSpinner contrast={props.contrast} text={'Carregando coleções...'} />
:
<ButtonsAreaColecao
+ contrast={props.contrast}
sliceLength={props.sliceArr.length}
length={props.length}
showMore={props.showMore}
diff --git a/src/Components/TabPanels/PanelComponents/TemplateRede.js b/src/Components/TabPanels/PanelComponents/TemplateRede.js
index e5d2a845a2b2cc388331c622912ac904844379be..872675b8691ab8c83f0d9cc056eafe50be5d1d46 100644
--- a/src/Components/TabPanels/PanelComponents/TemplateRede.js
+++ b/src/Components/TabPanels/PanelComponents/TemplateRede.js
@@ -43,9 +43,10 @@ export default function PanelTemplateRede(props) {
}
return (
- <WhiteContainer>
+ <WhiteContainer contrast={props.contrast}>
<Title
+ contrast={props.contrast}
title={props.title}
length={props.end}
/>
@@ -56,7 +57,7 @@ export default function PanelTemplateRede(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>
@@ -64,7 +65,7 @@ export default function PanelTemplateRede(props) {
props.length === 0 ?
(
[
- <NoContent text={props.noContentText} />
+ <NoContent contrast={props.contrast} text={props.noContentText} />
]
)
:
@@ -87,9 +88,10 @@ export default function PanelTemplateRede(props) {
</StyledGrid>
{
props.loadingMore ?
- <LoadingSpinner text={'Carregando Recursos...'} />
+ <LoadingSpinner contrast={props.contrast} text={'Carregando Recursos...'} />
:
<ButtonsAreaRede
+ contrast={props.contrast}
sliceLength={props.sliceArr.length}
length={props.length}
showMore={props.showMore}
@@ -102,6 +104,6 @@ export default function PanelTemplateRede(props) {
)
}
- </WhiteContainer>
+ </WhiteContainer >
)
}
diff --git a/src/Components/TabPanels/UserPageTabs/ContainerRedeVazia.js b/src/Components/TabPanels/UserPageTabs/ContainerRedeVazia.js
index 6d15099126be1f6637d77c754b1b21ddcb97284b..467d42ea6f6d9bd69a330aeaf0ac53d9a5bcd382 100644
--- a/src/Components/TabPanels/UserPageTabs/ContainerRedeVazia.js
+++ b/src/Components/TabPanels/UserPageTabs/ContainerRedeVazia.js
@@ -22,32 +22,33 @@ 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 TabRedeImgDiv from './TabRedeImgDiv.js'
-import {WhiteContainer} from '../StyledComponents.js'
+import { WhiteContainer } from '../StyledComponents.js'
import Grid from '@material-ui/core/Grid';
-export default function ContainerRedeVazia (props) {
+export default function ContainerRedeVazia(props) {
return (
<React.Fragment>
- <WhiteContainer>
- <RedeVaziaBoxContainer>
- <StyledSpan>Você ainda não tem uma rede.
- <br/>
- Veja como começar:
+ <WhiteContainer contrast={props.contrast}>
+ <RedeVaziaBoxContainer contrast={props.contrast}>
+ <StyledSpan contrast={props.contrast}>
+ Você ainda não tem uma rede.
+ <br />
+ Veja como começar:
</StyledSpan>
- <StyledSpan>
- <StyledHr/>
- <Grid container style={{paddingLeft : "30px", paddingRight : "15px"}}>
- <Grid item md={4} xs={12}>
- <TabRedeImgDiv img={NoRede1} text={"Para encontrar um usuário específico, você pode utilizar a barra de busca e selecionar a busca por \"pessoas\""}/>
- </Grid>
+ <StyledSpan contrast={props.contrast}>
+ <StyledHr />
+ <Grid container style={{ paddingLeft: "30px", paddingRight: "15px" }}>
+ <Grid item md={4} xs={12}>
+ <TabRedeImgDiv img={NoRede1} text={"Para encontrar um usuário específico, você pode utilizar a barra de busca e selecionar a busca por \"pessoas\""} />
+ </Grid>
- <Grid item md={4} xs={12}>
- <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)"}/>
- </Grid>
+ <Grid item md={4} xs={12}>
+ <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)"} />
+ </Grid>
- <Grid item md={4} xs={12}>
- <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\""}/>
- </Grid>
+ <Grid item md={4} xs={12}>
+ <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\""} />
+ </Grid>
</Grid>
</StyledSpan>
</RedeVaziaBoxContainer>
@@ -64,7 +65,7 @@ const StyledHr = styled.hr`
`
const RedeVaziaBoxContainer = styled.div`
- background-color : #fff;
+ background: ${props => props.contrast === "" ? "#fff" : "black"};
padding: 30px;
padding-right: 30px;
padding-left: 30px;
@@ -77,11 +78,13 @@ const RedeVaziaBoxContainer = styled.div`
}
`
const StyledSpan = styled.span`
+ color: ${props => props.contrast === "" ? "" : "white"};
font-weight : lighter;
margin-top: 0;
font-family: Roboto;
font-size: 24px;
p {
+ color: ${props => props.contrast === "" ? "" : "white"};
font-weight : normal;
}
`
diff --git a/src/Components/TabPanels/UserPageTabs/PanelColecoes.js b/src/Components/TabPanels/UserPageTabs/PanelColecoes.js
index 19bc6ef573aa0b606340dd9f1f8bb6c6ee5ba765..79b37059edba874bdfe5dad0b4dbb6c74ca3e671 100644
--- a/src/Components/TabPanels/UserPageTabs/PanelColecoes.js
+++ b/src/Components/TabPanels/UserPageTabs/PanelColecoes.js
@@ -158,26 +158,27 @@ export default function TabPanelColecoes(props) {
[
<React.Fragment>
<Tentativa
+ contrast={props.contrast}
title={"Minhas Coleções"}
length={userCollections.length}
noContentText={
- <Grid direction='column' justify='center' alignItems='center'>
+ <StyledNewGrid contrast={props.contrast} direction='column' justify='center' alignItems='center'>
<Grid item>
<img src={PaginaVaziaColecao} alt="PaginaVaziaColecao" style={{ height: "150px", width: "150px", verticalAlign: "middle", border: "0" }} />
</Grid>
<Grid>
- <span style={{ fontFamily: "Roboto", fontWeight: "lighter", fontSize: "24px", textAlign: 'center' }}>
- Criamos a sua primeira Coleção!
+ <span className="title">
+ Crie a sua primeira Coleção!
</span>
</Grid>
<Grid>
- <p style={{ fontFamily: "Roboto", fontSize: "16px", margin: "10px 0 0", fontWeight: "normal" }}>
+ <p className="explication">
Adicione nela recursos que você queira acessar mais tarde.
<br />
Crie novas coleções clicando no cartão roxo "Criar Colecão".
</p>
</Grid>
- </Grid>
+ </StyledNewGrid>
}
sliceArr={userCollections}
showMore={showMoreUserCollections}
@@ -189,6 +190,7 @@ export default function TabPanelColecoes(props) {
/>
<PanelTemplateColecao
+ contrast={props.contrast}
title={"Coleções que você segue"}
length={followedCollections.length}
noContentText={"Você ainda não segue nenhuma coleção."}
@@ -213,34 +215,36 @@ function Tentativa(props) {
if (props.error)
return (
- <WhiteContainer>
+ <WhiteContainer contrast={props.contrast}>
<Title
+ contrast={props.contrast}
title={props.title}
length={props.length}
/>
<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>
+ </p>
</WhiteContainer>
)
else
return (
- <WhiteContainer>
- <CriarColecaoModal open={modalOpen} handleClose={() => { handleModal(); props.callback() }} />
+ <WhiteContainer contrast={props.contrast}>
+ <CriarColecaoModal contrast={props.contrast} open={modalOpen} handleClose={() => { handleModal(); props.callback() }} />
<Title
+ contrast={props.contrast}
title={props.title}
length={props.end}
/>
<StyledGrid container spacing={1} style={{ paddingLeft: "30px", paddingRight: "15px" }}>
<Grid item xs={12} sm={6} md={'auto'} lg={3}>
- <CardDiv onClick={() => { handleModal() }}>
- <div style={{ backgroundColor: "#673ab7", display: "flex", height: "100%", width: "100%", justifyContent: "center", alignItems: "center", cursor: "pointer" }}>
+ <CardDiv contrast={props.contrast} onClick={() => { handleModal() }}>
+ <div className="background">
<CreateNewFolderIcon style={{ color: "#fff", fontSize: "70px" }} />
- <p style={{ fontSize: "16px", margin: "0 0 10px", color: "#fff" }}>
+ <p className="action">
CRIAR COLEÇÃO
</p>
</div>
@@ -291,9 +295,10 @@ function Tentativa(props) {
</StyledGrid>
{
props.loadingMore ?
- <LoadingSpinner text={'Carregando Recursos...'} />
+ <LoadingSpinner contrast={props.contrast} text={'Carregando Recursos...'} />
:
<ButtonsAreaColecao
+ contrast={props.contrast}
sliceLength={props.sliceArr.length}
length={props.length}
showMore={props.showMore}
@@ -305,10 +310,45 @@ function Tentativa(props) {
)
}
+const StyledNewGrid = styled(Grid)`
+
+ .title{
+ font-family: Roboto;
+ font-weight: lighter;
+ font-size: 24px;
+ text-align: center;
+ color: ${props => props.contrast === "" ? "" : "white"};
+ }
+ .explication{
+ font-family: Roboto;
+ font-size: 16px;
+ margin: 10px 0 0;
+ color: ${props => props.contrast === "" ? "" : "white"};
+ font-weight: normal;
+ }
+
+`
+
const CardDiv = styled(Card)`
margin-top : 10px;
margin-bottom : 10px;
height : 381px;
width : 272.5px;
- ${'' /* float : left; */}
+ border: ${props => props.contrast === "" ? 0 : "1px solid white"};
+
+ .background{
+ background-color: ${props => props.contrast === "" ? "#673ab7" : "black"};
+ display: flex;
+ height: 100%;
+ width: 100%;
+ justify-content: center;
+ align-items: center;
+ cursor: pointer;
+ }
+ .action{
+ font-size: 16px;
+ margin: 0 0 10px;
+ color: ${props => props.contrast === "" ? "#fff" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ }
`
diff --git a/src/Components/TabPanels/UserPageTabs/PanelCuradoria.js b/src/Components/TabPanels/UserPageTabs/PanelCuradoria.js
index 084f865b9077e0752df8b34d221debade2a35492..d2196091f056f506a7f8239ca7c6498eb3587490 100644
--- a/src/Components/TabPanels/UserPageTabs/PanelCuradoria.js
+++ b/src/Components/TabPanels/UserPageTabs/PanelCuradoria.js
@@ -90,13 +90,14 @@ export default function TabPanelCuradoria(props) {
{
loading ?
(
- <LoadingSpinner text={"Carregando Recursos"} />
+ <LoadingSpinner contrast={props.contrast} text={"Carregando Recursos"} />
)
:
(
[
<React.Fragment>
<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/TabPanels/UserPageTabs/PanelFavoritos.js b/src/Components/TabPanels/UserPageTabs/PanelFavoritos.js
index 9cf489886054275662595ce75d29302caf0ab2a0..4ac34bc7514659b330cbabd49cf785d3ab83573c 100644
--- a/src/Components/TabPanels/UserPageTabs/PanelFavoritos.js
+++ b/src/Components/TabPanels/UserPageTabs/PanelFavoritos.js
@@ -134,13 +134,14 @@ export default function TabPanelFavoritos(props) {
{
loading ?
(
- <LoadingSpinner text={'CARREGANDO...'} />
+ <LoadingSpinner contrast={props.contrast} text={'CARREGANDO...'} />
)
:
(
[
<React.Fragment>
<Template
+ contrast={props.contrast}
length={likedLearnObjs.length}
titleText={likedLearnObjs.length === 1 ? "Recurso favoritado" : "Recursos favoritados"}
noContentText={"Você não favoritou nenhum recurso ainda"}
@@ -152,6 +153,7 @@ export default function TabPanelFavoritos(props) {
/>
<PanelTemplateColecao
+ contrast={props.contrast}
title={"Coleções favoritadas"}
length={likedCollections.length}
noContentText={"Você ainda não curtiu nenhuma coleção."}
diff --git a/src/Components/TabPanels/UserPageTabs/PanelRede.js b/src/Components/TabPanels/UserPageTabs/PanelRede.js
index ba5741a5044359462e57d866a74e946c4ae0d444..5077f98c14f5add6eac3ff982265ec488d1611d5 100644
--- a/src/Components/TabPanels/UserPageTabs/PanelRede.js
+++ b/src/Components/TabPanels/UserPageTabs/PanelRede.js
@@ -131,7 +131,7 @@ export default function TabPanelRede(props) {
loading ?
(
[
- <LoadingSpinner text={'CARREGANDO...'} />
+ <LoadingSpinner contrast={props.contrast} text={'CARREGANDO...'} />
]
)
:
@@ -143,7 +143,7 @@ export default function TabPanelRede(props) {
(
[
<>
- <ContainerRedeVazia />
+ <ContainerRedeVazia contrast={props.contrast} />
</>
]
)
@@ -151,6 +151,7 @@ export default function TabPanelRede(props) {
(
<React.Fragment>
<PanelTemplateRede
+ contrast={props.contrast}
title={followersList.length === 1 ? "Seguidor" : "Seguidores"}
length={followersList.length}
sliceArr={followersList}
@@ -163,6 +164,7 @@ export default function TabPanelRede(props) {
/>
<PanelTemplateRede
+ contrast={props.contrast}
title={"Seguindo"}
length={followingList.length}
sliceArr={followingList}
diff --git a/src/Pages/EditProfilePage.js b/src/Pages/EditProfilePage.js
index f85c888d5bc7624c7988c6f76119554ba0c5da05..b0ac8ad04797bbfbc8e3d7b9a453efe8df5a8c60 100644
--- a/src/Pages/EditProfilePage.js
+++ b/src/Pages/EditProfilePage.js
@@ -119,7 +119,7 @@ export default function EditProfilePage(props) {
}
return (
- <div style={{ backgroundColor: "#f4f4f4", color: "#666" }}>
+ <Main contrast={state.contrast}>
<Snackbar open={snackbarOpened.open} autoHideDuration={1000} onClose={handleCloseSnackbar}
anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
>
@@ -127,26 +127,29 @@ export default function EditProfilePage(props) {
</Snackbar>
<CustomizedBreadcrumbs
+ contrast={state.contrast}
values={["Minha área", "Configurações da Conta", tabs[tabValue]]}
/>
<MainContainerDiv container spacing={3} justify="center" align="center">
<Grid item xs={12} md={3} style={{ fontFamily: "Roboto" }} >
<Paper elevation={3}>
- <ConfiguracoesMenu>
- <h4 style={{ marginTop: "10px", fontFamily: "inherit", display: "flex", justifyContent: "center" }}>
+ <ConfiguracoesMenu contrast={state.contrast}>
+ <h4 className="title">
Configurações da Conta
</h4>
<StyledTabs
+ contrast={state.contrast}
orientation="vertical"
variant="fullWidth"
+ textColor="primary"
value={tabValue}
onChange={handleChangeTab}
TabIndicatorProps={{ style: { display: "none" } }}
>
- <StyledTab label={tabs[0]} />
- <StyledTab label={tabs[1]} />
- <StyledTab label={tabs[2]} />
+ <StyledTab contrast={state.contrast} label={tabs[0]} />
+ <StyledTab contrast={state.contrast} label={tabs[1]} />
+ <StyledTab contrast={state.contrast} label={tabs[2]} />
</StyledTabs>
</ConfiguracoesMenu>
</Paper>
@@ -161,10 +164,15 @@ export default function EditProfilePage(props) {
/>}
</TabContentDiv>
</MainContainerDiv>
- </div>
+ </Main>
)
}
+const Main = styled.div`
+ background-color: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+`
+
const TabContentDiv = styled(Grid)`
.card-config {
@@ -221,14 +229,21 @@ const TabContentDiv = styled(Grid)`
const StyledTabs = styled(Tabs)`
display : flex;
justify-content : center;
- .Mui-selected {
- background-color : #f4f4f4;
+ .MuiTab-textColorPrimary{
+ color: ${props => props.contrast === "" ? "#666" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ font-weight: 400;
+ }
+ .MuiTab-textColorPrimary.Mui-selected {
+ color: ${props => props.contrast === "" ? "black" : "yellow"};
+ text-decoration: none;
+ font-weight: 600;
}
`
const StyledTab = styled(Tab)`
&:hover {
- background-color : #6666663d;
+ background-color: ${props => props.contrast === "" ? "#6666663d" : "rgba(255,255,0,0.24)"};
}
`
@@ -236,7 +251,16 @@ const ConfiguracoesMenu = styled.div`
margin : 20px 0 20px 0;
border-radius : 3px;
padding : 20px 0;
- background-color : #fff;
+ background-color: ${props => props.contrast === "" ? "#fff" : "black"};
+ border: ${props => props.contrast === "" ? 0 : "1px solid white"};
+
+ .title{
+ margin-top: 10px;
+ font-family: inherit;
+ display: flex;
+ justify-content: center;
+ color: ${props => props.contrast === "" ? "" : "white"};
+ }
`
const MainContainerDiv = styled(Grid)`