From 2fb204865661776f6d900d294143ff0d4de6b1f0 Mon Sep 17 00:00:00 2001
From: Luis Felipe Risch <lfr20@inf.ufpr.br>
Date: Fri, 23 Jul 2021 13:50:16 -0300
Subject: [PATCH] implementing acessibility
---
.../SearchEPCompCurriculum.js | 83 ++++++-------
.../SearchExpansionPanel/SearchEPIdiomas.js | 89 +++++++-------
.../SearchExpansionPanel/SearchEPTiposRec.js | 89 +++++++-------
.../SearchExpansionPanel.js | 110 ++++++++----------
.../SearchExpansionPanel/SesrchEPEtapasEns.js | 89 +++++++-------
src/Components/SearchPageComponents/Error.js | 25 ++--
.../SearchPageComponents/HeaderFilters.js | 95 +++++++++------
src/Pages/Search.js | 55 ++++-----
8 files changed, 310 insertions(+), 325 deletions(-)
diff --git a/src/Components/SearchExpansionPanel/SearchEPCompCurriculum.js b/src/Components/SearchExpansionPanel/SearchEPCompCurriculum.js
index 43941d03..ed4a026e 100644
--- a/src/Components/SearchExpansionPanel/SearchEPCompCurriculum.js
+++ b/src/Components/SearchExpansionPanel/SearchEPCompCurriculum.js
@@ -1,26 +1,34 @@
import React from "react";
-import { makeStyles } from "@material-ui/core/styles";
-import List from "@material-ui/core/List";
-import ListItem from "@material-ui/core/ListItem";
-import ListItemIcon from "@material-ui/core/ListItemIcon";
-import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
-import ListItemText from "@material-ui/core/ListItemText";
+import { withStyles } from '@material-ui/core/styles';
import Checkbox from "@material-ui/core/Checkbox";
-import IconButton from "@material-ui/core/IconButton";
+import { yellow, orange } from "@material-ui/core/colors";
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import FormGroup from '@material-ui/core/FormGroup';
-const useStyles = makeStyles(theme => ({
+const OrangeCheckBox = withStyles({
root: {
- width: "100%",
- maxWidth: 360,
- backgroundColor: theme.palette.background.paper,
- color: "#666"
- }
-}));
+ color: orange[400],
+ '&$checked': {
+ color: orange[600],
+ },
+ },
+ checked: {},
+})((props) => <Checkbox color="default" {...props} />);
-export default function SearchEPCompCurriculum({ onChange, curriculumComponents, setCurriculum }) {
- const classes = useStyles();
+const ContrastCheckBox = withStyles({
+ root: {
+ color: yellow[400],
+ '&$checked': {
+ color: yellow[600],
+ },
+ },
+ checked: {},
+})((props) => <Checkbox color="default" {...props} />);
+
+export default function SearchEPCompCurriculum({ curriculumComponents, setCurriculum, contrast }) {
- const handleToggle = (index) => () => {
+ const handleChange = (event) => {
+ const index = event.target.name;
const newCurriculumComponents = [...curriculumComponents];
newCurriculumComponents[index].isChecked = !newCurriculumComponents[index].isChecked
setCurriculum(newCurriculumComponents);
@@ -28,34 +36,17 @@ export default function SearchEPCompCurriculum({ onChange, curriculumComponents,
if (curriculumComponents)
return (
- <List className={classes.root}>
- {curriculumComponents.map((item, index) => {
- const labelId = `checkbox-list-label-${item.value}`;
-
- return (
- <ListItem
+ <FormGroup row>
+ {
+ curriculumComponents.map((item, index) => {
+ return <FormControlLabel
+ name={index}
key={item.exemplo}
- role={undefined}
- dense
- button
- onClick={handleToggle(index)}
- >
- <ListItemIcon>
- <Checkbox
- edge="start"
- checked={item.isChecked}
- tabIndex={-1}
- disableRipple
- inputProps={{ "aria-labelledby": labelId }}
- />
- </ListItemIcon>
- <ListItemText id={labelId} primary={item.exemplo} />
- <ListItemSecondaryAction>
- <IconButton edge="end" aria-label="comments"></IconButton>
- </ListItemSecondaryAction>
- </ListItem>
- );
- })}
- </List>
- );
+ control={contrast === "" ? <OrangeCheckBox checked={item.isChecked} onChange={handleChange} /> : <ContrastCheckBox checked={item.isChecked} onChange={handleChange} />}
+ label={<span style={contrast === "" ? {} : { color: "yellow", textDecoration: "underline" }}>{item.exemplo}</span>}
+ />
+ })
+ }
+ </FormGroup>
+ )
}
diff --git a/src/Components/SearchExpansionPanel/SearchEPIdiomas.js b/src/Components/SearchExpansionPanel/SearchEPIdiomas.js
index 06715e46..fcb1c65c 100644
--- a/src/Components/SearchExpansionPanel/SearchEPIdiomas.js
+++ b/src/Components/SearchExpansionPanel/SearchEPIdiomas.js
@@ -1,61 +1,52 @@
import React from "react";
-import { makeStyles } from "@material-ui/core/styles";
-import List from "@material-ui/core/List";
-import ListItem from "@material-ui/core/ListItem";
-import ListItemIcon from "@material-ui/core/ListItemIcon";
-import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
-import ListItemText from "@material-ui/core/ListItemText";
+import { withStyles } from '@material-ui/core/styles';
import Checkbox from "@material-ui/core/Checkbox";
-import IconButton from "@material-ui/core/IconButton";
+import { yellow, orange } from "@material-ui/core/colors";
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import FormGroup from '@material-ui/core/FormGroup';
-const useStyles = makeStyles(theme => ({
+const OrangeCheckBox = withStyles({
root: {
- width: "100%",
- maxWidth: 360,
- backgroundColor: theme.palette.background.paper,
- color: "#666"
- }
-}));
+ color: orange[400],
+ '&$checked': {
+ color: orange[600],
+ },
+ },
+ checked: {},
+})((props) => <Checkbox color="default" {...props} />);
-export default function SearchEPIdiomas({ languages, setLanguages }) {
- const classes = useStyles();
+const ContrastCheckBox = withStyles({
+ root: {
+ color: yellow[400],
+ '&$checked': {
+ color: yellow[600],
+ },
+ },
+ checked: {},
+})((props) => <Checkbox color="default" {...props} />);
+
+export default function SearchEPCompCurriculum({ languages, setLanguages, contrast }) {
- const handleToggle = (index) => () => {
- const newLanguages = [...languages];
- newLanguages[index].isChecked = !newLanguages[index].isChecked
- setLanguages(newLanguages);
+ const handleChange = (event) => {
+ const index = event.target.name;
+ const newCurriculumComponents = [...languages];
+ newCurriculumComponents[index].isChecked = !newCurriculumComponents[index].isChecked
+ setLanguages(newCurriculumComponents);
};
if (languages)
return (
- <List className={classes.root}>
- {languages.map((item, index) => {
- const labelId = `checkbox-list-label-${item.value}`;
-
- return (
- <ListItem
+ <FormGroup row>
+ {
+ languages.map((item, index) => {
+ return <FormControlLabel
+ name={index}
key={item.exemplo}
- role={undefined}
- dense
- button
- onClick={handleToggle(index)}
- >
- <ListItemIcon>
- <Checkbox
- edge="start"
- checked={item.isChecked}
- tabIndex={-1}
- disableRipple
- inputProps={{ "aria-labelledby": labelId }}
- />
- </ListItemIcon>
- <ListItemText id={labelId} primary={item.exemplo} />
- <ListItemSecondaryAction>
- <IconButton edge="end" aria-label="comments"></IconButton>
- </ListItemSecondaryAction>
- </ListItem>
- );
- })}
- </List>
- );
+ control={contrast === "" ? <OrangeCheckBox checked={item.isChecked} onChange={handleChange} /> : <ContrastCheckBox checked={item.isChecked} onChange={handleChange} />}
+ label={<span style={contrast === "" ? {} : { color: "yellow", textDecoration: "underline" }}>{item.exemplo}</span>}
+ />
+ })
+ }
+ </FormGroup>
+ )
}
diff --git a/src/Components/SearchExpansionPanel/SearchEPTiposRec.js b/src/Components/SearchExpansionPanel/SearchEPTiposRec.js
index 41b77adf..9aedc9a5 100644
--- a/src/Components/SearchExpansionPanel/SearchEPTiposRec.js
+++ b/src/Components/SearchExpansionPanel/SearchEPTiposRec.js
@@ -1,61 +1,52 @@
import React from "react";
-import { makeStyles } from "@material-ui/core/styles";
-import List from "@material-ui/core/List";
-import ListItem from "@material-ui/core/ListItem";
-import ListItemIcon from "@material-ui/core/ListItemIcon";
-import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
-import ListItemText from "@material-ui/core/ListItemText";
+import { withStyles } from '@material-ui/core/styles';
import Checkbox from "@material-ui/core/Checkbox";
-import IconButton from "@material-ui/core/IconButton";
+import { yellow, orange } from "@material-ui/core/colors";
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import FormGroup from '@material-ui/core/FormGroup';
-const useStyles = makeStyles(theme => ({
+const OrangeCheckBox = withStyles({
root: {
- width: "100%",
- maxWidth: 360,
- backgroundColor: theme.palette.background.paper,
- color: "#666"
- }
-}));
+ color: orange[400],
+ '&$checked': {
+ color: orange[600],
+ },
+ },
+ checked: {},
+})((props) => <Checkbox color="default" {...props} />);
-export default function SearchEPCompCurriculum({ onChange, typeOfResources, setTypeRes }) {
- const classes = useStyles();
+const ContrastCheckBox = withStyles({
+ root: {
+ color: yellow[400],
+ '&$checked': {
+ color: yellow[600],
+ },
+ },
+ checked: {},
+})((props) => <Checkbox color="default" {...props} />);
+
+export default function SearchEPCompCurriculum({ typeOfResources, setTypeRes, contrast }) {
- const handleToggle = (index) => () => {
- const newTypeOfRes = [...typeOfResources];
- newTypeOfRes[index].isChecked = !newTypeOfRes[index].isChecked
- setTypeRes(newTypeOfRes);
+ const handleChange = (event) => {
+ const index = event.target.name;
+ const newCurriculumComponents = [...typeOfResources];
+ newCurriculumComponents[index].isChecked = !newCurriculumComponents[index].isChecked
+ setTypeRes(newCurriculumComponents);
};
if (typeOfResources)
return (
- <List className={classes.root}>
- {typeOfResources.map((item, index) => {
- const labelId = `checkbox-list-label-${item.value}`;
-
- return (
- <ListItem
+ <FormGroup row>
+ {
+ typeOfResources.map((item, index) => {
+ return <FormControlLabel
+ name={index}
key={item.exemplo}
- role={undefined}
- dense
- button
- onClick={handleToggle(index)}
- >
- <ListItemIcon>
- <Checkbox
- edge="start"
- checked={item.isChecked}
- tabIndex={-1}
- disableRipple
- inputProps={{ "aria-labelledby": labelId }}
- />
- </ListItemIcon>
- <ListItemText id={labelId} primary={item.exemplo} />
- <ListItemSecondaryAction>
- <IconButton edge="end" aria-label="comments"></IconButton>
- </ListItemSecondaryAction>
- </ListItem>
- );
- })}
- </List>
- );
+ control={contrast === "" ? <OrangeCheckBox checked={item.isChecked} onChange={handleChange} /> : <ContrastCheckBox checked={item.isChecked} onChange={handleChange} />}
+ label={<span style={contrast === "" ? {} : { color: "yellow", textDecoration: "underline" }}>{item.exemplo}</span>}
+ />
+ })
+ }
+ </FormGroup>
+ )
}
diff --git a/src/Components/SearchExpansionPanel/SearchExpansionPanel.js b/src/Components/SearchExpansionPanel/SearchExpansionPanel.js
index 8df336aa..fb2be34b 100644
--- a/src/Components/SearchExpansionPanel/SearchExpansionPanel.js
+++ b/src/Components/SearchExpansionPanel/SearchExpansionPanel.js
@@ -10,8 +10,6 @@ import SearchEPTiposRec from "./SearchEPTiposRec";
import SearchEPEtapasEns from "./SesrchEPEtapasEns";
import SearchEPIdiomas from "./SearchEPIdiomas";
import { TextField } from "@material-ui/core";
-import Grid from '@material-ui/core/Grid';
-import CircularProgress from '@material-ui/core/CircularProgress';
import Paper from '@material-ui/core/Paper';
import styled from 'styled-components';
@@ -58,11 +56,6 @@ const ExpansionPanelSummary = withStyles({
expanded: {}
})(MuiExpansionPanelSummary);
-const TesteTypography = withStyles({
- root: {
- fontSize: "17px"
- }
-})(Typography);
const ExpansionPanelDetails = withStyles(theme => ({
root: {
@@ -100,73 +93,64 @@ export default function SearchExpansionPanel(props) {
}
return (
- <MainPaper square elevation={4}>
+ <MainPaper square elevation={4} contrast={props.contrast}>
<link
href="https://fonts.googleapis.com/css?family=Roboto:400,500&display=swap"
rel="stylesheet"
/>
-
<ExpansionPanel square>
<ExpansionPanelSummary
aria-controls="panel1d-content"
id="panel1d-header"
+ style={props.contrast === "" ? {} : { backgroundColor: "black" }}
>
- <Grid
- container
- direction="row"
- justify="space-between"
+ <Typography
+ style={props.contrast === "" ? {
+ fontSize: "18px",
+ textTransform: "uppercase",
+ fontWeight: "500",
+ } : {
+ fontSize: "18px",
+ textTransform: "uppercase",
+ fontWeight: "500",
+ color: "white"
+ }}
>
- <Grid item >
- <Typography
- style={{
- fontSize: "18px",
- textTransform: "uppercase",
- fontWeight: "500",
- }}
- >
- Filtros
- </Typography>
- </Grid>
- <Grid item>
- {
- props.onFiltering ? <CircularProgress size={24} color="secondary" /> : null
- }
- </Grid>
- </Grid>
+ Filtros
+ </Typography>
</ExpansionPanelSummary>
</ExpansionPanel>
<ExpansionPanel square>
- <ExpansionPanelSummary
- expandIcon={<ExpandMoreIcon />}
-
+ <ExpansionPanelSummary
+ expandIcon={<ExpandMoreIcon style={props.contrast === "" ? {} : { color: "white" }} />}
+ style={props.contrast === "" ? {} : { backgroundColor: "black" }}
aria-controls="panel2d-content"
id="panel2d-header"
>
- <TesteTypography>Componentes Curriculares</TesteTypography>
+ <Typography style={props.contrast === "" ? {} : { color: "white" }}>Componentes Curriculares</Typography>
</ExpansionPanelSummary>
- <ExpansionPanelDetails>
- <div>
- <SearchEPCompCurriculum
- onChange={props.onChange}
- curriculumComponents={props.curriculumComponents}
- setCurriculum={props.setCurriculum}
- />
- </div>
+ <ExpansionPanelDetails style={props.contrast === "" ? {} : { backgroundColor: "black" }}>
+ <SearchEPCompCurriculum
+ contrast={props.contrast}
+ curriculumComponents={props.curriculumComponents}
+ setCurriculum={props.setCurriculum}
+ />
</ExpansionPanelDetails>
</ExpansionPanel>
<ExpansionPanel square>
<ExpansionPanelSummary
- expandIcon={<ExpandMoreIcon />}
+ style={props.contrast === "" ? {} : { backgroundColor: "black" }}
+ expandIcon={<ExpandMoreIcon style={props.contrast === "" ? {} : { color: "white" }} />}
aria-controls="panel3d-content"
id="panel3d-header"
>
- <Typography>Tipos de Recurso</Typography>
+ <Typography style={props.contrast === "" ? {} : { color: "white" }}>Tipos de Recurso</Typography>
</ExpansionPanelSummary>
- <ExpansionPanelDetails>
- <SearchEPTiposRec
- onChange={props.onChange}
+ <ExpansionPanelDetails style={props.contrast === "" ? {} : { backgroundColor: "black" }}>
+ <SearchEPTiposRec
+ contrast={props.contrast}
typeOfResources={props.typeOfResources}
setTypeRes={props.setTypeRes}
/>
@@ -175,15 +159,16 @@ export default function SearchExpansionPanel(props) {
<ExpansionPanel square>
<ExpansionPanelSummary
+ style={props.contrast === "" ? {} : { backgroundColor: "black" }}
aria-controls="panel4d-content"
- expandIcon={<ExpandMoreIcon />}
+ expandIcon={<ExpandMoreIcon style={props.contrast === "" ? {} : { color: "white" }} />}
id="panel4d-header"
>
- <Typography>Etapas de Ensino</Typography>
+ <Typography style={props.contrast === "" ? {} : { color: "white" }}>Etapas de Ensino</Typography>
</ExpansionPanelSummary>
- <ExpansionPanelDetails>
- <SearchEPEtapasEns
- onChange={props.onChange}
+ <ExpansionPanelDetails style={props.contrast === "" ? {} : { backgroundColor: "black" }}>
+ <SearchEPEtapasEns
+ contrast={props.contrast}
teachingStage={props.teachingStage}
setTeachingStage={props.setTeachingStage}
/>
@@ -192,15 +177,16 @@ export default function SearchExpansionPanel(props) {
<ExpansionPanel square>
<ExpansionPanelSummary
+ style={props.contrast === "" ? {} : { backgroundColor: "black" }}
aria-controls="panel5d-content"
- expandIcon={<ExpandMoreIcon />}
+ expandIcon={<ExpandMoreIcon style={props.contrast === "" ? {} : { color: "white" }} />}
id="panel5d-header"
>
- <Typography>Idiomas</Typography>
+ <Typography style={props.contrast === "" ? {} : { color: "white" }}>Idiomas</Typography>
</ExpansionPanelSummary>
- <ExpansionPanelDetails>
- <SearchEPIdiomas
- onChange={props.onChange}
+ <ExpansionPanelDetails style={props.contrast === "" ? {} : { backgroundColor: "black" }}>
+ <SearchEPIdiomas
+ contrast={props.contrast}
languages={props.languages}
setLanguages={props.setLanguages}
/>
@@ -209,13 +195,14 @@ export default function SearchExpansionPanel(props) {
<ExpansionPanel square>
<ExpansionPanelSummary
+ style={props.contrast === "" ? {} : { backgroundColor: "black", borderBottom: "1px solid white" }}
aria-controls="panel6d-content"
- expandIcon={<ExpandMoreIcon />}
+ expandIcon={<ExpandMoreIcon style={props.contrast === "" ? {} : { color: "white" }} />}
id="panel6d-header"
>
- <Typography>Palavra-Chave</Typography>
+ <Typography style={props.contrast === "" ? {} : { color: "white" }}>Palavra-Chave</Typography>
</ExpansionPanelSummary>
- <ExpansionPanelDetails>
+ <ExpansionPanelDetails style={props.contrast === "" ? {} : { backgroundColor: "black" }}>
<TextField
label="Palavra chave + enter "
id="outlined-margin-dense"
@@ -232,12 +219,11 @@ export default function SearchExpansionPanel(props) {
}
const MainPaper = styled(Paper)`
- /* height: 150px; */
text-align: center;
- background-color: #fff;
margin-top: 5px;
margin-bottom: 30px;
color: #666;
+
.textInfo{
text-align: start;
}
diff --git a/src/Components/SearchExpansionPanel/SesrchEPEtapasEns.js b/src/Components/SearchExpansionPanel/SesrchEPEtapasEns.js
index 632009ae..e5c88bad 100644
--- a/src/Components/SearchExpansionPanel/SesrchEPEtapasEns.js
+++ b/src/Components/SearchExpansionPanel/SesrchEPEtapasEns.js
@@ -1,61 +1,52 @@
import React from "react";
-import { makeStyles } from "@material-ui/core/styles";
-import List from "@material-ui/core/List";
-import ListItem from "@material-ui/core/ListItem";
-import ListItemIcon from "@material-ui/core/ListItemIcon";
-import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
-import ListItemText from "@material-ui/core/ListItemText";
+import { withStyles } from '@material-ui/core/styles';
import Checkbox from "@material-ui/core/Checkbox";
-import IconButton from "@material-ui/core/IconButton";
+import { yellow, orange } from "@material-ui/core/colors";
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import FormGroup from '@material-ui/core/FormGroup';
-const useStyles = makeStyles(theme => ({
+const OrangeCheckBox = withStyles({
root: {
- width: "100%",
- maxWidth: 360,
- backgroundColor: theme.palette.background.paper,
- color: "#666"
- }
-}));
+ color: orange[400],
+ '&$checked': {
+ color: orange[600],
+ },
+ },
+ checked: {},
+})((props) => <Checkbox color="default" {...props} />);
-export default function SearchEPEtapasEns({ teachingStage, setTeachingStage }) {
- const classes = useStyles();
+const ContrastCheckBox = withStyles({
+ root: {
+ color: yellow[400],
+ '&$checked': {
+ color: yellow[600],
+ },
+ },
+ checked: {},
+})((props) => <Checkbox color="default" {...props} />);
+
+export default function SearchEPCompCurriculum({ teachingStage, setTeachingStage, contrast }) {
- const handleToggle = (index) => () => {
- const newTypeTeachingStage = [...teachingStage];
- newTypeTeachingStage[index].isChecked = !newTypeTeachingStage[index].isChecked
- setTeachingStage(newTypeTeachingStage);
+ const handleChange = (event) => {
+ const index = event.target.name;
+ const newCurriculumComponents = [...teachingStage];
+ newCurriculumComponents[index].isChecked = !newCurriculumComponents[index].isChecked
+ setTeachingStage(newCurriculumComponents);
};
if (teachingStage)
return (
- <List className={classes.root}>
- {teachingStage.map((item, index) => {
- const labelId = `checkbox-list-label-${item.value}`;
-
- return (
- <ListItem
+ <FormGroup row>
+ {
+ teachingStage.map((item, index) => {
+ return <FormControlLabel
+ name={index}
key={item.exemplo}
- role={undefined}
- dense
- button
- onClick={handleToggle(index)}
- >
- <ListItemIcon>
- <Checkbox
- edge="start"
- checked={item.isChecked}
- tabIndex={-1}
- disableRipple
- inputProps={{ "aria-labelledby": labelId }}
- />
- </ListItemIcon>
- <ListItemText id={labelId} primary={item.exemplo} />
- <ListItemSecondaryAction>
- <IconButton edge="end" aria-label="comments"></IconButton>
- </ListItemSecondaryAction>
- </ListItem>
- );
- })}
- </List>
- );
+ control={contrast === "" ? <OrangeCheckBox checked={item.isChecked} onChange={handleChange} /> : <ContrastCheckBox checked={item.isChecked} onChange={handleChange} />}
+ label={<span style={contrast === "" ? {} : { color: "yellow", textDecoration: "underline" }}>{item.exemplo}</span>}
+ />
+ })
+ }
+ </FormGroup>
+ )
}
diff --git a/src/Components/SearchPageComponents/Error.js b/src/Components/SearchPageComponents/Error.js
index 7cb9d98c..523bae93 100644
--- a/src/Components/SearchPageComponents/Error.js
+++ b/src/Components/SearchPageComponents/Error.js
@@ -2,29 +2,32 @@ import React from 'react';
import styled from 'styled-components';
import Paper from '@material-ui/core/Paper';
-export default function Error() {
- return <ResourcePaper square elevation={4}>
- <Title>
- Houve um erro durante a obtenção de dados :(
- </Title>
+export default function Error({ contrast }) {
+ return <ResourcePaper square elevation={4} contrast={contrast}>
+ <div className="div">
+ <Title contrast={contrast}>
+ Houve um erro durante a obtenção de dados :(
+ </Title>
+ </div>
</ResourcePaper>
}
const ResourcePaper = styled(Paper)`
- /* height: 150px; */
+ border: ${props => props.contrast === "" ? 0 : "1px solid white"};
text-align: center;
- background-color: #fff;
- margin-top: 5px;
- margin-bottom: 30px;
- padding: 0.5em 1em;
color: #666;
width: 100%;
+
+ .div{
+ padding: 0.5em 1em;
+ background: ${props => props.contrast === "" ? "" : "black"};
+ }
`;
const Title = styled.h4`
text-transform: uppercase;
font-weight: 500;
text-align: left;
- color: #666;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
text-align: center;
`
\ No newline at end of file
diff --git a/src/Components/SearchPageComponents/HeaderFilters.js b/src/Components/SearchPageComponents/HeaderFilters.js
index 21bcc78c..b92c85c1 100644
--- a/src/Components/SearchPageComponents/HeaderFilters.js
+++ b/src/Components/SearchPageComponents/HeaderFilters.js
@@ -5,21 +5,22 @@ import Grid from '@material-ui/core/Grid';
import TextField from '@material-ui/core/TextField';
import MenuItem from '@material-ui/core/MenuItem';
-export default function HeaderFilters({ options, orders, currOption, currOrder, handleChangeOption, handleChangeOrder }) {
+export default function HeaderFilters({ options, contrast, orders, currOption, currOrder, handleChangeOption, handleChangeOrder }) {
if (currOption !== 'User')
return (
- <FiltersPaper elevation={4} square>
- <Grid container direction='row' spacing={2} alignItems='center'>
+ <FiltersPaper contrast={contrast} elevation={4} square>
+ <Grid className="gridStyle" container direction='row' alignItems='center'>
<Grid item xs={12} sm={6}>
<Grid container alignItems='center'>
<Grid item xs={12} md={2}>
- <Label>
+ <Label contrast={contrast}>
Buscar por:
- </Label>
+ </Label>
</Grid>
<Grid item xs={12} md={10}>
- <TextField
+ <StyledTextField
+ contrast={contrast}
select
fullWidth
value={currOption}
@@ -27,17 +28,18 @@ export default function HeaderFilters({ options, orders, currOption, currOrder,
variant="outlined"
>
{options.map((option) => (
- <MenuItem
+ <StyledMenuItem
+ contrast={contrast}
key={option.value}
value={option.name}
name={option.value}
>
- <span style={{ color: option.color }}>
+ <span style={currOption === option.name ? { color: option.color, textDecoration: "none", fontWeight: "500" } : { color: option.color, textDecoration: "underline", fontWeight: "lighter" }}>
{option.value}
</span>
- </MenuItem>
+ </StyledMenuItem>
))}
- </TextField>
+ </StyledTextField>
</Grid>
</Grid>
</Grid>
@@ -45,12 +47,13 @@ export default function HeaderFilters({ options, orders, currOption, currOrder,
<Grid item xs={12} sm={6}>
<Grid container alignItems='center'>
<Grid item xs={12} md={2}>
- <Label>
+ <Label contrast={contrast}>
Ordenar por:
- </Label>
+ </Label>
</Grid>
<Grid item xs={12} md={10}>
- <TextField
+ <StyledTextField
+ contrast={contrast}
select
fullWidth
value={currOrder}
@@ -58,34 +61,39 @@ export default function HeaderFilters({ options, orders, currOption, currOrder,
variant="outlined"
>
{orders.map((option) => (
- <MenuItem
+ <StyledMenuItem
+ contrast={contrast}
+ color={option.color}
key={option.value}
value={option.name}
name={option.value}
>
- {option.value}
- </MenuItem>
+ <span style={currOrder === option.name ? { color: option.color, textDecoration: "none", fontWeight: "500" } : { color: option.color, textDecoration: "underline", fontWeight: "lighter" }}>
+ {option.value}
+ </span>
+ </StyledMenuItem>
))}
- </TextField>
+ </StyledTextField>
</Grid>
</Grid>
</Grid>
- </Grid>
- </FiltersPaper>
+ </Grid >
+ </FiltersPaper >
)
else
return (
- <FiltersPaper elevation={4} square>
- <Grid container direction='row' alignItems='center'>
+ <FiltersPaper contrast={contrast} elevation={4} square>
+ <Grid className="gridStyle" container direction='row' alignItems='center'>
<Grid item xs={12}>
<Grid container alignItems='center'>
<Grid item xs={12} md={2}>
- <Label>
+ <Label contrast={contrast}>
Buscar por:
- </Label>
+ </Label>
</Grid>
<Grid item xs={12} md={10}>
- <TextField
+ <StyledTextField
+ contrast={contrast}
select
fullWidth
value={currOption}
@@ -93,40 +101,61 @@ export default function HeaderFilters({ options, orders, currOption, currOrder,
variant="outlined"
>
{options.map((option) => (
- <MenuItem
+ <StyledMenuItem
+ contrast={contrast}
+ color={option.color}
key={option.value}
value={option.name}
name={option.value}
>
- <span style={{ color: option.color }}>
+ <span style={currOption === option.name ? { color: option.color, textDecoration: "none", fontWeight: "500" } : { color: option.color, textDecoration: "underline", fontWeight: "lighter" }}>
{option.value}
</span>
- </MenuItem>
+ </StyledMenuItem>
))}
- </TextField>
+ </StyledTextField>
</Grid>
</Grid>
</Grid>
</Grid>
- </FiltersPaper>
+ </FiltersPaper >
)
}
const Label = styled.p`
text-align: center;
font-weight: 600;
+ color: ${props => props.contrast === "" ? "" : "white"};
`
+const StyledTextField = styled(TextField)`
+.MuiOutlinedInput-root {
+ &.Mui-focused fieldset {
+ border-color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ }
+ fieldset {
+ border-color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
+ }
+`
+
+const StyledMenuItem = styled(MenuItem)`
+ background: ${props => props.contrast === "" ? "" : "black !important"};
+`
const FiltersPaper = styled(Paper)`
- /* height: 150px; */
text-align: center;
- background-color: #fff;
margin-top: 5px;
margin-bottom: 30px;
- padding: 0.5em 1em;
- color: #666;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ border: ${props => props.contrast === "" ? 0 : "1px solid white"};
+
.textInfo{
text-align: start;
}
+
+ .gridStyle{
+ padding: 0.5em 1em;
+ background: ${props => props.contrast === "" ? "#fff" : "black"};
+ }
`;
\ No newline at end of file
diff --git a/src/Pages/Search.js b/src/Pages/Search.js
index a814a341..ba0a437b 100644
--- a/src/Pages/Search.js
+++ b/src/Pages/Search.js
@@ -81,18 +81,18 @@ export default function Search() {
const [totalUsers, setTotalUsers] = useState(0);
const options = [
- { value: 'Recursos', name: 'LearningObject', color: '#ff7f00' },
- { value: 'Coleções', name: 'Collection', color: '#673ab7' },
- { value: 'Usuários', name: 'User', color: '#00bcd4' },
+ { value: 'Recursos', name: 'LearningObject', color: state.contrast === "" ? '#ff7f00' : "yellow" },
+ { value: 'Coleções', name: 'Collection', color: state.contrast === "" ? '#673ab7' : "yellow" },
+ { value: 'Usuários', name: 'User', color: state.contrast === "" ? '#00bcd4' : "yellow" },
];
const orders = [
- { value: 'Mais Estrelas', name: 'review_average' },
- { value: 'Mais Relevante', name: 'score' },
- { value: 'Mais Baixados', name: 'downloads' },
- { value: 'Mais Favoritados', name: 'likes' },
- { value: 'Mais Recentes', name: 'publicationdesc' },
- { value: 'Ordem Alfabética', name: 'title' },
+ { value: 'Mais Estrelas', name: 'review_average', color: state.contrast === "" ? '#666' : "yellow" },
+ { value: 'Mais Relevante', name: 'score', color: state.contrast === "" ? '#666' : "yellow" },
+ { value: 'Mais Baixados', name: 'downloads', color: state.contrast === "" ? '#666' : "yellow" },
+ { value: 'Mais Favoritados', name: 'likes', color: state.contrast === "" ? '#666' : "yellow" },
+ { value: 'Mais Recentes', name: 'publicationdesc', color: state.contrast === "" ? '#666' : "yellow" },
+ { value: 'Ordem Alfabética', name: 'title', color: state.contrast === "" ? '#666' : "yellow" },
];
function handleSnackInfo(info) {
@@ -428,24 +428,26 @@ export default function Search() {
if (error)
return (
- <MainPageError>
- <Snackbar
- open={snackInfo.open}
- autoHideDuration={6000}
- onClose={handleCloseSnack}
- anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
- >
- <Alert onClose={handleCloseSnack} severity={snackInfo.severity}>
- {snackInfo.text}
- </Alert>
- </Snackbar>
- <Error />
- </MainPageError>
+ <div style={state.contrast === "" ? {} : { backgroundColor: "black" }}>
+ <MainPageError>
+ <Snackbar
+ open={snackInfo.open}
+ autoHideDuration={6000}
+ onClose={handleCloseSnack}
+ anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+ >
+ <Alert onClose={handleCloseSnack} severity={snackInfo.severity}>
+ {snackInfo.text}
+ </Alert>
+ </Snackbar>
+ <Error contrast={state.contrast} />
+ </MainPageError>
+ </div>
)
else
return (
<div style={state.contrast === "" ? {} : { backgroundColor: "black" }}>
- <MainPage contrast={state.contrast}>
+ <MainPage>
<Snackbar
open={snackInfo.open}
autoHideDuration={6000}
@@ -473,6 +475,7 @@ export default function Search() {
currOption === 'LearningObject' &&
<Fragment>
<SearchExpansionPanel
+ contrast={state.contrast}
setTag={(tag) => setTag(tag)}
curriculumComponents={curriculumComponents}
setCurriculum={(array) => { setCurriculumComponents(array) }}
@@ -535,9 +538,9 @@ const MainPage = styled.div`
width: 90%;
margin: 0 auto;
`
-const MainPageError = styled.div`
- width: 90%;
- margin: 1em auto;
+const MainPageError = styled.div`
+ width: 90%;
+ margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
--
GitLab