diff --git a/src/Components/Comment.js b/src/Components/Comment.js
index 4388ec758a2cdc81a97f8b61f7fb3765b3ef5805..c4a54c2572278700968b1a2202c69b4eb5cea465 100644
--- a/src/Components/Comment.js
+++ b/src/Components/Comment.js
@@ -34,7 +34,6 @@ import ModalExcluir from './ModalExcluirComentario.js'
import { putRequest, deleteRequest } from './HelperFunctions/getAxiosConfig'
export default function Comment(props) {
- console.log(props)
/*
Required props:
rerenderCallback = callback function to trigger re-render on parent component
@@ -148,8 +147,8 @@ export default function Comment(props) {
value={props.rating}
readOnly
size="small"
- style={{ color: "#666" }}
- emptyIcon={<StarBorderIcon fontSize="inherit" style={{ color: "#a5a5a5" }} />}
+ style={state.contrast === "" ? { color: "#666" } : { color: "yellow" }}
+ emptyIcon={<StarBorderIcon fontSize="inherit" style={state.contrast === "" ? { color: "#a5a5a5" } : { color: "yellow" }} />}
/>
</div>
diff --git a/src/Components/ContactButtons/FollowButton.js b/src/Components/ContactButtons/FollowButton.js
index 9be8c975f8f4f2f3f28a60540db0288c7c9e0616..ac46ad43a65cfb5f6049c6150fce2480ad4f0aae 100644
--- a/src/Components/ContactButtons/FollowButton.js
+++ b/src/Components/ContactButtons/FollowButton.js
@@ -154,7 +154,7 @@ export function NoIcon(props) {
{/*----------------------------------------------------------------------------*/}
{
state.currentUser.id !== '' ? (
- <NoIconButton onClick={() => handleFollow(props.followableID)}>seguir</NoIconButton>
+ <NoIconButton contrast={state.contrast} onClick={() => handleFollow(props.followableID)}>seguir</NoIconButton>
)
:
(
@@ -166,21 +166,25 @@ export function NoIcon(props) {
}
const NoIconButton = styled(Button)`
+ &:hover {
+ background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
+ }
.MuiButton-label {
- color : #00bcd4 !important;
+ color: ${props => props.contrast === "" ? "#00bcd4 !important" : "yellow !important"};
}
- background-color : #fff !important;
- border : solid 1px rgba(0,188,212,.85) !important;
+ background-color: ${props => props.contrast === "" ? "#fff !important" : "black !important"};
+ border: ${props => props.contrast === "" ? "solid 1px rgba(0,188,212,.85) !important" : "solid 1px white !important"};
font-size : 14px !important;
border-radius : 3px !important;
height : 36px !important;
min-width : 88px !important;
vertical-align : middle !important;
- color : #00bcd4 !important;
align-items : center !important;
text-align : center !important;
padding : 0 6px !important;
margin : 6px 8px !important;
+ color: ${props => props.contrast === "" ? "#00bcd4 !important" : "yellow !important"};
+ text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"};
`
const StyledButton = styled(Button)`
diff --git a/src/Components/ContactButtons/FollowingButton.js b/src/Components/ContactButtons/FollowingButton.js
index 229f5e44f4eb8dec105371f6e4e8787c60be9c76..f0b09a9a07e4b54bdcf4a2fc7d336c40ec812ee3 100644
--- a/src/Components/ContactButtons/FollowingButton.js
+++ b/src/Components/ContactButtons/FollowingButton.js
@@ -120,6 +120,7 @@ export function NoIconFollowing(props) {
handleConfirm={handleUnfollowPartTwo}
/>
<NoIconButton
+ contrast={props.contrast}
onMouseOver={() => toggleFollowingHover(true)}
onMouseLeave={() => toggleFollowingHover(false)}
onClick={() => handleUnfollowPartOne(props.followedID)}
@@ -157,19 +158,25 @@ export const StyledButton = styled(Button)`
`
const NoIconButton = styled(Button)`
+ &:hover {
+ background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
+ }
.MuiButton-label {
- color : #00bcd4 !important;
+ color: ${props => props.contrast === "" ? "#00bcd4 !important" : "yellow !important"};
}
- background-color : #fff !important;
- border : solid 1px rgba(0,188,212,.85) !important;
+ background-color: ${props => props.contrast === "" ? "#fff !important" : "black !important"};
+ border: ${props => props.contrast === "" ? "solid 1px rgba(0,188,212,.85) !important" : "solid 1px white !important"};
font-size : 14px !important;
border-radius : 3px !important;
height : 36px !important;
min-width : 88px !important;
vertical-align : middle !important;
- text-color : #00bcd4 !important;
align-items : center !important;
text-align : center !important;
padding : 0 6px !important;
margin : 6px 8px !important;
+
+ span{
+ text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"};
+ }
`
diff --git a/src/Components/ContactCardOptions.js b/src/Components/ContactCardOptions.js
index 76c5d05ee47bc35067d89940dbd156691398599a..ef0d2e636651873ede2f19581924be1aa0e8cb3e 100644
--- a/src/Components/ContactCardOptions.js
+++ b/src/Components/ContactCardOptions.js
@@ -16,8 +16,8 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, {useContext, useState} from 'react';
-import {Store} from '../Store'
+import React, { useContext, useState } from 'react';
+import { Store } from '../Store'
import styled from 'styled-components'
import Button from '@material-ui/core/Button';
import Menu from '@material-ui/core/Menu';
@@ -29,7 +29,7 @@ import ReportIcon from '@material-ui/icons/Error';
import PersonAddIcon from '@material-ui/icons/PersonAdd';
import { putRequest } from './HelperFunctions/getAxiosConfig'
import ReportModal from './ReportModal.js'
-import {Link} from 'react-router-dom'
+import { useHistory } from 'react-router-dom'
import LoginModal from './LoginModal.js'
import Snackbar from '@material-ui/core/Snackbar';
import SignUpModal from './SignUpModal'
@@ -40,7 +40,8 @@ function Alert(props) {
}
export default function SimpleMenu(props) {
- const {state} = useContext(Store)
+ const history = useHistory();
+ const { state } = useContext(Store)
const [anchorEl, setAnchorEl] = React.useState(null);
const [loginOpen, setLogin] = useState(false)
const [successfulLoginOpen, handleSuccessfulLogin] = useState(false)
@@ -58,8 +59,8 @@ export default function SimpleMenu(props) {
if (reason === 'clickaway') {
return;
}
-
- handleSuccessfulLogin(false);
+
+ handleSuccessfulLogin(false);
}
function handleClick(event) {
@@ -85,85 +86,83 @@ export default function SimpleMenu(props) {
toggleReportModal(value)
}
- return (
- <React.Fragment>
- <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleSnackbar}
- anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
- >
- <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
- </Snackbar>
- {/*-------------------------------MODALS---------------------------------------*/}
- <LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
- openSnackbar={() => { handleSuccessfulLogin(true) }}
- />
- <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} />
- {/*----------------------------------------------------------------------------*/}
- <>
- {
- reportModal &&
- <ReportModal open={reportModal} handleClose={() => handleModal(false)}
- form="user" complainableId={props.followableID}
- complainableType={"User"}
- {...props}/>
- }
- <div style={{fontSize: "12px", display : "flex", flexDirection : "column", justifyContent : "center"}}>
- <ButtonNoWidth className={`${props.contrast}BackColor ${props.contrast}LinkColor ${props.contrast}Text`} aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick}>
- <MoreVertIcon/>
- </ButtonNoWidth>
- <Menu
- id="simple-menu"
- anchorEl={anchorEl}
- keepMounted
- open={Boolean(anchorEl)}
- onClose={handleClose}
+ return (
+ <React.Fragment>
+ <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleSnackbar}
+ anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
>
- <StyledMenuItem className={`${props.contrast}LinkColor`} contrast={props.contrast} onClick={handleClose}>
- <Link to={"/usuario-publico/" + props.followableID}>
- <ListItemIcon className={`${props.contrast}LinkColor`}><OpenIcon /></ListItemIcon>Abrir
- </Link>
- </StyledMenuItem>
-
+ <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
+ </Snackbar>
+ {/*-------------------------------MODALS---------------------------------------*/}
+ <LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
+ openSnackbar={() => { handleSuccessfulLogin(true) }}
+ />
+ <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} />
+ {/*----------------------------------------------------------------------------*/}
+ <>
{
- props.followed ?
- (
- <StyledMenuItem className={`${props.contrast}LinkColor`} contrast={props.contrast} onClick={() => {handleFollow(props.followableID)}}>
- <ListItemIcon className={`${props.contrast}LinkColor`}><ReportIcon /></ListItemIcon>Deixar de Seguir
- </StyledMenuItem>
- )
- :
- (
- state.currentUser.id !== '' ? (
- <StyledMenuItem className={`${props.contrast}LinkColor`} contrast={props.contrast} onClick={() => {handleFollow(props.followableID)}}>
- <ListItemIcon className={`${props.contrast}LinkColor`}><PersonAddIcon /></ListItemIcon>Seguir
- </StyledMenuItem>
- )
- :
- (
- <StyledMenuItem className={`${props.contrast}LinkColor`} contrast={props.contrast} onClick={() => {handleLogin(props.followableID)}}>
- <ListItemIcon className={`${props.contrast}LinkColor`}><PersonAddIcon /></ListItemIcon>Seguir
- </StyledMenuItem>
- )
- )
+ reportModal &&
+ <ReportModal open={reportModal} handleClose={() => handleModal(false)}
+ form="user" complainableId={props.followableID}
+ complainableType={"User"}
+ {...props} />
}
-
- {
- state.currentUser.id !== '' ? (
- <StyledMenuItem className={`${props.contrast}LinkColor`} contrast={props.contrast} onClick={() => {handleModal(true); handleClose()}}>
- <ListItemIcon className={`${props.contrast}LinkColor`}><ReportIcon /></ListItemIcon>Reportar
- </StyledMenuItem>
- )
- :
- (
- <StyledMenuItem className={`${props.contrast}LinkColor`} contrast={props.contrast} onClick={() => {handleLogin(true)}}>
- <ListItemIcon className={`${props.contrast}LinkColor`}><ReportIcon /></ListItemIcon>Reportar
+ <div style={{ fontSize: "12px", display: "flex", flexDirection: "column", justifyContent: "center" }}>
+ <ButtonNoWidth contrast={state.contrast} aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick}>
+ <MoreVertIcon />
+ </ButtonNoWidth>
+ <Menu
+ id="simple-menu"
+ anchorEl={anchorEl}
+ keepMounted
+ open={Boolean(anchorEl)}
+ onClose={handleClose}
+ >
+ <StyledMenuItem contrast={state.contrast} onClick={() => { history.push(`/usuario-publico/${props.followableID}`, handleClose()) }}>
+ <ListItemIcon><OpenIcon /></ListItemIcon>Abrir
</StyledMenuItem>
- )
- }
- </Menu>
- </div>
- </>
- </React.Fragment>
- );
+
+ {
+ props.followed ?
+ (
+ <StyledMenuItem contrast={state.contrast} onClick={() => { handleFollow(props.followableID) }}>
+ <ListItemIcon><ReportIcon /></ListItemIcon>Deixar de Seguir
+ </StyledMenuItem>
+ )
+ :
+ (
+ state.currentUser.id !== '' ? (
+ <StyledMenuItem contrast={state.contrast} onClick={() => { handleFollow(props.followableID) }}>
+ <ListItemIcon><PersonAddIcon /></ListItemIcon>Seguir
+ </StyledMenuItem>
+ )
+ :
+ (
+ <StyledMenuItem contrast={state.contrast} onClick={() => { handleLogin(props.followableID) }}>
+ <ListItemIcon><PersonAddIcon /></ListItemIcon>Seguir
+ </StyledMenuItem>
+ )
+ )
+ }
+
+ {
+ state.currentUser.id !== '' ? (
+ <StyledMenuItem contrast={state.contrast} onClick={() => { handleModal(true); handleClose() }}>
+ <ListItemIcon><ReportIcon /></ListItemIcon>Reportar
+ </StyledMenuItem>
+ )
+ :
+ (
+ <StyledMenuItem contrast={state.contrast} onClick={() => { handleLogin(true) }}>
+ <ListItemIcon><ReportIcon /></ListItemIcon>Reportar
+ </StyledMenuItem>
+ )
+ }
+ </Menu>
+ </div>
+ </>
+ </React.Fragment >
+ );
}
const ButtonNoWidth = styled(Button)`
@@ -171,8 +170,7 @@ const ButtonNoWidth = styled(Button)`
min-width : 24px !important;
max-height : 24px !important;
padding : 0 !important;
- background-color : #fff !important;
- color : #a5a5a5 !important;
+ background-color: ${props => props.contrast === "" ? "#fff" : "black"};
border : 0 !important;
.MuiButton-root {
@@ -183,6 +181,7 @@ const ButtonNoWidth = styled(Button)`
.MuiSvgIcon-root {
padding-right : 0 !important;
vertical-align : middle;
+ color: ${props => props.contrast === "" ? "#a5a5a5 !important" : "yellow"};
}
.MuiButton-label {
@@ -194,8 +193,12 @@ const StyledMenuItem = styled(MenuItem)`
background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
.MuiSvgIcon-root {
vertical-align : middle !important;
+ color: ${props => props.contrast === "" ? "inherit" : "white"} !important;
}
a {
- color : inherit !important;
+ color: ${props => props.contrast === "" ? "inherit" : "yellow"} !important;
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"} !important;
}
+ color: ${props => props.contrast === "" ? "inherit" : "yellow"} !important;
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"} !important;
`
diff --git a/src/Components/ResourcePageComponents/CommentsArea.js b/src/Components/ResourcePageComponents/CommentsArea.js
index e68a1a23893fa698241899c5a969005e0402e526..9eb44d9dbe8cb261c72b4403b2b52f3c1aa9ceba 100644
--- a/src/Components/ResourcePageComponents/CommentsArea.js
+++ b/src/Components/ResourcePageComponents/CommentsArea.js
@@ -146,7 +146,7 @@ export default function CommentsArea(props) {
(state.currentUser.id !== '') ?
(
<Grid item xs={12} >
- <GrayContainer>
+ <GrayContainer contrast={state.contrast}>
<h3>Conte sua experiência com o Recurso</h3>
<Grid container style={{ paddingTop: "20px" }} spacing={1}>
<Grid item xs={12} sm={2} style={{ paddingLeft: "15px", paddingRight: "15px" }}>
@@ -169,10 +169,10 @@ export default function CommentsArea(props) {
:
(
<Grid item xs={12}>
- <LogInToComment>
+ <LogInToComment contrast={state.contrast}>
<span className="span-laranja">Você precisa entrar para comentar</span>
- <Button onClick={() => handleLogin(true)} style={{ textTransform: "uppercase", color: "#666", fontWeight: "700" }}>
- <ExitToAppIcon />ENTRAR
+ <Button onClick={() => handleLogin(true)} style={state.contrast === "" ? { textTransform: "uppercase", color: "#666", fontWeight: "700" } : { textTransform: "uppercase", color: "yellow", fontWeight: "700", textDecoration: "underline" }}>
+ <ExitToAppIcon style={state.contrast === "" ? { color: "inherit" } : { color: "white" }} />ENTRAR
</Button>
</LogInToComment>
</Grid>
@@ -180,13 +180,13 @@ export default function CommentsArea(props) {
}
{
isLoading ?
- <LoadingDiv>
+ <LoadingDiv contrast={state.contrast}>
<CircularProgress className="loading" />
</LoadingDiv>
:
totalReviews !== 0 ?
(
- <ComentariosBox>
+ <ComentariosBox contrast={state.contrast}>
<h3>{totalReviews} {totalReviews !== 1 ? 'Relatos' : 'Relato'} sobre o uso do Recurso</h3>
{
comentarios.map(comentario =>
@@ -213,7 +213,7 @@ export default function CommentsArea(props) {
}
<div className="load-more">
<IconButton className="button" onClick={handleLoadMoreReviews}>
- <KeyboardArrowDownIcon />
+ <KeyboardArrowDownIcon className="icon" />
</IconButton>
</div>
</ComentariosBox>
@@ -221,12 +221,12 @@ export default function CommentsArea(props) {
:
(
<Grid item xs={12}>
- <LogInToComment>
+ <LogInToComment contrast={state.contrast}>
<img alt="" src={Comentarios} />
<span className="span-laranja">Compartilhe sua experiência com a Rede!</span>
- <AoRelatar>
+ <AoRelatar contrast={state.contrast}>
Ao relatar sua experiência de uso do Recurso você estará auxiliando professores de todo país.
- </AoRelatar>
+ </AoRelatar>
</LogInToComment>
</Grid>
)
@@ -244,7 +244,7 @@ const LoadingDiv = styled.div`
align-items: center;
.loading{
align-self: center;
- color: #ff7f00;
+ color: ${props => props.contrast === "" ? "#ff7f00" : "white"};
size: 24px;
}
`
@@ -259,7 +259,7 @@ const ComentariosBox = styled.div`
font-family: 'Roboto Light','Roboto Regular',Roboto;
font-weight: 300;
font-style: normal;
- color:#666;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
font-size: 1.857em;
margin: 15px 2%;
text-align : flex-start;
@@ -272,6 +272,7 @@ const ComentariosBox = styled.div`
}
.load-more{
+ margin-top : 10px;
width: 100%;
display: flex;
flex-direction: row;
@@ -280,8 +281,16 @@ const ComentariosBox = styled.div`
}
.button{
+ border: ${props => props.contrast === "" ? "0" : "1px solid white"};
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+ :hover{
+ background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24)"};
+ }
}
+
+ .icon{
+ color: ${props => props.contrast === "" ? "#666" : "yellow"};
+ }
`
const AoRelatar = styled.div`
width : 70%;
@@ -289,6 +298,7 @@ const AoRelatar = styled.div`
font-weight : 300;
text-align : center;
padding-bottom : 20px;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
`
const LogInToComment = styled.div`
@@ -302,7 +312,7 @@ const LogInToComment = styled.div`
font-size : 24px;
font-weight : 700;
padding-bottom : 5px;
- color : #ff7f00;
+ color: ${props => props.contrast === "" ? "#ff7f00" : "white"};
}
img {
@@ -312,7 +322,7 @@ const LogInToComment = styled.div`
`
const GrayContainer = styled.div`
- background-color : #fafafa;
+ background-color: ${props => props.contrast === "" ? "#fafafa" : "black"};
font-weight : 400;
font-size : 14px;
padding-bottom : 20px;
@@ -329,7 +339,7 @@ const GrayContainer = styled.div`
text-align: center;
font-weight: 300;
font-style: normal;
- color: #666;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
font-size: 1.857em;
margin-bottom : 10px;
margin-left : 2%;
diff --git a/src/Components/ResourcePageComponents/Sobre.js b/src/Components/ResourcePageComponents/Sobre.js
index 81db93694c786dfc5b8f46f4a738c7419708f1f1..6ab60c24fe1e962d11cc1b9c514df1f101a2bdd9 100644
--- a/src/Components/ResourcePageComponents/Sobre.js
+++ b/src/Components/ResourcePageComponents/Sobre.js
@@ -220,7 +220,7 @@ export default function Sobre(props) {
</Grid>
<Grid item xs={windowWidth > 990 ? 3 : 12}>
- <MetasObjeto>
+ <MetasObjeto contrast={state.contrast}>
<div className="enviado-por">
Enviado por:
</div>
@@ -250,7 +250,7 @@ export default function Sobre(props) {
:
(
<>
- <NoIcon contrast={state.contrast} followableID={props.id} toggleFollowed={toggleFollowed} />
+ <NoIcon followableID={props.id} toggleFollowed={toggleFollowed} />
<ContactCardOptions followed={followed} followableID={props.id} toggleFollowed={toggleFollowed} />
</>
)