From 50843a67686fa9a117ba5ad23843391d1c8e7e27 Mon Sep 17 00:00:00 2001
From: Luis Felipe Risch <lfr20@inf.ufpr.br>
Date: Mon, 26 Jul 2021 11:50:30 -0300
Subject: [PATCH] implementing acessibility
---
src/Components/Header.js | 2 +-
src/Components/MenuBar.js | 5 +-
src/Components/MenuBarMobile.js | 17 +-
src/Components/MobileDrawerMenu.js | 54 ++---
.../SearchExpansionPanel.js | 26 ++-
.../CollectionTemplate.js | 156 +++++++------
.../SearchPageComponents/FilterSummary.js | 216 ++++++++++--------
.../SearchPageComponents/ResourceTemplate.js | 154 +++++++------
.../SearchPageComponents/UserTemplate.js | 142 ++++++------
src/Pages/AboutPage.js | 2 +-
src/Pages/ResourcePage.js | 22 +-
src/Pages/Search.js | 4 +
12 files changed, 455 insertions(+), 345 deletions(-)
diff --git a/src/Components/Header.js b/src/Components/Header.js
index 7b1382ab..8f02c6c5 100644
--- a/src/Components/Header.js
+++ b/src/Components/Header.js
@@ -144,7 +144,7 @@ export default function Header(props) {
:
(
<React.Fragment>
- <MenuBarMobile openSearchBar={handleClickSearch} openSignUp={handleSignUp} openLogin={handleLogin} />
+ <MenuBarMobile contrast={state.contrast} openSearchBar={handleClickSearch} openSignUp={handleSignUp} openLogin={handleLogin} />
{
state.searchOpen &&
<SearchBar />
diff --git a/src/Components/MenuBar.js b/src/Components/MenuBar.js
index a5adb922..7a2ceb13 100644
--- a/src/Components/MenuBar.js
+++ b/src/Components/MenuBar.js
@@ -44,6 +44,8 @@ export const ButtonStyled = styled(Button)`
text-transform: capitalize !important;
margin : 0 8px !important;
font-weight : normal !important;
+ color: ${props => props.contrast === "" ? "#666 !important" : "yellow !important"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline !important"};
`
const ButtonPublicarRecurso = styled(Button)`
@@ -57,8 +59,7 @@ const ButtonPublicarRecurso = styled(Button)`
font-stretch : expanded;
max-width: 200 !important;
:hover {
- background-color: ${(props) =>
- props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
+ background-color: ${(props) => props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
}
.MuiSvgIcon-root {
vertical-align : middle !important;
diff --git a/src/Components/MenuBarMobile.js b/src/Components/MenuBarMobile.js
index 0e263606..0f3f794e 100644
--- a/src/Components/MenuBarMobile.js
+++ b/src/Components/MenuBarMobile.js
@@ -27,7 +27,6 @@ import IconSearch from '@material-ui/icons/Search'
export default function MenuBarMobile(props) {
-
const [drawerOpen, setDrawerStatus] = React.useState(false);
@@ -40,12 +39,15 @@ export default function MenuBarMobile(props) {
return (
<>
- <MobileDrawerMenu anchor={'left'} open={drawerOpen}
+ <MobileDrawerMenu
+ contrast={props.contrast}
+ anchor={'left'}
+ open={drawerOpen}
onClose={toggleDrawer(false)}
openSignUp={props.openSignUp} openLogin={props.openLogin}
/>
- <OuterDiv>
- <Button style={{ color: "#00bcd4" }} onClick={toggleDrawer(true)}>
+ <OuterDiv contrast={props.contrast}>
+ <Button style={props.contrast === "" ? { color: "#00bcd4" } : { color: "white " }} onClick={toggleDrawer(true)}>
<MenuIcon className="icon" />
</Button>
<DrawerButtonDiv>
@@ -53,8 +55,8 @@ export default function MenuBarMobile(props) {
<img src={logo} alt="logo" style={{ border: "0", verticalAlign: "middle" }} />
</Link>
</DrawerButtonDiv>
- <Button style={{ color: "#00bcd4", position: "absolute", right: 0}} onClick={props.openSearchBar}>
- <IconSearchStyled/>
+ <Button style={{ position: "absolute", right: 0 }} onClick={props.openSearchBar}>
+ <IconSearchStyled style={props.contrast === "" ? { color: "#00bcd4" } : { color: "white " }} />
</Button>
</OuterDiv>
</>
@@ -64,11 +66,12 @@ export default function MenuBarMobile(props) {
const OuterDiv = styled.div`
height : 48px;
width : 100%;
- ${'' /* position : relative; */}
+ background: ${props => props.contrast === "" ? "" : "black"};
display : flex;
direction : row;
align-items : center;
+
img {
height : 38px;
overflow : hidden;
diff --git a/src/Components/MobileDrawerMenu.js b/src/Components/MobileDrawerMenu.js
index f99498f2..938acffd 100644
--- a/src/Components/MobileDrawerMenu.js
+++ b/src/Components/MobileDrawerMenu.js
@@ -58,7 +58,7 @@ export default function MobileDrawerMenu(props) {
canUserAdmin = true
index++
}
-
+
if (canUserAdmin)
minhaArea.push({
name: "Administrador",
@@ -117,7 +117,7 @@ export default function MobileDrawerMenu(props) {
}
return (
- <StyledDrawer anchor={props.anchor} open={props.open} onClose={props.onClose}>
+ <StyledDrawer contrast={state.contrast} anchor={props.anchor} open={props.open} onClose={props.onClose}>
<MenuBody>
{/*Renders menuSobre array options*/}
{
@@ -135,20 +135,18 @@ export default function MobileDrawerMenu(props) {
{
/*If user is logged in, render user actions menu; else render log in/sign in buttons*/
state.userIsLoggedIn ?
- (
+ (
<>
<div style={{ display: "flex", justifyContent: "left", marginBottom: "10px" }}>
<Link to="/termos-publicar-recurso">
- <ButtonPublicarRecurso>
+ <ButtonPublicarRecurso contrast={props.contrast}>
<CloudUploadIcon style={{ color: "white", marginRight: "10px" }} />
- <span style={{ color: "white", textAlign: "center", alignSelf: "center", fontWeight: "500" }} >
- PUBLICAR RECURSO
- </span>
+ PUBLICAR RECURSO
</ButtonPublicarRecurso>
</Link>
</div>
- <div style={{ borderTop: "1px solid #e5e5e5", display: "flex", flexDirection: "column", marginTop: "10px", paddingTop: "10px", color: "#666", paddingBottom: "10px" }}>
- <MyArea>
+ <div style={{ borderTop: "1px solid #e5e5e5", display: "flex", flexDirection: "column", marginTop: "10px", paddingTop: "10px", color: "#666", paddingBottom: "10px" }}>
+ <MyArea contrast={props.contrast}>
<div className="user-avatar">
<img alt="user-avatar"
src={getUserAvatar()}
@@ -177,22 +175,22 @@ export default function MobileDrawerMenu(props) {
(
<React.Fragment>
<div style={{ display: "flex", justifyContent: "center", marginTop: "10px" }}>
- <ButtonPublicarRecurso onClick={props.openLogin}>
+ <ButtonPublicarRecurso contrast={props.contrast} onClick={props.openLogin}>
PUBLICAR RECURSO?
</ButtonPublicarRecurso>
</div>
<div style={{ display: "flex", flexDirection: "row", margin: "10px 0", justifyContent: "center" }}>
<div style={{ borderRight: "1px solid #e5e5e5" }}>
- <ButtonStyled onClick={props.openLogin}>
- <ExitToAppIcon style={{ color: "#00bcd4" }} />Entrar
- </ButtonStyled>
+ <ButtonStyled onClick={props.openLogin} contrast={props.contrast}>
+ <ExitToAppIcon style={props.contrast === "" ? { color: "#00bcd4" } : { color: "white " }} />Entrar
+ </ButtonStyled>
</div>
<div>
- <ButtonStyled onClick={props.openSignUp}>
- Cadastre-<span style={{textTransform: 'lowercase'}}>se</span>
- </ButtonStyled>
+ <ButtonStyled contrast={props.contrast} onClick={props.openSignUp}>
+ Cadastre-<span style={{ textTransform: 'lowercase' }}>se</span>
+ </ButtonStyled>
</div>
</div>
</React.Fragment>
@@ -223,7 +221,7 @@ const MyArea = styled.div`
.text {
font-size : 16px;
- color : #666;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
align-self : center;
}
@@ -246,18 +244,22 @@ const MyArea = styled.div`
const ButtonPublicarRecurso = styled(Button)`
font-weight : 500 !important;
- border : 1.5px #666 solid !important;
- background-color : #ff7f00 !important;
- color: #666;
+ background-color: ${props => props.contrast === "" ? "#ff7f00 !important" : "black !important"};
+ color: ${props => props.contrast === "" ? "white !important" : "yellow !important"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline !important"};
+ border: ${props => props.contrast === "" ? "" : "1px solid white !important"};
box-shadow: none;
margin : 0 8px !important;
padding : 6px 25px !important;
-
+ :hover{
+ background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
+ }
`
const StyledDrawer = styled(Drawer)`
.MuiPaper-root {
- width : 65% !important;
+ width: 40%;
+ background-color: ${props => props.contrast === "" ? "#fff" : "black"};
}
.menu-buttons {
@@ -266,13 +268,13 @@ const StyledDrawer = styled(Drawer)`
font-weight : 500;
cursor : pointer;
outline : 0;
- color : #666 !important;
- text-decoration : none !important;
+ color: ${props => props.contrast === "" ? "#666 !important" : "yellow !important"};
+ text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"};
background-color : transparent;
font-family : 'Roboto', sans serif;
.MuiSvgIcon-root {
- color : #a5a5a5 !important;
+ color: ${props => props.contrast === "" ? "#a5a5a5 !important" : "white !important"};
margin-right : 20px;
vertical-align : middle !important;
font-weight : normal !important;
@@ -290,7 +292,7 @@ const StyledDrawer = styled(Drawer)`
.selected {
color : #fff !important;
- background-color : #00bcd4;
+ background-color: ${props => props.contrast === "" ? "#00bcd4" : "rgba(255,255,0,0.24)"};
.MuiSvgIcon-root {
color : #fff !important;
}
diff --git a/src/Components/SearchExpansionPanel/SearchExpansionPanel.js b/src/Components/SearchExpansionPanel/SearchExpansionPanel.js
index fb2be34b..e0d88b80 100644
--- a/src/Components/SearchExpansionPanel/SearchExpansionPanel.js
+++ b/src/Components/SearchExpansionPanel/SearchExpansionPanel.js
@@ -203,7 +203,8 @@ export default function SearchExpansionPanel(props) {
<Typography style={props.contrast === "" ? {} : { color: "white" }}>Palavra-Chave</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails style={props.contrast === "" ? {} : { backgroundColor: "black" }}>
- <TextField
+ <StyledTextField
+ contrast={props.contrast}
label="Palavra chave + enter "
id="outlined-margin-dense"
variant="outlined"
@@ -218,6 +219,29 @@ export default function SearchExpansionPanel(props) {
);
}
+const StyledTextField = styled(TextField)`
+ .MuiOutlinedInput-root {
+ &.Mui-focused fieldset {
+ border-color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ }
+ fieldset {
+ border-color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
+ }
+
+ label{
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
+
+ label.Mui-focused {
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ }
+
+ label.Mui-focused.Mui-error {
+ color : red;
+ }
+`
+
const MainPaper = styled(Paper)`
text-align: center;
margin-top: 5px;
diff --git a/src/Components/SearchPageComponents/CollectionTemplate.js b/src/Components/SearchPageComponents/CollectionTemplate.js
index c3bcb3ee..923af661 100644
--- a/src/Components/SearchPageComponents/CollectionTemplate.js
+++ b/src/Components/SearchPageComponents/CollectionTemplate.js
@@ -9,7 +9,7 @@ import IconButton from '@material-ui/core/IconButton';
import ArrowBackIcon from '@material-ui/icons/ArrowBack';
import ArrowForwardIcon from '@material-ui/icons/ArrowForward';
-export default function ResourceTemplate({ isLoading, resources, totalResources, currPage, handlePreviousPage, handleNextPage }) {
+export default function ResourceTemplate({ isLoading, resources, totalResources, currPage, handlePreviousPage, handleNextPage, contrast }) {
const topRef = React.useRef();
const totalPages = parseInt(totalResources) === 0 ? 0 : Math.ceil(totalResources / 12) - 1; //Dividing by 12 because i want to cath total pages, and results per page is 12
@@ -18,72 +18,77 @@ export default function ResourceTemplate({ isLoading, resources, totalResources,
}, [isLoading])
return (
- <ResourcePaper elevation={4} square>
+ <ResourcePaper elevation={4} square contrast={contrast}>
<div ref={topRef} />
- <Title>
- Coleções encontradas ({totalResources})
- </Title>
- {
- isLoading ?
- <LoadingSpinner text='Carregando Coleções...' />
- :
- <Grid container justify='center' alignItems='center' spacing={3}>
- {
- resources.length >= 1 ?
- resources.map((card) => {
- return <Grid item key={new Date().toISOString() + card.id} >
- <CollectionCardFunction
- name={card.name}
- tags={card.tags}
- rating={card.review_average}
- id={card.id}
- author={card.owner ? card.owner.name : ""}
- description={card.description}
- thumbnails={card.items_thumbnails}
- avatar={card.owner ? card.owner.avatar : ""}
- likeCount={card.likes_count}
- followed={card.followed}
- liked={card.liked}
- collections={card.collection_items}
- authorID={card.owner.id}
- />
- </Grid>
- })
- :
- <NoContentDiv>
- <h3>
- Desculpe, não há dados nessa página.
- </h3>
- <img src={noCollections} alt='No cards' />
- </NoContentDiv>
- }
+ <div className="main">
+ <Title contrast={contrast}>
+ Coleções encontradas ({totalResources})
+ </Title>
+ {
+ isLoading ?
+ <LoadingSpinner contrast={contrast} text='Carregando Coleções...' />
+ :
+ <Grid container justify='center' alignItems='center' spacing={3}>
+ {
+ resources.length >= 1 ?
+ resources.map((card) => {
+ return <Grid item key={new Date().toISOString() + card.id} >
+ <CollectionCardFunction
+ name={card.name}
+ tags={card.tags}
+ rating={card.review_average}
+ id={card.id}
+ author={card.owner ? card.owner.name : ""}
+ description={card.description}
+ thumbnails={card.items_thumbnails}
+ avatar={card.owner ? card.owner.avatar : ""}
+ likeCount={card.likes_count}
+ followed={card.followed}
+ liked={card.liked}
+ collections={card.collection_items}
+ authorID={card.owner.id}
+ />
+ </Grid>
+ })
+ :
+ <NoContentDiv contrast={contrast}>
+ <h3>
+ Desculpe, não há dados nessa página.
+ </h3>
+ <img src={noCollections} alt='No cards' />
+ </NoContentDiv>
+ }
+ </Grid >
+ }
+ {
+ !isLoading &&
+ <Grid container direction='row' alignItems='center' justify='center' spacing={3}>
+ <Grid item>
+ <StyledIconButton contrast={contrast} elevation={4} disabled={currPage === 0}>
+ <IconButton onClick={handlePreviousPage} disabled={currPage === 0}>
+ <ArrowBackIcon className='icon' />
+ </IconButton>
+ </StyledIconButton>
+ </Grid>
+ <Grid item>
+ <ActualPage contrast={contrast}>
+ {currPage}
+ </ActualPage>
+ <TotalPages contrast={contrast}>
+ ...{totalPages}
+ </TotalPages>
+ </Grid>
+ <Grid item>
+ <StyledIconButton contrast={contrast} elevation={4} disabled={currPage === totalPages}>
+ <IconButton onClick={handleNextPage} disabled={currPage === totalPages}>
+ <ArrowForwardIcon className='icon' />
+ </IconButton>
+ </StyledIconButton>
+ </Grid>
</Grid>
- }
- {
- !isLoading &&
- <Grid container direction='row' alignItems='center' justify='center' spacing={3}>
- <Grid item>
- <StyledIconButton elevation={4} disabled={currPage === 0}>
- <IconButton onClick={handlePreviousPage} disabled={currPage === 0}>
- <ArrowBackIcon className='icon' />
- </IconButton>
- </StyledIconButton>
- </Grid>
- <Grid item>
- <ActualPage>
- {currPage}
- </ActualPage>...{totalPages}
- </Grid>
- <Grid item>
- <StyledIconButton elevation={4} disabled={currPage === totalPages}>
- <IconButton onClick={handleNextPage} disabled={currPage === totalPages}>
- <ArrowForwardIcon className='icon' />
- </IconButton>
- </StyledIconButton>
- </Grid>
- </Grid>
- }
- </ResourcePaper>
+ }
+ </div >
+ </ResourcePaper >
)
};
@@ -91,20 +96,23 @@ const Title = styled.h4`
text-transform: uppercase;
font-weight: 500;
text-align: left;
- color: #673ab7;
+ color: ${props => props.contrast === "" ? "#673ab7" : "white"};
`
const NoContentDiv = styled.div`
>h3{
- color: #673ab7;
+ color: ${props => props.contrast === "" ? "#673ab7" : "white"};
text-align: center;
}
`
const ActualPage = styled.span`
- color: #673ab7;
+ color: ${props => props.contrast === "" ? "#673ab7" : "yellow"};
+`
+const TotalPages = styled.span`
+ color: ${props => props.contrast === "" ? "#666" : "white"};
`
const StyledIconButton = styled(Paper)`
border-radius: 50% !important;
- background-color: ${props => props.disabled ? "#666" : "#673ab7"} !important;
+ background-color: ${props => props.disabled ? "#666" : props.contrast === "" ? "#673ab7" : "yellow"} !important;
.icon{
color: ${props => props.disabled ? "#d4d4d4" : "white"};
}
@@ -113,11 +121,15 @@ const StyledIconButton = styled(Paper)`
const ResourcePaper = styled(Paper)`
/* height: 150px; */
text-align: center;
- background-color: #fff;
margin-top: 5px;
margin-bottom: 30px;
- padding: 0.5em 1em;
- color: #666;
+ border: ${props => props.contrast === "" ? 0 : "1px solid white"};
+
+ .main{
+ background-color: ${props => props.contrast === "" ? "#fff" : "black"};
+ padding: 0.5em 1em;
+ }
+
.textInfo{
text-align: start;
}
diff --git a/src/Components/SearchPageComponents/FilterSummary.js b/src/Components/SearchPageComponents/FilterSummary.js
index 9cc1a9ae..0feec492 100644
--- a/src/Components/SearchPageComponents/FilterSummary.js
+++ b/src/Components/SearchPageComponents/FilterSummary.js
@@ -3,128 +3,164 @@ import styled from 'styled-components';
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';
import Chip from '@material-ui/core/Chip';
-import Button from "@material-ui/core/Button";
export default function FilterSummary
- ({ curriculumComponents, typeOfResources, languages, teachingStage, tag, onButtonClicked }) {
+ ({ curriculumComponents, typeOfResources, languages, teachingStage, tag, onButtonClicked, contrast }) {
return (
- <FilterSummaryPaper square elevation={4}>
- <h3 className="title">
- Resumo dos filtros selecionados
- </h3>
- <Grid container direction='column' spacing={2}>
- <Grid item>
- <Grid container direction='row' spacing={1} alignItems='center'>
- <Grid item>
- Componentes curriculares:
- </Grid>
- <Grid item>
- {
- curriculumComponents.map((item) => {
- return (
- item.isChecked &&
- <StyledChip key={new Date().toISOString() + item.value} size="small" label={item.exemplo} />
- );
+ <FilterSummaryPaper square elevation={4} contrast={contrast}>
+ <div className="main">
+ <h3 className="title">
+ Resumo dos filtros selecionados
+ </h3>
+ <Grid container direction='column' spacing={2}>
+ <Grid item>
+ <Grid container direction='row' spacing={1} alignItems='center'>
+ <Grid item className="subtitle">
+ Componentes curriculares:
+ </Grid>
+ <Grid item>
+ {
+ curriculumComponents.map((item) => {
+ return (
+ item.isChecked &&
+ <StyledChip contrast={contrast} key={new Date().toISOString() + item.value} size="small" label={item.exemplo} />
+ );
- })
- }
+ })
+ }
+ </Grid>
</Grid>
</Grid>
- </Grid>
- <Grid item>
- <Grid container direction='row' spacing={1} alignItems='center'>
- <Grid item>
- Tipos de recursos:
- </Grid>
- <Grid item>
- {
- typeOfResources.map((item) => {
- return (
- item.isChecked &&
- <StyledChip key={new Date().toISOString() + item.value} size="small" label={item.exemplo} />
- );
- })
- }
+ <Grid item>
+ <Grid container direction='row' spacing={1} alignItems='center'>
+ <Grid item className="subtitle">
+ Tipos de recursos:
+ </Grid>
+ <Grid item>
+ {
+ typeOfResources.map((item) => {
+ return (
+ item.isChecked &&
+ <StyledChip contrast={contrast} key={new Date().toISOString() + item.value} size="small" label={item.exemplo} />
+ );
+ })
+ }
+ </Grid>
</Grid>
</Grid>
- </Grid>
- <Grid item>
- <Grid container direction='row' spacing={1} alignItems='center'>
- <Grid item>
- Etapas de ensino:
- </Grid>
- <Grid item>
- {
- teachingStage.map((item) => {
- return (
- item.isChecked &&
- <StyledChip key={new Date().toISOString() + item.value} size="small" label={item.exemplo} />
- );
- })
- }
+ <Grid item>
+ <Grid container direction='row' spacing={1} alignItems='center'>
+ <Grid item className="subtitle">
+ Etapas de ensino:
+ </Grid>
+ <Grid item>
+ {
+ teachingStage.map((item) => {
+ return (
+ item.isChecked &&
+ <StyledChip contrast={contrast} key={new Date().toISOString() + item.value} size="small" label={item.exemplo} />
+ );
+ })
+ }
+ </Grid>
</Grid>
</Grid>
- </Grid>
- <Grid item>
- <Grid container direction='row' spacing={1} alignItems='center'>
- <Grid item>
- Idiomas:
+ <Grid item>
+ <Grid container direction='row' spacing={1} alignItems='center'>
+ <Grid item className="subtitle">
+ Idiomas:
</Grid>
- <Grid item>
- {
- languages.map((item) => {
- return (
- item.isChecked &&
- <StyledChip key={new Date().toISOString() + item.value} size="small" label={item.exemplo} />
- );
- })
- }
+ <Grid item>
+ {
+ languages.map((item) => {
+ return (
+ item.isChecked &&
+ <StyledChip contrast={contrast} key={new Date().toISOString() + item.value} size="small" label={item.exemplo} />
+ );
+ })
+ }
+ </Grid>
</Grid>
</Grid>
- </Grid>
- <Grid item>
- <Grid container direction='row' spacing={1} alignItems='center'>
- <Grid item>
- Palavra chave:
+ <Grid item>
+ <Grid container direction='row' spacing={1} alignItems='center'>
+ <Grid item className="subtitle">
+ Palavra chave:
</Grid>
- <Grid item>
- {
- tag &&
- <StyledChip size="small" label={tag} />
- }
+ <Grid item>
+ {
+ tag &&
+ <StyledChip contrast={contrast} size="small" label={tag} />
+ }
+ </Grid>
</Grid>
</Grid>
- </Grid>
- <Grid item>
- <StyledButton variant="contained" onClick={onButtonClicked}>
- <span className="text">
+ <Grid item>
+ <Button contrast={contrast} variant="contained" onClick={onButtonClicked}>
Aplicar filtro
- </span>
- </StyledButton>
+ </Button>
+ </Grid>
</Grid>
- </Grid>
+ </div>
</FilterSummaryPaper>
)
}
const FilterSummaryPaper = styled(Paper)`
- background-color: #fff;
margin-top: 5px;
margin-bottom: 30px;
- padding: 0.5em 1em;
+ border: ${props => props.contrast === "" ? 0 : "1px solid white"};
+
.title{
text-transform: uppercase;
- color: #666;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
font-weight: 500;
}
+
+ .main{
+ background-color: ${props => props.contrast === "" ? "#fff" : "black"};
+ padding: 0.5em 1em;
+ }
+
+ .subtitle{
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
`
-const StyledButton = styled(Button)`
- background-color: #ff7f00 !important;
- .text{
- color: white;
+const Button = styled.button`
+ background: ${props => props.contrast === "" ? "#ff7f00" : "black"};
+ text-transform: uppercase;
+ color: ${props => props.contrast === "" ? "white" : "yellow"};
+ font-family: Roboto,sans-serif;
+ font-size: 14px;
+ font-weight: 500;
+ height: 36px;
+ border-radius: 3px;
+ border: ${props => props.contrast === "" ? 0 : "1px solid white"};
+ box-shadow: 0 2px 5px 0 rgba(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;
+ padding: 0em 1em;
+ white-space: nowrap;
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ :hover {
+ background: ${props => props.contrast === "" ? "rgba(255, 127, 0,0.75)" : "rgba(255,255,0,0.24)"};
+ }
+ :active{
+ transform: translateY(2px);
}
`
const StyledChip = styled(Chip)`
- margin: 0.2em
+ margin: 0.2em;
+ background-color: ${props => props.contrast === "" ? 0 : "black !important"};
+ border: ${props => props.contrast === "" ? 0 : "1px solid white !important"};
+ color: ${props => props.contrast === "" ? 0 : "white !important"};
`
diff --git a/src/Components/SearchPageComponents/ResourceTemplate.js b/src/Components/SearchPageComponents/ResourceTemplate.js
index 01f74736..063e6178 100644
--- a/src/Components/SearchPageComponents/ResourceTemplate.js
+++ b/src/Components/SearchPageComponents/ResourceTemplate.js
@@ -9,7 +9,7 @@ import IconButton from '@material-ui/core/IconButton';
import ArrowBackIcon from '@material-ui/icons/ArrowBack';
import ArrowForwardIcon from '@material-ui/icons/ArrowForward';
-export default function ResourceTemplate({ isLoading, resources, totalResources, currPage, handlePreviousPage, handleNextPage }) {
+export default function ResourceTemplate({ isLoading, resources, totalResources, currPage, handlePreviousPage, handleNextPage, contrast }) {
const totalPages = parseInt(totalResources) === 0 ? 0 : Math.ceil(totalResources / 12) - 1; //Dividing by 12 because i want to cath total pages, and results per page is 12
const topRef = React.useRef();
@@ -18,71 +18,76 @@ export default function ResourceTemplate({ isLoading, resources, totalResources,
}, [isLoading])
return (
- <ResourcePaper elevation={4} square>
+ <ResourcePaper elevation={4} square contrast={contrast}>
<div ref={topRef} />
- <Title>
- Recursos encontrados ({totalResources})
- </Title>
- {
- isLoading ?
- <LoadingSpinner text='Carregando recursos...' />
- :
- <Grid container justify='center' alignItems='center' spacing={3}>
- {
- resources.length >= 1 ?
- resources.map((card) => {
- return <Grid item key={new Date().toISOString() + card.id} >
- <ResourceCardFunction
- avatar={card.publisher ? 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.author}
- tags={card.educational_stages}
- href={"/recurso/" + card.id}
- downloadableLink={card.default_attachment_location}
- />
- </Grid>
- })
- :
- <NoContentDiv>
- <h3>
- Desculpe, não há dados nessa página.
- </h3>
- <img src={noResources} alt='No cards' />
- </NoContentDiv>
- }
+ <div className="main">
+ <Title contrast={contrast}>
+ Recursos encontrados ({totalResources})
+ </Title>
+ {
+ isLoading ?
+ <LoadingSpinner text='Carregando recursos...' contrast={contrast} />
+ :
+ <Grid container justify='center' alignItems='center' spacing={3}>
+ {
+ resources.length >= 1 ?
+ resources.map((card) => {
+ return <Grid item key={new Date().toISOString() + card.id} >
+ <ResourceCardFunction
+ avatar={card.publisher ? 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.author}
+ tags={card.educational_stages}
+ href={"/recurso/" + card.id}
+ downloadableLink={card.default_attachment_location}
+ />
+ </Grid>
+ })
+ :
+ <NoContentDiv contrast={contrast}>
+ <h3>
+ Desculpe, não há dados nessa página.
+ </h3>
+ <img src={noResources} alt='No cards' />
+ </NoContentDiv>
+ }
+ </Grid>
+ }
+ {
+ !isLoading &&
+ <Grid container direction='row' alignItems='center' justify='center' spacing={3}>
+ <Grid item>
+ <StyledIconButton contrast={contrast} elevation={4} disabled={currPage === 0}>
+ <IconButton onClick={handlePreviousPage} disabled={currPage === 0}>
+ <ArrowBackIcon className='icon' />
+ </IconButton>
+ </StyledIconButton>
+ </Grid>
+ <Grid item>
+ <ActualPage contrast={contrast}>
+ {currPage}
+ </ActualPage>
+ <TotalPages contrast={contrast}>
+ ...{totalPages}
+ </TotalPages>
+ </Grid>
+ <Grid item>
+ <StyledIconButton contrast={contrast} elevation={4} disabled={currPage === totalPages}>
+ <IconButton onClick={handleNextPage} disabled={currPage === totalPages}>
+ <ArrowForwardIcon className='icon' />
+ </IconButton>
+ </StyledIconButton>
+ </Grid>
</Grid>
- }
- {
- !isLoading &&
- <Grid container direction='row' alignItems='center' justify='center' spacing={3}>
- <Grid item>
- <StyledIconButton elevation={4} disabled={currPage === 0}>
- <IconButton onClick={handlePreviousPage} disabled={currPage === 0}>
- <ArrowBackIcon className='icon' />
- </IconButton>
- </StyledIconButton>
- </Grid>
- <Grid item>
- <ActualPage>
- {currPage}
- </ActualPage>...{totalPages}
- </Grid>
- <Grid item>
- <StyledIconButton elevation={4} disabled={currPage === totalPages}>
- <IconButton onClick={handleNextPage} disabled={currPage === totalPages}>
- <ArrowForwardIcon className='icon' />
- </IconButton>
- </StyledIconButton>
- </Grid>
- </Grid>
- }
+ }
+ </div>
</ResourcePaper>
)
};
@@ -91,20 +96,23 @@ const Title = styled.h4`
text-transform: uppercase;
font-weight: 500;
text-align: left;
- color: #ff7f00;
+ color: ${props => props.contrast === "" ? "#ff7f00" : "white"};
`
const NoContentDiv = styled.div`
>h3{
- color: #ff7f00;
+ color: ${props => props.contrast === "" ? "#ff7f00" : "white"};
text-align: center;
}
`
const ActualPage = styled.span`
- color: #ff7f00;
+ color: ${props => props.contrast === "" ? "#ff7f00" : "yellow"};
+`
+const TotalPages = styled.span`
+ color: ${props => props.contrast === "" ? "#666" : "white"};
`
const StyledIconButton = styled(Paper)`
border-radius: 50% !important;
- background-color: ${props => props.disabled ? "#666" : "#ff7f00"} !important;
+ background-color: ${props => props.disabled ? "#666" : props.contrast === "" ? "#ff7f00" : "yellow"} !important;
.icon{
color: ${props => props.disabled ? "#d4d4d4" : "white"};
}
@@ -113,11 +121,15 @@ const StyledIconButton = styled(Paper)`
const ResourcePaper = styled(Paper)`
/* height: 150px; */
text-align: center;
- background-color: #fff;
margin-top: 5px;
margin-bottom: 30px;
- padding: 0.5em 1em;
- color: #666;
+ border: ${props => props.contrast === "" ? 0 : "1px solid white"};
+
+ .main{
+ background-color: ${props => props.contrast === "" ? "#fff" : "black"};
+ padding: 0.5em 1em;
+ }
+
.textInfo{
text-align: start;
}
diff --git a/src/Components/SearchPageComponents/UserTemplate.js b/src/Components/SearchPageComponents/UserTemplate.js
index 991a31d3..49ce6283 100644
--- a/src/Components/SearchPageComponents/UserTemplate.js
+++ b/src/Components/SearchPageComponents/UserTemplate.js
@@ -9,7 +9,7 @@ import ArrowBackIcon from '@material-ui/icons/ArrowBack';
import ArrowForwardIcon from '@material-ui/icons/ArrowForward';
import { apiDomain } from '../../env';
-export default function ResourceTemplate({ isLoading, resources, totalResources, currPage, handlePreviousPage, handleNextPage }) {
+export default function ResourceTemplate({ isLoading, resources, totalResources, currPage, handlePreviousPage, handleNextPage, contrast }) {
const totalPages = parseInt(totalResources) === 0 ? 0 : Math.ceil(totalResources / 12) - 1; //Dividing by 12 because i want to cath total pages, and results per page is 12
const topRef = React.useRef();
@@ -18,66 +18,71 @@ export default function ResourceTemplate({ isLoading, resources, totalResources,
}, [isLoading])
return (
- <ResourcePaper elevation={4} square>
+ <ResourcePaper elevation={4} square contrast={contrast}>
<div ref={topRef} />
- <Title>
- Usuários encontrados ({totalResources})
- </Title>
- {
- isLoading ?
- <LoadingSpinner text='Carregando recursos...' />
- :
- <Grid container justify='center' alignItems='center' spacing={3}>
- {
- resources.length >= 1 ?
- resources.map((card) => {
- return <Grid item key={new Date().toISOString() + card.id} >
- <ContactCard
- name={card.name}
- avatar={card.avatar ? apiDomain + card.avatar : null}
- cover={card.cover ? apiDomain + card.cover : null}
- numCollections={card.collections_count}
- numLearningObjects={card.learning_objects_count}
- follow_count={card.follows_count}
- followed={card.followed || null}
- followerID={card.id}
- href={'/usuario-publico/' + card.id}
- />
- </Grid>
- })
- :
- <NoContentDiv>
- <h3>
- Desculpe, não há dados nessa página.
+ <div className="main">
+ <Title contrast={contrast}>
+ Usuários encontrados ({totalResources})
+ </Title>
+ {
+ isLoading ?
+ <LoadingSpinner contrast={contrast} text='Carregando recursos...' />
+ :
+ <Grid container justify='center' alignItems='center' spacing={3}>
+ {
+ resources.length >= 1 ?
+ resources.map((card) => {
+ return <Grid item key={new Date().toISOString() + card.id} >
+ <ContactCard
+ name={card.name}
+ avatar={card.avatar ? apiDomain + card.avatar : null}
+ cover={card.cover ? apiDomain + card.cover : null}
+ numCollections={card.collections_count}
+ numLearningObjects={card.learning_objects_count}
+ follow_count={card.follows_count}
+ followed={card.followed || null}
+ followerID={card.id}
+ href={'/usuario-publico/' + card.id}
+ />
+ </Grid>
+ })
+ :
+ <NoContentDiv contrast={contrast}>
+ <h3>
+ Desculpe, não há dados nessa página.
</h3>
- </NoContentDiv>
- }
+ </NoContentDiv>
+ }
+ </Grid>
+ }
+ {
+ !isLoading &&
+ <Grid container direction='row' alignItems='center' justify='center' spacing={3}>
+ <Grid item>
+ <StyledIconButton contrast={contrast} elevation={4} disabled={currPage === 0}>
+ <IconButton onClick={handlePreviousPage} disabled={currPage === 0}>
+ <ArrowBackIcon className='icon' />
+ </IconButton>
+ </StyledIconButton>
+ </Grid>
+ <Grid item>
+ <ActualPage contrast={contrast}>
+ {currPage}
+ </ActualPage>
+ <TotalPages contrast={contrast}>
+ ...{totalPages}
+ </TotalPages>
+ </Grid>
+ <Grid item>
+ <StyledIconButton contrast={contrast} elevation={4} disabled={currPage === totalPages}>
+ <IconButton onClick={handleNextPage} disabled={currPage === totalPages}>
+ <ArrowForwardIcon className='icon' />
+ </IconButton>
+ </StyledIconButton>
+ </Grid>
</Grid>
- }
- {
- !isLoading &&
- <Grid container direction='row' alignItems='center' justify='center' spacing={3}>
- <Grid item>
- <StyledIconButton elevation={4} disabled={currPage === 0}>
- <IconButton onClick={handlePreviousPage} disabled={currPage === 0}>
- <ArrowBackIcon className='icon' />
- </IconButton>
- </StyledIconButton>
- </Grid>
- <Grid item>
- <ActualPage>
- {currPage}
- </ActualPage>...{totalPages}
- </Grid>
- <Grid item>
- <StyledIconButton elevation={4} disabled={currPage === totalPages}>
- <IconButton onClick={handleNextPage} disabled={currPage === totalPages}>
- <ArrowForwardIcon className='icon' />
- </IconButton>
- </StyledIconButton>
- </Grid>
- </Grid>
- }
+ }
+ </div>
</ResourcePaper>
)
};
@@ -86,20 +91,23 @@ const Title = styled.h4`
text-transform: uppercase;
font-weight: 500;
text-align: left;
- color: #00bcd4;
+ color: ${props => props.contrast === "" ? "#00bcd4" : "white"};
`
const NoContentDiv = styled.div`
>h3{
- color: #00bcd4;
+ color: ${props => props.contrast === "" ? "#00bcd4" : "white"};
text-align: center;
}
`
const ActualPage = styled.span`
- color: #00bcd4;
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+`
+const TotalPages = styled.span`
+ color: ${props => props.contrast === "" ? "#666" : "white"};
`
const StyledIconButton = styled(Paper)`
border-radius: 50% !important;
- background-color: ${props => props.disabled ? "#666" : "#00bcd4"} !important;
+ background-color: ${props => props.disabled ? "#666" : props.contrast === "" ? "#00bcd4" : "yellow"} !important;
.icon{
color: ${props => props.disabled ? "#d4d4d4" : "white"};
}
@@ -108,11 +116,15 @@ const StyledIconButton = styled(Paper)`
const ResourcePaper = styled(Paper)`
/* height: 150px; */
text-align: center;
- background-color: #fff;
margin-top: 5px;
margin-bottom: 30px;
- padding: 0.5em 1em;
- color: #666;
+ border: ${props => props.contrast === "" ? 0 : "1px solid white"};
+
+ .main{
+ background-color: ${props => props.contrast === "" ? "#fff" : "black"};
+ padding: 0.5em 1em;
+ }
+
.textInfo{
text-align: start;
}
diff --git a/src/Pages/AboutPage.js b/src/Pages/AboutPage.js
index 9dcf3a08..21e46161 100644
--- a/src/Pages/AboutPage.js
+++ b/src/Pages/AboutPage.js
@@ -224,7 +224,7 @@ const Secao4 = styled.div`
text-align: center;
border: 0;
padding: 0 6px;
- hite-space: nowrap;
+ white-space: nowrap;
text-decoration: none;
diff --git a/src/Pages/ResourcePage.js b/src/Pages/ResourcePage.js
index 317663da..47bd5b18 100644
--- a/src/Pages/ResourcePage.js
+++ b/src/Pages/ResourcePage.js
@@ -142,7 +142,7 @@ export default function LearningObjectPage(props) {
};
if (erro)
- return <LearnObjectNotFound>
+ return <LearnObjectNotFound contrast={state.contrast}>
<Grid container direction='column' justify='center' alignItems='center' spacing={1}>
<Grid item>
<p className="not-found">
@@ -150,7 +150,7 @@ export default function LearningObjectPage(props) {
</p>
</Grid>
<Grid item>
- <Link className="link" to={`/busca?page=0&results_per_page=12&order=review_average&query=*&search_class=LearningObject`}>
+ <Link to={`/busca?page=0&results_per_page=12&order=review_average&query=*&search_class=LearningObject`}>
<Button
variant='contained'
className="back-button"
@@ -380,10 +380,12 @@ const Background = styled.div`
`;
const LearnObjectNotFound = styled.div`
- margin: 1em;
+ padding: 1em;
+ background-color: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
.not-found{
font-family: 'Roboto', sans-serif;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
font-weight: 500;
text-align: left;
padding: 0;
@@ -391,12 +393,14 @@ const LearnObjectNotFound = styled.div`
}
.back-button{
- background-color: #ff7f00;
- color: whitesmoke;
- }
-
- .link{
- text-decoration: none;
+ background-color: ${props => props.contrast === "" ? "#ff7f00" : "black"};
+ color: ${props => props.contrast === "" ? "whitesmoke" : "yellow"};
+ border: ${props => props.contrast === "" ? "none" : "1px solid white"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ :hover{
+ background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24)"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ }
}
`
diff --git a/src/Pages/Search.js b/src/Pages/Search.js
index ba0a437b..f9d4168a 100644
--- a/src/Pages/Search.js
+++ b/src/Pages/Search.js
@@ -488,6 +488,7 @@ export default function Search() {
/>
{
<FilterSummary
+ contrast={state.contrast}
curriculumComponents={curriculumComponents}
typeOfResources={typeOfResources}
languages={languages}
@@ -497,6 +498,7 @@ export default function Search() {
/>
}
<ResourceTemplate
+ contrast={state.contrast}
handleNextPage={handleNextPage}
handlePreviousPage={handlePreviousPage}
isLoading={isLoading}
@@ -509,6 +511,7 @@ export default function Search() {
{
currOption === 'Collection' &&
<CollectionTemplate
+ contrast={state.contrast}
handleNextPage={handleNextPage}
handlePreviousPage={handlePreviousPage}
isLoading={isLoading}
@@ -520,6 +523,7 @@ export default function Search() {
{
currOption === 'User' &&
<UserTemplate
+ contrast={state.contrast}
handleNextPage={handleNextPage}
handlePreviousPage={handlePreviousPage}
isLoading={isLoading}
--
GitLab