Skip to content
Snippets Groups Projects
Commit 2ea67b3a authored by vgm18's avatar vgm18
Browse files

Implemented accessibility on collection page

parent 80c1711e
No related branches found
No related tags found
5 merge requests!100Changed recaptcha key to the production one, removed console.logs and fixed...,!99Changed recaptcha key to the production one, removed console.logs and fixed...,!98Changed recaptcha key to the production one, removed console.logs and fixed...,!86Acessibility,!82Acessibility
Show whitespace changes
Inline Side-by-side
Showing
with 74 additions and 57 deletions
src/Components/CollectionAuthor.js
+ 10
− 14
View file @ 2ea67b3a
...@@ -30,19 +30,20 @@ export default function CollectionAuthor(props) { ...@@ -30,19 +30,20 @@ export default function CollectionAuthor(props) {
justify="center" justify="center"
alignItems="center"> alignItems="center">
{props.imgsrc ? {props.imgsrc ?
<UserLink <Link
to={`/usuario-publico/${props.author_id}`} to={`/usuario-publico/${props.author_id}`}
contrast={props.contrast}
> >
<UserAvatar src={props.imgsrc} /> <UserAvatar src={props.imgsrc} />
</UserLink> </Link>
: :
<CircularProgress color="secondary" /> <CircularProgress color="secondary" />
} }
<InfoText>Coleção organizada por:</InfoText> <InfoText contrast={props.contrast}>Coleção organizada por:</InfoText>
{props.name ? {props.name ?
<UserLink to={`/usuario-publico/${props.author_id}`} > <Link to={`/usuario-publico/${props.author_id}`} contrast={props.contrast}>
<UserName>{props.name}</UserName> <UserName contrast={props.contrast}>{props.name}</UserName>
</UserLink> </Link>
: :
<CircularProgress /> <CircularProgress />
} }
...@@ -58,15 +59,10 @@ const UserAvatar = styled.img` ...@@ -58,15 +59,10 @@ const UserAvatar = styled.img`
const InfoText = styled.p` const InfoText = styled.p`
margin-bottom: 0; margin-bottom: 0;
padding-bottom: 0; padding-bottom: 0;
color: #666; color: ${props => props.contrast === "" ? "#666 !important" : "white !important"};
` `
const UserName = styled.h2` const UserName = styled.h2`
margin-top: 10px; margin-top: 10px;
color: #673ab7; color: ${props => props.contrast === "" ? "#673ab7 !important" : "yellow !important"};
` text-decoration: ${props => props.contrast === "" ? "none" : "yellow underline"};
const UserLink = styled(Link)`
text-decoration: none;
&:focus, &:hover, &:visited, &:link, &:active {
text-decoration: none;
}
` `
src/Components/CollectionDescription.js
+ 4
− 2
View file @ 2ea67b3a
...@@ -43,7 +43,9 @@ export default function CollectionDescription(props) { ...@@ -43,7 +43,9 @@ export default function CollectionDescription(props) {
}, [props.collection_id]); }, [props.collection_id]);
return ( return (
<Grid container direction="column" justify="center" alignItems="center" spacing={5}> <Grid container direction="column" justify="center" alignItems="center" spacing={5}
style={props.contrast === "" ? {color: "#666"} : {color: "white"}}
>
<Grid <Grid
item item
justify="center" justify="center"
...@@ -59,6 +61,7 @@ export default function CollectionDescription(props) { ...@@ -59,6 +61,7 @@ export default function CollectionDescription(props) {
> >
<Grid item> <Grid item>
<CollectionReview <CollectionReview
contrast={props.contrast}
stars={props.stars} stars={props.stars}
liked={props.liked} liked={props.liked}
likes={props.likes} likes={props.likes}
...@@ -92,6 +95,5 @@ export default function CollectionDescription(props) { ...@@ -92,6 +95,5 @@ export default function CollectionDescription(props) {
const Title = styled.h1` const Title = styled.h1`
font-size: 2.5em; font-size: 2.5em;
color: rgb(102, 102, 102);
text-align: center text-align: center
` `
\ No newline at end of file
src/Components/CollectionDowloadButton.js
+ 5
− 0
View file @ 2ea67b3a
...@@ -96,6 +96,7 @@ const DowloadButton = (props) => { ...@@ -96,6 +96,7 @@ const DowloadButton = (props) => {
</Alert> </Alert>
</Snackbar> </Snackbar>
<DownloadButton <DownloadButton
contrast={props.contrast}
variant="outlined" variant="outlined"
color="primary" color="primary"
startIcon={<GetAppIcon fontSize="large" />} startIcon={<GetAppIcon fontSize="large" />}
...@@ -113,6 +114,10 @@ const ButtonText = styled.span` ...@@ -113,6 +114,10 @@ const ButtonText = styled.span`
font-size: 1.2em; font-size: 1.2em;
` `
const DownloadButton = styled(Button)` const DownloadButton = styled(Button)`
color: ${props => props.contrast === "" ? "#3f51b5 !important" : "yellow !important"};
background-color: ${props => props.contrast === "" ? "white !important" : "black !important"};
text-decoration: ${props => props.contrast === "" ? "none !important" : "yellow underline !important"};
border: ${props => props.contrast === "" ? "1px solid #3f51b5 !important" : "1px solid white !important"};
padding-left: 10; padding-left: 10;
padding-right: 10; padding-right: 10;
width: 250px; width: 250px;
......
src/Components/CollectionReview.js
+ 9
− 7
View file @ 2ea67b3a
...@@ -107,7 +107,7 @@ export default function CollectionReview(props) { ...@@ -107,7 +107,7 @@ export default function CollectionReview(props) {
}, [props]) }, [props])
return ( return (
<Grid container direction="column"> <Grid container direction="column" style={props.contrast === "" ? {color: "#666"} : {color: "white"}}>
<SnackBarComponent <SnackBarComponent
snackbarOpen={snackInfo.open} snackbarOpen={snackInfo.open}
handleClose={handleCloseSnack} handleClose={handleCloseSnack}
...@@ -115,29 +115,31 @@ export default function CollectionReview(props) { ...@@ -115,29 +115,31 @@ export default function CollectionReview(props) {
text={snackInfo.text} text={snackInfo.text}
color={snackInfo.color} color={snackInfo.color}
/> />
<Grid sm={12} container direction="row" alignItems="center"> <Grid sm={12} container direction="row" alignItems="center"
style={{justifyContent: "center"}}
>
<Grid item> <Grid item>
<Rating <Rating
style={props.contrast === "" ? {} : {color: "white"}}
name="customized-empty" name="customized-empty"
value={Number(stars)} value={Number(stars)}
readOnly readOnly
onClick={props.scrollToComment} onClick={props.scrollToComment}
style={{ color: "#666" }}
emptyIcon={<StarBorderIcon fontSize="inherit" />} emptyIcon={<StarBorderIcon fontSize="inherit" />}
/> />
</Grid> </Grid>
<Grid item justify="center" alignItems="center"> <Grid item justify="center" alignItems="center">
<IconButton aria-label="like" onClick={handleLikeClick}> <IconButton style={{color: "inherit"}} aria-label="like" onClick={handleLikeClick}>
{likes}<FavoriteIcon style={{ fill: liked ? "red" : null }} /> {likes}<FavoriteIcon style={props.contrast === "" ? {fill: liked ? "red" : null} : {fill: "yellow"}} />
</IconButton> </IconButton>
</Grid> </Grid>
</Grid> </Grid>
<Grid item sm={12}> <Grid item sm={12}>
<IconButton <IconButton
aria-label="report" aria-label="report"
style={{ fontSize: 'small' }} style={{ fontSize: 'medium' }}
onClick={handleClickReport}> onClick={handleClickReport}>
<InfoIcon />Reportar erro ou abuso <InfoIcon style={props.contrast === "" ? {color: "#666"} : {color: "white"}}/><span style={props.contrast === "" ? {color: "#666"} : {color: "yellow", textDecoration: "underline"}}>Reportar erro ou abuso</span>
</IconButton> </IconButton>
<ReportModal <ReportModal
open={reportOpen} open={reportOpen}
......
src/Components/ContactButtons/FollowButton.js
+ 2
− 2
View file @ 2ea67b3a
...@@ -80,7 +80,7 @@ export default function FollowButton(props) { ...@@ -80,7 +80,7 @@ export default function FollowButton(props) {
{/*----------------------------------------------------------------------------*/} {/*----------------------------------------------------------------------------*/}
{ {
state.currentUser.id !== '' ? ( state.currentUser.id !== '' ? (
<StyledButton className={`${props.contrast}LinkColor`} style={{color: "#00bcd4"}} <StyledButton className={`${props.contrast}LinkColor`}
style={props.contrast === "" ? {border: "2px solid #00bcd4", borderRadius : "5px", color :"#00bcd4", backgroundColor: "white"} : {border: "1px solid white", borderRadius : "5px", color :"#00bcd4"}} style={props.contrast === "" ? {border: "2px solid #00bcd4", borderRadius : "5px", color :"#00bcd4", backgroundColor: "white"} : {border: "1px solid white", borderRadius : "5px", color :"#00bcd4"}}
onClick={() => handleFollow(props.followerID)}> onClick={() => handleFollow(props.followerID)}>
<PersonAddIcon style={{ <PersonAddIcon style={{
...@@ -93,7 +93,7 @@ export default function FollowButton(props) { ...@@ -93,7 +93,7 @@ export default function FollowButton(props) {
) )
: :
( (
<StyledButton className={`${props.contrast}LinkColor `} style={{color: "#00bcd4"}} <StyledButton className={`${props.contrast}LinkColor `}
style={props.contrast === "" ? {border: "2px solid #00bcd4", borderRadius : "5px", color :"#00bcd4", backgroundColor: "white"} : {border: "1px solid white", borderRadius : "5px", color :"#00bcd4"}} style={props.contrast === "" ? {border: "2px solid #00bcd4", borderRadius : "5px", color :"#00bcd4", backgroundColor: "white"} : {border: "1px solid white", borderRadius : "5px", color :"#00bcd4"}}
onClick={() => handleLogin(true)}> onClick={() => handleLogin(true)}>
<PersonAddIcon style={{ <PersonAddIcon style={{
......
src/Components/ContactButtons/FollowingButton.js
+ 2
− 2
View file @ 2ea67b3a
...@@ -64,7 +64,7 @@ export default function FollowingButton(props) { ...@@ -64,7 +64,7 @@ export default function FollowingButton(props) {
followingHover ? followingHover ?
( (
[ [
<StyledButton className={`${props.contrast}LinkColor`} style={{color: "#00bcd4"}} <StyledButton className={`${props.contrast}LinkColor`}
style={props.contrast === "" ? {border: "2px solid #00bcd4", borderRadius : "5px", color :"white", backgroundColor: "#00bcd4"} : {border: "1px solid white", borderRadius : "5px", color :"#00bcd4"}} style={props.contrast === "" ? {border: "2px solid #00bcd4", borderRadius : "5px", color :"white", backgroundColor: "#00bcd4"} : {border: "1px solid white", borderRadius : "5px", color :"#00bcd4"}}
> >
DEIXAR DE SEGUIR DEIXAR DE SEGUIR
...@@ -73,7 +73,7 @@ export default function FollowingButton(props) { ...@@ -73,7 +73,7 @@ export default function FollowingButton(props) {
) )
: ( : (
[ [
<StyledButton className={`${props.contrast}LinkColor`} style={{color: "#00bcd4"}} <StyledButton className={`${props.contrast}LinkColor`}
style={props.contrast === "" ? {border: "2px solid #00bcd4", borderRadius : "5px", color :"white", backgroundColor: "#00bcd4"} : {border: "1px solid white", borderRadius : "5px", color :"#00bcd4"}} style={props.contrast === "" ? {border: "2px solid #00bcd4", borderRadius : "5px", color :"white", backgroundColor: "#00bcd4"} : {border: "1px solid white", borderRadius : "5px", color :"#00bcd4"}}
> >
<GroupIcon style={{ <GroupIcon style={{
......
src/Components/FollowCollectionButton.js
+ 5
− 1
View file @ 2ea67b3a
...@@ -188,8 +188,8 @@ export default function FollowCollectionButton(props) { ...@@ -188,8 +188,8 @@ export default function FollowCollectionButton(props) {
color={snackInfo.color} color={snackInfo.color}
/> />
<FollowButton <FollowButton
contrast={props.contrast}
variant={variant} variant={variant}
color="primary"
startIcon={icon} startIcon={icon}
size="small" size="small"
onMouseEnter={handleMouseEnter} onMouseEnter={handleMouseEnter}
...@@ -219,6 +219,10 @@ const ButtonText = styled.span` ...@@ -219,6 +219,10 @@ const ButtonText = styled.span`
font-size: 1.2em; font-size: 1.2em;
` `
const FollowButton = styled(Button)` const FollowButton = styled(Button)`
color: ${props => props.contrast === "" ? "white !important" : "yellow !important"};
background-color: ${props => props.contrast === "" ? "#3f51b5 !important" : "black !important"};
text-decoration: ${props => props.contrast === "" ? "none !important" : "yellow underline !important"};
border: ${props => props.contrast === "" ? "none !important" : "1px solid white !important"};
padding-left: 10; padding-left: 10;
padding-right: 10; padding-right: 10;
width: 250px; width: 250px;
......
src/Components/MenuBar.js
+ 8
− 9
View file @ 2ea67b3a
...@@ -52,7 +52,8 @@ const ButtonPublicarRecurso = styled(Button)` ...@@ -52,7 +52,8 @@ const ButtonPublicarRecurso = styled(Button)`
font-family : 'Roboto', sans serif; font-family : 'Roboto', sans serif;
box-shadow : none !important; box-shadow : none !important;
border: ${props => props.contrast === '' ? "1px transparent solid" : "1px white solid !important"}; border: ${props => props.contrast === '' ? "1px transparent solid" : "1px white solid !important"};
background-color : #ff7f00 !important; background-color: ${(props) => props.contrast === "" ? "#ff7f00 !important" : "black !important"};
color: white !important;
align-content : center; align-content : center;
font-weight : 500 !important; font-weight : 500 !important;
text-transform: capitalize !important; text-transform: capitalize !important;
...@@ -93,8 +94,6 @@ const Left = styled.span` ...@@ -93,8 +94,6 @@ const Left = styled.span`
export const ButtonPubRecursoStyled = styled(Button)` export const ButtonPubRecursoStyled = styled(Button)`
font-weight : 500 !important; font-weight : 500 !important;
border : 1.5px #666 solid !important;
color: #666;
box-shadow: none; box-shadow: none;
margin : 0 8px !important; margin : 0 8px !important;
font-weight : normal !important; font-weight : normal !important;
...@@ -188,9 +187,9 @@ export default function MenuBar(props) { ...@@ -188,9 +187,9 @@ export default function MenuBar(props) {
<> <>
<div style={{ boxSizing: "border-box" }}> <div style={{ boxSizing: "border-box" }}>
<Link to="/termos-publicar-recurso"> <Link to="/termos-publicar-recurso">
<ButtonPublicarRecurso contrast={state.contrast} className={`${state.contrast}BackColor`}> <ButtonPublicarRecurso contrast={state.contrast} className={`${state.contrast}LinkColor`}>
<CloudUploadIcon className={`${state.contrast}IconColor`} style={{ color: "white", marginLeft: "0" }} /> <CloudUploadIcon className={`${state.contrast}IconColor`} style={{ marginLeft: "0" }} />
<span className={`${state.contrast}LinkColor`} style={{ color: "#fff", textAlign: "center", alignSelf: "center", fontWeight: "500" }} > <span style={{textAlign: "center", alignSelf: "center", fontWeight: "500" }} >
PUBLICAR RECURSO PUBLICAR RECURSO
</span> </span>
</ButtonPublicarRecurso> </ButtonPublicarRecurso>
...@@ -207,9 +206,9 @@ export default function MenuBar(props) { ...@@ -207,9 +206,9 @@ export default function MenuBar(props) {
) )
: ( : (
<React.Fragment> <React.Fragment>
<ButtonPubRecursoStyled contrast={state.contrast} className={`${state.contrast}LinkColor`} onClick={props.openLogin}>PUBLICAR RECURSO?</ButtonPubRecursoStyled> <ButtonPubRecursoStyled contrast={state.contrast} className={`${state.contrast}LinkColor ${state.contrast}Border`} onClick={props.openLogin}>PUBLICAR RECURSO?</ButtonPubRecursoStyled>
<ButtonStyled className={`${state.contrast}LinkColor`} onClick={props.openLogin}><ExitToAppIcon className={`${state.contrast}IconColor`} style={{ color: "#00bcd4" }} />Entrar</ButtonStyled> <ButtonStyled contrast={state.contrast} className={`${state.contrast}LinkColor`} onClick={props.openLogin}><ExitToAppIcon className={`${state.contrast}IconColor`} style={{ color: "#00bcd4" }} />Entrar</ButtonStyled>
<ButtonStyled className={`${state.contrast}LinkColor`} onClick={props.openSignUp}>Cadastre-<span style={{ textTransform: 'lowercase' }}>se</span></ButtonStyled> <ButtonStyled contrast={state.contrast} className={`${state.contrast}LinkColor`} onClick={props.openSignUp}>Cadastre-<span style={{ textTransform: 'lowercase' }}>se</span></ButtonStyled>
</React.Fragment> </React.Fragment>
) )
} }
......
src/Components/ResourceList.js
+ 10
− 6
View file @ 2ea67b3a
...@@ -124,7 +124,7 @@ export default function ResourceList(props) { ...@@ -124,7 +124,7 @@ export default function ResourceList(props) {
<ResourceListContainer> <ResourceListContainer>
<Grid container direction="row" justify="space-around" alignItems="center"> <Grid container direction="row" justify="space-around" alignItems="center">
<Grid item> <Grid item>
<Title> <Title contrast={props.contrast}>
{props.resources.length ? {props.resources.length ?
props.resources.length + " recurso" + (props.resources.length === 1 ? "" : "s") props.resources.length + " recurso" + (props.resources.length === 1 ? "" : "s")
: "Carregando coleção"} : "Carregando coleção"}
...@@ -132,19 +132,19 @@ export default function ResourceList(props) { ...@@ -132,19 +132,19 @@ export default function ResourceList(props) {
</Grid> </Grid>
<Grid item> <Grid item>
<Button color="primary" onClick={() => setSelectable(!selectable)}> <Button color="primary" onClick={() => setSelectable(!selectable)}>
<PanelButtonText> <PanelButtonText contrast={props.contrast}>
{selectable ? "Desativar" : "Ativar"} seleção {selectable ? "Desativar" : "Ativar"} seleção
</PanelButtonText> </PanelButtonText>
</Button> </Button>
</Grid> </Grid>
<Grid item> <Grid item>
<Button <Button
color="primary" style={props.contrast === "" ? {color: "#3f51b5", border: "1px solid #3f51b5"} : {color: "white", border: "1px solid white"}}
variant="outlined" variant="outlined"
startIcon={<GetAppIcon fontSize="large" />} startIcon={<GetAppIcon fontSize="large" />}
onClick={handleDownloadSelection} onClick={handleDownloadSelection}
> >
<PanelButtonText>baixar seleção</PanelButtonText> <PanelButtonText contrast={props.contrast}>baixar seleção</PanelButtonText>
</Button> </Button>
</Grid> </Grid>
</Grid> </Grid>
...@@ -170,8 +170,8 @@ export default function ResourceList(props) { ...@@ -170,8 +170,8 @@ export default function ResourceList(props) {
/> />
{selectable ? {selectable ?
(<SelectButton (<SelectButton
contrast={props.contrast}
variant="outline" variant="outline"
color="primary"
startIcon={checkBoxIcon(selected[props.resources.indexOf(card)])} startIcon={checkBoxIcon(selected[props.resources.indexOf(card)])}
onClick={() => updateSelected(props.resources.indexOf(card))} onClick={() => updateSelected(props.resources.indexOf(card))}
> >
...@@ -206,15 +206,19 @@ const ResourceListContainer = styled.div` ...@@ -206,15 +206,19 @@ const ResourceListContainer = styled.div`
margin-right: 20; margin-right: 20;
` `
const Title = styled.p` const Title = styled.p`
color: rgb(102, 102, 102); color: ${props => props.contrast === "" ? "#666 !important" : "white !important"};
font-size: 2em; font-size: 2em;
font-weigth: 300; font-weigth: 300;
` `
const SelectButton = styled(Button)` const SelectButton = styled(Button)`
width: 100%; width: 100%;
color: ${props => props.contrast === "" ? "#666 !important" : "yellow !important"};
text-decoration: ${props => props.contrast === "" ? "none !important" : "yellow underline !important"};
` `
const PanelButtonText = styled.span` const PanelButtonText = styled.span`
font-weight: 900; font-weight: 900;
color: ${props => props.contrast === "" ? "#3f51b5 !important" : "yellow !important"};
text-decoration: ${props => props.contrast === "" ? "none !important" : "yellow underline !important"};
` `
const ResourceGrid = styled(Grid)` const ResourceGrid = styled(Grid)`
padding-right: 7px; padding-right: 7px;
......
src/Pages/CollectionPage.js
+ 19
− 14
View file @ 2ea67b3a
...@@ -18,7 +18,6 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/> ...@@ -18,7 +18,6 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
import React, { useRef, useState, useEffect, useContext } from 'react'; import React, { useRef, useState, useEffect, useContext } from 'react';
import { Grid } from '@material-ui/core'; import { Grid } from '@material-ui/core';
import CollectionAuthor from '../Components/CollectionAuthor.js'; import CollectionAuthor from '../Components/CollectionAuthor.js';
import VerticalRuler from '../Components/VerticalRuler.js';
import CollectionDescription from '../Components/CollectionDescription.js'; import CollectionDescription from '../Components/CollectionDescription.js';
import ResourceList from '../Components/ResourceList.js'; import ResourceList from '../Components/ResourceList.js';
import CollectionCommentSection from '../Components/CollectionCommentSection.js'; import CollectionCommentSection from '../Components/CollectionCommentSection.js';
...@@ -56,7 +55,7 @@ export default function CollectionPage(props) { ...@@ -56,7 +55,7 @@ export default function CollectionPage(props) {
} }
if (error) if (error)
return <CollectionNotFound> return <CollectionNotFound contrast={state.contrast}>
<Grid container direction='column' justify='center' alignItems='center' spacing={1}> <Grid container direction='column' justify='center' alignItems='center' spacing={1}>
<Grid item> <Grid item>
<p className="not-found"> <p className="not-found">
...@@ -80,9 +79,9 @@ export default function CollectionPage(props) { ...@@ -80,9 +79,9 @@ export default function CollectionPage(props) {
return <LoadingSpinner text="Carregando coleção..." /> return <LoadingSpinner text="Carregando coleção..." />
else else
return ( return (
<> <div style={state.contrast === "" ? {backgroundColor: "white"} : {backgroundColor: "black"}}>
<BreadCrumbsDiv> <BreadCrumbsDiv>
<StyledBreadCrumbs> <StyledBreadCrumbs contrast={state.contrast}>
<Link to="/">Página Inicial</Link> <Link to="/">Página Inicial</Link>
<span>Coleções</span> <span>Coleções</span>
</StyledBreadCrumbs> </StyledBreadCrumbs>
...@@ -90,6 +89,7 @@ export default function CollectionPage(props) { ...@@ -90,6 +89,7 @@ export default function CollectionPage(props) {
<Grid container direction="row" justify="center" alignItems="center"> <Grid container direction="row" justify="center" alignItems="center">
<Grid item md={3}> <Grid item md={3}>
<CollectionAuthor <CollectionAuthor
contrast={state.contrast}
author_id={collection.owner.id ? collection.owner.id : 0} author_id={collection.owner.id ? collection.owner.id : 0}
name={collection.owner.name ? collection.owner.name : ""} name={collection.owner.name ? collection.owner.name : ""}
imgsrc={collection.owner.avatar ? apiDomain + collection.owner.avatar : noAvatar} /> imgsrc={collection.owner.avatar ? apiDomain + collection.owner.avatar : noAvatar} />
...@@ -98,6 +98,7 @@ export default function CollectionPage(props) { ...@@ -98,6 +98,7 @@ export default function CollectionPage(props) {
<Grid item md={5}> <Grid item md={5}>
<CollectionDescription <CollectionDescription
contrast={state.contrast}
stars={collection.review_average} stars={collection.review_average}
likes={collection.likes_count} likes={collection.likes_count}
liked={collection.liked} liked={collection.liked}
...@@ -108,19 +109,19 @@ export default function CollectionPage(props) { ...@@ -108,19 +109,19 @@ export default function CollectionPage(props) {
<Grid item md={3}> <Grid item md={3}>
<DowloadButton <DowloadButton
contrast={state.contrast}
id={collection_id} id={collection_id}
/> />
<div style={{ height: 12 }}></div> <div style={{ height: 12 }}></div>
<FollowCollectionButton <FollowCollectionButton
contrast={state.contrast}
followed={collection.followed} followed={collection.followed}
user_id={state.currentUser.id} user_id={state.currentUser.id}
collection_id={collection_id} /> collection_id={collection_id} />
</Grid> </Grid>
</Grid> </Grid>
<VerticalRuler width={1} height={100} color="rgb(238, 238, 238)" /> <Grid container justify="center" style={state.contrast === "" ? {backgroundColor: "#f4f4f4"} : {backgroundColor: "black"}}>
<Grid container justify="center" style={{ backgroundColor: '#f4f4f4' }}>
{/* <Grid item xs={1}/> */} {/* <Grid item xs={1}/> */}
<Grid item xs={10}> <Grid item xs={10}>
<ResourceList <ResourceList
...@@ -156,7 +157,7 @@ export default function CollectionPage(props) { ...@@ -156,7 +157,7 @@ export default function CollectionPage(props) {
/> />
</Grid> </Grid>
</Grid> </Grid>
</> </div>
); );
} }
...@@ -164,15 +165,17 @@ const StyledBreadCrumbs = styled(Breadcrumbs)` ...@@ -164,15 +165,17 @@ const StyledBreadCrumbs = styled(Breadcrumbs)`
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
span { span {
color: #a5a5a5; color: ${props => props.contrast === "" ? "#666 !important" : "white !important"};
} }
a { a {
color: #00bcd4; color: ${props => props.contrast === "" ? "#00bcd4 !important" : "yellow !important"};
text-decoration: none; text-decoration: ${props => props.contrast === "" ? "none" : "underline !important"};
} }
`; `;
const CollectionNotFound = styled.div` const CollectionNotFound = styled.div`
background-color: ${props => props.contrast === "" ? "" : "black !important"};
color: ${props => props.contrast === "" ? "#666 !important" : "white !important"};
margin: 1em; margin: 1em;
.not-found{ .not-found{
...@@ -184,8 +187,10 @@ const CollectionNotFound = styled.div` ...@@ -184,8 +187,10 @@ const CollectionNotFound = styled.div`
} }
.back-button{ .back-button{
background-color: #673ab7; background-color: ${props => props.contrast === "" ? "#673ab7 !important" : "black !important"};
color: whitesmoke; border: ${props => props.contrast === "" ? "none" : "1px solid white !important"};
text-decoration: ${props => props.contrast === "" ? "none" : "underline !important"};
color: ${props => props.contrast === "" ? "whitesmoke" : "yellow !important"};
} }
.link{ .link{
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment