diff --git a/src/Components/AreasSubPagesFunction.js b/src/Components/AreasSubPagesFunction.js
index 2572241b668168cdeb25439571bb177e960b3df3..85ae6badd9696afadd23fc8567e9eabac36a2347 100644
--- a/src/Components/AreasSubPagesFunction.js
+++ b/src/Components/AreasSubPagesFunction.js
@@ -97,28 +97,28 @@ function ReqResources(props) {
{
rows.length >= 1 ?
rows.map((row, index) => (
- <Row style={{ paddingBottom: "5px", margin: '0 auto', width: "80%", justifyContent: "center", minHeight: "50px" }} key={(index + 1)}>
- {row.map((card) => (
- <div style={{ marginLeft: 10, display: 'flex' }} key={card.id * (index + 1)}>
- <ResourceCardFunction
- contrast={props.contrast}
- avatar={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.publisher.name}
- tags={card.tags}
- href={"/recurso/" + card.id}
- downloadableLink={card.default_attachment_location}
- />
- </div>
- ))}
- </Row>
+ <Row style={{ paddingBottom: "5px", margin: '0 auto', width: "80%", justifyContent: "center", minHeight: "50px" }} key={(index + 1)}>
+ {row.map((card) => (
+ <div style={{ marginLeft: 10, display: 'flex' }} key={card.id * (index + 1)}>
+ <ResourceCardFunction
+ contrast={props.contrast}
+ avatar={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.publisher.name}
+ tags={card.tags}
+ href={"/recurso/" + card.id}
+ downloadableLink={card.default_attachment_location}
+ />
+ </div>
+ ))}
+ </Row>
))
:
<Grid container justify="center" alignItems="center">
diff --git a/src/Components/ButtonAvaliarRecurso.js b/src/Components/ButtonAvaliarRecurso.js
index 8b307048182a36bd0cafa1063a86b45ad64105b8..0a7d59a10b1aa0743d0208692e0aec7bc39b3412 100644
--- a/src/Components/ButtonAvaliarRecurso.js
+++ b/src/Components/ButtonAvaliarRecurso.js
@@ -6,18 +6,20 @@ import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
export default function ButtonAvaliarRecurso (props) {
return (
- <StyledButton onClick={props.callback}>
- <ExpandMoreIcon/> AVALIAR RECURSO
+ <StyledButton contrast={props.contrast} onClick={props.callback}>
+ <ExpandMoreIcon style={{color: "white"}}/> AVALIAR RECURSO
</StyledButton>
)
}
const StyledButton = styled(Button)`
&:hover {
- background-color : #ed6f00 !important;
+ background-color: ${props => props.contrast === "" ? "#ed6f00" : "black"} !important;
}
- background-color : #ff7f00 !important;
- color : #fff !important;
+ background-color: ${props => props.contrast === "" ? "#ff7f00" : "black"} !important;
+ border: ${props => props.contrast === "" ? "none" : "1px solid white"} !important;
+ color : ${props => props.contrast === "" ? "white" : "yellow"} !important;
+ text-decoration : ${props => props.contrast === "" ? "none" : "underline"} !important;
font-weight : 600 !important;
box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important;
.MuiSvgIcon-root {
diff --git a/src/Components/ButtonGuardarColecao.js b/src/Components/ButtonGuardarColecao.js
index 68a6d2742ad5256c6fe717a85225593f50ff5df5..ca0729a269e8d756bfc4686eb04acded43dbce12 100644
--- a/src/Components/ButtonGuardarColecao.js
+++ b/src/Components/ButtonGuardarColecao.js
@@ -46,9 +46,9 @@ export default function ButtonGuardarColecao(props) {
return (
<>
- <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin}
+ <SignUpModal contrast={props.contrast} open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin}
/>
- <LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
+ <LoginModal contrast={props.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
openSnackbar={() => { handleSuccessfulLogin(true) }}
/>
<Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleLoginSnackbar}
@@ -62,7 +62,7 @@ export default function ButtonGuardarColecao(props) {
<StyledButton onClick={handleGuardar} className={`${props.contrast}LinkColor`}
style={props.contrast === "" ? {border: "2px solid #f07e05", borderRadius : "5px", color :"#f07e05"} : {border: "1px solid white", borderRadius : "5px", color :"#f07e05"}}
>
- <CreateNewFolderIcon /> GUARDAR
+ <CreateNewFolderIcon className={`${props.contrast}IconColor`}/><span>GUARDAR</span>
</StyledButton>
</>
)
diff --git a/src/Components/CloseModalButton.js b/src/Components/CloseModalButton.js
index 00e8b3c34553c1ced9ba1b6e397fd5f404ef571d..186f36f06da8c452037c20df5093dd01780d984c 100644
--- a/src/Components/CloseModalButton.js
+++ b/src/Components/CloseModalButton.js
@@ -6,7 +6,7 @@ import CloseIcon from '@material-ui/icons/Close';
export default function CloseModalButton (props) {
return (
<StyledCloseModalButton onClick={props.handleClose}>
- <CloseIcon/>
+ <CloseIcon style={props.contrast === "" ? { color: "#666" } : { color: "white" }}/>
</StyledCloseModalButton>
)
}
diff --git a/src/Components/ColCardOwnerOptions.js b/src/Components/ColCardOwnerOptions.js
index 3199c61edb4b9487cc18f6f041771971adbdfdeb..bc77db898a30d713de3686a7a33a43affee1588b 100644
--- a/src/Components/ColCardOwnerOptions.js
+++ b/src/Components/ColCardOwnerOptions.js
@@ -31,61 +31,59 @@ import ModalExcluirColecao from './ModalExcluirColecao.js'
import ModalEditarColecao from './ModalEditarColecao.js'
export default function ColCardOwnerOptions (props) {
- const [anchorEl, setAnchorEl] = React.useState(null);
-
- function handleClick(event) {
- setAnchorEl(event.currentTarget);
- }
-
- function handleClose() {
- setAnchorEl(null);
- }
-
- const [modalExcluirOpen, toggleModalExcluir] = useState(false)
-
- const [modalEditarOpen, toggleModalEditar] = useState(false)
-
-
- return (
- <>
- <ModalExcluirColecao id={props.id}
- open={modalExcluirOpen} handleClose={() => {toggleModalExcluir(false)}} removeColl={props.removeColl}
- />
- <ModalEditarColecao id={props.id}
- open={modalEditarOpen} handleClose={() => {toggleModalEditar(false)}}
- changeColName={props.changeColName} changeColPrivacy={props.changeColPrivacy}
- />
-
- <div style={{fontSize: "12px"}}>
- <Button className={`${props.contrast}LinkColor`} aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick} style={{color : "#666"}}>
- OPÇÕES <MoreVertIcon style={{color : "inherit"}}/>
- </Button>
- <Menu
- id="simple-menu"
- anchorEl={anchorEl}
- keepMounted
- open={Boolean(anchorEl)}
- onClose={handleClose}
- >
- <StyledMenuItem className={`${props.contrast}LinkColor`} contrast={props.contrast}>
- <Link to={"/colecao-do-usuario/" + props.id}>
- <ListItemIcon className={`${props.contrast}LinkColor`}><OpenIcon /></ListItemIcon>Abrir
- </Link>
- </StyledMenuItem>
-
- <StyledMenuItem className={`${props.contrast}LinkColor`} contrast={props.contrast} onClick={() => {toggleModalEditar(true)}}>
- <ListItemIcon className={`${props.contrast}LinkColor`}><CreateIcon /></ListItemIcon>Editar
- </StyledMenuItem>
-
- <StyledMenuItem className={`${props.contrast}LinkColor`} contrast={props.contrast} onClick={() => {toggleModalExcluir(true)}} >
- <ListItemIcon className={`${props.contrast}LinkColor`}><DeleteForeverIcon /></ListItemIcon>Excluir
- </StyledMenuItem>
-
-
- </Menu>
- </div>
- </>
- )
+ const [anchorEl, setAnchorEl] = React.useState(null);
+
+ function handleClick(event) {
+ setAnchorEl(event.currentTarget);
+ }
+
+ function handleClose() {
+ setAnchorEl(null);
+ }
+
+ const [modalExcluirOpen, toggleModalExcluir] = useState(false)
+
+ const [modalEditarOpen, toggleModalEditar] = useState(false)
+
+
+ return (
+ <>
+ <ModalExcluirColecao id={props.id}
+ contrast={props.contrast} open={modalExcluirOpen} handleClose={() => {toggleModalExcluir(false)}} removeColl={props.removeColl}
+ />
+ <ModalEditarColecao id={props.id}
+ contrast={props.contrast} open={modalEditarOpen} handleClose={() => {toggleModalEditar(false)}}
+ changeColName={props.changeColName} changeColPrivacy={props.changeColPrivacy}
+ />
+
+ <div style={{fontSize: "12px"}}>
+ <Button className={`${props.contrast}LinkColor`} aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick} style={{color : "#666"}}>
+ OPÇÕES <MoreVertIcon className={`${props.contrast}IconColor`}/>
+ </Button>
+ <Menu
+ id="simple-menu"
+ anchorEl={anchorEl}
+ keepMounted
+ open={Boolean(anchorEl)}
+ onClose={handleClose}
+ >
+ <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast}>
+ <Link to={"/colecao-do-usuario/" + props.id}>
+ <ListItemIcon className={`${props.contrast}IconColor`}><OpenIcon /></ListItemIcon>Abrir
+ </Link>
+ </StyledMenuItem>
+
+ <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={() => {toggleModalEditar(true)}}>
+ <ListItemIcon className={`${props.contrast}IconColor`}><CreateIcon /></ListItemIcon>Editar
+ </StyledMenuItem>
+
+ <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={() => {toggleModalExcluir(true)}} >
+ <ListItemIcon className={`${props.contrast}IconColor`}><DeleteForeverIcon /></ListItemIcon>Excluir
+ </StyledMenuItem>
+ </Menu>
+ </div>
+ </>
+ )
}
export const StyledMenuItem = styled(MenuItem)`
diff --git a/src/Components/ColCardPublicOptions.js b/src/Components/ColCardPublicOptions.js
index 4e014419bfb43a8b7e256edf43781564cfd9fbe8..88cebaf2b2373b45e0c5a5c3749533e7b933b4a6 100644
--- a/src/Components/ColCardPublicOptions.js
+++ b/src/Components/ColCardPublicOptions.js
@@ -63,7 +63,7 @@ export default function ColCardPublicOptions({ contrast, id, userFollowingCol, h
onClick={handleClick}
style={{ color: "#666" }}
>
- <MoreVertIcon className={`${contrast}LinkColor`} style={{ color: "inherit" }} />
+ <MoreVertIcon className={`${contrast}IconColor`} style={{ color: "inherit" }} />
</Button>
<Menu
id="simple-menu"
@@ -72,9 +72,9 @@ export default function ColCardPublicOptions({ contrast, id, userFollowingCol, h
open={Boolean(anchorEl)}
onClose={handleClose}
>
- <StyledMenuItem className={`${contrast}LinkColor`} contrast={contrast}>
+ <StyledMenuItem className={`${contrast}LinkColor ${contrast}Text`} contrast={contrast}>
<Link to={"/colecao-do-usuario/" + id}>
- <ListItemIcon className={`${contrast}LinkColor`}>
+ <ListItemIcon className={`${contrast}IconColor`}>
<OpenIcon />
</ListItemIcon>
Abrir
@@ -82,20 +82,20 @@ export default function ColCardPublicOptions({ contrast, id, userFollowingCol, h
</StyledMenuItem>
<StyledMenuItem
- className={`${contrast}LinkColor`}
+ className={`${contrast}LinkColor ${contrast}Text`}
contrast={contrast}
onClick={() =>
window.open("/colecao-do-usuario/" + id, "_blank")
}
>
- <ListItemIcon className={`${contrast}LinkColor`}>
+ <ListItemIcon className={`${contrast}IconColor ${contrast}Text`}>
<OpenInBrowserIcon />
</ListItemIcon>
Abrir em nova guia
</StyledMenuItem>
- <StyledMenuItem className={`${contrast}LinkColor`} contrast={contrast} onClick={handleLike}>
- <ListItemIcon className={`${contrast}LinkColor`}>
+ <StyledMenuItem className={`${contrast}LinkColor ${contrast}Text`} contrast={contrast} onClick={handleLike}>
+ <ListItemIcon className={`${contrast}IconColor`}>
{
liked ?
<FavoriteIcon /> : <FavoriteIcon />
@@ -107,8 +107,8 @@ export default function ColCardPublicOptions({ contrast, id, userFollowingCol, h
}
</StyledMenuItem>
- <StyledMenuItem className={`${contrast}LinkColor`} contrast={contrast} onClick={handleFollow}>
- <ListItemIcon className={`${contrast}LinkColor`}>
+ <StyledMenuItem className={`${contrast}LinkColor ${contrast}Text`} contrast={contrast} onClick={handleFollow}>
+ <ListItemIcon className={`${contrast}IconColor`}>
{
userFollowingCol ?
<ExitToAppIcon /> : <AddIcon />
@@ -121,7 +121,7 @@ export default function ColCardPublicOptions({ contrast, id, userFollowingCol, h
</StyledMenuItem>
<StyledMenuItem
- className={`${contrast}LinkColor`}
+ className={`${contrast}LinkColor ${contrast}Text`}
contrast={contrast}
onClick={() => {
if (currentUserId)
@@ -130,7 +130,7 @@ export default function ColCardPublicOptions({ contrast, id, userFollowingCol, h
handleLogin()
}}
>
- <ListItemIcon className={`${contrast}LinkColor`}>
+ <ListItemIcon className={`${contrast}IconColor`}>
<ReportProblemIcon />
</ListItemIcon>
Reportar
diff --git a/src/Components/CollectionCardFunction.js b/src/Components/CollectionCardFunction.js
index 391b3f806f5e6814bb24006111b1008e0adb60a4..21caf2bd1b53f295f53eea0a5603d9fab3d24df0 100644
--- a/src/Components/CollectionCardFunction.js
+++ b/src/Components/CollectionCardFunction.js
@@ -91,8 +91,8 @@ export default function CollectionCardFunction(props) {
const RenderFollowButton = () => {
return (
- <FollowButton className={`${props.contrast}LinkColor`} style={props.contrast === "" ? { border: "2px solid #503096", borderRadius: "5px", color: "#503096" } : { border: "1px solid white", borderRadius: "5px", color: "#503096" }} onClick={handleFollow}>
- <AddIcon /><span>SEGUIR</span>
+ <FollowButton className={`${props.contrast}LinkColor`} style={props.contrast === "" ? {border: "2px solid #503096", borderRadius : "5px", color :"#503096" } : {border: "1px solid white", borderRadius : "5px", color :"#503096"}} onClick={handleFollow}>
+ <AddIcon className={`${props.contrast}IconColor`}/><span>SEGUIR</span>
</FollowButton>
)
}
@@ -106,23 +106,23 @@ export default function CollectionCardFunction(props) {
const RenderFollowingButton = () => {
return (
- <FollowingButton className={`${props.contrast}LinkColor`} style={props.contrast === "" ? { border: "2px solid #503096", borderRadius: "5px", color: "#fff", backgroundColor: "#503096" } : { border: "1px solid white", borderRadius: "5px", color: "#503096" }} onMouseOver={() => toggleFollowingHover(true)}
+ <FollowingButton className={`${props.contrast}LinkColor`} style={props.contrast === "" ? {border: "2px solid #503096", borderRadius : "5px", color :"#fff", backgroundColor : "#503096" } : {border: "1px solid white", borderRadius : "5px", color :"#503096"}}onMouseOver={() => toggleFollowingHover(true)}
onMouseLeave={() => toggleFollowingHover(false)} onClick={handleFollow}>
{
- followingHover ?
- (
- [
- <span>DEIXAR DE SEGUIR</span>
- ]
- )
- :
- (
- [
- <React.Fragment>
- <CheckIcon /><span>SEGUINDO</span>
- </React.Fragment>
- ]
- )
+ followingHover ?
+ (
+ [
+ <span>DEIXAR DE SEGUIR</span>
+ ]
+ )
+ :
+ (
+ [
+ <React.Fragment>
+ <CheckIcon className={`${props.contrast}IconColor`}/><span>SEGUINDO</span>
+ </React.Fragment>
+ ]
+ )
}
</FollowingButton>
)
@@ -130,29 +130,29 @@ export default function CollectionCardFunction(props) {
const SlideAnimationContent = (contrast) => {
return (
- <SlideContentDiv style={contrast === '' ? { backgroundColor: "#7e57c2" } : { backgroundColor: "inherit" }}>
+ <SlideContentDiv style={contrast === '' ? {backgroundColor: "#7e57c2"} : {backgroundColor: "inherit"}}>
<HeaderContainer container="row" justify="flex-start" alignItems="center">
<AvatarDiv item xs={2}>
<img className="img" src={userAvatar} alt="user avatar" />
</AvatarDiv>
<EnviadoPor item xs={10}>
Enviado por:
- <br />
+ <br />
<p>{props.author}</p>
</EnviadoPor>
</HeaderContainer>
{
- props.tags ?
- <TagContainer container direction="row">
- {
- props.tags.map((tag) =>
- <Grid item key={tag.id}>
- <span className={`${props.contrast}BackColor ${props.contrast}Text`}>{tag.name}</span>
- </Grid>
- )
- }
- </TagContainer> :
- null
+ props.tags ?
+ <TagContainer container direction="row">
+ {
+ props.tags.map((tag) =>
+ <Grid item key={tag.id}>
+ <span className={`${props.contrast}BackColor ${props.contrast}Text`}>{tag.name}</span>
+ </Grid>
+ )
+ }
+ </TagContainer> :
+ null
}
</SlideContentDiv>
)
@@ -179,9 +179,9 @@ export default function CollectionCardFunction(props) {
return (
<>
- <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin}
+ <SignUpModal contrast={props.contrast} open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin}
/>
- <LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
+ <LoginModal contrast={props.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
openSnackbar={() => { handleSuccessfulLogin(true) }}
/>
<Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleLoginSnackbar}
@@ -191,131 +191,91 @@ export default function CollectionCardFunction(props) {
</Snackbar>
<StyledCard>
<CardDiv className={`${props.contrast}Border`}>
- <CardReaDiv className={`${props.contrast}BackColor`}>
- <Link to={"/colecao-do-usuario/" + props.id}>
- <Header onMouseEnter={controlSlide} onMouseLeave={controlSlide}>
- <div className={`slideContentLinkBeforeActive${slideIn}`} style={{ width: '272.5px', height: '230px' }}>
- <UserInfo style={{ width: '272.5px' }}>
- {/* I(Luis) dont know why, but if i use styled components, sometimes the avatar will be deconfigured */}
- <img src={userAvatar} alt="user avatar" style={{
- height: "70px", width: "70px", borderRadius: "50%",
- zIndex: 1, border: "2px solid white",
- boxShadow: "0 1px 3px rgba(0,0,0,.45)"
- }} />
- <UserAndTitle>
- <span>{props.author}</span>
- <span className={"col-name"}>{name}</span>
- </UserAndTitle>
- </UserInfo>
- <StyledGrid container direction="row" style={{ width: '272.5px' }}>
- {
- props.thumbnails.map((thumb) =>
- <Grid item xs={props.thumbnails.length <= 3 && props.thumbnails.length > 0 ? 12 / props.thumbnails.length : 6}>
- <div style={{ backgroundImage: `url(${`${apiDomain}` + thumb})`, height: `${props.thumbnails.length <= 3 ? '230px' : '100%'}`, width: "100%", backgroundSize: "cover", backgroundPosition: "center" }} />
- </Grid>
- )
- }
- </StyledGrid>
+ <CardReaDiv className={`${props.contrast}BackColor`}>
+ <Link to={"/colecao-do-usuario/" + props.id}>
+ <Header onMouseEnter={controlSlide} onMouseLeave={controlSlide}>
+ <div className={`slideContentLinkBeforeActive${slideIn}`} style={{ width: '272.5px', height: '230px' }}>
+ <UserInfo style={{ width: '272.5px'}}>
+ {/* I(Luis) dont know why, but if i use styled components, sometimes the avatar will be deconfigured */}
+ <img src={userAvatar} alt="user avatar" style={{
+ height: "70px", width: "70px", borderRadius: "50%",
+ zIndex: 1, border: "2px solid white",
+ boxShadow: "0 1px 3px rgba(0,0,0,.45)"
+ }} />
+ <UserAndTitle>
+ <span>{props.author}</span>
+ <span className={"col-name"}>{name}</span>
+ </UserAndTitle>
+ </UserInfo>
+ <StyledGrid container direction="row" style={{ width: '272.5px' }}>
+ {
+ props.thumbnails.map((thumb) =>
+ <Grid item xs={props.thumbnails.length <= 3 && props.thumbnails.length > 0 ? 12 / props.thumbnails.length : 6}>
+ <div style={{ backgroundImage: `url(${`${apiDomain}` + thumb})`, height: `${props.thumbnails.length <= 3 ? '230px' : '100%'}`, width: "100%", backgroundSize: "cover", backgroundPosition: "center" }} />
+ </Grid>
+ )
+ }
+ </StyledGrid>
+ </div>
+ {
+ <div className={`slideContentLinkAfterActive${slideIn}`}>
+ <div className="Text" style={{ width: "100%" }}>
+ {SlideAnimationContent(props.contrast)}
</div>
{
- <div className={`slideContentLinkAfterActive${slideIn}`}>
- <div className="Text" style={{ width: "100%" }}>
- {SlideAnimationContent(props.contrast)}
- </div>
- </div>
+ privacy === 'private' &&
+ <LockIcon className={`${props.contrast}IconColor`} />
}
- </Header>
- </Link>
-
- <Description className={`${props.contrast}BackColor`}> {/*renders rating, number of learning objects and likes count*/}
- {
- props.authorID !== state.currentUser.id &&
- <Rating
- style={state.contrast === "" ? { color: "#666" } : { color: "yellow" }}
- name="customized-empty"
- value={props.rating}
- readOnly
- emptyIcon={<StarBorderIcon style={state.contrast === "" ? { color: "#666" } : { color: "yellow" }} fontSize="inherit" />}
- />
- }
-
- <Footer className={`${props.contrast}Text`}>
- <Type>
- <FolderIcon style={props.contrast === "" ? {} : { color: "white" }} />
- <span style={{ fontWeight: "bold" }}>{props.collections ? props.collections.length : 0} </span>
- <span>{props.collections ? props.collections.length !== 1 ? "Recursos" : "Recurso" : 0}</span>
- </Type>
- <LikeCounter>
- <span>{likesCount}</span>
- <ButtonNoWidth onClick={handleLike}>
- <FavoriteIcon className={`${props.contrast}LinkColor`} style={props.contrast === "" ? { color: liked ? "red" : "#666" } : { color: liked ? "red" : "white" }} />
- </ButtonNoWidth>
- </LikeCounter>
- </Footer>
- </Description>
-
- </CardReaDiv>
-
- {
- props.authorID === state.currentUser.id ?
- (
- <CardReaFooter className={`${props.contrast}BackColor`} style={{ justifyContent: "space-between" }}> {/*renders following/unfollow and follow button*/}
- <Grid container>
- <Grid item xs={6} style={{ display: "flex", justifyContent: "center" }}>
- {
- privacy === 'private' &&
- <LockIcon style={{ color: "#666" }} />
- }
- </Grid>
- <Grid item xs={6} style={{ display: "flex", justifyContent: "flex-end" }}>
- <ColCardOwnerOptions
- contrast={props.contrast}
- id={props.id}
- changeColName={changeColName}
- changeColPrivacy={changeColPrivacy}
- removeColl={props.removeColl}
- />
- </Grid>
- </Grid>
- </CardReaFooter>
- )
- :
- (
- <CardReaFooter className={`${props.contrast}BackColor`}> {/*renders following/unfollow and follow button*/}
- <Grid container>
- <Grid item xs={2}></Grid>
- <Grid item xs={8} style={{ display: "flex", justifyContent: "center" }}>
- {
- userFollowingCol ?
- (
- [
- RenderFollowingButton()
- ]
- )
- :
- (
- [
- RenderFollowButton()
- ]
- )
- }
- </Grid>
- <Grid item xs={2} style={{ display: "flex", justifyContent: "flex-end" }}>
- <ColCardPublicOptions
- contrast={props.contrast}
- id={props.id}
- userFollowingCol={userFollowingCol}
- handleLike={handleLike}
- handleFollow={handleFollow}
- liked={liked}
- handleLogin={handleLogin}
- currentUserId={state.currentUser.id}
- />
- </Grid>
- </Grid>
- </CardReaFooter>
- )
- }
+ </Grid>
+ <Grid item xs={6} style={{ display: "flex", justifyContent: "flex-end" }}>
+ <ColCardOwnerOptions
+ contrast={props.contrast}
+ id={props.id}
+ changeColName={changeColName}
+ changeColPrivacy={changeColPrivacy}
+ removeColl={props.removeColl}
+ />
+ </Grid>
+ </Grid>
+ </CardReaFooter>
+ )
+ :
+ (
+ <CardReaFooter className={`${props.contrast}BackColor`}> {/*renders following/unfollow and follow button*/}
+ <Grid container>
+ <Grid item xs={2}></Grid>
+ <Grid item xs={8} style={{ display: "flex", justifyContent: "center" }}>
+ {
+ userFollowingCol ?
+ (
+ [
+ RenderFollowingButton()
+ ]
+ )
+ :
+ (
+ [
+ RenderFollowButton()
+ ]
+ )
+ }
+ </Grid>
+ <Grid item xs={2} style={{ display: "flex", justifyContent: "flex-end" }}>
+ <ColCardPublicOptions
+ contrast={props.contrast}
+ id={props.id}
+ userFollowingCol={userFollowingCol}
+ handleLike={handleLike}
+ handleFollow={handleFollow}
+ liked={liked}
+ handleLogin={handleLogin}
+ currentUserId={state.currentUser.id}
+ />
+ </Grid>
+ </Grid>
+ </CardReaFooter>
+ )
+ }
</CardDiv>
</StyledCard>
diff --git a/src/Components/CollectionCommentSection.js b/src/Components/CollectionCommentSection.js
index edfc7692d39a82a8a5a7e88057fd361a95e6b463..7f86b8dcb64f48fff7e6d7e9953ca308bfdbe828 100644
--- a/src/Components/CollectionCommentSection.js
+++ b/src/Components/CollectionCommentSection.js
@@ -219,11 +219,13 @@ export default function CollectionCommentSection(props) {
color={snackInfo.color}
/>
<SignUpModal
+ contrast={props.contrast}
open={sign_up_open}
handleClose={() => setSignUpOpen(false)}
openLogin={() => setLoginOpen(true)}
/>
<LoginModal
+ contrast={props.contrast}
openSnackbar={handleOpenSnackSignIn}
open={log_in_open}
handleClose={() => setLoginOpen(false)}
diff --git a/src/Components/CollectionReview.js b/src/Components/CollectionReview.js
index c037071df59ed871b086fb9b905a90c3e5ecba6f..bd35d03140d24c87e0e67cedb565a2f83c5fcc51 100644
--- a/src/Components/CollectionReview.js
+++ b/src/Components/CollectionReview.js
@@ -125,7 +125,7 @@ export default function CollectionReview(props) {
value={Number(stars)}
readOnly
onClick={props.scrollToComment}
- emptyIcon={<StarBorderIcon fontSize="inherit" />}
+ emptyIcon={<StarBorderIcon className={`${props.contrast}Text`} fontSize="inherit" />}
/>
</Grid>
<Grid item justify="center" alignItems="center">
@@ -142,6 +142,7 @@ export default function CollectionReview(props) {
<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
+ contrast={props.contrast}
open={reportOpen}
handleClose={handleCloseModal}
form="colecao"
@@ -150,11 +151,13 @@ export default function CollectionReview(props) {
/>
</Grid>
<SignUpModal
+ contrast={props.contrast}
open={sign_up_open}
handleClose={() => setSignUpOpen(false)}
openLogin={() => setLoginOpen(true)}
/>
<LoginModal
+ contrast={props.contrast}
openSnackbar={handleOpenSnackSignIn}
open={log_in_open}
handleClose={() => setLoginOpen(false)}
diff --git a/src/Components/ContactButtons/FollowButton.js b/src/Components/ContactButtons/FollowButton.js
index ac46ad43a65cfb5f6049c6150fce2480ad4f0aae..ba7b9a256418b4888deb2f31ca41a4d356bc6252 100644
--- a/src/Components/ContactButtons/FollowButton.js
+++ b/src/Components/ContactButtons/FollowButton.js
@@ -73,17 +73,19 @@ export default function FollowButton(props) {
<Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
</Snackbar>
{/*-------------------------------MODALS---------------------------------------*/}
- <LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
+ <LoginModal contrast={props.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
openSnackbar={() => { handleSuccessfulLogin(true) }}
/>
- <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} />
+ <SignUpModal contrast={props.contrast} open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} />
{/*----------------------------------------------------------------------------*/}
{
state.currentUser.id !== '' ? (
<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={{
+ <PersonAddIcon
+ className={`${props.contrast}IconColor`}
+ style={{
fontSize: "24px",
display: "inline-block",
verticalAlign: "middle",
@@ -96,7 +98,9 @@ export default function FollowButton(props) {
<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={{
+ <PersonAddIcon
+ className={`${props.contrast}IconColor`}
+ style={{
fontSize: "24px",
display: "inline-block",
verticalAlign: "middle",
@@ -147,10 +151,10 @@ export function NoIcon(props) {
<Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
</Snackbar>
{/*-------------------------------MODALS---------------------------------------*/}
- <LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
+ <LoginModal contrast={props.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
openSnackbar={() => { handleSuccessfulLogin(true) }}
/>
- <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} />
+ <SignUpModal contrast={props.contrast} open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} />
{/*----------------------------------------------------------------------------*/}
{
state.currentUser.id !== '' ? (
@@ -158,7 +162,9 @@ export function NoIcon(props) {
)
:
(
- <NoIconButton onClick={() => handleLogin(true)}>seguir</NoIconButton>
+ <NoIconButton 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)}>seguir</NoIconButton>
)
}
</React.Fragment>
diff --git a/src/Components/ContactButtons/FollowingButton.js b/src/Components/ContactButtons/FollowingButton.js
index f0b09a9a07e4b54bdcf4a2fc7d336c40ec812ee3..fd30943f896adf3349bf3b893afa5f4c88fb8ac6 100644
--- a/src/Components/ContactButtons/FollowingButton.js
+++ b/src/Components/ContactButtons/FollowingButton.js
@@ -49,7 +49,7 @@ export default function FollowingButton(props) {
return (
<React.Fragment>
- <ModalConfirmarUnfollow open={modalOpen}
+ <ModalConfirmarUnfollow contrast={props.contrast} open={modalOpen}
handleClose={() => { toggleModal(false) }}
handleConfirm={handleUnfollowPartTwo}
/>
@@ -76,7 +76,9 @@ export default function FollowingButton(props) {
<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={{
+ <GroupIcon
+ className={`${props.contrast}IconColor`}
+ style={{
fontSize: "24px",
display: "inline-block",
verticalAlign: "middle",
@@ -115,7 +117,7 @@ export function NoIconFollowing(props) {
return (
<React.Fragment>
- <ModalConfirmarUnfollow open={modalOpen}
+ <ModalConfirmarUnfollow contrast={props.contrast} open={modalOpen}
handleClose={() => { toggleModal(false) }}
handleConfirm={handleUnfollowPartTwo}
/>
diff --git a/src/Components/ContactCardOptions.js b/src/Components/ContactCardOptions.js
index ef0d2e636651873ede2f19581924be1aa0e8cb3e..84fc512edfd3a667ca63ec75b43684d7efb0d630 100644
--- a/src/Components/ContactCardOptions.js
+++ b/src/Components/ContactCardOptions.js
@@ -86,40 +86,77 @@ export default function SimpleMenu(props) {
toggleReportModal(value)
}
- return (
- <React.Fragment>
- <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleSnackbar}
- anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
+ 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 contrast={props.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
+ openSnackbar={() => { handleSuccessfulLogin(true) }}
+ />
+ <SignUpModal contrast={props.contrast} open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} />
+ {/*----------------------------------------------------------------------------*/}
+ <>
+ {
+ reportModal &&
+ <ReportModal contrast={props.contrast} 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}
>
- <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} />
- {/*----------------------------------------------------------------------------*/}
- <>
+ <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={handleClose}>
+ <Link to={"/usuario-publico/" + props.followableID}>
+ <ListItemIcon className={`${props.contrast}IconColor`}><OpenIcon /></ListItemIcon>Abrir
+ </Link>
+ </StyledMenuItem>
+
{
- reportModal &&
- <ReportModal open={reportModal} handleClose={() => handleModal(false)}
- form="user" complainableId={props.followableID}
- complainableType={"User"}
- {...props} />
+ props.followed ?
+ (
+ <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={() => {handleFollow(props.followableID)}}>
+ <ListItemIcon className={`${props.contrast}IconColor`}><ReportIcon /></ListItemIcon>Deixar de Seguir
+ </StyledMenuItem>
+ )
+ :
+ (
+ state.currentUser.id !== '' ? (
+ <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={() => {handleFollow(props.followableID)}}>
+ <ListItemIcon className={`${props.contrast}IconColor`}><PersonAddIcon /></ListItemIcon>Seguir
+ </StyledMenuItem>
+ )
+ :
+ (
+ <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={() => {handleLogin(props.followableID)}}>
+ <ListItemIcon className={`${props.contrast}IconColor`}><PersonAddIcon /></ListItemIcon>Seguir
+ </StyledMenuItem>
+ )
+ )
}
- <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
+
+ {
+ state.currentUser.id !== '' ? (
+ <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={() => {handleModal(true); handleClose()}}>
+ <ListItemIcon className={`${props.contrast}IconColor`}><ReportIcon /></ListItemIcon>Reportar
+ </StyledMenuItem>
+ )
+ :
+ (
+ <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={() => {handleLogin(true)}}>
+ <ListItemIcon className={`${props.contrast}IconColor`}><ReportIcon /></ListItemIcon>Reportar
</StyledMenuItem>
{
diff --git a/src/Components/ContactForm.js b/src/Components/ContactForm.js
index 3e4ea4abdc7985754789751137deef337a2d4224..9683375f23279ccf6df7cd0d2208534e47ae9215 100644
--- a/src/Components/ContactForm.js
+++ b/src/Components/ContactForm.js
@@ -27,283 +27,275 @@ import SignUpModal from './SignUpModal'
import MuiAlert from '@material-ui/lab/Alert';
function Alert(props) {
- return <MuiAlert elevation={6} variant="filled" {...props} />;
+ return <MuiAlert elevation={6} variant="filled" {...props} />;
}
const Button = styled.button`
- background-color: ${props => props.contrast === "" ? "#00acc1" : "black"};
- color: ${props => props.contrast === "" ? "#fff" : "yellow"};
- font-family: Roboto,sans-serif;
- font-size: 14px;
- font-weight: 500;
- height: 36px;
- padding-left: 16px;
- padding-right: 16px;
- box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
- outline: none;
- position: relative;
- cursor: pointer;
- min-height: 36px;
- min-width: 88px;
- line-height: 36px;
- vertical-align: middle;
- align-items: center;
- text-align: center;
- border-radius: 3px;
- box-sizing: border-box;
- user-select: none;
- border: ${props => props.contrast === "" ? 0 : "1px solid white"};
- padding: 0 6px;
- padding-right: 6px;
- padding-left: 6px;
- margin: 6px 8px;
-
- white-space: nowrap;
- text-transform: uppercase;
- font-weight: 500;
- font-size: 14px;
- font-style: inherit;
- font-variant: inherit;
- font-family: inherit;
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
- overflow: hidden;
- transition: box-shadow .4s cubic-bezier(.25,.8,.25,1),background-color .4s cubic-bezier(.25,.8,.25,1);
- :hover{
- background-color: ${props => props.contrast === "" ? "rgba(0, 172, 193, 0.65)" : "rgba(255,255,0,0.24)"};
- }
+ background-color: ${props => props.contrast === "" ? "#00acc1" : "black"};
+ color: ${props => props.contrast === "" ? "#fff" : "yellow"};
+ font-family: Roboto,sans-serif;
+ font-size: 14px;
+ font-weight: 500;
+ height: 36px;
+ padding-left: 16px;
+ padding-right: 16px;
+ box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
+ outline: none;
+ position: relative;
+ cursor: pointer;
+ min-height: 36px;
+ min-width: 88px;
+ line-height: 36px;
+ vertical-align: middle;
+ align-items: center;
+ text-align: center;
+ border-radius: 3px;
+ box-sizing: border-box;
+ user-select: none;
+ border: ${props => props.contrast === "" ? 0 : "1px solid white"};
+ padding: 0 6px;
+ padding-right: 6px;
+ padding-left: 6px;
+ margin: 6px 8px;
+
+ white-space: nowrap;
+ text-transform: uppercase;
+ font-weight: 500;
+ font-size: 14px;
+ font-style: inherit;
+ font-variant: inherit;
+ font-family: inherit;
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ overflow: hidden;
+ transition: box-shadow .4s cubic-bezier(.25,.8,.25,1),background-color .4s cubic-bezier(.25,.8,.25,1);
+ :hover{
+ background-color: ${props => props.contrast === "" ? "rgba(0, 172, 193, 0.65)" : "rgba(255,255,0,0.24)"};
+ }
`
function validateNome(nome) {
- let flag = false
- if (nome.length === 0) {
- flag = true
- }
+ let flag = false
+ if (nome.length === 0) {
+ flag = true
+ }
- return flag
+ return flag
}
function validateMensagem(mensagem) {
- let flag = false
- if (mensagem.length === 0) {
- flag = true
- }
+ let flag = false
+ if (mensagem.length === 0) {
+ flag = true
+ }
- return flag
+ return flag
}
function validateEmail(email) {
- let flag = false
- if (email.split("").filter(x => x === "@").length !== 1 || email.length < 7) {
- flag = true
- }
- return flag
+ let flag = false
+ if (email.split("").filter(x => x === "@").length !== 1 || email.length < 7) {
+ flag = true
+ }
+ return flag
}
function Formulario(props) {
- const { state } = useContext(Store)
- const [loginOpen, setLogin] = useState(false)
- const [successfulLoginOpen, handleSuccessfulLogin] = useState(false)
- const [signUpOpen, setSignUp] = useState(false)
-
- const [nome, handleNome] = useState(
- {
- dict: {
- key: false,
- value: ""
- }
+ const { state } = useContext(Store)
+ const [loginOpen, setLogin] = useState(false)
+ const [successfulLoginOpen, handleSuccessfulLogin] = useState(false)
+ const [signUpOpen, setSignUp] = useState(false)
+
+ const [nome, handleNome] = useState({
+ dict: {
+ key: false,
+ value: ""
+ }
})
- const [email, handleEmail] = useState(
- {
- dict: {
- key: false,
- value: ""
- }
+ const [email, handleEmail] = useState({
+ dict: {
+ key: false,
+ value: ""
+ }
})
- const [mensagem, handleMensagem] = useState(
- {
- dict: {
- key: false,
- value: ""
- }
+ const [mensagem, handleMensagem] = useState({
+ dict: {
+ key: false,
+ value: ""
+ }
})
- const preencheNome = (e) => {
- const aux2 = e.target.value
- const flag = validateNome(aux2)
- handleNome({
- ...nome, dict: {
- key: flag,
- value: e.target.value
- }
- })
- console.log(nome)
- }
-
- const preencheEmail = (e) => {
- const aux = e.target.value
- const flag = validateEmail(aux)
- handleEmail({
- ...email, dict: {
- key: flag,
- value: e.target.value
- }
- })
- console.log(email)
- }
-
- const preencheMensagem = (e) => {
- const msg = e.target.value
- console.log(msg)
- let flag = validateMensagem(msg)
- handleMensagem({
- ...mensagem, dict: {
- key: flag,
- value: msg
- }
- })
- console.log(mensagem)
- }
-
- const limpaTudo = () => {
+ const preencheNome = (e) => {
+ const aux2 = e.target.value
+ const flag = validateNome(aux2)
+ handleNome({
+ ...nome, dict: {
+ key: flag,
+ value: e.target.value
+ }
+ })
+ console.log(nome)
+ }
- handleNome({
- dict: {
- key: false,
- value: ""
- }
+ const preencheEmail = (e) => {
+ const aux = e.target.value
+ const flag = validateEmail(aux)
+ handleEmail({
+ ...email, dict: {
+ key: flag,
+ value: e.target.value
+ }
+ })
+ console.log(email)
}
- );
- handleEmail({
- dict: {
- key: false,
- value: ""
- }
+ const preencheMensagem = (e) => {
+ const msg = e.target.value
+ console.log(msg)
+ let flag = validateMensagem(msg)
+ handleMensagem({
+ ...mensagem, dict: {
+ key: flag,
+ value: msg
+ }
+ })
+ console.log(mensagem)
}
- )
- handleMensagem({
- dict: {
- key: false,
- value: ""
- }
+ const limpaTudo = () => {
+
+ handleNome({
+ dict: {
+ key: false,
+ value: ""
+ }
+ });
+
+ handleEmail({
+ dict: {
+ key: false,
+ value: ""
+ }
+ })
+
+ handleMensagem({
+ dict: {
+ key: false,
+ value: ""
+ }
+ })
+
}
- )
- }
+ const handleSignUp = () => {
+ setSignUp(!signUpOpen)
+ }
- const handleSignUp = () => {
- setSignUp(!signUpOpen)
- }
+ const handleLogin = () => {
+ setLogin(!loginOpen)
+ }
- const handleLogin = () => {
- setLogin(!loginOpen)
- }
+ const toggleSnackbar = (event, reason) => {
+ if (reason === 'clickaway') {
+ return;
+ }
- const toggleSnackbar = (event, reason) => {
- if (reason === 'clickaway') {
- return;
+ handleSuccessfulLogin(false);
}
- handleSuccessfulLogin(false);
- }
-
- const onSubmit = (e) => {
- //on submit we should prevent the page from refreshing
- e.preventDefault(); //though this is arguable
- console.log(!(nome.dict.key && email.dict.key && mensagem.dict.key))
- // Se não houver erro em nunhum dos campos E nenhum dos campos for vazio: a página faz o contato com o backend e os campos ficam em branco no formulário
- if (!(nome.dict.key || email.dict.key || mensagem.dict.key)) {
- let payload = {
- contact: {
- name: nome.dict.value,
- email: email.dict.value,
- message: mensagem.dict.value
+ const onSubmit = (e) => {
+ //on submit we should prevent the page from refreshing
+ e.preventDefault(); //though this is arguable
+ console.log(!(nome.dict.key && email.dict.key && mensagem.dict.key))
+ // Se não houver erro em nunhum dos campos E nenhum dos campos for vazio: a página faz o contato com o backend e os campos ficam em branco no formulário
+ if (!(nome.dict.key || email.dict.key || mensagem.dict.key)) {
+ let payload = {
+ contact: {
+ name: nome.dict.value,
+ email: email.dict.value,
+ message: mensagem.dict.value
+ }
+ }
+ postRequest(`/contacts`, payload, (data) => { limpaTudo() }, (error) => { console.log(error) })
}
- }
- postRequest(`/contacts`, payload, (data) => { limpaTudo() }, (error) => { console.log(error) })
}
- }
-
-
-
-
- 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} />
- {/*----------------------------------------------------------------------------*/}
-
-
- <form onSubmit={e => onSubmit(e)}>
- <FormInput
- contrast={props.contrast}
-
- inputType={"text"}
- name={"nome"}
- value={nome.dict.value}
- placeholder={"Nome *"}
- error={nome.dict.key}
- help={nome.dict.key ? "insira seu nome para o contato " : ""}
- handleChange={e => preencheNome(e)}
- />
- <br />
- <FormInput
- contrast={props.contrast}
- inputType={"text"}
- name={"email"}
- value={email.dict.value}
- placeholder={"E-mail *"}
- error={email.dict.key}
- help={email.dict.key ? "Formato de e-mail incorreto ou vazio, tente : usuario@provedor.com" : ""}
- handleChange={e => preencheEmail(e)}
- />
- <br />
- <br />
- <FormInput
- contrast={props.contrast}
- inputType={"text"}
- name={"mensagem"}
- value={mensagem.dict.value}
- placeholder={"Mensagem *"}
- multi={true}
- rows="5"
- rowsMax="6"
- error={mensagem.dict.key}
- help={mensagem.dict.key ? "Faltou escrever sua mensagem de sugestão, crítica ou dúvida." : "Escreva sua mensagem no campo acima."}
- handleChange={e => preencheMensagem(e)}
- />
- <br />
- <br />
- <div style={{ display: "flex", justifyContent: "center" }}>
- {
- state.currentUser.id !== '' ? (
- <Button contrast={props.contrast} onClick={e => onSubmit(e)} >ENVIAR MENSAGEM</Button>
- )
- :
- (
- <Button contrast={props.contrast} onClick={e => { e.preventDefault(); handleLogin(true); }} >ENVIAR MENSAGEM</Button>
- )
- }
- </div>
- </form>
- </React.Fragment>
-
-
- );
+
+
+
+
+ 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 contrast={props.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
+ openSnackbar={() => { handleSuccessfulLogin(true) }}
+ />
+ <SignUpModal contrast={props.contrast} open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} />
+ {/*----------------------------------------------------------------------------*/}
+ <div>
+ <form onSubmit={e => onSubmit(e)}>
+ <FormInput
+ contrast={props.contrast}
+
+ inputType={"text"}
+ name={"nome"}
+ value={nome.dict.value}
+ placeholder={"Nome *"}
+ error={nome.dict.key}
+ help={nome.dict.key ? "insira seu nome para o contato " : ""}
+ handleChange={e => preencheNome(e)}
+ />
+ <br />
+ <FormInput
+ contrast={props.contrast}
+ inputType={"text"}
+ name={"email"}
+ value={email.dict.value}
+ placeholder={"E-mail *"}
+ error={email.dict.key}
+ help={email.dict.key ? "Formato de e-mail incorreto ou vazio, tente : usuario@provedor.com" : ""}
+ handleChange={e => preencheEmail(e)}
+ />
+ <br />
+ <br />
+ <FormInput
+ contrast={props.contrast}
+ inputType={"text"}
+ name={"mensagem"}
+ value={mensagem.dict.value}
+ placeholder={"Mensagem *"}
+ multi={true}
+ rows="5"
+ rowsMax="6"
+ error={mensagem.dict.key}
+ help={mensagem.dict.key ? "Faltou escrever sua mensagem de sugestão, crítica ou dúvida." : "Escreva sua mensagem no campo acima."}
+ handleChange={e => preencheMensagem(e)}
+ />
+ <br />
+ <br />
+ <div style={{ display: "flex", justifyContent: "center" }}>
+ {
+ state.currentUser.id !== '' ? (
+ <Button contrast={props.contrast} onClick={e => onSubmit(e)} >ENVIAR MENSAGEM</Button>
+ )
+ :
+ (
+ <Button contrast={props.contrast} onClick={e => { e.preventDefault(); handleLogin(true); }} >ENVIAR MENSAGEM</Button>
+ )
+ }
+ </div>
+ </form>
+ </div>
+ </React.Fragment>
+ );
}
export default Formulario;
diff --git a/src/Components/CriarColecaoForm.js b/src/Components/CriarColecaoForm.js
index 9daabc90b4091e9b7a1db9b74018e5b49d89d64d..2aa9f41c377671c1a7f8f3afd058d42d0e485438 100644
--- a/src/Components/CriarColecaoForm.js
+++ b/src/Components/CriarColecaoForm.js
@@ -24,12 +24,14 @@ import Radio from '@material-ui/core/Radio';
import RadioGroup from '@material-ui/core/RadioGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import FormControl from '@material-ui/core/FormControl';
-import TextField from '@material-ui/core/TextField';
+import {StyledTextField, useStyles} from './ReportUserForm.js'
import { postRequest } from './HelperFunctions/getAxiosConfig'
export default function CriarColecaoForm(props) {
const { state } = useContext(Store)
+ const classes = useStyles();
+
const [value, setValue] = React.useState(-1);
/*values are set according to backend complaint id*/
@@ -93,13 +95,14 @@ export default function CriarColecaoForm(props) {
value={colName.value}
onChange={e => handleColName(e)}
error={colName.key}
+ InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
contrast={state.contrast}
helperText={colName.key ? <span>O nome é importante para identificar a sua coleção na plataforma.<br />Ex: Matemática Ensino Médio </span> : ""}
required={true}
style={{ width: "100%" }}
/>
- <span style={{ fontSize: "12px", color: "#b3b3b3" }}>Esta coleção é:</span>
+ <span style={{ fontSize: "12px" }}>Esta coleção é:</span>
<StyledFormControl contrast={state.contrast} component="fieldset">
<RadioGroup value={value} onChange={handleChange}>
@@ -165,25 +168,7 @@ export const ButtonEnviar = styled(Button)`
padding-left : 16px;
}
`
-export const StyledTextField = styled(TextField)`
- margin : 18px 0 !important;
-
- .MuiFormHelperText-root {
- text-align : right;
- }
-
- label.Mui-focused {
- color: ${props => props.contrast === "" ? "#673ab7" : "yellow"};
- }
- label.Mui-focused.Mui-error {
- color : red;
- }
-
- .MuiInput-underline::after {
- color: ${props => props.contrast === "" ? "#673ab7" : "yellow"};
- }
-`
export const StyledFormControl = styled(FormControl)`
display : block !important;
diff --git a/src/Components/EditarColecaoForm.js b/src/Components/EditarColecaoForm.js
index f0ea1fdc47f91ce1c68b2a70d2684ad0443707ee..37d8b3f34628f1af2d54ad522eff1d89b4444e2e 100644
--- a/src/Components/EditarColecaoForm.js
+++ b/src/Components/EditarColecaoForm.js
@@ -24,12 +24,14 @@ import Radio from '@material-ui/core/Radio';
import RadioGroup from '@material-ui/core/RadioGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import FormControl from '@material-ui/core/FormControl';
-import TextField from '@material-ui/core/TextField';
+import {StyledTextField, useStyles} from './ReportUserForm.js'
import {getRequest, putRequest} from './HelperFunctions/getAxiosConfig'
export default function EditarColecaoForm (props) {
const {state} = useContext(Store)
+ const classes = useStyles();
+
function handleSuccessfulGet (data) {
setColName({key : false, value : data.name})
setValue( data.privacy === 'public' ? 'pública' : 'privada')
@@ -99,33 +101,37 @@ export default function EditarColecaoForm (props) {
<form onSubmit={(e) => {formSubmit(e)}} style={{textAlign : "left"}}>
<StyledTextField
+ contrast={props.contrast}
id = {"col-name"}
label={"Nome"}
type = {"text"}
value = {colName.value}
onChange = {e => handleColName(e)}
error = {colName.key}
+ InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
required = {true}
style={{width:"100%"}}
/>
<StyledTextField
+ contrast={props.contrast}
id = {"col-description"}
label={"Descrição"}
type = {"text"}
value = {colDescription}
multiline
+ InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
rows={5}
onChange = {e => setColDescription(e)}
style={{width:"100%"}}
/>
- <span style={{fontSize : "12px", color : "#b3b3b3"}}>Esta coleção é:</span>
- <StyledFormControl component="fieldset">
+ <span style={{fontSize : "12px"}}>Esta coleção é:</span>
+ <StyledFormControl contrast={props.contrast} component="fieldset">
<RadioGroup value={value} onChange={handleChange}>
{
options.map(option =>
- <FormControlLabel key={option.value} value={option.value} control={<Radio color="#673ab7"/>} label={option.text} />
+ <FormControlLabel key={option.value} value={option.value} control={<Radio/>} label={option.text} />
)
}
</RadioGroup>
@@ -133,8 +139,8 @@ export default function EditarColecaoForm (props) {
<ButtonsDiv>
- <ButtonCancelar onClick={props.handleClose}>CANCELAR</ButtonCancelar>
- <ButtonEnviar type="submit">SALVAR</ButtonEnviar>
+ <ButtonCancelar contrast={props.contrast} onClick={props.handleClose}>CANCELAR</ButtonCancelar>
+ <ButtonEnviar contrast={props.contrast} type="submit">SALVAR</ButtonEnviar>
</ButtonsDiv>
</form>
);
@@ -148,23 +154,23 @@ export const ButtonsDiv = styled.div`
`
export const ButtonCancelar = styled(Button)`
- &:hover {
- background-color : rgba(158,158,158,0.2) !important;
- }
+ color: ${props => props.contrast === "" ? "#666 !important" : "yellow !important"};
+ text-decoration: ${props => props.contrast === "" ? "none !important" : "yellow underline !important"};
height : 36px !important;
padding-left : 16px !important;
padding-right : 16px !important;
font-weight : 500 !important;
border-radius : 3px !important;
- color :#666 !important;
background-color: transparent;
min-width : 88px !important;
height : 36px !important;
`
export const ButtonEnviar = styled(Button)`
- background-color : #673ab7 !important;
- color : #fff !important;
+ color: ${props => props.contrast === "" ? "white !important" : "yellow !important"};
+ background-color: ${props => props.contrast === "" ? "#673ab7 !important" : "black !important"};
+ text-decoration: ${props => props.contrast === "" ? "none !important" : "yellow underline !important"};
+ border: ${props => props.contrast === "" ? "none !important" : "1px solid white !important"};
font-size: 14px !important;
font-weight: 500 !important;
height: 36px !important;
@@ -176,42 +182,23 @@ export const ButtonEnviar = styled(Button)`
min-width : 88px !important;
vertical-align : middle !important;
margin : 6px 8px !important;
- text-decoration : none !important;
.MuiButton-label {
padding-right : 16px;
padding-left : 16px;
}
`
-export const StyledTextField = styled(TextField)`
- margin : 18px 0 !important;
-
- .MuiFormHelperText-root {
- text-align : right;
- }
-
- label.Mui-focused {
- color : #673ab7;
- }
-
- label.Mui-focused.Mui-error {
- color : red;
- }
-
- .MuiInput-underline::after {
- border-bottom: 2px solid #673ab7;
- }
-`
export const StyledFormControl = styled(FormControl)`
- display : block !important;
-
.MuiFormControlLabel-root {
- color : #666;
+ color: ${props => props.contrast === "" ? "#666" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
}
.MuiIconButton-label {
- color : #666;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
}
+ display : block !important;
+
.PrivateRadioButtonIcon-checked {
color : orange;
}
diff --git a/src/Components/Firulas.js b/src/Components/Firulas.js
index c195149913060e3c8b544a2d1dba0a871444fbad..72dd44f196698f089f0039f3fac6eae7ceb37bff 100644
--- a/src/Components/Firulas.js
+++ b/src/Components/Firulas.js
@@ -1,36 +1,84 @@
-import React, { useState } from 'react'
+import React, { useState, useContext } from 'react';
+import { Store } from '../Store'
import styled from 'styled-components'
import Rating from '@material-ui/lab/Rating';
import StarBorderIcon from '@material-ui/icons/StarBorder';
import { LikeCounter, ButtonNoWidth } from '../Components/ResourceCardFunction.js'
import FavoriteIcon from '@material-ui/icons/Favorite';
import { putRequest } from './HelperFunctions/getAxiosConfig'
+import SignUpModal from './SignUpModal'
+import LoginModal from './LoginModal.js'
+import Snackbar from '@material-ui/core/Snackbar';
+import MuiAlert from '@material-ui/lab/Alert';
export default function Firulas(props) {
- const [liked, setLiked] = useState(props.liked)
+ const { state } = useContext(Store);
+ const [liked, toggleLiked] = useState(props.liked)
+ const [likesCount, setLikesCount] = useState(props.likesCount)
- function handleSuccess(data) {
- console.log(data);
- setLiked(!liked)
+ const [signUpOpen, setSignUp] = useState(false)
+ const [loginOpen, setLogin] = useState(false)
+ const [successfulLoginOpen, handleSuccessfulLogin] = useState(false)
+
+ function Alert(props) {
+ return <MuiAlert elevation={6} variant="filled" {...props} />;
+ }
+
+ function handleSuccessLike(data) {
+ toggleLiked(!liked)
+ setLikesCount(data.count)
+ }
+
+ const handleLike = () => {
+ if (!state.currentUser.id) {
+ handleLogin()
+ }
+ else {
+ const url = `/learning_objects/${props.recursoId}/like/`
+
+ putRequest(url, {}, handleSuccessLike, (error) => { console.log(error) })
+ }
+ }
+
+ const handleLogin = () => {
+ setLogin(!loginOpen)
+ }
+
+ const handleSignUp = () => {
+ setSignUp(!signUpOpen)
+ }
+
+ function toggleLoginSnackbar(reason) {
+ if (reason === 'clickaway') {
+ return;
+ }
+ handleSuccessfulLogin(false);
}
return (
- <ConteinerFirulas>
+ <ConteinerFirulas style={props.contrast === "" ? {} : {color: "white"}}>
+ <SignUpModal contrast={props.contrast} open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin}
+ />
+ <LoginModal contrast={props.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
+ openSnackbar={() => { handleSuccessfulLogin(true) }}
+ />
+ <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleLoginSnackbar}
+ anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
+ >
+ <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
+ </Snackbar>
<Rating
+ className={`${props.contrast}IconColor`}
name="customized-empty"
- value={props.rating * 10}
- precision={0.5}
+ value={props.rating}
readOnly
- style={props.contrast === "" ? { color: "#666", marginRight: "20px" } : { color: "yellow", marginRight: "20px" }}
- emptyIcon={<StarBorderIcon fontSize="inherit" />}
+ emptyIcon={<StarBorderIcon className={`${props.contrast}IconColor`} fontSize="inherit"/>}
/>
- <LikeCounter style={{ marginLeft: "-3px", display: "flex", alignItems: "center" }}>
- <span style={props.contrast === "" ? { color: "#666" } : { color: "white" }} >{props.likesCount}</span>
-
- <ButtonNoWidth disabled={true}>
- <FavoriteIcon style={{ color: liked ? "red" : props.contrast === "" ? "#666" : "white" }} />
+ <LikeCounter>
+ <span>{likesCount}</span>
+ <ButtonNoWidth onClick={handleLike}>
+ <FavoriteIcon className={`${props.contrast}LinkColor`} style={ props.contrast === "" ? {color: liked ? "red" : "#666"} : {color: liked ? "red" : "white"} } />
</ButtonNoWidth>
-
</LikeCounter>
</ConteinerFirulas>
)
diff --git a/src/Components/FollowCollectionButton.js b/src/Components/FollowCollectionButton.js
index 666c49d96c16f4973a5ca4d2232222ac0884e0c6..dd85205b87de4f0a58bdd833c877aa95fba5ebda 100644
--- a/src/Components/FollowCollectionButton.js
+++ b/src/Components/FollowCollectionButton.js
@@ -199,11 +199,13 @@ export default function FollowCollectionButton(props) {
<ButtonText>{button_text}</ButtonText>
</FollowButton>
<SignUpModal
+ contrast={props.contrast}
open={sign_up_open}
handleClose={() => setSignUpOpen(false)}
openLogin={handleOpenLogin}
/>
<LoginModal
+ contrast={props.contrast}
openSnackbar={handleOpenSnackSignIn}
open={open_login}
handleClose={() => setOpenLogin(false)}
diff --git a/src/Components/FormInput.js b/src/Components/FormInput.js
index c06f526e542532e69bcc969cde39f5e46fe0ed14..c8c1e77b2697ece08c5a2e478afdaa5394b89956 100644
--- a/src/Components/FormInput.js
+++ b/src/Components/FormInput.js
@@ -30,73 +30,77 @@ const StyledTextField = styled(TextField)`
width : 100% !important;
.MuiOutlinedInput-root {
- &.Mui-focused fieldset {
- border-color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
- }
- fieldset {
- border-color: ${props => props.contrast === "" ? "#666" : "white"};
- }
+ &.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"};
+ color: ${props => props.contrast === "" ? "#666" : "white"};
}
label.Mui-focused {
- color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
}
label.Mui-focused.Mui-error {
color : red;
}
+
+ .MuiFormHelperText-root {
+ text-align : left;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
`
const useStyles = makeStyles(theme => ({
- container: {
- display: "flex",
- flexWrap: "wrap",
- padding: "2px"
- },
- darkTextField: {
- maxWidth: "100%",
- fontSize: "15px",
- fontWeight: "lighter",
- color: "white",
- width: "100%"
- },
- lightTextField: {
- maxWidth: "100%",
- fontSize: "15px",
- fontWeight: "lighter",
- color: "black",
- width: "100%"
- }
+ container: {
+ display: "flex",
+ flexWrap: "wrap",
+ padding: "2px"
+ },
+ darkTextField: {
+ maxWidth: "100%",
+ fontSize: "15px",
+ fontWeight: "lighter",
+ color: "white",
+ width: "100%"
+ },
+ lightTextField: {
+ maxWidth: "100%",
+ fontSize: "15px",
+ fontWeight: "lighter",
+ color: "black",
+ width: "100%"
+ }
}));
export default function FormInput(props) {
- const classes = useStyles();
-
- return (
+ const classes = useStyles();
- <StyledTextField
- contrast={props.contrast}
- label={props.placeholder}
- margin="normal"
- id={props.name}
- name={props.name}
- type={props.inputType}
- value={props.value}
- onChange={props.handleChange}
- variant="outlined"
- rows={props.rows}
- error={props.error}
- rowsMax={props.rowsMax}
- InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
- required={props.required}
- helperText={props.help}
- style={{ width: "100%" }}
- mask={props.mask}
- multiline={props.multi}
- />
- );
+ return (
+ <StyledTextField
+ contrast={props.contrast}
+ label={props.placeholder}
+ margin="normal"
+ id={props.name}
+ name={props.name}
+ type={props.inputType}
+ value={props.value}
+ onChange={props.handleChange}
+ variant="outlined"
+ rows={props.rows}
+ error={props.error}
+ rowsMax={props.rowsMax}
+ InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
+ required={props.required}
+ helperText={props.help}
+ style={{ width: "100%" }}
+ mask={props.mask}
+ multiline={props.multi}
+ />
+ );
}
diff --git a/src/Components/GuardarModal.js b/src/Components/GuardarModal.js
index 618f3c0c2142afb195dcf20078cc37f1abbc1b20..20caacef01e49a48705c333c2840e44dcd120429 100644
--- a/src/Components/GuardarModal.js
+++ b/src/Components/GuardarModal.js
@@ -35,7 +35,7 @@ import { getRequest, postRequest } from './HelperFunctions/getAxiosConfig'
function CloseModalButton(props) {
return (
<StyledCloseModalButton onClick={props.handleClose}>
- <CloseIcon />
+ <CloseIcon style={props.contrast === "" ? { color: "#666" } : { color: "white" }}/>
</StyledCloseModalButton>
)
}
@@ -157,6 +157,7 @@ export default function GuardarModal(props) {
creatingCol ?
(
<CriarColecaoForm
+ contrast={props.contrast}
handleClose={() => setCreating(false)}
finalize={postToCol}
/>
@@ -169,6 +170,9 @@ export default function GuardarModal(props) {
<div classname="no-cols">
<h2>Você não possui coleções ainda.</h2>
</div>
+ <div style={{ display: "flex", justifyContent: "center" }}>
+ <CriarColButton className={`${props.contrast}LinkColor ${props.contrast}Border ContrastText`} style={{backgroundColor: props.contrast === "" ? "#673ab7" : "black"}} onClick={() => { setCreating(true) }}>CRIAR COLEÇÃO</CriarColButton>
+ </div>
</>
)
:
@@ -188,20 +192,20 @@ export default function GuardarModal(props) {
}
<h5>{collection.name}</h5>
</div>
- <GuardarBotao className={`${props.contrast}LinkColor ContrastText`} style={{backgroundColor: props.contrast === "" ? "#673ab7" : "black"}} onClick={() => { postToCol(collection.id) }}>GUARDAR</GuardarBotao>
+ <GuardarBotao className={`${props.contrast}LinkColor ${props.contrast}Border ContrastText`} style={{backgroundColor: props.contrast === "" ? "#673ab7" : "black"}} onClick={() => { postToCol(collection.id) }}>GUARDAR</GuardarBotao>
</div>
)
}
</div>
</ChooseCol>
+ <div style={{ display: "flex", justifyContent: "center" }}>
+ <CriarColButton className={`${props.contrast}LinkColor ${props.contrast}Border ContrastText`} style={{backgroundColor: props.contrast === "" ? "#673ab7" : "black"}} onClick={() => { setCreating(true) }}>CRIAR COLEÇÃO</CriarColButton>
+ </div>
</>
)
)
}
- <div style={{ display: "flex", justifyContent: "center" }}>
- <CriarColButton className={`${props.contrast}LinkColor ContrastText`} style={{backgroundColor: props.contrast === "" ? "#673ab7" : "black"}} onClick={() => { setCreating(true) }}>CRIAR COLEÇÃO</CriarColButton>
- </div>
</ChooseColContainer>
)
}
diff --git a/src/Components/Header.js b/src/Components/Header.js
index 8f02c6c55f6b121aedf847deda14e61ba74767ff..53b6100ecc007f37b3ce0e817dcb367b70ec8a0c 100644
--- a/src/Components/Header.js
+++ b/src/Components/Header.js
@@ -152,10 +152,10 @@ export default function Header(props) {
</React.Fragment>
)
}
- <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} />
- <LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
+ <SignUpModal contrast={state.contrast} open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} />
+ <LoginModal contrast={state.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
openSnackbar={() => { handleSuccessfulLogin(true) }} />
- <ColaborarModal open={modalColaborar} handleClose={() => { setModalColaborar(!modalColaborar) }} />
+ <ColaborarModal contrast={state.contrast} open={modalColaborar} handleClose={() => { setModalColaborar(!modalColaborar) }} />
</React.Fragment>
)
}
diff --git a/src/Components/LoginContainerFunction.js b/src/Components/LoginContainerFunction.js
index fd04a53f0e2270b6ea4c6d513cf72a9b261167db..699f3da6e2525fbf62324c02c65ef5d37fb6e514 100644
--- a/src/Components/LoginContainerFunction.js
+++ b/src/Components/LoginContainerFunction.js
@@ -194,6 +194,7 @@ const ContainerStyled = styled.div`
display : flex;
flex-direction : column;
min-width : 440px;
+ border: 1px solid ${props => props.contrast === "" ? "#666" : "white"};
align : center;
padding : 10px;
diff --git a/src/Components/MobileDrawerMenu.js b/src/Components/MobileDrawerMenu.js
index 6ab1bbb08b190c09c3f8b0009bfbdab769c72c54..6f058b3712a5bbe81771ca5ae278128c441af9d6 100644
--- a/src/Components/MobileDrawerMenu.js
+++ b/src/Components/MobileDrawerMenu.js
@@ -145,7 +145,7 @@ export default function MobileDrawerMenu(props) {
</ButtonPublicarRecurso>
</Link>
</div>
- <div style={{ borderTop: "1px solid #e5e5e5", display: "flex", flexDirection: "column", marginTop: "10px", paddingTop: "10px", color: "#666", paddingBottom: "10px" }}>
+ <div style={{ borderTop: "1px solid #e5e5e5", display: "flex", flexDirection: "column", marginTop: "10px", paddingTop: "10px", paddingBottom: "10px" }}>
<MyArea contrast={props.contrast}>
<div className="user-avatar">
<img alt="user-avatar"
@@ -183,7 +183,7 @@ export default function MobileDrawerMenu(props) {
<div style={{ display: "flex", flexDirection: "row", margin: "10px 0", justifyContent: "center" }}>
<div style={{ borderRight: "1px solid #e5e5e5" }}>
<ButtonStyled onClick={props.openLogin} contrast={props.contrast}>
- <ExitToAppIcon style={props.contrast === "" ? { color: "#00bcd4" } : { color: "white " }} />Entrar
+ <ExitToAppIcon style={props.contrast === "" ? { color: "#00bcd4" } : { color: "white" }} />Entrar
</ButtonStyled>
</div>
@@ -258,7 +258,6 @@ const ButtonPublicarRecurso = styled(Button)`
const StyledDrawer = styled(Drawer)`
.MuiPaper-root {
- width: 60%;
background-color: ${props => props.contrast === "" ? "#fff" : "black"};
}
@@ -303,5 +302,5 @@ const MenuBody = styled.div`
margin-top : 20px;
display : flex;
flex-direction : column;
- color : #666;
+
`
diff --git a/src/Components/ModalAbout.js b/src/Components/ModalAbout.js
index b0e13d96fbf33293f3edb0cc79b7633a37b4e6e0..568305f7458dadf7600f8698270eb7e7be5a1512 100644
--- a/src/Components/ModalAbout.js
+++ b/src/Components/ModalAbout.js
@@ -30,170 +30,171 @@ import styled from "styled-components";
/*Importação de imagens para o componente*/
const useStyles = makeStyles((theme) => ({
- modal: {
- display: "flex",
- alignItems: "center",
- justifyContent: "center",
- },
- paper: {
- border: "2px solid #000",
- boxShadow:
- " 0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
- },
- carousel: {
- width: "750px",
- height: "370px",
- },
+ modal: {
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ },
+ paper: {
+ border: "2px solid #000",
+ boxShadow:
+ " 0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
+ },
+ carousel: {
+ width: "750px",
+ height: "370px",
+ },
}));
const Button = styled.button`
- background-color: ${(props) =>
- props.contrast === "" ? "#00bcd4" : "black !important"};
- color: ${(props) => (props.contrast === "" ? "#fff" : "yellow !important")};
- font-family: Roboto, sans-serif;
- font-size: 14px;
- font-weight: 700;
- height: 36px;
- border-radius: 3px;
- padding-left: 16px;
- padding-right: 16px;
- box-shadow: 0 2px 5px 0 rgba(0, 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;
- border: ${(props) =>
- props.contrast === "" ? "0" : "1px solid white !important"};
- padding: 0 16px !important;
- text-decoration: ${(props) =>
- props.contrast === "" ? "none" : "underline !important"};
- :hover {
background-color: ${(props) =>
- props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
- }
+ props.contrast === "" ? "#00bcd4" : "black !important"};
+ color: ${(props) => (props.contrast === "" ? "#fff" : "yellow !important")};
+ font-family: Roboto, sans-serif;
+ font-size: 14px;
+ font-weight: 700;
+ height: 36px;
+ border-radius: 3px;
+ padding-left: 16px;
+ padding-right: 16px;
+ box-shadow: 0 2px 5px 0 rgba(0, 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;
+ border: ${(props) =>
+ props.contrast === "" ? "0" : "1px solid white !important"};
+ padding: 0 16px !important;
+ text-decoration: ${(props) =>
+ props.contrast === "" ? "none" : "underline !important"};
+ :hover {
+ background-color: ${(props) =>
+ props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
+ }
`;
const Formulário = styled.div`
- background-color: #fff;
- padding: 40px;
+ background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
+ padding: 40px;
- border-radius: 4px;
+ border-radius: 4px;
- color: #666 !important;
+ color: ${props => props.contrast === "" ? "#666" : "white"} !important;
- h2 {
- font-size: 26px;
- font-weight: lighter;
- margin-top: 20px;
- margin-bottom: 10px;
- }
+ border: ${props => props.contrast === "" ? "" : "1px solid white"} !important;
- form .inputBlock {
- margin-block: 22px;
+ h2 {
+ font-size: 26px;
+ font-weight: lighter;
+ margin-top: 20px;
+ margin-bottom: 10px;
+ }
- }
+ form .inputBlock {
+ margin-block: 22px;
- form .inputBlock label {
- font-size: 14px;
- font-weight: bold;
- display: block;
+ }
- }
+ form .inputBlock label {
+ font-size: 14px;
+ font-weight: bold;
+ display: block;
- form .inputBlock input {
- width: 100%;
- height: 32px;
- font-size: 14px;
- border: 0;
- border-bottom: 1px solid #eee;
-
- }
-
- form .inputBlock.Message input {
- height: 131px;
- }
-
- form buttom[type=submit] {
- width: 100%;
- border: 0;
- margin-top: 30px;
- background: #7d40e7
- border-radius: 2px;
- padding: 15px 20px;
- font-size: 16px;
- font-weight: bold;
- color: #fff;
- cursor: pointer;
- transition: background 0.5s;
+ }
- }
+ form .inputBlock input {
+ width: 100%;
+ height: 32px;
+ font-size: 14px;
+ border: 0;
+ border-bottom: 1px solid #eee;
- form buttom[type=submit]:hover {
- background: #6931ac
- }
+ }
+ form .inputBlock.Message input {
+ height: 131px;
+ }
- h2 {
- font-size: 24px;
- font-weight: lighter;
- margin-bottom: 50px;
- margin-top: 20px;
- text-align: center;
+ form buttom[type=submit] {
+ width: 100%;
+ border: 0;
+ margin-top: 30px;
+ background: #7d40e7
+ border-radius: 2px;
+ padding: 15px 20px;
+ font-size: 16px;
+ font-weight: bold;
+ color: #fff;
+ cursor: pointer;
+ transition: background 0.5s;
+
+ }
+
+ form buttom[type=submit]:hover {
+ background: #6931ac
+ }
+
+
+ h2 {
+ font-size: 24px;
+ font-weight: lighter;
+ margin-bottom: 50px;
+ margin-top: 20px;
+ text-align: center;
- }
+ }
`;
export default function TransitionsModal({ contrast }) {
- console.log(contrast);
- const classes = useStyles();
- const [open, setOpen] = React.useState(false);
-
- const handleOpen = () => {
- setOpen(true);
- };
-
- const handleClose = () => {
- setOpen(false);
- };
-
- return (
- <div style={{ display: "flex", justifyContent: "center" }}>
- <link
- href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto&display=swap"
- rel="stylesheet"
- />
-
- <Button type="button" onClick={handleOpen} contrast={contrast}>
- SUGERIR OUTRO SITE
- </Button>
- <Modal
- aria-labelledby="transition-modal-title"
- aria-describedby="transition-modal-description"
- className={classes.modal}
- open={open}
- onClose={handleClose}
- closeAfterTransition
- BackdropComponent={Backdrop}
- BackdropProps={{
- timeout: 500,
- }}
- >
- <Fade in={open}>
- <div>
- <Formulário>
- <h2>Sugerir site de Recursos Educacionais Digitais</h2>
- <Formulario />
- </Formulário>
- </div>
- </Fade>
- </Modal>
- </div>
- );
+ console.log(contrast);
+ const classes = useStyles();
+ const [open, setOpen] = React.useState(false);
+
+ const handleOpen = () => {
+ setOpen(true);
+ };
+
+ const handleClose = () => {
+ setOpen(false);
+ };
+
+ return (
+ <div style={{ display: "flex", justifyContent: "center" }}>
+ <link
+ href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto&display=swap"
+ rel="stylesheet"
+ />
+ <Button type="button" onClick={handleOpen} contrast={contrast}>
+ SUGERIR OUTRO SITE
+ </Button>
+ <Modal
+ aria-labelledby="transition-modal-title"
+ aria-describedby="transition-modal-description"
+ className={classes.modal}
+ open={open}
+ onClose={handleClose}
+ closeAfterTransition
+ BackdropComponent={Backdrop}
+ BackdropProps={{
+ timeout: 500,
+ }}
+ >
+ <Fade in={open}>
+ <div>
+ <Formulário contrast={contrast}>
+ <h2>Sugerir site de Recursos Educacionais Digitais</h2>
+ <Formulario contrast={contrast}/>
+ </Formulário>
+ </div>
+ </Fade>
+ </Modal>
+ </div>
+ );
}
diff --git a/src/Components/ModalAlterarAvatar/ComponentAlterarAvatar.js b/src/Components/ModalAlterarAvatar/ComponentAlterarAvatar.js
index 294bcdb0630ca4f6dceaaec40f1665973dc97e85..1c6876010b03b2e8be31358d89ec41e5de8fd7a2 100644
--- a/src/Components/ModalAlterarAvatar/ComponentAlterarAvatar.js
+++ b/src/Components/ModalAlterarAvatar/ComponentAlterarAvatar.js
@@ -113,7 +113,7 @@ export default function ComponentAlterarAvatar (props) {
<span style={{width:"32px"}}/>
<StyledH2>{uploadingImage ? 'Alterar foto do perfil' : 'Editar Foto'}</StyledH2>
<StyledCloseModalButton onClick={props.handleClose}>
- <CloseIcon style={{color : "#666"}}/>
+ <CloseIcon style={props.contrast === "" ? { color: "#666" } : { color: "white" }}/>
</StyledCloseModalButton>
</HeaderDiv>
<DialogDiv>
diff --git a/src/Components/ModalAlterarCover/ComponentAlterarCover.js b/src/Components/ModalAlterarCover/ComponentAlterarCover.js
index a4059ecfa2e5c180382a354f92728e19217198ee..18df65d36472f89da154e944bfa22c153305bc4a 100644
--- a/src/Components/ModalAlterarCover/ComponentAlterarCover.js
+++ b/src/Components/ModalAlterarCover/ComponentAlterarCover.js
@@ -63,7 +63,7 @@ export default function ComponentAlterarCover (props) {
<span style={{width:"32px"}}/>
<StyledH2>Editar Capa do Perfil</StyledH2>
<StyledCloseModalButton onClick={props.handleClose}>
- <CloseIcon style={{color : "#666"}}/>
+ <CloseIcon style={props.contrast === "" ? { color: "#666" } : { color: "white" }}/>
</StyledCloseModalButton>
</HeaderDiv>
<DialogDiv>
diff --git a/src/Components/ModalAvaliarRecurso.js b/src/Components/ModalAvaliarRecurso.js
index 7795876d0203a82bac0c05ddbb531773b505c39e..4376cee70643c1f48b5ee74b34c86065ca0c5a2f 100644
--- a/src/Components/ModalAvaliarRecurso.js
+++ b/src/Components/ModalAvaliarRecurso.js
@@ -29,10 +29,10 @@ import FormControl from '@material-ui/core/FormControl';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import CloseModalButton from './CloseModalButton'
import Snackbar from '@material-ui/core/Snackbar';
-import TextField from '@material-ui/core/TextField';
import { withStyles } from '@material-ui/core/styles';
import { getRequest } from './HelperFunctions/getAxiosConfig'
import LoadingSpinner from '../Components/LoadingSpinner'
+import {StyledTextField, useStyles} from './ReportUserForm.js'
const StyledRadio = withStyles({
root: {
@@ -46,6 +46,8 @@ const StyledRadio = withStyles({
export default function ModalAvaliarRecurso(props) {
+ const classes = useStyles();
+
const [options, setOptions] = useState([])
const [avaliacao, setAvaliacao] = useState([null, null, null, null])
@@ -136,12 +138,12 @@ export default function ModalAvaliarRecurso(props) {
>
<Fade in={props.open}>
- <Container>
- <Header>
+ <Container contrast={props.contrast}>
+ <Header contrast={props.contrast}>
<h2>Você está avaliando o recurso
- <span style={{ fontWeight: "bolder" }}> {props.title}</span>
+ <span style={{ fontWeight: "bolder" }}> {props.title}</span>
</h2>
- <CloseModalButton handleClose={props.handleClose} />
+ <CloseModalButton contrast={props.contrast} handleClose={props.handleClose} />
</Header>
<Content>
@@ -162,8 +164,8 @@ export default function ModalAvaliarRecurso(props) {
</Grid>
<Grid item xs={2}>
<RadioGroup row onChange={(e) => { handleRadios(e, option.id) }}>
- <FormControlLabel value={"Sim"} control={<StyledRadio />} label="Não" />
- <FormControlLabel value={"Não"} control={<StyledRadio />} label="Sim" />
+ <FormControlLabel className={`${props.contrast}LinkColor`} value={"Sim"} control={<StyledRadio style={props.contrast === "" ? {} : {color: "white"}}/>} label="Não" />
+ <FormControlLabel className={`${props.contrast}LinkColor`} value={"Não"} control={<StyledRadio style={props.contrast === "" ? {} : {color: "white"}}/>} label="Sim" />
</RadioGroup>
</Grid>
</Grid>
@@ -175,10 +177,12 @@ export default function ModalAvaliarRecurso(props) {
<Grid item xs={12}>
<FormControl style={{ width: "100%", height: "100px" }}>
<StyledTextField
+ contrast={props.contrast}
id={"title-form"}
label={"Justificativa (opcional)"}
type={"text"}
value={justificativa}
+ InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
onChange={e => { handleChangeJustificativa(e) }}
multiline
fullWidth
@@ -188,8 +192,8 @@ export default function ModalAvaliarRecurso(props) {
<Grid item xs={12}>
<ButtonsDiv>
- <ButtonEnviarAvaliar disabled={buttonDisabled} onClick={() => { handleAvaliar() }}>ENVIAR AVALIAÇÂO</ButtonEnviarAvaliar>
- <GreyButton onClick={() => { handleCancel() }}>CANCELAR</GreyButton>
+ <ButtonEnviarAvaliar contrast={props.contrast} disabled={buttonDisabled} onClick={() => { handleAvaliar() }}>ENVIAR AVALIAÇÂO</ButtonEnviarAvaliar>
+ <GreyButton contrast={props.contrast} onClick={() => { handleCancel() }}>CANCELAR</GreyButton>
</ButtonsDiv>
</Grid>
</Grid>
@@ -206,10 +210,9 @@ export default function ModalAvaliarRecurso(props) {
}
const Content = styled.div`
- padding : 10px 75px 0 75px;
+ padding : 0 30px 20px 30px;
overflow : visible;
max-width : 100%;
- color : #666;
font-size : 16px;
.main-content-text {
@@ -227,10 +230,10 @@ const Content = styled.div`
const Header = styled.div`
display : flex;
flex-direction : row;
- padding : 20px 75px 0 75px;
+ padding : 20px 20px 20px 20px;
align-items : center;
justify-content : space-between;
- color : #666;
+ color: ${props => props.contrast === "" ? "#666" : "white"} !important;
@media screen and (min-width : 990px) {
height : 64px;
@@ -262,47 +265,23 @@ const StyledModal = styled(Modal)`
const Container = styled.div`
box-sizing : border-box;
box-shadow : 0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px rgba(0,0,0,.12);
- background-color : #fff;
+ background-color: ${props => props.contrast === "" ? "#fff" : "black"};
+ border: ${props => props.contrast === "" ? "" : "1px solid white"} !important;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
align : center;
display : flex;
flex-direction : column;
min-width : 240px;
- max-height : none;
+ max-height : 90%;
position : relative;
border-radius : 4px;
max-width : 100%;
-
- @media screen and (max-width : 699px) {
- overflow : scroll;
- width : 100%;
- height : 100%;
- }
+ overflow-y : scroll;
p {
margin : 0 0 10px;
}
`
-const StyledTextField = styled(TextField)`
- font-size : 14px;
- width : 100% !important;
- full-width : 100% !important;
-
- .MuiFormControl-root {
- margin : 18px 0 !important;
- }
-
- label.Mui-focused {
- color : #ff7f00;
- }
-
- label.Mui-focused.Mui-error {
- color : red;
- }
-
- .MuiInput-underline::after {
- border-bottom: 2px solid #ff7f00;
- }
-`
const ButtonsDiv = styled.div`
display : flex;
@@ -320,13 +299,13 @@ const ButtonsDiv = styled.div`
`
const GreyButton = styled(Button)`
&:hover {
- background-color : rgba(158,158,158,0.2) !important;
+ background-color : ${props => props.contrast === "" ? "rgba(158,158,158,0.2)" : ""} !important;
}
max-height : 36px !important;
background-color : transparent !important;
- color : #666 !important;
- text-decoration : none !important;
+ color: ${props => props.contrast === "" ? "#666" : "yellow"} !important;
+ text-decoration : ${props => props.contrast === "" ? "none" : "underline"} !important;
outline : none !important;
text-align : center !important;
font-weight : 600 !important;
@@ -335,10 +314,12 @@ const GreyButton = styled(Button)`
`
const ButtonEnviarAvaliar = styled(Button)`
- color : ${(props) => props.disabled ? "rgba(0,0,0,0.38)" : "rgba(255,255,255,0.87) !important"};
+ color : ${props => props.contrast === "" ? `${props.disabled ? `rgba(0,0,0,0.38)` : `rgba(255,255,255,0.87)`}` : `${props.disabled ? `white` : `yellow`}`} !important;
box-shadow : ${(props) => props.disabled ? "none !important" : "0 2px 5px 0 rgba(0,0,0,.26) !important"};
font-weight : 600 !important;
- background-color : ${(props) => props.disabled ? "#e9e9e9 !important" : "#ff7f00 !important"};
+ background-color : ${props => props.contrast === "" ? `${props.disabled ? "#e9e9e9 !important" : "#ff7f00 !important"}` : "black !important"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"} !important;
+ border: ${props => props.contrast === "" ? "" : "1px solid white"} !important;
margin-left : 8px !important;
margin-right : 8px !important;
diff --git a/src/Components/ModalConfirmarCuradoria.js b/src/Components/ModalConfirmarCuradoria.js
index 046106be576a7eea000031277db1c74a2f74df55..8acc01ad17ead5a6a6c2cc0234fc1cca4e8f98ae 100644
--- a/src/Components/ModalConfirmarCuradoria.js
+++ b/src/Components/ModalConfirmarCuradoria.js
@@ -76,7 +76,7 @@ export default function ModalConfirmarCuradoriaOpen(props) {
}}
>
<Fade in={props.open}>
- <Container recusado={!props.aceito}>
+ <Container contrast={props.contrast} recusado={!props.aceito}>
<Header>
<span style={{ width: "32px" }} />
<h2>Recurso a ser {props.aceito ? 'aprovado' : 'recusado'}</h2>
@@ -104,17 +104,8 @@ export default function ModalConfirmarCuradoriaOpen(props) {
)
}
<ButtonsDiv>
- {
- props.aceito ?
- (
- <ButtonEnviarAvaliar onClick={() => { handleConfirmation() }}>SIM, CONFIRMAR</ButtonEnviarAvaliar>
- )
- :
- (
- <ButtonEnviarAvaliar onClick={() => { handleConfirmation() }}>SIM, CONFIRMAR</ButtonEnviarAvaliar>
- )
- }
- <GreyButton onClick={handleCancel}>NÃO, ALTERAR AVALIAÇÃO</GreyButton>
+ <ButtonEnviarAvaliar contrast={props.contrast} onClick={() => { handleConfirmation() }}>SIM, CONFIRMAR</ButtonEnviarAvaliar>
+ <GreyButton contrast={props.contrast} onClick={handleCancel}>NÃO, ALTERAR AVALIAÇÃO</GreyButton>
</ButtonsDiv>
</Content>
</Container>
@@ -128,7 +119,7 @@ const Content = styled.div`
padding : 30px;
overflow : visible;
max-width : 100%;
- color : #666;
+ color : inherit;
font-size : 16px;
text-align : start;
.reason-offensive {
@@ -146,7 +137,7 @@ const Header = styled.div`
align-items : center;
max-height : none;
justify-content : space-between;
- color : #666;
+ color : inherit;
h2 {
font-size : 30px;
@@ -172,7 +163,8 @@ const StyledModal = styled(Modal)`
const Container = styled.div`
box-sizing : border-box;
box-shadow : 0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px rgba(0,0,0,.12);
- background-color : #fff;
+ background-color : ${props => props.contrast === "" ? "white" : "black"} !important;
+ color : ${props => props.contrast === "" ? "#666" : "white"} !important;
align : center;
display : flex;
flex-direction : column;
@@ -180,6 +172,7 @@ const Container = styled.div`
position : relative;
border-radius : 4px;
max-width : 100%;
+ border: ${props => props.contrast === "" ? "" : "1px solid white"} !important;
max-height : ${props => props.recusado ? 'none' : '370px'};
@media screen and (max-width : 699px) {
@@ -209,13 +202,13 @@ const ButtonsDiv = styled.div`
`
const GreyButton = styled(Button)`
&:hover {
- background-color : rgba(158,158,158,0.2) !important;
+ background-color : ${props => props.contrast === "" ? "rgba(158,158,158,0.2)" : ""} !important;
}
max-height : 36px !important;
background-color : transparent !important;
- color : #666 !important;
- text-decoration : none !important;
+ color: ${props => props.contrast === "" ? "#666" : "yellow"} !important;
+ text-decoration : ${props => props.contrast === "" ? "none" : "underline"} !important;
outline : none !important;
text-align : center !important;
font-weight : 600 !important;
@@ -229,10 +222,11 @@ const GreyButton = styled(Button)`
`
const ButtonEnviarAvaliar = styled(Button)`
- color : rgba(255,255,255,0.87) !important;
- box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important;
+ color : ${props => props.contrast === "" ? `rgba(255,255,255,0.87)` : `yellow`} !important;
font-weight : 600 !important;
- background-color : #ff7f00 !important;
+ background-color : ${props => props.contrast === "" ? "#ff7f00" : "black"} !important;
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"} !important;
+ border: ${props => props.contrast === "" ? "" : "1px solid white"} !important;
margin-left : 8px !important;
margin-right : 8px !important;
diff --git a/src/Components/ModalConfirmarUnfollow.js b/src/Components/ModalConfirmarUnfollow.js
index 7d349e085ec89cac173286a5406a810cc08d04dd..e8cd5d1e4a60caaabbd00b25e9f8056f46b95f27 100644
--- a/src/Components/ModalConfirmarUnfollow.js
+++ b/src/Components/ModalConfirmarUnfollow.js
@@ -31,12 +31,14 @@ const HeaderDiv = styled.div`
margin-top : 20px;
margin-bottpm : 10px
font-weight : normal;
- color : #666
}
`
const ContentContainer = styled.div`
+color: ${props => props.contrast === "" ? "#666 !important" : "white !important"};
+background-color: ${props => props.contrast === "" ? "white !important" : "black !important"};
+border: ${props => props.contrast === "" ? "1px solid black !important" : "1px solid white !important"};
+
box-sizing : border-box;
- background-color : white;
max-width : none;
align : center;
display : flex;
@@ -46,7 +48,6 @@ const ContentContainer = styled.div`
position : relative;
padding : 10px;
border-radius : 4px;
- color : #666;
@media screen and (max-width : 899px) {
width : 100%;
@@ -54,19 +55,21 @@ const ContentContainer = styled.div`
}
`
const ButtonCancelar = styled(Button)`
+color: ${props => props.contrast === "" ? "#666 !important" : "yellow !important"};
+text-decoration: ${props => props.contrast === "" ? "none !important" : "yellow underline !important"};
+
&:hover {
background-color : rgba(158,158,158,0.2) !important;
}
- background-color : #fff !important;
- color : #666 !important;
- text-decoration : none !important;
outline : none !important;
text-align : center !important;
`
const ButtonConfirmar = styled(Button)`
- background-color : #00bcd4 !important;
- color : #fff !important;
+ color: ${props => props.contrast === "" ? "white !important" : "yellow !important"};
+ background-color: ${props => props.contrast === "" ? "#00bcd4 !important" : "black !important"};
+ text-decoration: ${props => props.contrast === "" ? "none !important" : "yellow underline !important"};
+ border: ${props => props.contrast === "" ? "none !important" : "1px solid white !important"};
border-radius : 3px !important;
`
@@ -91,21 +94,21 @@ export default function ModalConfirmarUnfollow (props) {
}}
>
<Fade in={props.open}>
- <ContentContainer>
+ <ContentContainer contrast={props.contrast}>
<HeaderDiv>
<span style={{width:"32px"}}/>
<h3>
{text.header}
</h3>
- <CloseModalButton handleClose={props.handleClose}/>
+ <CloseModalButton contrast={props.contrast} handleClose={props.handleClose}/>
</HeaderDiv>
<div style={{display : "flex", flexDirection : "column", padding : "20px 30px"}}>
<div style={{marginTop : "0", textAlign : "center", marginBottom : "20px"}}>
- <span style={{fontSize : "14px", color : "#666"}}>{text.explanation}</span>
+ <span style={{fontSize : "14px"}}>{text.explanation}</span>
</div>
<div style={{display : "flex", flexDirection : "row", justifyContent: "space-evenly"}}>
- <ButtonCancelar onClick={props.handleClose}>CANCELAR</ButtonCancelar>
- <ButtonConfirmar onClick={props.handleConfirm}>DEIXAR DE SEGUIR </ButtonConfirmar>
+ <ButtonCancelar contrast={props.contrast} onClick={props.handleClose}>CANCELAR</ButtonCancelar>
+ <ButtonConfirmar contrast={props.contrast} onClick={props.handleConfirm}>DEIXAR DE SEGUIR </ButtonConfirmar>
</div>
</div>
</ContentContainer>
diff --git a/src/Components/ModalEditarColecao.js b/src/Components/ModalEditarColecao.js
index bd8511f2d867bd1bd45198e086c11dd788ad0f99..b9fe9bd93a3923d924ba38cfb0d133e18450b4d2 100644
--- a/src/Components/ModalEditarColecao.js
+++ b/src/Components/ModalEditarColecao.js
@@ -36,7 +36,6 @@ export default function ModalEditarColecao (props) {
aria-labelledby="transition-modal-title"
aria-describedby="transition-modal-description"
open={props.open}
-
centered="true"
onClose={props.handleClose}
closeAfterTransition
@@ -46,14 +45,14 @@ export default function ModalEditarColecao (props) {
}}
>
<Fade in={props.open}>
- <Container>
+ <Container contrast={props.contrast}>
<Header>
<span style={{width:"32px"}}/>
<h2>Editar Coleção</h2>
<CloseModalButton handleClose={props.handleClose} id={props.id}/>
</Header>
<Content style={{paddingTop : "0"}}>
- <EditarColecaoForm id={props.id} handleClose={props.handleClose} finalize={finalize}/>
+ <EditarColecaoForm contrast={props.contrast} id={props.id} handleClose={props.handleClose} finalize={finalize}/>
</Content>
</Container>
</Fade>
@@ -78,7 +77,6 @@ const Header = styled.div`
h2 {
font-size : 26px;
font-weight : lighter;
- color : #666
}
`
@@ -98,7 +96,9 @@ const StyledModal = styled(Modal)`
const Container = styled.div`
box-sizing : border-box;
box-shadow : 0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px rgba(0,0,0,.12);
- background-color : white;
+ background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
+ color: ${props => props.contrast === "" ? "#666" : "white"} !important;
+ border: 1px solid ${props => props.contrast === "" ? "#666" : "white"} !important;
align : center;
display : flex;
flex-direction : column;
diff --git a/src/Components/ModalExcluirColecao.js b/src/Components/ModalExcluirColecao.js
index f23b819d88584a3ee2fab19dd94bf3935c90b782..40e0561db6988ce60a28dc955fd6a9bc083d18f8 100644
--- a/src/Components/ModalExcluirColecao.js
+++ b/src/Components/ModalExcluirColecao.js
@@ -21,8 +21,8 @@ import Modal from '@material-ui/core/Modal';
import Backdrop from '@material-ui/core/Backdrop';
import Fade from '@material-ui/core/Fade';
import styled from 'styled-components'
-import GreyButton from './GreyButton.js'
-import PurpleButton from './PurpleButton.js'
+import { ButtonCancelar, ButtonEnviar } from './EditarColecaoForm';
+import CloseModalButton from './CloseModalButton'
import SnackbarComponent from './SnackbarComponent'
import {deleteRequest} from './HelperFunctions/getAxiosConfig'
@@ -57,22 +57,17 @@ export default function ModalExcluirColecao (props) {
<Fade in={props.open}>
<>
<SnackbarComponent snackbarOpen={snackbarOpen} severity={"info"} handleClose={() => {toggleSnackbar(false)}} text={"Coleção excluída com sucesso"}/>
- <Container>
+ <Container contrast={props.contrast}>
<Header>
<h2>Tem certeza que deseja excluir esta Coleção?</h2>
+ <CloseModalButton handleClose={props.handleClose} id={props.id}/>
</Header>
<Content>
<p>A exclusão de uma coleção é permanente. Não é possível desfazer.</p>
<ButtonsDiv>
- <GreyButton
- callback={props.handleClose}
- text={"CANCELAR"}
- />
- <PurpleButton
- callback={handleDelete}
- text={"EXCLUIR"}
- />
+ <ButtonCancelar contrast={props.contrast} onClick={props.handleClose}>CANCELAR</ButtonCancelar>
+ <ButtonEnviar contrast={props.contrast} onClick={handleDelete}>EXCLUIR</ButtonEnviar>
</ButtonsDiv>
</Content>
</Container>
@@ -112,7 +107,6 @@ const Header = styled.div`
h2 {
font-size : 26px;
font-weight : lighter;
- color : #666
}
`
@@ -131,7 +125,10 @@ const StyledModal = styled(Modal)`
const Container = styled.div`
box-sizing : border-box;
- background-color : white;
+ background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
+ color: ${props => props.contrast === "" ? "#666" : "white"} !important;
+ border: 1px solid ${props => props.contrast === "" ? "#666" : "white"} !important;
+
max-width : none;
align : center;
display : flex;
@@ -141,7 +138,6 @@ const Container = styled.div`
position : relative;
padding : 10px;
border-radius : 4px;
- color : #666;
@media screen and (max-width : 899px) {
width : 100%;
diff --git a/src/Components/ReportButton.js b/src/Components/ReportButton.js
index 4dbac401d7dce5baad49dff0db0aa2bb5e514c69..4d1bedaf1c80aa2d6822d5e6b4892ec8f6b1c63b 100644
--- a/src/Components/ReportButton.js
+++ b/src/Components/ReportButton.js
@@ -59,7 +59,7 @@ export default function ReportButton(props) {
<>
{
reportModal &&
- <ReportModal open={reportModal} handleClose={() => handleModal()}
+ <ReportModal contrast={state.contrast} open={reportModal} handleClose={() => handleModal()}
form="user" complainableId={props.complainableId}
complainableType={props.complainableType}
{...props} />
diff --git a/src/Components/ReportColecaoForm.js b/src/Components/ReportColecaoForm.js
index 747a0c27bed2fd8105193f764b9314d059651080..f2ec9fcb68e9de7d118436647e8f0a3e419883f1 100644
--- a/src/Components/ReportColecaoForm.js
+++ b/src/Components/ReportColecaoForm.js
@@ -21,23 +21,24 @@ import styled from 'styled-components'
import Radio from '@material-ui/core/Radio';
import RadioGroup from '@material-ui/core/RadioGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
-import TextField from '@material-ui/core/TextField';
-import {StyledFormControl, ButtonsDiv, ButtonCancelar} from './ReportUserForm.js'
+import {StyledFormControl, ButtonsDiv, ButtonCancelar, StyledTextField, useStyles} from './ReportUserForm.js'
import { withStyles } from '@material-ui/core/styles';
const StyledRadio = withStyles({
- root: {
- color: '#666',
- '&$checked': {
- color: '#673ab7',
+ root: {
+ color: '#666',
+ '&$checked': {
+ color: '#673ab7',
+ },
},
- },
- checked: {},
+ checked: {},
})((props) => <Radio color="default" {...props} />);
export default function ReportColecaoForm (props) {
const [value, setValue] = React.useState(-1);
+ const classes = useStyles();
+
const handleChange = (event) => {
setValue(event.target.value);
};
@@ -80,17 +81,18 @@ export default function ReportColecaoForm (props) {
return (
<form onSubmit={(e) => handleSubmit(e)} style={{textAlign : "left"}}>
- <StyledFormControl component="fieldset">
+ <StyledFormControl contrast={props.contrast} component="fieldset">
<RadioGroup value={value} onChange={handleChange}>
{
options.map(option =>
- <FormControlLabel classes={{label: `${props.contrast}Text`}} value={option.value} control={<StyledRadio/>} label={option.text} />
+ <FormControlLabel value={option.value} control={<StyledRadio/>} label={option.text} />
)
}
</RadioGroup>
</StyledFormControl>
<StyledTextField
+ contrast={props.contrast}
id = {"report-text-field"}
label={"Escreva mais sobre o problema"}
value = {moreInfo.value}
@@ -99,38 +101,24 @@ export default function ReportColecaoForm (props) {
multiline={true}
rowsMax = {"5"}
error = {moreInfo.key}
+ InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
required = {false}
style={{width : "100%"}}
/>
<ButtonsDiv>
- <ButtonCancelar onClick={props.handleClose}>CANCELAR</ButtonCancelar>
- <ButtonEnviar type="submit">ENVIAR</ButtonEnviar>
+ <ButtonCancelar contrast={props.contrast} onClick={props.handleClose}>CANCELAR</ButtonCancelar>
+ <ButtonEnviar contrast={props.contrast} type="submit">ENVIAR</ButtonEnviar>
</ButtonsDiv>
</form>
)
}
-const StyledTextField = styled(TextField)`
- .MuiFormHelperText-root {
- text-align : left;
- }
-
- label.Mui-focused {
- color : #673ab7;
- }
-
- label.Mui-focused.Mui-error {
- color : red;
- }
-
- .MuiInput-underline::after {
- border-bottom: 2px solid #673ab7;
- }
-`
const ButtonEnviar = styled(Button)`
- background-color : #673ab7 !important;
- color : #fff !important;
+ color: ${props => props.contrast === "" ? "white !important" : "yellow !important"};
+ background-color: ${props => props.contrast === "" ? "#673ab7 !important" : "black !important"};
+ text-decoration: ${props => props.contrast === "" ? "none !important" : "yellow underline !important"};
+ border: ${props => props.contrast === "" ? "none !important" : "1px solid white !important"};
font-size: 14px !important;
font-weight: 500 !important;
height: 36px !important;
@@ -142,7 +130,6 @@ const ButtonEnviar = styled(Button)`
min-width : 88px !important;
vertical-align : middle !important;
margin : 6px 8px !important;
- text-decoration : none !important;
.MuiButton-label {
padding-right : 16px;
diff --git a/src/Components/ReportModal.js b/src/Components/ReportModal.js
index 78f0cb8bda9abb1971e783f8ed636f049d921b67..a35f4e4ae308ebea12f65113f8638e827fe69452 100644
--- a/src/Components/ReportModal.js
+++ b/src/Components/ReportModal.js
@@ -33,7 +33,7 @@ import SnackbarComponent from './SnackbarComponent.js'
function CloseModalButton (props) {
return (
<StyledCloseModalButton onClick={props.handleClose}>
- <CloseIcon/>
+ <CloseIcon style={props.contrast === "" ? { color: "#666" } : { color: "white" }}/>
</StyledCloseModalButton>
)
}
@@ -81,8 +81,7 @@ export default function ReportModal (props) {
return (
<React.Fragment>
- <SnackbarComponent snackbarOpen={snackbarOpen} severity={"success"} handleClose={() => {handleSnackbar(false)}} text={"Sua reclamação foi recebida."}
- />
+ <SnackbarComponent snackbarOpen={snackbarOpen} severity={"success"} handleClose={() => {handleSnackbar(false)}} text={"Sua reclamação foi recebida."}/>
<StyledModal
aria-labelledby="transition-modal-title"
aria-describedby="transition-modal-description"
diff --git a/src/Components/ReportRecursoForm.js b/src/Components/ReportRecursoForm.js
index e811500d1ceadc32accc29287863f31c71781893..b0d57b9986edfca73b92873e5f7dd5b531c6d59b 100644
--- a/src/Components/ReportRecursoForm.js
+++ b/src/Components/ReportRecursoForm.js
@@ -16,10 +16,12 @@ 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 from 'react';
+import { Button } from '@material-ui/core';
+import styled from 'styled-components'
import Radio from '@material-ui/core/Radio';
import RadioGroup from '@material-ui/core/RadioGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
-import {StyledFormControl, StyledTextField, ButtonsDiv, ButtonCancelar, ButtonEnviar} from './ReportUserForm.js'
+import {StyledFormControl, StyledTextField, ButtonsDiv, ButtonCancelar, useStyles} from './ReportUserForm.js'
import { withStyles } from '@material-ui/core/styles';
const StyledRadio = withStyles({
@@ -35,6 +37,8 @@ const StyledRadio = withStyles({
export default function ReportRecursoForm (props) {
const [value, setValue] = React.useState(-1);
+ const classes = useStyles();
+
const handleChange = (event) => {
setValue(event.target.value);
};
@@ -77,17 +81,18 @@ export default function ReportRecursoForm (props) {
return (
<form onSubmit={(e) => handleSubmit(e)} style={{textAlign : "left"}}>
- <StyledFormControl component="fieldset">
+ <StyledFormControl contrast={props.contrast} component="fieldset">
<RadioGroup value={value} onChange={handleChange}>
{
options.map(option =>
- <FormControlLabel classes={{label: `${props.contrast}Text`}} value={option.value} control={<StyledRadio/>} label={option.text} />
+ <FormControlLabel value={option.value} control={<StyledRadio/>} label={option.text} />
)
}
</RadioGroup>
</StyledFormControl>
<StyledTextField
+ contrast={props.contrast}
id = {"report-text-field"}
label={"Escreva mais sobre o problema"}
value = {moreInfo.value}
@@ -96,14 +101,38 @@ export default function ReportRecursoForm (props) {
multiline={true}
rowsMax = {"5"}
error = {moreInfo.key}
+ InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
required = {false}
style={{width : "100%"}}
/>
<ButtonsDiv>
- <ButtonCancelar className={`${props.contrast}LinkColor`} onClick={props.handleClose}>CANCELAR</ButtonCancelar>
- <ButtonEnviar className={`${props.contrast}LinkColor`} type="submit">ENVIAR</ButtonEnviar>
+ <ButtonCancelar contrast={props.contrast} onClick={props.handleClose}>CANCELAR</ButtonCancelar>
+ <ButtonEnviar contrast={props.contrast} type="submit">ENVIAR</ButtonEnviar>
</ButtonsDiv>
</form>
)
}
+
+export const ButtonEnviar = styled(Button)`
+ color: ${props => props.contrast === "" ? "white !important" : "yellow !important"};
+ background-color: ${props => props.contrast === "" ? "#f07e05 !important" : "black !important"};
+ text-decoration: ${props => props.contrast === "" ? "none !important" : "yellow underline !important"};
+ border: ${props => props.contrast === "" ? "none !important" : "1px solid white !important"};
+ font-size: 14px !important;
+ font-weight: 500 !important;
+ height: 36px !important;
+ border-radius: 3px !important;
+ padding-left: 16px !important;
+ padding-right: 16px !important;
+ box-shadow: 0 2px 5px 0 rgba(0,0,0,.26) !important;
+ outline : none !important;
+ min-width : 88px !important;
+ vertical-align : middle !important;
+ margin : 6px 8px !important;
+
+ .MuiButton-label {
+ padding-right : 16px;
+ padding-left : 16px;
+ }
+`
\ No newline at end of file
diff --git a/src/Components/ReportUserForm.js b/src/Components/ReportUserForm.js
index 370865722d5a85cb2b458f326b891dbfe962a3e8..1677c489b694b0cd1ebb173244499a2e4c187826 100644
--- a/src/Components/ReportUserForm.js
+++ b/src/Components/ReportUserForm.js
@@ -23,20 +23,37 @@ import RadioGroup from '@material-ui/core/RadioGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import FormControl from '@material-ui/core/FormControl';
import TextField from '@material-ui/core/TextField';
-import { withStyles } from '@material-ui/core/styles';
+import { withStyles, makeStyles } from '@material-ui/core/styles';
const StyledRadio = withStyles({
- root: {
- '&$checked': {
- color: '#ff7f00 !important',
+ root: {
+ '&$checked': {
+ color: '#ff7f00 !important',
+ },
},
- },
- checked: {},
-})((props) => <Radio color="default" {...props} />);
+ checked: {},
+})((props) => <Radio {...props} />);
+
+export const useStyles = makeStyles(theme => ({
+ darkTextField: {
+ maxWidth: "100%",
+ fontSize: "15px",
+ color: "white",
+ width: "100%"
+ },
+ lightTextField: {
+ maxWidth: "100%",
+ fontSize: "15px",
+ color: "black",
+ width: "100%"
+ }
+}));
export default function ReportForm (props) {
const [value, setValue] = useState(-1);
+ const classes = useStyles();
+
const handleChange = (event) => {
setValue(event.target.value);
};
@@ -78,17 +95,18 @@ export default function ReportForm (props) {
return (
<form onSubmit={(e) => {formSubmit(e)}}>
- <StyledFormControl component="fieldset">
+ <StyledFormControl contrast={props.contrast} component="fieldset">
<RadioGroup value={value} onChange={handleChange}>
{
options.map(option =>
- <FormControlLabel value={option.value} control={<StyledRadio/>} label={option.text} />
+ <FormControlLabel value={option.value} control={<StyledRadio contrast={props.contrast}/>} label={option.text} />
)
}
</RadioGroup>
</StyledFormControl>
<StyledTextField
+ contrast={props.contrast}
id = {"Escreva mais sobre o problema"}
label={"Escreva mais sobre o problema"}
type = {"text"}
@@ -98,13 +116,14 @@ export default function ReportForm (props) {
multiline={true}
rowsMax = {"5"}
error = {moreInfo.key}
+ InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
required = {false}
style={{width:"100%"}}
/>
<ButtonsDiv>
- <ButtonCancelar onClick={props.handleClose}>CANCELAR</ButtonCancelar>
- <ButtonEnviar type="submit">ENVIAR</ButtonEnviar>
+ <ButtonCancelar contrast={props.contrast} onClick={props.handleClose}>CANCELAR</ButtonCancelar>
+ <ButtonEnviar contrast={props.contrast} type="submit">ENVIAR</ButtonEnviar>
</ButtonsDiv>
</form>
);
@@ -118,23 +137,23 @@ export const ButtonsDiv = styled.div`
`
export const ButtonCancelar = styled(Button)`
- &:hover {
- background-color : rgba(158,158,158,0.2) !important;
- }
+ color: ${props => props.contrast === "" ? "#666 !important" : "yellow !important"};
+ text-decoration: ${props => props.contrast === "" ? "none !important" : "yellow underline !important"};
height : 36px !important;
padding-left : 16px !important;
padding-right : 16px !important;
font-weight : 500 !important;
border-radius : 3px !important;
- color :#666 !important;
background-color: transparent;
min-width : 88px !important;
height : 36px !important;
`
export const ButtonEnviar = styled(Button)`
- background-color : #ff7f00 !important;
- color : #fff !important;
+ color: ${props => props.contrast === "" ? "white !important" : "yellow !important"};
+ background-color: ${props => props.contrast === "" ? "#00bcd4 !important" : "black !important"};
+ text-decoration: ${props => props.contrast === "" ? "none !important" : "yellow underline !important"};
+ border: ${props => props.contrast === "" ? "none !important" : "1px solid white !important"};
font-size: 14px !important;
font-weight: 500 !important;
height: 36px !important;
@@ -146,7 +165,6 @@ export const ButtonEnviar = styled(Button)`
min-width : 88px !important;
vertical-align : middle !important;
margin : 6px 8px !important;
- text-decoration : none !important;
.MuiButton-label {
padding-right : 16px;
@@ -154,26 +172,43 @@ export const ButtonEnviar = styled(Button)`
}
`
export const StyledTextField = styled(TextField)`
- .MuiFormHelperText-root {
- text-align : left;
+
+ padding: 20px 20px 20px 20px;
+ .MuiOutlinedInput-root {
+ &.Mui-focused fieldset {
+ border-color: ${props => props.contrast === "" ? "#ff7f00" : "yellow"};
+ }
+ fieldset {
+ border-color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
+ }
+
+ label{
+ color: ${props => props.contrast === "" ? "#666" : "white"};
}
label.Mui-focused {
- color : orange;
+ color: ${props => props.contrast === "" ? "#ff7f00" : "yellow"};
}
- label.Mui-focused.Mui-error {
- color : red;
+ .MuiFormHelperText-root {
+ text-align : left;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
}
.MuiInput-underline::after {
- border-bottom: 2px solid orange;
+ border-bottom: 2px solid ${props => props.contrast === "" ? "#ff7f00" : "yellow"};
}
+
`
export const StyledFormControl = styled(FormControl)`
.MuiFormControlLabel-root {
- color : #666;
+ color: ${props => props.contrast === "" ? "#666" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ }
+ .MuiIconButton-label {
+ color: ${props => props.contrast === "" ? "#666" : "white"};
}
.PrivateRadioButtonIcon-checked {
diff --git a/src/Components/ResourceCardFunction.js b/src/Components/ResourceCardFunction.js
index fe74faaf51718b3332a1c9bfb69e32fdd4ba64de..615432c66b62b9b1236b2a6c03f2b78c48a5b17c 100644
--- a/src/Components/ResourceCardFunction.js
+++ b/src/Components/ResourceCardFunction.js
@@ -16,7 +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, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useContext } from 'react';
+import { Store } from '../Store'
import "./carousel.css";
import Card from '@material-ui/core/Card';
import { apiDomain } from '../env';
@@ -40,6 +41,7 @@ import Snackbar from '@material-ui/core/Snackbar';
import MuiAlert from '@material-ui/lab/Alert';
export default function ResourceCardFunction(props) {
+ const { state } = useContext(Store);
const [thumbnail, setThumbnail] = useState(null)
// eslint-disable-next-line
const [label, setLabel] = useState(props.type)
@@ -81,9 +83,14 @@ export default function ResourceCardFunction(props) {
}
const handleLike = () => {
- const url = `/learning_objects/${props.id}/like/`
+ if (!state.currentUser.id) {
+ handleLogin()
+ }
+ else {
+ const url = `/learning_objects/${props.id}/like/`
- putRequest(url, {}, handleSuccessLike, (error) => { console.log(error) })
+ putRequest(url, {}, handleSuccessLike, (error) => { console.log(error) })
+ }
}
const handleLogin = () => {
@@ -134,9 +141,9 @@ export default function ResourceCardFunction(props) {
return (
<React.Fragment>
- <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin}
+ <SignUpModal contrast={props.contrast} open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin}
/>
- <LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
+ <LoginModal contrast={props.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
openSnackbar={() => { handleSuccessfulLogin(true) }}
/>
<Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleLoginSnackbar}
diff --git a/src/Components/ResourceCardOptions.js b/src/Components/ResourceCardOptions.js
index 6d0e093d7adc4d962d5178217a56813e50bb3602..e0a2f0eff01375b05430c609fea816b67d7b455a 100644
--- a/src/Components/ResourceCardOptions.js
+++ b/src/Components/ResourceCardOptions.js
@@ -140,33 +140,33 @@ export default function ResourceCardOptions(props) {
open={Boolean(anchorEl)}
onClose={handleClose}
>
- <StyledMenuItem className={`${props.contrast}LinkColor`} contrast={props.contrast} onClick={handleClose}>
+ <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={handleClose}>
<Link to={"/recurso/" + props.learningObjectId}>
- <ListItemIcon className={`${props.contrast}LinkColor`}><OpenIcon /></ListItemIcon>Abrir
+ <ListItemIcon className={`${props.contrast}IconColor`}><OpenIcon /></ListItemIcon>Abrir
</Link>
</StyledMenuItem>
- <StyledMenuItem className={`${props.contrast}LinkColor`} contrast={props.contrast} onClick={() => window.open("/recurso/" + props.learningObjectId, "_blank")}>
- <ListItemIcon className={`${props.contrast}LinkColor`}><OpenInBrowserIcon /></ListItemIcon> Abrir em nova guia
+ <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={() => window.open("/recurso/" + props.learningObjectId, "_blank")}>
+ <ListItemIcon className={`${props.contrast}IconColor`}><OpenInBrowserIcon /></ListItemIcon> Abrir em nova guia
</StyledMenuItem>
{
props.downloadableLink &&
- <StyledMenuItem className={`${props.contrast}LinkColor`} contrast={props.contrast} onClick={() => { enableDownload(); handleClose() }}>
- <ListItemIcon className={`${props.contrast}LinkColor`}><DownloadIcon /></ListItemIcon>Baixar
+ <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={() => { enableDownload(); handleClose() }}>
+ <ListItemIcon className={`${props.contrast}IconColor`}><DownloadIcon /></ListItemIcon>Baixar
</StyledMenuItem>
}
- <StyledMenuItem className={`${props.contrast}LinkColor`} contrast={props.contrast} onClick={handleShare}>
- <ListItemIcon className={`${props.contrast}LinkColor`}><ShareIcon /></ListItemIcon>Compartilhar
+ <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={handleShare}>
+ <ListItemIcon className={`${props.contrast}IconColor`}><ShareIcon /></ListItemIcon>Compartilhar
</StyledMenuItem>
- <StyledMenuItem className={`${props.contrast}LinkColor`} contrast={props.contrast} onClick={handleGuardar}>
- <ListItemIcon className={`${props.contrast}LinkColor`}><AddIcon /></ListItemIcon>Guardar
+ <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={handleGuardar}>
+ <ListItemIcon className={`${props.contrast}IconColor`}><AddIcon /></ListItemIcon>Guardar
</StyledMenuItem>
- <StyledMenuItem className={`${props.contrast}LinkColor`} contrast={props.contrast} onClick={() => { handleReport() }}>
- <ListItemIcon className={`${props.contrast}LinkColor`}><ReportIcon /></ListItemIcon>Reportar
+ <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={() => { handleReport() }}>
+ <ListItemIcon className={`${props.contrast}IconColor`}><ReportIcon /></ListItemIcon>Reportar
</StyledMenuItem>
</Menu>
diff --git a/src/Components/ResourceList.js b/src/Components/ResourceList.js
index e8dc0989eee3da3281e46e874d327e79c39215ef..67d22bc760ce3bf1e3449ddad59fb7755a8020b4 100644
--- a/src/Components/ResourceList.js
+++ b/src/Components/ResourceList.js
@@ -131,7 +131,7 @@ export default function ResourceList(props) {
</Title>
</Grid>
<Grid item>
- <Button color="primary" onClick={() => setSelectable(!selectable)}>
+ <Button onClick={() => setSelectable(!selectable)}>
<PanelButtonText contrast={props.contrast}>
{selectable ? "Desativar" : "Ativar"} seleção
</PanelButtonText>
diff --git a/src/Components/ResourcePageComponents/CommentsArea.js b/src/Components/ResourcePageComponents/CommentsArea.js
index 4b22d249ff9071fc0d535c7e081de589dd1a9ed0..f6d38cf4f59de812a3bf65041cc2f558514823f9 100644
--- a/src/Components/ResourcePageComponents/CommentsArea.js
+++ b/src/Components/ResourcePageComponents/CommentsArea.js
@@ -136,10 +136,10 @@ export default function CommentsArea(props) {
<Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
</Snackbar>
{/*-------------------------------MODALS---------------------------------------*/}
- <LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
+ <LoginModal contrast={props.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
openSnackbar={() => { handleSuccessfulLogin(true) }}
/>
- <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} />
+ <SignUpModal contrast={props.contrast} open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} />
{/*----------------------------------------------------------------------------*/}
<Grid container spacing={2} style={{ padding: "10px" }}>
{
diff --git a/src/Components/ResourcePageComponents/Footer.js b/src/Components/ResourcePageComponents/Footer.js
index 021001b7b188c06109d7853ae7b0828bb426bb6c..e47e07247b203858a62019fd0b3bd07d6a2b07a1 100644
--- a/src/Components/ResourcePageComponents/Footer.js
+++ b/src/Components/ResourcePageComponents/Footer.js
@@ -49,7 +49,7 @@ function ReportButton(props) {
(
<ButtonGrey contrast={props.contrast} onClick={props.userLoggedIn ? props.toggleReport : props.openLogin}>
<span className="button-text">
- <ErrorIcon className="icon" /> Reportar abuso ou erro
+ <ErrorIcon className="icon" />Reportar abuso ou erro
</span>
</ButtonGrey>
)
@@ -57,7 +57,7 @@ function ReportButton(props) {
(
<ButtonGrey contrast={props.contrast}>
<span className="button-text-report">
- <ErrorIcon className="icon" /> Você já reportou este recurso
+ <ErrorIcon className="icon" />Você já reportou este recurso
</span>
</ButtonGrey>
)
@@ -70,7 +70,7 @@ function DownloadButton(props) {
(
<ButtonOrange contrast={props.contrast} onClick={props.enableDownload}>
<span className="text">
- <GetAppIcon className="icon" /> Baixar Recurso
+ <GetAppIcon className="icon" />Baixar Recurso
</span>
</ButtonOrange>
)
@@ -79,7 +79,7 @@ function DownloadButton(props) {
(
<ButtonOrange contrast={props.contrast} onClick={props.toggleRedirect}>
<span className="text">
- <CallMadeIcon className="icon" /> Abrir Recurso
+ <CallMadeIcon className="icon" />Abrir Recurso
</span>
</ButtonOrange>
)
@@ -150,25 +150,25 @@ export default function Footer(props) {
<Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
</Snackbar>
{/*-------------------------------MODALS---------------------------------------*/}
- <ReportModal open={reportOpen} handleClose={() => { toggleReport(false) }}
+ <ReportModal contrast={props.contrast} open={reportOpen} handleClose={() => { toggleReport(false) }}
form="recurso"
complainableId={props.recursoId}
complainableType={"LearningObject"}
/>
- <ShareModal open={shareOpen} handleClose={() => { toggleShare(false) }}
+ <ShareModal contrast={props.contrast} open={shareOpen} handleClose={() => { toggleShare(false) }}
thumb={props.thumb} title={props.title} link={props.currPageLink}
/>
- <GuardarModal open={saveToCol} handleClose={() => { toggleSave(false) }}
+ <GuardarModal contrast={props.contrast} open={saveToCol} handleClose={() => { toggleSave(false) }}
thumb={props.thumb} title={props.title} recursoId={props.recursoId}
/>
- <RedirectModal open={redirectOpen} handleClose={() => { toggleRedirect(false) }}
+ <RedirectModal contrast={props.contrast} open={redirectOpen} handleClose={() => { toggleRedirect(false) }}
link={props.link}
/>
- <LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
+ <LoginModal contrast={props.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
openSnackbar={() => { handleSuccessfulLogin(true) }}
/>
- <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} />
+ <SignUpModal contrast={props.contrast} open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} />
{/*----------------------------------------------------------------------------*/}
{/*-----------------------------BUTTONS----------------------------------------*/}
@@ -193,8 +193,8 @@ export default function Footer(props) {
<Grid item xs={3}>
<ButtonGrey contrast={props.contrast} onClick={state.currentUser.id === '' ? () => handleLogin(true) : () => toggleShare(true)}>
<span className="button-text">
- <ShareIcon className="icon" /> Compartilhar
- </span>
+ <ShareIcon className="icon" />Compartilhar
+ </span>
</ButtonGrey>
</Grid>
@@ -203,7 +203,7 @@ export default function Footer(props) {
<ButtonGrey contrast={props.contrast} onClick={state.currentUser.id === '' ? () => handleLogin(true) : () => toggleSave(true)}>
<span className="button-text">
<FolderIcon className="icon" />Guardar
- </span>
+ </span>
</ButtonGrey>
</Grid>
@@ -226,7 +226,7 @@ export default function Footer(props) {
<ButtonGrey contrast={props.contrast} onClick={state.currentUser.id === '' ? () => handleLogin(true) : () => toggleSave(true)}>
<span className="button-text">
<FolderIcon className="icon" />Guardar
- </span>
+ </span>
</ButtonGrey>
</Grid>
@@ -241,7 +241,7 @@ export default function Footer(props) {
</Grid>
<Grid item xs={1}>
- <Button aria-haspopup="true" onClick={handleClick} style={{ color: "#666" }}>
+ <Button aria-haspopup="true" onClick={handleClick} style={props.contrast === "" ? { color: "#666" } : {color: "yellow"}}>
<MoreVertIcon />
</Button>
<Menu
@@ -251,19 +251,20 @@ export default function Footer(props) {
open={Boolean(anchorEl)}
onClose={handleClose}
>
- <MenuItem>
+ <MenuItem className={`${props.contrast}BackColor`}>
<ReportButton
+ contrast={props.contrast}
userLoggedIn={state.currentUser.id === '' ? false : true}
toggleReport={() => { toggleReport(true) }}
openLogin={handleLogin}
complained={props.complained}
/>
</MenuItem>
- <MenuItem>
+ <MenuItem className={`${props.contrast}BackColor`}>
<ButtonGrey contrast={props.contrast} onClick={state.currentUser.id === '' ? () => handleLogin(true) : () => toggleShare(true)}>
<span className="button-text">
<ShareIcon className="icon" /> Compartilhar
- </span>
+ </span>
</ButtonGrey>
</MenuItem>
</Menu>
@@ -284,17 +285,17 @@ const OpcoesDiv = styled.div`
display : flex;
align-items : center;
height : 65px;
- background-color: ${props => props.contrast === "" ? "#fafafa" : "black"};
+ background-color: ${props => props.contrast === "" ? "white" : "black"};
`
const StyledGrid = styled(Grid)`
@media screen and (min-width: 990px) {
- padding-left : 15px !important;
+ padding-left : 12px !important;
}
.MuiGrid-item {
- padding-right : 15px;
- padding-left : 15px;
+ padding-right : 12px;
+ padding-left : 12px;
display : flex;
justify-content : center;
}
@@ -302,17 +303,16 @@ const StyledGrid = styled(Grid)`
const ButtonGrey = styled(Button)`
&:hover {
- background-color: ${props => props.contrast === "" ? "rgba(158,158,158,0.2) !important" : "rgba(255,255,0,0.24) !important"};
+ background-color: ${props => props.contrast === "" ? "rgba(158,158,158,0.2)" : "rgba(255,255,0,0.24)"} !important;
}
- background-color : transparent !important;
- color: ${props => props.contrast === "" ? "#666 !important" : "yellow !important"};
- text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"};
- border: ${props => props.contrast === "" ? "0 !important" : "1px solid white !important"};
+ background-color : ${props => props.contrast === "" ? "transparent" : "black"} !important;
+ color: ${props => props.contrast === "" ? "#666" : "yellow"} !important;
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"} !important;
outline : none !important;
text-align : center !important;
.icon {
- color: ${props => props.contrast === "" ? "inherit !important" : "white !important"};
+ color: ${props => props.contrast === "" ? "inherit" : "white"} !important;
vertical-align : middle !important;
font-weight : normal !important;
font-style : normal !important;
@@ -331,7 +331,6 @@ const ButtonGrey = styled(Button)`
cursor : pointer;
line-height : 36px;
text-align : center;
- color : currentColor;
white-space : nowrap;
text-transform : uppercase;
font-weight : 600;
@@ -358,10 +357,10 @@ const ButtonOrange = styled(Button)`
background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
}
box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important;
- background-color: ${props => props.contrast === "" ? "#ff7f00 !important" : "black !important"};
- color: ${props => props.contrast === "" ? "#666 !important" : "yellow !important"};
- text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"};
- border: ${props => props.contrast === "" ? "0 !important" : "1px solid white !important"};
+ background-color: ${props => props.contrast === "" ? "#ff7f00" : "black"} !important;
+ color: ${props => props.contrast === "" ? "#666" : "yellow"} !important;
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"} !important;
+ border: ${props => props.contrast === "" ? "0" : "1px solid white"} !important;
text-transform : uppercase !important;
outline : none !important;
/* max-height: 36px !important; */
@@ -385,7 +384,7 @@ const ButtonOrange = styled(Button)`
}
.text {
- color: ${props => props.contrast === "" ? "white !important" : "yellow !important"};
+ color: ${props => props.contrast === "" ? "white" : "yellow"} !important;
font-size : 14px;
font-weight : 600;
}
diff --git a/src/Components/ResourcePageComponents/Sobre.js b/src/Components/ResourcePageComponents/Sobre.js
index 6ab60c24fe1e962d11cc1b9c514df1f101a2bdd9..24afcaf11f7caec32dca3607bc5a0d3a6ddacb1f 100644
--- a/src/Components/ResourcePageComponents/Sobre.js
+++ b/src/Components/ResourcePageComponents/Sobre.js
@@ -175,10 +175,10 @@ export default function Sobre(props) {
<Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
</Snackbar>
{/*-------------------------------MODALS---------------------------------------*/}
- <LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
+ <LoginModal contrast={state.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
openSnackbar={() => { handleSuccessfulLogin(true) }}
/>
- <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} />
+ <SignUpModal contrast={state.contrast} open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} />
{/*----------------------------------------------------------------------------*/}
<Grid container style={{ paddingRight: "15px", paddingLeft: "15px" }}>
@@ -244,14 +244,14 @@ export default function Sobre(props) {
followed ? (
<>
<NoIconFollowing contrast={state.contrast} followedID={props.id} toggleFollowed={toggleFollowed} />
- <ContactCardOptions followed={followed} followableID={props.id} toggleFollowed={toggleFollowed} />
+ <ContactCardOptions contrast={state.contrast} followed={followed} followableID={props.id} toggleFollowed={toggleFollowed} />
</>
)
:
(
<>
- <NoIcon followableID={props.id} toggleFollowed={toggleFollowed} />
- <ContactCardOptions followed={followed} followableID={props.id} toggleFollowed={toggleFollowed} />
+ <NoIcon contrast={state.contrast} followableID={props.id} toggleFollowed={toggleFollowed} />
+ <ContactCardOptions contrast={state.contrast} followed={followed} followableID={props.id} toggleFollowed={toggleFollowed} />
</>
)
}
@@ -306,7 +306,7 @@ const CollapseControl = styled.div`
`
const SobreDiv = styled.div`
- background-color: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
+ background-color: ${props => props.contrast === "" ? "white" : "black"};
padding-left : 3% !important;
padding-top : 3% !important;
.titulo {
diff --git a/src/Components/ResourcePageComponents/TextoObjeto.js b/src/Components/ResourcePageComponents/TextoObjeto.js
index 9f51afa47ed51653a957a8c993c6668bb34587db..f40324cf53c37c6909325ef65bf238c8e9ef4b67 100644
--- a/src/Components/ResourcePageComponents/TextoObjeto.js
+++ b/src/Components/ResourcePageComponents/TextoObjeto.js
@@ -186,10 +186,10 @@ export default function TextoObjeto (props) {
{
(checkAccessLevel('publisher') || props.stateRecurso === "draft") &&
<Link to={"/editar-recurso/" + props.recursoId}>
- <Button style={{color : "#666"}}><EditIcon/></Button>
+ <Button className={`${props.contrast}LinkColor`} style={{color : "#666"}}><EditIcon/></Button>
</Link>
}
- <Button style={{color : "#666"}} onClick={() => {handleDelete()}}><DeleteForeverIcon/></Button>
+ <Button className={`${props.contrast}LinkColor`} style={{color : "#666"}} onClick={() => {handleDelete()}}><DeleteForeverIcon/></Button>
</React.Fragment>
}
@@ -200,7 +200,7 @@ export default function TextoObjeto (props) {
}
const TextoObjetoDiv = styled.div`
- background-color: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
+ background-color: ${props => props.contrast === "" ? "white" : "black"};
padding : 20px 20px 0 20px;
display : flex;
flex-direction : column;
@@ -252,11 +252,10 @@ const TextoObjetoDiv = styled.div`
.alert-warning {
color: ${props => props.contrast === "" ? "#8a6d3b" : "white"};
- background-color : #fcf8e3;
- border-color : #faebcc;
+ background-color : ${props => props.contrast === "" ? "#fcf8e3" : "black"};
+ border: 1px solid ${props => props.contrast === "" ? "#faebcc" : "white"};
padding: 15px;
margin-bottom: 20px;
- border: 1px solid transparent;
border-radius: 4px;
font-size : 14px;
}
diff --git a/src/Components/SearchBar.js b/src/Components/SearchBar.js
index fa973db65e9798fe63e1b6ac11fd90f9fdecfb77..adc31726ba6eb71b1add5a632d8fd937dbee9977 100644
--- a/src/Components/SearchBar.js
+++ b/src/Components/SearchBar.js
@@ -26,19 +26,18 @@ import styled from 'styled-components'
import { Store } from '../Store';
import { v4 as uuidv4 } from 'uuid'
import Grid from "@material-ui/core/Grid"
-import { makeStyles } from "@material-ui/styles";
-
+import {useStyles} from './ReportUserForm.js'
const dividerStyled = {
- background: '#e0e0e0',
- width: '1px',
- content: "",
- display: 'block',
- top: '0',
- bottom: '0',
- right: '0',
- minHeight: '70px',
- margin: '0 20px'
+ background: '#e0e0e0',
+ width: '1px',
+ content: "",
+ display: 'block',
+ top: '0',
+ bottom: '0',
+ right: '0',
+ minHeight: '70px',
+ margin: '0 20px'
}
const useStyles = makeStyles(theme => ({
@@ -64,28 +63,28 @@ const ButtonStyled = styled(Button)`
text-transform: capitalize !important;
`
const IconSearchStyled = styled(IconSearch)`
- color: ${props => props.contrast === "" ? "#16b8dd" : "white"};
+ color: ${props => props.contrast === "" ? "#16b8dd" : "white"};
`
const TextFieldStyled = styled(TextField)`
- flex-grow: 2;
+ flex-grow: 2;
margin: 0 2vw !important;
.MuiOutlinedInput-root {
- &.Mui-focused fieldset {
- border-color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
- }
- fieldset {
- border-color: ${props => props.contrast === "" ? "#666" : "white"};
- }
+ &.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"};
+ color: ${props => props.contrast === "" ? "#666" : "white"};
}
label.Mui-focused {
- color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
}
label.Mui-focused.Mui-error {
@@ -93,201 +92,183 @@ const TextFieldStyled = styled(TextField)`
}
`
-/*
-const RadioGroupStyled = styled(RadioGroup)`
- display: flex;
- flex-direction: row;
- flex-grow: 1;
-`
-*/
-
const FormLearnObjControlLabelStyled = styled(FormControlLabel)`
- *{
- text-transform: uppercase;
- color: ${props => props.contrast === "" ? "#ff8a17 !important" : "yellow !important"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
- font-weight: bolder;
- }
+ *{
+ text-transform: uppercase;
+ color: ${props => props.contrast === "" ? "#ff8a17 !important" : "yellow !important"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ font-weight: bolder;
+ }
`
const FormCollectionControlLabelStyled = styled(FormControlLabel)`
- *{
- text-transform: uppercase;
- color: ${props => props.contrast === "" ? "#673ab7 !important" : "yellow !important"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
- font-weight: bolder;
- }
+ *{
+ text-transform: uppercase;
+ color: ${props => props.contrast === "" ? "#673ab7 !important" : "yellow !important"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ font-weight: bolder;
+ }
`
const FormUserControlLabelStyled = styled(FormControlLabel)`
- *{
- text-transform: uppercase;
- color: ${props => props.contrast === "" ? "#00bcd4 !important" : "yellow !important"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
- font-weight: bolder;
- }
+ *{
+ text-transform: uppercase;
+ color: ${props => props.contrast === "" ? "#00bcd4 !important" : "yellow !important"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ font-weight: bolder;
+ }
`
const RadioLearnObjStyled = styled(Radio)`
- color: #ff8a17;
+ color: #ff8a17;
`
const RadioCollectionStyled = styled(Radio)`
- color: #673ab7;
+ color: #673ab7;
`
const RadioUserStyled = styled(Radio)`
- color: #00bcd4;
+ color: #00bcd4;
`
const SelectStyled = styled(Select)`
- margin-right: 2vw;
- *{
- text-transform: uppercase;
- color: ${props => props.contrast === "" ? "#ff8a17 !important" : "yellow !important"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
- font-weight: bolder;
- }
+ margin-right: 2vw;
+ *{
+ text-transform: uppercase;
+ color: ${props => props.contrast === "" ? "#ff8a17 !important" : "yellow !important"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ font-weight: bolder;
+ }
`
const MenuItemStyled = styled(MenuItem)`
text-transform: uppercase;
font-weight: bolder;
`
-/*const Bar = styled.div`
- display: flex;
- align-items: center;
- justify-content: space-between;
- border-top: 1px rgba(0,0,0,.1) solid;
-`
-const Flex = styled.span`
- display: flex;
- align-items: center;
- color: #787380;
-`*/
-
export default function SearchBar(props) {
- const classes = useStyles();
- const [query, setQuery] = useState('')
- const [searchClass, setSearchClass] = useState('LearningObject')
-
- const { state, dispatch } = useContext(Store)
-
- const [goSearch, setGoSearch] = useState(false)
-
- useEffect(() => {
- if (window.location.pathname.includes('busca')) {
- const urlParams = new URLSearchParams(window.location.search)
- const urlQuery = urlParams.get('query')
- const urlSearchClass = urlParams.get('search_class')
- if (searchClass !== urlSearchClass || query !== urlQuery) {
- setQuery(urlQuery)
- setSearchClass(urlSearchClass)
- }
- }
- }, [])
+ const [query, setQuery] = useState('')
- useEffect(() => setGoSearch(false), [goSearch])
+ const classes = useStyles();
- const handleChange = (event) => {
- setQuery(event.target.value)
- }
+ const [searchClass, setSearchClass] = useState('LearningObject')
- const handleKeyDown = (event) => {
- if (event.key === 'Enter' || event.type === 'click') {
- dispatch({
- type: 'SAVE_SEARCH',
- newSearch: {
- query: query !== '' ? query : '*',
- class: searchClass
+ const { state, dispatch } = useContext(Store)
+
+ const [goSearch, setGoSearch] = useState(false)
+
+ useEffect(() => {
+ if (window.location.pathname.includes('busca')) {
+ const urlParams = new URLSearchParams(window.location.search)
+ const urlQuery = urlParams.get('query')
+ const urlSearchClass = urlParams.get('search_class')
+ if (searchClass !== urlSearchClass || query !== urlQuery) {
+ setQuery(urlQuery)
+ setSearchClass(urlSearchClass)
+ }
}
- })
- setGoSearch(true)
+ }, [])
+
+ useEffect(() => setGoSearch(false), [goSearch])
+
+ const handleChange = (event) => {
+ setQuery(event.target.value)
}
- }
- const linkTarget = {
- pathname: `/busca?page=0&results_per_page=12&order=review_average&query=${state.search.query}&search_class=${state.search.class}`,
- key: uuidv4(), // we could use Math.random, but that's not guaranteed unique.
- state: {
- applied: true
+ const handleKeyDown = (event) => {
+ if (event.key === 'Enter' || event.type === 'click') {
+ dispatch({
+ type: 'SAVE_SEARCH',
+ newSearch: {
+ query: query !== '' ? query : '*',
+ class: searchClass
+ }
+ })
+ setGoSearch(true)
+ }
}
- };
-
- return (
- <Grid container style={state.contrast === "" ? { paddingTop: "1em" } : { backgroundColor: "black", paddingTop: "1em" }}>
- <Grid container item xs={12} sm={6} md={6} lg={6} xl={6}>
- {goSearch && <Redirect to={`/busca?page=0&results_per_page=12&order=review_average&query=${state.search.query}&search_class=${state.search.class}`} />}
- <TextFieldStyled
- contrast={state.contrast}
- id="standard-search"
- label="O que você está buscando?"
- type="search"
- margin="normal"
- variant="outlined"
- InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
- value={query}
- onChange={handleChange}
- onKeyPress={handleKeyDown}
- />
- </Grid>
- <Grid container item justify="center" alignItems="center" xs={12} sm={6} md={6} lg={6} xl={6}>
- {state.windowSize.width >= 960 ?
- <React.Fragment>
- <Grid container item justify="center" alignItems="center" xs={12} sm={1} md={1} lg={1} xl={1}>
- <Link
- to={linkTarget}
- >
- <ButtonStyled onClick={handleKeyDown} ><IconSearchStyled contrast={state.contrast} /></ButtonStyled>
- </Link>
- </Grid>
- <Grid container item justify="center" alignItems="center" xs={12} sm={3} md={3} lg={3} xl={3}>
- <span style={state.contrast === "" ? {} : { color: "white" }}>Pressione "Enter" ou click na lupa</span>
- </Grid>
- <Grid container item justify="center" alignItems="center" xs={12} sm={1} md={1} lg={1} xl={1}>
- <DividerVertical />
+
+ const linkTarget = {
+ pathname: `/busca?page=0&results_per_page=12&order=review_average&query=${state.search.query}&search_class=${state.search.class}`,
+ key: uuidv4(), // we could use Math.random, but that's not guaranteed unique.
+ state: {
+ applied: true
+ }
+ };
+
+ return (
+ <Grid container style={state.contrast === "" ? { paddingTop: "1em" } : { backgroundColor: "black", paddingTop: "1em" }}>
+ <Grid container item xs={12} sm={6} md={6} lg={6} xl={6}>
+ {goSearch && <Redirect to={`/busca?page=0&results_per_page=12&order=review_average&query=${state.search.query}&search_class=${state.search.class}`} />}
+ <TextFieldStyled
+ contrast={state.contrast}
+ id="standard-search"
+ label="O que você está buscando?"
+ type="search"
+ margin="normal"
+ variant="outlined"
+ value={query}
+ InputProps={state.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
+ onChange={handleChange}
+ onKeyPress={handleKeyDown}
+ />
</Grid>
- <Grid container item justify="center" alignItems="center" xs={12} sm={7} md={7} lg={7} xl={7}>
- <RadioGroup row={true}
- aria-label="Tipo"
- name="types" value={searchClass}
- onChange={
- (event) => setSearchClass(event.target.value)
+ <Grid container item justify="center" alignItems="center" xs={12} sm={6} md={6} lg={6} xl={6}>
+ {state.windowSize.width >= 960 ?
+ <React.Fragment>
+ <Grid container item justify="center" alignItems="center" xs={12} sm={1} md={1} lg={1} xl={1}>
+ <Link
+ to={linkTarget}
+ >
+ <ButtonStyled onClick={handleKeyDown} ><IconSearchStyled contrast={state.contrast} /></ButtonStyled>
+ </Link>
+ </Grid>
+ <Grid container item justify="center" alignItems="center" xs={12} sm={3} md={3} lg={3} xl={3}>
+ <span style={state.contrast === "" ? {} : { color: "white" }}>Pressione "Enter" ou click na lupa</span>
+ </Grid>
+ <Grid container item justify="center" alignItems="center" xs={12} sm={1} md={1} lg={1} xl={1}>
+ <DividerVertical />
+ </Grid>
+ <Grid container item justify="center" alignItems="center" xs={12} sm={7} md={7} lg={7} xl={7}>
+ <RadioGroup row={true}
+ aria-label="Tipo"
+ name="types" value={searchClass}
+ onChange={
+ (event) => setSearchClass(event.target.value)
+ }
+ justify="center" alignItems="center"
+ >
+ <FormLearnObjControlLabelStyled contrast={state.contrast} value="LearningObject" control={<RadioLearnObjStyled contrast={state.contrast} />} label="Recursos" />
+ <FormCollectionControlLabelStyled contrast={state.contrast} value="Collection" control={<RadioCollectionStyled contrast={state.contrast} />} label="Coleções" />
+ <FormUserControlLabelStyled contrast={state.contrast} value="User" control={<RadioUserStyled contrast={state.contrast} />} label="Usuários" />
+ </RadioGroup>
+ </Grid>
+ </React.Fragment>
+ :
+ <React.Fragment>
+ <Grid container item justify="center" alignItems="center" xs={5} sm={5} md={5} lg={5} xl={5}>
+ <FormControl>
+ <SelectStyled
+ contrast={state.contrast}
+ value={searchClass}
+ onChange={(event) => setSearchClass(event.target.value)}
+ >
+ <MenuItemStyled style={state.contrast === "" ? { color: "#ff7f00" } : { color: "yellow", backgroundColor: "black", textDecoration: "underline" }} value="LearningObject" aria-label="Recursos">Recursos</MenuItemStyled>
+ <MenuItemStyled style={state.contrast === "" ? { color: "#673ab7" } : { color: "yellow", backgroundColor: "black", textDecoration: "underline" }} value="Collection" aria-label="Coleções">Coleções</MenuItemStyled>
+ <MenuItemStyled style={state.contrast === "" ? { color: "#00bcd4" } : { color: "yellow", backgroundColor: "black", textDecoration: "underline" }} value="User" aria-label="Usuários">Usuários</MenuItemStyled>
+ </SelectStyled>
+ </FormControl>
+ </Grid>
+ <Grid container item justify="center" alignItems="center" xs={2} sm={2} md={2} lg={2} xl={2}>
+ <DividerVertical />
+ </Grid>
+ <Grid container item justify="center" alignItems="center" xs={5} sm={5} md={5} lg={5} xl={5}>
+ <Link
+ to={linkTarget}
+ >
+ <ButtonStyled onClick={handleKeyDown} ><IconSearchStyled contrast={state.contrast} /></ButtonStyled>
+ </Link>
+ </Grid>
+ </React.Fragment>
}
- justify="center" alignItems="center"
- >
- <FormLearnObjControlLabelStyled contrast={state.contrast} value="LearningObject" control={<RadioLearnObjStyled contrast={state.contrast} />} label="Recursos" />
- <FormCollectionControlLabelStyled contrast={state.contrast} value="Collection" control={<RadioCollectionStyled contrast={state.contrast} />} label="Coleções" />
- <FormUserControlLabelStyled contrast={state.contrast} value="User" control={<RadioUserStyled contrast={state.contrast} />} label="Usuários" />
- </RadioGroup>
- </Grid>
- </React.Fragment>
- :
- <React.Fragment>
- <Grid container item justify="center" alignItems="center" xs={5} sm={5} md={5} lg={5} xl={5}>
- <FormControl>
- <SelectStyled
- contrast={state.contrast}
- value={searchClass}
- onChange={(event) => setSearchClass(event.target.value)}
- >
- <MenuItemStyled style={state.contrast === "" ? { color: "#ff7f00" } : { color: "yellow", backgroundColor: "black", textDecoration: "underline" }} value="LearningObject" aria-label="Recursos">Recursos</MenuItemStyled>
- <MenuItemStyled style={state.contrast === "" ? { color: "#673ab7" } : { color: "yellow", backgroundColor: "black", textDecoration: "underline" }} value="Collection" aria-label="Coleções">Coleções</MenuItemStyled>
- <MenuItemStyled style={state.contrast === "" ? { color: "#00bcd4" } : { color: "yellow", backgroundColor: "black", textDecoration: "underline" }} value="User" aria-label="Usuários">Usuários</MenuItemStyled>
- </SelectStyled>
- </FormControl>
- </Grid>
- <Grid container item justify="center" alignItems="center" xs={2} sm={2} md={2} lg={2} xl={2}>
- <DividerVertical />
</Grid>
- <Grid container item justify="center" alignItems="center" xs={5} sm={5} md={5} lg={5} xl={5}>
- <Link
- to={linkTarget}
- >
- <ButtonStyled onClick={handleKeyDown} ><IconSearchStyled contrast={state.contrast} /></ButtonStyled>
- </Link>
- </Grid>
- </React.Fragment>
- }
- </Grid>
- </Grid >
- )
+ </Grid >
+ )
}
\ No newline at end of file
diff --git a/src/Components/SignUpContainerFunction.js b/src/Components/SignUpContainerFunction.js
index 3917b51941e88da9291a43d9b7f34011cc5da99c..5af5f4f7fed21e91bb2524712c9c1b2b2bc86a47 100644
--- a/src/Components/SignUpContainerFunction.js
+++ b/src/Components/SignUpContainerFunction.js
@@ -279,14 +279,16 @@ const ContainerStyled = styled.div`
display : flex;
flex-direction : column;
min-width : 450px;
+ border: 1px solid ${props => props.contrast === "" ? "#666" : "white"};
+ overflow-y: scroll;
- max-height : none;
+ max-height : 90%;
position : relative;
padding : 10px;
@media ${device.mobileM} {
width : 100%;
min-width : unset;
- height : 100%;
+ height : 90%;
min-width : unset !important;
}
diff --git a/src/Components/TabPanels/UserPageTabs/ModalExcluirConta.js b/src/Components/TabPanels/UserPageTabs/ModalExcluirConta.js
index 1d4410498bd71d489e4d8ccd9a3284bb8f890662..4fae72c7d3eae0e30a6c206ea7d8b0fe8315a569 100644
--- a/src/Components/TabPanels/UserPageTabs/ModalExcluirConta.js
+++ b/src/Components/TabPanels/UserPageTabs/ModalExcluirConta.js
@@ -34,7 +34,7 @@ import {deleteRequest} from '../../HelperFunctions/getAxiosConfig'
function CloseModalButton (props) {
return (
<StyledCloseModalButton onClick={props.handleClose}>
- <CloseIcon/>
+ <CloseIcon style={props.contrast === "" ? { color: "#666" } : { color: "white" }}/>
</StyledCloseModalButton>
)
}
diff --git a/src/Components/TabPanels/UserPageTabs/PanelEditarPerfil.js b/src/Components/TabPanels/UserPageTabs/PanelEditarPerfil.js
index aa7ee16049c14310e70f1ab83b69f8b12f4860bf..19fd31bbe28f42c4cab259617bba9f6ed17497f5 100644
--- a/src/Components/TabPanels/UserPageTabs/PanelEditarPerfil.js
+++ b/src/Components/TabPanels/UserPageTabs/PanelEditarPerfil.js
@@ -115,12 +115,14 @@ export default function TabPanelEditarPerfil(props) {
return (
<React.Fragment>
<ModalAlterarCover
+ contrast={state.contrast}
open={open}
handleClose={controlModal}
cover={tempCover}
id={state.currentUser.id}
/>
<ModalAlterarAvatar
+ contrast={state.contrast}
open={alterarAvatatarOpen}
handleClose={controlModalAvatar}
userAvatar={state.currentUser.avatar}
diff --git a/src/Components/TabPanels/UserPageTabs/PanelGerenciarConta.js b/src/Components/TabPanels/UserPageTabs/PanelGerenciarConta.js
index e365a0b86a7805b8102e0981f45c350bce1ee444..9cb598a73d580fb96b60dc398f55e50332342bea 100644
--- a/src/Components/TabPanels/UserPageTabs/PanelGerenciarConta.js
+++ b/src/Components/TabPanels/UserPageTabs/PanelGerenciarConta.js
@@ -218,7 +218,7 @@ export default function TabPanelGerenciarConta(props) {
<span style={state.contrast === "" ? { margin: "0", display: "flex", justifyContent: "flex-start" } : { margin: "0", display: "flex", justifyContent: "flex-start", color: "white" }}>Antes de excluir a sua conta, saiba que ela será removida permanentemente.</span>
</div>
<div style={{ margin: "0", display: "flex", justifyContent: "flex-start" }}>
- <ModalExcluirConta open={modalExcluir} handleClose={() => { setModalExcluir(false) }} />
+ <ModalExcluirConta contrast={state.contrast} open={modalExcluir} handleClose={() => { setModalExcluir(false) }} />
<ButtonCancelar contrast={state.contrast} onClick={() => { setModalExcluir(true) }}>EXCLUIR CONTA</ButtonCancelar>
</div>
</div>
diff --git a/src/Components/UploadPageComponents/ButtonsDiv.js b/src/Components/UploadPageComponents/ButtonsDiv.js
index 8e4d194578dc53db54ff9934e9aef996e4582026..9e6c0f7b6e8c7841b7407913a31df22162bfaad2 100644
--- a/src/Components/UploadPageComponents/ButtonsDiv.js
+++ b/src/Components/UploadPageComponents/ButtonsDiv.js
@@ -28,6 +28,7 @@ export default function ButtonsDiv(props) {
return (
<>
<ModalCancelar
+ contrast={props.contrast}
open={modalCancelar}
handleClose={() => { toggleModalCancelar(false) }}
draftID={props.draftID}
diff --git a/src/Components/UploadPageComponents/PartThree.js b/src/Components/UploadPageComponents/PartThree.js
index 5170659ca6f2e961a14e314a827656737def4000..9e7f27128a157471cae3adfc4900af388a993cfb 100644
--- a/src/Components/UploadPageComponents/PartThree.js
+++ b/src/Components/UploadPageComponents/PartThree.js
@@ -99,6 +99,7 @@ export default function PartThree(props) {
(
<React.Fragment>
<ModalCancelar
+ contrast={props.contrast}
open={modalCancelar}
handleClose={() => { toggleModalCancelar(false) }}
draftID={draft.id}
@@ -217,8 +218,8 @@ export default function PartThree(props) {
<div style={{margin:"0 auto", width: "304px"}}>
{
//<ReCaptcha sitekey={process.env.REACT_APP_SITE_KEY} verifyCallback={captchaVerified} /> //when key set in env
- <ReCaptcha sitekey="6LfxuKUUAAAAAIzYpCzEtJyeE8QRjBYa44dvHlTX" verifyCallback={captchaVerified} /> //use this one on production
- //<ReCaptcha sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI" verifyCallback={captchaVerified} /> //test key, from google, do not use this one on production
+ //<ReCaptcha sitekey="6LfxuKUUAAAAAIzYpCzEtJyeE8QRjBYa44dvHlTX" verifyCallback={captchaVerified} /> //use this one on production
+ <ReCaptcha sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI" verifyCallback={captchaVerified} /> //test key, from google, do not use this one on production
}
</div>
</Grid>
diff --git a/src/Components/UserPageComponents/Avatar.js b/src/Components/UserPageComponents/Avatar.js
index 8c381f197741f833d9171c58b780ffb37bb8ad1b..589d5cb10c758bf0f63147a94e37647556fe3998 100644
--- a/src/Components/UserPageComponents/Avatar.js
+++ b/src/Components/UserPageComponents/Avatar.js
@@ -39,6 +39,7 @@ export default function ProfileAvatar (props) {
return (
<>
<ModalAlterarAvatar
+ contrast={props.contrast}
open={open}
handleClose={controlModal}
userAvatar={currentAvatar}
diff --git a/src/Components/UserPageComponents/Cover.js b/src/Components/UserPageComponents/Cover.js
index 339c36fd612cb3dc1a595c9a994a775af089c886..4d5e702ca9a14b3120e93dda0282aa2876866408 100644
--- a/src/Components/UserPageComponents/Cover.js
+++ b/src/Components/UserPageComponents/Cover.js
@@ -48,6 +48,7 @@ export default function Cover (props) {
return (
<>
<ModalAlterarCover
+ contrast={props.contrast}
open = {open}
handleClose={controlModal}
cover={tempCover}
diff --git a/src/Components/carousel.css b/src/Components/carousel.css
index 4d9cbe4cba581322b58ad62c86f9dd23470f16bf..3a4c6336859565de33631450b35b9ed963a8dfdd 100644
--- a/src/Components/carousel.css
+++ b/src/Components/carousel.css
@@ -22,9 +22,10 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
background-color: inherit !important;
}
-.carousel .control-dots{
+.carousel .control-dots {
position: inherit !important;
}
+
.carousel .control-arrow {
background: orange !important;
/* position: relative !important; */
diff --git a/src/Pages/Contact.js b/src/Pages/Contact.js
index 32a1d84ae30248a02ecb7b0b591775b9107c7d3b..cad19f615c16c023f12fb345ea2270caafbab2be 100644
--- a/src/Pages/Contact.js
+++ b/src/Pages/Contact.js
@@ -23,158 +23,159 @@ import InputFormulario from "../Components/ContactForm.js";
import { Store } from '../Store';
const Secao1 = styled.div`
- width: 100%;
- background-color: ${props => props.contrast === "" ? "" : "black"};
- background-image: ${props => props.contrast === "" ? `url(${Banner1})` : ""};
- background-size: cover;
- background-position: bottom center;
- height: 250px;
- color: #fff;
- line-height: 1.1;
- text-align: center;
- padding-top: 120px;
-
- h2 {
- font-family: Pompiere, cursive;
- font-size: 52px;
+ width: 100%;
+ background-color: ${props => props.contrast === "" ? "" : "black"};
+ background-image: ${props => props.contrast === "" ? `url(${Banner1})` : ""};
+ background-size: cover;
+ background-position: bottom center;
+ height: 250px;
color: #fff;
- margin: 0;
- padding-left: 0;
- padding-right: 0;
- font-weight: 500;
- }
-
- h3 {
- margin-top: 20px;
- margin-bottom: 10px;
- font-family: Roboto, sans-serif;
- font-size: 30px;
- font-weight: lighter;
- }
+ line-height: 1.1;
+ text-align: center;
+ padding-top: 120px;
+
+ h2 {
+ font-family: Pompiere, cursive;
+ font-size: 52px;
+ color: #fff;
+ margin: 0;
+ padding-left: 0;
+ padding-right: 0;
+ font-weight: 500;
+ }
+
+ h3 {
+ margin-top: 20px;
+ margin-bottom: 10px;
+ font-family: Roboto, sans-serif;
+ font-size: 30px;
+ font-weight: lighter;
+ }
`;
const Secao2 = styled.div`
- height: 708px;
- background-color: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
- display: flex;
- justify-content: center;
- align-items: center;
+ height: 708px;
+ background-color: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
+ display: flex;
+ justify-content: center;
+ align-items: center;
`;
const Secao3 = styled.div`
- height: 127px;
- background-color: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
- color: ${props => props.contrast === "" ? "#666" : "white"};
- line-height: 1.42857143;
- font-size: 18px;
- text-align: center;
- padding-top: 70px;
-
- p {
- margin: 0 0 10px 0;
- }
+ height: 127px;
+ background-color: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ line-height: 1.42857143;
+ font-size: 18px;
+ text-align: center;
+ padding-top: 70px;
+
+ p {
+ margin: 0 0 10px 0;
+ }
`;
const Formulario = styled.div`
- background-color: ${props => props.contrast === "" ? "#fff" : "black"};
- box-shadow: ${props => props.contrast === "" ? "0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)" : "0 1px 3px rgba(255,255,255,.12),0 1px 2px rgba(255,255,255,.24)"};
- padding: 40px;
- height: 560px;
- width: 480px;
- color: ${props => props.contrast === "" ? "#666" : "white"};
-
- form .inputBlock {
- margin-block: 22px;
-
- }
-
- form .inputBlock label {
- font-size: 14px;
- font-weight: bold;
- display: block;
-
- }
-
- form .inputBlock input {
- width: 100%;
- height: 32px;
- font-size: 14px;
- border: 0;
- border-bottom: 1px solid #eee;
-
- }
-
- form .inputBlock.Message input {
- height: 131px;
- }
-
- form buttom[type=submit] {
- width: 100%;
- border: 0;
- margin-top: 30px;
- background: #7d40e7
- border-radius: 2px;
- padding: 15px 20px;
- font-size: 16px;
- font-weight: bold;
- color: #fff;
- cursor: pointer;
- transition: background 0.5s;
-
- }
-
- form buttom[type=submit]:hover {
- background: #6931ac
- }
-
-
- h2 {
- font-size: 24px;
- font-weight: lighter;
- margin-bottom: 50px;
- margin-top: 20px;
- text-align: center;
-
- }
+ background-color: ${props => props.contrast === "" ? "#fff" : "black"};
+ box-shadow: ${props => props.contrast === "" ? "0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)" : "0 1px 3px rgba(255,255,255,.12),0 1px 2px rgba(255,255,255,.24)"};
+ padding: 40px;
+ height: 560px;
+ width: 480px;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ border: ${props => props.contrast === "" ? "" : "1px solid white"};
+
+ form .inputBlock {
+ margin-block: 22px;
+
+ }
+
+ form .inputBlock label {
+ font-size: 14px;
+ font-weight: bold;
+ display: block;
+
+ }
+
+ form .inputBlock input {
+ width: 100%;
+ height: 32px;
+ font-size: 14px;
+ border: 0;
+ border-bottom: 1px solid #eee;
+
+ }
+
+ form .inputBlock.Message input {
+ height: 131px;
+ }
+
+ form buttom[type=submit] {
+ width: 100%;
+ border: 0;
+ margin-top: 30px;
+ background: #7d40e7
+ border-radius: 2px;
+ padding: 15px 20px;
+ font-size: 16px;
+ font-weight: bold;
+ color: #fff;
+ cursor: pointer;
+ transition: background 0.5s;
+
+ }
+
+ form buttom[type=submit]:hover {
+ background: #6931ac
+ }
+
+
+ h2 {
+ font-size: 24px;
+ font-weight: lighter;
+ margin-bottom: 50px;
+ margin-top: 20px;
+ text-align: center;
+
+ }
`;
function Contact(props) {
- const { state } = useContext(Store)
- useEffect(() => {
- window.scrollTo(0, 0)
- })
-
- return (
- <>
- <link
- href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto:300,400&display=swap"
- rel="stylesheet"
- />
- <Secao1 contrast={state.contrast}>
- <h2>CONTATO</h2>
- <h3>Quer enviar uma mensagem?</h3>
- </Secao1>
-
- <Secao2 contrast={state.contrast}>
- <Formulario noValidate autoComplete="off" contrast={state.contrast}>
- <h2>
- Entre em contato para enviar dúvidas,
- <br />
- sugestões ou críticas
- </h2>
- <InputFormulario contrast={state.contrast} />
- </Formulario>
- </Secao2>
-
- <Secao3 contrast={state.contrast}>
- <span>MEC - Ministério da Educação </span>
- <p>
- Endereço: Esplanada dos Ministérios Bloco L - Ed.Sede e Anexos. CEP:
- 70.047-900 - Brasília/DF. Telefone: 0800 616161
- </p>
- </Secao3>
- </>
- );
+ const { state } = useContext(Store)
+ useEffect(() => {
+ window.scrollTo(0, 0)
+ })
+
+ return (
+ <div>
+ <link
+ href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto:300,400&display=swap"
+ rel="stylesheet"
+ />
+ <Secao1 contrast={state.contrast}>
+ <h2>CONTATO</h2>
+ <h3>Quer enviar uma mensagem?</h3>
+ </Secao1>
+
+ <Secao2 contrast={state.contrast}>
+ <Formulario noValidate autoComplete="off" contrast={state.contrast}>
+ <h2>
+ Entre em contato para enviar dúvidas,
+ <br />
+ sugestões ou críticas
+ </h2>
+ <InputFormulario contrast={state.contrast} />
+ </Formulario>
+ </Secao2>
+
+ <Secao3 contrast={state.contrast}>
+ <span>MEC - Ministério da Educação </span>
+ <p>
+ Endereço: Esplanada dos Ministérios Bloco L - Ed.Sede e Anexos. CEP:
+ 70.047-900 - Brasília/DF. Telefone: 0800 616161
+ </p>
+ </Secao3>
+ </div>
+ );
}
export default Contact;
diff --git a/src/Pages/PageProfessor.js b/src/Pages/PageProfessor.js
index 96cd46bb141e537274c606200855b89428a8e54a..b1e360262cb0a7c910a75575041e7f7e6939cf0d 100644
--- a/src/Pages/PageProfessor.js
+++ b/src/Pages/PageProfessor.js
@@ -114,7 +114,7 @@ export default function PageProfessor (props) {
state.userAgreedToPublicationTerms?
(
<>
- <ModalConfirmarProfessor open={modalOpen} handleClose={handleModal}
+ <ModalConfirmarProfessor contrast={props.contrast} open={modalOpen} handleClose={handleModal}
info={registerInformation} confirmar = {() => {handleFinalSubmit()}}
cancelar = {() => {toggleModal()}}
/>
diff --git a/src/Pages/PublicationPermissionsPage.js b/src/Pages/PublicationPermissionsPage.js
index 67828e7a85ca3ec4fe96ecd7be2649aa3f9992ef..9b25fc8738b5b22b08acdefcece9b4e37a93f14a 100644
--- a/src/Pages/PublicationPermissionsPage.js
+++ b/src/Pages/PublicationPermissionsPage.js
@@ -129,9 +129,10 @@ export default function PermissionsContainer(props) {
[
<>
<IllegalContentModal
- open={modalOpen}
- handleClose={closeModal}
- disableBackdropClick={true}
+ contrast={props.contrast}
+ open={modalOpen}
+ handleClose={closeModal}
+ disableBackdropClick={true}
/>
<Background contrast={state.contrast}>
<div className="container">
diff --git a/src/Pages/ResourcePage.js b/src/Pages/ResourcePage.js
index 9a8ba4093cca97439be9fd96a16bbae29271e431..0acc55f93bafcd3b1896a3c3208210e14585b96e 100644
--- a/src/Pages/ResourcePage.js
+++ b/src/Pages/ResourcePage.js
@@ -40,315 +40,316 @@ import Button from '@material-ui/core/Button';
import { Link } from 'react-router-dom';
function urlVerify(url) {
- return url
- ? url.indexOf("youtu") !== -1 || url.indexOf("vimeo") !== -1
- : false;
+ return url
+ ? url.indexOf("youtu") !== -1 || url.indexOf("vimeo") !== -1
+ : false;
}
export default function LearningObjectPage(props) {
- const { state } = useContext(Store);
- const id = props.match.params.recursoId;
- const [carregando, toggle] = useState(true);
- const [erro, setErro] = useState(false);
- const [recurso, setRecurso] = useState({});
+ const { state } = useContext(Store);
+ const id = props.match.params.recursoId;
+ const [carregando, toggle] = useState(true);
+ const [erro, setErro] = useState(false);
+ const [recurso, setRecurso] = useState({});
- function handleSuccessfulGet(data) {
- setRecurso(data);
- toggle(false);
- }
- useEffect(() => {
- const url = `/learning_objects/${id}`;
-
- getRequest(
- url,
- handleSuccessfulGet,
- (error) => {
- setErro(true)
+ function handleSuccessfulGet(data) {
+ setRecurso(data);
toggle(false);
- handleSnackbar(7)
- }
- );
- }, []);
-
- const [snackbarOpen, toggleSnackbar] = useState(false);
- const handleSnackbar = (index) => {
- setIndex(index);
- toggleSnackbar(true);
- };
- const snackbarText = [
- "Baixando o Recurso... Lembre-se de relatar sua experiência após o uso do Recurso!",
- "Seu comentário foi publicado com sucesso!",
- "Comentário editado com sucesso.",
- "Comentário deletado com sucesso.",
- "O Recurso foi guardado na coleção!",
- "O recurso foi aprovado com sucesso!",
- "Erro ao aprovar o recurso!",
- "Erro ao carregar a página",
- "Erro ao fazer o dowload do recurso",
- ];
- const [snackbarIndex, setIndex] = useState(0);
- const classes = useStyles();
- const [modalCuradoriaOpen, toggleModalCuradoria] = useState(false);
- const handleModalCuradoria = (value) => {
- toggleModalCuradoria(value);
- };
-
- const checkAccessLevel = (levelToCheck) => {
- if (state.currentUser.id !== "") {
- return checkUserRole(levelToCheck);
- } else {
- return false;
}
- };
+ useEffect(() => {
+ const url = `/learning_objects/${id}`;
- const checkUserRole = (userRole) => {
- return (
- state.currentUser.roles.filter((role) => role.name === userRole).length >
- 0
- );
- };
+ getRequest(
+ url,
+ handleSuccessfulGet,
+ (error) => {
+ setErro(true)
+ toggle(false);
+ handleSnackbar(7)
+ }
+ );
+ }, []);
- const [modalConfirmarCuradoriaOpen, toggleModalConfirmarCuradoria] = useState(
- false
- );
- const handleModalConfirmarCuradoria = (value) => {
- toggleModalConfirmarCuradoria(value);
- };
- const [reportCriteria, setReportCriteria] = useState([]);
- const [justificativa, setJustificativa] = useState("");
- const [submissionAccepted, setSubmissionAccepted] = useState("");
+ const [snackbarOpen, toggleSnackbar] = useState(false);
+ const handleSnackbar = (index) => {
+ setIndex(index);
+ toggleSnackbar(true);
+ };
+ const snackbarText = [
+ "Baixando o Recurso... Lembre-se de relatar sua experiência após o uso do Recurso!",
+ "Seu comentário foi publicado com sucesso!",
+ "Comentário editado com sucesso.",
+ "Comentário deletado com sucesso.",
+ "O Recurso foi guardado na coleção!",
+ "O recurso foi aprovado com sucesso!",
+ "Erro ao aprovar o recurso!",
+ "Erro ao carregar a página",
+ "Erro ao fazer o dowload do recurso",
+ ];
+ const [snackbarIndex, setIndex] = useState(0);
+ const classes = useStyles();
+ const [modalCuradoriaOpen, toggleModalCuradoria] = useState(false);
+ const handleModalCuradoria = (value) => {
+ toggleModalCuradoria(value);
+ };
- const handleConfirm = (criteria, justification, accepted) => {
- setReportCriteria(criteria);
- setJustificativa(justification);
- setSubmissionAccepted(accepted);
- handleModalCuradoria(false);
- handleModalConfirmarCuradoria(true);
- };
+ const checkAccessLevel = (levelToCheck) => {
+ if (state.currentUser.id !== "") {
+ return checkUserRole(levelToCheck);
+ } else {
+ return false;
+ }
+ };
- const finalizeCuratorshipFlow = () => {
- handleSnackbar(5);
- handleModalConfirmarCuradoria(false);
- const url = `/learning_objects/${id}`;
- getRequest(
- url,
- (data) => {
- setRecurso(data);
- },
- (error) => {
- handleSnackbar(7)
- }
+ const checkUserRole = (userRole) => {
+ return (
+ state.currentUser.roles.filter((role) => role.name === userRole).length >
+ 0
+ );
+ };
+
+ const [modalConfirmarCuradoriaOpen, toggleModalConfirmarCuradoria] = useState(
+ false
);
- };
+ const handleModalConfirmarCuradoria = (value) => {
+ toggleModalConfirmarCuradoria(value);
+ };
+ const [reportCriteria, setReportCriteria] = useState([]);
+ const [justificativa, setJustificativa] = useState("");
+ const [submissionAccepted, setSubmissionAccepted] = useState("");
+
+ const handleConfirm = (criteria, justification, accepted) => {
+ setReportCriteria(criteria);
+ setJustificativa(justification);
+ setSubmissionAccepted(accepted);
+ handleModalCuradoria(false);
+ handleModalConfirmarCuradoria(true);
+ };
- if (erro)
- return <LearnObjectNotFound contrast={state.contrast}>
- <Grid container direction='column' justify='center' alignItems='center' spacing={1}>
- <Grid item>
- <p className="not-found">
- O recurso não foi encontrado em nossa base de dados.
- </p>
+ const finalizeCuratorshipFlow = () => {
+ handleSnackbar(5);
+ handleModalConfirmarCuradoria(false);
+ const url = `/learning_objects/${id}`;
+ getRequest(
+ url,
+ (data) => {
+ setRecurso(data);
+ },
+ (error) => {
+ handleSnackbar(7)
+ }
+ );
+ };
+
+ if (erro)
+ return <LearnObjectNotFound contrast={state.contrast}>
+ <Grid container direction='column' justify='center' alignItems='center' spacing={1}>
+ <Grid item>
+ <p className="not-found">
+ O recurso não foi encontrado em nossa base de dados.
+ </p>
+ </Grid>
+ <Grid item>
+ <Link to={`/busca?page=0&results_per_page=12&order=review_average&query=*&search_class=LearningObject`}>
+ <Button
+ variant='contained'
+ className="back-button"
+ >
+ Voltar para a busca de recursos.
+ </Button>
+ </Link>
+ </Grid>
</Grid>
- <Grid item>
- <Link to={`/busca?page=0&results_per_page=12&order=review_average&query=*&search_class=LearningObject`}>
- <Button
- variant='contained'
- className="back-button"
+ </LearnObjectNotFound>
+ else
+ return (
+ <React.Fragment>
+ <Snackbar
+ open={snackbarOpen}
+ autoHideDuration={6000}
+ onClose={toggleSnackbar}
+ anchorOrigin={{ vertical: "top", horizontal: "right" }}
>
- Voltar para a busca de recursos.
- </Button>
- </Link>
- </Grid>
- </Grid>
- </LearnObjectNotFound>
- else
- return (
- <React.Fragment>
- <Snackbar
- open={snackbarOpen}
- autoHideDuration={6000}
- onClose={toggleSnackbar}
- anchorOrigin={{ vertical: "top", horizontal: "right" }}
- >
- <Alert severity="info"
- style={{ backgroundColor: "#00acc1" }}>
- {snackbarText[snackbarIndex]}
- </Alert>
- </Snackbar>
+ <Alert severity="info"
+ style={{ backgroundColor: "#00acc1" }}>
+ {snackbarText[snackbarIndex]}
+ </Alert>
+ </Snackbar>
- <ModalAvaliarRecurso
- open={modalCuradoriaOpen}
- handleClose={() => {
- handleModalCuradoria(false);
- }}
- title={recurso.name}
- confirm={handleConfirm}
- setCriteria={setReportCriteria}
- />
- <ModalConfirmarCuradoria
- aceito={submissionAccepted}
- reportCriteria={reportCriteria}
- justificativa={justificativa}
- open={modalConfirmarCuradoriaOpen}
- handleClose={() => {
- handleModalConfirmarCuradoria(false);
- }}
- cancel={() => {
- handleModalCuradoria(true);
- }}
- recursoId={recurso.submission_id}
- finalizeCuratorshipFlow={finalizeCuratorshipFlow}
- handleErrorAprove={() => {
- handleSnackbar(6)
- }}
- />
- <Background contrast={state.contrast}>
- {carregando ? (
- <LoadingSpinner contrast={state.contrast} text={"Carregando Recurso"} />
- ) : (
- <>
- <Grid container spacing={2}>
- {recurso.object_type === "Vídeo" && !recurso.link ? (
- <Grid item xs={12}>
- <Card contrast={state.contrast}>
- <VideoPlayer
- contrast={state.contrast}
- link={recurso.link}
- urlVerified={false}
- videoUrl={recurso.default_attachment_location}
- videoType={recurso.default_mime_type}
- />
- </Card>
- </Grid>
- ) : (
- urlVerify(recurso.link) && (
+ <ModalAvaliarRecurso
+ contrast={state.contrast}
+ open={modalCuradoriaOpen}
+ handleClose={() => {
+ handleModalCuradoria(false);
+ }}
+ title={recurso.name}
+ confirm={handleConfirm}
+ setCriteria={setReportCriteria}
+ />
+ <ModalConfirmarCuradoria
+ contrast={state.contrast}
+ aceito={submissionAccepted}
+ reportCriteria={reportCriteria}
+ justificativa={justificativa}
+ open={modalConfirmarCuradoriaOpen}
+ handleClose={() => {
+ handleModalConfirmarCuradoria(false);
+ }}
+ cancel={() => {
+ handleModalCuradoria(true);
+ }}
+ recursoId={recurso.submission_id}
+ finalizeCuratorshipFlow={finalizeCuratorshipFlow}
+ handleErrorAprove={() => {
+ handleSnackbar(6)
+ }}
+ />
+ <Background contrast={state.contrast}>
+ {carregando ? (
+ <LoadingSpinner contrast={state.contrast} text={"Carregando Recurso"} />
+ ) : (
+ <>
+ <Grid container spacing={2}>
+ {recurso.object_type === "Vídeo" && !recurso.link ? (
<Grid item xs={12}>
- <Card contrast={state.contrast}>
- contrast={state.contrast}
- <VideoPlayer link={recurso.link} urlVerified={true} />
- </Card>
+ <Card contrast={state.contrast}>
+ <VideoPlayer
+ contrast={state.contrast}
+ link={recurso.link}
+ urlVerified={false}
+ videoUrl={recurso.default_attachment_location}
+ videoType={recurso.default_mime_type}
+ />
+ </Card>
</Grid>
- )
- )}
-
- <Grid item xs={12}>
- <Card contrast={state.contrast}>
- <div>
- {recurso.thumbnail && (
- <img alt="" src={apiDomain + recurso.thumbnail} />
+ ) : (
+ urlVerify(recurso.link) && (
+ <Grid item xs={12}>
+ <Card contrast={state.contrast}>
+ <VideoPlayer contrast={state.contrast} link={recurso.link} urlVerified={true} />
+ </Card>
+ </Grid>
+ )
)}
- <TextoObjeto
- contrast={state.contrast}
- name={recurso.name}
- rating={recurso.review_average}
- recursoId={id}
- likesCount={recurso.likes_count}
- likedBool={recurso.liked}
- objType={recurso.object_type}
- subjects={recurso.subjects}
- educationalStages={recurso.educational_stages}
- viewCount={recurso.views_count}
- downloadCount={recurso.downloads_count}
- id={recurso.publisher ? recurso.publisher.id : undefined}
- stateRecurso={recurso.state}
- attachments={recurso.attachments}
- audioUrl={recurso.default_attachment_location}
- />
- </div>
+ <Grid item xs={12}>
+ <Card contrast={state.contrast}>
+ <div>
+ {recurso.thumbnail && (
+ <img alt="recurso" src={apiDomain + recurso.thumbnail}/>
+ )}
- <Footer
- contrast={state.contrast}
- recursoId={id}
- downloadableLink={recurso.default_attachment_location}
- handleSnackbar={handleSnackbar}
- link={recurso.link}
- title={recurso.name}
- thumb={recurso.thumbnail}
- currPageLink={window.location.href}
- complained={recurso.complained}
- />
- </Card>
- </Grid>
+ <TextoObjeto
+ contrast={state.contrast}
+ name={recurso.name}
+ rating={recurso.review_average}
+ recursoId={id}
+ likesCount={recurso.likes_count}
+ likedBool={recurso.liked}
+ objType={recurso.object_type}
+ subjects={recurso.subjects}
+ educationalStages={recurso.educational_stages}
+ viewCount={recurso.views_count}
+ downloadCount={recurso.downloads_count}
+ id={recurso.publisher ? recurso.publisher.id : undefined}
+ stateRecurso={recurso.state}
+ attachments={recurso.attachments}
+ audioUrl={recurso.default_attachment_location}
+ />
+ </div>
- <Grid item xs={12}>
- <Card contrast={state.contrast}>
- {/*todo: change render method on additional item info*/}
- <Sobre
- avatar={
- recurso.publisher
- ? recurso.publisher.avatar
- ? apiDomain + recurso.publisher.avatar
- : noAvatar
- : noAvatar
- }
- publisher={
- recurso.publisher ? recurso.publisher.name : undefined
- }
- id={recurso.publisher ? recurso.publisher.id : undefined}
- description={recurso.description}
- author={recurso.author}
- tags={recurso.tags}
- attachments={recurso.attachments}
- language={recurso.language}
- mimeType={recurso.default_mime_type}
- createdAt={recurso.created_at}
- updatedAt={recurso.updated_at}
- license={recurso.license}
- followed={recurso.publisher ? recurso.publisher.followed : undefined}
- />
- </Card>
- </Grid>
+ <Footer
+ contrast={state.contrast}
+ recursoId={id}
+ downloadableLink={recurso.default_attachment_location}
+ handleSnackbar={handleSnackbar}
+ link={recurso.link}
+ title={recurso.name}
+ thumb={recurso.thumbnail}
+ currPageLink={window.location.href}
+ complained={recurso.complained}
+ />
+ </Card>
+ </Grid>
- {recurso.state !== "submitted" && (
<Grid item xs={12}>
- <Card contrast={state.contrast}>
- {/*adicionar funcionalidade ao botao de entrar*/}
- <CommentsArea
- recursoId={id}
- handleSnackbar={handleSnackbar}
- objType={recurso.object_type}
- recurso={true}
- />
- </Card>
+ <Card contrast={state.contrast}>
+ {/*todo: change render method on additional item info*/}
+ <Sobre
+ avatar={
+ recurso.publisher
+ ? recurso.publisher.avatar
+ ? apiDomain + recurso.publisher.avatar
+ : noAvatar
+ : noAvatar
+ }
+ publisher={
+ recurso.publisher ? recurso.publisher.name : undefined
+ }
+ id={recurso.publisher ? recurso.publisher.id : undefined}
+ description={recurso.description}
+ author={recurso.author}
+ tags={recurso.tags}
+ attachments={recurso.attachments}
+ language={recurso.language}
+ mimeType={recurso.default_mime_type}
+ createdAt={recurso.created_at}
+ updatedAt={recurso.updated_at}
+ license={recurso.license}
+ followed={recurso.publisher ? recurso.publisher.followed : undefined}
+ />
+ </Card>
+ </Grid>
+
+ {recurso.state !== "submitted" && (
+ <Grid item xs={12}>
+ <Card contrast={state.contrast}>
+ {/*adicionar funcionalidade ao botao de entrar*/}
+ <CommentsArea
+ recursoId={id}
+ handleSnackbar={handleSnackbar}
+ objType={recurso.object_type}
+ recurso={true}
+ />
+ </Card>
+ </Grid>
+ )}
</Grid>
- )}
- </Grid>
- {recurso.state === "submitted" && checkAccessLevel("curator") && (
- <AppBar
- position="fixed"
- color="primary"
- className={classes.appBar}
- >
- <StyledAppBarContainer>
- <div className="container">
- <div className="botoes">
- <ButtonAvaliarRecurso
- callback={() => {
- handleModalCuradoria(true);
- }}
- />
+ {recurso.state === "submitted" && checkAccessLevel("curator") && (
+ <AppBar
+ position="fixed"
+ className={classes.appBar}
+ style={state.contrast === "" ? {backgroundColor: "white"} : {backgroundColor: "black", borderTop: "1px solid white"}}
+ >
+ <StyledAppBarContainer contrast={state.contrast}>
+ <div className="container">
+ <div className="botoes">
+ <ButtonAvaliarRecurso
+ contrast={state.contrast}
+ callback={() => {
+ handleModalCuradoria(true);
+ }}
+ />
+ </div>
</div>
- </div>
- </StyledAppBarContainer>
- </AppBar>
+ </StyledAppBarContainer>
+ </AppBar>
+ )}
+ </>
)}
- </>
- )}
- </Background>
- </React.Fragment>
- );
+ </Background>
+ </React.Fragment>
+ );
}
const useStyles = makeStyles((theme) => ({
- appBar: {
- top: "auto",
- bottom: 0,
- height: "100px",
- backgroundColor: "#fff",
- boxShadow: "0 1px 3px rgba(0,0,0,.52),0 1px 2px rgba(0,0,0,.24)",
- },
+ appBar: {
+ top: "auto",
+ bottom: 0,
+ height: "100px",
+ boxShadow: "0 1px 3px rgba(0,0,0,.52),0 1px 2px rgba(0,0,0,.24)",
+ },
}));
const StyledAppBarContainer = styled.div`
@@ -358,6 +359,7 @@ const StyledAppBarContainer = styled.div`
justify-content : flex-start
margin-right : auto;
margin-left : auto;
+ padding: 10px;
@media screen and (min-width: 1200px) {
width : 1170px;
}
@@ -377,66 +379,66 @@ const StyledAppBarContainer = styled.div`
`;
const Background = styled.div`
- background-color: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
- color: #666;
- font-family: "Roboto", sans serif;
- padding-top: 30px;
+ background-color: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
+ color: #666;
+ font-family: "Roboto", sans serif;
+ padding-top: 30px;
`;
const LearnObjectNotFound = styled.div`
- 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;
- margin: 0;
- }
+ 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;
+ margin: 0;
+ }
- .back-button{
- 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"};
+ .back-button{
+ 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"};
+ }
}
- }
`
const Card = styled.div`
- background-color: ${props => props.contrast === "" ? "#fff" : "black"};
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
- border: ${props => props.contrast === "" ? "0" : "1px solid white"};
- margin-bottom: 30px;
- margin-right: auto;
- margin-left: auto;
- display: flex;
- flex-direction: column;
- @media screen and (min-width: 1200px) {
- width: 1170px;
- }
- @media screen and (min-width: 992px) and (max-width: 1199px) {
- width: 970px;
- }
- @media screen and (min-width: 768px) and (max-width: 991px) {
- width: 750px;
- }
+ background-color: ${props => props.contrast === "" ? "#fff" : "black"};
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+ border: ${props => props.contrast === "" ? "0" : "1px solid white"};
+ margin-bottom: 30px;
+ margin-right: auto;
+ margin-left: auto;
+ display: flex;
+ flex-direction: column;
+ @media screen and (min-width: 1200px) {
+ width: 1170px;
+ }
+ @media screen and (min-width: 992px) and (max-width: 1199px) {
+ width: 970px;
+ }
+ @media screen and (min-width: 768px) and (max-width: 991px) {
+ width: 750px;
+ }
- img {
- background-color: #e5e5e5;
- height: 270px;
- width: 400px;
- float: left;
- padding: 0;
- object-fit: cover;
- @media screen and (max-width: 768px) {
- height: auto;
- width: 100%;
+ img {
+ background-color: #e5e5e5;
+ height: 270px;
+ width: 400px;
+ float: left;
+ padding: 0;
+ object-fit: cover;
+ @media screen and (max-width: 768px) {
+ height: auto;
+ width: 100%;
+ }
}
- }
`;
diff --git a/src/Pages/UserPage.js b/src/Pages/UserPage.js
index b2475f4f433e747c3cdd933c405acad284fdd200..9de1400f65abd87b3e85a25d4531892eed25cc8c 100644
--- a/src/Pages/UserPage.js
+++ b/src/Pages/UserPage.js
@@ -30,13 +30,13 @@ import TabPanelRede from "../Components/TabPanels/UserPageTabs/PanelRede.js";
import TabPanelCuradoria from "../Components/TabPanels/UserPageTabs/PanelCuradoria.js";
import Grid from "@material-ui/core/Grid";
import {
- HeaderContainer,
- UserProfileContainer,
- CheckTeacherDiv,
- StyledTabs,
- RodapeDiv,
- NavBarContentContainer,
- BackgroundDiv,
+ HeaderContainer,
+ UserProfileContainer,
+ CheckTeacherDiv,
+ StyledTabs,
+ RodapeDiv,
+ NavBarContentContainer,
+ BackgroundDiv,
} from "../Components/TabPanels/StyledComponents.js";
import CircularProgress from "@material-ui/core/CircularProgress";
import Cover from "../Components/UserPageComponents/Cover.js";
@@ -48,203 +48,204 @@ import { getRequest } from "../Components/HelperFunctions/getAxiosConfig.js";
import Typography from "@material-ui/core/Typography";
export default function UserPage(props) {
- const { state, dispatch } = useContext(Store);
- const id = state.currentUser.id;
-
- const [follows, setFollows] = useState(0);
- const [following, setFollowing] = useState(0);
- const [loading, setLoading] = useState(false);
- const [tabValue, setTabValue] = useState(Number(props.location.state) || 0);
- const [tabs, setTabs] = useState([
- "Atividades",
- "Meus Recursos",
- "Favoritos",
- "Coleções",
- "Rede",
- ]);
- const handleChangeTab = (event, newValue) => {
- setTabValue(newValue);
- };
-
- function handleSuccessfulGet(data) {
- console.log(data);
- dispatch({
- type: "GET_USER",
- user: data,
- });
-
- setFollows(data.follows_count);
-
- if (data.role_ids.includes(4)) {
- setTabs([
+ const { state, dispatch } = useContext(Store);
+ const id = state.currentUser.id;
+
+ const [follows, setFollows] = useState(0);
+ const [following, setFollowing] = useState(0);
+ const [loading, setLoading] = useState(false);
+ const [tabValue, setTabValue] = useState(Number(props.location.state) || 0);
+ const [tabs, setTabs] = useState([
"Atividades",
"Meus Recursos",
"Favoritos",
"Coleções",
"Rede",
- "Curadoria",
- ]);
+ ]);
+ const handleChangeTab = (event, newValue) => {
+ setTabValue(newValue);
+ };
+
+ function handleSuccessfulGet(data) {
+ console.log(data);
+ dispatch({
+ type: "GET_USER",
+ user: data,
+ });
+
+ setFollows(data.follows_count);
+
+ if (data.role_ids.includes(4)) {
+ setTabs([
+ "Atividades",
+ "Meus Recursos",
+ "Favoritos",
+ "Coleções",
+ "Rede",
+ "Curadoria",
+ ]);
+ }
}
- }
-
- function handleSuccesGetFollowing(data) {
- setFollowing(data.length);
- setLoading(false);
- }
-
- useEffect(() => {
- if (id !== "") {
- const url = `/users/${id}`;
- const url2 = `/users/${id}/following/User`;
- setLoading(true);
- getRequest(url, handleSuccessfulGet, (error) => {
- console.log(error);
- });
- getRequest(url2, handleSuccesGetFollowing, (error) => {
- console.log(error);
- });
+
+ function handleSuccesGetFollowing(data) {
+ setFollowing(data.length);
+ setLoading(false);
}
- }, []);
-
- useEffect(() => {
- setTabValue(Number(props.location.state) || 0)
- }, [window.history.state.key])
-
- const redirect = () => {
- props.history.push("/");
- };
-
- const [modalOpen, toggleModal] = useState(false);
- const WIDTH = window.innerWidth;
-
- return (
- <div>
- <link
- href="https://fonts.googleapis.com/css?family=Roboto:100,400,500&display=swap"
- rel="stylesheet"
- />
- {
- state.userIsLoggedIn ? (
- [
- <React.Fragment>
- <ModalAlterarAvatar
- open={modalOpen}
- handleClose={() => {
- toggleModal(false);
- }}
- userAvatar={state.currentUser.avatar}
- />
-
- <BackgroundDiv contrast={state.contrast}>
- <CustomizedBreadcrumbs contrast={state.contrast} values={["Minha área", tabs[tabValue]]} />
- <Grid container spacing={2}>
- <Grid item xs={12}>
- <div style={{ padding: "10px 0 8px 0" }}>
- <UserProfileContainer>
- <HeaderContainer contrast={state.contrast}>
- <Cover id={id} />
- <ProfileAvatar id={id} />
- {WIDTH <= 600 ? null : <UserInfo />}
- <EditProfileButton contrast={state.contrast} />
- </HeaderContainer>
- {WIDTH <= 600 ? (
- <Grid
- style={state.contrast === "" ? { marginTop: "4em" } : { paddingTop: "4em", backgroundColor: "black", borderLeft: "1px solid white", borderRight: "1px solid white", }}
- container
- justify="center"
- alignItems="center"
- direction="column"
- >
- <Grid item>
- <Typography
- variant="h4"
- gutterBottom
- style={state.contrast === "" ? { textAlign: "center" } : { color: "white", textAlign: "center" }}
- >
- {state.currentUser.name}
- </Typography>
- </Grid>
+
+ useEffect(() => {
+ if (id !== "") {
+ const url = `/users/${id}`;
+ const url2 = `/users/${id}/following/User`;
+ setLoading(true);
+ getRequest(url, handleSuccessfulGet, (error) => {
+ console.log(error);
+ });
+ getRequest(url2, handleSuccesGetFollowing, (error) => {
+ console.log(error);
+ });
+ }
+ }, []);
+
+ useEffect(() => {
+ setTabValue(Number(props.location.state) || 0)
+ }, [window.history.state.key])
+
+ const redirect = () => {
+ props.history.push("/");
+ };
+
+ const [modalOpen, toggleModal] = useState(false);
+ const WIDTH = window.innerWidth;
+
+ return (
+ <div>
+ <link
+ href="https://fonts.googleapis.com/css?family=Roboto:100,400,500&display=swap"
+ rel="stylesheet"
+ />
+ {
+ state.userIsLoggedIn ? (
+ [
+ <React.Fragment>
+ <ModalAlterarAvatar
+ contrast={state.contrast}
+ open={modalOpen}
+ handleClose={() => {
+ toggleModal(false);
+ }}
+ userAvatar={state.currentUser.avatar}
+ />
+
+ <BackgroundDiv contrast={state.contrast}>
+ <CustomizedBreadcrumbs contrast={state.contrast} values={["Minha área", tabs[tabValue]]} />
+ <Grid container spacing={2}>
+ <Grid item xs={12}>
+ <div style={{ padding: "10px 0 8px 0" }}>
+ <UserProfileContainer>
+ <HeaderContainer contrast={state.contrast}>
+ <Cover id={id} />
+ <ProfileAvatar id={id} />
+ {WIDTH <= 600 ? null : <UserInfo />}
+ <EditProfileButton contrast={state.contrast} />
+ </HeaderContainer>
+ {WIDTH <= 600 ? (
<Grid
- style={{
- marginTop: "0.5em",
- marginBottom: "0.5em",
- borderTop: "1px solid white",
- borderBottom: "1px solid white",
- }}
- container
- spacing={4}
- justify="center"
- alignItems="center"
- direction="row"
+ style={state.contrast === "" ? { marginTop: "4em" } : { paddingTop: "4em", backgroundColor: "black", borderLeft: "1px solid white", borderRight: "1px solid white", }}
+ container
+ justify="center"
+ alignItems="center"
+ direction="column"
>
- <Grid item>
- <Typography style={state.contrast === "" ? {} : { color: "white" }} variant="h6" onClick={(e) => { handleChangeTab(e, 4) }}>
- {loading ? (
- <CircularProgress size={20} />
- ) : (
- `${follows} seguidores`
- )}
+ <Grid item>
+ <Typography
+ variant="h4"
+ gutterBottom
+ style={state.contrast === "" ? { textAlign: "center" } : { color: "white", textAlign: "center" }}
+ >
+ {state.currentUser.name}
</Typography>
- </Grid>
- <Grid item>
- <Typography style={state.contrast === "" ? {} : { color: "white" }} variant="h6" onClick={(e) => { handleChangeTab(e, 4) }}>
- {loading ? (
- <CircularProgress size={20} />
- ) : (
- `${following} seguindo`
- )}
- </Typography>
- </Grid>
+ </Grid>
+ <Grid
+ style={{
+ marginTop: "0.5em",
+ marginBottom: "0.5em",
+ borderTop: "1px solid white",
+ borderBottom: "1px solid white",
+ }}
+ container
+ spacing={4}
+ justify="center"
+ alignItems="center"
+ direction="row"
+ >
+ <Grid item>
+ <Typography style={state.contrast === "" ? {} : { color: "white" }} variant="h6" onClick={(e) => { handleChangeTab(e, 4) }}>
+ {loading ? (
+ <CircularProgress size={20} />
+ ) : (
+ `${follows} seguidores`
+ )}
+ </Typography>
+ </Grid>
+ <Grid item>
+ <Typography style={state.contrast === "" ? {} : { color: "white" }} variant="h6" onClick={(e) => { handleChangeTab(e, 4) }}>
+ {loading ? (
+ <CircularProgress size={20} />
+ ) : (
+ `${following} seguindo`
+ )}
+ </Typography>
+ </Grid>
+ </Grid>
</Grid>
- </Grid>
- ) : (
- <CheckTeacherDiv contrast={state.contrast}>
- <SubmitterStatus />
- </CheckTeacherDiv>
- )}
- <RodapeDiv contrast={state.contrast}>
- <NavBarContentContainer contrast={state.contrast}>
- <StyledTabs
- contrast={state.contrast}
- value={tabValue}
- onChange={handleChangeTab}
- indicatorColor="primary"
- textColor="primary"
- variant="scrollable"
- scrollButtons="on"
- TabIndicatorProps={{ style: state.contrast === "" ? { background: "#00bcd4" } : { background: "yellow" } }}
- >
- {tabs.map((tab) => (
- <StyledTab contrast={state.contrast} label={tab} key={tab} />
- ))}
- </StyledTabs>
- </NavBarContentContainer>
- </RodapeDiv>
- </UserProfileContainer>
- </div>
- </Grid>
- <Grid item xs={12}>
- {tabValue === 0 && <TabPanelAtividades id={id} contrast={state.contrast} />}
- {tabValue === 1 && <TabPanelMeusRecursos id={id} contrast={state.contrast} />}
- {tabValue === 2 && <TabPanelFavoritos id={id} contrast={state.contrast} />}
- {tabValue === 3 && <TabPanelColecoes id={id} contrast={state.contrast} />}
- {tabValue === 4 && <TabPanelRede id={id} contrast={state.contrast} />}
- {tabValue === 5 && <TabPanelCuradoria id={id} contrast={state.contrast} />}
- </Grid>
- </Grid>
- </BackgroundDiv>
- </React.Fragment>
- ]
- )
- :
- (
- <>
- {redirect()}
- </>
- )
- }
- </div>
- )
+ ) : (
+ <CheckTeacherDiv contrast={state.contrast}>
+ <SubmitterStatus />
+ </CheckTeacherDiv>
+ )}
+ <RodapeDiv contrast={state.contrast}>
+ <NavBarContentContainer contrast={state.contrast}>
+ <StyledTabs
+ contrast={state.contrast}
+ value={tabValue}
+ onChange={handleChangeTab}
+ indicatorColor="primary"
+ textColor="primary"
+ variant="scrollable"
+ scrollButtons="on"
+ TabIndicatorProps={{ style: state.contrast === "" ? { background: "#00bcd4" } : { background: "yellow" } }}
+ >
+ {tabs.map((tab) => (
+ <StyledTab contrast={state.contrast} label={tab} key={tab} />
+ ))}
+ </StyledTabs>
+ </NavBarContentContainer>
+ </RodapeDiv>
+ </UserProfileContainer>
+ </div>
+ </Grid>
+ <Grid item xs={12}>
+ {tabValue === 0 && <TabPanelAtividades id={id} contrast={state.contrast} />}
+ {tabValue === 1 && <TabPanelMeusRecursos id={id} contrast={state.contrast} />}
+ {tabValue === 2 && <TabPanelFavoritos id={id} contrast={state.contrast} />}
+ {tabValue === 3 && <TabPanelColecoes id={id} contrast={state.contrast} />}
+ {tabValue === 4 && <TabPanelRede id={id} contrast={state.contrast} />}
+ {tabValue === 5 && <TabPanelCuradoria id={id} contrast={state.contrast} />}
+ </Grid>
+ </Grid>
+ </BackgroundDiv>
+ </React.Fragment>
+ ]
+ )
+ :
+ (
+ <>
+ {redirect()}
+ </>
+ )
+ }
+ </div>
+ )
}
const StyledTab = styled(Tab)`
diff --git a/src/Pages/UserTerms.js b/src/Pages/UserTerms.js
index e34318389e644af900c76581db2107b9525bb109..55eef42430e78465f1b08c4d4ebe12ecbba4387e 100644
--- a/src/Pages/UserTerms.js
+++ b/src/Pages/UserTerms.js
@@ -34,252 +34,248 @@ import Linha from "../img/termos/linha.svg";
const BannerStyle = styled.div`
- background: ${props => props.contrast === "" ? "" : "black"};
- width: 100%;
- background-image: ${props => props.contrast === "" ? `url(${Banner1})` : ""};
- background-size: cover;
- background-position: top center;
- height: 370px;
- vertical-align: "middle";
+ background: ${props => props.contrast === "" ? "" : "black"};
+ width: 100%;
+ background-image: ${props => props.contrast === "" ? `url(${Banner1})` : ""};
+ background-size: cover;
+ background-position: top center;
+ height: 370px;
+ vertical-align: "middle";
`
const AColorido = styled.a`
- color: ${props => props.contrast === "" ? "#00BCD4" : "yellow"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ color: ${props => props.contrast === "" ? "#00BCD4" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
`
const ImagemSeçao2 = styled.div`
- font-family: "Roboto", sans-serif;
- background: ${props => props.contrast === "" ? "" : "black"};
- color: ${props => props.contrast === "" ? "rgba(0,0,0,0.87)" : "white"};
-
- @media (min-width:1450px) {
- background-image: url(${Busca});
- background-position: right;
- background-size: contain;
- background-repeat: no-repeat;
- }
- height: auto;
- align-items: center;
- padding-block: 30px;
- h3 {
- line-height: 1.1;
- text-align: center;
- @media (min-width: 1000px) {
- font-size: 30px;
+ font-family: "Roboto", sans-serif;
+ background: ${props => props.contrast === "" ? "" : "black"};
+ color: ${props => props.contrast === "" ? "rgba(0,0,0,0.87)" : "white"};
+
+ @media (min-width:1450px) {
+ background-image: url(${Busca});
+ background-position: right;
+ background-size: contain;
+ background-repeat: no-repeat;
}
+ height: auto;
+ align-items: center;
+ padding-block: 30px;
+ h3 {
+ line-height: 1.1;
+ text-align: center;
+ @media (min-width: 1000px) {
+ font-size: 30px;
+ }
+
+ @media (max-width: 1000px){
+ font-size: 20px;
+ }
+ margin-top: 20px;
+ margin-bottom: 10px;
+ font-weight: 100;
+ padding-bottom: 20px;
- @media (max-width: 1000px){
- font-size: 20px;
}
- margin-top: 20px;
- margin-bottom: 10px;
- font-weight: 100;
- padding-bottom: 20px;
-
- }
-
- p {
- line-height: 1.42857143;
- padding-top: 20px;
- font-size: 14px;
- text-align: justify;
- margin: 0 0 10px;
- }
-}
-`
-const Secao3 = styled.div`
- background: ${props => props.contrast === "" ? "#FF7F00" : "black"};
- @media (min-width: 1000px) {
- background-image: url(${CadeadoAberto}), url(${CadeadoFechado});
- background-repeat: no-repeat;
- background-position: bottom left, bottom right;
- background-position-y: 120%, 120%;
- height:340px;
- padding-block:30px;
- }
-
- color: #fff;
-
- text-align: left;
-
- h3 {
- font-family: 'Pompiere', cursive;
- font-size: 46px;
- padding-bottom: 20px;
- margin-top: 20px;
- margin-bottom: 10px;
- width: 100%;
- text-align: center !important;
- font-weight: 500 ;
-
- }
-
- .aberto {
- background-image: url(${Aberto}), url(${Linha});
- }
- .fechado {
- background-image: url(${Fechado}), url(${Linha});
- }
-
- .caixa {
- background-repeat: no-repeat;
- background-size: 70px 70px, auto auto;
- background-position: top left;
- background-position-x: 0, 35px;
- padding-left: 90px;
- .texto{
- background-image: url(${Linha});
- background-position: top left;
- background-repeat: repeat-x;
- background-size: auto auto;
- span {
- font-size: 26px;
- }
- p {
- text-align: left;
- font-size: 15px;
+ p {
+ line-height: 1.42857143;
+ padding-top: 20px;
+ font-size: 14px;
+ text-align: justify;
margin: 0 0 10px;
- }
}
- }
`
-const Secao4 = styled.div`
- font-size: 15px;
- background: ${props => props.contrast === "" ? "" : "black"};
-
- .texto {
+const Secao3 = styled.div`
+ background: ${props => props.contrast === "" ? "#FF7F00" : "black"};
+ @media (min-width: 1000px) {
+ background-image: url(${CadeadoAberto}), url(${CadeadoFechado});
+ background-repeat: no-repeat;
+ background-position: bottom left, bottom right;
+ background-position-y: 120%, 120%;
+ height:340px;
+ padding-block:30px;
+ }
+
+ color: #fff;
+
text-align: left;
- padding-top: 20px;
- padding-bottom: 20px;
- color: ${props => props.contrast === "" ? "rgba(0,0,0,0.87)" : "white"};
- a {
- color: ${props => props.contrast === "" ? "#00BCD4" : "yellow"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
- }
+ h3 {
+ font-family: 'Pompiere', cursive;
+ font-size: 46px;
+ padding-bottom: 20px;
+ margin-top: 20px;
+ margin-bottom: 10px;
+ width: 100%;
+ text-align: center !important;
+ font-weight: 500 ;
- p {
- font-family: 'Roboto', Bold;
- color: ${props => props.contrast === "" ? "rgba(0,0,0,0.87)" : "white"};
}
- }
+ .aberto {
+ background-image: url(${Aberto}), url(${Linha});
+ }
+ .fechado {
+ background-image: url(${Fechado}), url(${Linha});
+ }
- .titulo {
- text-align: center;
- color: ${props => props.contrast === "" ? "#666" : "white"};
- h3 {
- font-size: 30px;
- height: 22px;
- padding-bottom: 20px;
- margin-top: 20px;
- margin-bottom: 10px;
- font-weight: 500;
- line-height: 1.1;
+ .caixa {
+ background-repeat: no-repeat;
+ background-size: 70px 70px, auto auto;
+ background-position: top left;
+ background-position-x: 0, 35px;
+ padding-left: 90px;
+ .texto{
+ background-image: url(${Linha});
+ background-position: top left;
+ background-repeat: repeat-x;
+ background-size: auto auto;
+ span {
+ font-size: 26px;
+ }
+ p {
+ text-align: left;
+ font-size: 15px;
+ margin: 0 0 10px;
+ }
}
- p {
- height: 18px;
- line-height: 1.42857143;
- margin: 0 0 10px;
+`
+
+const Secao4 = styled.div`
+ font-size: 15px;
+ background: ${props => props.contrast === "" ? "" : "black"};
+
+ .texto {
+ text-align: left;
+ padding-top: 20px;
+ padding-bottom: 20px;
+ color: ${props => props.contrast === "" ? "rgba(0,0,0,0.87)" : "white"};
+
+ a {
+ color: ${props => props.contrast === "" ? "#00BCD4" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ }
+
+ p {
+ font-family: 'Roboto', Bold;
+ color: ${props => props.contrast === "" ? "rgba(0,0,0,0.87)" : "white"};
+ }
+
}
+ .titulo {
+ text-align: center;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ h3 {
+ font-size: 30px;
+ height: 22px;
+ padding-bottom: 20px;
+ margin-top: 20px;
+ margin-bottom: 10px;
+ font-weight: 500;
+ line-height: 1.1;
+ }
+ p {
+ height: 18px;
+ line-height: 1.42857143;
+ margin: 0 0 10px;
+ }
+
`
export default function UserTerms() {
- const { state } = useContext(Store)
- useEffect(() => {
- window.scrollTo(0, 0)
- }, [])
- return (
- <div style={{ color: "rgba(0,0,0,0.87" }} >
-
-
- <BannerStyle contrast={state.contrast}>
- <h2 style={{ width: "100%", textAlign: "center", marginTop: "0px", paddingTop: "6rem", marginBottom: "16px", fontSize: "52px", fontFamily: "'Pompiere', cursive", color: "#fff", fontWeight: "500" }}>TERMOS DE USO</h2>
- <Modal contrast={state.contrast} />
- </BannerStyle>
-
- <ImagemSeçao2 contrast={state.contrast}>
- <Grid container>
- <Grid item xs={12} md={1}></Grid>
- <Grid item xs={12} md={10}>
- <div>
- <h3><strong style={{ fontWeight: "700" }}>Plataforma Integrada de Recursos Educacionais Digitais,</strong><br />uma iniciativa do Ministério da Educação!</h3>
-
- <p>A <strong>Plataforma Integrada de RED do MEC</strong> é parte do processo de implementação do Compromisso 6 do <AColorido contrast={state.contrast} href="http://www.governoaberto.cgu.gov.br/noticias/2017/3o-plano-de-acao-nacional-na-parceria-para-governo-aberto" target="_blank">3º Plano de Ação da Parceria Governo Aberto</AColorido> (OGP-Brasil), que tem por objetivo “incorporar na política educacional o potencial da cultura digital, de modo a fomentar a autonomia para uso, reuso e adaptação de recursos educacionais digitais, valorizando a pluralidade e a diversidade da educação brasileira”.
- </p>
- <p>Seguindo o compromisso, a <strong>Plataforma Integrada de RED do MEC</strong> visa fortalecer a distribuição de recursos educacionais digitais para o ensino básico brasileiro. Há preferência pela disponibilização de Recursos Educacionais Abertos (REA), ou seja, recursos que “se situem no domínio público ou que tenham sido divulgados sob licença aberta que permita acesso, uso, adaptação e redistribuição gratuita por terceiros, mediante nenhuma restrição ou poucas restrições.” <AColorido contrast={state.contrast} href="http://www.unesco.org/new/fileadmin/MULTIMEDIA/HQ/CI/CI/pdf/Events/Portuguese_Paris_OER_Declaration.pdf" target="_blank">(Declaração REA de Paris, 2012)</AColorido>.
- </p>
- </div>
- </Grid>
- <Grid item xs={12} md={1}></Grid>
- </Grid>
- </ImagemSeçao2>
-
- <Secao3 contrast={state.contrast}>
- <Grid container >
- <h3>Para melhor compreensão, podemos dividir os recursos em dois tipos:</h3>
- <Grid item xs={12} md={1} ></Grid>
- <Grid item xs={12} md={5} >
- <div class="caixa aberto">
- <div class="texto">
- <span>Abertos</span>
- <p>De acordo com a Declaração de Paris, são recursos que, no mínimo, têm uma licença de uso mais flexível, que garante livre redistribuição. Adicionalmente, um recurso aberto deve utilizar um formato aberto, um formato de arquivo que permite a fácil edição por terceiros. Nenhum controle sobre o acesso (como cadastro e senha) deve existir para acesso a recursos abertos. Em sua maioria, são recursos gratuitos.</p>
- </div>
- </div>
- </Grid>
-
- <Grid item xs={12} md={5}>
- <div class="caixa fechado">
- <div class="texto">
- <span>Fechados</span>
- <p>São recursos que criam restrições no seu acesso, uso ou reuso. Como exemplo, podemos mencionar recursos que só são acessíveis mediante cadastro ou que têm licenças restritivas (como “todos os direitos reservados”, o símbolo ©). Podem ser gratuitos ou pagos.</p>
- </div>
- </div>
- </Grid>
- <Grid item xs={12} md={1} ></Grid>
- </Grid>
- </Secao3>
-
- <Grid container style={state.contrast === "" ? {} : { backgroundColor: "black" }}>
- <Grid item xs={12} md={1}></Grid>
- <Grid item xs={12} md={10}>
- <Secao4 contrast={state.contrast}>
- <div class="texto" style={{ paddingTop: "70px" }}>
- <p>O <a href="http://www.planalto.gov.br/ccivil_03/_ato2011-2014/2014/lei/l13005.htm" rel="noreferrer" target="_blank">Plano Nacional de Educação</a> (2014-2024) enfatiza nas metas 5 e 7 a importância dos recursos educacionais abertos para fomentar a qualidade da educação básica. A <a href="http://portal.mec.gov.br/index.php?option=com_docman&view=download&alias=35541-res-cne-ces-001-14032016-pdf&category_slug=marco-2016-pdf&Itemid=30192" rel="noreferrer" target="_blank">Resolução CNE/CES nº 1</a>, de 11 de março de 2016, também destaca a importância dos recursos educacionais abertos para as instituições de educação superior e para as atividades de educação a distância.</p>
- </div>
- <div class="titulo">
- <h3>TERMOS DE USO</h3>
- <p>Início da vigência: agosto de 2017</p>
- </div>
- <div class="texto" style={{ paddingBottom: "40px" }}>
- <p>Aqui estão os “Termos de Uso” da <strong>Plataforma Integrada de RED do MEC</strong>, isto é, as regras de funcionamento da Plataforma e seus serviços, e o que se espera de seus usuários. Por “usuário”, entende-se qualquer pessoa que acesse o domínio portal.mec.gov.br, tanto para pesquisa (acesso) como para a inclusão de dados e informações (participação) mediante cadastro.</p>
- <p>Fazem parte dos Termos de Uso as políticas de responsabilidade, de privacidade e confidencialidade, a licença de uso do conteúdo e as informações sobre como reportar violações.</p>
- <p>Ao utilizar a <strong>Plataforma Integrada de RED do MEC</strong>, o usuário aceita todas as condições aqui estabelecidas. O uso da <strong>Plataforma Integrada de RED do MEC</strong> implica aceite das condições aqui elencadas.</p>
- <p>Por “serviço”, entende-se qualquer funcionalidade ou ferramenta que permita a interatividade com o usuário, como, por exemplo, usuário subir um recurso, postar um comentário, criar uma coleção ou enviar uma mensagem.</p>
- <p>A aceitação destes "Termos de Uso" é indispensável à utilização da <strong>Plataforma Integrada de RED do MEC</strong>. Todos os usuários deverão ler, certificar-se de tê-los entendido e aceitar todas as condições neles estabelecidas. Dessa forma, deve ficar claro que a utilização desta "<strong>Plataforma Integrada de RED do MEC</strong>" implica aceitação completa deste documento intitulado Termos de Uso. Caso tenha dúvidas sobre os termos, utilize o formulário disponível em “Contato” para saná-las.</p>
- </div>
- </Secao4>
- </Grid>
- <Grid item xs={12} md={1}></Grid>
- </Grid>
-
-
- <Grid container style={state.contrast === "" ? {} : { backgroundColor: "black" }}>
- <Grid item xs={12} md={1}></Grid>
- <Grid item xs={12} md={10}>
- <div style={{ marginBottom: "50px", paddingTop: "20px" }}>
- <SimpleExpansionPanels contrast={state.contrast} />
- </div>
- </Grid>
- <Grid item xs={12} md={1}></Grid>
- </Grid>
- </div>
- );
+ const { state } = useContext(Store)
+ useEffect(() => {
+ window.scrollTo(0, 0)
+ }, [])
+ return (
+ <div style={{ color: "rgba(0,0,0,0.87" }} >
+ <BannerStyle contrast={state.contrast}>
+ <h2 style={{ width: "100%", textAlign: "center", marginTop: "0px", paddingTop: "6rem", marginBottom: "16px", fontSize: "52px", fontFamily: "'Pompiere', cursive", color: "#fff", fontWeight: "500" }}>TERMOS DE USO</h2>
+ <Modal contrast={state.contrast} />
+ </BannerStyle>
+
+ <ImagemSeçao2 contrast={state.contrast}>
+ <Grid container>
+ <Grid item xs={12} md={1}></Grid>
+ <Grid item xs={12} md={10}>
+ <div>
+ <h3><strong style={{ fontWeight: "700" }}>Plataforma Integrada de Recursos Educacionais Digitais,</strong><br />uma iniciativa do Ministério da Educação!</h3>
+
+ <p>A <strong>Plataforma Integrada de RED do MEC</strong> é parte do processo de implementação do Compromisso 6 do <AColorido contrast={state.contrast} href="http://www.governoaberto.cgu.gov.br/noticias/2017/3o-plano-de-acao-nacional-na-parceria-para-governo-aberto" target="_blank">3º Plano de Ação da Parceria Governo Aberto</AColorido> (OGP-Brasil), que tem por objetivo “incorporar na política educacional o potencial da cultura digital, de modo a fomentar a autonomia para uso, reuso e adaptação de recursos educacionais digitais, valorizando a pluralidade e a diversidade da educação brasileira”.
+ </p>
+ <p>Seguindo o compromisso, a <strong>Plataforma Integrada de RED do MEC</strong> visa fortalecer a distribuição de recursos educacionais digitais para o ensino básico brasileiro. Há preferência pela disponibilização de Recursos Educacionais Abertos (REA), ou seja, recursos que “se situem no domínio público ou que tenham sido divulgados sob licença aberta que permita acesso, uso, adaptação e redistribuição gratuita por terceiros, mediante nenhuma restrição ou poucas restrições.” <AColorido contrast={state.contrast} href="http://www.unesco.org/new/fileadmin/MULTIMEDIA/HQ/CI/CI/pdf/Events/Portuguese_Paris_OER_Declaration.pdf" target="_blank">(Declaração REA de Paris, 2012)</AColorido>.
+ </p>
+ </div>
+ </Grid>
+ <Grid item xs={12} md={1}></Grid>
+ </Grid>
+ </ImagemSeçao2>
+
+ <Secao3 contrast={state.contrast}>
+ <Grid container >
+ <h3>Para melhor compreensão, podemos dividir os recursos em dois tipos:</h3>
+ <Grid item xs={12} md={1} ></Grid>
+ <Grid item xs={12} md={5} >
+ <div class="caixa aberto">
+ <div class="texto">
+ <span>Abertos</span>
+ <p>De acordo com a Declaração de Paris, são recursos que, no mínimo, têm uma licença de uso mais flexível, que garante livre redistribuição. Adicionalmente, um recurso aberto deve utilizar um formato aberto, um formato de arquivo que permite a fácil edição por terceiros. Nenhum controle sobre o acesso (como cadastro e senha) deve existir para acesso a recursos abertos. Em sua maioria, são recursos gratuitos.</p>
+ </div>
+ </div>
+ </Grid>
+
+ <Grid item xs={12} md={5}>
+ <div class="caixa fechado">
+ <div class="texto">
+ <span>Fechados</span>
+ <p>São recursos que criam restrições no seu acesso, uso ou reuso. Como exemplo, podemos mencionar recursos que só são acessíveis mediante cadastro ou que têm licenças restritivas (como “todos os direitos reservados”, o símbolo ©). Podem ser gratuitos ou pagos.</p>
+ </div>
+ </div>
+ </Grid>
+ <Grid item xs={12} md={1} ></Grid>
+ </Grid>
+ </Secao3>
+
+ <Grid container style={state.contrast === "" ? {} : { backgroundColor: "black" }}>
+ <Grid item xs={12} md={1}></Grid>
+ <Grid item xs={12} md={10}>
+ <Secao4 contrast={state.contrast}>
+ <div class="texto" style={{ paddingTop: "70px" }}>
+ <p>O <a href="http://www.planalto.gov.br/ccivil_03/_ato2011-2014/2014/lei/l13005.htm" rel="noreferrer" target="_blank">Plano Nacional de Educação</a> (2014-2024) enfatiza nas metas 5 e 7 a importância dos recursos educacionais abertos para fomentar a qualidade da educação básica. A <a href="http://portal.mec.gov.br/index.php?option=com_docman&view=download&alias=35541-res-cne-ces-001-14032016-pdf&category_slug=marco-2016-pdf&Itemid=30192" rel="noreferrer" target="_blank">Resolução CNE/CES nº 1</a>, de 11 de março de 2016, também destaca a importância dos recursos educacionais abertos para as instituições de educação superior e para as atividades de educação a distância.</p>
+ </div>
+ <div class="titulo">
+ <h3>TERMOS DE USO</h3>
+ <p>Início da vigência: agosto de 2017</p>
+ </div>
+ <div class="texto" style={{ paddingBottom: "40px" }}>
+ <p>Aqui estão os “Termos de Uso” da <strong>Plataforma Integrada de RED do MEC</strong>, isto é, as regras de funcionamento da Plataforma e seus serviços, e o que se espera de seus usuários. Por “usuário”, entende-se qualquer pessoa que acesse o domínio portal.mec.gov.br, tanto para pesquisa (acesso) como para a inclusão de dados e informações (participação) mediante cadastro.</p>
+ <p>Fazem parte dos Termos de Uso as políticas de responsabilidade, de privacidade e confidencialidade, a licença de uso do conteúdo e as informações sobre como reportar violações.</p>
+ <p>Ao utilizar a <strong>Plataforma Integrada de RED do MEC</strong>, o usuário aceita todas as condições aqui estabelecidas. O uso da <strong>Plataforma Integrada de RED do MEC</strong> implica aceite das condições aqui elencadas.</p>
+ <p>Por “serviço”, entende-se qualquer funcionalidade ou ferramenta que permita a interatividade com o usuário, como, por exemplo, usuário subir um recurso, postar um comentário, criar uma coleção ou enviar uma mensagem.</p>
+ <p>A aceitação destes "Termos de Uso" é indispensável à utilização da <strong>Plataforma Integrada de RED do MEC</strong>. Todos os usuários deverão ler, certificar-se de tê-los entendido e aceitar todas as condições neles estabelecidas. Dessa forma, deve ficar claro que a utilização desta "<strong>Plataforma Integrada de RED do MEC</strong>" implica aceitação completa deste documento intitulado Termos de Uso. Caso tenha dúvidas sobre os termos, utilize o formulário disponível em “Contato” para saná-las.</p>
+ </div>
+ </Secao4>
+ </Grid>
+ <Grid item xs={12} md={1}></Grid>
+ </Grid>
+
+
+ <Grid container style={state.contrast === "" ? {} : { backgroundColor: "black" }}>
+ <Grid item xs={12} md={1}></Grid>
+ <Grid item xs={12} md={10}>
+ <div style={{ marginBottom: "50px", paddingTop: "20px" }}>
+ <SimpleExpansionPanels contrast={state.contrast} />
+ </div>
+ </Grid>
+ <Grid item xs={12} md={1}></Grid>
+ </Grid>
+ </div>
+ );
}
diff --git a/src/env.js b/src/env.js
index 95815e96e0a4b6d934c32704a85f04284e77d16e..7284c42754e5c679138196c2bae2a2f128779c2b 100644
--- a/src/env.js
+++ b/src/env.js
@@ -17,7 +17,7 @@ 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/>.*/
-var apiDomain = 'https://api.portalmec.c3sl.ufpr.br',
+var apiDomain = 'https://api.portalmectest.c3sl.ufpr.br',
apiVersion = 'v1',
apiUrl = apiDomain + '/' + apiVersion;