From 094124ed8010e1d7dc77a6647de138e4869a0115 Mon Sep 17 00:00:00 2001
From: Vinicius Gabriel Machado <vgm18@inf.ufpr.br>
Date: Wed, 4 Aug 2021 00:48:50 -0300
Subject: [PATCH] Implemented accessibility on contact card and changed cards
to a standardized template
---
src/Components/ButtonGuardarColecao.js | 6 +-
src/Components/CollectionCardFunction.js | 69 ++++++++++---------
src/Components/ContactButtons/FollowButton.js | 64 +++++------------
.../ContactButtons/FollowersCountButton.js | 5 +-
.../ContactButtons/FollowingButton.js | 67 +++++++-----------
src/Components/ContactCard.js | 69 ++++++++++---------
src/Components/ContactCardOptions.js | 33 +++++----
src/Components/MaterialCard.js | 2 +
src/Components/ResourceCardFunction.js | 31 +++++----
src/Components/ResourceCardOptions.js | 2 +-
.../SearchPageComponents/UserTemplate.js | 1 +
.../TabPanels/PanelComponents/TemplateRede.js | 2 +
12 files changed, 156 insertions(+), 195 deletions(-)
diff --git a/src/Components/ButtonGuardarColecao.js b/src/Components/ButtonGuardarColecao.js
index dd67aeed..68a6d274 100644
--- a/src/Components/ButtonGuardarColecao.js
+++ b/src/Components/ButtonGuardarColecao.js
@@ -59,7 +59,9 @@ export default function ButtonGuardarColecao(props) {
<GuardarModal contrast={props.contrast} open={saveToCol} handleClose={() => { toggleSave(false) }}
thumb={props.thumb} title={props.title} recursoId={props.learningObjectId}
/>
- <StyledButton onClick={handleGuardar} className={`${props.contrast}LinkColor`}>
+ <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
</StyledButton>
</>
@@ -67,14 +69,12 @@ export default function ButtonGuardarColecao(props) {
}
const StyledButton = styled(Button)`
- color : inherit !important;
background-color : transparent !important;
font-size : 14px important;
font-weight : 500 !important;
.MuiSvgIcon-root {
font-size : 24px;
- color : inherit;
}
&:hover {
diff --git a/src/Components/CollectionCardFunction.js b/src/Components/CollectionCardFunction.js
index 61ffcd99..e983107d 100644
--- a/src/Components/CollectionCardFunction.js
+++ b/src/Components/CollectionCardFunction.js
@@ -91,7 +91,7 @@ export default function CollectionCardFunction(props) {
const RenderFollowButton = () => {
return (
- <FollowButton className={`${props.contrast}LinkColor`} style={props.contrast === "" ? {border: "2px solid #503096", borderRadius : "5px", color :"#503096" } : {}} onClick={handleFollow}>
+ <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>
)
@@ -106,7 +106,7 @@ 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" } : {}}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 ?
@@ -231,17 +231,17 @@ export default function CollectionCardFunction(props) {
{
props.authorID !== state.currentUser.id &&
<Rating
+ style={props.contrast === "" ? {} : {color: "white"}}
name="customized-empty"
value={props.rating}
readOnly
- style={{ color: "#666" }}
emptyIcon={<StarBorderIcon className={`${props.contrast}Text`} fontSize="inherit" />}
/>
}
<Footer className={`${props.contrast}Text`}>
<Type>
- <FolderIcon />
+ <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>
@@ -282,30 +282,37 @@ export default function CollectionCardFunction(props) {
:
(
<CardReaFooter className={`${props.contrast}BackColor`}> {/*renders following/unfollow and follow button*/}
- {
- userFollowingCol ?
- (
- [
- RenderFollowingButton()
- ]
- )
- :
- (
- [
- RenderFollowButton()
- ]
- )
- }
- <ColCardPublicOptions
- contrast={props.contrast}
- id={props.id}
- userFollowingCol={userFollowingCol}
- handleLike={handleLike}
- handleFollow={handleFollow}
- liked={liked}
- handleLogin={handleLogin}
- currentUserId={state.currentUser.id}
- />
+ <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>
)
}
@@ -421,9 +428,6 @@ const Description = styled.div`
padding : 15px;
`
const FollowButton = styled(Button)`
- margin : 10px !important;
- min-width : 150px !important;
- min-height : 36px !important;
text-align : center !important;
vertical-align : middle !important;
background : transparent !important;
@@ -438,9 +442,6 @@ const FollowButton = styled(Button)`
`
const FollowingButton = styled(Button)`
- margin : 10px !important;
- min-width : 150px !important;
- min-height : 36px !important;
text-align : center !important;
vertical-align : middle !important;
diff --git a/src/Components/ContactButtons/FollowButton.js b/src/Components/ContactButtons/FollowButton.js
index 0a318eda..c707993a 100644
--- a/src/Components/ContactButtons/FollowButton.js
+++ b/src/Components/ContactButtons/FollowButton.js
@@ -80,34 +80,27 @@ export default function FollowButton(props) {
{/*----------------------------------------------------------------------------*/}
{
state.currentUser.id !== '' ? (
- <StyledButton contrast={props.contrast} onClick={() => handleFollow(props.followerID)}>
- <PersonAddIcon style={props.contrast === "" ? {
- fontSize: "24px",
- display: "inline-block",
- verticalAlign: "middle",
- color: "#00bcd4"
- } : {
+ <StyledButton className={`${props.contrast}LinkColor`} style={{color: "#00bcd4"}}
+ style={props.contrast === "" ? {border: "2px solid #00bcd4", borderRadius : "5px", color :"#00bcd4", backgroundColor: "white"} : {border: "1px solid white", borderRadius : "5px", color :"#00bcd4"}}
+ onClick={() => handleFollow(props.followerID)}>
+ <PersonAddIcon style={{
fontSize: "24px",
display: "inline-block",
verticalAlign: "middle",
- color: "white"
}} />
SEGUIR
</StyledButton>
)
:
(
- <StyledButton contrast={props.contrast} onClick={() => handleLogin(true)}>
- <PersonAddIcon style={props.contrast === "" ? {
- fontSize: "24px",
- display: "inline-block",
- verticalAlign: "middle",
- color: "#00bcd4"
- } : {
+ <StyledButton className={`${props.contrast}LinkColor `} style={{color: "#00bcd4"}}
+ style={props.contrast === "" ? {border: "2px solid #00bcd4", borderRadius : "5px", color :"#00bcd4", backgroundColor: "white"} : {border: "1px solid white", borderRadius : "5px", color :"#00bcd4"}}
+ onClick={() => handleLogin(true)}>
+ <PersonAddIcon style={{
fontSize: "24px",
display: "inline-block",
verticalAlign: "middle",
- color: "white"
+
}} />
SEGUIR
</StyledButton>
@@ -191,38 +184,15 @@ const NoIconButton = styled(Button)`
`
const StyledButton = styled(Button)`
+ font-size : 14px important;
+ font-weight : 500 !important;
+
+ .MuiSvgIcon-root {
+ font-size : 24px;
+ }
+
&:hover {
- background-color: ${(props) => props.contrast === "" ? "#fff !important" : "rgba(255,255,0,0.24) !important"};
+ color: rgb(107, 35, 142);
}
- background-color: ${(props) => (props.contrast === "" ? "#fff !important" : "black !important")};
- color: ${(props) => (props.contrast === "" ? "#00bcd4 !important" : "yellow !important")};
- border: ${(props) => (props.contrast === "" ? "1px solid #00bcd4 !important" : "1px solid white !important")};
- text-decoration: ${(props) => (props.contrast === "" ? "none !important" : "underline !important")};
- font-size : 14px !important;
- display : inline-block !important;
- position : relative !important;
- cursor : pointer !important;
- height : 36px !important;
- min-width : 88px !important;
- line-height : 36px !important;
- vertical-align : middle !important;
- -webkit-box-align : center !important;
- -webkit-align-items : center !important;
- -ms-grid-row-align : center !important;
- align-items : center !important;
- text-align : center !important;
- border-radius : 3px !important;
- -webkit-user-select : none !important;
- -moz-user-select : none !important;
- -ms-user-select : none !important;
- user-select : none !important;
- padding : 0 6px !important;
margin : 6px 8px !important;
- white-space : nowrap !important;
- text-transform : uppercase !important;
- font-weight : 500 !important;
- font-style : inherit !important;
- font-variant : inherit !important;
- font-family : inherit !important;
- overflow : hidden !important;
`
diff --git a/src/Components/ContactButtons/FollowersCountButton.js b/src/Components/ContactButtons/FollowersCountButton.js
index bda34bbf..f40a0337 100644
--- a/src/Components/ContactButtons/FollowersCountButton.js
+++ b/src/Components/ContactButtons/FollowersCountButton.js
@@ -11,7 +11,7 @@ export default function FollowersCountButton (props) {
}
return (
- <FollowersButton contrast={props.contrast}>
+ <FollowersButton className={`${props.contrast}BackColor ${props.contrast}Border ${props.contrast}LinkColor`}>
{FollowerButtonSpan()}
</FollowersButton>
)
@@ -21,7 +21,6 @@ export default function FollowersCountButton (props) {
const FollowersButton = styled(Button)`
right : 0 !important;
text-transform : none !important;
- color: ${(props) => (props.contrast === "" ? "#666 !important" : "yellow !important")};
font-size : 13px !important;
font-weight : 400 !important;
box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important;
@@ -31,7 +30,5 @@ const FollowersButton = styled(Button)`
min-height : 36px !important;
vertical-align : middle !important;
text-align : center !important;
- border: ${(props) => (props.contrast === "" ? "0 !important" : "1px solid white !important")};
border-radius : 3px !important;
- background-color: ${(props) => (props.contrast === "" ? "#fff !important" : "black !important")};
`
diff --git a/src/Components/ContactButtons/FollowingButton.js b/src/Components/ContactButtons/FollowingButton.js
index 7d60218a..d688536f 100644
--- a/src/Components/ContactButtons/FollowingButton.js
+++ b/src/Components/ContactButtons/FollowingButton.js
@@ -19,7 +19,7 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
import React, { useState } from 'react'
import styled from 'styled-components'
import Button from '@material-ui/core/Button';
-import FollowingIcon from '../../img/how_to_reg-24px.png'
+import GroupIcon from '@material-ui/icons/Group';
import ModalConfirmarUnfollow from '../ModalConfirmarUnfollow.js'
import { putRequest } from '../HelperFunctions/getAxiosConfig'
@@ -55,6 +55,7 @@ export default function FollowingButton(props) {
/>
<StyledButton
contrast={props.contrast}
+ className={`${props.contrast}LinkColor`}
onMouseOver={() => toggleFollowingHover(true)}
onMouseLeave={() => toggleFollowingHover(false)}
onClick={() => handleUnfollowPartOne(props.followedID)}
@@ -63,14 +64,24 @@ export default function FollowingButton(props) {
followingHover ?
(
[
- <span>DEIXAR DE SEGUIR</span>
+ <StyledButton className={`${props.contrast}LinkColor`} style={{color: "#00bcd4"}}
+ style={props.contrast === "" ? {border: "2px solid #00bcd4", borderRadius : "5px", color :"white", backgroundColor: "#00bcd4"} : {border: "1px solid white", borderRadius : "5px", color :"#00bcd4"}}
+ >
+ DEIXAR DE SEGUIR
+ </StyledButton>
]
)
: (
[
- <>
- <img src={FollowingIcon} alt='ícone seguindo' /><span>Seguindo</span>
- </>
+ <StyledButton className={`${props.contrast}LinkColor`} style={{color: "#00bcd4"}}
+ style={props.contrast === "" ? {border: "2px solid #00bcd4", borderRadius : "5px", color :"white", backgroundColor: "#00bcd4"} : {border: "1px solid white", borderRadius : "5px", color :"#00bcd4"}}
+ >
+ <GroupIcon style={{
+ fontSize: "24px",
+ display: "inline-block",
+ verticalAlign: "middle",
+ }} />SEGUINDO
+ </StyledButton>
]
)
}
@@ -133,47 +144,15 @@ export function NoIconFollowing(props) {
export const StyledButton = styled(Button)`
- background-color: ${(props) => (props.contrast === "" ? "#00bcd4 !important" : "black !important")};
- color: ${(props) => (props.contrast === "" ? "#fff !important" : "yellow !important")};
- display : inline-block !important;
- position : relative !important;
- cursor : pointer !important;
- min-height : 36px !important;
- min-width : 88px !important;
- line-height : 36px !important;
- vertical-align : middle !important;
- -webkit-box-align : center !important;
- -webkit-align-items : center !important;
- -ms-grid-row-align : center !important;
- align-items : center !important;
- text-align : center !important;
- border-radius : 3px !important;
- -webkit-user-select : none !important;
- -moz-user-select : none !important;
- -ms-user-select : none !important;
- user-select : none !important;
- border: ${(props) => (props.contrast === "" ? "0 !important" : "1px solid white !important")};
- padding : 0 6px !important;
- margin : 6px 8px !important;
- white-space : nowrap !important;
- text-transform : uppercase !important;
+ font-size : 14px important;
font-weight : 500 !important;
- font-size : 14px !important;
- font-style : inherit !important;
- font-variant : inherit !important;
- font-family : inherit !important;
- text-decoration: ${(props) => (props.contrast === "" ? "none !important" : "underline !important")};
- overflow : hidden !important;
- &:hover {
- background-color: ${(props) => props.contrast === "" ? "#fff !important" : "rgba(255,255,0,0.24) !important"};
- color: ${(props) => props.contrast === "" ? "#00bcd4 !important" : "yellow !important"};
- border: ${(props) => props.contrast === "" ? "1px solid #00bcd4 !important" : "1px solid white !important"};
+
+ .MuiSvgIcon-root {
+ font-size : 24px;
}
- img {
- height : 24px;
- display : inline-block;
- vertical-align : middle;
- color : #fff !important;
+
+ &:hover {
+ color: rgb(107, 35, 142);
}
`
diff --git a/src/Components/ContactCard.js b/src/Components/ContactCard.js
index bacf2c87..31f78db1 100644
--- a/src/Components/ContactCard.js
+++ b/src/Components/ContactCard.js
@@ -18,6 +18,7 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
import React, { useState } from 'react';
import Card from '@material-ui/core/Card';
+import Grid from '@material-ui/core/Grid';
import CardContent from '@material-ui/core/CardContent';
import noAvatar from "../img/default_profile.png";
import CardMedia from '@material-ui/core/CardMedia';
@@ -28,20 +29,20 @@ import FollowingButton from './ContactButtons/FollowingButton.js'
import FollowersCountButton from './ContactButtons/FollowersCountButton.js'
import { Link } from 'react-router-dom';
-export default function ImgMediaCard(props) {
+export default function ContactCard(props) {
const [followedBoolean, setFollowedBoolean] = useState(props.followed)
const toggleFollowed = () => { setFollowedBoolean(!followedBoolean) }
return (
<StyledCard>
- <CardDiv>
+ <CardDiv className={`${props.contrast}BackColor ${props.contrast}Border ${props.contrast}Text`}>
<CardAreaDiv>
{/*Top part of contat card (background image, number of followers and avatar)*/}
<Header>
<StyledCardMedia image={props.cover}>
<div style={{ display: "flex", backgroundColor: "inherit", float: "right" }}>
<Link to={props.href} style={{textDecoration : "none"}}>
- <FollowersCountButton followCount={props.follow_count} />
+ <FollowersCountButton contrast={props.contrast} followCount={props.follow_count} />
</Link>
<Link to={props.href}>
<AvatarDiv>
@@ -54,52 +55,63 @@ export default function ImgMediaCard(props) {
</Header>
{/*Rest of the card content. Button to be rendered depends on whether the contact is followed by the user*/}
- <CardContent>
+ <CardContent style={{height: "148px", padding: "0", bottom: "0"}}>
<UserInfo>
- <Link to={props.href}>
+ <Link to={props.href} className={`${props.contrast}LinkColor`}>
<p className="p1">
{props.name}
</p>
</Link>
- <Link to={props.href}>
+ <Link to={props.href} className={`${props.contrast}LinkColor`}>
<span style={{ fontSize: "14px", fontWeight: "normal" }}>
<b>{props.numCollections}</b> {props.numCollections !== 1 ? "Coleções" : "Coleção"} | <b>{props.numLearningObjects}</b> {props.numLearningObjects !== 1 ? "Recursos" : "Recurso"}
</span>
</Link>
-
- <div style={{ display: "flex", justifyContent: "center" }}>
- {
- followedBoolean ?
- (
- <React.Fragment>
+ </UserInfo>
+ </CardContent>
+ <CardContent style={{padding: "0"}}>
+ <Grid container>
+ <Grid item xs={2}></Grid>
+ {
+ followedBoolean ?
+ (
+ <>
+ <Grid item xs={8} style={{ display: "flex", justifyContent: "center" }}>
<FollowingButton
+ contrast={props.contrast}
followedID={props.followerID ? props.followerID : props.followedID}
toggleFollowed={toggleFollowed} />
-
+ </Grid>
+ <Grid item xs={2} style={{ display: "flex", justifyContent: "flex-start" }}>
<Options
+ contrast={props.contrast}
followableID={props.followerID ? props.followerID : props.followedID}
followed={followedBoolean}
toggleFollowed={toggleFollowed} />
- </React.Fragment>
- )
- :
- (
- <React.Fragment>
+ </Grid>
+ </>
+ )
+ :
+ (
+ <>
+ <Grid item xs={8} style={{ display: "flex", justifyContent: "center" }}>
<FollowButton
+ contrast={props.contrast}
followerID={props.followedID ? props.followedID : props.followerID}
toggleFollowed={toggleFollowed} />
-
+ </Grid>
+ <Grid item xs={2} style={{ display: "flex", justifyContent: "flex-start" }}>
<Options
+ contrast={props.contrast}
followableID={props.followedID ? props.followedID : props.followerID}
followed={followedBoolean}
toggleFollowed={toggleFollowed} />
- </React.Fragment>
- )
- }
-
- </div>
- </UserInfo>
+ </Grid>
+ </>
+ )
+ }
+ </Grid>
</CardContent>
</CardAreaDiv>
</CardDiv>
@@ -123,10 +135,8 @@ export const CardAreaDiv = styled.div`
margin : 0 auto;
`
export const CardDiv = styled.div`
- background-color : #fff;
text-align : start;
font-family : 'Roboto', sans serif;
- color : #666;
`
/*----------------------------------------------------------------------------*/
@@ -135,7 +145,7 @@ export const CardDiv = styled.div`
/*Override Material UI styling -----------------------------------------------*/
const StyledCardMedia = styled(CardMedia)`
height : 100%;
- width : 100%;
+ width : 270.5px;
background-size : cover;
background-position : center;
@@ -155,10 +165,7 @@ const StyledCard = styled(Card)`
const UserInfo = styled.div`
text-align : center;
margin-top : 50px;
- color : #666;
-
a {
- text-decoration : none !important;
color : #666;
}
diff --git a/src/Components/ContactCardOptions.js b/src/Components/ContactCardOptions.js
index 2cf3555c..76c5d05e 100644
--- a/src/Components/ContactCardOptions.js
+++ b/src/Components/ContactCardOptions.js
@@ -107,8 +107,8 @@ export default function SimpleMenu(props) {
{...props}/>
}
<div style={{fontSize: "12px", display : "flex", flexDirection : "column", justifyContent : "center"}}>
- <ButtonNoWidth aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick} style={{color : "#666"}}>
- <MoreVertIcon style={{color : "#666"}}/>
+ <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"
@@ -117,30 +117,30 @@ export default function SimpleMenu(props) {
open={Boolean(anchorEl)}
onClose={handleClose}
>
- <StyledMenuItem onClick={handleClose}>
+ <StyledMenuItem className={`${props.contrast}LinkColor`} contrast={props.contrast} onClick={handleClose}>
<Link to={"/usuario-publico/" + props.followableID}>
- <ListItemIcon><OpenIcon /></ListItemIcon>Abrir
+ <ListItemIcon className={`${props.contrast}LinkColor`}><OpenIcon /></ListItemIcon>Abrir
</Link>
</StyledMenuItem>
{
props.followed ?
(
- <StyledMenuItem onClick={() => {handleFollow(props.followableID)}}>
- <ListItemIcon><ReportIcon /></ListItemIcon>Deixar de Seguir
+ <StyledMenuItem className={`${props.contrast}LinkColor`} contrast={props.contrast} onClick={() => {handleFollow(props.followableID)}}>
+ <ListItemIcon className={`${props.contrast}LinkColor`}><ReportIcon /></ListItemIcon>Deixar de Seguir
</StyledMenuItem>
)
:
(
state.currentUser.id !== '' ? (
- <StyledMenuItem onClick={() => {handleFollow(props.followableID)}}>
- <ListItemIcon><PersonAddIcon /></ListItemIcon>Seguir
+ <StyledMenuItem className={`${props.contrast}LinkColor`} contrast={props.contrast} onClick={() => {handleFollow(props.followableID)}}>
+ <ListItemIcon className={`${props.contrast}LinkColor`}><PersonAddIcon /></ListItemIcon>Seguir
</StyledMenuItem>
)
:
(
- <StyledMenuItem onClick={() => {handleLogin(props.followableID)}}>
- <ListItemIcon><PersonAddIcon /></ListItemIcon>Seguir
+ <StyledMenuItem className={`${props.contrast}LinkColor`} contrast={props.contrast} onClick={() => {handleLogin(props.followableID)}}>
+ <ListItemIcon className={`${props.contrast}LinkColor`}><PersonAddIcon /></ListItemIcon>Seguir
</StyledMenuItem>
)
)
@@ -148,14 +148,14 @@ export default function SimpleMenu(props) {
{
state.currentUser.id !== '' ? (
- <StyledMenuItem onClick={() => {handleModal(true); handleClose()}}>
- <ListItemIcon><ReportIcon /></ListItemIcon>Reportar
+ <StyledMenuItem className={`${props.contrast}LinkColor`} contrast={props.contrast} onClick={() => {handleModal(true); handleClose()}}>
+ <ListItemIcon className={`${props.contrast}LinkColor`}><ReportIcon /></ListItemIcon>Reportar
</StyledMenuItem>
)
:
(
- <StyledMenuItem onClick={() => {handleLogin(true)}}>
- <ListItemIcon><ReportIcon /></ListItemIcon>Reportar
+ <StyledMenuItem className={`${props.contrast}LinkColor`} contrast={props.contrast} onClick={() => {handleLogin(true)}}>
+ <ListItemIcon className={`${props.contrast}LinkColor`}><ReportIcon /></ListItemIcon>Reportar
</StyledMenuItem>
)
}
@@ -191,12 +191,11 @@ const ButtonNoWidth = styled(Button)`
`
const StyledMenuItem = styled(MenuItem)`
- color : #666 !important;
+ background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
.MuiSvgIcon-root {
vertical-align : middle !important;
}
a {
- text-decoration : none !important;
- color : #666 !important;
+ color : inherit !important;
}
`
diff --git a/src/Components/MaterialCard.js b/src/Components/MaterialCard.js
index 5639bf80..790a5de6 100644
--- a/src/Components/MaterialCard.js
+++ b/src/Components/MaterialCard.js
@@ -76,6 +76,7 @@ export default function MaterialCard(props) {
width <= 767 ?
<Link className={`${props.contrast}LinkColor`} to={`/colecao?colecao=${props.id}`}>
<Button
+ style={ props.contrast === "" ? { color: "#e81f4f" } : { color: "white" }}
endIcon={<ExpandMoreRoundedIcon />}
>
@@ -85,6 +86,7 @@ export default function MaterialCard(props) {
:
<Button
className={`${props.contrast}LinkColor`}
+ style={ props.contrast === "" ? { color: "#e81f4f" } : { color: "white" }}
endIcon={<ExpandMoreRoundedIcon />}
onClick={HandleButtonPressed}
>
diff --git a/src/Components/ResourceCardFunction.js b/src/Components/ResourceCardFunction.js
index 98d19730..fe74faaf 100644
--- a/src/Components/ResourceCardFunction.js
+++ b/src/Components/ResourceCardFunction.js
@@ -168,6 +168,7 @@ export default function ResourceCardFunction(props) {
</Title>
</Link>
<Rating
+ style={props.contrast === "" ? {} : {color: "white"}}
name="customized-empty"
value={props.rating}
readOnly
@@ -188,18 +189,22 @@ export default function ResourceCardFunction(props) {
</Description>
</CardReaDiv>
<CardReaFooter className={`${props.contrast}BackColor`}>
- <div style={{ display: "flex", height: "100%" }}>
- <ButtonGuardarColecao contrast={props.contrast} thumb={props.thumbnail} title={props.title} learningObjectId={props.id}
- />
- </div>
- <ResourceCardOptions
- contrast={props.contrast}
- learningObjectId={props.id}
- downloadableLink={props.downloadableLink}
- thumb={props.thumbnail}
- title={props.title}
- handleLogin={handleLogin}
- />
+ <Grid container>
+ <Grid item xs={2}></Grid>
+ <Grid item xs={8} style={{ display: "flex", justifyContent: "center" }}>
+ <ButtonGuardarColecao contrast={props.contrast} thumb={props.thumbnail} title={props.title} learningObjectId={props.id}/>
+ </Grid>
+ <Grid item xs={2} style={{ display: "flex", justifyContent: "flex-end" }}>
+ <ResourceCardOptions
+ contrast={props.contrast}
+ learningObjectId={props.id}
+ downloadableLink={props.downloadableLink}
+ thumb={props.thumbnail}
+ title={props.title}
+ handleLogin={handleLogin}
+ />
+ </Grid>
+ </Grid>
</CardReaFooter>
</CardDiv>
</StyledCard>
@@ -272,8 +277,6 @@ const CardReaFooter = styled.div`
height : 60px;
display : flex;
justify-content : space-between;
- border-top : 1px solid #e5e5e5;
- border-bottom : 1px solid #e5e5e5;
align-items : center;
padding : 0 15px 0 15px;
`
diff --git a/src/Components/ResourceCardOptions.js b/src/Components/ResourceCardOptions.js
index 00f171ba..6d0e093d 100644
--- a/src/Components/ResourceCardOptions.js
+++ b/src/Components/ResourceCardOptions.js
@@ -130,7 +130,7 @@ export default function ResourceCardOptions(props) {
/>
<div style={{ fontSize: "12px", display: "flex", flexDirection: "column", justifyContent: "center" }}>
<ButtonNoWidth aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick}>
- <MoreVertIcon className={`${props.contrast}LinkColor`} />
+ <MoreVertIcon className={`${props.contrast}LinkColor ${props.contrast}Text`} />
</ButtonNoWidth>
<Menu
className={`${props.contrast}Text`}
diff --git a/src/Components/SearchPageComponents/UserTemplate.js b/src/Components/SearchPageComponents/UserTemplate.js
index 49ce6283..66720a68 100644
--- a/src/Components/SearchPageComponents/UserTemplate.js
+++ b/src/Components/SearchPageComponents/UserTemplate.js
@@ -34,6 +34,7 @@ export default function ResourceTemplate({ isLoading, resources, totalResources,
resources.map((card) => {
return <Grid item key={new Date().toISOString() + card.id} >
<ContactCard
+ contrast={contrast}
name={card.name}
avatar={card.avatar ? apiDomain + card.avatar : null}
cover={card.cover ? apiDomain + card.cover : null}
diff --git a/src/Components/TabPanels/PanelComponents/TemplateRede.js b/src/Components/TabPanels/PanelComponents/TemplateRede.js
index 872675b8..076d525e 100644
--- a/src/Components/TabPanels/PanelComponents/TemplateRede.js
+++ b/src/Components/TabPanels/PanelComponents/TemplateRede.js
@@ -13,6 +13,7 @@ export default function PanelTemplateRede(props) {
if (followerBoolean) {
return (
<ContactCard
+ contrast={props.contrast}
name={card.follower.name}
avatar={card.follower.avatar !== undefined && card.follower.avatar !== "" ? apiDomain + card.follower.avatar : null}
cover={card.follower.cover !== undefined && card.follower.cover !== "" ? apiDomain + card.follower.cover : null}
@@ -28,6 +29,7 @@ export default function PanelTemplateRede(props) {
else {
return (
<ContactCard
+ contrast={props.contrast}
name={card.followable.name ? card.followable.name : null}
avatar={card.followable.avatar !== undefined && card.followable.avatar !== "" ? apiDomain + '/' + card.followable.avatar : null}
cover={card.followable.cover !== undefined && card.followable.cover !== "" ? apiDomain + card.followable.cover : null}
--
GitLab