diff --git a/src/Components/AreasSubPagesFunction.js b/src/Components/AreasSubPagesFunction.js
index 2572241b668168cdeb25439571bb177e960b3df3..85ae6badd9696afadd23fc8567e9eabac36a2347 100644
--- a/src/Components/AreasSubPagesFunction.js
+++ b/src/Components/AreasSubPagesFunction.js
@@ -97,28 +97,28 @@ function ReqResources(props) {
{
rows.length >= 1 ?
rows.map((row, index) => (
- <Row style={{ paddingBottom: "5px", margin: '0 auto', width: "80%", justifyContent: "center", minHeight: "50px" }} key={(index + 1)}>
- {row.map((card) => (
- <div style={{ marginLeft: 10, display: 'flex' }} key={card.id * (index + 1)}>
- <ResourceCardFunction
- contrast={props.contrast}
- avatar={card.publisher.avatar}
- id={card.id}
- thumbnail={card.thumbnail}
- type={card.object_type ? card.object_type : "Outros"}
- title={card.name}
- published={card.state === "published" ? true : false}
- likeCount={card.likes_count}
- liked={card.liked}
- rating={card.review_average}
- author={card.publisher.name}
- tags={card.tags}
- href={"/recurso/" + card.id}
- downloadableLink={card.default_attachment_location}
- />
- </div>
- ))}
- </Row>
+ <Row style={{ paddingBottom: "5px", margin: '0 auto', width: "80%", justifyContent: "center", minHeight: "50px" }} key={(index + 1)}>
+ {row.map((card) => (
+ <div style={{ marginLeft: 10, display: 'flex' }} key={card.id * (index + 1)}>
+ <ResourceCardFunction
+ contrast={props.contrast}
+ avatar={card.publisher.avatar}
+ id={card.id}
+ thumbnail={card.thumbnail}
+ type={card.object_type ? card.object_type : "Outros"}
+ title={card.name}
+ published={card.state === "published" ? true : false}
+ likeCount={card.likes_count}
+ liked={card.liked}
+ rating={card.review_average}
+ author={card.publisher.name}
+ tags={card.tags}
+ href={"/recurso/" + card.id}
+ downloadableLink={card.default_attachment_location}
+ />
+ </div>
+ ))}
+ </Row>
))
:
<Grid container justify="center" alignItems="center">
diff --git a/src/Components/ColCardOwnerOptions.js b/src/Components/ColCardOwnerOptions.js
index 2c43d64484d75fbfbc27533157a83e9de6103097..bc77db898a30d713de3686a7a33a43affee1588b 100644
--- a/src/Components/ColCardOwnerOptions.js
+++ b/src/Components/ColCardOwnerOptions.js
@@ -31,61 +31,59 @@ import ModalExcluirColecao from './ModalExcluirColecao.js'
import ModalEditarColecao from './ModalEditarColecao.js'
export default function ColCardOwnerOptions (props) {
- const [anchorEl, setAnchorEl] = React.useState(null);
-
- function handleClick(event) {
- setAnchorEl(event.currentTarget);
- }
-
- function handleClose() {
- setAnchorEl(null);
- }
-
- const [modalExcluirOpen, toggleModalExcluir] = useState(false)
-
- const [modalEditarOpen, toggleModalEditar] = useState(false)
-
-
- return (
- <>
- <ModalExcluirColecao id={props.id}
- contrast={props.contrast} open={modalExcluirOpen} handleClose={() => {toggleModalExcluir(false)}} removeColl={props.removeColl}
- />
- <ModalEditarColecao id={props.id}
- contrast={props.contrast} open={modalEditarOpen} handleClose={() => {toggleModalEditar(false)}}
- changeColName={props.changeColName} changeColPrivacy={props.changeColPrivacy}
- />
-
- <div style={{fontSize: "12px"}}>
- <Button className={`${props.contrast}LinkColor`} aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick} style={{color : "#666"}}>
- OPÇÕES <MoreVertIcon className={`${props.contrast}IconColor`}/>
- </Button>
- <Menu
- id="simple-menu"
- anchorEl={anchorEl}
- keepMounted
- open={Boolean(anchorEl)}
- onClose={handleClose}
- >
- <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast}>
- <Link to={"/colecao-do-usuario/" + props.id}>
- <ListItemIcon className={`${props.contrast}IconColor`}><OpenIcon /></ListItemIcon>Abrir
- </Link>
- </StyledMenuItem>
-
- <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={() => {toggleModalEditar(true)}}>
- <ListItemIcon className={`${props.contrast}IconColor`}><CreateIcon /></ListItemIcon>Editar
- </StyledMenuItem>
-
- <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={() => {toggleModalExcluir(true)}} >
- <ListItemIcon className={`${props.contrast}IconColor`}><DeleteForeverIcon /></ListItemIcon>Excluir
- </StyledMenuItem>
-
-
- </Menu>
- </div>
- </>
- )
+ const [anchorEl, setAnchorEl] = React.useState(null);
+
+ function handleClick(event) {
+ setAnchorEl(event.currentTarget);
+ }
+
+ function handleClose() {
+ setAnchorEl(null);
+ }
+
+ const [modalExcluirOpen, toggleModalExcluir] = useState(false)
+
+ const [modalEditarOpen, toggleModalEditar] = useState(false)
+
+
+ return (
+ <>
+ <ModalExcluirColecao id={props.id}
+ contrast={props.contrast} open={modalExcluirOpen} handleClose={() => {toggleModalExcluir(false)}} removeColl={props.removeColl}
+ />
+ <ModalEditarColecao id={props.id}
+ contrast={props.contrast} open={modalEditarOpen} handleClose={() => {toggleModalEditar(false)}}
+ changeColName={props.changeColName} changeColPrivacy={props.changeColPrivacy}
+ />
+
+ <div style={{fontSize: "12px"}}>
+ <Button className={`${props.contrast}LinkColor`} aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick} style={{color : "#666"}}>
+ OPÇÕES <MoreVertIcon className={`${props.contrast}IconColor`}/>
+ </Button>
+ <Menu
+ id="simple-menu"
+ anchorEl={anchorEl}
+ keepMounted
+ open={Boolean(anchorEl)}
+ onClose={handleClose}
+ >
+ <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast}>
+ <Link to={"/colecao-do-usuario/" + props.id}>
+ <ListItemIcon className={`${props.contrast}IconColor`}><OpenIcon /></ListItemIcon>Abrir
+ </Link>
+ </StyledMenuItem>
+
+ <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={() => {toggleModalEditar(true)}}>
+ <ListItemIcon className={`${props.contrast}IconColor`}><CreateIcon /></ListItemIcon>Editar
+ </StyledMenuItem>
+
+ <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={() => {toggleModalExcluir(true)}} >
+ <ListItemIcon className={`${props.contrast}IconColor`}><DeleteForeverIcon /></ListItemIcon>Excluir
+ </StyledMenuItem>
+ </Menu>
+ </div>
+ </>
+ )
}
export const StyledMenuItem = styled(MenuItem)`
diff --git a/src/Components/CollectionCardFunction.js b/src/Components/CollectionCardFunction.js
index 0c409dc824705aa7d90cb1901e81df3e4f459d46..eb5a75eb0d22ab1c68162339db26ad1491a15fc7 100644
--- a/src/Components/CollectionCardFunction.js
+++ b/src/Components/CollectionCardFunction.js
@@ -68,9 +68,9 @@ export default function CollectionCardFunction(props) {
}
const handleLike = () => {
if (state.currentUser.id)
- putRequest(`/collections/${props.id}/like`, {}, handleSuccessLike, (error) => { console.log(error) })
+ putRequest(`/collections/${props.id}/like`, {}, handleSuccessLike, (error) => { console.log(error) })
else
- handleLogin()
+ handleLogin()
}
const [followingHover, handleFollowingHover] = useState(false)
@@ -84,77 +84,77 @@ export default function CollectionCardFunction(props) {
}
const handleFollow = () => {
if (state.currentUser.id)
- putRequest(`/collections/${props.id}/follow`, {}, handleSuccessFollow, (error) => { console.log(error) })
+ putRequest(`/collections/${props.id}/follow`, {}, handleSuccessFollow, (error) => { console.log(error) })
else
- handleLogin()
+ handleLogin()
}
const RenderFollowButton = () => {
return (
- <FollowButton className={`${props.contrast}LinkColor`} style={props.contrast === "" ? {border: "2px solid #503096", borderRadius : "5px", color :"#503096" } : {border: "1px solid white", borderRadius : "5px", color :"#503096"}} onClick={handleFollow}>
- <AddIcon className={`${props.contrast}IconColor`}/><span>SEGUIR</span>
- </FollowButton>
+ <FollowButton className={`${props.contrast}LinkColor`} style={props.contrast === "" ? {border: "2px solid #503096", borderRadius : "5px", color :"#503096" } : {border: "1px solid white", borderRadius : "5px", color :"#503096"}} onClick={handleFollow}>
+ <AddIcon className={`${props.contrast}IconColor`}/><span>SEGUIR</span>
+ </FollowButton>
)
}
useEffect(() => {
if (!state.currentUser.id) {
- toggleLiked(false);
- toggleUserFollowingCol(false);
+ toggleLiked(false);
+ toggleUserFollowingCol(false);
}
}, [state.currentUser.id])
const RenderFollowingButton = () => {
return (
- <FollowingButton className={`${props.contrast}LinkColor`} style={props.contrast === "" ? {border: "2px solid #503096", borderRadius : "5px", color :"#fff", backgroundColor : "#503096" } : {border: "1px solid white", borderRadius : "5px", color :"#503096"}}onMouseOver={() => toggleFollowingHover(true)}
- onMouseLeave={() => toggleFollowingHover(false)} onClick={handleFollow}>
- {
- followingHover ?
- (
- [
- <span>DEIXAR DE SEGUIR</span>
- ]
- )
- :
- (
- [
- <React.Fragment>
- <CheckIcon className={`${props.contrast}IconColor`}/><span>SEGUINDO</span>
- </React.Fragment>
- ]
- )
- }
- </FollowingButton>
+ <FollowingButton className={`${props.contrast}LinkColor`} style={props.contrast === "" ? {border: "2px solid #503096", borderRadius : "5px", color :"#fff", backgroundColor : "#503096" } : {border: "1px solid white", borderRadius : "5px", color :"#503096"}}onMouseOver={() => toggleFollowingHover(true)}
+ onMouseLeave={() => toggleFollowingHover(false)} onClick={handleFollow}>
+ {
+ followingHover ?
+ (
+ [
+ <span>DEIXAR DE SEGUIR</span>
+ ]
+ )
+ :
+ (
+ [
+ <React.Fragment>
+ <CheckIcon className={`${props.contrast}IconColor`}/><span>SEGUINDO</span>
+ </React.Fragment>
+ ]
+ )
+ }
+ </FollowingButton>
)
}
const SlideAnimationContent = (contrast) => {
return (
- <SlideContentDiv style={contrast === '' ? {backgroundColor: "#7e57c2"} : {backgroundColor: "inherit"}}>
- <HeaderContainer container="row" justify="flex-start" alignItems="center">
- <AvatarDiv item xs={2}>
- <img className="img" src={userAvatar} alt="user avatar" />
- </AvatarDiv>
- <EnviadoPor item xs={10}>
- Enviado por:
- <br />
- <p>{props.author}</p>
- </EnviadoPor>
- </HeaderContainer>
- {
- props.tags ?
- <TagContainer container direction="row">
+ <SlideContentDiv style={contrast === '' ? {backgroundColor: "#7e57c2"} : {backgroundColor: "inherit"}}>
+ <HeaderContainer container="row" justify="flex-start" alignItems="center">
+ <AvatarDiv item xs={2}>
+ <img className="img" src={userAvatar} alt="user avatar" />
+ </AvatarDiv>
+ <EnviadoPor item xs={10}>
+ Enviado por:
+ <br />
+ <p>{props.author}</p>
+ </EnviadoPor>
+ </HeaderContainer>
{
- props.tags.map((tag) =>
- <Grid item key={tag.id}>
- <span className={`${props.contrast}BackColor ${props.contrast}Text`}>{tag.name}</span>
- </Grid>
- )
+ props.tags ?
+ <TagContainer container direction="row">
+ {
+ props.tags.map((tag) =>
+ <Grid item key={tag.id}>
+ <span className={`${props.contrast}BackColor ${props.contrast}Text`}>{tag.name}</span>
+ </Grid>
+ )
+ }
+ </TagContainer> :
+ null
}
- </TagContainer> :
- null
- }
- </SlideContentDiv>
+ </SlideContentDiv>
)
}
@@ -190,7 +190,7 @@ export default function CollectionCardFunction(props) {
<Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
</Snackbar>
<StyledCard>
- <CardDiv className={`${props.contrast}Border`}>
+ <CardDiv className={`${props.contrast}Border`}>
<CardReaDiv className={`${props.contrast}BackColor`}>
<Link to={"/colecao-do-usuario/" + props.id}>
<Header onMouseEnter={controlSlide} onMouseLeave={controlSlide}>
@@ -198,13 +198,13 @@ export default function CollectionCardFunction(props) {
<UserInfo style={{ width: '272.5px'}}>
{/* I(Luis) dont know why, but if i use styled components, sometimes the avatar will be deconfigured */}
<img src={userAvatar} alt="user avatar" style={{
- height: "70px", width: "70px", borderRadius: "50%",
- zIndex: 1, border: "2px solid white",
- boxShadow: "0 1px 3px rgba(0,0,0,.45)"
- }} />
+ height: "70px", width: "70px", borderRadius: "50%",
+ zIndex: 1, border: "2px solid white",
+ boxShadow: "0 1px 3px rgba(0,0,0,.45)"
+ }} />
<UserAndTitle>
- <span>{props.author}</span>
- <span className={"col-name"}>{name}</span>
+ <span>{props.author}</span>
+ <span className={"col-name"}>{name}</span>
</UserAndTitle>
</UserInfo>
<StyledGrid container direction="row" style={{ width: '272.5px' }}>
@@ -268,13 +268,13 @@ export default function CollectionCardFunction(props) {
}
</Grid>
<Grid item xs={6} style={{ display: "flex", justifyContent: "flex-end" }}>
- <ColCardOwnerOptions
- contrast={props.contrast}
- id={props.id}
- changeColName={changeColName}
- changeColPrivacy={changeColPrivacy}
- removeColl={props.removeColl}
- />
+ <ColCardOwnerOptions
+ contrast={props.contrast}
+ id={props.id}
+ changeColName={changeColName}
+ changeColPrivacy={changeColPrivacy}
+ removeColl={props.removeColl}
+ />
</Grid>
</Grid>
</CardReaFooter>
diff --git a/src/Components/ContactForm.js b/src/Components/ContactForm.js
index 9c2d8e3f4914d837974baf18f709b84f89004f9f..9683375f23279ccf6df7cd0d2208534e47ae9215 100644
--- a/src/Components/ContactForm.js
+++ b/src/Components/ContactForm.js
@@ -27,283 +27,275 @@ import SignUpModal from './SignUpModal'
import MuiAlert from '@material-ui/lab/Alert';
function Alert(props) {
- return <MuiAlert elevation={6} variant="filled" {...props} />;
+ return <MuiAlert elevation={6} variant="filled" {...props} />;
}
const Button = styled.button`
- background-color: ${props => props.contrast === "" ? "#00acc1" : "black"};
- color: ${props => props.contrast === "" ? "#fff" : "yellow"};
- font-family: Roboto,sans-serif;
- font-size: 14px;
- font-weight: 500;
- height: 36px;
- padding-left: 16px;
- padding-right: 16px;
- box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
- outline: none;
- position: relative;
- cursor: pointer;
- min-height: 36px;
- min-width: 88px;
- line-height: 36px;
- vertical-align: middle;
- align-items: center;
- text-align: center;
- border-radius: 3px;
- box-sizing: border-box;
- user-select: none;
- border: ${props => props.contrast === "" ? 0 : "1px solid white"};
- padding: 0 6px;
- padding-right: 6px;
- padding-left: 6px;
- margin: 6px 8px;
-
- white-space: nowrap;
- text-transform: uppercase;
- font-weight: 500;
- font-size: 14px;
- font-style: inherit;
- font-variant: inherit;
- font-family: inherit;
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
- overflow: hidden;
- transition: box-shadow .4s cubic-bezier(.25,.8,.25,1),background-color .4s cubic-bezier(.25,.8,.25,1);
- :hover{
- background-color: ${props => props.contrast === "" ? "rgba(0, 172, 193, 0.65)" : "rgba(255,255,0,0.24)"};
- }
+ background-color: ${props => props.contrast === "" ? "#00acc1" : "black"};
+ color: ${props => props.contrast === "" ? "#fff" : "yellow"};
+ font-family: Roboto,sans-serif;
+ font-size: 14px;
+ font-weight: 500;
+ height: 36px;
+ padding-left: 16px;
+ padding-right: 16px;
+ box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
+ outline: none;
+ position: relative;
+ cursor: pointer;
+ min-height: 36px;
+ min-width: 88px;
+ line-height: 36px;
+ vertical-align: middle;
+ align-items: center;
+ text-align: center;
+ border-radius: 3px;
+ box-sizing: border-box;
+ user-select: none;
+ border: ${props => props.contrast === "" ? 0 : "1px solid white"};
+ padding: 0 6px;
+ padding-right: 6px;
+ padding-left: 6px;
+ margin: 6px 8px;
+
+ white-space: nowrap;
+ text-transform: uppercase;
+ font-weight: 500;
+ font-size: 14px;
+ font-style: inherit;
+ font-variant: inherit;
+ font-family: inherit;
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ overflow: hidden;
+ transition: box-shadow .4s cubic-bezier(.25,.8,.25,1),background-color .4s cubic-bezier(.25,.8,.25,1);
+ :hover{
+ background-color: ${props => props.contrast === "" ? "rgba(0, 172, 193, 0.65)" : "rgba(255,255,0,0.24)"};
+ }
`
function validateNome(nome) {
- let flag = false
- if (nome.length === 0) {
- flag = true
- }
+ let flag = false
+ if (nome.length === 0) {
+ flag = true
+ }
- return flag
+ return flag
}
function validateMensagem(mensagem) {
- let flag = false
- if (mensagem.length === 0) {
- flag = true
- }
+ let flag = false
+ if (mensagem.length === 0) {
+ flag = true
+ }
- return flag
+ return flag
}
function validateEmail(email) {
- let flag = false
- if (email.split("").filter(x => x === "@").length !== 1 || email.length < 7) {
- flag = true
- }
- return flag
+ let flag = false
+ if (email.split("").filter(x => x === "@").length !== 1 || email.length < 7) {
+ flag = true
+ }
+ return flag
}
function Formulario(props) {
- const { state } = useContext(Store)
- const [loginOpen, setLogin] = useState(false)
- const [successfulLoginOpen, handleSuccessfulLogin] = useState(false)
- const [signUpOpen, setSignUp] = useState(false)
-
- const [nome, handleNome] = useState(
- {
- dict: {
- key: false,
- value: ""
- }
+ const { state } = useContext(Store)
+ const [loginOpen, setLogin] = useState(false)
+ const [successfulLoginOpen, handleSuccessfulLogin] = useState(false)
+ const [signUpOpen, setSignUp] = useState(false)
+
+ const [nome, handleNome] = useState({
+ dict: {
+ key: false,
+ value: ""
+ }
})
- const [email, handleEmail] = useState(
- {
- dict: {
- key: false,
- value: ""
- }
+ const [email, handleEmail] = useState({
+ dict: {
+ key: false,
+ value: ""
+ }
})
- const [mensagem, handleMensagem] = useState(
- {
- dict: {
- key: false,
- value: ""
- }
+ const [mensagem, handleMensagem] = useState({
+ dict: {
+ key: false,
+ value: ""
+ }
})
- const preencheNome = (e) => {
- const aux2 = e.target.value
- const flag = validateNome(aux2)
- handleNome({
- ...nome, dict: {
- key: flag,
- value: e.target.value
- }
- })
- console.log(nome)
- }
-
- const preencheEmail = (e) => {
- const aux = e.target.value
- const flag = validateEmail(aux)
- handleEmail({
- ...email, dict: {
- key: flag,
- value: e.target.value
- }
- })
- console.log(email)
- }
-
- const preencheMensagem = (e) => {
- const msg = e.target.value
- console.log(msg)
- let flag = validateMensagem(msg)
- handleMensagem({
- ...mensagem, dict: {
- key: flag,
- value: msg
- }
- })
- console.log(mensagem)
- }
-
- const limpaTudo = () => {
+ const preencheNome = (e) => {
+ const aux2 = e.target.value
+ const flag = validateNome(aux2)
+ handleNome({
+ ...nome, dict: {
+ key: flag,
+ value: e.target.value
+ }
+ })
+ console.log(nome)
+ }
- handleNome({
- dict: {
- key: false,
- value: ""
- }
+ const preencheEmail = (e) => {
+ const aux = e.target.value
+ const flag = validateEmail(aux)
+ handleEmail({
+ ...email, dict: {
+ key: flag,
+ value: e.target.value
+ }
+ })
+ console.log(email)
}
- );
- handleEmail({
- dict: {
- key: false,
- value: ""
- }
+ const preencheMensagem = (e) => {
+ const msg = e.target.value
+ console.log(msg)
+ let flag = validateMensagem(msg)
+ handleMensagem({
+ ...mensagem, dict: {
+ key: flag,
+ value: msg
+ }
+ })
+ console.log(mensagem)
}
- )
- handleMensagem({
- dict: {
- key: false,
- value: ""
- }
+ const limpaTudo = () => {
+
+ handleNome({
+ dict: {
+ key: false,
+ value: ""
+ }
+ });
+
+ handleEmail({
+ dict: {
+ key: false,
+ value: ""
+ }
+ })
+
+ handleMensagem({
+ dict: {
+ key: false,
+ value: ""
+ }
+ })
+
}
- )
- }
+ const handleSignUp = () => {
+ setSignUp(!signUpOpen)
+ }
- const handleSignUp = () => {
- setSignUp(!signUpOpen)
- }
+ const handleLogin = () => {
+ setLogin(!loginOpen)
+ }
- const handleLogin = () => {
- setLogin(!loginOpen)
- }
+ const toggleSnackbar = (event, reason) => {
+ if (reason === 'clickaway') {
+ return;
+ }
- const toggleSnackbar = (event, reason) => {
- if (reason === 'clickaway') {
- return;
+ handleSuccessfulLogin(false);
}
- handleSuccessfulLogin(false);
- }
-
- const onSubmit = (e) => {
- //on submit we should prevent the page from refreshing
- e.preventDefault(); //though this is arguable
- console.log(!(nome.dict.key && email.dict.key && mensagem.dict.key))
- // Se não houver erro em nunhum dos campos E nenhum dos campos for vazio: a página faz o contato com o backend e os campos ficam em branco no formulário
- if (!(nome.dict.key || email.dict.key || mensagem.dict.key)) {
- let payload = {
- contact: {
- name: nome.dict.value,
- email: email.dict.value,
- message: mensagem.dict.value
+ const onSubmit = (e) => {
+ //on submit we should prevent the page from refreshing
+ e.preventDefault(); //though this is arguable
+ console.log(!(nome.dict.key && email.dict.key && mensagem.dict.key))
+ // Se não houver erro em nunhum dos campos E nenhum dos campos for vazio: a página faz o contato com o backend e os campos ficam em branco no formulário
+ if (!(nome.dict.key || email.dict.key || mensagem.dict.key)) {
+ let payload = {
+ contact: {
+ name: nome.dict.value,
+ email: email.dict.value,
+ message: mensagem.dict.value
+ }
+ }
+ postRequest(`/contacts`, payload, (data) => { limpaTudo() }, (error) => { console.log(error) })
}
- }
- postRequest(`/contacts`, payload, (data) => { limpaTudo() }, (error) => { console.log(error) })
}
- }
-
-
-
-
- return (
- <React.Fragment>
- <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleSnackbar}
- anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
- >
- <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
- </Snackbar>
- {/*-------------------------------MODALS---------------------------------------*/}
- <LoginModal contrast={props.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
- openSnackbar={() => { handleSuccessfulLogin(true) }}
- />
- <SignUpModal contrast={props.contrast} open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} />
- {/*----------------------------------------------------------------------------*/}
-
-
- <form onSubmit={e => onSubmit(e)}>
- <FormInput
- contrast={props.contrast}
-
- inputType={"text"}
- name={"nome"}
- value={nome.dict.value}
- placeholder={"Nome *"}
- error={nome.dict.key}
- help={nome.dict.key ? "insira seu nome para o contato " : ""}
- handleChange={e => preencheNome(e)}
- />
- <br />
- <FormInput
- contrast={props.contrast}
- inputType={"text"}
- name={"email"}
- value={email.dict.value}
- placeholder={"E-mail *"}
- error={email.dict.key}
- help={email.dict.key ? "Formato de e-mail incorreto ou vazio, tente : usuario@provedor.com" : ""}
- handleChange={e => preencheEmail(e)}
- />
- <br />
- <br />
- <FormInput
- contrast={props.contrast}
- inputType={"text"}
- name={"mensagem"}
- value={mensagem.dict.value}
- placeholder={"Mensagem *"}
- multi={true}
- rows="5"
- rowsMax="6"
- error={mensagem.dict.key}
- help={mensagem.dict.key ? "Faltou escrever sua mensagem de sugestão, crítica ou dúvida." : "Escreva sua mensagem no campo acima."}
- handleChange={e => preencheMensagem(e)}
- />
- <br />
- <br />
- <div style={{ display: "flex", justifyContent: "center" }}>
- {
- state.currentUser.id !== '' ? (
- <Button contrast={props.contrast} onClick={e => onSubmit(e)} >ENVIAR MENSAGEM</Button>
- )
- :
- (
- <Button contrast={props.contrast} onClick={e => { e.preventDefault(); handleLogin(true); }} >ENVIAR MENSAGEM</Button>
- )
- }
- </div>
- </form>
- </React.Fragment>
-
-
- );
+
+
+
+
+ return (
+ <React.Fragment>
+ <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleSnackbar}
+ anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
+ >
+ <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
+ </Snackbar>
+ {/*-------------------------------MODALS---------------------------------------*/}
+ <LoginModal contrast={props.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
+ openSnackbar={() => { handleSuccessfulLogin(true) }}
+ />
+ <SignUpModal contrast={props.contrast} open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} />
+ {/*----------------------------------------------------------------------------*/}
+ <div>
+ <form onSubmit={e => onSubmit(e)}>
+ <FormInput
+ contrast={props.contrast}
+
+ inputType={"text"}
+ name={"nome"}
+ value={nome.dict.value}
+ placeholder={"Nome *"}
+ error={nome.dict.key}
+ help={nome.dict.key ? "insira seu nome para o contato " : ""}
+ handleChange={e => preencheNome(e)}
+ />
+ <br />
+ <FormInput
+ contrast={props.contrast}
+ inputType={"text"}
+ name={"email"}
+ value={email.dict.value}
+ placeholder={"E-mail *"}
+ error={email.dict.key}
+ help={email.dict.key ? "Formato de e-mail incorreto ou vazio, tente : usuario@provedor.com" : ""}
+ handleChange={e => preencheEmail(e)}
+ />
+ <br />
+ <br />
+ <FormInput
+ contrast={props.contrast}
+ inputType={"text"}
+ name={"mensagem"}
+ value={mensagem.dict.value}
+ placeholder={"Mensagem *"}
+ multi={true}
+ rows="5"
+ rowsMax="6"
+ error={mensagem.dict.key}
+ help={mensagem.dict.key ? "Faltou escrever sua mensagem de sugestão, crítica ou dúvida." : "Escreva sua mensagem no campo acima."}
+ handleChange={e => preencheMensagem(e)}
+ />
+ <br />
+ <br />
+ <div style={{ display: "flex", justifyContent: "center" }}>
+ {
+ state.currentUser.id !== '' ? (
+ <Button contrast={props.contrast} onClick={e => onSubmit(e)} >ENVIAR MENSAGEM</Button>
+ )
+ :
+ (
+ <Button contrast={props.contrast} onClick={e => { e.preventDefault(); handleLogin(true); }} >ENVIAR MENSAGEM</Button>
+ )
+ }
+ </div>
+ </form>
+ </div>
+ </React.Fragment>
+ );
}
export default Formulario;
diff --git a/src/Components/CriarColecaoForm.js b/src/Components/CriarColecaoForm.js
index 9daabc90b4091e9b7a1db9b74018e5b49d89d64d..2aa9f41c377671c1a7f8f3afd058d42d0e485438 100644
--- a/src/Components/CriarColecaoForm.js
+++ b/src/Components/CriarColecaoForm.js
@@ -24,12 +24,14 @@ import Radio from '@material-ui/core/Radio';
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 {StyledTextField, useStyles} from './ReportUserForm.js'
import { postRequest } from './HelperFunctions/getAxiosConfig'
export default function CriarColecaoForm(props) {
const { state } = useContext(Store)
+ const classes = useStyles();
+
const [value, setValue] = React.useState(-1);
/*values are set according to backend complaint id*/
@@ -93,13 +95,14 @@ export default function CriarColecaoForm(props) {
value={colName.value}
onChange={e => handleColName(e)}
error={colName.key}
+ InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
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" }}>Esta coleção é:</span>
<StyledFormControl contrast={state.contrast} component="fieldset">
<RadioGroup value={value} onChange={handleChange}>
@@ -165,25 +168,7 @@ export const ButtonEnviar = styled(Button)`
padding-left : 16px;
}
`
-export const StyledTextField = styled(TextField)`
- margin : 18px 0 !important;
-
- .MuiFormHelperText-root {
- text-align : right;
- }
-
- label.Mui-focused {
- color: ${props => props.contrast === "" ? "#673ab7" : "yellow"};
- }
- label.Mui-focused.Mui-error {
- color : red;
- }
-
- .MuiInput-underline::after {
- color: ${props => props.contrast === "" ? "#673ab7" : "yellow"};
- }
-`
export const StyledFormControl = styled(FormControl)`
display : block !important;
diff --git a/src/Components/EditarColecaoForm.js b/src/Components/EditarColecaoForm.js
index 79bcc2091aba7c5113a5a392886e97cf0827ab48..37d8b3f34628f1af2d54ad522eff1d89b4444e2e 100644
--- a/src/Components/EditarColecaoForm.js
+++ b/src/Components/EditarColecaoForm.js
@@ -24,12 +24,14 @@ import Radio from '@material-ui/core/Radio';
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 {StyledTextField, useStyles} from './ReportUserForm.js'
import {getRequest, putRequest} from './HelperFunctions/getAxiosConfig'
export default function EditarColecaoForm (props) {
const {state} = useContext(Store)
+ const classes = useStyles();
+
function handleSuccessfulGet (data) {
setColName({key : false, value : data.name})
setValue( data.privacy === 'public' ? 'pública' : 'privada')
@@ -99,22 +101,26 @@ export default function EditarColecaoForm (props) {
<form onSubmit={(e) => {formSubmit(e)}} style={{textAlign : "left"}}>
<StyledTextField
+ contrast={props.contrast}
id = {"col-name"}
label={"Nome"}
type = {"text"}
value = {colName.value}
onChange = {e => handleColName(e)}
error = {colName.key}
+ InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
required = {true}
style={{width:"100%"}}
/>
<StyledTextField
+ contrast={props.contrast}
id = {"col-description"}
label={"Descrição"}
type = {"text"}
value = {colDescription}
multiline
+ InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
rows={5}
onChange = {e => setColDescription(e)}
style={{width:"100%"}}
@@ -182,25 +188,6 @@ export const ButtonEnviar = styled(Button)`
padding-left : 16px;
}
`
-export const StyledTextField = styled(TextField)`
- margin : 18px 0 !important;
-
- .MuiFormHelperText-root {
- text-align : right;
- }
-
- label.Mui-focused {
- color : #673ab7;
- }
-
- label.Mui-focused.Mui-error {
- color : red;
- }
-
- .MuiInput-underline::after {
- border-bottom: 2px solid #673ab7;
- }
-`
export const StyledFormControl = styled(FormControl)`
.MuiFormControlLabel-root {
diff --git a/src/Components/Firulas.js b/src/Components/Firulas.js
index 56dd661cddd8126996e083692d7a9545adf58e1e..72dd44f196698f089f0039f3fac6eae7ceb37bff 100644
--- a/src/Components/Firulas.js
+++ b/src/Components/Firulas.js
@@ -68,10 +68,11 @@ export default function Firulas(props) {
<Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
</Snackbar>
<Rating
+ className={`${props.contrast}IconColor`}
name="customized-empty"
value={props.rating}
readOnly
- emptyIcon={<StarBorderIcon className={`${props.contrast}Text`} fontSize="inherit"/>}
+ emptyIcon={<StarBorderIcon className={`${props.contrast}IconColor`} fontSize="inherit"/>}
/>
<LikeCounter>
<span>{likesCount}</span>
diff --git a/src/Components/FormInput.js b/src/Components/FormInput.js
index c06f526e542532e69bcc969cde39f5e46fe0ed14..c8c1e77b2697ece08c5a2e478afdaa5394b89956 100644
--- a/src/Components/FormInput.js
+++ b/src/Components/FormInput.js
@@ -30,73 +30,77 @@ const StyledTextField = styled(TextField)`
width : 100% !important;
.MuiOutlinedInput-root {
- &.Mui-focused fieldset {
- border-color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
- }
- fieldset {
- border-color: ${props => props.contrast === "" ? "#666" : "white"};
- }
+ &.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"};
+ color: ${props => props.contrast === "" ? "#666" : "white"};
}
label.Mui-focused {
- color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
}
label.Mui-focused.Mui-error {
color : red;
}
+
+ .MuiFormHelperText-root {
+ text-align : left;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
`
const useStyles = makeStyles(theme => ({
- container: {
- display: "flex",
- flexWrap: "wrap",
- padding: "2px"
- },
- darkTextField: {
- maxWidth: "100%",
- fontSize: "15px",
- fontWeight: "lighter",
- color: "white",
- width: "100%"
- },
- lightTextField: {
- maxWidth: "100%",
- fontSize: "15px",
- fontWeight: "lighter",
- color: "black",
- width: "100%"
- }
+ container: {
+ display: "flex",
+ flexWrap: "wrap",
+ padding: "2px"
+ },
+ darkTextField: {
+ maxWidth: "100%",
+ fontSize: "15px",
+ fontWeight: "lighter",
+ color: "white",
+ width: "100%"
+ },
+ lightTextField: {
+ maxWidth: "100%",
+ fontSize: "15px",
+ fontWeight: "lighter",
+ color: "black",
+ width: "100%"
+ }
}));
export default function FormInput(props) {
- const classes = useStyles();
-
- return (
+ const classes = useStyles();
- <StyledTextField
- contrast={props.contrast}
- label={props.placeholder}
- margin="normal"
- id={props.name}
- name={props.name}
- type={props.inputType}
- value={props.value}
- onChange={props.handleChange}
- variant="outlined"
- rows={props.rows}
- error={props.error}
- rowsMax={props.rowsMax}
- InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
- required={props.required}
- helperText={props.help}
- style={{ width: "100%" }}
- mask={props.mask}
- multiline={props.multi}
- />
- );
+ return (
+ <StyledTextField
+ contrast={props.contrast}
+ label={props.placeholder}
+ margin="normal"
+ id={props.name}
+ name={props.name}
+ type={props.inputType}
+ value={props.value}
+ onChange={props.handleChange}
+ variant="outlined"
+ rows={props.rows}
+ error={props.error}
+ rowsMax={props.rowsMax}
+ InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
+ required={props.required}
+ helperText={props.help}
+ style={{ width: "100%" }}
+ mask={props.mask}
+ multiline={props.multi}
+ />
+ );
}
diff --git a/src/Components/GuardarModal.js b/src/Components/GuardarModal.js
index 38118f8ad9ecca934e49f6dcbb3e473e1493b797..20caacef01e49a48705c333c2840e44dcd120429 100644
--- a/src/Components/GuardarModal.js
+++ b/src/Components/GuardarModal.js
@@ -170,6 +170,9 @@ export default function GuardarModal(props) {
<div classname="no-cols">
<h2>Você não possui coleções ainda.</h2>
</div>
+ <div style={{ display: "flex", justifyContent: "center" }}>
+ <CriarColButton className={`${props.contrast}LinkColor ${props.contrast}Border ContrastText`} style={{backgroundColor: props.contrast === "" ? "#673ab7" : "black"}} onClick={() => { setCreating(true) }}>CRIAR COLEÇÃO</CriarColButton>
+ </div>
</>
)
:
@@ -195,14 +198,14 @@ export default function GuardarModal(props) {
}
</div>
</ChooseCol>
+ <div style={{ display: "flex", justifyContent: "center" }}>
+ <CriarColButton className={`${props.contrast}LinkColor ${props.contrast}Border ContrastText`} style={{backgroundColor: props.contrast === "" ? "#673ab7" : "black"}} onClick={() => { setCreating(true) }}>CRIAR COLEÇÃO</CriarColButton>
+ </div>
</>
)
)
}
- <div style={{ display: "flex", justifyContent: "center" }}>
- <CriarColButton className={`${props.contrast}LinkColor ${props.contrast}Border ContrastText`} style={{backgroundColor: props.contrast === "" ? "#673ab7" : "black"}} onClick={() => { setCreating(true) }}>CRIAR COLEÇÃO</CriarColButton>
- </div>
</ChooseColContainer>
)
}
diff --git a/src/Components/MobileDrawerMenu.js b/src/Components/MobileDrawerMenu.js
index 064b5c3fa2ba80bb394cc20000bedf1df25ba045..6f058b3712a5bbe81771ca5ae278128c441af9d6 100644
--- a/src/Components/MobileDrawerMenu.js
+++ b/src/Components/MobileDrawerMenu.js
@@ -145,14 +145,14 @@ export default function MobileDrawerMenu(props) {
</ButtonPublicarRecurso>
</Link>
</div>
- <div style={{ borderTop: "1px solid #e5e5e5", display: "flex", flexDirection: "column", marginTop: "10px", paddingTop: "10px", color: "#666", paddingBottom: "10px" }}>
+ <div style={{ borderTop: "1px solid #e5e5e5", display: "flex", flexDirection: "column", marginTop: "10px", paddingTop: "10px", paddingBottom: "10px" }}>
<MyArea contrast={props.contrast}>
<div className="user-avatar">
<img alt="user-avatar"
src={getUserAvatar()}
/>
</div>
- <span className="Text">Minha área</span>
+ <span className="text">Minha área</span>
</MyArea>
{
minhaArea.map((item, index) =>
@@ -183,7 +183,7 @@ export default function MobileDrawerMenu(props) {
<div style={{ display: "flex", flexDirection: "row", margin: "10px 0", justifyContent: "center" }}>
<div style={{ borderRight: "1px solid #e5e5e5" }}>
<ButtonStyled onClick={props.openLogin} contrast={props.contrast}>
- <ExitToAppIcon style={props.contrast === "" ? { color: "#00bcd4" } : { color: "white " }} />Entrar
+ <ExitToAppIcon style={props.contrast === "" ? { color: "#00bcd4" } : { color: "white" }} />Entrar
</ButtonStyled>
</div>
@@ -258,7 +258,6 @@ const ButtonPublicarRecurso = styled(Button)`
const StyledDrawer = styled(Drawer)`
.MuiPaper-root {
- width: 40%;
background-color: ${props => props.contrast === "" ? "#fff" : "black"};
}
@@ -303,5 +302,5 @@ const MenuBody = styled.div`
margin-top : 20px;
display : flex;
flex-direction : column;
- color : #666;
+
`
diff --git a/src/Components/ModalAbout.js b/src/Components/ModalAbout.js
index b0e13d96fbf33293f3edb0cc79b7633a37b4e6e0..568305f7458dadf7600f8698270eb7e7be5a1512 100644
--- a/src/Components/ModalAbout.js
+++ b/src/Components/ModalAbout.js
@@ -30,170 +30,171 @@ import styled from "styled-components";
/*Importação de imagens para o componente*/
const useStyles = makeStyles((theme) => ({
- modal: {
- display: "flex",
- alignItems: "center",
- justifyContent: "center",
- },
- paper: {
- border: "2px solid #000",
- boxShadow:
- " 0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
- },
- carousel: {
- width: "750px",
- height: "370px",
- },
+ modal: {
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ },
+ paper: {
+ border: "2px solid #000",
+ boxShadow:
+ " 0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
+ },
+ carousel: {
+ width: "750px",
+ height: "370px",
+ },
}));
const Button = styled.button`
- background-color: ${(props) =>
- props.contrast === "" ? "#00bcd4" : "black !important"};
- color: ${(props) => (props.contrast === "" ? "#fff" : "yellow !important")};
- font-family: Roboto, sans-serif;
- font-size: 14px;
- font-weight: 700;
- height: 36px;
- border-radius: 3px;
- padding-left: 16px;
- padding-right: 16px;
- box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
- display: inline-block;
- position: relative;
- cursor: pointer;
- min-height: 36px;
- min-width: 88px;
- line-height: 36px;
- vertical-align: middle;
- -webkit-box-align: center;
- outline: none;
- text-align: center;
- border: ${(props) =>
- props.contrast === "" ? "0" : "1px solid white !important"};
- padding: 0 16px !important;
- text-decoration: ${(props) =>
- props.contrast === "" ? "none" : "underline !important"};
- :hover {
background-color: ${(props) =>
- props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
- }
+ props.contrast === "" ? "#00bcd4" : "black !important"};
+ color: ${(props) => (props.contrast === "" ? "#fff" : "yellow !important")};
+ font-family: Roboto, sans-serif;
+ font-size: 14px;
+ font-weight: 700;
+ height: 36px;
+ border-radius: 3px;
+ padding-left: 16px;
+ padding-right: 16px;
+ box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
+ display: inline-block;
+ position: relative;
+ cursor: pointer;
+ min-height: 36px;
+ min-width: 88px;
+ line-height: 36px;
+ vertical-align: middle;
+ -webkit-box-align: center;
+ outline: none;
+ text-align: center;
+ border: ${(props) =>
+ props.contrast === "" ? "0" : "1px solid white !important"};
+ padding: 0 16px !important;
+ text-decoration: ${(props) =>
+ props.contrast === "" ? "none" : "underline !important"};
+ :hover {
+ background-color: ${(props) =>
+ props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
+ }
`;
const Formulário = styled.div`
- background-color: #fff;
- padding: 40px;
+ background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
+ padding: 40px;
- border-radius: 4px;
+ border-radius: 4px;
- color: #666 !important;
+ color: ${props => props.contrast === "" ? "#666" : "white"} !important;
- h2 {
- font-size: 26px;
- font-weight: lighter;
- margin-top: 20px;
- margin-bottom: 10px;
- }
+ border: ${props => props.contrast === "" ? "" : "1px solid white"} !important;
- form .inputBlock {
- margin-block: 22px;
+ h2 {
+ font-size: 26px;
+ font-weight: lighter;
+ margin-top: 20px;
+ margin-bottom: 10px;
+ }
- }
+ form .inputBlock {
+ margin-block: 22px;
- form .inputBlock label {
- font-size: 14px;
- font-weight: bold;
- display: block;
+ }
- }
+ form .inputBlock label {
+ font-size: 14px;
+ font-weight: bold;
+ display: block;
- form .inputBlock input {
- width: 100%;
- height: 32px;
- font-size: 14px;
- border: 0;
- border-bottom: 1px solid #eee;
-
- }
-
- form .inputBlock.Message input {
- height: 131px;
- }
-
- form buttom[type=submit] {
- width: 100%;
- border: 0;
- margin-top: 30px;
- background: #7d40e7
- border-radius: 2px;
- padding: 15px 20px;
- font-size: 16px;
- font-weight: bold;
- color: #fff;
- cursor: pointer;
- transition: background 0.5s;
+ }
- }
+ form .inputBlock input {
+ width: 100%;
+ height: 32px;
+ font-size: 14px;
+ border: 0;
+ border-bottom: 1px solid #eee;
- form buttom[type=submit]:hover {
- background: #6931ac
- }
+ }
+ form .inputBlock.Message input {
+ height: 131px;
+ }
- h2 {
- font-size: 24px;
- font-weight: lighter;
- margin-bottom: 50px;
- margin-top: 20px;
- text-align: center;
+ form buttom[type=submit] {
+ width: 100%;
+ border: 0;
+ margin-top: 30px;
+ background: #7d40e7
+ border-radius: 2px;
+ padding: 15px 20px;
+ font-size: 16px;
+ font-weight: bold;
+ color: #fff;
+ cursor: pointer;
+ transition: background 0.5s;
+
+ }
+
+ form buttom[type=submit]:hover {
+ background: #6931ac
+ }
+
+
+ h2 {
+ font-size: 24px;
+ font-weight: lighter;
+ margin-bottom: 50px;
+ margin-top: 20px;
+ text-align: center;
- }
+ }
`;
export default function TransitionsModal({ contrast }) {
- console.log(contrast);
- const classes = useStyles();
- const [open, setOpen] = React.useState(false);
-
- const handleOpen = () => {
- setOpen(true);
- };
-
- const handleClose = () => {
- setOpen(false);
- };
-
- return (
- <div style={{ display: "flex", justifyContent: "center" }}>
- <link
- href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto&display=swap"
- rel="stylesheet"
- />
-
- <Button type="button" onClick={handleOpen} contrast={contrast}>
- SUGERIR OUTRO SITE
- </Button>
- <Modal
- aria-labelledby="transition-modal-title"
- aria-describedby="transition-modal-description"
- className={classes.modal}
- open={open}
- onClose={handleClose}
- closeAfterTransition
- BackdropComponent={Backdrop}
- BackdropProps={{
- timeout: 500,
- }}
- >
- <Fade in={open}>
- <div>
- <Formulário>
- <h2>Sugerir site de Recursos Educacionais Digitais</h2>
- <Formulario />
- </Formulário>
- </div>
- </Fade>
- </Modal>
- </div>
- );
+ console.log(contrast);
+ const classes = useStyles();
+ const [open, setOpen] = React.useState(false);
+
+ const handleOpen = () => {
+ setOpen(true);
+ };
+
+ const handleClose = () => {
+ setOpen(false);
+ };
+
+ return (
+ <div style={{ display: "flex", justifyContent: "center" }}>
+ <link
+ href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto&display=swap"
+ rel="stylesheet"
+ />
+ <Button type="button" onClick={handleOpen} contrast={contrast}>
+ SUGERIR OUTRO SITE
+ </Button>
+ <Modal
+ aria-labelledby="transition-modal-title"
+ aria-describedby="transition-modal-description"
+ className={classes.modal}
+ open={open}
+ onClose={handleClose}
+ closeAfterTransition
+ BackdropComponent={Backdrop}
+ BackdropProps={{
+ timeout: 500,
+ }}
+ >
+ <Fade in={open}>
+ <div>
+ <Formulário contrast={contrast}>
+ <h2>Sugerir site de Recursos Educacionais Digitais</h2>
+ <Formulario contrast={contrast}/>
+ </Formulário>
+ </div>
+ </Fade>
+ </Modal>
+ </div>
+ );
}
diff --git a/src/Components/ModalAvaliarRecurso.js b/src/Components/ModalAvaliarRecurso.js
index 8f8ca3ea03833ef566660a287b3888c642701aa2..4376cee70643c1f48b5ee74b34c86065ca0c5a2f 100644
--- a/src/Components/ModalAvaliarRecurso.js
+++ b/src/Components/ModalAvaliarRecurso.js
@@ -29,10 +29,10 @@ import FormControl from '@material-ui/core/FormControl';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import CloseModalButton from './CloseModalButton'
import Snackbar from '@material-ui/core/Snackbar';
-import TextField from '@material-ui/core/TextField';
import { withStyles } from '@material-ui/core/styles';
import { getRequest } from './HelperFunctions/getAxiosConfig'
import LoadingSpinner from '../Components/LoadingSpinner'
+import {StyledTextField, useStyles} from './ReportUserForm.js'
const StyledRadio = withStyles({
root: {
@@ -46,6 +46,8 @@ const StyledRadio = withStyles({
export default function ModalAvaliarRecurso(props) {
+ const classes = useStyles();
+
const [options, setOptions] = useState([])
const [avaliacao, setAvaliacao] = useState([null, null, null, null])
@@ -175,10 +177,12 @@ export default function ModalAvaliarRecurso(props) {
<Grid item xs={12}>
<FormControl style={{ width: "100%", height: "100px" }}>
<StyledTextField
+ contrast={props.contrast}
id={"title-form"}
label={"Justificativa (opcional)"}
type={"text"}
value={justificativa}
+ InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
onChange={e => { handleChangeJustificativa(e) }}
multiline
fullWidth
@@ -206,7 +210,7 @@ export default function ModalAvaliarRecurso(props) {
}
const Content = styled.div`
- padding : 10px 75px 0 75px;
+ padding : 0 30px 20px 30px;
overflow : visible;
max-width : 100%;
font-size : 16px;
@@ -226,7 +230,7 @@ const Content = styled.div`
const Header = styled.div`
display : flex;
flex-direction : row;
- padding : 20px 75px 0 75px;
+ padding : 20px 20px 20px 20px;
align-items : center;
justify-content : space-between;
color: ${props => props.contrast === "" ? "#666" : "white"} !important;
@@ -271,34 +275,13 @@ const Container = styled.div`
max-height : 90%;
position : relative;
border-radius : 4px;
- max-width : 90%;
+ max-width : 100%;
overflow-y : scroll;
p {
margin : 0 0 10px;
}
`
-const StyledTextField = styled(TextField)`
- font-size : 14px;
- width : 100% !important;
- full-width : 100% !important;
-
- .MuiFormControl-root {
- margin : 18px 0 !important;
- }
-
- label.Mui-focused {
- color : #ff7f00;
- }
-
- label.Mui-focused.Mui-error {
- color : red;
- }
-
- .MuiInput-underline::after {
- border-bottom: 2px solid #ff7f00;
- }
-`
const ButtonsDiv = styled.div`
display : flex;
diff --git a/src/Components/ReportColecaoForm.js b/src/Components/ReportColecaoForm.js
index 46a4dccb08b7b17c155bcf9f7db9e5659ef11bff..f2ec9fcb68e9de7d118436647e8f0a3e419883f1 100644
--- a/src/Components/ReportColecaoForm.js
+++ b/src/Components/ReportColecaoForm.js
@@ -21,23 +21,24 @@ import styled from 'styled-components'
import Radio from '@material-ui/core/Radio';
import RadioGroup from '@material-ui/core/RadioGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
-import TextField from '@material-ui/core/TextField';
-import {StyledFormControl, ButtonsDiv, ButtonCancelar} from './ReportUserForm.js'
+import {StyledFormControl, ButtonsDiv, ButtonCancelar, StyledTextField, useStyles} from './ReportUserForm.js'
import { withStyles } from '@material-ui/core/styles';
const StyledRadio = withStyles({
- root: {
- color: '#666',
- '&$checked': {
- color: '#673ab7',
+ root: {
+ color: '#666',
+ '&$checked': {
+ color: '#673ab7',
+ },
},
- },
- checked: {},
+ checked: {},
})((props) => <Radio color="default" {...props} />);
export default function ReportColecaoForm (props) {
const [value, setValue] = React.useState(-1);
+ const classes = useStyles();
+
const handleChange = (event) => {
setValue(event.target.value);
};
@@ -100,6 +101,7 @@ export default function ReportColecaoForm (props) {
multiline={true}
rowsMax = {"5"}
error = {moreInfo.key}
+ InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
required = {false}
style={{width : "100%"}}
/>
@@ -112,23 +114,6 @@ export default function ReportColecaoForm (props) {
)
}
-const StyledTextField = styled(TextField)`
- .MuiFormHelperText-root {
- text-align : left;
- }
-
- label.Mui-focused {
- color : #673ab7;
- }
-
- label.Mui-focused.Mui-error {
- color : red;
- }
-
- .MuiInput-underline::after {
- border-bottom: 2px solid #673ab7;
- }
-`
const ButtonEnviar = styled(Button)`
color: ${props => props.contrast === "" ? "white !important" : "yellow !important"};
background-color: ${props => props.contrast === "" ? "#673ab7 !important" : "black !important"};
diff --git a/src/Components/ReportModal.js b/src/Components/ReportModal.js
index 321f3f6f34e7b13d7bbddbc4ed2f89b7c6a75367..a35f4e4ae308ebea12f65113f8638e827fe69452 100644
--- a/src/Components/ReportModal.js
+++ b/src/Components/ReportModal.js
@@ -81,8 +81,7 @@ export default function ReportModal (props) {
return (
<React.Fragment>
- <SnackbarComponent snackbarOpen={snackbarOpen} severity={"success"} handleClose={() => {handleSnackbar(false)}} text={"Sua reclamação foi recebida."}
- />
+ <SnackbarComponent snackbarOpen={snackbarOpen} severity={"success"} handleClose={() => {handleSnackbar(false)}} text={"Sua reclamação foi recebida."}/>
<StyledModal
aria-labelledby="transition-modal-title"
aria-describedby="transition-modal-description"
diff --git a/src/Components/ReportRecursoForm.js b/src/Components/ReportRecursoForm.js
index 411b42a8892434f693106c2b98f6ba9d88b1cc03..b0d57b9986edfca73b92873e5f7dd5b531c6d59b 100644
--- a/src/Components/ReportRecursoForm.js
+++ b/src/Components/ReportRecursoForm.js
@@ -16,10 +16,12 @@ 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 from 'react';
+import { Button } from '@material-ui/core';
+import styled from 'styled-components'
import Radio from '@material-ui/core/Radio';
import RadioGroup from '@material-ui/core/RadioGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
-import {StyledFormControl, StyledTextField, ButtonsDiv, ButtonCancelar, ButtonEnviar} from './ReportUserForm.js'
+import {StyledFormControl, StyledTextField, ButtonsDiv, ButtonCancelar, useStyles} from './ReportUserForm.js'
import { withStyles } from '@material-ui/core/styles';
const StyledRadio = withStyles({
@@ -35,6 +37,8 @@ const StyledRadio = withStyles({
export default function ReportRecursoForm (props) {
const [value, setValue] = React.useState(-1);
+ const classes = useStyles();
+
const handleChange = (event) => {
setValue(event.target.value);
};
@@ -97,6 +101,7 @@ export default function ReportRecursoForm (props) {
multiline={true}
rowsMax = {"5"}
error = {moreInfo.key}
+ InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
required = {false}
style={{width : "100%"}}
/>
@@ -108,3 +113,26 @@ export default function ReportRecursoForm (props) {
</form>
)
}
+
+export const ButtonEnviar = styled(Button)`
+ color: ${props => props.contrast === "" ? "white !important" : "yellow !important"};
+ background-color: ${props => props.contrast === "" ? "#f07e05 !important" : "black !important"};
+ text-decoration: ${props => props.contrast === "" ? "none !important" : "yellow underline !important"};
+ border: ${props => props.contrast === "" ? "none !important" : "1px solid white !important"};
+ font-size: 14px !important;
+ font-weight: 500 !important;
+ height: 36px !important;
+ border-radius: 3px !important;
+ padding-left: 16px !important;
+ padding-right: 16px !important;
+ box-shadow: 0 2px 5px 0 rgba(0,0,0,.26) !important;
+ outline : none !important;
+ min-width : 88px !important;
+ vertical-align : middle !important;
+ margin : 6px 8px !important;
+
+ .MuiButton-label {
+ padding-right : 16px;
+ padding-left : 16px;
+ }
+`
\ No newline at end of file
diff --git a/src/Components/ReportUserForm.js b/src/Components/ReportUserForm.js
index b25ced4d93e42f535be9471d2f3bb3f2efcdde6e..1677c489b694b0cd1ebb173244499a2e4c187826 100644
--- a/src/Components/ReportUserForm.js
+++ b/src/Components/ReportUserForm.js
@@ -23,7 +23,7 @@ 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 { withStyles } from '@material-ui/core/styles';
+import { withStyles, makeStyles } from '@material-ui/core/styles';
const StyledRadio = withStyles({
root: {
@@ -34,9 +34,26 @@ const StyledRadio = withStyles({
checked: {},
})((props) => <Radio {...props} />);
+export const useStyles = makeStyles(theme => ({
+ darkTextField: {
+ maxWidth: "100%",
+ fontSize: "15px",
+ color: "white",
+ width: "100%"
+ },
+ lightTextField: {
+ maxWidth: "100%",
+ fontSize: "15px",
+ color: "black",
+ width: "100%"
+ }
+}));
+
export default function ReportForm (props) {
const [value, setValue] = useState(-1);
+ const classes = useStyles();
+
const handleChange = (event) => {
setValue(event.target.value);
};
@@ -99,6 +116,7 @@ export default function ReportForm (props) {
multiline={true}
rowsMax = {"5"}
error = {moreInfo.key}
+ InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
required = {false}
style={{width:"100%"}}
/>
@@ -133,7 +151,7 @@ export const ButtonCancelar = styled(Button)`
export const ButtonEnviar = styled(Button)`
color: ${props => props.contrast === "" ? "white !important" : "yellow !important"};
- background-color: ${props => props.contrast === "" ? "#ff7f00 !important" : "black !important"};
+ background-color: ${props => props.contrast === "" ? "#00bcd4 !important" : "black !important"};
text-decoration: ${props => props.contrast === "" ? "none !important" : "yellow underline !important"};
border: ${props => props.contrast === "" ? "none !important" : "1px solid white !important"};
font-size: 14px !important;
@@ -154,21 +172,34 @@ export const ButtonEnviar = styled(Button)`
}
`
export const StyledTextField = styled(TextField)`
- .MuiFormHelperText-root {
- text-align : left;
+
+ padding: 20px 20px 20px 20px;
+ .MuiOutlinedInput-root {
+ &.Mui-focused fieldset {
+ border-color: ${props => props.contrast === "" ? "#ff7f00" : "yellow"};
+ }
+ fieldset {
+ border-color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
+ }
+
+ label{
+ color: ${props => props.contrast === "" ? "#666" : "white"};
}
label.Mui-focused {
- color : orange;
+ color: ${props => props.contrast === "" ? "#ff7f00" : "yellow"};
}
- label.Mui-focused.Mui-error {
- color : red;
+ .MuiFormHelperText-root {
+ text-align : left;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
}
.MuiInput-underline::after {
- border-bottom: 2px solid orange;
+ border-bottom: 2px solid ${props => props.contrast === "" ? "#ff7f00" : "yellow"};
}
+
`
export const StyledFormControl = styled(FormControl)`
diff --git a/src/Components/ResourceList.js b/src/Components/ResourceList.js
index e8dc0989eee3da3281e46e874d327e79c39215ef..67d22bc760ce3bf1e3449ddad59fb7755a8020b4 100644
--- a/src/Components/ResourceList.js
+++ b/src/Components/ResourceList.js
@@ -131,7 +131,7 @@ export default function ResourceList(props) {
</Title>
</Grid>
<Grid item>
- <Button color="primary" onClick={() => setSelectable(!selectable)}>
+ <Button onClick={() => setSelectable(!selectable)}>
<PanelButtonText contrast={props.contrast}>
{selectable ? "Desativar" : "Ativar"} seleção
</PanelButtonText>
diff --git a/src/Components/SearchBar.js b/src/Components/SearchBar.js
index 36400aaa6f213bf8d41aede5dcaf76e332bb31ed..be81cfa490acb38f26f6783ef394c0caad6b31c1 100644
--- a/src/Components/SearchBar.js
+++ b/src/Components/SearchBar.js
@@ -26,18 +26,18 @@ import styled from 'styled-components'
import { Store } from '../Store';
import { v4 as uuidv4 } from 'uuid'
import Grid from "@material-ui/core/Grid"
-
+import {useStyles} from './ReportUserForm.js'
const dividerStyled = {
- background: '#e0e0e0',
- width: '1px',
- content: "",
- display: 'block',
- top: '0',
- bottom: '0',
- right: '0',
- minHeight: '70px',
- margin: '0 20px'
+ background: '#e0e0e0',
+ width: '1px',
+ content: "",
+ display: 'block',
+ top: '0',
+ bottom: '0',
+ right: '0',
+ minHeight: '70px',
+ margin: '0 20px'
}
const DividerVertical = () => <em style={dividerStyled}></em>
@@ -46,28 +46,28 @@ const ButtonStyled = styled(Button)`
text-transform: capitalize !important;
`
const IconSearchStyled = styled(IconSearch)`
- color: ${props => props.contrast === "" ? "#16b8dd" : "white"};
+ color: ${props => props.contrast === "" ? "#16b8dd" : "white"};
`
const TextFieldStyled = styled(TextField)`
- flex-grow: 2;
+ flex-grow: 2;
margin: 0 2vw !important;
.MuiOutlinedInput-root {
- &.Mui-focused fieldset {
- border-color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
- }
- fieldset {
- border-color: ${props => props.contrast === "" ? "#666" : "white"};
- }
+ &.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"};
+ color: ${props => props.contrast === "" ? "#666" : "white"};
}
label.Mui-focused {
- color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
}
label.Mui-focused.Mui-error {
@@ -75,199 +75,183 @@ const TextFieldStyled = styled(TextField)`
}
`
-/*
-const RadioGroupStyled = styled(RadioGroup)`
- display: flex;
- flex-direction: row;
- flex-grow: 1;
-`
-*/
-
const FormLearnObjControlLabelStyled = styled(FormControlLabel)`
- *{
- text-transform: uppercase;
- color: ${props => props.contrast === "" ? "#ff8a17 !important" : "yellow !important"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
- font-weight: bolder;
- }
+ *{
+ text-transform: uppercase;
+ color: ${props => props.contrast === "" ? "#ff8a17 !important" : "yellow !important"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ font-weight: bolder;
+ }
`
const FormCollectionControlLabelStyled = styled(FormControlLabel)`
- *{
- text-transform: uppercase;
- color: ${props => props.contrast === "" ? "#673ab7 !important" : "yellow !important"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
- font-weight: bolder;
- }
+ *{
+ text-transform: uppercase;
+ color: ${props => props.contrast === "" ? "#673ab7 !important" : "yellow !important"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ font-weight: bolder;
+ }
`
const FormUserControlLabelStyled = styled(FormControlLabel)`
- *{
- text-transform: uppercase;
- color: ${props => props.contrast === "" ? "#00bcd4 !important" : "yellow !important"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
- font-weight: bolder;
- }
+ *{
+ text-transform: uppercase;
+ color: ${props => props.contrast === "" ? "#00bcd4 !important" : "yellow !important"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ font-weight: bolder;
+ }
`
const RadioLearnObjStyled = styled(Radio)`
- color: #ff8a17;
+ color: #ff8a17;
`
const RadioCollectionStyled = styled(Radio)`
- color: #673ab7;
+ color: #673ab7;
`
const RadioUserStyled = styled(Radio)`
- color: #00bcd4;
+ color: #00bcd4;
`
const SelectStyled = styled(Select)`
- margin-right: 2vw;
- *{
- text-transform: uppercase;
- color: ${props => props.contrast === "" ? "#ff8a17 !important" : "yellow !important"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
- font-weight: bolder;
- }
+ margin-right: 2vw;
+ *{
+ text-transform: uppercase;
+ color: ${props => props.contrast === "" ? "#ff8a17 !important" : "yellow !important"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ font-weight: bolder;
+ }
`
const MenuItemStyled = styled(MenuItem)`
text-transform: uppercase;
font-weight: bolder;
`
-/*const Bar = styled.div`
- display: flex;
- align-items: center;
- justify-content: space-between;
- border-top: 1px rgba(0,0,0,.1) solid;
-`
-const Flex = styled.span`
- display: flex;
- align-items: center;
- color: #787380;
-`*/
-
export default function SearchBar(props) {
- const [query, setQuery] = useState('')
- const [searchClass, setSearchClass] = useState('LearningObject')
-
- const { state, dispatch } = useContext(Store)
+ const [query, setQuery] = useState('')
- const [goSearch, setGoSearch] = useState(false)
+ const classes = useStyles();
- useEffect(() => {
- if (window.location.pathname.includes('busca')) {
- const urlParams = new URLSearchParams(window.location.search)
- const urlQuery = urlParams.get('query')
- const urlSearchClass = urlParams.get('search_class')
- if (searchClass !== urlSearchClass || query !== urlQuery) {
- setQuery(urlQuery)
- setSearchClass(urlSearchClass)
- }
- }
- }, [])
+ const [searchClass, setSearchClass] = useState('LearningObject')
- useEffect(() => setGoSearch(false), [goSearch])
+ const { state, dispatch } = useContext(Store)
- const handleChange = (event) => {
- setQuery(event.target.value)
- }
+ const [goSearch, setGoSearch] = useState(false)
- const handleKeyDown = (event) => {
- if (event.key === 'Enter' || event.type === 'click') {
- dispatch({
- type: 'SAVE_SEARCH',
- newSearch: {
- query: query !== '' ? query : '*',
- class: searchClass
+ useEffect(() => {
+ if (window.location.pathname.includes('busca')) {
+ const urlParams = new URLSearchParams(window.location.search)
+ const urlQuery = urlParams.get('query')
+ const urlSearchClass = urlParams.get('search_class')
+ if (searchClass !== urlSearchClass || query !== urlQuery) {
+ setQuery(urlQuery)
+ setSearchClass(urlSearchClass)
+ }
}
- })
- setGoSearch(true)
+ }, [])
+
+ useEffect(() => setGoSearch(false), [goSearch])
+
+ const handleChange = (event) => {
+ setQuery(event.target.value)
}
- }
- const linkTarget = {
- pathname: `/busca?page=0&results_per_page=12&order=review_average&query=${state.search.query}&search_class=${state.search.class}`,
- key: uuidv4(), // we could use Math.random, but that's not guaranteed unique.
- state: {
- applied: true
+ const handleKeyDown = (event) => {
+ if (event.key === 'Enter' || event.type === 'click') {
+ dispatch({
+ type: 'SAVE_SEARCH',
+ newSearch: {
+ query: query !== '' ? query : '*',
+ class: searchClass
+ }
+ })
+ setGoSearch(true)
+ }
}
- };
- return (
- <Grid container style={state.contrast === "" ? { paddingTop: "1em" } : { backgroundColor: "black", paddingTop: "1em" }}>
- <Grid container item xs={12} sm={6} md={6} lg={6} xl={6}>
- {goSearch && <Redirect to={`/busca?page=0&results_per_page=12&order=review_average&query=${state.search.query}&search_class=${state.search.class}`} />}
- <TextFieldStyled
- contrast={state.contrast}
- id="standard-search"
- label="O que você está buscando?"
- type="search"
- margin="normal"
- variant="outlined"
- value={query}
- onChange={handleChange}
- onKeyPress={handleKeyDown}
- />
- </Grid>
- <Grid container item justify="center" alignItems="center" xs={12} sm={6} md={6} lg={6} xl={6}>
- {state.windowSize.width >= 960 ?
- <React.Fragment>
- <Grid container item justify="center" alignItems="center" xs={12} sm={1} md={1} lg={1} xl={1}>
- <Link
- to={linkTarget}
- >
- <ButtonStyled onClick={handleKeyDown} ><IconSearchStyled contrast={state.contrast} /></ButtonStyled>
- </Link>
- </Grid>
- <Grid container item justify="center" alignItems="center" xs={12} sm={3} md={3} lg={3} xl={3}>
- <span style={state.contrast === "" ? {} : { color: "white" }}>Pressione "Enter" ou click na lupa</span>
- </Grid>
- <Grid container item justify="center" alignItems="center" xs={12} sm={1} md={1} lg={1} xl={1}>
- <DividerVertical />
+ const linkTarget = {
+ pathname: `/busca?page=0&results_per_page=12&order=review_average&query=${state.search.query}&search_class=${state.search.class}`,
+ key: uuidv4(), // we could use Math.random, but that's not guaranteed unique.
+ state: {
+ applied: true
+ }
+ };
+
+ return (
+ <Grid container style={state.contrast === "" ? { paddingTop: "1em" } : { backgroundColor: "black", paddingTop: "1em" }}>
+ <Grid container item xs={12} sm={6} md={6} lg={6} xl={6}>
+ {goSearch && <Redirect to={`/busca?page=0&results_per_page=12&order=review_average&query=${state.search.query}&search_class=${state.search.class}`} />}
+ <TextFieldStyled
+ contrast={state.contrast}
+ id="standard-search"
+ label="O que você está buscando?"
+ type="search"
+ margin="normal"
+ variant="outlined"
+ value={query}
+ InputProps={state.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
+ onChange={handleChange}
+ onKeyPress={handleKeyDown}
+ />
</Grid>
- <Grid container item justify="center" alignItems="center" xs={12} sm={7} md={7} lg={7} xl={7}>
- <RadioGroup row={true}
- aria-label="Tipo"
- name="types" value={searchClass}
- onChange={
- (event) => setSearchClass(event.target.value)
+ <Grid container item justify="center" alignItems="center" xs={12} sm={6} md={6} lg={6} xl={6}>
+ {state.windowSize.width >= 960 ?
+ <React.Fragment>
+ <Grid container item justify="center" alignItems="center" xs={12} sm={1} md={1} lg={1} xl={1}>
+ <Link
+ to={linkTarget}
+ >
+ <ButtonStyled onClick={handleKeyDown} ><IconSearchStyled contrast={state.contrast} /></ButtonStyled>
+ </Link>
+ </Grid>
+ <Grid container item justify="center" alignItems="center" xs={12} sm={3} md={3} lg={3} xl={3}>
+ <span style={state.contrast === "" ? {} : { color: "white" }}>Pressione "Enter" ou click na lupa</span>
+ </Grid>
+ <Grid container item justify="center" alignItems="center" xs={12} sm={1} md={1} lg={1} xl={1}>
+ <DividerVertical />
+ </Grid>
+ <Grid container item justify="center" alignItems="center" xs={12} sm={7} md={7} lg={7} xl={7}>
+ <RadioGroup row={true}
+ aria-label="Tipo"
+ name="types" value={searchClass}
+ onChange={
+ (event) => setSearchClass(event.target.value)
+ }
+ justify="center" alignItems="center"
+ >
+ <FormLearnObjControlLabelStyled contrast={state.contrast} value="LearningObject" control={<RadioLearnObjStyled contrast={state.contrast} />} label="Recursos" />
+ <FormCollectionControlLabelStyled contrast={state.contrast} value="Collection" control={<RadioCollectionStyled contrast={state.contrast} />} label="Coleções" />
+ <FormUserControlLabelStyled contrast={state.contrast} value="User" control={<RadioUserStyled contrast={state.contrast} />} label="Usuários" />
+ </RadioGroup>
+ </Grid>
+ </React.Fragment>
+ :
+ <React.Fragment>
+ <Grid container item justify="center" alignItems="center" xs={5} sm={5} md={5} lg={5} xl={5}>
+ <FormControl>
+ <SelectStyled
+ contrast={state.contrast}
+ value={searchClass}
+ onChange={(event) => setSearchClass(event.target.value)}
+ >
+ <MenuItemStyled style={state.contrast === "" ? { color: "#ff7f00" } : { color: "yellow", backgroundColor: "black", textDecoration: "underline" }} value="LearningObject" aria-label="Recursos">Recursos</MenuItemStyled>
+ <MenuItemStyled style={state.contrast === "" ? { color: "#673ab7" } : { color: "yellow", backgroundColor: "black", textDecoration: "underline" }} value="Collection" aria-label="Coleções">Coleções</MenuItemStyled>
+ <MenuItemStyled style={state.contrast === "" ? { color: "#00bcd4" } : { color: "yellow", backgroundColor: "black", textDecoration: "underline" }} value="User" aria-label="Usuários">Usuários</MenuItemStyled>
+ </SelectStyled>
+ </FormControl>
+ </Grid>
+ <Grid container item justify="center" alignItems="center" xs={2} sm={2} md={2} lg={2} xl={2}>
+ <DividerVertical />
+ </Grid>
+ <Grid container item justify="center" alignItems="center" xs={5} sm={5} md={5} lg={5} xl={5}>
+ <Link
+ to={linkTarget}
+ >
+ <ButtonStyled onClick={handleKeyDown} ><IconSearchStyled contrast={state.contrast} /></ButtonStyled>
+ </Link>
+ </Grid>
+ </React.Fragment>
}
- justify="center" alignItems="center"
- >
- <FormLearnObjControlLabelStyled contrast={state.contrast} value="LearningObject" control={<RadioLearnObjStyled contrast={state.contrast} />} label="Recursos" />
- <FormCollectionControlLabelStyled contrast={state.contrast} value="Collection" control={<RadioCollectionStyled contrast={state.contrast} />} label="Coleções" />
- <FormUserControlLabelStyled contrast={state.contrast} value="User" control={<RadioUserStyled contrast={state.contrast} />} label="Usuários" />
- </RadioGroup>
</Grid>
- </React.Fragment>
- :
- <React.Fragment>
- <Grid container item justify="center" alignItems="center" xs={5} sm={5} md={5} lg={5} xl={5}>
- <FormControl>
- <SelectStyled
- contrast={state.contrast}
- value={searchClass}
- onChange={(event) => setSearchClass(event.target.value)}
- >
- <MenuItemStyled style={state.contrast === "" ? { color: "#ff7f00" } : { color: "yellow", backgroundColor: "black", textDecoration: "underline" }} value="LearningObject" aria-label="Recursos">Recursos</MenuItemStyled>
- <MenuItemStyled style={state.contrast === "" ? { color: "#673ab7" } : { color: "yellow", backgroundColor: "black", textDecoration: "underline" }} value="Collection" aria-label="Coleções">Coleções</MenuItemStyled>
- <MenuItemStyled style={state.contrast === "" ? { color: "#00bcd4" } : { color: "yellow", backgroundColor: "black", textDecoration: "underline" }} value="User" aria-label="Usuários">Usuários</MenuItemStyled>
- </SelectStyled>
- </FormControl>
- </Grid>
- <Grid container item justify="center" alignItems="center" xs={2} sm={2} md={2} lg={2} xl={2}>
- <DividerVertical />
- </Grid>
- <Grid container item justify="center" alignItems="center" xs={5} sm={5} md={5} lg={5} xl={5}>
- <Link
- to={linkTarget}
- >
- <ButtonStyled onClick={handleKeyDown} ><IconSearchStyled contrast={state.contrast} /></ButtonStyled>
- </Link>
- </Grid>
- </React.Fragment>
- }
- </Grid>
- </Grid >
- )
+ </Grid >
+ )
}
\ No newline at end of file
diff --git a/src/Components/carousel.css b/src/Components/carousel.css
index 4d9cbe4cba581322b58ad62c86f9dd23470f16bf..3a4c6336859565de33631450b35b9ed963a8dfdd 100644
--- a/src/Components/carousel.css
+++ b/src/Components/carousel.css
@@ -22,9 +22,10 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
background-color: inherit !important;
}
-.carousel .control-dots{
+.carousel .control-dots {
position: inherit !important;
}
+
.carousel .control-arrow {
background: orange !important;
/* position: relative !important; */
diff --git a/src/Pages/Contact.js b/src/Pages/Contact.js
index 32a1d84ae30248a02ecb7b0b591775b9107c7d3b..cad19f615c16c023f12fb345ea2270caafbab2be 100644
--- a/src/Pages/Contact.js
+++ b/src/Pages/Contact.js
@@ -23,158 +23,159 @@ import InputFormulario from "../Components/ContactForm.js";
import { Store } from '../Store';
const Secao1 = styled.div`
- width: 100%;
- background-color: ${props => props.contrast === "" ? "" : "black"};
- background-image: ${props => props.contrast === "" ? `url(${Banner1})` : ""};
- background-size: cover;
- background-position: bottom center;
- height: 250px;
- color: #fff;
- line-height: 1.1;
- text-align: center;
- padding-top: 120px;
-
- h2 {
- font-family: Pompiere, cursive;
- font-size: 52px;
+ width: 100%;
+ background-color: ${props => props.contrast === "" ? "" : "black"};
+ background-image: ${props => props.contrast === "" ? `url(${Banner1})` : ""};
+ background-size: cover;
+ background-position: bottom center;
+ height: 250px;
color: #fff;
- margin: 0;
- padding-left: 0;
- padding-right: 0;
- font-weight: 500;
- }
-
- h3 {
- margin-top: 20px;
- margin-bottom: 10px;
- font-family: Roboto, sans-serif;
- font-size: 30px;
- font-weight: lighter;
- }
+ line-height: 1.1;
+ text-align: center;
+ padding-top: 120px;
+
+ h2 {
+ font-family: Pompiere, cursive;
+ font-size: 52px;
+ color: #fff;
+ margin: 0;
+ padding-left: 0;
+ padding-right: 0;
+ font-weight: 500;
+ }
+
+ h3 {
+ margin-top: 20px;
+ margin-bottom: 10px;
+ font-family: Roboto, sans-serif;
+ font-size: 30px;
+ font-weight: lighter;
+ }
`;
const Secao2 = styled.div`
- height: 708px;
- background-color: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
- display: flex;
- justify-content: center;
- align-items: center;
+ height: 708px;
+ background-color: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
+ display: flex;
+ justify-content: center;
+ align-items: center;
`;
const Secao3 = styled.div`
- height: 127px;
- background-color: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
- color: ${props => props.contrast === "" ? "#666" : "white"};
- line-height: 1.42857143;
- font-size: 18px;
- text-align: center;
- padding-top: 70px;
-
- p {
- margin: 0 0 10px 0;
- }
+ height: 127px;
+ background-color: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ line-height: 1.42857143;
+ font-size: 18px;
+ text-align: center;
+ padding-top: 70px;
+
+ p {
+ margin: 0 0 10px 0;
+ }
`;
const Formulario = styled.div`
- background-color: ${props => props.contrast === "" ? "#fff" : "black"};
- box-shadow: ${props => props.contrast === "" ? "0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)" : "0 1px 3px rgba(255,255,255,.12),0 1px 2px rgba(255,255,255,.24)"};
- padding: 40px;
- height: 560px;
- width: 480px;
- color: ${props => props.contrast === "" ? "#666" : "white"};
-
- form .inputBlock {
- margin-block: 22px;
-
- }
-
- form .inputBlock label {
- font-size: 14px;
- font-weight: bold;
- display: block;
-
- }
-
- form .inputBlock input {
- width: 100%;
- height: 32px;
- font-size: 14px;
- border: 0;
- border-bottom: 1px solid #eee;
-
- }
-
- form .inputBlock.Message input {
- height: 131px;
- }
-
- form buttom[type=submit] {
- width: 100%;
- border: 0;
- margin-top: 30px;
- background: #7d40e7
- border-radius: 2px;
- padding: 15px 20px;
- font-size: 16px;
- font-weight: bold;
- color: #fff;
- cursor: pointer;
- transition: background 0.5s;
-
- }
-
- form buttom[type=submit]:hover {
- background: #6931ac
- }
-
-
- h2 {
- font-size: 24px;
- font-weight: lighter;
- margin-bottom: 50px;
- margin-top: 20px;
- text-align: center;
-
- }
+ background-color: ${props => props.contrast === "" ? "#fff" : "black"};
+ box-shadow: ${props => props.contrast === "" ? "0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)" : "0 1px 3px rgba(255,255,255,.12),0 1px 2px rgba(255,255,255,.24)"};
+ padding: 40px;
+ height: 560px;
+ width: 480px;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ border: ${props => props.contrast === "" ? "" : "1px solid white"};
+
+ form .inputBlock {
+ margin-block: 22px;
+
+ }
+
+ form .inputBlock label {
+ font-size: 14px;
+ font-weight: bold;
+ display: block;
+
+ }
+
+ form .inputBlock input {
+ width: 100%;
+ height: 32px;
+ font-size: 14px;
+ border: 0;
+ border-bottom: 1px solid #eee;
+
+ }
+
+ form .inputBlock.Message input {
+ height: 131px;
+ }
+
+ form buttom[type=submit] {
+ width: 100%;
+ border: 0;
+ margin-top: 30px;
+ background: #7d40e7
+ border-radius: 2px;
+ padding: 15px 20px;
+ font-size: 16px;
+ font-weight: bold;
+ color: #fff;
+ cursor: pointer;
+ transition: background 0.5s;
+
+ }
+
+ form buttom[type=submit]:hover {
+ background: #6931ac
+ }
+
+
+ h2 {
+ font-size: 24px;
+ font-weight: lighter;
+ margin-bottom: 50px;
+ margin-top: 20px;
+ text-align: center;
+
+ }
`;
function Contact(props) {
- const { state } = useContext(Store)
- useEffect(() => {
- window.scrollTo(0, 0)
- })
-
- return (
- <>
- <link
- href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto:300,400&display=swap"
- rel="stylesheet"
- />
- <Secao1 contrast={state.contrast}>
- <h2>CONTATO</h2>
- <h3>Quer enviar uma mensagem?</h3>
- </Secao1>
-
- <Secao2 contrast={state.contrast}>
- <Formulario noValidate autoComplete="off" contrast={state.contrast}>
- <h2>
- Entre em contato para enviar dúvidas,
- <br />
- sugestões ou críticas
- </h2>
- <InputFormulario contrast={state.contrast} />
- </Formulario>
- </Secao2>
-
- <Secao3 contrast={state.contrast}>
- <span>MEC - Ministério da Educação </span>
- <p>
- Endereço: Esplanada dos Ministérios Bloco L - Ed.Sede e Anexos. CEP:
- 70.047-900 - Brasília/DF. Telefone: 0800 616161
- </p>
- </Secao3>
- </>
- );
+ const { state } = useContext(Store)
+ useEffect(() => {
+ window.scrollTo(0, 0)
+ })
+
+ return (
+ <div>
+ <link
+ href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto:300,400&display=swap"
+ rel="stylesheet"
+ />
+ <Secao1 contrast={state.contrast}>
+ <h2>CONTATO</h2>
+ <h3>Quer enviar uma mensagem?</h3>
+ </Secao1>
+
+ <Secao2 contrast={state.contrast}>
+ <Formulario noValidate autoComplete="off" contrast={state.contrast}>
+ <h2>
+ Entre em contato para enviar dúvidas,
+ <br />
+ sugestões ou críticas
+ </h2>
+ <InputFormulario contrast={state.contrast} />
+ </Formulario>
+ </Secao2>
+
+ <Secao3 contrast={state.contrast}>
+ <span>MEC - Ministério da Educação </span>
+ <p>
+ Endereço: Esplanada dos Ministérios Bloco L - Ed.Sede e Anexos. CEP:
+ 70.047-900 - Brasília/DF. Telefone: 0800 616161
+ </p>
+ </Secao3>
+ </div>
+ );
}
export default Contact;
diff --git a/src/env.js b/src/env.js
index 95815e96e0a4b6d934c32704a85f04284e77d16e..7284c42754e5c679138196c2bae2a2f128779c2b 100644
--- a/src/env.js
+++ b/src/env.js
@@ -17,7 +17,7 @@ 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/>.*/
-var apiDomain = 'https://api.portalmec.c3sl.ufpr.br',
+var apiDomain = 'https://api.portalmectest.c3sl.ufpr.br',
apiVersion = 'v1',
apiUrl = apiDomain + '/' + apiVersion;