diff --git a/src/Components/FormInput.js b/src/Components/FormInput.js
index eca4d8b4df263806e29e0fc6c2edf0707d72bb65..c06f526e542532e69bcc969cde39f5e46fe0ed14 100644
--- a/src/Components/FormInput.js
+++ b/src/Components/FormInput.js
@@ -25,21 +25,30 @@ const StyledTextField = styled(TextField)`
max-width: 100%;
font-size : 15px;
font-weight : lighter;
- color : inherit;
+ color : white;
width : 100% !important;
- full-width : 100% !important;
+ width : 100% !important;
+
+ .MuiOutlinedInput-root {
+ &.Mui-focused fieldset {
+ border-color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ }
+ fieldset {
+ border-color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
+ }
+
+ label{
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
label.Mui-focused {
- color : #00bcd4;
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
}
label.Mui-focused.Mui-error {
color : red;
}
-
- .MuiInput-underline::after {
- border-bottom: 2px solid #00bcd4;
- }
`
const useStyles = makeStyles(theme => ({
@@ -48,11 +57,18 @@ const useStyles = makeStyles(theme => ({
flexWrap: "wrap",
padding: "2px"
},
- textField: {
+ darkTextField: {
+ maxWidth: "100%",
+ fontSize: "15px",
+ fontWeight: "lighter",
+ color: "white",
+ width: "100%"
+ },
+ lightTextField: {
maxWidth: "100%",
fontSize: "15px",
fontWeight: "lighter",
- color: "inherit",
+ color: "black",
width: "100%"
}
}));
@@ -63,6 +79,7 @@ export default function FormInput(props) {
return (
<StyledTextField
+ contrast={props.contrast}
label={props.placeholder}
margin="normal"
id={props.name}
@@ -70,10 +87,11 @@ export default function FormInput(props) {
type={props.inputType}
value={props.value}
onChange={props.handleChange}
+ variant="outlined"
rows={props.rows}
error={props.error}
rowsMax={props.rowsMax}
- InputProps={{ className: classes.input }}
+ InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
required={props.required}
helperText={props.help}
style={{ width: "100%" }}
diff --git a/src/Components/PasswordRecoveryComponents/Default.js b/src/Components/PasswordRecoveryComponents/Default.js
index e7a45389a59a27e43ad925db4290a48d12b2c856..a11262fa7f83fda8e190cde76b1bde9cc2e314f3 100644
--- a/src/Components/PasswordRecoveryComponents/Default.js
+++ b/src/Components/PasswordRecoveryComponents/Default.js
@@ -1,25 +1,34 @@
import React from 'react'
-import {CompletarCadastroButton} from '../TabPanels/UserPageTabs/PanelSolicitarContaProfessor.js'
+import { CompletarCadastroButton } from '../TabPanels/UserPageTabs/PanelSolicitarContaProfessor.js'
import FormInput from "../FormInput.js"
+import styled from 'styled-components'
-export default function Default (props) {
+export default function Default(props) {
return (
- <div style={{overflow:"hidden", display:"inline-block"}}>
- <h2 style={{fontSize:"32px", fontWeight:"200", marginBottom:"20px"}}>Vamos encontrar a sua conta</h2>
+ <div style={{ overflow: "hidden", display: "inline-block" }}>
+ <Title contrast={props.contrast}>Vamos encontrar a sua conta</Title>
<form onSubmit={(e) => { e.preventDefault(); props.onSubmit(e); }}>
<FormInput
+ contrast={props.contrast}
inputType={"text"}
name={"email"}
value={props.value}
placeholder={"E-mail"}
handleChange={e => props.handleChange(e)}
required={true}
- error = {props.error}
+ error={props.error}
/>
- <div style={{display:"flex", justifyContent:"center"}}>
- <CompletarCadastroButton type="submit" >BUSCAR</CompletarCadastroButton>
+ <div style={{ display: "flex", justifyContent: "center" }}>
+ <CompletarCadastroButton contrast={props.contrast} type="submit" >BUSCAR</CompletarCadastroButton>
</div>
</form>
</div>
)
}
+
+const Title = styled.h2`
+ color: ${props => props.contrast === "" ? "" : "white"};
+ font-size: 32px;
+ font-weight: 200;
+ margin-bottom: 20px;
+`
diff --git a/src/Components/PasswordRecoveryComponents/Error.js b/src/Components/PasswordRecoveryComponents/Error.js
index 38ea3937b4b3713e2ac3b363f8d582ff6d21c0f4..6223f3a4f0c7bbd1d319c86b7a8f0c16b8e400dc 100644
--- a/src/Components/PasswordRecoveryComponents/Error.js
+++ b/src/Components/PasswordRecoveryComponents/Error.js
@@ -1,27 +1,49 @@
import React from 'react'
-import {CompletarCadastroButton} from '../TabPanels/UserPageTabs/PanelSolicitarContaProfessor.js'
+import { CompletarCadastroButton } from '../TabPanels/UserPageTabs/PanelSolicitarContaProfessor.js'
import FormInput from "../FormInput.js"
+import styled from 'styled-components'
-export default function Error (props) {
+export default function Error(props) {
return (
- <div style={{overflow:"hidden", display:"inline-block"}}>
- <h2 style={{fontSize:"32px", fontWeight:"200", marginBottom:"20px"}}>Ops! Não encontramos essa conta</h2>
- <p>{props.value}</p>
- <p>Verifique se o e-mail foi digitado corretamente ou se você utilizou algum outro e-mail.</p>
+ <StyledDiv contrast={props.contrast}>
+ <h2 className="title">Ops! Não encontramos essa conta</h2>
+ <p className="paragraph">{props.value}</p>
+ <p className="paragraph">Verifique se o e-mail foi digitado corretamente ou se você utilizou algum outro e-mail.</p>
<form onSubmit={(e) => props.onSubmit(e)}>
<FormInput
+ contrast={props.contrast}
inputType={"text"}
name={"email"}
value={props.value}
placeholder={"E-mail"}
handleChange={e => props.handleChange(e)}
required={true}
- error = {props.error}
+ error={props.error}
/>
- <div style={{display:"flex", justifyContent:"center"}}>
- <CompletarCadastroButton type="submit" >BUSCAR</CompletarCadastroButton>
+ <div style={{ display: "flex", justifyContent: "center" }}>
+ <CompletarCadastroButton contrast={props.contrast} type="submit" >BUSCAR</CompletarCadastroButton>
</div>
</form>
- </div>
+ </StyledDiv>
)
}
+
+
+const StyledDiv = styled.div`
+ overflow: hidden;
+ display: inline-block;
+ font-size: 14px;
+ text-align: start;
+
+ .paragraph{
+ color: ${props => props.contrast === "" ? "" : "white"};
+ }
+
+ .title{
+ color: ${props => props.contrast === "" ? "" : "white"};
+ font-size: 32px;
+ font-weight: 200;
+ margin-bottom: 20px;
+ line-height : 30px;
+ }
+`
diff --git a/src/Components/PasswordRecoveryComponents/Success.js b/src/Components/PasswordRecoveryComponents/Success.js
index 34feb617ef2094f169acb826e40ea73cd16d4e8a..1f4790bd45136dfee6aae87c7f0a84c5695ba686 100644
--- a/src/Components/PasswordRecoveryComponents/Success.js
+++ b/src/Components/PasswordRecoveryComponents/Success.js
@@ -1,12 +1,41 @@
import React from 'react'
+import styled from 'styled-components'
-export default function Default (props) {
+export default function Default(props) {
return (
- <div style={{overflow:"hidden", display:"inline-block", fontSize:"14px", textAlign:"start"}}>
- <h2 style={{fontSize:"32px", fontWeight:"200", marginBottom:"20px"}}>Feito! Confira seu e-mail</h2>
- <p> Enviamos um link para <span style={{color:"#00bcd4"}}>{String(props.email)}</span> que permite alterar sua senha. </p>
- <p style={{marginBottom:"30px"}}> Caso não chegue em sua caixa de entrada, dê uma olhada em outras pastas, como lixo eletrônico ou spam. </p>
- <p> Não é o seu e-mail? <span style={{color:"#00bcd4", cursor:"pointer"}} onClick={() => {props.changeSwitch('default')}}> Tente Novamente.</span></p>
- </div>
+ <StyledDiv contrast={props.contrast}>
+ <h2 className="title">Feito! Confira seu e-mail</h2>
+ <p className="paragraph"> Enviamos um link para <span className="email">{String(props.email)}</span> que permite alterar sua senha. </p>
+ <p className="paragraph" style={{ marginBottom: "30px" }}> Caso não chegue em sua caixa de entrada, dê uma olhada em outras pastas, como lixo eletrônico ou spam. </p>
+ <p className="paragraph"> Não é o seu e-mail? <span className="link" onClick={() => { props.changeSwitch('default') }}> Tente Novamente.</span></p>
+ </StyledDiv>
)
}
+
+const StyledDiv = styled.div`
+ overflow: hidden;
+ display: inline-block;
+ font-size: 14px;
+ text-align: start;
+
+ .paragraph{
+ color: ${props => props.contrast === "" ? "" : "white"};
+ }
+
+ .title{
+ color: ${props => props.contrast === "" ? "" : "white"};
+ font-size: 32px;
+ font-weight: 200;
+ margin-bottom: 20px;
+ }
+
+ .email{
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ }
+
+ .link{
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ text-decoration: ${ props => props.contrast === "" ? "none" : "underline"};
+ cursor: pointer;
+ }
+`
diff --git a/src/Components/TabPanels/StyledComponents.js b/src/Components/TabPanels/StyledComponents.js
index e4eb39e0a46c34c075d70441f0f2ebfdf0462cbd..1ac86f9d3c002508daad5ae9f9b152bffc996cd3 100644
--- a/src/Components/TabPanels/StyledComponents.js
+++ b/src/Components/TabPanels/StyledComponents.js
@@ -280,7 +280,7 @@ export const NavBarContentContainer = styled(Container)`
`
export const BackgroundDiv = styled.div`
- color : #666;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
font-family : 'Roboto', sans serif;
font-size : 14px;
padding-bottom : 50px;
diff --git a/src/Components/TabPanels/UserPageTabs/PanelEditarPerfil.js b/src/Components/TabPanels/UserPageTabs/PanelEditarPerfil.js
index f65e6417a460b08bf87221fb28aa8cec321a2c97..aa7ee16049c14310e70f1ab83b69f8b12f4860bf 100644
--- a/src/Components/TabPanels/UserPageTabs/PanelEditarPerfil.js
+++ b/src/Components/TabPanels/UserPageTabs/PanelEditarPerfil.js
@@ -127,10 +127,10 @@ export default function TabPanelEditarPerfil(props) {
id={state.currentUser.id}
/>
<div className="card-config">
- <h1 style={{ fontWeight: "300" }}>Editar Perfil </h1>
+ <h1 className="title">Editar Perfil </h1>
<div className='content-div'>
<div style={{ padding: "0", display: "flex", flexDirection: "column" }}>
- <HeaderContainer>
+ <HeaderContainer contrast={state.contrast}>
<div style={{ position: "relative", height: "100%" }}>
<img src={state.currentUser.cover ? `${apiDomain}` + state.currentUser.cover : null} alt={state.currentUser.cover ? "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)} />
@@ -156,6 +156,7 @@ export default function TabPanelEditarPerfil(props) {
<div style={{ display: "flex", flexDirection: "row", justifyContent: "center" }}>
<form onSubmit={e => handleSubmit(e)}>
<FormInput
+ contrast={state.contrast}
inputType={"text"}
name={"Nome Completo"}
value={formNome.value}
@@ -165,6 +166,7 @@ export default function TabPanelEditarPerfil(props) {
error={formNome.key}
/>
<FormInput
+ contrast={state.contrast}
inputType={"text"}
name={"Sobre Mim"}
value={formAboutMe.value}
@@ -180,8 +182,8 @@ export default function TabPanelEditarPerfil(props) {
</form>
</div>
<ButtonsDiv>
- <Link to="perfil" ><ButtonCancelar ><span>CANCELAR</span></ButtonCancelar></Link>
- <ButtonConfirmar onClick={e => handleSubmit(e)}><span>SALVAR ALTERAÇÕES</span></ButtonConfirmar>
+ <Link to="perfil" ><ButtonCancelar contrast={state.contrast} >CANCELAR</ButtonCancelar></Link>
+ <ButtonConfirmar contrast={state.contrast} onClick={e => handleSubmit(e)}>SALVAR ALTERAÇÕES</ButtonConfirmar>
</ButtonsDiv>
</div>
</div >
@@ -191,7 +193,7 @@ export default function TabPanelEditarPerfil(props) {
}
const ButtonConfirmar = styled(Button)`
- background-color : #00bcd4 !important;
+ background-color: ${props => props.contrast === "" ? "#00bcd4 !important" : "black !important"};
color : #fff !important;
font-family : 'Roboto',sans-serif !important;
font-size : 14px !important;
@@ -207,7 +209,7 @@ const ButtonConfirmar = styled(Button)`
font-style : inherit !important;
font-variant : inherit !important;
font-family : inherit !important;
- text-decoration : none !important;
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline !important"};
overflow : hidden !important;
display : inline-block !important;
position : relative !important;
@@ -220,7 +222,11 @@ const ButtonConfirmar = styled(Button)`
text-align : center !important;
border-radius : 3px !important;
box-sizing : border-box !important;
- border : 0 !important;
+ color: ${props => props.contrast === "" ? "white !important" : "yellow !important"};
+ border: ${props => props.contrast === "" ? "0 !important" : "1px solid white !important"};
+ :hover{
+ background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
+ }
`
export const ButtonCancelar = styled(Button)`
@@ -236,7 +242,7 @@ export const ButtonCancelar = styled(Button)`
font-style : inherit !important;
font-variant : inherit !important;
font-family : inherit !important;
- text-decoration : none !important;
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline !important"};
overflow : hidden !important;
display : inline-block !important;
position : relative !important;
@@ -250,11 +256,12 @@ export const ButtonCancelar = styled(Button)`
border-radius : 3px !important;
box-sizing : border-box !important;
user-select : none !important;
- border : 0 !important;
+ color: ${props => props.contrast === "" ? "black !important" : "yellow !important"};
+ border: ${props => props.contrast === "" ? "0 !important" : "1px solid white !important"};
padding : 0 6px !important;
margin : 6px 8px !important;
:hover{
- background-color : #f1f1f1 !important;
+ background-color: ${props => props.contrast === "" ? "#f1f1f1 !important" : "rgba(255,255,0,0.24) !important"};
}
`
@@ -262,6 +269,7 @@ export const ButtonCancelar = styled(Button)`
const ButtonsDiv = styled.div`
text-align : right;
margin-top : 80px;
+ text-decoration: underline;
`
const ChangeAvatarDiv = styled.div`
@@ -311,7 +319,8 @@ const ProfileAvatarDiv = styled.div`
`
const HeaderContainer = styled.div`
- background-color : #afeeee;
+ background: ${props => props.contrast === "" ? "#afeeee" : "black"};
+ border: ${props => props.contrast === "" ? "1px solid #afeeee" : "1px solid white"};
position : relative;
height : 150px;
border-radius : 8px;
diff --git a/src/Components/TabPanels/UserPageTabs/PanelGerenciarConta.js b/src/Components/TabPanels/UserPageTabs/PanelGerenciarConta.js
index 29edb847bc0aed30c5bef936117d0f95370d5958..e365a0b86a7805b8102e0981f45c350bce1ee444 100644
--- a/src/Components/TabPanels/UserPageTabs/PanelGerenciarConta.js
+++ b/src/Components/TabPanels/UserPageTabs/PanelGerenciarConta.js
@@ -16,59 +16,64 @@ 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, {useState} from 'react'
+import React, { useState, useContext } from 'react'
import Paper from '@material-ui/core/Paper';
import FormInput from "../../FormInput.js"
-import {CompletarCadastroButton} from './PanelSolicitarContaProfessor.js'
-import {ButtonCancelar} from './PanelEditarPerfil.js'
+import { CompletarCadastroButton } from './PanelSolicitarContaProfessor.js'
+import { ButtonCancelar } from './PanelEditarPerfil.js'
import ValidateUserInput from '../../HelperFunctions/FormValidationFunction.js'
import ModalExcluirConta from './ModalExcluirConta.js'
+import { Store } from '../../../Store'
-export default function TabPanelGerenciarConta (props) {
+export default function TabPanelGerenciarConta(props) {
+ const { state } = useContext(Store)
const [senhaAtual, setSenhaAtual] = useState(
{
- key : false,
- value : localStorage.getItem("@portalmec/senha") || ""
- })
+ key: false,
+ value: localStorage.getItem("@portalmec/senha") || ""
+ })
const [novaSenha, setNovaSenha] = useState(
{
- key : false,
- value : ""
- })
+ key: false,
+ value: ""
+ })
const [novaSenhaConfirmacao, setNovaSenhaConfirmacao] = useState(
{
- key : false,
- value : ""
- })
+ key: false,
+ value: ""
+ })
const [novoEmail, setNovoEmail] = useState(
{
- key : false,
- value : ""
- })
+ key: false,
+ value: ""
+ })
const handleChangeSenha = (e, type) => {
const userInput = e.target.value
const flag = (type === 'confirmacao' ? ValidateUserInput('confirmation', userInput, novaSenha.value) : ValidateUserInput('password', userInput))
- if(type === 'senhaAtual') {
- setSenhaAtual({...senhaAtual,
- key : flag,
- value : userInput
+ if (type === 'senhaAtual') {
+ setSenhaAtual({
+ ...senhaAtual,
+ key: flag,
+ value: userInput
})
}
- else if(type === 'novaSenha') {
- setNovaSenha({...novaSenha,
- key : flag,
- value : userInput
+ else if (type === 'novaSenha') {
+ setNovaSenha({
+ ...novaSenha,
+ key: flag,
+ value: userInput
})
}
- else if (type === 'confirmacao'){
- setNovaSenhaConfirmacao({...novaSenhaConfirmacao,
- key : flag,
- value : userInput
+ else if (type === 'confirmacao') {
+ setNovaSenhaConfirmacao({
+ ...novaSenhaConfirmacao,
+ key: flag,
+ value: userInput
})
}
}
@@ -77,43 +82,47 @@ export default function TabPanelGerenciarConta (props) {
const userInput = e.target.value
const flag = ValidateUserInput('email', userInput)
- setNovoEmail({...novoEmail,
- key : flag,
- value : userInput
+ setNovoEmail({
+ ...novoEmail,
+ key: flag,
+ value: userInput
})
}
const limpaCamposForm = () => {
- setSenhaAtual({...senhaAtual,
- key : false,
- value : ''
+ setSenhaAtual({
+ ...senhaAtual,
+ key: false,
+ value: ''
})
- setNovaSenha({...novaSenha,
- key : false,
- value : ''
+ setNovaSenha({
+ ...novaSenha,
+ key: false,
+ value: ''
})
- setNovaSenhaConfirmacao({...novaSenhaConfirmacao,
- key : false,
- value : ''
+ setNovaSenhaConfirmacao({
+ ...novaSenhaConfirmacao,
+ key: false,
+ value: ''
})
}
const onSubmit = (e, type) => {
e.preventDefault()
- if (type === 'senha'){
+ if (type === 'senha') {
if (!(senhaAtual.key || novaSenha.key || novaSenhaConfirmacao.key)) {
- const info = {user : {password : novaSenha.value}}
+ const info = { user: { password: novaSenha.value } }
props.updateUserPassword(info)
limpaCamposForm()
}
}
else {
- const info = {user : {email : novoEmail.value}}
+ const info = { user: { email: novoEmail.value } }
props.updateUserEmail(info)
@@ -125,92 +134,96 @@ export default function TabPanelGerenciarConta (props) {
return (
<>
- <Paper elevation={3} style= {{width:"100%"}}>
- <div className='card-config'>
- <div className='content-div'>
- <h1>Gerenciar Conta</h1>
- <div style={{display : "flex", flexDirection : "column"}}>
- <form style={{margin : "0 0 20px 0"}} onSubmit={e => onSubmit(e, 'senha')}>
- <h4 style={{display:"flex", justifyContent:"flex-start", fontSize:"18px"}}>Alterar Senha</h4>
- <FormInput
- inputType={"password"}
- name={"Senha Atual"}
- value={senhaAtual.value}
- placeholder={"Senha atual"}
- handleChange={e => handleChangeSenha(e, 'senhaAtual')}
- required={true}
- error={senhaAtual.key}
- help={ senhaAtual.key ? "Faltou inserir sua senha atual" : ""}
- />
- <FormInput
- inputType={"password"}
- name={"Nova senha"}
- value={novaSenha.value}
- placeholder={"Nova senha"}
- handleChange={e => handleChangeSenha(e, 'novaSenha')}
- required={true}
- error={novaSenha.key}
- help={ novaSenha.key ? (novaSenha.value.length === 0 ? "Faltou definir uma nova senha" : "A senha precisa ter no mínimo 8 caracteres.") : ""}
- />
- <FormInput
- inputType={"password"}
- name={"Digite novamente a nova senha"}
- value={novaSenhaConfirmacao.value}
- placeholder={"Digite novamente a nova senha"}
- handleChange={e => handleChangeSenha(e, 'confirmacao')}
- required={true}
- error={novaSenhaConfirmacao.key}
- help={ novaSenhaConfirmacao.key ? "As senhas devem ser iguais" : ""}
- />
- <div style={{display:"flex", flexDirection:"row", justifyContent:"space-evenly"}}>
- <span style={{paddingTop:"0.7em"}}><a href="recuperar-senha" style={{textAlign: "flex-start", color:"#00bcd4"}}>Esqueceu a senha?</a></span>
- <div style={{margin:"0"}}>
- <ButtonCancelar onClick={limpaCamposForm}>Limpar Campos</ButtonCancelar>
- <CompletarCadastroButton type="submit">Alterar Senha</CompletarCadastroButton>
- </div>
+ <Paper elevation={3} style={{ width: "100%" }}>
+ <div className='card-config'>
+ <div className='content-div'>
+ <h1 className="title">Gerenciar Conta</h1>
+ <div style={{ display: "flex", flexDirection: "column" }}>
+ <form style={{ margin: "0 0 20px 0" }} onSubmit={e => onSubmit(e, 'senha')}>
+ <h4 className="subtitle">Alterar Senha</h4>
+ <FormInput
+ contrast={state.contrast}
+ inputType={"password"}
+ name={"Senha Atual"}
+ value={senhaAtual.value}
+ placeholder={"Senha atual"}
+ handleChange={e => handleChangeSenha(e, 'senhaAtual')}
+ required={true}
+ error={senhaAtual.key}
+ help={senhaAtual.key ? "Faltou inserir sua senha atual" : ""}
+ />
+ <FormInput
+ contrast={state.contrast}
+ inputType={"password"}
+ name={"Nova senha"}
+ value={novaSenha.value}
+ placeholder={"Nova senha"}
+ handleChange={e => handleChangeSenha(e, 'novaSenha')}
+ required={true}
+ error={novaSenha.key}
+ help={novaSenha.key ? (novaSenha.value.length === 0 ? "Faltou definir uma nova senha" : "A senha precisa ter no mínimo 8 caracteres.") : ""}
+ />
+ <FormInput
+ contrast={state.contrast}
+ inputType={"password"}
+ name={"Digite novamente a nova senha"}
+ value={novaSenhaConfirmacao.value}
+ placeholder={"Digite novamente a nova senha"}
+ handleChange={e => handleChangeSenha(e, 'confirmacao')}
+ required={true}
+ error={novaSenhaConfirmacao.key}
+ help={novaSenhaConfirmacao.key ? "As senhas devem ser iguais" : ""}
+ />
+ <div style={{ display: "flex", flexDirection: "row", justifyContent: "space-evenly" }}>
+ <span style={{ paddingTop: "0.7em" }}><a href="recuperar-senha" className="link">Esqueceu a senha?</a></span>
+ <div style={{ margin: "0" }}>
+ <ButtonCancelar contrast={state.contrast} onClick={limpaCamposForm}>Limpar Campos</ButtonCancelar>
+ <CompletarCadastroButton contrast={state.contrast} type="submit">Alterar Senha</CompletarCadastroButton>
+ </div>
+ </div>
+ </form>
</div>
- </form>
+ </div>
</div>
- </div>
- </div>
- </Paper>
- <Paper elevation={3} style= {{width:"100%"}}>
- <div className='card-config'>
- <div className='content-div'>
- <div style={{display : "flex", flexDirection : "column"}}>
- <form onSubmit={(e) => onSubmit(e, 'email')}>
- <h4 style={{display:"flex", justifyContent:"flex-start", fontSize:"18px"}}>Alterar e-mail</h4>
- <FormInput
- inputType={"text"}
- name={"email"}
- value={novoEmail.value}
- placeholder={"E-mail"}
- handleChange={e => handleChangeEmail(e)}
- required={true}
- error = {novoEmail.key}
- />
- <div style={{margin:"0", display:"flex", justifyContent:"flex-start"}}>
- <CompletarCadastroButton type="submit">SALVAR ALTERAÇÕES</CompletarCadastroButton>
+ </Paper>
+ <Paper elevation={3} style={{ width: "100%" }}>
+ <div className='card-config'>
+ <div className='content-div'>
+ <div style={{ display: "flex", flexDirection: "column" }}>
+ <form onSubmit={(e) => onSubmit(e, 'email')}>
+ <h4 className="subtitle">Alterar e-mail</h4>
+ <FormInput
+ contrast={state.contrast}
+ inputType={"text"}
+ name={"email"}
+ value={novoEmail.value}
+ placeholder={"E-mail"}
+ handleChange={e => handleChangeEmail(e)}
+ required={true}
+ error={novoEmail.key}
+ />
+ <div style={{ margin: "0", display: "flex", justifyContent: "flex-start" }}>
+ <CompletarCadastroButton contrast={state.contrast} type="submit">SALVAR ALTERAÇÕES</CompletarCadastroButton>
+ </div>
+ </form>
</div>
- </form>
+ </div>
</div>
- </div>
- </div>
- </Paper>
- <Paper elevation={3} style= {{width:"100%"}}>
- <div className='card-config'>
- <div className='content-div'>
- <div>
- <h4 style={{display:"flex", justifyContent:"flex-start", fontSize:"18px"}}>Conta</h4>
- <span style={{margin:"0", display:"flex", justifyContent:"flex-start"}}>Antes de excluir a sua conta, saiba que ela será removida permanentemente.</span>
- </div>
- <div style={{margin:"0", display:"flex", justifyContent:"flex-start"}}>
- <ModalExcluirConta open={modalExcluir} handleClose={() => {setModalExcluir(false)}}/>
- <ButtonCancelar style={{color:'#eb4034'}} onClick={() => {setModalExcluir(true)}}>EXCLUIR CONTA</ButtonCancelar>
+ </Paper>
+ <Paper elevation={3} style={{ width: "100%" }}>
+ <div className='card-config'>
+ <div className='content-div'>
+ <div>
+ <h4 className="subtitle">Conta</h4>
+ <span style={state.contrast === "" ? { margin: "0", display: "flex", justifyContent: "flex-start" } : { margin: "0", display: "flex", justifyContent: "flex-start", color: "white" }}>Antes de excluir a sua conta, saiba que ela será removida permanentemente.</span>
+ </div>
+ <div style={{ margin: "0", display: "flex", justifyContent: "flex-start" }}>
+ <ModalExcluirConta open={modalExcluir} handleClose={() => { setModalExcluir(false) }} />
+ <ButtonCancelar contrast={state.contrast} onClick={() => { setModalExcluir(true) }}>EXCLUIR CONTA</ButtonCancelar>
+ </div>
+ </div>
</div>
- </div>
- </div>
- </Paper>
+ </Paper>
</>
)
}
diff --git a/src/Components/TabPanels/UserPageTabs/PanelSolicitarContaProfessor.js b/src/Components/TabPanels/UserPageTabs/PanelSolicitarContaProfessor.js
index 6a7aa88863a342036fab9e1474437c857e3e1d37..daef1b4dbe54114aedf0ce9690df937c557c07aa 100644
--- a/src/Components/TabPanels/UserPageTabs/PanelSolicitarContaProfessor.js
+++ b/src/Components/TabPanels/UserPageTabs/PanelSolicitarContaProfessor.js
@@ -16,30 +16,30 @@ 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 styled from 'styled-components'
import Button from '@material-ui/core/Button';
-import {Link} from 'react-router-dom';
+import { Link } from 'react-router-dom';
//3 casos
- //Professor nao cadastrado (nao pediu OU submitter_request = rejected)
- //Professor em análise (submitter_request = requested)
- //Professor aceito (submitter_request = accepted)
-export default function TabPanelSolicitarContaProfessor (props) {
+//Professor nao cadastrado (nao pediu OU submitter_request = rejected)
+//Professor em análise (submitter_request = requested)
+//Professor aceito (submitter_request = accepted)
+export default function TabPanelSolicitarContaProfessor(props) {
// eslint-disable-next-line
- const {state, dispatch} = useContext(Store)
+ const { state, dispatch } = useContext(Store)
return (
<div className='card-config'>
<div className='content-div'>
{
- !state.currentUser.roles.some(role => role.name === "teacher") && ( state.currentUser.submitter_request === 'default' || state.currentUser.submitter_request === 'rejected' ) ?
- (
+ !state.currentUser.roles.some(role => role.name === "teacher") && (state.currentUser.submitter_request === 'default' || state.currentUser.submitter_request === 'rejected') ?
+ (
<div>
- <ImageDiv/>
- <StyledH2>Você é professor(a) da educação básica e gostaria de colaborar com a Plataforma?</StyledH2>
- <StyledP>Ao ser identificado como professor(a), você poderá publicar e compartilhar recursos educacionais
+ <ImageDiv />
+ <StyledH2 contrast={state.contrast}>Você é professor(a) da educação básica e gostaria de colaborar com a Plataforma?</StyledH2>
+ <StyledP contrast={state.contrast}>Ao ser identificado como professor(a), você poderá publicar e compartilhar recursos educacionais
digitais na plataforma com toda a comunidade escolar do país.
</StyledP>
<div>
@@ -47,28 +47,28 @@ export default function TabPanelSolicitarContaProfessor (props) {
pathname: '/termos-publicar-recurso',
state: true
}}>
- <CompletarCadastroButton >
+ <CompletarCadastroButton contrast={state.contrast}>
SIM, COMPLETAR CADASTRO
</CompletarCadastroButton>
</Link>
</div>
</div>
- )
- :
- (
+ )
+ :
+ (
<>
- {
- state.currentUser.submitter_request === 'requested' ?
- (
- <h1>A sua conta de Professor foi solicitada</h1>
- )
- :
- (
- <h1>Você já possui uma conta de Professor</h1>
- )
- }
+ {
+ state.currentUser.submitter_request === 'requested' ?
+ (
+ <h1 className="title">A sua conta de Professor foi solicitada</h1>
+ )
+ :
+ (
+ <h1 className="title">Você já possui uma conta de Professor</h1>
+ )
+ }
</>
- )
+ )
}
</div>
</div>
@@ -76,8 +76,8 @@ export default function TabPanelSolicitarContaProfessor (props) {
}
export const CompletarCadastroButton = styled(Button)`
- background-color : #00bcd4 !important;
- color : #fff !important;
+ background-color: ${props => props.contrast === "" ? "#00bcd4 !important" : "black !important"};
+ color: ${props => props.contrast === "" ? "#fff !important" : "yellow !important"};
font-family : 'Roboto',sans-serif !important;
font-size : 14px !important;
font-weight : bold !important;
@@ -94,7 +94,7 @@ export const CompletarCadastroButton = styled(Button)`
font-style : inherit !important;
font-variant : inherit !important;
font-family : inherit !important;
- text-decoration : none !important;
+ text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"};
overflow : hidden !important;
display : inline-block !important;
position : relative !important;
@@ -105,7 +105,10 @@ export const CompletarCadastroButton = styled(Button)`
align-items : center !important;
text-align : center !important;
box-sizing : border-box !important;
- border : 0 !important;
+ border: ${props => props.contrast === "" ? "0 !important" : "1px solid white !important"};
+ :hover{
+ background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
+ }
`
const StyledP = styled.p`
@@ -113,9 +116,11 @@ const StyledP = styled.p`
line-height : 22px;
text-align : left;
padding-bottom : 20px;
+ color: ${props => props.contrast === "" ? "" : "white"};
`
const StyledH2 = styled.h2`
+ color: ${props => props.contrast === "" ? "" : "white"};
font-weight : 200;
font-size : 26px;
line-height : 36px;
diff --git a/src/Pages/EditProfilePage.js b/src/Pages/EditProfilePage.js
index b0ac8ad04797bbfbc8e3d7b9a453efe8df5a8c60..6ed58aec32a714348acef51edd0b8b49000743c8 100644
--- a/src/Pages/EditProfilePage.js
+++ b/src/Pages/EditProfilePage.js
@@ -154,7 +154,7 @@ export default function EditProfilePage(props) {
</ConfiguracoesMenu>
</Paper>
</Grid>
- <TabContentDiv item xs={12} md={9}>
+ <TabContentDiv contrast={state.contrast} item xs={12} md={9}>
<Paper elevation={3} style={{ width: "100%" }}>
{tabValue === 0 && <TabPanelEditarPerfil updateUserInfo={updateUserInfo} />}
{tabValue === 1 && <TabPanelSolicitarContaProfessor />}
@@ -174,13 +174,26 @@ const Main = styled.div`
`
const TabContentDiv = styled(Grid)`
+
+ .subtitle{
+ display: flex;
+ justify-content: flex-start;
+ font-size: 18px;
+ color: ${props => props.contrast === "" ? "" : "white"};
+ }
+
+ .title{
+ font-weight: 300;
+ color: ${props => props.contrast === "" ? "" : "white"};
+ }
.card-config {
padding : 40px;
margin : 20px 0 20px 10px;
border-radius : 3px;
box-shadow : 0 0 5px 0rgba(0,0,0,.25);
- background-color : #fff;
+ background-color: ${props => props.contrast === "" ? "#fff" : "black"};
+ border: ${props => props.contrast === "" ? 0 : "1px solid white"};
text-align : start;
margin-left : auto;
margin-right : auto;
@@ -224,6 +237,12 @@ const TabContentDiv = styled(Grid)`
font-weight : 500;
line-height : 1.1;
}
+
+ .link {
+ text-align: flex-start;
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ }
`
const StyledTabs = styled(Tabs)`
diff --git a/src/Pages/PasswordRecoveryPage.js b/src/Pages/PasswordRecoveryPage.js
index 4a6b25728b3353b725ab5ad31287d67b3baf7abc..7427037b62893b728b2558c016d8d142fc263255 100644
--- a/src/Pages/PasswordRecoveryPage.js
+++ b/src/Pages/PasswordRecoveryPage.js
@@ -1,5 +1,5 @@
-import React, {useState} from 'react'
-import {BackgroundDiv} from '../Components/TabPanels/StyledComponents.js'
+import React, { useState, useContext } from 'react'
+import { BackgroundDiv } from '../Components/TabPanels/StyledComponents.js'
import Paper from '@material-ui/core/Paper';
import styled from 'styled-components'
import ValidateUserInput from '../Components/HelperFunctions/FormValidationFunction.js'
@@ -7,14 +7,15 @@ import Default from '../Components/PasswordRecoveryComponents/Default.js'
import Success from '../Components/PasswordRecoveryComponents/Success.js'
import CaseError from '../Components/PasswordRecoveryComponents/Error.js'
import CustomizedBreadcrumbs from '../Components/TabPanels/Breadcrumbs.js'
-import {postRequest} from '../Components/HelperFunctions/getAxiosConfig'
-
-export default function PasswordRecoveryPage (props) {
+import { postRequest } from '../Components/HelperFunctions/getAxiosConfig'
+import { Store } from '../Store'
+export default function PasswordRecoveryPage(props) {
+ const { state } = useContext(Store)
const [formEmail, setEmail] = useState(
{
- key : false,
- value : ""
+ key: false,
+ value: ""
}
)
@@ -23,9 +24,10 @@ export default function PasswordRecoveryPage (props) {
const userInput = e.target.value
const flag = ValidateUserInput('email', userInput)
- setEmail({...formEmail,
- key : flag,
- value : userInput
+ setEmail({
+ ...formEmail,
+ key: flag,
+ value: userInput
})
}
@@ -33,12 +35,12 @@ export default function PasswordRecoveryPage (props) {
const handleChangeSwitch = (value) => {
console.log(value)
if (value !== "success") {
- setEmail({key : false, value : ""})
+ setEmail({ key: false, value: "" })
}
setCase(value)
};
- function handleSuccessfulSubmit (data) {
+ function handleSuccessfulSubmit(data) {
handleChangeSwitch((data.success ? "success" : "error"))
}
const onSubmit = (e) => {
@@ -47,23 +49,23 @@ export default function PasswordRecoveryPage (props) {
const url = `/auth/password`
const payload = {
- "email" : formEmail.value,
- "redirect_url" : "http://localhost:4000/recuperar-senha/alterar-senha" // ### arrumar "https://plataformaintegrada.mec.gov.br/recuperar-senha/alterar-senha"
+ "email": formEmail.value,
+ "redirect_url": "http://localhost:4000/recuperar-senha/alterar-senha" // ### arrumar "https://plataformaintegrada.mec.gov.br/recuperar-senha/alterar-senha"
}
- postRequest(url, payload, handleSuccessfulSubmit, (error) => {console.log(error)})
+ postRequest(url, payload, handleSuccessfulSubmit, (error) => { console.log(error) })
}
const components = {
- default : <Default handleChange={handleChange} onSubmit={onSubmit} value={formEmail.value} error={formEmail.key}/>,
- success : <Success email={formEmail.value} changeSwitch={handleChangeSwitch}/>,
- error : <CaseError handleChange={handleChange} onSubmit={onSubmit} value={formEmail.value} error={formEmail.key}/>
+ default: <Default contrast={state.contrast} handleChange={handleChange} onSubmit={onSubmit} value={formEmail.value} error={formEmail.key} />,
+ success: <Success contrast={state.contrast} email={formEmail.value} changeSwitch={handleChangeSwitch} />,
+ error: <CaseError contrast={state.contrast} handleChange={handleChange} onSubmit={onSubmit} value={formEmail.value} error={formEmail.key} />
}
const switchFunction = (value) => {
- switch(value) {
+ switch (value) {
case 'success':
return components.success;
case 'error':
@@ -71,24 +73,25 @@ export default function PasswordRecoveryPage (props) {
default:
return components.default
- }
+ }
}
return (
<>
- <BackgroundDiv>
+ <BackgroundDiv contrast={state.contrast}>
<div>
<CustomizedBreadcrumbs
+ contrast={state.contrast}
values={["Recuperar senha"]}
/>
</div>
- <div style={{justifyContent:"center", textAlign:"center", maxWidth:"600px", margin:"auto"}}>
- <Paper elevation={3}>
- <CardDiv>
+ <div style={{ justifyContent: "center", textAlign: "center", maxWidth: "600px", margin: "auto" }}>
+ <Paper elevation={3}>
+ <CardDiv contrast={state.contrast}>
{switchFunction(aux)}
- </CardDiv>
- </Paper>
+ </CardDiv>
+ </Paper>
</div>
</BackgroundDiv>
</>
@@ -96,7 +99,8 @@ export default function PasswordRecoveryPage (props) {
}
const CardDiv = styled.div`
- 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);
padding : 30px 60px;
margin : 50px 0;