From c15259a1d9ac34110b0dabfef0d887ab3059a66d Mon Sep 17 00:00:00 2001
From: Vinicius Gabriel Machado <vgm18@inf.ufpr.br>
Date: Wed, 29 Sep 2021 04:34:51 -0300
Subject: [PATCH] Contrast in admin
---
.../Components/MobileComponents/SimpleList.js | 39 +++++----
src/Admin/Components/Components/Table.js | 3 +-
src/Admin/Pages/Pages/SubPages/Activity.js | 58 +++++--------
.../Pages/Pages/SubPages/AproveTeacher.js | 82 ++++++++-----------
.../Pages/Pages/SubPages/BlockedUsers.js | 64 ++++++---------
src/Admin/Pages/Pages/SubPages/Collections.js | 79 ++++++++++--------
.../Pages/SubPages/CommunityQuestions.js | 72 +++++++---------
src/Admin/Pages/Pages/SubPages/Complaints.js | 80 ++++++++----------
.../Pages/SubPages/EducationalObjects.js | 70 +++++++---------
.../Pages/Pages/SubPages/Institutions.js | 66 ++++++---------
src/Admin/Pages/Pages/SubPages/Languages.js | 56 +++++--------
.../Pages/Pages/SubPages/NoteVariables.js | 62 ++++++--------
src/Admin/Pages/Pages/SubPages/Permissions.js | 48 ++++-------
src/Admin/Pages/Pages/SubPages/Questions.js | 50 ++++-------
src/Admin/Pages/Pages/SubPages/Rating.js | 56 +++++--------
src/Admin/Pages/Pages/SubPages/Users.js | 74 +++++++----------
16 files changed, 404 insertions(+), 555 deletions(-)
diff --git a/src/Admin/Components/Components/MobileComponents/SimpleList.js b/src/Admin/Components/Components/MobileComponents/SimpleList.js
index f7afb24b..6f787e41 100644
--- a/src/Admin/Components/Components/MobileComponents/SimpleList.js
+++ b/src/Admin/Components/Components/MobileComponents/SimpleList.js
@@ -31,13 +31,10 @@ import VisibilityIcon from "@material-ui/icons/Visibility";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import { Link } from "react-router-dom";
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles({
expand: {
transform: "rotate(0deg)",
marginLeft: "auto",
- transition: theme.transitions.create("transform", {
- duration: theme.transitions.duration.shortest,
- }),
},
expandOpen: {
transform: "rotate(180deg)",
@@ -51,10 +48,18 @@ const useStyles = makeStyles((theme) => ({
fontSize: 14,
fontWeight: "500",
},
-}));
+ subColor: {
+ color: props => props.contrast === "" ? "#666" : "white",
+ },
+ root: {
+ backgroundColor: props => props.contrast === "" ? "" : "black",
+ color: props => props.contrast === "" ? "#666" : "white",
+ border: props => props.contrast === "" ? "1px solid #666" : "1px solid white",
+ }
+});
export default function MobileList(props) {
- const classes = useStyles();
+ const classes = useStyles(props);
const [expanded, setExpanded] = React.useState(false);
const handleExpandClick = () => {
@@ -68,16 +73,22 @@ export default function MobileList(props) {
<Avatar
aria-label="avatar"
style={
- props.backColor
- ? { backgroundColor: props.backColor }
- : { backgroundColor: "grey" }
+ props.contrast === "" ? (
+ props.backColor
+ ? { backgroundColor: props.backColor }
+ : { backgroundColor: "gray" }
+ )
+ :
+ (
+ {backgroundColor: "black"}
+ )
}
>
{props.avatar}
</Avatar>
}
title={props.title}
- subheader={props.subtitle}
+ subheader={<Typography className={classes.subColor}>{props.subtitle}</Typography>}
action={
<>
{
@@ -86,7 +97,7 @@ export default function MobileList(props) {
<IconButton
onClick={props.reset}
>
- <VisibilityIcon style={{ fill: "#00bcd4" }} />
+ <VisibilityIcon style={{fill: props.contrast === "" ? "#00bcd4" : "yellow"}} />
</IconButton>
</Link> : null
}
@@ -99,7 +110,7 @@ export default function MobileList(props) {
aria-expanded={expanded}
aria-label="show more"
>
- <ExpandMoreIcon />
+ <ExpandMoreIcon style={{fill: props.contrast === "" ? "#666" : "yellow"}}/>
</IconButton>
</>
}
@@ -108,10 +119,10 @@ export default function MobileList(props) {
<CardContent>
{props.data.map((info, index) => (
<div className={classes.displayColumn} key={index}>
- <Typography color="initial" className={classes.subTitle}>
+ <Typography className={classes.subTitle}>
{info.title}
</Typography>
- <Typography color="textSecondary">
+ <Typography>
{info.subtitle}
</Typography>
</div>
diff --git a/src/Admin/Components/Components/Table.js b/src/Admin/Components/Components/Table.js
index ddb7a377..3fbba67f 100644
--- a/src/Admin/Components/Components/Table.js
+++ b/src/Admin/Components/Components/Table.js
@@ -23,7 +23,8 @@ const StyledTableCell = withStyles((theme) => ({
const useStyles = makeStyles({
table: {
minWidth: 700,
- width: "100%"
+ width: "99.99%",
+ overflow: "hidden"
},
});
diff --git a/src/Admin/Pages/Pages/SubPages/Activity.js b/src/Admin/Pages/Pages/SubPages/Activity.js
index a436d75c..0fe5f9c1 100644
--- a/src/Admin/Pages/Pages/SubPages/Activity.js
+++ b/src/Admin/Pages/Pages/SubPages/Activity.js
@@ -26,9 +26,8 @@ import { getRequest } from '../../../../Components/HelperFunctions/getAxiosConfi
import LoadingSpinner from '../../../../Components/LoadingSpinner'
import MobilePageHeader from '../../../Components/Components/MobileComponents/MobilePageHeader'
import PageHeader from '../../../Components/Components/PageHeader'
-import { StyledLoadMoreButton, StyledDivButton } from "./Collections.js";
+import { StyledLoadMoreButton, StyledDivButton, useStylesCell, useStylesRow } from "./Collections.js";
//imports from material ui
-import { withStyles } from "@material-ui/core/styles"
import TableBody from "@material-ui/core/TableBody"
import TableCell from "@material-ui/core/TableCell"
import MenuItem from "@material-ui/core/MenuItem"
@@ -48,28 +47,13 @@ import MobileList from "../../../Components/Components/MobileComponents/SimpleLi
import { Store } from 'Store'
-const StyledTableCell = withStyles((theme) => ({
- head: {
- backgroundColor: theme.palette.common.black,
- color: theme.palette.common.white,
- },
- body: {
- fontSize: 14,
- },
-}))(TableCell);
-
-const StyledTableRow = withStyles((theme) => ({
- root: {
- "&:nth-of-type(odd)": {
- backgroundColor: theme.palette.action.hover,
- },
- },
-}))(TableRow);
-
const Activity = () => {
const { state } = useContext(Store)
+ const classesCell = useStylesCell(state);
+ const classesRow = useStylesRow(state);
+
const ADD_ONE_LENGHT = [""];
const TOP_LABELS = [
"CRIADO EM",
@@ -272,6 +256,7 @@ const Activity = () => {
) : (
<>
<MobileList
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
title={row.id}
subtitle={row.privacy}
@@ -371,9 +356,9 @@ const Activity = () => {
<TableBody>
{items.map((row, index) =>
index === items.length - 1 ? (
- <StyledTableRow key={new Date().toISOString() + row.created_at} style={{ padding: "1em" }}>
+ <TableRow className={classesRow.root} key={new Date().toISOString() + row.created_at} style={{ padding: "1em" }}>
{/* Button to load more data */}
- <StyledTableCell>
+ <TableCell className={classesCell.root} colspan={5}>
<Button
color="primary"
variant="text"
@@ -383,6 +368,7 @@ const Activity = () => {
onClick={() => {
setCurrPage(currPage + 1)
}}
+ style={state.contrast === "" ? {width: "100%"} : {width: "100%", color: "yellow", textDecoration: "underline yellow"}}
>
{isLoadingMoreItems ? (
<CircularProgress size={24} />
@@ -390,30 +376,30 @@ const Activity = () => {
"Carregar mais itens"
)}
</Button>
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell>
+ </TableRow>
) : (
- <StyledTableRow key={new Date().toISOString() + index}>
- <StyledTableCell component="th" scope="row">
+ <TableRow className={classesRow.root} key={new Date().toISOString() + index}>
+ <TableCell className={classesCell.root} component="th" scope="row">
{DisplayDate(row.created_at)}
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
{
row.owner ? row.owner.name : ""
}
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
{row.activity}
- </StyledTableCell>
- <StyledTableCell align="right">{row.privacy}</StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">{row.privacy}</TableCell>
+ <TableCell className={classesCell.root} align="right">
<Link to={`/admin/activity?activity=${row.id}`}>
<IconButton>
- <VisibilityIcon style={{ fill: "#00bcd4" }} />
+ <VisibilityIcon style={{ fill: state.contrast === "" ? "#00bcd4" : "yellow" }} />
</IconButton>
</Link>
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell>
+ </TableRow>
)
)}
</TableBody>
diff --git a/src/Admin/Pages/Pages/SubPages/AproveTeacher.js b/src/Admin/Pages/Pages/SubPages/AproveTeacher.js
index 3eb5cc9a..afc90e4f 100644
--- a/src/Admin/Pages/Pages/SubPages/AproveTeacher.js
+++ b/src/Admin/Pages/Pages/SubPages/AproveTeacher.js
@@ -33,9 +33,8 @@ import PageHeader, { StyledFilter } from "../../../Components/Components/PageHea
import { apiDomain } from '../../../../env';
import FormInput from "Components/FormInput.js"
import { Store } from 'Store'
-import { StyledLoadMoreButton, StyledDivButton } from "./Collections.js";
+import { StyledLoadMoreButton, StyledDivButton, useStylesCell, useStylesRow } from "./Collections.js";
//imports from material ui
-import { withStyles } from "@material-ui/core/styles";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import MenuItem from "@material-ui/core/MenuItem";
@@ -57,29 +56,13 @@ import { Link } from "react-router-dom";
//Image Import
import { noAvatar } from "ImportImages.js";
-
-const StyledTableCell = withStyles((theme) => ({
- head: {
- backgroundColor: theme.palette.common.black,
- color: theme.palette.common.white,
- },
- body: {
- fontSize: 14,
- },
-}))(TableCell);
-
-const StyledTableRow = withStyles((theme) => ({
- root: {
- "&:nth-of-type(odd)": {
- backgroundColor: theme.palette.action.hover,
- },
- },
-}))(TableRow);
-
const AproveTeacher = () => {
const { state } = useContext(Store);
+ const classesCell = useStylesCell(state);
+ const classesRow = useStylesRow(state);
+
const WINDOW_WIDTH = window.innerWidth
const ADD_ONE_LENGHT = [""];
const TOP_LABELS = [
@@ -167,7 +150,8 @@ const AproveTeacher = () => {
style={{
textAlign: "center",
padding: "0.5em",
- backgroundColor: "#228B22",
+ backgroundColor: state.contrast === "" ? "#228B22" : "black",
+ border: state.contrast === "" ? "" : "1px solid white",
fontWeight: "500",
color: "#FFFAFA",
}}
@@ -181,7 +165,8 @@ const AproveTeacher = () => {
style={{
textAlign: "center",
padding: "0.5em",
- backgroundColor: "#FF8C00",
+ backgroundColor: state.contrast === "" ? "#FF8C00" : "black",
+ border: state.contrast === "" ? "" : "1px solid white",
fontWeight: "500",
color: "#FFFAFA",
}}
@@ -195,7 +180,8 @@ const AproveTeacher = () => {
style={{
textAlign: "center",
padding: "0.5em",
- backgroundColor: "#FA8072",
+ backgroundColor: state.contrast === "" ? "#FA8072" : "black",
+ border: state.contrast === "" ? "" : "1px solid white",
fontWeight: "500",
color: "#FFFAFA",
}}
@@ -209,7 +195,8 @@ const AproveTeacher = () => {
style={{
textAlign: "center",
padding: "0.5em",
- backgroundColor: "#797D7F ",
+ backgroundColor: state.contrast === "" ? "#797D7F" : "black",
+ border: state.contrast === "" ? "" : "1px solid white",
fontWeight: "500",
color: "#FFFAFA",
}}
@@ -482,6 +469,7 @@ const AproveTeacher = () => {
) : (
<>
<MobileList
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
title={row.name}
subtitle={row.id}
@@ -509,7 +497,8 @@ const AproveTeacher = () => {
<Button
variant='text'
color='primary'
- startIcon={<EmailRoundedIcon />}
+ style={state.contrast === "" ? {} : {color: "yellow", textDecoration: "underline yellow"}}
+ startIcon={<EmailRoundedIcon style={state.contrast === "" ? {color: "#666"} : {color: "white"}}/>}
>
{row.email}
</Button>
@@ -672,9 +661,9 @@ const AproveTeacher = () => {
<TableBody>
{items.map((row, index) =>
index === items.length - 1 ? (
- <StyledTableRow key={new Date().toISOString() + row.created_at}>
+ <TableRow className={classesRow.root} key={new Date().toISOString() + row.created_at}>
{/* Button to load more data */}
- <StyledTableCell>
+ <TableCell className={classesCell.root} colspan={7}>
<Button
color="primary"
variant="text"
@@ -684,6 +673,7 @@ const AproveTeacher = () => {
onClick={() => {
setCurrPage(currPage + 1)
}}
+ style={state.contrast === "" ? {width: "100%"} : {width: "100%", color: "yellow", textDecoration: "underline yellow"}}
>
{isLoadingMoreItems ? (
<CircularProgress size={24} />
@@ -691,34 +681,34 @@ const AproveTeacher = () => {
"Carregar mais itens"
)}
</Button>
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell>
+ </TableRow>
) : (
- <StyledTableRow
+ <TableRow className={classesRow.root}
key={new Date().toISOString() + index}
style={{ flex: 1, width: "100%" }}
>
- <StyledTableCell component="th" scope="row">
+ <TableCell className={classesCell.root} component="th" scope="row">
{ComplaintStatus(row.submitter_request)}
- </StyledTableCell>
- <StyledTableCell align="right">{row.id}</StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">{row.id}</TableCell>
+ <TableCell className={classesCell.root} align="right">
{row.name}
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
{row.email}
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
{DisplayDate(row.created_at)}
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
<Link to={`/admin/user?id=${row.id}`}>
<IconButton>
- <VisibilityIcon style={{ fill: "#00bcd4" }} />
+ <VisibilityIcon style={{ fill: state.contrast === "" ? "#00bcd4" : "yellow" }} />
</IconButton>
</Link>
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
<Button
variant="contained"
color="secondary"
@@ -751,8 +741,8 @@ const AproveTeacher = () => {
>
Aceitar
</Button>
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell>
+ </TableRow>
)
)}
</TableBody>
diff --git a/src/Admin/Pages/Pages/SubPages/BlockedUsers.js b/src/Admin/Pages/Pages/SubPages/BlockedUsers.js
index 1e60e612..9cad24d0 100644
--- a/src/Admin/Pages/Pages/SubPages/BlockedUsers.js
+++ b/src/Admin/Pages/Pages/SubPages/BlockedUsers.js
@@ -18,7 +18,6 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
import React, { useEffect, useState, useContext } from 'react';
import moment from "moment";
//Material ui componets
-import { withStyles } from '@material-ui/core/styles';
import TableBody from '@material-ui/core/TableBody';
import Grid from "@material-ui/core/Grid";
import Paper from "@material-ui/core/Paper";
@@ -41,7 +40,7 @@ import MobileList from "../../../Components/Components/MobileComponents/SimpleLi
import { apiDomain } from '../../../../env';
import MobilePageHeader from "../../../Components/Components/MobileComponents/MobilePageHeader"
import PageHeader, { StyledFilter } from "../../../Components/Components/PageHeader"
-import { StyledLoadMoreButton, StyledDivButton } from "./Collections.js";
+import { StyledLoadMoreButton, StyledDivButton, useStylesCell, useStylesRow } from "./Collections.js";
import { Store } from 'Store'
//Services
import { getRequest, putRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
@@ -52,28 +51,13 @@ import { Link } from 'react-router-dom';
//Image Import
import { noAvatar } from "ImportImages.js";
-const StyledTableCell = withStyles((theme) => ({
- head: {
- backgroundColor: theme.palette.common.black,
- color: theme.palette.common.white,
- },
- body: {
- fontSize: 14,
- },
-}))(TableCell);
-
-const StyledTableRow = withStyles((theme) => ({
- root: {
- '&:nth-of-type(odd)': {
- backgroundColor: theme.palette.action.hover,
- },
- },
-}))(TableRow);
-
const BlockedUsers = () => {
const { state } = useContext(Store)
+ const classesCell = useStylesCell(state);
+ const classesRow = useStylesRow(state);
+
const ADD_ONE_LENGHT = [''];
const WINDOW_WIDTH = window.innerWidth
@@ -328,6 +312,7 @@ const BlockedUsers = () => {
) : (
<>
<MobileList
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
title={row.name}
subtitle={row.id}
@@ -355,7 +340,8 @@ const BlockedUsers = () => {
<Button
variant='text'
color='primary'
- startIcon={<EmailRoundedIcon />}
+ style={state.contrast === "" ? {} : {color: "yellow", textDecoration: "underline yellow"}}
+ startIcon={<EmailRoundedIcon style={state.contrast === "" ? {color: "#666"} : {color: "white"}}/>}
>
{row.email}
</Button>
@@ -444,9 +430,9 @@ const BlockedUsers = () => {
<TableBody>
{items.map((row, index) => (
index === items.length - 1 ?
- <StyledTableRow key={new Date().toISOString() + row.created_at}>
+ <TableRow className={classesRow.root} key={new Date().toISOString() + row.created_at}>
{/* Button to load more data */}
- <StyledTableCell>
+ <TableCell className={classesCell.root} colpsan={6}>
<Button
color='primary'
variant='text'
@@ -455,40 +441,42 @@ const BlockedUsers = () => {
onClick={() => {
setCurrPage(currPage + 1)
}}
+ style={state.contrast === "" ? {width: "100%"} : {width: "100%", color: "yellow", textDecoration: "underline yellow"}}
>
{
isLoadingMoreItems ? <CircularProgress size={24} /> : 'Carregar mais itens'
}
</Button>
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell>
+ </TableRow>
:
- <StyledTableRow key={new Date().toISOString() + index}>
- <StyledTableCell component="th" scope="row">{row.id}</StyledTableCell>
- <StyledTableCell align="right">
+ <TableRow className={classesRow.root} key={new Date().toISOString() + index}>
+ <TableCell className={classesCell.root} component="th" scope="row">{row.id}</TableCell>
+ <TableCell className={classesCell.root} align="right">
{BlockStatus(row.state)}
- </StyledTableCell>
- <StyledTableCell align="right">{row.name}</StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">{row.name}</TableCell>
+ <TableCell className={classesCell.root} align="right">
{
row.email ?
<Link to={`/admin/sendEmail?email=${row.email}`} style={{ textDecoration: 'none' }}>
<Button
variant='text'
color='primary'
- startIcon={<EmailRoundedIcon />}
+ style={state.contrast === "" ? {} : {color: "yellow", textDecoration: "underline yellow"}}
+ startIcon={<EmailRoundedIcon style={{ fill: state.contrast === "" ? "#666" : "white" }}/>}
>
{row.email}
</Button>
</Link> : null
}
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
{DisplayDate(row.suspended_at)}
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
<Button
style={{ width: "100%", marginBottom: "0.5em" }}
variant="contained"
@@ -508,8 +496,8 @@ const BlockedUsers = () => {
Visualizar
</Button>
</Link>
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell>
+ </TableRow>
))}
</TableBody>
</TableData>
diff --git a/src/Admin/Pages/Pages/SubPages/Collections.js b/src/Admin/Pages/Pages/SubPages/Collections.js
index c35bbaac..524ee882 100644
--- a/src/Admin/Pages/Pages/SubPages/Collections.js
+++ b/src/Admin/Pages/Pages/SubPages/Collections.js
@@ -29,7 +29,7 @@ import MobilePageHeader from "../../../Components/Components/MobileComponents/Mo
import PageHeader, { StyledFilter } from "../../../Components/Components/PageHeader"
import FormInput from "Components/FormInput.js"
//imports from material ui
-import { withStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
import TableBody from "@material-ui/core/TableBody";
import PeopleRoundedIcon from "@material-ui/icons/PeopleRounded";
import TableCell from "@material-ui/core/TableCell";
@@ -54,28 +54,33 @@ import styled from 'styled-components'
import { Store } from 'Store'
-const StyledTableCell = withStyles((theme) => ({
- head: {
- backgroundColor: theme.palette.common.black,
- color: theme.palette.common.white,
- },
- body: {
- fontSize: 14,
- },
-}))(TableCell);
+export const useStylesCell = makeStyles((theme) => ({
+ root: {
+ color: props => props.contrast === "" ? "#666" : "white",
+ border: props => props.contrast === "" ? "1px solid #666" : "1px solid white",
+ "MuiTableRow-root": {
+ backgroundColor: props => props.contrast === "" ? "#eee" : "black",
+ }
+ }
+}));
-const StyledTableRow = withStyles((theme) => ({
+export const useStylesRow = makeStyles((theme) => ({
root: {
"&:nth-of-type(odd)": {
- backgroundColor: theme.palette.action.hover,
+ backgroundColor: props => props.contrast === "" ? "#eee" : "black",
},
+ backgroundColor: props => props.contrast === "" ? "" : "black",
+ border: props => props.contrast === "" ? "1px solid #666" : "1px solid white",
},
-}))(TableRow);
+}));
const Collections = () => {
const { state } = useContext(Store)
+ const classesCell = useStylesCell(state);
+ const classesRow = useStylesRow(state);
+
const ADD_ONE_LENGHT = [""];
const TOP_LABELS = [
"NOME",
@@ -384,6 +389,7 @@ const Collections = () => {
) : (
<>
<MobileList
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
title={row.name}
subtitle={row.privacy}
@@ -522,8 +528,8 @@ const Collections = () => {
<TableBody>
{items.map((row, index) =>
index === items.length - 1 ? (
- <StyledTableRow key={new Date().toISOString() + row.created_at}>
- <StyledTableCell>
+ <TableRow className={classesRow.root} key={new Date().toISOString() + row.created_at}>
+ <TableCell className={classesCell.root} colSpan={8}>
<Button
color="primary"
variant="text"
@@ -533,6 +539,7 @@ const Collections = () => {
onClick={() => {
setCurrPage(currPage + 1)
}}
+ style={state.contrast === "" ? {width: "100%"} : {width: "100%", color: "yellow", textDecoration: "underline yellow"}}
>
{isLoadingMoreItems ? (
<CircularProgress size={24} />
@@ -540,36 +547,36 @@ const Collections = () => {
"Carregar mais itens"
)}
</Button>
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell>
+ </TableRow>
) : (
- <StyledTableRow key={new Date().toISOString() + index}>
- <StyledTableCell component="th" scope="row">
+ <TableRow className={classesRow.root} key={new Date().toISOString() + index}>
+ <TableCell className={classesCell.root} component="th" scope="row">
{row.name}
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
<div
dangerouslySetInnerHTML={{ __html: row.description }}
></div>
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
{row.owner ? row.owner.name : "Sem dados"}
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
{DisplayDate(row.created_at)}
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
{DisplayDate(row.updated_at)}
- </StyledTableCell>
- <StyledTableCell align="right">{row.privacy}</StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">{row.privacy}</TableCell>
+ <TableCell className={classesCell.root} align="right">
<Link to={`/admin/Collection?collection=${row.id}`}>
<IconButton>
- <VisibilityIcon style={{ fill: "#00bcd4" }} />
+ <VisibilityIcon style={{ fill: state.contrast === "" ? "#00bcd4" : "yellow" }} />
</IconButton>
</Link>
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
{isLoadingToDelete === index ? (
<CircularProgress size={24} color="primary" />
) : (
@@ -579,11 +586,11 @@ const Collections = () => {
HandleStateCircularProgress(index);
}}
>
- <DeleteIcon style={{ fill: "#FF0000" }} />
+ <DeleteIcon style={{ fill: state.contrast === "" ? "#FF0000" : "yellow" }} />
</IconButton>
)}
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell>
+ </TableRow>
)
)}
</TableBody>
diff --git a/src/Admin/Pages/Pages/SubPages/CommunityQuestions.js b/src/Admin/Pages/Pages/SubPages/CommunityQuestions.js
index 81b29756..69f9b9c4 100644
--- a/src/Admin/Pages/Pages/SubPages/CommunityQuestions.js
+++ b/src/Admin/Pages/Pages/SubPages/CommunityQuestions.js
@@ -29,9 +29,8 @@ import MobileList from "../../../Components/Components/MobileComponents/SimpleLi
import PageHeader, { StyledFilter } from "../../../Components/Components/PageHeader"
import FormInput from "Components/FormInput.js"
import { Store } from 'Store'
-import { StyledLoadMoreButton, StyledDivButton } from "./Collections.js";
+import { StyledLoadMoreButton, StyledDivButton, useStylesCell, useStylesRow } from "./Collections.js";
//imports from material ui
-import { withStyles } from "@material-ui/core/styles";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableRow from "@material-ui/core/TableRow";
@@ -47,28 +46,13 @@ import ContactSupportRoundedIcon from "@material-ui/icons/ContactSupportRounded"
//routers
import { Link } from 'react-router-dom';
-const StyledTableCell = withStyles((theme) => ({
- head: {
- backgroundColor: theme.palette.common.black,
- color: theme.palette.common.white,
- },
- body: {
- fontSize: 14,
- },
-}))(TableCell);
-
-const StyledTableRow = withStyles((theme) => ({
- root: {
- "&:nth-of-type(odd)": {
- backgroundColor: theme.palette.action.hover,
- },
- },
-}))(TableRow);
-
const CommunityQuestion = () => {
const { state } = useContext(Store)
+ const classesCell = useStylesCell(state);
+ const classesRow = useStylesRow(state);
+
const ADD_ONE_LENGHT = [""];
const TOP_LABELS = [
"ID",
@@ -330,6 +314,7 @@ const CommunityQuestion = () => {
) : (
<>
<MobileList
+ contrast={state.contrast}
key={index}
title={row.name}
subtitle={row.id}
@@ -347,8 +332,9 @@ const CommunityQuestion = () => {
<Link to={`/admin/sendEmail?email=${row.email}`} style={{ textDecoration: 'none' }}>
<Button
variant='text'
- color='primary'
- startIcon={<EmailRoundedIcon />}
+ color="primary"
+ style={state.contrast === "" ? {} : {color: "yellow", textDecoration: "underline yellow"}}
+ startIcon={<EmailRoundedIcon style={state.contrast === "" ? {color: "#666"} : {color: "white"}}/>}
>
{row.email}
</Button>
@@ -461,9 +447,9 @@ const CommunityQuestion = () => {
<TableBody>
{items.map((row, index) =>
index === items.length - 1 ? (
- <StyledTableRow key={row.created_at} style={{ padding: "1em" }}>
+ <TableRow className={classesRow.root} key={row.created_at} style={{ padding: "1em" }}>
{/* Button to load more data */}
- <StyledTableCell>
+ <TableCell className={classesCell.root} colspan={7}>
<Button
color="primary"
variant="text"
@@ -472,6 +458,7 @@ const CommunityQuestion = () => {
onClick={() => {
setCurrPage(currPage + 1)
}}
+ style={state.contrast === "" ? {width: "100%"} : {width: "100%", color: "yellow", textDecoration: "underline yellow"}}
>
{isLoadingMoreItems ? (
<CircularProgress size={24} />
@@ -479,44 +466,45 @@ const CommunityQuestion = () => {
"Carregar mais itens"
)}
</Button>
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell>
+ </TableRow>
) : (
- <StyledTableRow key={new Date().toISOString() + index}>
- <StyledTableCell component="th" scope="row">
+ <TableRow className={classesRow.root} key={new Date().toISOString() + index}>
+ <TableCell className={classesCell.root} component="th" scope="row">
{row.id}
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
{DisplayDate(row.created_at)}
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
{row.name}
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
{
row.email ?
<Link to={`/admin/sendEmail?email=${row.email}`} style={{ textDecoration: 'none' }}>
<Button
variant='text'
color='primary'
- startIcon={<EmailRoundedIcon />}
+ style={state.contrast === "" ? {} : {color: "yellow", textDecoration: "underline yellow"}}
+ startIcon={<EmailRoundedIcon style={{ fill: state.contrast === "" ? "#666" : "white" }}/>}
>
{row.email}
</Button>
</Link> : null
}
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
{row.message}
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
<Link to={`/admin/CommunityQuestion?question=${row.id}`}>
<IconButton>
- <VisibilityIcon style={{ fill: "#00bcd4" }} />
+ <VisibilityIcon style={{ fill: state.contrast === "" ? "#00bcd4" : "yellow" }} />
</IconButton>
</Link>
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell>
+ </TableRow>
)
)}
</TableBody>
diff --git a/src/Admin/Pages/Pages/SubPages/Complaints.js b/src/Admin/Pages/Pages/SubPages/Complaints.js
index 1eb512f6..de0eaa44 100644
--- a/src/Admin/Pages/Pages/SubPages/Complaints.js
+++ b/src/Admin/Pages/Pages/SubPages/Complaints.js
@@ -29,9 +29,8 @@ import MobilePageHeader from "../../../Components/Components/MobileComponents/Mo
import PageHeader, { StyledFilter } from "../../../Components/Components/PageHeader"
import FormInput from "Components/FormInput.js"
import { Store } from 'Store'
-import { StyledLoadMoreButton, StyledDivButton } from "./Collections.js";
+import { StyledLoadMoreButton, StyledDivButton, useStylesCell, useStylesRow } from "./Collections.js";
//imports from material ui
-import { withStyles } from "@material-ui/core/styles";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import MenuItem from "@material-ui/core/MenuItem";
@@ -47,31 +46,15 @@ import VisibilityIcon from "@material-ui/icons/Visibility";
import LaunchRoundedIcon from "@material-ui/icons/LaunchRounded";
//routers
import { Link } from "react-router-dom";
-import styled from "styled-components"
import AnnouncementRoundedIcon from "@material-ui/icons/AnnouncementRounded";
-const StyledTableCell = withStyles((theme) => ({
- head: {
- backgroundColor: theme.palette.common.black,
- color: theme.palette.common.white,
- },
- body: {
- fontSize: 14,
- },
-}))(TableCell);
-
-const StyledTableRow = withStyles((theme) => ({
- root: {
- "&:nth-of-type(odd)": {
- backgroundColor: theme.palette.action.hover,
- },
- },
-}))(TableRow);
-
const Complaints = () => {
const { state } = useContext(Store)
+ const classesCell = useStylesCell(state);
+ const classesRow = useStylesRow(state);
+
const WINDOW_WIDTH = window.innerWidth
const ADD_ONE_LENGHT = [""];
const PORTAL_MEC = "https://plataformaintegrada.mec.gov.br/";
@@ -164,7 +147,8 @@ const Complaints = () => {
style={{
textAlign: "center",
padding: "0.5em",
- backgroundColor: "#FA8072",
+ backgroundColor: state.contrast === "" ? "#FA8072" : "black",
+ border: state.contrast === "" ? "" : "1px solid white",
fontWeight: "500",
color: "#FFFAFA",
}}
@@ -180,7 +164,8 @@ const Complaints = () => {
style={{
textAlign: "center",
padding: "0.5em",
- backgroundColor: "#FF8C00",
+ backgroundColor: state.contrast === "" ? "#FF8C00" : "black",
+ border: state.contrast === "" ? "" : "1px solid white",
fontWeight: "500",
color: "#FFFAFA",
}}
@@ -194,7 +179,8 @@ const Complaints = () => {
style={{
textAlign: "center",
padding: "0.5em",
- backgroundColor: "#228B22",
+ backgroundColor: state.contrast === "" ? "#228B22" : "black",
+ border: state.contrast === "" ? "" : "1px solid white",
fontWeight: "500",
color: "#FFFAFA",
}}
@@ -424,6 +410,7 @@ const Complaints = () => {
) : (
<>
<MobileList
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
title={row.complainable_type}
subtitle={row.id}
@@ -572,9 +559,9 @@ const Complaints = () => {
<TableBody>
{items.map((row, index) =>
index === items.length - 1 ? (
- <StyledTableRow key={new Date().toISOString() + row.created_at}>
+ <TableRow className={classesRow.root} key={new Date().toISOString() + row.created_at}>
{/* Button to load more data */}
- <StyledTableCell>
+ <TableCell className={classesCell.root} colspan={8}>
<Button
color="primary"
variant="text"
@@ -584,6 +571,7 @@ const Complaints = () => {
onClick={() => {
setCurrPage(currPage + 1)
}}
+ style={state.contrast === "" ? {width: "100%"} : {width: "100%", color: "yellow", textDecoration: "underline yellow"}}
>
{isLoadingMoreItems ? (
<CircularProgress size={24} />
@@ -591,40 +579,40 @@ const Complaints = () => {
"Carregar mais itens"
)}
</Button>
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell>
+ </TableRow>
) : (
- <StyledTableRow
+ <TableRow className={classesRow.root}
key={new Date().toISOString() + index}
style={{ flex: 1, width: "100%" }}
>
- <StyledTableCell component="th" scope="row">
+ <TableCell className={classesCell.root} component="th" scope="row">
{ComplaintStatus(row.state, row.complainable_type)}
- </StyledTableCell>
- <StyledTableCell align="right">{row.id}</StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">{row.id}</TableCell>
+ <TableCell className={classesCell.root} align="right">
{row.description}
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
{row.complainable_id}
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
{row.complainable_type}
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
{DisplayDate(row.created_at)}
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
<Link to={`/admin/complaint?id=${row.id}`}>
<IconButton
onClick={() => {
}}
>
- <VisibilityIcon style={{ fill: "#00bcd4" }} />
+ <VisibilityIcon style={{ fill: state.contrast === "" ? "#00bcd4" : "yellow" }} />
</IconButton>
</Link>
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
<Button
variant="text"
secondary={true}
@@ -650,8 +638,8 @@ const Complaints = () => {
MEC RED
</a>
</Button>
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell>
+ </TableRow>
)
)}
</TableBody>
diff --git a/src/Admin/Pages/Pages/SubPages/EducationalObjects.js b/src/Admin/Pages/Pages/SubPages/EducationalObjects.js
index cf6397b6..f13b791f 100644
--- a/src/Admin/Pages/Pages/SubPages/EducationalObjects.js
+++ b/src/Admin/Pages/Pages/SubPages/EducationalObjects.js
@@ -28,7 +28,7 @@ import MobilePageHeader from "../../../Components/Components/MobileComponents/Mo
import PageHeader, { StyledFilter } from "../../../Components/Components/PageHeader"
import FormInput from "Components/FormInput.js"
import { Store } from 'Store'
-import { StyledLoadMoreButton, StyledDivButton } from './Collections';
+import { StyledLoadMoreButton, StyledDivButton, useStylesCell, useStylesRow } from './Collections';
// Imports about icon
import FilterListRoundedIcon from "@material-ui/icons/FilterListRounded";
import AddRoundedIcon from "@material-ui/icons/AddRounded";
@@ -40,7 +40,6 @@ import IconButton from "@material-ui/core/IconButton";
import VisibilityIcon from "@material-ui/icons/Visibility";
import DeleteIcon from "@material-ui/icons/Delete";
// Import from material-ui
-import { withStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";
import Grid from "@material-ui/core/Grid";
import { CircularProgress } from "@material-ui/core";
@@ -52,28 +51,13 @@ import { Url, DeleteFilter } from "../../../Filters";
import { Link } from 'react-router-dom';
import MenuBookRoundedIcon from "@material-ui/icons/MenuBookRounded";
-const StyledTableCell = withStyles((theme) => ({
- head: {
- backgroundColor: theme.palette.common.black,
- color: theme.palette.common.white,
- },
- body: {
- fontSize: 14,
- },
-}))(TableCell);
-
-const StyledTableRow = withStyles((theme) => ({
- root: {
- "&:nth-of-type(odd)": {
- backgroundColor: theme.palette.action.hover,
- },
- },
-}))(TableRow);
-
const EducationalObjects = () => {
const { state } = useContext(Store)
+ const classesCell = useStylesCell(state);
+ const classesRow = useStylesRow(state);
+
const WINDOW_WIDTH = window.innerWidth
const ADD_ONE_LENGHT = [""];
@@ -394,6 +378,7 @@ const EducationalObjects = () => {
) : (
<>
<MobileList
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
title={row.name}
subtitle={row.id}
@@ -516,9 +501,9 @@ const EducationalObjects = () => {
<TableBody>
{items.map((row, index) =>
index === items.length - 1 ? (
- <StyledTableRow key={new Date().toISOString() + row.created_at}>
+ <TableRow className={classesRow.root} key={new Date().toISOString() + row.created_at}>
{/* Button to load more data */}
- <StyledTableCell>
+ <TableCell className={classesCell.root} colspan={7}>
<Button
color="primary"
variant="text"
@@ -529,6 +514,7 @@ const EducationalObjects = () => {
onClick={() => {
setCurrPage(currPage + 1)
}}
+ style={state.contrast === "" ? {width: "100%"} : {width: "100%", color: "yellow", textDecoration: "underline yellow"}}
>
{isLoadingMoreItems ? (
<CircularProgress size={24} />
@@ -536,33 +522,33 @@ const EducationalObjects = () => {
"Carregar mais itens"
)}
</Button>
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell>
+ </TableRow>
) : (
- <StyledTableRow key={new Date().toISOString() + index}>
- <StyledTableCell component="th" scope="row">
+ <TableRow className={classesRow.root} key={new Date().toISOString() + index}>
+ <TableCell className={classesCell.root} component="th" scope="row">
{DisplayDate(row.created_at)}
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
{row.name}
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
{row.description}
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
{row.author}
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
{row.score}
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
<Link to={`/admin/learningObject?learnObj=${row.id}`}>
<IconButton>
- <VisibilityIcon style={{ fill: "#00bcd4" }} />
+ <VisibilityIcon style={{ fill: state.contrast === "" ? "#00bcd4" : "yellow" }} />
</IconButton>
</Link>
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
{isLoadingToDelete === index ? (
<CircularProgress size={24} color="primary" />
) : (
@@ -572,11 +558,11 @@ const EducationalObjects = () => {
HandleStateCircularProgress(index);
}}
>
- <DeleteIcon style={{ fill: "#FF0000" }} />
+ <DeleteIcon style={{ fill: state.contrast === "" ? "#FF0000" : "yellow" }}/>
</IconButton>
)}
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell>
+ </TableRow>
)
)}
</TableBody>
diff --git a/src/Admin/Pages/Pages/SubPages/Institutions.js b/src/Admin/Pages/Pages/SubPages/Institutions.js
index 43114af6..b578806d 100644
--- a/src/Admin/Pages/Pages/SubPages/Institutions.js
+++ b/src/Admin/Pages/Pages/SubPages/Institutions.js
@@ -25,7 +25,7 @@ import LoadingSpinner from '../../../../Components/LoadingSpinner';
import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
import MobilePageHeader from "../../../Components/Components/MobileComponents/MobilePageHeader"
import PageHeader, { StyledFilter } from "../../../Components/Components/PageHeader"
-import { StyledLoadMoreButton, StyledDivButton } from "./Collections.js";
+import { StyledLoadMoreButton, StyledDivButton, useStylesCell, useStylesRow } from "./Collections.js";
import { Store } from 'Store'
// Imports about icon
import FilterListRoundedIcon from "@material-ui/icons/FilterListRounded";
@@ -38,7 +38,6 @@ import IconButton from "@material-ui/core/IconButton";
import VisibilityIcon from "@material-ui/icons/Visibility";
import DeleteIcon from "@material-ui/icons/Delete";
// Import from material-ui
-import { withStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";
import Grid from "@material-ui/core/Grid";
import { CircularProgress } from "@material-ui/core";
@@ -51,28 +50,13 @@ import { Url, DeleteFilter } from "../../../Filters";
import { Link, useHistory } from 'react-router-dom';
import AccountBalanceRoundedIcon from "@material-ui/icons/AccountBalanceRounded";
-const StyledTableCell = withStyles((theme) => ({
- head: {
- backgroundColor: theme.palette.common.black,
- color: theme.palette.common.white,
- },
- body: {
- fontSize: 14,
- },
-}))(TableCell);
-
-const StyledTableRow = withStyles((theme) => ({
- root: {
- "&:nth-of-type(odd)": {
- backgroundColor: theme.palette.action.hover,
- },
- },
-}))(TableRow);
-
const Institutions = () => {
const { state } = useContext(Store)
+ const classesCell = useStylesCell(state);
+ const classesRow = useStylesRow(state);
+
const WINDOW_WIDTH = window.innerWidth
const ADD_ONE_LENGHT = [""];
@@ -404,6 +388,7 @@ const Institutions = () => {
) : (
<>
<MobileList
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
title={row.name}
subtitle={row.id}
@@ -533,9 +518,9 @@ const Institutions = () => {
<TableBody>
{items.map((row, index) =>
index === items.length - 1 ? (
- <StyledTableRow key={new Date().toISOString() + row.created_at}>
+ <TableRow className={classesRow.root} key={new Date().toISOString() + row.created_at}>
{/* Button to load more data */}
- <StyledTableCell>
+ <TableCell className={classesCell.root} colspan={7}>
<Button
color="primary"
variant="text"
@@ -544,6 +529,7 @@ const Institutions = () => {
onClick={() => {
setCurrPage(currPage + 1)
}}
+ style={state.contrast === "" ? {width: "100%"} : {width: "100%", color: "yellow", textDecoration: "underline yellow"}}
>
{isLoadingMoreItems ? (
<CircularProgress size={24} />
@@ -551,29 +537,29 @@ const Institutions = () => {
"Carregar mais itens"
)}
</Button>
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell>
+ </TableRow>
) : (
- <StyledTableRow key={new Date().toISOString() + index}>
- <StyledTableCell component="th" scope="row">
+ <TableRow className={classesRow.root} key={new Date().toISOString() + index}>
+ <TableCell className={classesCell.root} component="th" scope="row">
{row.id}
- </StyledTableCell>
- <StyledTableCell align="right">{row.name}</StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">{row.name}</TableCell>
+ <TableCell className={classesCell.root} align="right">
{row.description}
- </StyledTableCell>
- <StyledTableCell align="right">{row.city}</StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">{row.city}</TableCell>
+ <TableCell className={classesCell.root} align="right">
{row.country}
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
<Link to={`/admin/institution?institution=${row.id}`}>
<IconButton>
- <VisibilityIcon style={{ fill: "#00bcd4" }} />
+ <VisibilityIcon style={{ fill: state.contrast === "" ? "#00bcd4" : "yellow" }} />
</IconButton>
</Link>
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
{isLoadingToDelete === index ? (
<CircularProgress size={24} color="primary" />
) : (
@@ -583,11 +569,11 @@ const Institutions = () => {
HandleStateCircularProgress(index);
}}
>
- <DeleteIcon style={{ fill: "#FF0000" }} />
+ <DeleteIcon style={{ fill: state.contrast === "" ? "#FF0000" : "yellow" }} />
</IconButton>
)}
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell>
+ </TableRow>
)
)}
</TableBody>
diff --git a/src/Admin/Pages/Pages/SubPages/Languages.js b/src/Admin/Pages/Pages/SubPages/Languages.js
index 49d69ce8..a82e0d0d 100644
--- a/src/Admin/Pages/Pages/SubPages/Languages.js
+++ b/src/Admin/Pages/Pages/SubPages/Languages.js
@@ -29,9 +29,8 @@ import MobileList from "../../../Components/Components/MobileComponents/SimpleLi
import MobilePageHeader from "../../../Components/Components/MobileComponents/MobilePageHeader"
import PageHeader from "../../../Components/Components/PageHeader"
import { Store } from 'Store'
-import { StyledLoadMoreButton, StyledDivButton } from './Collections';
+import { StyledLoadMoreButton, StyledDivButton, useStylesCell, useStylesRow } from './Collections';
//imports from material ui
-import { withStyles } from '@material-ui/core/styles';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableRow from '@material-ui/core/TableRow';
@@ -46,28 +45,13 @@ import DeleteRoundedIcon from '@material-ui/icons/DeleteRounded';
import { Link, useHistory } from 'react-router-dom';
import LanguageRoundedIcon from "@material-ui/icons/LanguageRounded";
-const StyledTableCell = withStyles((theme) => ({
- head: {
- backgroundColor: theme.palette.common.black,
- color: theme.palette.common.white,
- },
- body: {
- fontSize: 14,
- },
-}))(TableCell);
-
-const StyledTableRow = withStyles((theme) => ({
- root: {
- '&:nth-of-type(odd)': {
- backgroundColor: theme.palette.action.hover,
- },
- },
-}))(TableRow);
-
const Languages = () => {
const { state } = useContext(Store)
+ const classesCell = useStylesCell(state);
+ const classesRow = useStylesRow(state);
+
const ADD_ONE_LENGHT = [""];
const TOP_LABELS = ['ID', 'NOME', 'CODE', 'EDITAR', 'DELETAR'] //Labels from Table
const WINDOW_WIDTH = window.innerWidth
@@ -274,6 +258,7 @@ const Languages = () => {
) : (
<>
<MobileList
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
title={row.name}
subtitle={row.id}
@@ -359,9 +344,9 @@ const Languages = () => {
<TableBody>
{items.map((row, index) => (
index === items.length - 1 ?
- <StyledTableRow key={new Date().toISOString() + row.created_at}>
+ <TableRow className={classesRow.root} key={new Date().toISOString() + row.created_at}>
{/* Button to load more data */}
- <StyledTableCell>
+ <TableCell className={classesCell.root} colspan={5}>
<Button
color='primary'
variant='text'
@@ -371,28 +356,29 @@ const Languages = () => {
onClick={() => {
setCurrPage(currPage + 1)
}}
+ style={state.contrast === "" ? {width: "100%"} : {width: "100%", color: "yellow", textDecoration: "underline yellow"}}
>
{
isLoadingMoreItems ? <CircularProgress size={24} /> : 'Carregar mais itens'
}
</Button>
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell>
+ </TableRow>
:
- <StyledTableRow key={new Date().toISOString() + index}>
- <StyledTableCell component="th" scope="row">{row.id}</StyledTableCell>
- <StyledTableCell align="right">{row.name}</StyledTableCell>
- <StyledTableCell align="right">{row.code}</StyledTableCell>
- <StyledTableCell align="right">
+ <TableRow className={classesRow.root} key={new Date().toISOString() + index}>
+ <TableCell className={classesCell.root} component="th" scope="row">{row.id}</TableCell>
+ <TableCell className={classesCell.root} align="right">{row.name}</TableCell>
+ <TableCell className={classesCell.root} align="right">{row.code}</TableCell>
+ <TableCell className={classesCell.root} align="right">
<Link to={`/admin/languageEdit?language=${row.id}`}>
<IconButton>
- <EditRoundedIcon style={{ fill: '#00bcd4' }} />
+ <EditRoundedIcon style={{ fill: state.contrast === "" ? "#00bcd4" : "yellow" }} />
</IconButton>
</Link>
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
{isLoadingToDelete === index ? (
<CircularProgress size={24} color="primary" />
) : (
@@ -402,11 +388,11 @@ const Languages = () => {
HandleStateCircularProgress(index);
}}
>
- <DeleteRoundedIcon style={{ fill: "#FF0000" }} />
+ <DeleteRoundedIcon style={{ fill: state.contrast === "" ? "#FF0000" : "yellow" }} />
</IconButton>
)}
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell>
+ </TableRow>
))}
</TableBody>
</TableData>
diff --git a/src/Admin/Pages/Pages/SubPages/NoteVariables.js b/src/Admin/Pages/Pages/SubPages/NoteVariables.js
index 44276e4b..beca23ce 100644
--- a/src/Admin/Pages/Pages/SubPages/NoteVariables.js
+++ b/src/Admin/Pages/Pages/SubPages/NoteVariables.js
@@ -17,7 +17,6 @@ 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, { useEffect, useState, useContext } from 'react';
//Material ui componets
-import { withStyles } from '@material-ui/core/styles';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableRow from '@material-ui/core/TableRow';
@@ -36,7 +35,7 @@ import LoadingSpinner from '../../../../Components/LoadingSpinner';
import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
import MobilePageHeader from "../../../Components/Components/MobileComponents/MobilePageHeader"
import PageHeader from "../../../Components/Components/PageHeader"
-import { StyledLoadMoreButton, StyledDivButton } from './Collections';
+import { StyledLoadMoreButton, StyledDivButton, useStylesCell, useStylesRow } from './Collections';
import { Store } from 'Store'
//Services
import { getRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
@@ -45,28 +44,13 @@ import { Url } from '../../../Filters';
import { Link } from 'react-router-dom';
import TrendingUpRoundedIcon from "@material-ui/icons/TrendingUpRounded";
-const StyledTableCell = withStyles((theme) => ({
- head: {
- backgroundColor: theme.palette.common.black,
- color: theme.palette.common.white,
- },
- body: {
- fontSize: 14,
- },
-}))(TableCell);
-
-const StyledTableRow = withStyles((theme) => ({
- root: {
- '&:nth-of-type(odd)': {
- backgroundColor: theme.palette.action.hover,
- },
- },
-}))(TableRow);
-
const NoteVariables = () => {
const { state } = useContext(Store)
+ const classesCell = useStylesCell(state);
+ const classesRow = useStylesRow(state);
+
const WINDOW_WIDTH = window.innerWidth
const ADD_ONE_LENGHT = [""];
@@ -204,6 +188,7 @@ const NoteVariables = () => {
) : (
<>
<MobileList
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
title={row.name}
subtitle={row.id}
@@ -274,9 +259,9 @@ const NoteVariables = () => {
<TableBody>
{items.map((row, index) => (
index === items.length - 1 ?
- <StyledTableRow key={new Date().toISOString() + row.created_at}>
+ <TableRow className={classesRow.root} key={new Date().toISOString() + row.created_at}>
{/* Button to load more data */}
- <StyledTableCell>
+ <TableCell className={classesCell.root} colspan={7}>
<Button
color='primary'
variant='text'
@@ -285,27 +270,28 @@ const NoteVariables = () => {
onClick={() => {
setCurrPage(currPage + 1)
}}
+ style={state.contrast === "" ? {width: "100%"} : {width: "100%", color: "yellow", textDecoration: "underline yellow"}}
>
{
isLoadingMoreItems ? <CircularProgress /> : 'Carregar mais itens'
}
</Button>
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell>
+ </TableRow>
:
- <StyledTableRow key={new Date().toISOString() + index}>
- <StyledTableCell component="th" scope="row">{row.id}</StyledTableCell>
- <StyledTableCell align="right">{row.name}</StyledTableCell>
- <StyledTableCell align="right">{row.code}</StyledTableCell>
- <StyledTableCell align="right">{row.weight}</StyledTableCell>
- <StyledTableCell align="right">
+ <TableRow className={classesRow.root} key={new Date().toISOString() + index}>
+ <TableCell className={classesCell.root} component="th" scope="row">{row.id}</TableCell>
+ <TableCell className={classesCell.root} align="right">{row.name}</TableCell>
+ <TableCell className={classesCell.root} align="right">{row.code}</TableCell>
+ <TableCell className={classesCell.root} align="right">{row.weight}</TableCell>
+ <TableCell className={classesCell.root} align="right">
{
- row.active ? <CheckRoundedIcon style={{ fill: '#3CB371' }} /> : <BlockRoundedIcon style={{ fill: '#FA8072' }} />
+ row.active ? <CheckRoundedIcon style={{ fill: state.contrast === "" ? "#3CB371" : "white" }} /> : <BlockRoundedIcon style={{ fill: state.contrast === "" ? "#FA8072" : "white" }} />
}
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
{
row['score_type'].map((item) => (
<Typography key={item} style={{ fontSize: 14 }}>
@@ -313,15 +299,15 @@ const NoteVariables = () => {
</Typography>
))
}
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
<Link to={`/admin/noteVar?id=${row.id}`}>
<IconButton>
- <VisibilityIcon style={{ fill: '#00bcd4' }} />
+ <VisibilityIcon style={{ fill: state.contrast === "" ? "#00bcd4" : "yellow" }} />
</IconButton>
</Link>
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell>
+ </TableRow>
))}
</TableBody>
</TableData>
diff --git a/src/Admin/Pages/Pages/SubPages/Permissions.js b/src/Admin/Pages/Pages/SubPages/Permissions.js
index b6f3a489..da28aae8 100644
--- a/src/Admin/Pages/Pages/SubPages/Permissions.js
+++ b/src/Admin/Pages/Pages/SubPages/Permissions.js
@@ -28,10 +28,9 @@ import { getRequest, deleteRequest } from '../../../../Components/HelperFunction
import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
import MobilePageHeader from "../../../Components/Components/MobileComponents/MobilePageHeader"
import PageHeader from "../../../Components/Components/PageHeader"
-import { StyledLoadMoreButton, StyledDivButton } from './Collections';
+import { StyledLoadMoreButton, StyledDivButton, useStylesCell, useStylesRow } from './Collections';
import { Store } from 'Store'
//imports from material ui
-import { withStyles } from '@material-ui/core/styles';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableRow from '@material-ui/core/TableRow';
@@ -45,28 +44,13 @@ import DeleteRoundedIcon from '@material-ui/icons/DeleteRounded';
import { Link, useHistory } from 'react-router-dom';
import AccountCircleRoundedIcon from "@material-ui/icons/AccountCircleRounded"
-const StyledTableCell = withStyles((theme) => ({
- head: {
- backgroundColor: theme.palette.common.black,
- color: theme.palette.common.white,
- },
- body: {
- fontSize: 14,
- },
-}))(TableCell);
-
-const StyledTableRow = withStyles((theme) => ({
- root: {
- '&:nth-of-type(odd)': {
- backgroundColor: theme.palette.action.hover,
- },
- },
-}))(TableRow);
-
const UserPermissions = () => {
const { state } = useContext(Store)
+ const classesCell = useStylesCell(state);
+ const classesRow = useStylesRow(state);
+
const ADD_ONE_LENGHT = [""];
const TOP_LABELS = ['ID', 'NOME', 'DESCRIÇÃO', 'AÇÕES'] //Labels from Table
const WINDOW_WIDTH = window.innerWidth
@@ -278,6 +262,7 @@ const UserPermissions = () => {
) : (
<>
<MobileList
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
title={row.name}
subtitle={row.id}
@@ -362,9 +347,9 @@ const UserPermissions = () => {
<TableBody>
{items.map((row, index) => (
index === items.length - 1 ?
- <StyledTableRow key={new Date().toISOString() + row.created_at}>
+ <TableRow className={classesRow.root} key={new Date().toISOString() + row.created_at}>
{/* Button to load more data */}
- <StyledTableCell>
+ <TableCell className={classesCell.root} colspan={4}>
<Button
color='primary'
variant='text'
@@ -374,21 +359,22 @@ const UserPermissions = () => {
onClick={() => {
setCurrPage(currPage + 1)
}}
+ style={state.contrast === "" ? {width: "100%"} : {width: "100%", color: "yellow", textDecoration: "underline yellow"}}
>
{
isLoadingMoreItems ? <CircularProgress size={24} /> : 'Carregar mais itens'
}
</Button>
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell>
+ </TableRow>
:
- <StyledTableRow key={new Date().toISOString() + index}>
- <StyledTableCell component="th" scope="row">{row.id}</StyledTableCell>
- <StyledTableCell align="right">{row.name}</StyledTableCell>
- <StyledTableCell align="right">{row.description}</StyledTableCell>
- <StyledTableCell align="right">
+ <TableRow className={classesRow.root} key={new Date().toISOString() + index}>
+ <TableCell className={classesCell.root} component="th" scope="row">{row.id}</TableCell>
+ <TableCell className={classesCell.root} align="right">{row.name}</TableCell>
+ <TableCell className={classesCell.root} align="right">{row.description}</TableCell>
+ <TableCell className={classesCell.root} align="right">
<Link to={`/admin/EditPermissions?role=${row.id}`}>
<Button
style={{ width: "100%", marginBottom: "0.5em" }}
@@ -417,8 +403,8 @@ const UserPermissions = () => {
</Button>
)}
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell>
+ </TableRow>
))}
</TableBody>
</TableData>
diff --git a/src/Admin/Pages/Pages/SubPages/Questions.js b/src/Admin/Pages/Pages/SubPages/Questions.js
index bd7a444a..0bb7416b 100644
--- a/src/Admin/Pages/Pages/SubPages/Questions.js
+++ b/src/Admin/Pages/Pages/SubPages/Questions.js
@@ -27,10 +27,9 @@ import { getRequest, putRequest } from '../../../../Components/HelperFunctions/g
import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
import MobilePageHeader from "../../../Components/Components/MobileComponents/MobilePageHeader"
import PageHeader from "../../../Components/Components/PageHeader"
-import { StyledLoadMoreButton, StyledDivButton } from './Collections';
+import { StyledLoadMoreButton, StyledDivButton, useStylesCell, useStylesRow } from './Collections';
import { Store } from 'Store'
//imports from material ui
-import { withStyles } from '@material-ui/core/styles';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableRow from '@material-ui/core/TableRow';
@@ -43,28 +42,13 @@ import Switch from '@material-ui/core/Switch';
import { useHistory } from 'react-router-dom';
import HelpRoundedIcon from "@material-ui/icons/HelpRounded";
-const StyledTableCell = withStyles((theme) => ({
- head: {
- backgroundColor: theme.palette.common.black,
- color: theme.palette.common.white,
- },
- body: {
- fontSize: 14,
- },
-}))(TableCell);
-
-const StyledTableRow = withStyles((theme) => ({
- root: {
- '&:nth-of-type(odd)': {
- backgroundColor: theme.palette.action.hover,
- },
- },
-}))(TableRow);
-
const Questions = () => {
const { state } = useContext(Store)
+ const classesCell = useStylesCell(state);
+ const classesRow = useStylesRow(state);
+
const ADD_ONE_LENGHT = [""];
const WINDOW_WIDTH = window.innerWidth
const TOP_LABELS = ['ID', 'CRIAÇÃO EM', 'DESCRIÇÃO', 'STATUS', 'ATUALIZAÇÃO EM'] //Labels from Table
@@ -278,6 +262,7 @@ const Questions = () => {
) : (
<>
<MobileList
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
title={row.id}
subtitle={DisplayDate(row.created_at)}
@@ -369,9 +354,9 @@ const Questions = () => {
<TableBody>
{items.map((row, index) => (
index === items.length - 1 ?
- <StyledTableRow key={new Date().toISOString() + row.created_at}>
+ <TableRow className={classesRow.root} key={new Date().toISOString() + row.created_at}>
{/* Button to load more data */}
- <StyledTableCell>
+ <TableCell className={classesCell.root} colspan={5}>
<Button
color='primary'
variant='text'
@@ -381,21 +366,22 @@ const Questions = () => {
onClick={() => {
setCurrPage(currPage + 1)
}}
+ style={state.contrast === "" ? {width: "100%"} : {width: "100%", color: "yellow", textDecoration: "underline yellow"}}
>
{
isLoadingMoreItems ? <CircularProgress size={24} /> : 'Carregar mais itens'
}
</Button>
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell >
+ </TableRow>
:
- <StyledTableRow key={new Date().toISOString() + index}>
- <StyledTableCell component="th" scope="row">{row.id}</StyledTableCell>
- <StyledTableCell align="right">{DisplayDate(row.created_at)}</StyledTableCell>
- <StyledTableCell align="right">{row.description}</StyledTableCell>
- <StyledTableCell align="right">
+ <TableRow className={classesRow.root} key={new Date().toISOString() + index}>
+ <TableCell className={classesCell.root} component="th" scope="row">{row.id}</TableCell >
+ <TableCell className={classesCell.root} align="right">{DisplayDate(row.created_at)}</TableCell >
+ <TableCell className={classesCell.root} align="right">{row.description}</TableCell >
+ <TableCell className={classesCell.root} align="right">
{
row.status === 'active' ?
<Switch
@@ -413,9 +399,9 @@ const Questions = () => {
color="primary"
/>
}
- </StyledTableCell>
- <StyledTableCell align="right">{DisplayDate(row.updated_at)}</StyledTableCell>
- </StyledTableRow>
+ </TableCell >
+ <TableCell className={classesCell.root} align="right">{DisplayDate(row.updated_at)}</TableCell >
+ </TableRow>
))}
</TableBody>
</TableData>
diff --git a/src/Admin/Pages/Pages/SubPages/Rating.js b/src/Admin/Pages/Pages/SubPages/Rating.js
index c7872d7e..5c2d6189 100644
--- a/src/Admin/Pages/Pages/SubPages/Rating.js
+++ b/src/Admin/Pages/Pages/SubPages/Rating.js
@@ -18,7 +18,6 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
import React, { useEffect, useState, useContext } from 'react';
//Material ui componets
-import { withStyles } from '@material-ui/core/styles';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableRow from '@material-ui/core/TableRow';
@@ -36,7 +35,7 @@ import LoadingSpinner from '../../../../Components/LoadingSpinner';
import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
import MobilePageHeader from "../../../Components/Components/MobileComponents/MobilePageHeader"
import PageHeader from "../../../Components/Components/PageHeader"
-import { StyledLoadMoreButton, StyledDivButton } from './Collections';
+import { StyledLoadMoreButton, StyledDivButton, useStylesCell, useStylesRow } from './Collections';
import { Store } from 'Store'
//Services
import AlertDialog from "../../../Components/Components/AlertDialog";
@@ -47,28 +46,13 @@ import { getRequest, deleteRequest } from '../../../../Components/HelperFunction
import { Link, useHistory } from 'react-router-dom';
import StarRoundedIcon from "@material-ui/icons/StarRounded";
-const StyledTableCell = withStyles((theme) => ({
- head: {
- backgroundColor: theme.palette.common.black,
- color: theme.palette.common.white,
- },
- body: {
- fontSize: 14,
- },
-}))(TableCell);
-
-const StyledTableRow = withStyles((theme) => ({
- root: {
- '&:nth-of-type(odd)': {
- backgroundColor: theme.palette.action.hover,
- },
- },
-}))(TableRow);
-
const Ratings = () => {
const { state } = useContext(Store)
+ const classesCell = useStylesCell(state);
+ const classesRow = useStylesRow(state);
+
const WINDOW_WIDTH = window.innerWidth
const ADD_ONE_LENGHT = [""];
@@ -274,6 +258,7 @@ const Ratings = () => {
) : (
<>
<MobileList
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
title={row.name}
subtitle={row.id}
@@ -358,9 +343,9 @@ const Ratings = () => {
<TableBody>
{items.map((row, index) => (
index === items.length - 1 ?
- <StyledTableRow key={new Date().toISOString() + row.created_at}>
+ <TableRow className={classesRow.root} key={new Date().toISOString() + row.created_at}>
{/* Button to load more data */}
- <StyledTableCell>
+ <TableCell className={classesCell.root} colspan={5}>
<Button
color='primary'
variant='text'
@@ -369,28 +354,29 @@ const Ratings = () => {
onClick={() => {
setCurrPage(currPage + 1)
}}
+ style={state.contrast === "" ? {width: "100%"} : {width: "100%", color: "yellow", textDecoration: "underline yellow"}}
>
{
isLoadingMoreItems ? <CircularProgress size={24} /> : 'Carregar mais itens'
}
</Button>
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell>
+ </TableRow>
:
- <StyledTableRow key={new Date().toISOString() + index}>
- <StyledTableCell component="th" scope="row">{row.id}</StyledTableCell>
- <StyledTableCell align="right">{row.name}</StyledTableCell>
- <StyledTableCell align="right">{row.description}</StyledTableCell>
- <StyledTableCell align="right">
+ <TableRow className={classesRow.root} key={new Date().toISOString() + index}>
+ <TableCell className={classesCell.root} component="th" scope="row">{row.id}</TableCell>
+ <TableCell className={classesCell.root} align="right">{row.name}</TableCell>
+ <TableCell className={classesCell.root} align="right">{row.description}</TableCell>
+ <TableCell className={classesCell.root} align="right">
<Link to={`/admin/Rating?rating=${row.id}`}>
<IconButton>
- <VisibilityIcon style={{ fill: '#00bcd4' }} />
+ <VisibilityIcon style={{ fill: state.contrast === "" ? "#00bcd4" : "yellow" }} />
</IconButton>
</Link>
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
{isLoadingToDelete === index ? (
<CircularProgress size={24} color="primary" />
) : (
@@ -400,11 +386,11 @@ const Ratings = () => {
HandleStateCircularProgress(index);
}}
>
- <DeleteRoundedIcon style={{ fill: "#FF0000" }} />
+ <DeleteRoundedIcon style={{ fill: state.contrast === "" ? "#FF0000" : "yellow" }} />
</IconButton>
)}
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell>
+ </TableRow>
))}
</TableBody>
</TableData>
diff --git a/src/Admin/Pages/Pages/SubPages/Users.js b/src/Admin/Pages/Pages/SubPages/Users.js
index f7ef6971..b9ac0df0 100644
--- a/src/Admin/Pages/Pages/SubPages/Users.js
+++ b/src/Admin/Pages/Pages/SubPages/Users.js
@@ -17,10 +17,8 @@ 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, { useEffect, useState, useContext } from 'react';
//Material ui componets
-import { withStyles } from '@material-ui/core/styles';
import TableBody from '@material-ui/core/TableBody';
import Grid from "@material-ui/core/Grid";
-import Paper from "@material-ui/core/Paper";
import TableCell from '@material-ui/core/TableCell';
import TableRow from '@material-ui/core/TableRow';
import IconButton from '@material-ui/core/IconButton';
@@ -39,7 +37,7 @@ import MobilePageHeader from "../../../Components/Components/MobileComponents/Mo
import PageHeader, { StyledFilter } from "../../../Components/Components/PageHeader"
import FormInput from "Components/FormInput.js"
import { Store } from 'Store'
-import { StyledLoadMoreButton, StyledDivButton } from './Collections';
+import { StyledLoadMoreButton, StyledDivButton, useStylesCell, useStylesRow } from './Collections';
//Services
import { getRequest, putRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import { Url } from '../../../Filters';
@@ -53,28 +51,13 @@ import { apiDomain } from '../../../../env';
//Image Import
import { noAvatar } from "ImportImages.js";
-const StyledTableCell = withStyles((theme) => ({
- head: {
- backgroundColor: theme.palette.common.black,
- color: theme.palette.common.white,
- },
- body: {
- fontSize: 14,
- },
-}))(TableCell);
-
-const StyledTableRow = withStyles((theme) => ({
- root: {
- '&:nth-of-type(odd)': {
- backgroundColor: theme.palette.action.hover,
- },
- },
-}))(TableRow);
-
const Users = () => {
const { state } = useContext(Store)
+ const classesCell = useStylesCell(state);
+ const classesRow = useStylesRow(state);
+
const ADD_ONE_LENGHT = [''];
const WINDOW_WIDTH = window.innerWidth
@@ -353,6 +336,7 @@ const Users = () => {
) : (
<>
<MobileList
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
title={row.name}
subtitle={row.id}
@@ -378,8 +362,9 @@ const Users = () => {
<Link to={`/admin/sendEmail?email=${row.email}`} style={{ textDecoration: 'none' }}>
<Button
variant='text'
- color='primary'
- startIcon={<EmailRoundedIcon />}
+ color="primary"
+ style={state.contrast === "" ? {} : {color: "yellow", textDecoration: "underline yellow"}}
+ startIcon={<EmailRoundedIcon style={state.contrast === "" ? {color: "#666"} : {color: "white"}}/>}
>
{row.email}
</Button>
@@ -506,9 +491,9 @@ const Users = () => {
<TableBody>
{items.map((row, index) => (
index === items.length - 1 ?
- <StyledTableRow key={new Date().toISOString() + row.created_at}>
+ <TableRow className={classesRow.root} key={new Date().toISOString() + row.created_at}>
{/* Button to load more data */}
- <StyledTableCell>
+ <TableCell className={classesCell.root} colspan={8}>
<Button
color='primary'
variant='text'
@@ -517,34 +502,37 @@ const Users = () => {
onClick={() => {
setCurrPage(currPage + 1)
}}
+ style={state.contrast === "" ? {width: "100%"} : {width: "100%", color: "yellow", textDecoration: "underline yellow"}}
>
{
isLoadingMoreItems ? <CircularProgress size={24} /> : 'Carregar mais itens'
}
</Button>
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell>
+ </TableRow>
:
- <StyledTableRow key={new Date().toISOString() + index}>
- <StyledTableCell component="th" scope="row">{row.id}</StyledTableCell>
- <StyledTableCell align="right">{row.name}</StyledTableCell>
- <StyledTableCell align="right">{row.email ? row.email : ""}</StyledTableCell>
- <StyledTableCell align="right">
+ <TableRow className={classesRow.root} key={new Date().toISOString() + index}>
+ <TableCell className={classesCell.root} component="th" scope="row">{row.id}</TableCell>
+ <TableCell className={classesCell.root} align="right">{row.name}</TableCell>
+ <TableCell className={classesCell.root} align="right">{row.email ? row.email : ""}</TableCell>
+ <TableCell className={classesCell.root} align="right">
{DisplayDate(row.created_at)}
- </StyledTableCell>
- <StyledTableCell align="right">{row.score}</StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">{row.score}</TableCell>
+ <TableCell className={classesCell.root} align="right">
{
row.roles.map((chip) => (
<ChipDiv>
- <Chip label={chip.name} key={chip.id} />
+ <Chip label={chip.name} key={chip.id}
+ style={state.contrast === "" ? {backgroundColor: "#ddd", color: "black"} : {backgroundColor: "black", color: "white", border: "1px solid white"}}
+ />
</ChipDiv>
))
}
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
<Button
variant="contained"
color="primary"
@@ -553,15 +541,15 @@ const Users = () => {
>
Tornar publicador
</Button>
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
<Link to={`/admin/user?id=${row.id}`}>
<IconButton>
- <VisibilityIcon style={{ fill: '#00bcd4' }} />
+ <VisibilityIcon style={{ fill: state.contrast === "" ? "#00bcd4" : "yellow" }} />
</IconButton>
</Link>
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell>
+ </TableRow>
))}
</TableBody>
</TableData>
--
GitLab