diff --git a/src/Components/CollectionAuthor.js b/src/Components/CollectionAuthor.js
index c6c299cf08bba817e4a14e684609084840c44f4b..3d5c42318f5db49f869d0b462d24879b64c4607d 100644
--- a/src/Components/CollectionAuthor.js
+++ b/src/Components/CollectionAuthor.js
@@ -30,19 +30,20 @@ export default function CollectionAuthor(props) {
justify="center"
alignItems="center">
{props.imgsrc ?
- <UserLink
+ <Link
to={`/usuario-publico/${props.author_id}`}
+ contrast={props.contrast}
>
<UserAvatar src={props.imgsrc} />
- </UserLink>
+ </Link>
:
<CircularProgress color="secondary" />
}
- <InfoText>Coleção organizada por:</InfoText>
+ <InfoText contrast={props.contrast}>Coleção organizada por:</InfoText>
{props.name ?
- <UserLink to={`/usuario-publico/${props.author_id}`} >
- <UserName>{props.name}</UserName>
- </UserLink>
+ <Link to={`/usuario-publico/${props.author_id}`} contrast={props.contrast}>
+ <UserName contrast={props.contrast}>{props.name}</UserName>
+ </Link>
:
<CircularProgress />
}
@@ -58,15 +59,10 @@ const UserAvatar = styled.img`
const InfoText = styled.p`
margin-bottom: 0;
padding-bottom: 0;
- color: #666;
+ color: ${props => props.contrast === "" ? "#666 !important" : "white !important"};
`
const UserName = styled.h2`
margin-top: 10px;
- color: #673ab7;
-`
-const UserLink = styled(Link)`
- text-decoration: none;
- &:focus, &:hover, &:visited, &:link, &:active {
- text-decoration: none;
- }
+ color: ${props => props.contrast === "" ? "#673ab7 !important" : "yellow !important"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "yellow underline"};
`
diff --git a/src/Components/CollectionDescription.js b/src/Components/CollectionDescription.js
index 60de747f5bb7c17d9dff5d1a9acb2f69d8c95808..a8eedcbce66be688362e3976320c1dd9118b67b7 100644
--- a/src/Components/CollectionDescription.js
+++ b/src/Components/CollectionDescription.js
@@ -43,7 +43,9 @@ export default function CollectionDescription(props) {
}, [props.collection_id]);
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
item
justify="center"
@@ -59,6 +61,7 @@ export default function CollectionDescription(props) {
>
<Grid item>
<CollectionReview
+ contrast={props.contrast}
stars={props.stars}
liked={props.liked}
likes={props.likes}
@@ -92,6 +95,5 @@ export default function CollectionDescription(props) {
const Title = styled.h1`
font-size: 2.5em;
- color: rgb(102, 102, 102);
text-align: center
`
\ No newline at end of file
diff --git a/src/Components/CollectionDowloadButton.js b/src/Components/CollectionDowloadButton.js
index bda45946d26e9fb373ba79d5e006d4cacb5bb495..427b3464a833c94e60b0a76d55de7dc74b936767 100644
--- a/src/Components/CollectionDowloadButton.js
+++ b/src/Components/CollectionDowloadButton.js
@@ -96,6 +96,7 @@ const DowloadButton = (props) => {
</Alert>
</Snackbar>
<DownloadButton
+ contrast={props.contrast}
variant="outlined"
color="primary"
startIcon={<GetAppIcon fontSize="large" />}
@@ -113,6 +114,10 @@ const ButtonText = styled.span`
font-size: 1.2em;
`
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-right: 10;
width: 250px;
diff --git a/src/Components/CollectionReview.js b/src/Components/CollectionReview.js
index 0d94757b2dbd235e2b3b9ef2b8077707b8a9a357..c037071df59ed871b086fb9b905a90c3e5ecba6f 100644
--- a/src/Components/CollectionReview.js
+++ b/src/Components/CollectionReview.js
@@ -107,7 +107,7 @@ export default function CollectionReview(props) {
}, [props])
return (
- <Grid container direction="column">
+ <Grid container direction="column" style={props.contrast === "" ? {color: "#666"} : {color: "white"}}>
<SnackBarComponent
snackbarOpen={snackInfo.open}
handleClose={handleCloseSnack}
@@ -115,29 +115,31 @@ export default function CollectionReview(props) {
text={snackInfo.text}
color={snackInfo.color}
/>
- <Grid sm={12} container direction="row" alignItems="center">
+ <Grid sm={12} container direction="row" alignItems="center"
+ style={{justifyContent: "center"}}
+ >
<Grid item>
<Rating
+ style={props.contrast === "" ? {} : {color: "white"}}
name="customized-empty"
value={Number(stars)}
readOnly
onClick={props.scrollToComment}
- style={{ color: "#666" }}
emptyIcon={<StarBorderIcon fontSize="inherit" />}
/>
</Grid>
<Grid item justify="center" alignItems="center">
- <IconButton aria-label="like" onClick={handleLikeClick}>
- {likes}<FavoriteIcon style={{ fill: liked ? "red" : null }} />
+ <IconButton style={{color: "inherit"}} aria-label="like" onClick={handleLikeClick}>
+ {likes}<FavoriteIcon style={props.contrast === "" ? {fill: liked ? "red" : null} : {fill: "yellow"}} />
</IconButton>
</Grid>
</Grid>
<Grid item sm={12}>
<IconButton
aria-label="report"
- style={{ fontSize: 'small' }}
+ style={{ fontSize: 'medium' }}
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>
<ReportModal
open={reportOpen}
diff --git a/src/Components/ContactButtons/FollowButton.js b/src/Components/ContactButtons/FollowButton.js
index c707993a3adb27ce5dc6c4307b8a0a43160cd48f..9be8c975f8f4f2f3f28a60540db0288c7c9e0616 100644
--- a/src/Components/ContactButtons/FollowButton.js
+++ b/src/Components/ContactButtons/FollowButton.js
@@ -80,7 +80,7 @@ export default function FollowButton(props) {
{/*----------------------------------------------------------------------------*/}
{
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"}}
onClick={() => handleFollow(props.followerID)}>
<PersonAddIcon style={{
@@ -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"}}
onClick={() => handleLogin(true)}>
<PersonAddIcon style={{
diff --git a/src/Components/ContactButtons/FollowingButton.js b/src/Components/ContactButtons/FollowingButton.js
index d688536fe76d122b69698774b2b0d9903169b9dc..229f5e44f4eb8dec105371f6e4e8787c60be9c76 100644
--- a/src/Components/ContactButtons/FollowingButton.js
+++ b/src/Components/ContactButtons/FollowingButton.js
@@ -64,7 +64,7 @@ export default function FollowingButton(props) {
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"}}
>
DEIXAR DE SEGUIR
@@ -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"}}
>
<GroupIcon style={{
diff --git a/src/Components/FollowCollectionButton.js b/src/Components/FollowCollectionButton.js
index e89f8901c0e586124c99df453dc70ac627027f63..666c49d96c16f4973a5ca4d2232222ac0884e0c6 100644
--- a/src/Components/FollowCollectionButton.js
+++ b/src/Components/FollowCollectionButton.js
@@ -188,8 +188,8 @@ export default function FollowCollectionButton(props) {
color={snackInfo.color}
/>
<FollowButton
+ contrast={props.contrast}
variant={variant}
- color="primary"
startIcon={icon}
size="small"
onMouseEnter={handleMouseEnter}
@@ -219,6 +219,10 @@ const ButtonText = styled.span`
font-size: 1.2em;
`
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-right: 10;
width: 250px;
diff --git a/src/Components/MenuBar.js b/src/Components/MenuBar.js
index 1928f266b0dfe152f1398d9ddb2cb0ac315df7cb..7cb8c6d998af016f49feed4db55e13fafc9a253b 100644
--- a/src/Components/MenuBar.js
+++ b/src/Components/MenuBar.js
@@ -52,7 +52,8 @@ const ButtonPublicarRecurso = styled(Button)`
font-family : 'Roboto', sans serif;
box-shadow : none !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;
font-weight : 500 !important;
text-transform: capitalize !important;
@@ -93,8 +94,6 @@ const Left = styled.span`
export const ButtonPubRecursoStyled = styled(Button)`
font-weight : 500 !important;
- border : 1.5px #666 solid !important;
- color: #666;
box-shadow: none;
margin : 0 8px !important;
font-weight : normal !important;
@@ -188,9 +187,9 @@ export default function MenuBar(props) {
<>
<div style={{ boxSizing: "border-box" }}>
<Link to="/termos-publicar-recurso">
- <ButtonPublicarRecurso contrast={state.contrast} className={`${state.contrast}BackColor`}>
- <CloudUploadIcon className={`${state.contrast}IconColor`} style={{ color: "white", marginLeft: "0" }} />
- <span className={`${state.contrast}LinkColor`} style={{ color: "#fff", textAlign: "center", alignSelf: "center", fontWeight: "500" }} >
+ <ButtonPublicarRecurso contrast={state.contrast} className={`${state.contrast}LinkColor`}>
+ <CloudUploadIcon className={`${state.contrast}IconColor`} style={{ marginLeft: "0" }} />
+ <span style={{textAlign: "center", alignSelf: "center", fontWeight: "500" }} >
PUBLICAR RECURSO
</span>
</ButtonPublicarRecurso>
@@ -207,9 +206,9 @@ export default function MenuBar(props) {
)
: (
<React.Fragment>
- <ButtonPubRecursoStyled contrast={state.contrast} className={`${state.contrast}LinkColor`} 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 className={`${state.contrast}LinkColor`} onClick={props.openSignUp}>Cadastre-<span style={{ textTransform: 'lowercase' }}>se</span></ButtonStyled>
+ <ButtonPubRecursoStyled contrast={state.contrast} className={`${state.contrast}LinkColor ${state.contrast}Border`} onClick={props.openLogin}>PUBLICAR RECURSO?</ButtonPubRecursoStyled>
+ <ButtonStyled contrast={state.contrast} 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.openSignUp}>Cadastre-<span style={{ textTransform: 'lowercase' }}>se</span></ButtonStyled>
</React.Fragment>
)
}
diff --git a/src/Components/ResourceList.js b/src/Components/ResourceList.js
index 1abdd387ee449a6376aec694239c914dced386bc..e8dc0989eee3da3281e46e874d327e79c39215ef 100644
--- a/src/Components/ResourceList.js
+++ b/src/Components/ResourceList.js
@@ -124,7 +124,7 @@ export default function ResourceList(props) {
<ResourceListContainer>
<Grid container direction="row" justify="space-around" alignItems="center">
<Grid item>
- <Title>
+ <Title contrast={props.contrast}>
{props.resources.length ?
props.resources.length + " recurso" + (props.resources.length === 1 ? "" : "s")
: "Carregando coleção"}
@@ -132,19 +132,19 @@ export default function ResourceList(props) {
</Grid>
<Grid item>
<Button color="primary" onClick={() => setSelectable(!selectable)}>
- <PanelButtonText>
+ <PanelButtonText contrast={props.contrast}>
{selectable ? "Desativar" : "Ativar"} seleção
</PanelButtonText>
</Button>
</Grid>
<Grid item>
<Button
- color="primary"
+ style={props.contrast === "" ? {color: "#3f51b5", border: "1px solid #3f51b5"} : {color: "white", border: "1px solid white"}}
variant="outlined"
startIcon={<GetAppIcon fontSize="large" />}
onClick={handleDownloadSelection}
>
- <PanelButtonText>baixar seleção</PanelButtonText>
+ <PanelButtonText contrast={props.contrast}>baixar seleção</PanelButtonText>
</Button>
</Grid>
</Grid>
@@ -170,8 +170,8 @@ export default function ResourceList(props) {
/>
{selectable ?
(<SelectButton
+ contrast={props.contrast}
variant="outline"
- color="primary"
startIcon={checkBoxIcon(selected[props.resources.indexOf(card)])}
onClick={() => updateSelected(props.resources.indexOf(card))}
>
@@ -206,15 +206,19 @@ const ResourceListContainer = styled.div`
margin-right: 20;
`
const Title = styled.p`
- color: rgb(102, 102, 102);
+ color: ${props => props.contrast === "" ? "#666 !important" : "white !important"};
font-size: 2em;
font-weigth: 300;
`
const SelectButton = styled(Button)`
width: 100%;
+ color: ${props => props.contrast === "" ? "#666 !important" : "yellow !important"};
+ text-decoration: ${props => props.contrast === "" ? "none !important" : "yellow underline !important"};
`
const PanelButtonText = styled.span`
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)`
padding-right: 7px;
diff --git a/src/Pages/CollectionPage.js b/src/Pages/CollectionPage.js
index 7e093abe9592f779fd2969efbc2ff5ada7665f64..a894486a65a74b25f6a1560fc89c368f3ef04c83 100644
--- a/src/Pages/CollectionPage.js
+++ b/src/Pages/CollectionPage.js
@@ -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 { Grid } from '@material-ui/core';
import CollectionAuthor from '../Components/CollectionAuthor.js';
-import VerticalRuler from '../Components/VerticalRuler.js';
import CollectionDescription from '../Components/CollectionDescription.js';
import ResourceList from '../Components/ResourceList.js';
import CollectionCommentSection from '../Components/CollectionCommentSection.js';
@@ -56,7 +55,7 @@ export default function CollectionPage(props) {
}
if (error)
- return <CollectionNotFound>
+ return <CollectionNotFound contrast={state.contrast}>
<Grid container direction='column' justify='center' alignItems='center' spacing={1}>
<Grid item>
<p className="not-found">
@@ -73,16 +72,16 @@ export default function CollectionPage(props) {
Voltar para a busca de coleções.
</Button>
</Link>
- </Grid>
+ </Grid>
</Grid>
</CollectionNotFound >
if (loading)
return <LoadingSpinner text="Carregando coleção..." />
else
return (
- <>
+ <div style={state.contrast === "" ? {backgroundColor: "white"} : {backgroundColor: "black"}}>
<BreadCrumbsDiv>
- <StyledBreadCrumbs>
+ <StyledBreadCrumbs contrast={state.contrast}>
<Link to="/">Página Inicial</Link>
<span>Coleções</span>
</StyledBreadCrumbs>
@@ -90,6 +89,7 @@ export default function CollectionPage(props) {
<Grid container direction="row" justify="center" alignItems="center">
<Grid item md={3}>
<CollectionAuthor
+ contrast={state.contrast}
author_id={collection.owner.id ? collection.owner.id : 0}
name={collection.owner.name ? collection.owner.name : ""}
imgsrc={collection.owner.avatar ? apiDomain + collection.owner.avatar : noAvatar} />
@@ -98,6 +98,7 @@ export default function CollectionPage(props) {
<Grid item md={5}>
<CollectionDescription
+ contrast={state.contrast}
stars={collection.review_average}
likes={collection.likes_count}
liked={collection.liked}
@@ -108,19 +109,19 @@ export default function CollectionPage(props) {
<Grid item md={3}>
<DowloadButton
+ contrast={state.contrast}
id={collection_id}
/>
<div style={{ height: 12 }}></div>
<FollowCollectionButton
+ contrast={state.contrast}
followed={collection.followed}
user_id={state.currentUser.id}
collection_id={collection_id} />
</Grid>
</Grid>
- <VerticalRuler width={1} height={100} color="rgb(238, 238, 238)" />
-
- <Grid container justify="center" style={{ backgroundColor: '#f4f4f4' }}>
+ <Grid container justify="center" style={state.contrast === "" ? {backgroundColor: "#f4f4f4"} : {backgroundColor: "black"}}>
{/* <Grid item xs={1}/> */}
<Grid item xs={10}>
<ResourceList
@@ -156,7 +157,7 @@ export default function CollectionPage(props) {
/>
</Grid>
</Grid>
- </>
+ </div>
);
}
@@ -164,15 +165,17 @@ const StyledBreadCrumbs = styled(Breadcrumbs)`
display: flex;
justify-content: flex-start;
span {
- color: #a5a5a5;
+ color: ${props => props.contrast === "" ? "#666 !important" : "white !important"};
}
a {
- color: #00bcd4;
- text-decoration: none;
+ color: ${props => props.contrast === "" ? "#00bcd4 !important" : "yellow !important"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline !important"};
}
`;
const CollectionNotFound = styled.div`
+ background-color: ${props => props.contrast === "" ? "" : "black !important"};
+ color: ${props => props.contrast === "" ? "#666 !important" : "white !important"};
margin: 1em;
.not-found{
@@ -184,8 +187,10 @@ const CollectionNotFound = styled.div`
}
.back-button{
- background-color: #673ab7;
- color: whitesmoke;
+ background-color: ${props => props.contrast === "" ? "#673ab7 !important" : "black !important"};
+ 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{