diff --git a/package-lock.json b/package-lock.json
index 968b369cb5fe6dedc05daea768db458d2c3e4cf3..5fdb31796f1799db9b5ed5b01b469464a961da40 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11285,9 +11285,9 @@
"integrity": "sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A="
},
"path-parse": {
- "version": "1.0.7",
- "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
- "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
+ "version": "1.0.6",
+ "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
+ "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw=="
},
"path-to-regexp": {
"version": "1.8.0",
@@ -17491,9 +17491,9 @@
}
},
"url-parse": {
- "version": "1.5.3",
- "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.3.tgz",
- "integrity": "sha512-IIORyIQD9rvj0A4CLWsHkBBJuNqWpFQe224b6j9t/ABmquIS0qDU2pY6kl6AuOrL5OkCXHMCFNe1jBcuAggjvQ==",
+ "version": "1.5.1",
+ "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.1.tgz",
+ "integrity": "sha512-HOfCOUJt7iSYzEx/UqgtwKRMC6EU91NFhsCHMv9oM03VJcVo2Qrp8T8kI9D7amFf1cu+/3CEhgb3rF9zL7k85Q==",
"requires": {
"querystringify": "^2.1.1",
"requires-port": "^1.0.0"
diff --git a/package.json b/package.json
index e772e41cc80ac4ce0055060dd66958aea4bd59a3..b2d7301750402498b1c650e4656e05ddc5146d43 100644
--- a/package.json
+++ b/package.json
@@ -45,7 +45,7 @@
},
"scripts": {
"analyze": "NODE_PATH=src/ source-map-explorer 'build/static/js/*.js'",
- "start": "NODE_PATH=src/ PORT=5000 react-scripts start watch",
+ "start": "NODE_PATH=src/ PORT=4000 react-scripts start watch",
"build": "NODE_PATH=src/ react-scripts build",
"test": "NODE_PATH=src/ react-scripts test",
"eject": "NODE_PATH=src/ react-scripts eject"
diff --git a/src/Admin/Components/Components/AdminTemplate.js b/src/Admin/Components/Components/AdminTemplate.js
index 42be22cd3f334aa5f78e3c991a509b73267a6379..57fc2a2802bfb3c005b421d670465c36e352d1d8 100644
--- a/src/Admin/Components/Components/AdminTemplate.js
+++ b/src/Admin/Components/Components/AdminTemplate.js
@@ -18,6 +18,7 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
import React, { useContext } from "react";
import { Store } from 'Store'
+import styled from 'styled-components'
const Unauthorized = React.lazy(() => import('./Unauthorized'));
const AppBarAdmin = React.lazy(() => import('./AppBar'));
@@ -33,10 +34,10 @@ const AdminTemplate = (props) => {
const roles = [...state.currentUser.roles];
for (let i = 0; i < roles.length; i++)
if (roles[i].name === 'admin' || roles[i].name === 'editor')
- canUserEdit = true;
+ canUserEdit = true;
}
else {
- canUserEdit = false;
+ canUserEdit = false;
}
return canUserEdit;
@@ -44,21 +45,26 @@ const AdminTemplate = (props) => {
if (CheckUserPermission())
return (
- <div style={{ backgroundColor: " #D3D3D3" }}>
- <AppBarAdmin />
- <div>
+ <StyledDiv contrast={state.contrast}>
+ <AppBarAdmin contrast={state.contrast}/>
+ <div style={{margin: "20px"}}>
{props.inner}
</div>
- </div>
+ </StyledDiv>
)
else
return (
- <div style={{ backgroundColor: " #D3D3D3" }}>
+ <StyledDiv contrast={state.contrast}>
<div>
- <Unauthorized />
+ <Unauthorized contrast={state.contrast}/>
</div>
- </div>
+ </StyledDiv>
)
}
+const StyledDiv = styled.div`
+ background-color: ${props => props.contrast === "" ? "white" : "black"};
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+`
+
export default AdminTemplate;
diff --git a/src/Admin/Components/Components/AlertDialog.js b/src/Admin/Components/Components/AlertDialog.js
index 14861d979b42a3a78cdeeb07ed501e4615dc4e43..d2a252ad607d53371d9d84fed2e66e83d3e366eb 100644
--- a/src/Admin/Components/Components/AlertDialog.js
+++ b/src/Admin/Components/Components/AlertDialog.js
@@ -15,15 +15,20 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React from 'react';
-import Button from '@material-ui/core/Button';
+import React, { useContext } from 'react';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';
+import styled from 'styled-components';
+import { Store } from 'Store'
+import StyledButton from './Button';
const AlertDialog = ( props ) => {
+
+ const { state } = useContext(Store)
+
return (
<div>
<Dialog
@@ -32,25 +37,33 @@ const AlertDialog = ( props ) => {
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
- <DialogTitle id="alert-dialog-title">
- Deseja deletar o dado de id: {props.deleteItem.id}
- </DialogTitle>
- <DialogContent>
- <DialogContentText id="alert-dialog-description">
- Se você deletar essa dado, todas as informações desse dado serão deletas para sempre
- </DialogContentText>
- </DialogContent>
- <DialogActions>
- <Button onClick={props.HandleClose} color="primary">
- Não deletar
- </Button>
- <Button onClick={props.OnDelete} color="secondary" autoFocus>
- Deletar
- </Button>
- </DialogActions>
+ <StyledDiv contrast={state.contrast}>
+ <DialogTitle id="alert-dialog-title">
+ Deseja deletar o dado de id: {props.deleteItem.id}
+ </DialogTitle>
+ <DialogContent>
+ <DialogContentText id="alert-dialog-description">
+ Se você deletar essa dado, todas as informações desse dado serão deletas para sempre
+ </DialogContentText>
+ </DialogContent>
+ <DialogActions>
+ <StyledButton onClick={props.HandleClose} color="primary" text="Não deletar"/>
+ <StyledButton onClick={props.OnDelete} color="secondary" autoFocus text="Deletar"/>
+ </DialogActions>
+ </StyledDiv>
</Dialog>
</div>
);
}
+const StyledDiv = styled.div`
+ background-color: ${props => props.contrast === "" ? "white" : "black"};
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ border: 1px solid ${props => props.contrast === "" ? "#666" : "white"};
+
+ #alert-dialog-description {
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
+`
+
export default AlertDialog;
\ No newline at end of file
diff --git a/src/Admin/Components/Components/AppBar.js b/src/Admin/Components/Components/AppBar.js
index b596c35f59484e8754b79c68d787feced4011913..2531b3e218be4834aac49b3e246cd77121247010 100644
--- a/src/Admin/Components/Components/AppBar.js
+++ b/src/Admin/Components/Components/AppBar.js
@@ -6,68 +6,99 @@ import AppBar from "@material-ui/core/AppBar";
import { Tab, Tabs } from "@material-ui/core";
import { Link } from 'react-router-dom'
import { TabsItens } from '../../Pages/AdminLabelTabs/LabelTabs'
+import styled from "styled-components";
function TabPanel(props) {
- const { children, value, index, ...other } = props;
+ const { children, value, index, ...other } = props;
- return (
- <div
- role="tabpanel"
- hidden={value !== index}
- id={`nav-tabpanel-${index}`}
- aria-labelledby={`nav-tab-${index}`}
- {...other}
- >
- {value === index && (
- <Box p={3}>
- <Typography>{children}</Typography>
- </Box>
- )}
- </div>
- );
+ return (
+ <div
+ role="tabpanel"
+ hidden={value !== index}
+ id={`nav-tabpanel-${index}`}
+ aria-labelledby={`nav-tab-${index}`}
+ {...other}
+ >
+ {value === index && (
+ <Box p={3}>
+ <Typography>{children}</Typography>
+ </Box>
+ )}
+ </div>
+ );
}
TabPanel.propTypes = {
- children: PropTypes.node,
- index: PropTypes.any.isRequired,
- value: PropTypes.any.isRequired,
+ children: PropTypes.node,
+ index: PropTypes.any.isRequired,
+ value: PropTypes.any.isRequired,
};
function a11yProps(index) {
- return {
- id: `nav-tab-${index}`,
- "aria-controls": `nav-tabpanel-${index}`,
- };
+ return {
+ id: `nav-tab-${index}`,
+ "aria-controls": `nav-tabpanel-${index}`,
+ };
}
-export default function AppBarAdmin() {
- const [value, setValue] = React.useState(0);
+export default function AppBarAdmin(props) {
+ const [value, setValue] = React.useState(0);
- const handleChange = (event, newValue) => {
- setValue(newValue);
- };
+ const handleChange = (event, newValue) => {
+ setValue(newValue);
+ };
- return (
- <AppBar position="sticky" color="default">
- <Tabs
- variant="scrollable"
- scrollButtons="on"
- value={value}
- onChange={handleChange}
- aria-label="nav tabs example"
- >
- {
- TabsItens.map((label, index) => (
- <Tab
- key={label.href}
- label={label.label}
- to={label.href}
- icon={label.icon}
- component={Link}
- {...a11yProps(index)}
- />
- ))
- }
- </Tabs>
- </AppBar>
- )
-}
\ No newline at end of file
+ return (
+ <StyledAppBar position="sticky" contrast={props.contrast}>
+ <StyledTabs
+ variant="scrollable"
+ scrollButtons="on"
+ value={value}
+ onChange={handleChange}
+ aria-label="nav tabs example"
+ TabIndicatorProps={{style: {background: props.contrast === "" ? "orange" : "yellow"}}}
+ >
+ {
+ TabsItens.map((label, index) => (
+ <StyledTab
+ contrast={props.contrast}
+ key={label.href}
+ label={label.label}
+ to={label.href}
+ icon={label.icon}
+ component={Link}
+ {...a11yProps(index)}
+ />
+ ))
+ }
+ </StyledTabs>
+ </StyledAppBar>
+ )
+}
+
+const StyledTab = styled(Tab)`
+ svg {
+ fill: ${props => props.contrast === "" ? "" : "white"} !important;
+ }
+
+ color: ${props => props.contrast === "" ? "" : "yellow"} !important;
+ text-decoration: ${props => props.contrast === "" ? "" : "underline yellow"} !important;
+`
+
+const StyledAppBar = styled(AppBar)`
+ background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
+ color: ${props => props.contrast === "" ? "#666" : "white"} !important;
+ border-bottom: 1px solid ${props => props.contrast === "" ? "black" : "white"} !important;
+ box-shadow: none !important;
+`
+
+const StyledTabs = styled(Tabs)`
+ /*workaround because scrollButtons = on does not work*/
+ .MuiTabScrollButton-root.Mui-disabled {
+ opacity: 1 !important;
+ }
+
+ .MuiButtonBase-root.Mui-disabled {
+ cursor: pointer !important;
+ pointer-events: auto !important;
+ }
+`
\ No newline at end of file
diff --git a/src/Admin/Components/Components/Button.js b/src/Admin/Components/Components/Button.js
new file mode 100644
index 0000000000000000000000000000000000000000..dd2aedd0ccdf5932db7fe6f85e92b69027174b8c
--- /dev/null
+++ b/src/Admin/Components/Components/Button.js
@@ -0,0 +1,56 @@
+import React, { useContext } from 'react';
+import styled from 'styled-components';
+import Button from '@material-ui/core/Button';
+import { Store } from 'Store';
+
+
+function ButtonComponent({ text, color, icon, variant, onClick, disabled }) {
+ const { state } = useContext(Store);
+
+ if (state.contrast === "") {
+ return (
+ <Button
+ startIcon={icon}
+ color={color}
+ variant={variant}
+ onClick={onClick}
+ disabled={disabled}
+ style={{margin: "5px"}}
+ >
+ {text}
+ </Button>
+ )
+ }
+ else {
+ return (
+ <ContrastButton
+ startIcon={icon}
+ onClick={onClick}
+ variant={variant}
+ disabled={disabled}
+ >
+ {text}
+ </ContrastButton>
+ );
+ }
+}
+
+const ContrastButton = styled(Button)`
+ background-color: black !important;
+ border: 1px solid white !important;
+ color: yellow !important;
+ text-decoration: underline !important;
+ :hover {
+ background-color: rgba(255,255,0,0.24) !important;
+ }
+ :disabled {
+ color: white !important;
+ text-decoration: none !important;
+ }
+ svg {
+ fill: white !important;
+ }
+ margin: 5px !important;
+`
+
+export default ButtonComponent
diff --git a/src/Admin/Components/Components/DataCards/ActivityCard.js b/src/Admin/Components/Components/DataCards/ActivityCard.js
index 58497e2ebb7bf62d756b1f85d4c5f0c99d2edaec..3a0e69852f92cdb81343c3f403c9d63871eb343a 100644
--- a/src/Admin/Components/Components/DataCards/ActivityCard.js
+++ b/src/Admin/Components/Components/DataCards/ActivityCard.js
@@ -16,23 +16,27 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useContext } from "react";
import moment from 'moment';
// Maerial ui components
-import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import Typography from "@material-ui/core/Typography";
-import Button from "@material-ui/core/Button";
import ListRoundedIcon from "@material-ui/icons/ListRounded";
-import { useStyles } from "../../Styles/DataCard";
+import { useStyles, StyledCard } from "../../Styles/DataCard";
import Grid from "@material-ui/core/Grid";
//imports from local files
import { GetAData } from "../../../Filters";
import { getRequest } from '../../../../Components/HelperFunctions/getAxiosConfig';
import { Link } from 'react-router-dom'
import LoadingSpinner from '../../../../Components/LoadingSpinner';
+import StyledButton from '../Button';
+
+import { Store } from 'Store'
const ActivityCard = () => {
+
+ const { state } = useContext(Store);
+
const classes = useStyles();
const [error, setError] = useState(null); //Necessary to consult the API, catch errors
@@ -101,39 +105,38 @@ const ActivityCard = () => {
];
return (
- <Card>
+ <StyledCard contrast={state.contrast}>
<CardContent>
<Grid container xs={12} justify="space-between" alignItems="center" alignContent="center">
<Grid item>
- <Typography className={classes.title} color="inherit" gutterBottom>
+ <Typography className={classes.title} gutterBottom>
{item.id}
</Typography>
</Grid>
<Grid item>
<Link style={{ textDecoration: 'none' }} to={`/admin/activities`}>
- <Button
- startIcon={<ListRoundedIcon />}
+ <StyledButton
+ icon={<ListRoundedIcon />}
color="primary"
variant="outlined"
- >
- Listar
- </Button>
+ text="Listar"
+ />
</Link>
</Grid>
</Grid>
<div style={{ height: "1em" }} />
{DATA.map((info, index) => (
<div className={classes.displayColumn} key={index}>
- <Typography color="initial" className={classes.subTitle}>
+ <Typography className={classes.subTitle}>
{info.subTitle}
</Typography>
- <Typography color="textSecondary">
+ <Typography>
{info.prop === null ? "Sem dados" : info.prop}
</Typography>
</div>
))}
</CardContent>
- </Card>
+ </StyledCard>
);
}
};
diff --git a/src/Admin/Components/Components/DataCards/CollectionCard.js b/src/Admin/Components/Components/DataCards/CollectionCard.js
index a4ef28da2b30bdff799545b79d7936b5415e19ca..7929d26077128ac44887bd8f579886ff8c5c090b 100644
--- a/src/Admin/Components/Components/DataCards/CollectionCard.js
+++ b/src/Admin/Components/Components/DataCards/CollectionCard.js
@@ -16,15 +16,13 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useContext } from "react";
import moment from 'moment';
// Maerial ui components
-import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import Typography from "@material-ui/core/Typography";
-import Button from "@material-ui/core/Button";
import ListRoundedIcon from "@material-ui/icons/ListRounded";
-import { useStyles } from "../../Styles/DataCard";
+import { useStyles, StyledCard } from "../../Styles/DataCard";
import Grid from '@material-ui/core/Grid';
// Icons
import EditRoundedIcon from "@material-ui/icons/EditRounded";
@@ -35,8 +33,13 @@ import { Link, useHistory } from 'react-router-dom'
import LoadingSpinner from '../../../../Components/LoadingSpinner';
import SnackBar from '../../../../Components/SnackbarComponent';
import { getRequest, deleteRequest } from '../../../../Components/HelperFunctions/getAxiosConfig';
+import StyledButton from '../Button';
+import { Store } from 'Store'
const CollectionCard = () => {
+
+ const { state } = useContext(Store);
+
let history = useHistory()
const classes = useStyles();
const urlParams = new URLSearchParams(window.location.search);
@@ -148,7 +151,7 @@ const CollectionCard = () => {
];
return (
- <Card>
+ <StyledCard contrast={state.contrast}>
<SnackBar
severity={snackInfo.icon}
text={snackInfo.message}
@@ -164,54 +167,51 @@ const CollectionCard = () => {
<CardContent>
<Grid xs={12} justify="space-between" alignItems="center" container>
<Grid item>
- <Typography className={classes.title} color="inherit" gutterBottom>
+ <Typography className={classes.title} gutterBottom>
{item.name}
</Typography>
</Grid>
<Grid item>
<Link style={{ textDecoration: 'none' }} to={`/admin/Collections`}>
- <Button
- startIcon={<ListRoundedIcon />}
+ <StyledButton
+ icon={<ListRoundedIcon />}
color="primary"
variant="outlined"
- >
- Listar
- </Button>
+ text="Listar"
+ />
</Link>
<Link style={{ textDecoration: 'none' }} to={`/admin/EditCollection?collection=${item.id}`}>
- <Button
- startIcon={<EditRoundedIcon />}
+ <StyledButton
+ icon={<EditRoundedIcon />}
color="primary"
variant="outlined"
- >
- Editar
- </Button>
+ text="Editar"
+ />
</Link>
- <Button
- startIcon={<DeleteRoundedIcon />}
+ <StyledButton
+ icon={<DeleteRoundedIcon />}
color="secondary"
variant="outlined"
+ text="Deletar"
onClick={DeleteHandler}
- >
- Deletar
- </Button>
+ />
</Grid>
</Grid>
<div style={{ height: "1em" }} />
{DATA.map((info, index) => (
<div className={classes.displayColumn} key={index}>
- <Typography color="initial" className={classes.subTitle}>
+ <Typography className={classes.subTitle}>
{info.subTitle}
</Typography>
- <Typography color="textSecondary">
+ <Typography>
{info.prop === null ? "Sem dados" : info.prop}
</Typography>
</div>
))}
</CardContent>
- </Card>
+ </StyledCard>
);
}
};
diff --git a/src/Admin/Components/Components/DataCards/CommunityQuestionCard.js b/src/Admin/Components/Components/DataCards/CommunityQuestionCard.js
index 3a4b844e2b53297d42df642af9dbcc37b7c187a2..e0d1cb4eaa915d3025887251eda44cde1397c18d 100644
--- a/src/Admin/Components/Components/DataCards/CommunityQuestionCard.js
+++ b/src/Admin/Components/Components/DataCards/CommunityQuestionCard.js
@@ -16,16 +16,14 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useContext } from "react";
import moment from 'moment';
// Maerial ui components
-import Card from "@material-ui/core/Card";
import Grid from "@material-ui/core/Grid";
import CardContent from "@material-ui/core/CardContent";
import Typography from "@material-ui/core/Typography";
-import Button from "@material-ui/core/Button";
import ListRoundedIcon from "@material-ui/icons/ListRounded";
-import { useStyles } from "../../Styles/DataCard";
+import { useStyles, StyledCard } from "../../Styles/DataCard";
// Icons
import EmailRoundedIcon from '@material-ui/icons/EmailRounded';
//imports from local files
@@ -33,8 +31,14 @@ import { GetAData } from "../../../Filters";
import { Link } from 'react-router-dom'
import { getRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import LoadingSpinner from '../../../../Components/LoadingSpinner';
+import StyledButton from '../Button';
+
+import { Store } from 'Store'
const CommunityQuestions = () => {
+
+ const { state } = useContext(Store);
+
const classes = useStyles();
const [error, setError] = useState(null); //Necessary to consult the API, catch errors
@@ -83,14 +87,14 @@ const CommunityQuestions = () => {
subTitle: "Email",
prop:
item.email ?
- <Link to={`/admin/sendEmail/?email=${item.email}`} style={{ textDecoration: 'none' }}>
- <Button
+ <Link to={`/admin/sendEmail/?email=${item.email}`} style={state.contrast === "" ? { textDecoration: "none" } : { textDecoration: "yellow underline", color: "yellow" }}>
+ <StyledButton
variant='text'
- color='primary'
- startIcon={<EmailRoundedIcon />}
+ color='inherit'
+ icon={<EmailRoundedIcon style={{ color: state.contrast === "" ? "#666" : "white" }} />}
+ text={item.email}
>
- {item.email}
- </Button>
+ </StyledButton>
</Link> : null
},
{
@@ -104,39 +108,38 @@ const CommunityQuestions = () => {
];
return (
- <Card>
+ <StyledCard contrast={state.contrast}>
<CardContent>
<Grid direction="row" justify="space-between" alignContent="center" alignItems="center" container>
<Grid item>
- <Typography className={classes.title} color="inherit" gutterBottom>
+ <Typography className={classes.title} gutterBottom>
{item.name}
</Typography>
</Grid>
<Grid>
<Link style={{ textDecoration: 'none' }} to={`/admin/CommunityQuestions`}>
- <Button
- startIcon={<ListRoundedIcon />}
+ <StyledButton
+ icon={<ListRoundedIcon />}
color="primary"
variant="outlined"
- >
- Listar
- </Button>
+ text="Listar"
+ />
</Link>
</Grid>
</Grid>
<div style={{ height: "1em" }} />
{DATA.map((info, index) => (
<div className={classes.displayColumn} key={index}>
- <Typography color="initial" className={classes.subTitle}>
+ <Typography className={classes.subTitle}>
{info.subTitle}
</Typography>
- <Typography color="textSecondary">
+ <Typography>
{info.prop === null ? "Sem dados" : info.prop}
</Typography>
</div>
))}
</CardContent>
- </Card>
+ </StyledCard>
);
}
};
diff --git a/src/Admin/Components/Components/DataCards/ComplaintsCard.js b/src/Admin/Components/Components/DataCards/ComplaintsCard.js
index 4c3fc1337f6c2a18d26e20b9191f46bfe003ed1a..9a35bdcd5add42c68bad750fa4bc09f0a65a5277 100644
--- a/src/Admin/Components/Components/DataCards/ComplaintsCard.js
+++ b/src/Admin/Components/Components/DataCards/ComplaintsCard.js
@@ -16,10 +16,9 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useContext } from "react";
import moment from 'moment';
// Maerial ui components
-import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import Typography from "@material-ui/core/Typography";
import Button from "@material-ui/core/Button";
@@ -31,7 +30,7 @@ import GetAppRoundedIcon from "@material-ui/icons/GetAppRounded";
import LaunchRoundedIcon from "@material-ui/icons/LaunchRounded";
import RemoveRoundedIcon from "@material-ui/icons/RemoveRounded";
import RestoreRoundedIcon from "@material-ui/icons/RestoreRounded";
-import { useStyles } from "../../Styles/DataCard";
+import { useStyles, StyledCard } from "../../Styles/DataCard";
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
@@ -47,16 +46,20 @@ import { apiDomain } from '../../../../env';
import LoadingSpinner from '../../../../Components/LoadingSpinner';
import SnackBar from '../../../../Components/SnackbarComponent';
import { getRequest, postRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
+import { Store } from 'Store'
+import StyledButton from '../Button';
//styles
const PORTAL_MEC = "https://plataformaintegrada.mec.gov.br/";
const CollectionCard = () => {
+
+ const { state } = useContext(Store);
+
const classes = useStyles();
const urlParams = new URLSearchParams(window.location.search);
const id = urlParams.get("id");
-
const [error, setError] = useState(null); //Necessary to consult the API, catch errors
const [isLoaded, setIsLoaded] = useState(false); //Necessary to consult the API, wait until complete
const [item, setItem] = useState({}); //Necessary to consult the API, data
@@ -133,7 +136,8 @@ const CollectionCard = () => {
style={{
textAlign: "center",
padding: "0.5em",
- backgroundColor: "#FA8072",
+ backgroundColor: state.contrast === "" ? "#FA8072" : "black",
+ border: state.contrast === "" ? "" : "1px solid white",
fontWeight: "500",
color: "#FFFAFA",
}}
@@ -150,7 +154,8 @@ const CollectionCard = () => {
style={{
textAlign: "center",
padding: "0.5em",
- backgroundColor: "#FF8C00",
+ backgroundColor: state.contrast === "" ? "#FF8C00" : "black",
+ border: state.contrast === "" ? "" : "1px solid white",
fontWeight: "500",
color: "#FFFAFA",
}}
@@ -165,7 +170,8 @@ const CollectionCard = () => {
style={{
textAlign: "center",
padding: "0.5em",
- backgroundColor: "#228B22",
+ backgroundColor: state.contrast === "" ? "#228B22" : "black",
+ border: state.contrast === "" ? "" : "1px solid white",
fontWeight: "500",
color: "#FFFAFA",
}}
@@ -231,9 +237,11 @@ const CollectionCard = () => {
<Button
style={{
width: "100%",
- color: "#FFFAFA",
- backgroundColor: "#FFA07A",
+ color: state.contrast === "" ? "#FFFAFA" : "yellow",
+ backgroundColor: state.contrast === "" ? "#FFA07A" : "black",
fontWeight: "500",
+ border: state.contrast === "" ? "" : "1px solid white",
+ textDecoration: state.contrast === "" ? "none" : "underline yellow"
}}
variant="contained"
onClick={() => {
@@ -247,9 +255,11 @@ const CollectionCard = () => {
<Button
style={{
width: "100%",
- color: "#FFFAFA",
- backgroundColor: "#FA8072",
+ color: state.contrast === "" ? "#FFFAFA" : "yellow",
+ backgroundColor: state.contrast === "" ? "#FA8072" : "black",
fontWeight: "500",
+ border: state.contrast === "" ? "" : "1px solid white",
+ textDecoration: state.contrast === "" ? "none" : "underline yellow"
}}
variant="contained"
onClick={() => {
@@ -263,9 +273,11 @@ const CollectionCard = () => {
<Button
style={{
width: "100%",
- color: "#FFFAFA",
- backgroundColor: "red",
+ color: state.contrast === "" ? "#FFFAFA" : "yellow",
+ backgroundColor: state.contrast === "" ? "red" : "black",
fontWeight: "500",
+ border: state.contrast === "" ? "" : "1px solid white",
+ textDecoration: state.contrast === "" ? "none" : "underline yellow"
}}
variant="contained"
onClick={() => {
@@ -287,7 +299,6 @@ const CollectionCard = () => {
>
<Grid item>
<Typography
- color="initial"
className={classes.subTitle}
variant="h6"
>
@@ -295,20 +306,20 @@ const CollectionCard = () => {
</Typography>
</Grid>
<Grid item>
- <Button
+ <StyledButton
style={{
color: "#FFFAFA",
backgroundColor: "#FA8072",
fontWeight: "500",
}}
+ color="secondary"
variant="contained"
onClick={() => HandleComplainObj("accept")}
- startIcon={
+ icon={
<RemoveRoundedIcon style={{ fill: "#FFFAFA" }} />
}
- >
- Remover
- </Button>
+ text="Remover"
+ />
</Grid>
</Grid>
@@ -323,7 +334,6 @@ const CollectionCard = () => {
>
<Grid item>
<Typography
- color="initial"
className={classes.subTitle}
variant="h6"
>
@@ -331,26 +341,26 @@ const CollectionCard = () => {
</Typography>
</Grid>
<Grid item>
- <Button
+ <StyledButton
style={{
color: "#FFFAFA",
backgroundColor: "#228B22",
fontWeight: "500",
}}
+ color="primary"
variant="contained"
onClick={() => HandleComplainObj("reject")}
- startIcon={
+ icon={
<RestoreRoundedIcon style={{ fill: "#FFFAFA" }} />
}
- >
- Ativar
- </Button>
+ text="Ativar"
+ />
</Grid>
</Grid>
</>
);
default:
- return "Essa denúncia já foi avaliado!";
+ return "Essa denúncia já foi avaliada!";
}
}
@@ -360,73 +370,72 @@ const CollectionCard = () => {
return (
<CardActions>
<Link to={`/admin/user?id=${item.complainable_id}`}>
- <Button
+ <StyledButton
variant="contained"
color="primary"
- startIcon={<VisibilityIcon />}
- >
- Visualizar usuário
- </Button>
+ icon={<VisibilityIcon />}
+ text="Visualizar usuário"
+ />
</Link>
- <Button
- style={{
- fontWeight: "500",
- backgroundColor: "#FA8072"
- }}
- variant="contained"
- startIcon={<LaunchRoundedIcon style={{ fill: "#FFFAFA" }} />}
+
+ <a
+ style={{ textDecoration: "none", color: "#FFFAFA" }}
+ target="_blank"
+ rel="noreferrer"
+ href={
+ PORTAL_MEC +
+ convertToLink(
+ item.complainable_type,
+ item.complainable_id
+ )
+ }
>
- <a
- style={{ textDecoration: "none", color: "#FFFAFA" }}
- target="_blank"
- rel="noreferrer"
- href={
- PORTAL_MEC +
- convertToLink(
- item.complainable_type,
- item.complainable_id
- )
- }
- >
- MEC RED
- </a>
- </Button>
+ <StyledButton
+ style={{
+ fontWeight: "500",
+ backgroundColor: "#FA8072"
+ }}
+ variant="contained"
+ color="secondary"
+ icon={<LaunchRoundedIcon style={{ fill: "#FFFAFA" }} />}
+ text="MEC RED"
+ />
+ </a>
</CardActions>
)
default:
return (
<CardActions>
- <Button
+ <StyledButton
variant="contained"
color="primary"
- startIcon={<GetAppRoundedIcon />}
+ icon={<GetAppRoundedIcon />}
onClick={handleClickOpen('paper')}
+ text="Veja o recurso"
+ />
+ <a
+ style={{ textDecoration: "none", color: "#FFFAFA" }}
+ target="_blank"
+ rel="noreferrer"
+ href={
+ PORTAL_MEC +
+ convertToLink(
+ item.complainable_type,
+ item.complainable_id
+ )
+ }
>
- Veja o recurso
- </Button>
- <Button
- style={{
- fontWeight: "500",
- backgroundColor: "#FA8072"
- }}
- variant="contained"
- startIcon={<LaunchRoundedIcon style={{ fill: "#FFFAFA" }} />}
- >
- <a
- style={{ textDecoration: "none", color: "#FFFAFA" }}
- target="_blank"
- rel="noreferrer"
- href={
- PORTAL_MEC +
- convertToLink(
- item.complainable_type,
- item.complainable_id
- )
- }
- >
- MEC RED
- </a>
- </Button>
+ <StyledButton
+ style={{
+ fontWeight: "500",
+ backgroundColor: "#FA8072"
+ }}
+ variant="contained"
+ color="secondary"
+ icon={<LaunchRoundedIcon style={{ fill: "#FFFAFA" }} />}
+ text="MEC RED"
+ />
+ </a>
</CardActions>
)
}
@@ -513,7 +522,8 @@ const CollectionCard = () => {
padding: "0.8em",
marginBottom: "1em",
marginRight: "1em",
- backgroundColor: "#D3D3D3",
+ backgroundColor: state.contrast === "" ? "#D3D3D3" : "black",
+ border: state.contrast === "" ? "" : "1px solid white",
fontSize: 14,
}}
>
@@ -542,10 +552,10 @@ const CollectionCard = () => {
) : null}
{importantData.map((info, index) => (
<Grid item className={classes.displayColumn} key={index}>
- <Typography color="textPrimary">
+ <Typography>
{info.subTitle}
</Typography>
- <Typography color="textSecondary">
+ <Typography>
{info.prop === null ? "Sem dados" : info.prop}
</Typography>
</Grid>
@@ -668,20 +678,18 @@ const CollectionCard = () => {
md={6}
xs={12}
>
- <Card>
+ <StyledCard contrast={state.contrast}>
<CardContent>
<Grid container justify="space-between">
<Grid item>
<Typography
className={classes.title}
- color="inherit"
gutterBottom
>
Denuncia:
</Typography>
<Typography
className={classes.title}
- color="inherit"
gutterBottom
>
{
@@ -695,23 +703,22 @@ const CollectionCard = () => {
style={{ textDecoration: "none" }}
to={`/admin/complaints`}
>
- <Button
- startIcon={<ListRoundedIcon />}
+ <StyledButton
+ icon={<ListRoundedIcon />}
color="primary"
variant="outlined"
- >
- Listar
- </Button>
+ text="Listar"
+ />
</Link>
</Grid>
</Grid>
<div style={{ height: "1em" }} />
{DATA.map((info, index) => (
<div className={classes.displayColumn} key={index}>
- <Typography color="initial" className={classes.subTitle}>
+ <Typography className={classes.subTitle}>
{info.subTitle}
</Typography>
- <Typography color="textSecondary">
+ <Typography>
{info.prop === null ? "Sem dados" : info.prop}
</Typography>
</div>
@@ -720,7 +727,7 @@ const CollectionCard = () => {
{
DisplayButtonsArea(item.complainable_type)
}
- </Card>
+ </StyledCard>
</Grid>
<Grid
@@ -729,7 +736,7 @@ const CollectionCard = () => {
xs={12}
>
<Grid item>
- <Card>
+ <StyledCard contrast={state.contrast}>
<CardContent>
<Typography variant="h5" component="h2">
Denúncia #{item.id}
@@ -740,13 +747,12 @@ const CollectionCard = () => {
<Grid container className={classes.marginTop}>
<Grid item>
<Typography
- color="textSecondary"
className={classes.subTitle}
variant="h6"
>
Descrição
</Typography>
- <Typography color="initial">{item.description}</Typography>
+ <Typography>{item.description}</Typography>
</Grid>
</Grid>
@@ -759,24 +765,22 @@ const CollectionCard = () => {
>
<Grid item>
<Typography
- color="textSecondary"
className={classes.subTitle}
>
Data
</Typography>
- <Typography color="initial">
+ <Typography>
{DisplayDate(item.created_at)}
</Typography>
</Grid>
<Grid item>
<Typography
- color="textSecondary"
className={classes.subTitle}
>
Denunciante
</Typography>
- <Typography color="initial">{item.user_id}</Typography>
+ <Typography>{item.user_id}</Typography>
</Grid>
</Grid>
@@ -785,13 +789,12 @@ const CollectionCard = () => {
<Grid container className={classes.marginTop}>
<Grid item>
<Typography
- color="textSecondary"
className={classes.subTitle}
variant="h6"
>
Motivo
</Typography>
- <Typography color="initial">
+ <Typography>
{item.complaint_reason.reason}
</Typography>
</Grid>
@@ -800,23 +803,22 @@ const CollectionCard = () => {
<Grid container className={classes.marginTop}>
<Grid item>
<Typography
- color="textSecondary"
className={classes.subTitle}
variant="h6"
>
Status
</Typography>
- <Typography color="initial">
+ <Typography>
{item.complaint_reason.status}
</Typography>
</Grid>
</Grid>
</CardContent>
- </Card>
+ </StyledCard>
</Grid>
<Grid item className={classes.marginTop}>
- <Card>
+ <StyledCard contrast={state.contrast}>
<CardContent>
<Typography variant="h5" component="h2">
Ações
@@ -825,7 +827,7 @@ const CollectionCard = () => {
Actions(item.state, item.complainable_type)
}
</CardContent>
- </Card>
+ </StyledCard>
</Grid>
</Grid>
@@ -853,9 +855,11 @@ const CollectionCard = () => {
</DialogContentText>
</DialogContent>
<DialogActions>
- <Button onClick={handleClose} color="primary">
- Fechar
- </Button>
+ <StyledButton
+ color="primary"
+ onClick={handleClose}
+ text="Fechar"
+ />
</DialogActions>
</Dialog>
</Grid>
diff --git a/src/Admin/Components/Components/DataCards/EducationalObjectsCard.js b/src/Admin/Components/Components/DataCards/EducationalObjectsCard.js
index 6f865726bd0e8719e82fc51b7497b9bf6c2df96f..ec63429377f7172ec07c279315b8ef4bd345f031 100644
--- a/src/Admin/Components/Components/DataCards/EducationalObjectsCard.js
+++ b/src/Admin/Components/Components/DataCards/EducationalObjectsCard.js
@@ -16,23 +16,21 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useContext } from "react";
import moment from "moment";
// Maerial ui components
-import Card from "@material-ui/core/Card";
import Paper from "@material-ui/core/Paper";
import CardContent from "@material-ui/core/CardContent";
import Typography from "@material-ui/core/Typography";
-import Button from "@material-ui/core/Button";
import ListRoundedIcon from "@material-ui/icons/ListRounded";
import VisibilityIcon from "@material-ui/icons/Visibility";
import EditRoundedIcon from "@material-ui/icons/EditRounded";
-import { useStyles } from "../../Styles/DataCard";
+import { useStyles, StyledCard } from "../../Styles/DataCard";
import DeleteRoundedIcon from "@material-ui/icons/DeleteRounded";
//imports from local files
import { GetAData, DeleteFilter } from "../../../Filters";
import { Link, useHistory } from "react-router-dom";
-import { apiUrl, apiDomain } from "../../../../env";
+import { apiDomain } from "../../../../env";
import { Grid } from "@material-ui/core";
import LoadingSpinner from "../../../../Components/LoadingSpinner";
import {
@@ -40,8 +38,14 @@ import {
deleteRequest,
} from "../../../../Components/HelperFunctions/getAxiosConfig";
import SnackBar from "../../../../Components/SnackbarComponent";
+import StyledButton from '../Button';
+
+import { Store } from 'Store'
const CommunityQuestions = () => {
+
+ const { state } = useContext(Store);
+
const classes = useStyles();
let history = useHistory();
const urlParams = new URLSearchParams(window.location.search);
@@ -189,7 +193,9 @@ const CommunityQuestions = () => {
padding: "0.8em",
marginBottom: "1em",
marginRight: "1em",
- backgroundColor: "#D3D3D3",
+ backgroundColor: state.contrast === "" ? "#D3D3D3" : "black",
+ color: state.contrast === "" ? "black" : "white",
+ border: state.contrast === "" ? "" : "1px solid white",
fontSize: 14,
}}
>
@@ -206,7 +212,7 @@ const CommunityQuestions = () => {
];
return (
- <Card variant="outlined">
+ <StyledCard contrast={state.contrast} variant="outlined">
<SnackBar
severity={snackInfo.icon}
text={snackInfo.message}
@@ -233,7 +239,6 @@ const CommunityQuestions = () => {
<Grid item>
<Typography
className={classes.title}
- color="inherit"
gutterBottom
>
{item.name}
@@ -244,53 +249,43 @@ const CommunityQuestions = () => {
style={{ textDecoration: "none" }}
to={`/admin/learningObjects`}
>
- <Button
- startIcon={<ListRoundedIcon />}
+ <StyledButton
+ icon={<ListRoundedIcon />}
color="primary"
variant="outlined"
- >
- Listar
- </Button>
+ text="Listar"
+ />
</Link>
- <Button
- startIcon={<VisibilityIcon />}
- color="primary"
- variant="outlined"
+ <Link
+ style={{ textDecoration: "none" }}
+ to={"/recurso/" + id}
>
- <a
- style={{ textDecoration: "none" }}
- rel="noreferrer"
- target="_blank"
- href={
- apiUrl +
- "/learning_objects/" +
- id +
- "/download"
- }
- >
- Ver recurso
- </a>
- </Button>
+ <StyledButton
+ icon={<VisibilityIcon />}
+ color="primary"
+ variant="outlined"
+ text="Ver recurso"
+ />
+ </Link>
+
<Link
style={{ textDecoration: "none" }}
to={`/admin/learningObjectEdit?learnObj=${item.id}`}
>
- <Button
- startIcon={<EditRoundedIcon />}
+ <StyledButton
+ icon={<EditRoundedIcon />}
color="primary"
variant="outlined"
- >
- Editar
- </Button>
+ text="Editar"
+ />
</Link>
- <Button
- startIcon={<DeleteRoundedIcon />}
+ <StyledButton
+ icon={<DeleteRoundedIcon />}
color="secondary"
variant="outlined"
onClick={DeleteHandler}
- >
- Deletar
- </Button>
+ text="Deletar"
+ />
</Grid>
</Grid>
<div style={{ height: "1em" }} />
@@ -305,16 +300,16 @@ const CommunityQuestions = () => {
{DATA.map((info, index) => (
<div className={classes.displayColumn} key={index}>
- <Typography color="initial" className={classes.subTitle}>
+ <Typography className={classes.subTitle}>
{info.subTitle}
</Typography>
- <Typography color="textSecondary">
+ <Typography>
{info.prop === null ? "Sem dados" : info.prop}
</Typography>
</div>
))}
</CardContent>
- </Card>
+ </StyledCard>
);
}
};
diff --git a/src/Admin/Components/Components/DataCards/InstitutionsCard.js b/src/Admin/Components/Components/DataCards/InstitutionsCard.js
index 1791b22d4867fcb2338057acccc185d559c98db4..cf8b6da438e28fd749f4cd56b827b591dfca73dd 100644
--- a/src/Admin/Components/Components/DataCards/InstitutionsCard.js
+++ b/src/Admin/Components/Components/DataCards/InstitutionsCard.js
@@ -16,15 +16,13 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useContext } from "react";
import moment from 'moment'
// Maerial ui components
-import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import Typography from "@material-ui/core/Typography";
-import Button from "@material-ui/core/Button";
import ListRoundedIcon from "@material-ui/icons/ListRounded";
-import { useStyles } from "../../Styles/DataCard";
+import { useStyles, StyledCard } from "../../Styles/DataCard";
import Grid from '@material-ui/core/Grid';
// Icons
import EditRoundedIcon from "@material-ui/icons/EditRounded";
@@ -35,8 +33,14 @@ import { getRequest, deleteRequest } from '../../../../Components/HelperFunction
import { Link, useHistory } from 'react-router-dom';
import LoadingSpinner from '../../../../Components/LoadingSpinner';
import SnackBar from '../../../../Components/SnackbarComponent';
+import StyledButton from '../Button';
+
+import { Store } from 'Store'
const InstitutionCard = () => {
+
+ const { state } = useContext(Store);
+
const classes = useStyles();
let history = useHistory();
const urlParams = new URLSearchParams(window.location.search);
@@ -147,7 +151,7 @@ const InstitutionCard = () => {
];
return (
- <Card>
+ <StyledCard contrast={state.contrast}>
<SnackBar
severity={snackInfo.icon}
text={snackInfo.message}
@@ -163,54 +167,51 @@ const InstitutionCard = () => {
<CardContent>
<Grid container xs={12} justify="space-between" alignItems="center" alignContent="center">
<Grid item>
- <Typography className={classes.title} color="inherit" gutterBottom>
+ <Typography className={classes.title} gutterBottom>
{item.name}
</Typography>
</Grid>
<Grid item>
<Link style={{ textDecoration: 'none' }} to={`/admin/institutions`}>
- <Button
- startIcon={<ListRoundedIcon />}
+ <StyledButton
+ icon={<ListRoundedIcon />}
color="primary"
variant="outlined"
- >
- Listar
- </Button>
+ text="Listar"
+ />
</Link>
<Link style={{ textDecoration: 'none' }} to={`/admin/institutionEdit?institution=${item.id}`}>
- <Button
- startIcon={<EditRoundedIcon />}
+ <StyledButton
+ icon={<EditRoundedIcon />}
color="primary"
variant="outlined"
- >
- Editar
- </Button>
+ text="Editar"
+ />
</Link>
- <Button
- startIcon={<DeleteRoundedIcon />}
+ <StyledButton
+ icon={<DeleteRoundedIcon />}
color="secondary"
variant="outlined"
onClick={DeleteHandler}
- >
- Deletar
- </Button>
+ text="Deletar"
+ />
</Grid>
</Grid>
<div style={{ height: "1em" }} />
{DATA.map((info, index) => (
<div className={classes.displayColumn} key={index}>
- <Typography color="initial" className={classes.subTitle}>
+ <Typography className={classes.subTitle}>
{info.subTitle}
</Typography>
- <Typography color="textSecondary">
+ <Typography>
{info.prop === null ? "Sem dados" : info.prop}
</Typography>
</div>
))}
</CardContent>
- </Card>
+ </StyledCard>
);
}
};
diff --git a/src/Admin/Components/Components/DataCards/NoteVarCard.js b/src/Admin/Components/Components/DataCards/NoteVarCard.js
index 7c7b4356f9f174607e330987ee15081724b080e8..d179bdeb594a4521b2097cf680c3f0f1d7332fbf 100644
--- a/src/Admin/Components/Components/DataCards/NoteVarCard.js
+++ b/src/Admin/Components/Components/DataCards/NoteVarCard.js
@@ -16,16 +16,14 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useContext } from "react";
import moment from 'moment';
// Maerial ui components
-import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import Typography from "@material-ui/core/Typography";
-import Button from "@material-ui/core/Button";
import ListRoundedIcon from "@material-ui/icons/ListRounded";
import Grid from "@material-ui/core/Grid";
-import { useStyles } from "../../Styles/DataCard";
+import { useStyles, StyledCard } from "../../Styles/DataCard";
// Icons
import EditRoundedIcon from "@material-ui/icons/EditRounded";
//imports from local files
@@ -33,8 +31,14 @@ import { GetAData } from "../../../Filters";
import { getRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import { Link } from 'react-router-dom';
import LoadingSpinner from '../../../../Components/LoadingSpinner';
+import StyledButton from '../Button';
+
+import { Store } from 'Store'
const NoteCard = () => {
+
+ const { state } = useContext(Store);
+
const classes = useStyles();
const urlParams = new URLSearchParams(window.location.search);
const id = urlParams.get("id");
@@ -98,49 +102,47 @@ const NoteCard = () => {
]
return (
- <Card>
+ <StyledCard contrast={state.contrast}>
<CardContent>
<Grid container xs={12} justify="space-between" alignContent="center" alignItems="center">
<Grid item>
- <Typography className={classes.title} color="inherit" gutterBottom>
+ <Typography className={classes.title} gutterBottom>
{item.name}
</Typography>
</Grid>
<Grid item>
<Link style={{ textDecoration: 'none' }} to={`/admin/noteVars`}>
- <Button
- startIcon={<ListRoundedIcon />}
+ <StyledButton
+ icon={<ListRoundedIcon />}
color="primary"
variant="outlined"
- >
- Listar
- </Button>
+ text="Listar"
+ />
</Link>
<Link style={{ textDecoration: 'none' }} to={`/admin/noteVarEdit?id=${item.id}`}>
- <Button
- startIcon={<EditRoundedIcon />}
+ <StyledButton
+ icon={<EditRoundedIcon />}
color="primary"
variant="outlined"
- >
- Editar
- </Button>
+ text="Editar"
+ />
</Link>
</Grid>
</Grid>
<div style={{height: "1em"}}/>
{DATA.map((info, index) => (
<div className={classes.displayColumn} key={index}>
- <Typography color="initial" className={classes.subTitle}>
+ <Typography className={classes.subTitle}>
{info.subTitle}
</Typography>
- <Typography color="textSecondary">
+ <Typography>
{info.prop === null ? "Sem dados" : info.prop}
</Typography>
</div>
))}
</CardContent>
- </Card>
+ </StyledCard>
);
}
};
diff --git a/src/Admin/Components/Components/DataCards/RatingCard.js b/src/Admin/Components/Components/DataCards/RatingCard.js
index b5f69a53c800dce0324ec0afb274a97ce315fc8e..c103f58cb9b80b984ae03b0fe31710cb8be56373 100644
--- a/src/Admin/Components/Components/DataCards/RatingCard.js
+++ b/src/Admin/Components/Components/DataCards/RatingCard.js
@@ -16,16 +16,14 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useContext } from "react";
import moment from 'moment';
// Maerial ui components
-import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import Typography from "@material-ui/core/Typography";
-import Button from "@material-ui/core/Button";
import ListRoundedIcon from "@material-ui/icons/ListRounded";
import Grid from "@material-ui/core/Grid";
-import { useStyles } from "../../Styles/DataCard";
+import { useStyles, StyledCard } from "../../Styles/DataCard";
// Icons
import EditRoundedIcon from "@material-ui/icons/EditRounded";
import DeleteRoundedIcon from "@material-ui/icons/DeleteRounded";
@@ -35,8 +33,14 @@ import { getRequest, deleteRequest } from '../../../../Components/HelperFunction
import { Link, useHistory } from 'react-router-dom';
import LoadingSpinner from '../../../../Components/LoadingSpinner';
import SnackBar from '../../../../Components/SnackbarComponent';
+import StyledButton from '../Button';
+
+import { Store } from 'Store'
const RatingCard = () => {
+
+ const { state } = useContext(Store);
+
const classes = useStyles();
let history = useHistory();
const urlParams = new URLSearchParams(window.location.search);
@@ -135,7 +139,7 @@ const RatingCard = () => {
];
return (
- <Card variant="outlined">
+ <StyledCard contrast={state.contrast} variant="outlined">
<SnackBar
severity={snackInfo.icon}
text={snackInfo.message}
@@ -151,54 +155,51 @@ const RatingCard = () => {
<CardContent>
<Grid container xs={12} justify="space-between" alignItems="center" alignContent="center">
<Grid item>
- <Typography className={classes.title} color="inherit" gutterBottom>
+ <Typography className={classes.title} gutterBottom>
{item.name}
</Typography>
</Grid>
<Grid item>
<Link style={{ textDecoration: 'none' }} to={`/admin/Ratings`}>
- <Button
- startIcon={<ListRoundedIcon />}
+ <StyledButton
+ icon={<ListRoundedIcon />}
color="primary"
variant="outlined"
- >
- Listar
- </Button>
+ text="Listar"
+ />
</Link>
<Link style={{ textDecoration: 'none' }} to={`/admin/EditRating?rating=${item.id}`}>
- <Button
- startIcon={<EditRoundedIcon />}
+ <StyledButton
+ icon={<EditRoundedIcon />}
color="primary"
variant="outlined"
- >
- Editar
- </Button>
+ text="Editar"
+ />
</Link>
- <Button
- startIcon={<DeleteRoundedIcon />}
+ <StyledButton
+ icon={<DeleteRoundedIcon />}
color="secondary"
variant="outlined"
onClick={DeleteHandler}
- >
- Deletar
- </Button>
+ text="Deletar"
+ />
</Grid>
</Grid>
<div style={{ height: "1em" }} />
{DATA.map((info, index) => (
<div className={classes.displayColumn} key={index}>
- <Typography color="initial" className={classes.subTitle}>
+ <Typography className={classes.subTitle}>
{info.subTitle}
</Typography>
- <Typography color="textSecondary">
+ <Typography>
{info.prop === null ? "Sem dados" : info.prop}
</Typography>
</div>
))}
</CardContent>
- </Card>
+ </StyledCard>
);
}
};
diff --git a/src/Admin/Components/Components/DataCards/UserCard.js b/src/Admin/Components/Components/DataCards/UserCard.js
index 0e5563ec5de0e6cf27e3c5cac7e295b91fd789e4..0799b4fda60c87c42eb3f76185f78039d907ef6c 100644
--- a/src/Admin/Components/Components/DataCards/UserCard.js
+++ b/src/Admin/Components/Components/DataCards/UserCard.js
@@ -16,19 +16,17 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useContext } from "react";
import moment from 'moment';
// Maerial ui components
-import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import Typography from "@material-ui/core/Typography";
-import Button from "@material-ui/core/Button";
import Paper from "@material-ui/core/Paper";
import Grid from "@material-ui/core/Grid";
import RemoveCircleOutlineRoundedIcon from '@material-ui/icons/RemoveCircleOutlineRounded';
import ListRoundedIcon from "@material-ui/icons/ListRounded";
import Chip from '@material-ui/core/Chip';
-import { useStyles } from "../../Styles/DataCard";
+import { useStyles, StyledCard } from "../../Styles/DataCard";
import EmailRoundedIcon from '@material-ui/icons/EmailRounded';
import EditRoundedIcon from '@material-ui/icons/EditRounded';
import DeleteRoundedIcon from '@material-ui/icons/DeleteRounded';
@@ -41,12 +39,17 @@ import { Link, useHistory } from "react-router-dom";
import LoadingSpinner from '../../../../Components/LoadingSpinner';
import SnackBar from '../../../../Components/SnackbarComponent';
import { getRequest, postRequest, deleteRequest, putRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
+import { Store } from 'Store'
+import StyledButton from '../Button';
//styles
import styled from 'styled-components';
//Image Import
import { noAvatar } from "ImportImages.js";
const CollectionCard = () => {
+
+ const { state } = useContext(Store);
+
let history = useHistory()
const classes = useStyles();
const urlParams = new URLSearchParams(window.location.search);
@@ -71,7 +74,8 @@ const CollectionCard = () => {
style={{
textAlign: "center",
padding: "0.5em",
- backgroundColor: "#228B22",
+ backgroundColor: state.contrast === "" ? "#228B22" : "black",
+ border: state.contrast === "" ? "" : "1px solid white",
fontWeight: "500",
color: "#FFFAFA",
}}
@@ -85,7 +89,8 @@ const CollectionCard = () => {
style={{
textAlign: "center",
padding: "0.5em",
- backgroundColor: "#FF8C00",
+ backgroundColor: state.contrast === "" ? "#FF8C00" : "black",
+ border: state.contrast === "" ? "" : "1px solid white",
fontWeight: "500",
color: "#FFFAFA",
}}
@@ -99,7 +104,8 @@ const CollectionCard = () => {
style={{
textAlign: "center",
padding: "0.5em",
- backgroundColor: "#FA8072",
+ backgroundColor: state.contrast === "" ? "#FA8072" : "black",
+ border: state.contrast === "" ? "" : "1px solid white",
fontWeight: "500",
color: "#FFFAFA",
}}
@@ -113,7 +119,8 @@ const CollectionCard = () => {
style={{
textAlign: "center",
padding: "0.5em",
- backgroundColor: "#797D7F ",
+ backgroundColor: state.contrast === "" ? "#797D7F" : "black",
+ border: state.contrast === "" ? "" : "1px solid white",
fontWeight: "500",
color: "#FFFAFA",
}}
@@ -215,13 +222,14 @@ const CollectionCard = () => {
)
}
- const isBlocked = (state) => {
- if (state === "blocked" || state === "banished")
+ const isBlocked = (stateb) => {
+ if (stateb === "blocked" || stateb === "banished")
return <Paper
style={{
textAlign: "center",
padding: "0.5em",
- backgroundColor: "red",
+ backgroundColor: state.contrast === "" ? "red" : "black",
+ border: state.contrast === "" ? "" : "1px solid white",
fontWeight: "500",
color: "#FFFAFA",
}}
@@ -230,23 +238,24 @@ const CollectionCard = () => {
</Paper>
}
- const actionsForBlockedUser = (state) => {
- if (state === "blocked" || state === "banished") {
+ const actionsForBlockedUser = (stateb) => {
+ if (stateb === "blocked" || stateb === "banished") {
return (
- <Button
+ <StyledButton
style={{ width: "100%", marginBottom: "0.5em" }}
variant="contained"
color="secondary"
- startIcon={<RemoveCircleOutlineRoundedIcon />}
+ icon={<RemoveCircleOutlineRoundedIcon />}
onClick={() => ReactiveUser()}
- >
- Desbloquear
- </Button>
+ text="Desbloquear"
+ />
)
}
- return <Typography color="textSecondary">
- Usuário não bloqueado
- </Typography>
+ return (
+ <Typography>
+ Usuário não bloqueado
+ </Typography>
+ )
}
const actionsForStateTeacherRequest = (state) => {
@@ -254,43 +263,43 @@ const CollectionCard = () => {
return (
<Grid container direction="row" spacing={1}>
<Grid item>
- <Button
+ <StyledButton
variant="contained"
color="secondary"
style={{ width: "100%" }}
disabled={
item.submitter_request === "requested" ? false : true
}
- startIcon={
+ icon={
<CloseRoundedIcon style={{ fill: "#FFFAFA" }} />
}
onClick={() => { handleReject(item.id, item.name) }}
- >
- Recusar
- </Button>
+ text="Recusar"
+ />
</Grid>
<Grid item>
- <Button
+ <StyledButton
variant="contained"
color="primary"
style={{ width: "100%" }}
disabled={
item.submitter_request === "requested" ? false : true
}
- startIcon={
+ icon={
<CheckRoundedIcon style={{ fill: "#FFFAFA" }} />
}
onClick={() => { handleAprove(item.id, item.name) }}
- >
- Aceitar
- </Button>
+ text="Aceitar"
+ />
</Grid>
</Grid>
)
}
- return <Typography color="textSecondary">
- Usuário não requisitou conta de professor
- </Typography>
+ return (
+ <Typography>
+ Usuário não requisitou conta de professor
+ </Typography>
+ )
}
const ReactiveUser = () => {
@@ -352,13 +361,12 @@ const CollectionCard = () => {
md={6}
xs={12}
>
- <Card>
+ <StyledCard contrast={state.contrast}>
<CardContent>
<Grid container justify="space-between">
<Grid item xs={12}>
<Typography
className={classes.title}
- color="inherit"
gutterBottom
>
Identificação do usuário
@@ -370,34 +378,31 @@ const CollectionCard = () => {
style={{ textDecoration: "none" }}
to={`/admin/usersList`}
>
- <Button
- startIcon={<ListRoundedIcon />}
+ <StyledButton
+ icon={<ListRoundedIcon />}
color="primary"
variant="outlined"
- >
- Listar
- </Button>
+ text="Listar"
+ />
</Link>
</Grid>
<Grid item>
- <Button
- startIcon={<DeleteRoundedIcon />}
+ <StyledButton
+ icon={<DeleteRoundedIcon />}
color="secondary"
variant="outlined"
onClick={() => { deleteUser(item.id) }}
- >
- Deletar
- </Button>
+ text="Deletar"
+ />
</Grid>
<Grid item>
<Link to={`/admin/EditUser?id=${item.id}`} style={{ textDecoration: "none" }}>
- <Button
- startIcon={<EditRoundedIcon />}
+ <StyledButton
+ icon={<EditRoundedIcon />}
color="primary"
variant="outlined"
- >
- Editar
- </Button>
+ text="Editar"
+ />
</Link>
</Grid>
</Grid>
@@ -412,35 +417,34 @@ const CollectionCard = () => {
</Grid>
<Grid item>
<div className={classes.displayColumn}>
- <Typography color="initial" className={classes.subTitle}>
+ <Typography className={classes.subTitle}>
Nome
</Typography>
- <Typography color="textSecondary">
+ <Typography>
{item.name === null ? "Sem dados" : item.name}
</Typography>
</div>
<div className={classes.displayColumn}>
- <Typography color="initial" className={classes.subTitle}>
+ <Typography className={classes.subTitle}>
Email
</Typography>
{
item.email ?
- <Link to={`/admin/sendEmail?email=${item.email}`} style={{ textDecoration: 'none' }}>
- <Button
- variant='text'
- color='primary'
- startIcon={<EmailRoundedIcon />}
- >
- {item.email}
- </Button>
- </Link> : null
+ <Link to={`/admin/sendEmail?email=${item.email}`} style={{ textDecoration: 'none' }}>
+ <StyledButton
+ variant='text'
+ color='primary'
+ icon={<EmailRoundedIcon style={state.contrast === "" ? {color: "#666"} : {color: "white"}}/>}
+ text={item.email}
+ />
+ </Link> : null
}
</div>
<div className={classes.displayColumn}>
- <Typography color="initial" className={classes.subTitle}>
+ <Typography className={classes.subTitle}>
Cpf
</Typography>
- <Typography color="textSecondary">
+ <Typography>
{item.cpf === null ? "Sem dados" : item.cpf}
</Typography>
</div>
@@ -448,40 +452,40 @@ const CollectionCard = () => {
</Grid>
<Grid>
<div className={classes.displayColumn}>
- <Typography color="initial" className={classes.subTitle}>
+ <Typography className={classes.subTitle}>
Escola
</Typography>
- <Typography color="textSecondary">
+ <Typography>
{item.school ? item.school.name : "Sem dados"}
</Typography>
</div>
<div className={classes.displayColumn}>
- <Typography color="initial" className={classes.subTitle}>
+ <Typography className={classes.subTitle}>
Telefone da escola
</Typography>
- <Typography color="textSecondary">
+ <Typography>
{item.school ? item.school.phone : "Sem dados"}
</Typography>
</div>
<div className={classes.displayColumn}>
- <Typography color="initial" className={classes.subTitle}>
+ <Typography className={classes.subTitle}>
UF
</Typography>
- <Typography color="textSecondary">
+ <Typography>
{item.school ? item.school.uf : "Sem dados"}
</Typography>
</div>
<div className={classes.displayColumn}>
- <Typography color="initial" className={classes.subTitle}>
+ <Typography className={classes.subTitle}>
MunÃcipo
</Typography>
- <Typography color="textSecondary">
+ <Typography>
{item.school ? item.school.city : "Sem dados"}
</Typography>
</div>
</Grid>
</CardContent>
- </Card>
+ </StyledCard>
</Grid>
<Grid
@@ -490,7 +494,7 @@ const CollectionCard = () => {
xs={12}
>
<Grid item>
- <Card>
+ <StyledCard contrast={state.contrast}>
<CardContent>
<Typography variant="h5" component="h2">
Informações do perfil
@@ -505,10 +509,10 @@ const CollectionCard = () => {
<Grid container justify="flex-start">
<Grid item>
<div className={classes.displayColumn}>
- <Typography color="initial" className={classes.subTitle}>
+ <Typography className={classes.subTitle}>
Descrição
</Typography>
- <Typography color="textSecondary">
+ <Typography>
{item.description}
</Typography>
</div>
@@ -517,10 +521,10 @@ const CollectionCard = () => {
<Grid container direction="row" justify="space-between" spacing={1} alignItems="center">
<Grid item>
<div className={classes.displayColumn}>
- <Typography color="initial" className={classes.subTitle}>
+ <Typography className={classes.subTitle}>
Criado em
</Typography>
- <Typography color="textSecondary">
+ <Typography>
{DisplayDate(item.created_at)}
</Typography>
</div>
@@ -528,10 +532,10 @@ const CollectionCard = () => {
<Grid item>
<div className={classes.displayColumn}>
- <Typography color="initial" className={classes.subTitle}>
+ <Typography className={classes.subTitle}>
Atualizado em
</Typography>
- <Typography color="textSecondary">
+ <Typography>
{DisplayDate(item.updated_at)}
</Typography>
</div>
@@ -540,7 +544,7 @@ const CollectionCard = () => {
<Grid item>
<div className={classes.displayColumn}>
- <Typography color="initial" className={classes.subTitle}>
+ <Typography className={classes.subTitle}>
Permissões
</Typography>
<Grid container direction="row">
@@ -548,7 +552,7 @@ const CollectionCard = () => {
item.roles.map((tag, index) => {
return (
<ChipDiv key={index}>
- <Chip label={tag.name} />
+ <Chip label={tag.name} style={state.contrast === "" ? {backgroundColor: "#ddd", color: "black"} : {backgroundColor: "black", color: "white", border: "1px solid white"}} />
</ChipDiv>
)
})
@@ -560,10 +564,10 @@ const CollectionCard = () => {
<Grid container direction="row" spacing={1} justify="space-between" alignItems="center">
<Grid item>
<div className={classes.displayColumn}>
- <Typography color="initial" className={classes.subTitle}>
+ <Typography className={classes.subTitle}>
Nota
</Typography>
- <Typography color="textSecondary">
+ <Typography>
{item.score}
</Typography>
</div>
@@ -571,10 +575,10 @@ const CollectionCard = () => {
<Grid item>
<div className={classes.displayColumn}>
- <Typography color="initial" className={classes.subTitle}>
+ <Typography className={classes.subTitle}>
Seguidores
</Typography>
- <Typography color="textSecondary">
+ <Typography>
{item.follows_count}
</Typography>
</div>
@@ -582,10 +586,10 @@ const CollectionCard = () => {
<Grid item>
<div className={classes.displayColumn}>
- <Typography color="initial" className={classes.subTitle}>
+ <Typography className={classes.subTitle}>
Likes
</Typography>
- <Typography color="textSecondary">
+ <Typography>
{item.likes_count}
</Typography>
</div>
@@ -593,10 +597,10 @@ const CollectionCard = () => {
<Grid item>
<div className={classes.displayColumn}>
- <Typography color="initial" className={classes.subTitle}>
+ <Typography className={classes.subTitle}>
Objetos educacionais
</Typography>
- <Typography color="textSecondary">
+ <Typography>
{item.learning_objects_count}
</Typography>
</div>
@@ -604,10 +608,10 @@ const CollectionCard = () => {
<Grid item>
<div className={classes.displayColumn}>
- <Typography color="initial" className={classes.subTitle}>
+ <Typography className={classes.subTitle}>
Coleções
</Typography>
- <Typography color="textSecondary">
+ <Typography>
{item.collections_count}
</Typography>
</div>
@@ -637,7 +641,7 @@ const CollectionCard = () => {
</Grid>
</Grid>
</CardContent>
- </Card>
+ </StyledCard>
</Grid>
</Grid>
</Grid>
diff --git a/src/Admin/Components/Components/Inputs/CreateInstitution.js b/src/Admin/Components/Components/Inputs/CreateInstitution.js
index a0ba3c1a55a97bc023537d4e7ad0a444a1c0d8ab..e3979c65af7a4ba9a4840562275e2bc85c687519 100644
--- a/src/Admin/Components/Components/Inputs/CreateInstitution.js
+++ b/src/Admin/Components/Components/Inputs/CreateInstitution.js
@@ -16,23 +16,28 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useState } from 'react';
+import React, { useState, useContext } from 'react';
//imports material ui componets
-import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import CardAction from '@material-ui/core/CardActions';
-import { Typography, TextField, Button, Grid } from '@material-ui/core';
+import { Typography, Grid } from '@material-ui/core';
import CircularProgress from '@material-ui/core/CircularProgress';
import AddRoundedIcon from '@material-ui/icons/AddRounded';
import ListRoundedIcon from '@material-ui/icons/ListRounded';
//imports local files
import SnackBar from '../../../../Components/SnackbarComponent';
import { postRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
+import { StyledCard } from "../../../Components/Styles/DataCard";
+import { Store } from 'Store'
+import FormInput from "Components/FormInput.js"
+import StyledButton from '../Button';
//router
import { Link } from 'react-router-dom';
const CreateInstitution = (props) => {
+ const { state } = useContext(Store);
+
const [name, setName] = useState('Nova Instituição');
const [description, setDescription] = useState('');
const [adress, setAdress] = useState('');
@@ -184,7 +189,7 @@ const CreateInstitution = (props) => {
}
]
return (
- <Card>
+ <StyledCard contrast={state.contrast}>
<SnackBar
severity={snackInfo.icon}
text={snackInfo.message}
@@ -206,14 +211,13 @@ const CreateInstitution = (props) => {
</Grid>
<Grid item>
<Link style={{ textDecoration: 'none' }} to={'/admin/institutions'}>
- <Button
+ <StyledButton
onClick={props.BackToList}
- startIcon={<ListRoundedIcon />}
+ icon={<ListRoundedIcon />}
variant='outlined'
color='primary'
- >
- Listar
- </Button>
+ text="Listar"
+ />
</Link>
</Grid>
</Grid>
@@ -222,37 +226,35 @@ const CreateInstitution = (props) => {
<form style={{ display: 'flex', flexDirection: 'column' }}>
{fields.map((field, index) => (
- <TextField
+ <FormInput
+ contrast={state.contrast}
key={index}
required={field.required}
error={field.error}
- helperText={field.error ? field.errorMessage : ''}
+ help={field.error ? field.errorMessage : ''}
style={{ width: '250px', marginBottom: '1em' }}
- label={field.label}
+ placeholder={field.label}
value={field.value}
- onChange={field.onChange}
- type="search"
- multiline={true}
+ handleChange={field.onChange}
+ inputType="search"
+ multi={true}
/>
))}
</form>
</CardContent>
<CardAction>
- <Button
+ <StyledButton
onClick={() => {
onSubmit();
}}
variant="contained"
color="primary"
disabled={isLoading}
- startIcon={isLoading ? null : <AddRoundedIcon />}
- >
- {
- isLoading ? <CircularProgress size={24} /> : 'Adicionar'
- }
- </Button>
+ icon={isLoading ? null : <AddRoundedIcon />}
+ text={isLoading ? <CircularProgress size={24} /> : 'Adicionar'}
+ />
</CardAction>
- </Card>
+ </StyledCard>
);
}
diff --git a/src/Admin/Components/Components/Inputs/CreateLanguage.js b/src/Admin/Components/Components/Inputs/CreateLanguage.js
index 5cca9080607862eeaf69737624770700d5649193..5187839e61a0cce6dad922933e21c8a533108df6 100644
--- a/src/Admin/Components/Components/Inputs/CreateLanguage.js
+++ b/src/Admin/Components/Components/Inputs/CreateLanguage.js
@@ -16,23 +16,28 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useState } from 'react';
+import React, { useState, useContext } from 'react';
//imports material ui componets
-import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import CardAction from '@material-ui/core/CardActions';
-import { Typography, TextField, Button, Grid } from '@material-ui/core';
+import { Typography, Grid } from '@material-ui/core';
import CircularProgress from '@material-ui/core/CircularProgress';
import AddRoundedIcon from '@material-ui/icons/AddRounded';
import ListRoundedIcon from '@material-ui/icons/ListRounded';
//imports local files
import SnackBar from '../../../../Components/SnackbarComponent';
import { postRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
+import { StyledCard } from "../../../Components/Styles/DataCard";
+import { Store } from 'Store'
+import FormInput from "Components/FormInput.js"
+import StyledButton from '../Button';
//router
import { Link } from 'react-router-dom';
const CreateLanguage = (props) => {
+ const { state } = useContext(Store);
+
const [name, setName] = useState('Nova linguagem');
const [code, setCode] = useState('');
@@ -161,7 +166,7 @@ const CreateLanguage = (props) => {
]
return (
- <Card>
+ <StyledCard contrast={state.contrast}>
<SnackBar
severity={snackInfo.icon}
text={snackInfo.message}
@@ -183,14 +188,13 @@ const CreateLanguage = (props) => {
</Grid>
<Grid item>
<Link to={'/admin/languages'} style={{ textDecoration: 'none' }}>
- <Button
+ <StyledButton
onClick={props.BackToList}
- startIcon={<ListRoundedIcon />}
+ icon={<ListRoundedIcon />}
variant='outlined'
color='primary'
- >
- Listar
- </Button>
+ text="Listar"
+ />
</Link>
</Grid>
</Grid>
@@ -199,37 +203,35 @@ const CreateLanguage = (props) => {
<form style={{ display: 'flex', flexDirection: 'column' }}>
{fields.map((field, index) => (
- <TextField
+ <FormInput
+ contrast={state.contrast}
key={index}
required={field.required}
error={field.error}
- helperText={field.error ? field.errorMessage : ''}
+ help={field.error ? field.errorMessage : ''}
style={{ width: '250px', marginBottom: '1em' }}
- label={field.label}
+ placeholder={field.label}
value={field.value}
- onChange={field.onChange}
- type="search"
- multiline={true}
+ handleChange={field.onChange}
+ inputType="search"
+ multi={true}
/>
))}
</form>
</CardContent>
<CardAction>
- <Button
+ <StyledButton
onClick={() => {
onSubmit();
}}
variant="contained"
color="primary"
disabled={isLoading}
- startIcon={isLoading ? null : <AddRoundedIcon />}
- >
- {
- isLoading ? <CircularProgress size={24} /> : 'Adicionar'
- }
- </Button>
+ icon={isLoading ? null : <AddRoundedIcon />}
+ text={isLoading ? <CircularProgress size={24} /> : 'Adicionar'}
+ />
</CardAction>
- </Card>
+ </StyledCard>
)
}
diff --git a/src/Admin/Components/Components/Inputs/CreateQuestion.js b/src/Admin/Components/Components/Inputs/CreateQuestion.js
index 37f15756862f80b7347edb1e79499b7c0106ead5..0c4e03690eaec79529c85245672846b82d77ce4d 100644
--- a/src/Admin/Components/Components/Inputs/CreateQuestion.js
+++ b/src/Admin/Components/Components/Inputs/CreateQuestion.js
@@ -16,12 +16,11 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useState } from 'react';
+import React, { useState, useContext } from 'react';
//imports material ui componets
-import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import CardAction from '@material-ui/core/CardActions';
-import { Typography, TextField, Button, Grid } from '@material-ui/core';
+import { Typography, Grid } from '@material-ui/core';
import CircularProgress from '@material-ui/core/CircularProgress';
import AddRoundedIcon from '@material-ui/icons/AddRounded';
import MenuItem from "@material-ui/core/MenuItem";
@@ -29,11 +28,17 @@ import ListRoundedIcon from '@material-ui/icons/ListRounded';
//imports local files
import { postRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import SnackBar from '../../../../Components/SnackbarComponent';
+import { StyledCard } from "../../../Components/Styles/DataCard";
+import { Store } from 'Store'
+import FormInput from "Components/FormInput.js"
+import StyledButton from '../Button';
//router
import { Link } from 'react-router-dom';
const CreateQuestion = (props) => {
+ const { state } = useContext(Store);
+
const [status, setStatus] = useState('');
const [description, setDescription] = useState('');
@@ -146,7 +151,7 @@ const CreateQuestion = (props) => {
];
return (
- <Card>
+ <StyledCard contrast={state.contrast}>
<SnackBar
severity={snackInfo.icon}
text={snackInfo.message}
@@ -163,19 +168,18 @@ const CreateQuestion = (props) => {
<Grid container direction='row' justify='space-between' alignContent="center" alignItems="center" xs={12}>
<Grid item>
<Typography variant='h4'>
- Nova question
+ Nova pergunta
</Typography>
</Grid>
<Grid item>
<Link to={'/admin/Questions'} style={{ textDecoration: 'none' }}>
- <Button
+ <StyledButton
onClick={props.BackToList}
- startIcon={<ListRoundedIcon />}
+ icon={<ListRoundedIcon />}
variant='outlined'
color='primary'
- >
- Listar
- </Button>
+ text="Listar"
+ />
</Link>
</Grid>
</Grid>
@@ -184,58 +188,55 @@ const CreateQuestion = (props) => {
<form style={{ display: 'flex', flexDirection: 'column' }}>
<>
- <TextField
- select
- label="Status"
+ <FormInput
+ contrast={state.contrast}
+ selectable={true}
+ placeholder="Status"
value={status ? status : ""}
- style={{ width: '250px', marginBottom: '1em' }}
- onChange={handleChange}
- >
- {STATUS_OPTIONS.map((option, index) => (
+ handleChange={handleChange}
+ items={STATUS_OPTIONS.map((option, index) => (
<MenuItem
key={option.value}
value={option.value}
- style={option.value === status ? { color: 'blue' } : { color: 'black' }}
+ className={`${state.contrast}BackColor ${state.contrast}LinkColor`}
>
{
option.label
}
</MenuItem>
))}
- </TextField>
+ />
{fields.map((field, index) => (
- <TextField
+ <FormInput
+ contrast={state.contrast}
key={index}
required={field.required}
error={field.error}
- helperText={field.error ? field.errorMessage : ''}
+ help={field.error ? field.errorMessage : ''}
style={{ width: '250px', marginBottom: '1em' }}
- label={field.label}
+ placeholder={field.label}
value={field.value}
- onChange={field.onChange}
- type="search"
- multiline={true}
+ handleChange={field.onChange}
+ inputType="search"
+ multi={true}
/>
))}
</>
</form>
</CardContent>
<CardAction>
- <Button
+ <StyledButton
onClick={() => {
onSubmit();
}}
variant="contained"
color="primary"
disabled={isLoading}
- startIcon={isLoading ? null : <AddRoundedIcon />}
- >
- {
- isLoading ? <CircularProgress size={24} /> : 'Adicionar'
- }
- </Button>
+ icon={isLoading ? null : <AddRoundedIcon />}
+ text={isLoading ? <CircularProgress size={24} /> : 'Adicionar'}
+ />
</CardAction>
- </Card>
+ </StyledCard>
);
}
diff --git a/src/Admin/Components/Components/Inputs/CreateRating.js b/src/Admin/Components/Components/Inputs/CreateRating.js
index 3837c9e3dbc1eca1b292307af5c5d71046425513..41384ba1bc6e4a13c9cbc8d4bee7db57b8346a46 100644
--- a/src/Admin/Components/Components/Inputs/CreateRating.js
+++ b/src/Admin/Components/Components/Inputs/CreateRating.js
@@ -16,17 +16,20 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useState } from 'react';
+import React, { useState, useContext } from 'react';
//imports material ui componets
-import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import CardAction from '@material-ui/core/CardActions';
-import { Typography, TextField, Button, Grid } from '@material-ui/core';
+import { Typography, Grid } from '@material-ui/core';
import CircularProgress from '@material-ui/core/CircularProgress';
import AddRoundedIcon from '@material-ui/icons/AddRounded';
import ListRoundedIcon from '@material-ui/icons/ListRounded';
//imports local files
import SnackBar from '../../../../Components/SnackbarComponent';
+import { StyledCard } from "../../../Components/Styles/DataCard";
+import { Store } from 'Store'
+import FormInput from "Components/FormInput.js"
+import StyledButton from '../Button';
//imports services
import { postRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
//router
@@ -34,6 +37,8 @@ import {Link} from 'react-router-dom';
const CreateRating = (props) => {
+ const { state } = useContext(Store);
+
const [name, setName] = useState('Novo rating');
const [description, setDescription] = useState('');
@@ -158,7 +163,7 @@ const CreateRating = (props) => {
]
return (
- <Card>
+ <StyledCard contrast={state.contrast}>
<SnackBar
severity={snackInfo.icon}
text={snackInfo.message}
@@ -180,14 +185,13 @@ const CreateRating = (props) => {
</Grid>
<Grid item>
<Link to={'/admin/Ratings'} style={{textDecoration: 'none'}}>
- <Button
+ <StyledButton
onClick={props.BackToList}
- startIcon={<ListRoundedIcon />}
+ icon={<ListRoundedIcon />}
variant='outlined'
color='primary'
- >
- Listar
- </Button>
+ text="Listar"
+ />
</Link>
</Grid>
</Grid>
@@ -196,37 +200,35 @@ const CreateRating = (props) => {
<form style={{ display: 'flex', flexDirection: 'column' }}>
{fields.map((field, index) => (
- <TextField
+ <FormInput
+ contrast={state.contrast}
key={index}
required={field.required}
error={field.error}
- helperText={field.error ? field.errorMessage : ''}
+ help={field.error ? field.errorMessage : ''}
style={{ width: '250px', marginBottom: '1em' }}
- label={field.label}
+ placeholder={field.label}
value={field.value}
- onChange={field.onChange}
- type="search"
- multiline={true}
+ handleChange={field.onChange}
+ inputType="search"
+ multi={true}
/>
))}
</form>
</CardContent>
<CardAction>
- <Button
+ <StyledButton
onClick={() => {
onSubmit();
}}
variant="contained"
color="primary"
disabled={isLoading}
- startIcon={isLoading ? null : <AddRoundedIcon />}
- >
- {
- isLoading ? <CircularProgress size={24} /> : 'Adicionar'
- }
- </Button>
+ icon={isLoading ? null : <AddRoundedIcon />}
+ text={isLoading ? <CircularProgress size={24} /> : 'Adicionar'}
+ />
</CardAction>
- </Card>
+ </StyledCard>
);
}
diff --git a/src/Admin/Components/Components/Inputs/CreateRole.js b/src/Admin/Components/Components/Inputs/CreateRole.js
index 421c8174d7bde52a2abed8ae1249c48f4e01c228..9018399be2e1833641a7d15300df61bd6354068a 100644
--- a/src/Admin/Components/Components/Inputs/CreateRole.js
+++ b/src/Admin/Components/Components/Inputs/CreateRole.js
@@ -16,23 +16,28 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useState } from 'react';
+import React, { useState, useContext } from 'react';
//imports material ui componets
-import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import CardAction from '@material-ui/core/CardActions';
-import { Typography, TextField, Button, Grid } from '@material-ui/core';
+import { Typography, Grid } from '@material-ui/core';
import CircularProgress from '@material-ui/core/CircularProgress';
import AddRoundedIcon from '@material-ui/icons/AddRounded';
import ListRoundedIcon from '@material-ui/icons/ListRounded';
//imports local files
import SnackBar from '../../../../Components/SnackbarComponent';
import { postRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
+import { StyledCard } from "../../../Components/Styles/DataCard";
+import { Store } from 'Store'
+import FormInput from "Components/FormInput.js"
+import StyledButton from '../Button';
//router
import { Link } from 'react-router-dom';
const CreateRole = (props) => {
+ const { state } = useContext(Store);
+
const [name, setName] = useState('Nova role');
const [desc, setDesc] = useState('');
@@ -151,7 +156,7 @@ const CreateRole = (props) => {
]
return (
- <Card>
+ <StyledCard contrast={state.contrast}>
<SnackBar
severity={snackInfo.icon}
text={snackInfo.message}
@@ -173,14 +178,13 @@ const CreateRole = (props) => {
</Grid>
<Grid item>
<Link to={'/admin/permissions'} style={{ textDecoration: 'none' }}>
- <Button
+ <StyledButton
onClick={props.BackToList}
- startIcon={<ListRoundedIcon />}
+ icon={<ListRoundedIcon />}
variant='outlined'
color='primary'
- >
- Listar
- </Button>
+ text="Listar"
+ />
</Link>
</Grid>
</Grid>
@@ -189,37 +193,35 @@ const CreateRole = (props) => {
<form style={{ display: 'flex', flexDirection: 'column' }}>
{fields.map((field, index) => (
- <TextField
+ <FormInput
+ contrast={state.contrast}
key={index}
required={field.required}
error={field.error}
- helperText={field.error ? field.errorMessage : ''}
+ help={field.error ? field.errorMessage : ''}
style={{ width: '250px', marginBottom: '1em' }}
- label={field.label}
+ placeholder={field.label}
value={field.value}
- onChange={field.onChange}
- type="search"
- multiline={true}
+ handleChange={field.onChange}
+ inputType="search"
+ multi={true}
/>
))}
</form>
</CardContent>
<CardAction>
- <Button
+ <StyledButton
onClick={() => {
onSubmit();
}}
variant="contained"
color="primary"
disabled={isLoading}
- startIcon={isLoading ? null : <AddRoundedIcon />}
- >
- {
- isLoading ? <CircularProgress size={24} /> : 'Adicionar'
- }
- </Button>
+ icon={isLoading ? null : <AddRoundedIcon />}
+ text={isLoading ? <CircularProgress size={24} /> : 'Adicionar'}
+ />
</CardAction>
- </Card>
+ </StyledCard>
)
}
diff --git a/src/Admin/Components/Components/Inputs/EditCollection.js b/src/Admin/Components/Components/Inputs/EditCollection.js
index 98b7a38f22c073f9f3c6c5c1863253315491b4c7..3cba5e36158287d28ae7df490c80113764e903a8 100644
--- a/src/Admin/Components/Components/Inputs/EditCollection.js
+++ b/src/Admin/Components/Components/Inputs/EditCollection.js
@@ -16,11 +16,10 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useContext } from 'react';
//imports material ui components
-import { Typography, TextField, Button, Grid } from '@material-ui/core';
+import { Typography, Grid } from '@material-ui/core';
import CircularProgress from '@material-ui/core/CircularProgress';
-import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import CardAction from '@material-ui/core/CardActions';
import ListRoundedIcon from '@material-ui/icons/ListRounded';
@@ -31,6 +30,10 @@ import SnackBar from '../../../../Components/SnackbarComponent';
import { getRequest, putRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import LoadingSpinner from '../../../../Components/LoadingSpinner';
import { EditFilter, GetAData } from '../../../Filters';
+import { StyledCard } from "../../../Components/Styles/DataCard";
+import { Store } from 'Store'
+import FormInput from "Components/FormInput.js"
+import StyledButton from '../Button';
//routers
import { Link } from 'react-router-dom';
import ClassicEditor from "@ckeditor/ckeditor5-build-classic"
@@ -38,6 +41,8 @@ import { CKEditor } from '@ckeditor/ckeditor5-react';
const EditCollection = () => {
+ const { state } = useContext(Store);
+
const urlParams = new URLSearchParams(window.location.search);
const id = urlParams.get("collection");
@@ -169,7 +174,7 @@ const EditCollection = () => {
return <LoadingSpinner text="Carregando..." />
} else {
return (
- <Card>
+ <StyledCard contrast={state.contrast}>
<SnackBar
severity={snackInfo.icon}
text={snackInfo.message}
@@ -191,13 +196,12 @@ const EditCollection = () => {
</Grid>
<Grid item>
<Link style={{ textDecoration: 'none' }} to={'/admin/Collections'}>
- <Button
- startIcon={<ListRoundedIcon />}
+ <StyledButton
+ icon={<ListRoundedIcon />}
variant='outlined'
color='primary'
- >
- Listar
- </Button>
+ text="Listar"
+ />
</Link>
</Grid>
</Grid>
@@ -206,66 +210,63 @@ const EditCollection = () => {
<form style={{ display: 'flex', flexDirection: 'column' }}>
{fields.map((field, index) => (
- <TextField
+ <FormInput
+ contrast={state.contrast}
key={index}
required={field.required}
- disabled={field.default}
+ disableField={field.default}
error={field.error}
- helperText={field.error ? field.errorMessage : ''}
+ help={field.error ? field.errorMessage : ''}
style={{ marginBottom: '1em' }}
- label={field.label}
+ placeholder={field.label}
value={field.value}
- onChange={field.onChange}
- type="search"
- multiline={true}
+ handleChange={field.onChange}
+ inputType="search"
+ multi={true}
/>
))}
- <TextField
- select
- label="Privacidade"
+ <FormInput
+ contrast={state.contrast}
+ selectable={true}
+ placeholder="Privacidade"
value={privacy ? privacy : ""}
- style={{ marginBottom: '1em' }}
- onChange={handleChange}
- >
- {privacyOptions.map((option, index) => (
+ handleChange={handleChange}
+ items={privacyOptions.map((option, index) => (
<MenuItem
key={option.value}
value={option.value}
- style={option.value === privacy ? { color: 'blue' } : { color: 'black' }}
+ className={`${state.contrast}BackColor ${state.contrast}LinkColor`}
>
{
option.value
}
</MenuItem>
))}
- </TextField>
- <CKEditor
- editor={ClassicEditor}
- data={description}
- onBlur={(event, editor) => {
- const data = editor.getData();
- setDescription(data)
- }}
/>
+ <div style={{color: "#666"}}>
+ <CKEditor
+ editor={ClassicEditor}
+ data={description}
+ onBlur={(event, editor) => {
+ const data = editor.getData();
+ setDescription(data)
+ }}
+ />
+ </div>
</form>
</CardContent>
<CardAction>
- <Button
- onClick={() => {
- onSubmit();
- }}
+ <StyledButton
variant="contained"
color="primary"
disabled={isLoading}
- startIcon={isLoading ? null : <SaveIcon />}
- >
- {
- isLoading ? <CircularProgress size={24} /> : 'Salvar'
- }
- </Button>
+ icon={isLoading ? null : <SaveIcon />}
+ onClick={onSubmit}
+ text={isLoading ? <CircularProgress size={24} /> : 'Salvar'}
+ />
</CardAction>
- </Card>
+ </StyledCard>
)
}
}
diff --git a/src/Admin/Components/Components/Inputs/EditEducationalObect.js b/src/Admin/Components/Components/Inputs/EditEducationalObect.js
index 0335f596e6b68e99e450818a4b6c8ffa3ece41bc..3c4aead4b934a212d6e589382cb036a29047a0fe 100644
--- a/src/Admin/Components/Components/Inputs/EditEducationalObect.js
+++ b/src/Admin/Components/Components/Inputs/EditEducationalObect.js
@@ -16,20 +16,19 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useContext } from 'react';
import PropTypes from "prop-types";
import SwipeableViews from "react-swipeable-views";
import moment from "moment";
//imports material ui components
-import { Typography, TextField, Button, Grid } from "@material-ui/core";
+import { Typography, Grid } from "@material-ui/core";
import CircularProgress from "@material-ui/core/CircularProgress";
-import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import CardAction from "@material-ui/core/CardActions";
import ListRoundedIcon from "@material-ui/icons/ListRounded";
import Chip from "@material-ui/core/Chip";
import MenuItem from "@material-ui/core/MenuItem";
-import { useTheme, makeStyles } from "@material-ui/core/styles";
+import { useTheme } from "@material-ui/core/styles";
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";
import Box from "@material-ui/core/Box";
@@ -42,30 +41,25 @@ import {
putRequest,
} from "../../../../Components/HelperFunctions/getAxiosConfig";
import { EditFilter } from "../../../Filters";
+import { StyledCard } from "../../../Components/Styles/DataCard";
+import { Store } from 'Store'
+import FormInput from "Components/FormInput.js"
+import StyledButton from '../Button';
//routers
import { Link } from "react-router-dom";
import ClassicEditor from "@ckeditor/ckeditor5-build-classic"
import { CKEditor } from '@ckeditor/ckeditor5-react';
-const useStyles = makeStyles((theme) => ({
- root: {
- width: "100%",
- maxWidth: 250,
- backgroundColor: theme.palette.background.paper,
- position: "relative",
- overflow: "auto",
- maxHeight: 300,
- },
-}));
-
let text;
const EditEducationalObject = () => {
+
+ const { state } = useContext(Store);
+
const urlParams = new URLSearchParams(window.location.search);
const id = urlParams.get("learnObj");
const theme = useTheme();
- const classes = useStyles();
const [error, setError] = useState(null); //Necessary to consult the API, catch errors
const [isLoaded, setIsLoaded] = useState(false); //Necessary to consult the API, wait until complete
@@ -429,7 +423,7 @@ const EditEducationalObject = () => {
return <LoadingSpinner text="Carregando..." />;
} else {
return (
- <Card variant="outlined">
+ <StyledCard contrast={state.contrast} variant="outlined">
<SnackBar
severity={snackInfo.icon}
text={snackInfo.message}
@@ -461,13 +455,12 @@ const EditEducationalObject = () => {
style={{ textDecoration: "none" }}
to={"/admin/learningObjects"}
>
- <Button
- startIcon={<ListRoundedIcon />}
+ <StyledButton
+ icon={<ListRoundedIcon />}
variant="outlined"
color="primary"
- >
- Listar
- </Button>
+ text="Listar"
+ />
</Link>
</Grid>
</Grid>
@@ -476,9 +469,10 @@ const EditEducationalObject = () => {
value={value}
onChange={handleChangeTab}
indicatorColor="primary"
- textColor="primary"
+ textColor="inherit"
variant="fullWidth"
aria-label="full width tabs example"
+ TabIndicatorProps={{style: {background: state.contrast === "" ? "orange" : "yellow"}}}
>
<Tab label="Resumo" {...a11yProps(0)} />
<Tab label="Descrição" {...a11yProps(1)} />
@@ -490,21 +484,22 @@ const EditEducationalObject = () => {
index={value}
onChangeIndex={handleChangeIndex}
>
- <TabPanel value={value} index={0} dir={theme.direction}>
+
<form style={{ display: "flex", flexDirection: "column" }}>
{fields.map((field, index) => (
- <TextField
+ <FormInput
+ contrast={state.contrast}
key={index}
required={field.required}
- disabled={field.default}
+ disableField={field.default}
error={field.error}
- helperText={field.error ? field.errorMessage : ""}
- style={{ width: "250px", marginBottom: "1em" }}
- label={field.label}
- defaultValue={field.value}
- onBlur={field.onChange}
- type="search"
- multiline
+ help={field.error ? field.errorMessage : ''}
+ style={{ width: '250px', marginBottom: '1em' }}
+ placeholder={field.label}
+ value={field.value}
+ handleChange={field.onChange}
+ inputType="search"
+ multi={true}
/>
))}
{languagesID.map((data) => {
@@ -518,95 +513,99 @@ const EditEducationalObject = () => {
onDelete={
data === "React" ? undefined : handleDeleteLan(data)
}
- className={classes.chip}
+ color="primary"
+ style={state.contrast === "" ? {backgroundColor: "#ddd", color: "black"} : {backgroundColor: "black", color: "white", border: "1px solid white"}}
/>
</li>
);
})}
- <TextField
- id="standard-select-currency"
- select
- label="LÃnguas"
- style={{ width: "250px", marginBottom: "1em" }}
- >
- {listOfLanguages.map((option) => (
+ <FormInput
+ contrast={state.contrast}
+
+ selectable={true}
+ placeholder="LÃnguas"
+ items={listOfLanguages.map((option) => (
<MenuItem
key={option.id}
value={option.name}
onClick={() => {
handleChangeLan(option.id, option.name);
}}
+ className={`${state.contrast}BackColor ${state.contrast}LinkColor`}
>
{option.name}
</MenuItem>
))}
- </TextField>
+ />
<li style={{ listStyleType: "none", marginBottom: "0.5em" }}>
- <Chip label={objectType.name} className={classes.chip} />
+ <Chip label={objectType.name} style={state.contrast === "" ? {backgroundColor: "#ddd", color: "black"} : {backgroundColor: "black", color: "white", border: "1px solid white"}} />
</li>
- <TextField
- id="standard-select-currency"
- select
- label="Object type"
- style={{ width: "250px", marginBottom: "1em" }}
- >
- {listOfObjectTypes.map((option) => (
+ <FormInput
+ contrast={state.contrast}
+ selectable={true}
+ placeholder="Object type"
+ items={listOfObjectTypes.map((option) => (
<MenuItem
key={option.id}
value={option.name}
onClick={() => {
handleChangeObj(option.id, option.name);
}}
+ className={`${state.contrast}BackColor ${state.contrast}LinkColor`}
>
{option.name}
</MenuItem>
))}
- </TextField>
+ />
</form>
- </TabPanel>
-
- <TabPanel value={value} index={1} dir={theme.direction}>
- <CKEditor
- editor={ClassicEditor}
- data={description}
- onBlur={(event, editor) => {
- const data = editor.getData();
- setDescription(data)
- }}
- />
- </TabPanel>
-
- <TabPanel value={value} index={2} dir={theme.direction}>
+
+
+
+ <div style={{color: "#666"}}>
+ <CKEditor
+ editor={ClassicEditor}
+ data={description}
+ onBlur={(event, editor) => {
+ const data = editor.getData();
+ setDescription(data)
+ }}
+ />
+ </div>
+
+
+
<form style={{ display: "flex", flexDirection: "column" }}>
{Imutables.map((field, index) => (
- <TextField
+ <FormInput
+ contrast={state.contrast}
key={index}
- disabled={field.default}
- style={{ width: "250px", marginBottom: "1em" }}
- label={field.label}
- defaultValue={field.value}
+ disableField={field.default}
+ style={{ width: '250px', marginBottom: '1em' }}
+ placeholder={field.label}
+ value={field.value}
/>
))}
</form>
- </TabPanel>
+
</SwipeableViews>
</CardContent>
<CardAction>
- <Button
+ <StyledButton
onClick={() => {
onSubmit();
}}
variant="contained"
color="primary"
disabled={isLoading}
- startIcon={isLoading ? null : <SaveIcon />}
- >
- {isLoading ? <CircularProgress size={24} /> : "Salvar"}
- </Button>
+ icon={isLoading ? null : <SaveIcon />}
+ text={
+ isLoading ? <CircularProgress size={24} /> : 'Salvar'
+ }
+ />
</CardAction>
- </Card>
+ </StyledCard>
);
}
};
diff --git a/src/Admin/Components/Components/Inputs/EditLanguage.js b/src/Admin/Components/Components/Inputs/EditLanguage.js
index c0b71d0ac7607fc968c0fd10145c8be363ad947d..cbb3204fe1e884a07793857e0d21f0fbe1844c8a 100644
--- a/src/Admin/Components/Components/Inputs/EditLanguage.js
+++ b/src/Admin/Components/Components/Inputs/EditLanguage.js
@@ -16,11 +16,10 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useContext } from 'react';
//imports material ui components
-import { Typography, TextField, Button, Grid, ButtonGroup } from '@material-ui/core';
+import { Typography, Grid, ButtonGroup } from '@material-ui/core';
import CircularProgress from '@material-ui/core/CircularProgress';
-import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import CardAction from '@material-ui/core/CardActions';
import ListRoundedIcon from '@material-ui/icons/ListRounded';
@@ -28,6 +27,10 @@ import SaveIcon from '@material-ui/icons/Save';
//imports local files
import SnackBar from '../../../../Components/SnackbarComponent';
import LoadingSpinner from '../../../../Components/LoadingSpinner';
+import { StyledCard } from "../../../Components/Styles/DataCard";
+import { Store } from 'Store'
+import FormInput from "Components/FormInput.js"
+import StyledButton from '../Button';
//imports services
import { getRequest, putRequest, deleteRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import { EditFilter, GetAData, DeleteFilter } from '../../../Filters';
@@ -37,6 +40,8 @@ import { Link, useHistory } from 'react-router-dom';
const EditLanguage = () => {
+ const { state } = useContext(Store);
+
let history = useHistory()
const urlParams = new URLSearchParams(window.location.search);
const id = urlParams.get("language");
@@ -215,7 +220,7 @@ const EditLanguage = () => {
return <LoadingSpinner text="Carregando..." />
} else {
return (
- <Card>
+ <StyledCard contrast={state.contrast}>
<SnackBar
severity={snackInfo.icon}
text={snackInfo.message}
@@ -235,22 +240,20 @@ const EditLanguage = () => {
</Typography>
<ButtonGroup>
<Link style={{ textDecoration: 'none' }} to={'/admin/languages'}>
- <Button
- startIcon={<ListRoundedIcon />}
+ <StyledButton
+ icon={<ListRoundedIcon />}
variant='outlined'
color='primary'
- >
- Listar
- </Button>
+ text="Listar"
+ />
</Link>
- <Button
- startIcon={<DeleteRoundedIcon />}
+ <StyledButton
+ icon={<DeleteRoundedIcon />}
color="secondary"
variant="outlined"
onClick={DeleteHandler}
- >
- Deletar
- </Button>
+ text="Deletar"
+ />
</ButtonGroup>
</Grid>
@@ -258,38 +261,38 @@ const EditLanguage = () => {
<form style={{ display: 'flex', flexDirection: 'column' }}>
{fields.map((field, index) => (
- <TextField
+ <FormInput
+ contrast={state.contrast}
key={index}
required={field.required}
- disabled={field.default}
+ disableField={field.default}
error={field.error}
- helperText={field.error ? field.errorMessage : ''}
- style={{ width: '250px', marginBottom: '1em' }}
- label={field.label}
+ help={field.error ? field.errorMessage : ''}
+ style={{ marginBottom: '1em' }}
+ placeholder={field.label}
value={field.value}
- onChange={field.onChange}
- type="search"
- multiline={true}
+ handleChange={field.onChange}
+ inputType="search"
+ multi={true}
/>
))}
</form>
</CardContent>
<CardAction>
- <Button
+ <StyledButton
onClick={() => {
onSubmit();
}}
variant="contained"
color="primary"
disabled={isLoading}
- startIcon={isLoading ? null : <SaveIcon />}
- >
- {
+ icon={isLoading ? null : <SaveIcon />}
+ text={
isLoading ? <CircularProgress size={24} /> : 'Salvar'
}
- </Button>
+ />
</CardAction>
- </Card>
+ </StyledCard>
)
}
}
diff --git a/src/Admin/Components/Components/Inputs/EditRating.js b/src/Admin/Components/Components/Inputs/EditRating.js
index e4e08aa1025b55885a18bd257529cfe47e647c31..9133c7a56443295924c124f73aa5fca2e7dd4b13 100644
--- a/src/Admin/Components/Components/Inputs/EditRating.js
+++ b/src/Admin/Components/Components/Inputs/EditRating.js
@@ -16,11 +16,10 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useContext } from 'react';
//imports material ui components
-import { Typography, TextField, Button, Grid } from '@material-ui/core';
+import { Typography, Grid } from '@material-ui/core';
import CircularProgress from '@material-ui/core/CircularProgress';
-import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import CardAction from '@material-ui/core/CardActions';
import ListRoundedIcon from '@material-ui/icons/ListRounded';
@@ -28,6 +27,10 @@ import SaveIcon from '@material-ui/icons/Save';
//imports local files
import SnackBar from '../../../../Components/SnackbarComponent';
import LoadingSpinner from '../../../../Components/LoadingSpinner';
+import { StyledCard } from "../../../Components/Styles/DataCard";
+import { Store } from 'Store'
+import FormInput from "Components/FormInput.js"
+import StyledButton from '../Button';
//imports services
import { getRequest, putRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import { EditFilter, GetAData } from '../../../Filters';
@@ -36,6 +39,8 @@ import { Link } from 'react-router-dom';
const EditRating = () => {
+ const { state } = useContext(Store);
+
const urlParams = new URLSearchParams(window.location.search);
const id = urlParams.get("rating");
@@ -194,7 +199,7 @@ const EditRating = () => {
return <LoadingSpinner text="Carregando..." />
} else {
return (
- <Card>
+ <StyledCard contrast={state.contrast}>
<SnackBar
severity={snackInfo.icon}
text={snackInfo.message}
@@ -216,13 +221,12 @@ const EditRating = () => {
</Grid>
<Grid item>
<Link style={{ textDecoration: 'none' }} to={'/admin/Ratings'}>
- <Button
- startIcon={<ListRoundedIcon />}
+ <StyledButton
+ icon={<ListRoundedIcon />}
variant='outlined'
color='primary'
- >
- Listar
- </Button>
+ text="Listar"
+ />
</Link>
</Grid>
</Grid>
@@ -231,38 +235,38 @@ const EditRating = () => {
<form style={{ display: 'flex', flexDirection: 'column' }}>
{fields.map((field, index) => (
- <TextField
+ <FormInput
+ contrast={state.contrast}
key={index}
required={field.required}
- disabled={field.default}
+ disableField={field.default}
error={field.error}
- helperText={field.error ? field.errorMessage : ''}
+ help={field.error ? field.errorMessage : ''}
style={{ width: '250px', marginBottom: '1em' }}
- label={field.label}
+ placeholder={field.label}
value={field.value}
- onChange={field.onChange}
- type="search"
- multiline={true}
+ handleChange={field.onChange}
+ inputType="search"
+ multi={true}
/>
))}
</form>
</CardContent>
<CardAction>
- <Button
+ <StyledButton
onClick={() => {
onSubmit();
}}
variant="contained"
color="primary"
disabled={isLoading}
- startIcon={isLoading ? null : <SaveIcon />}
- >
- {
+ icon={isLoading ? null : <SaveIcon />}
+ text={
isLoading ? <CircularProgress size={24} /> : 'Salvar'
}
- </Button>
+ />
</CardAction>
- </Card>
+ </StyledCard>
)
}
}
diff --git a/src/Admin/Components/Components/Inputs/EditRoles.js b/src/Admin/Components/Components/Inputs/EditRoles.js
index c9c49f583904b97a920884d0539c8834cc5d698c..d7ceb5bdeb113893829101d319e6efea6c24d3e2 100644
--- a/src/Admin/Components/Components/Inputs/EditRoles.js
+++ b/src/Admin/Components/Components/Inputs/EditRoles.js
@@ -16,11 +16,10 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useContext } from 'react';
//imports material ui components
-import { Typography, TextField, Button, Grid } from '@material-ui/core';
+import { Typography, Grid } from '@material-ui/core';
import CircularProgress from '@material-ui/core/CircularProgress';
-import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import CardAction from '@material-ui/core/CardActions';
import ListRoundedIcon from '@material-ui/icons/ListRounded';
@@ -30,6 +29,10 @@ import DeleteRoundedIcon from "@material-ui/icons/DeleteRounded";
//imports local files
import SnackBar from '../../../../Components/SnackbarComponent';
import LoadingSpinner from '../../../../Components/LoadingSpinner';
+import { StyledCard } from "../../../Components/Styles/DataCard";
+import { Store } from 'Store'
+import FormInput from "Components/FormInput.js"
+import StyledButton from '../Button';
//imports services
import { getRequest, putRequest, deleteRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import { EditFilter, GetAData, DeleteFilter } from '../../../Filters';
@@ -37,6 +40,9 @@ import { EditFilter, GetAData, DeleteFilter } from '../../../Filters';
import { Link, useHistory } from 'react-router-dom';
const EditLanguage = () => {
+
+ const { state } = useContext(Store);
+
let history = useHistory()
const urlParams = new URLSearchParams(window.location.search);
const id = urlParams.get("role");
@@ -208,7 +214,7 @@ const EditLanguage = () => {
return <LoadingSpinner text="Carregando..." />
} else {
return (
- <Card>
+ <StyledCard contrast={state.contrast}>
<SnackBar
severity={snackInfo.icon}
text={snackInfo.message}
@@ -228,22 +234,20 @@ const EditLanguage = () => {
</Typography>
<ButtonGroup>
<Link style={{ textDecoration: 'none' }} to={'/admin/permissions'}>
- <Button
- startIcon={<ListRoundedIcon />}
+ <StyledButton
+ icon={<ListRoundedIcon />}
variant='outlined'
color='primary'
- >
- Listar
- </Button>
+ text="Listar"
+ />
</Link>
- <Button
- startIcon={<DeleteRoundedIcon />}
+ <StyledButton
+ icon={<DeleteRoundedIcon />}
color="secondary"
variant="outlined"
onClick={DeleteHandler}
- >
- Deletar
- </Button>
+ text="Deletar"
+ />
</ButtonGroup>
</Grid>
@@ -251,38 +255,38 @@ const EditLanguage = () => {
<form style={{ display: 'flex', flexDirection: 'column' }}>
{fields.map((field, index) => (
- <TextField
+ <FormInput
+ contrast={state.contrast}
key={index}
required={field.required}
- disabled={field.default}
+ disableField={field.default}
error={field.error}
- helperText={field.error ? field.errorMessage : ''}
- style={{ width: '250px', marginBottom: '1em' }}
- label={field.label}
+ help={field.error ? field.errorMessage : ''}
+ style={{ marginBottom: '1em' }}
+ placeholder={field.label}
value={field.value}
- onChange={field.onChange}
- type="search"
- multiline={true}
+ handleChange={field.onChange}
+ inputType="search"
+ multi={true}
/>
))}
</form>
</CardContent>
<CardAction>
- <Button
+ <StyledButton
onClick={() => {
onSubmit();
}}
variant="contained"
color="primary"
disabled={isLoading}
- startIcon={isLoading ? null : <SaveIcon />}
- >
- {
+ icon={isLoading ? null : <SaveIcon />}
+ text={
isLoading ? <CircularProgress size={24} /> : 'Salvar'
}
- </Button>
+ />
</CardAction>
- </Card>
+ </StyledCard>
)
}
}
diff --git a/src/Admin/Components/Components/Inputs/EditUser.js b/src/Admin/Components/Components/Inputs/EditUser.js
index d0953435a8c1565451e85f4ca468fe14d83392fb..fd84adb8d9ec9d188da82fd2e8bfbd3b0b2b4300 100644
--- a/src/Admin/Components/Components/Inputs/EditUser.js
+++ b/src/Admin/Components/Components/Inputs/EditUser.js
@@ -16,11 +16,10 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useContext } from 'react';
//imports material ui components
-import { Typography, TextField, Button, Grid } from '@material-ui/core';
+import { Typography, Grid } from '@material-ui/core';
import CircularProgress from '@material-ui/core/CircularProgress';
-import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import CardAction from '@material-ui/core/CardActions';
import ListRoundedIcon from '@material-ui/icons/ListRounded';
@@ -29,12 +28,17 @@ import { makeStyles } from '@material-ui/core/styles';
import SaveIcon from '@material-ui/icons/Save';
import DeleteRoundedIcon from '@material-ui/icons/DeleteRounded';
import FormControlLabel from '@material-ui/core/FormControlLabel';
-import Switch from '@material-ui/core/Switch';
import AddRoundedIcon from '@material-ui/icons/AddRounded';
import MenuItem from '@material-ui/core/MenuItem';
+
//imports local files
import SnackBar from '../../../../Components/SnackbarComponent';
import LoadingSpinner from '../../../../Components/LoadingSpinner';
+import { StyledCard } from "../../../Components/Styles/DataCard";
+import { Store } from 'Store'
+import FormInput from "Components/FormInput.js"
+import StyledButton from '../Button';
+import { BlueCheckBox, ContrastCheckBox } from "./EmailInputs.js"
//imports services
import { getRequest, putRequest, deleteRequest, postRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import { EditFilter, GetAData } from '../../../Filters';
@@ -56,6 +60,9 @@ const useStyles = makeStyles((theme) => ({
}));
const EditUser = () => {
+
+ const { state } = useContext(Store);
+
const classes = useStyles();
let history = useHistory();
@@ -466,7 +473,7 @@ const EditUser = () => {
return <LoadingSpinner text="Carregando..." />
} else {
return (
- <Card>
+ <StyledCard contrast={state.contrast}>
<SnackBar
severity={snackInfo.icon}
text={snackInfo.message}
@@ -490,26 +497,24 @@ const EditUser = () => {
<Grid container direction="row">
<Grid item>
<Link style={{ textDecoration: 'none' }} to={'/admin/usersList'}>
- <Button
- startIcon={<ListRoundedIcon />}
+ <StyledButton
+ icon={<ListRoundedIcon />}
variant='outlined'
color='primary'
- >
- Listar
- </Button>
+ text="Listar"
+ />
</Link>
</Grid>
{
id !== "-1" ?
<Grid item>
- <Button
- startIcon={<DeleteRoundedIcon />}
+ <StyledButton
+ icon={<DeleteRoundedIcon />}
color="secondary"
variant="outlined"
onClick={() => { deleteUser(id) }}
- >
- Deletar
- </Button>
+ text="Deletar"
+ />
</Grid> : null
}
</Grid>
@@ -519,18 +524,19 @@ const EditUser = () => {
<form style={{ display: 'flex', flexDirection: 'column' }}>
{fields.map((field, index) => (
field.value !== "-1" ?
- <TextField
+ <FormInput
+ contrast={state.contrast}
key={index}
required={field.required}
- disabled={field.default}
+ disableField={field.default}
error={field.error}
- helperText={field.error ? field.errorMessage : ''}
+ help={field.error ? field.errorMessage : ''}
style={{ width: '250px', marginBottom: '1em' }}
- label={field.label}
+ placeholder={field.label}
value={field.value}
- onChange={field.onChange}
- type="search"
- multiline={true}
+ handleChange={field.onChange}
+ inputType="search"
+ multi={true}
/> : null
))}
{userRoles.map((data) => {
@@ -539,32 +545,30 @@ const EditUser = () => {
<Chip
label={data.name}
onDelete={data === 'React' ? undefined : handleDelete(data)}
+ color="primary"
+ style={state.contrast === "" ? {backgroundColor: "#ddd", color: "black"} : {backgroundColor: "black", color: "white", border: "1px solid white"}}
className={classes.chip}
/>
</li>
);
})}
- <TextField
- id="standard-select-currency"
- select
- label="Permissões"
- style={{ width: '250px', marginBottom: '1em' }}
- >
- {rolesList.map((option) => (
- <MenuItem key={option.id} value={option.value} onClick={() => { handleChange(option.id, option.value) }}>
+ <FormInput
+ contrast={state.contrast}
+ selectable={true}
+ placeholder="Permissões"
+ items={rolesList.map((option) => (
+ <MenuItem
+ key={option.id}
+ value={option.value}
+ onClick={() => { handleChange(option.id, option.value) }}
+ className={`${state.contrast}BackColor ${state.contrast}LinkColor`}
+ >
{option.value}
</MenuItem>
))}
- </TextField>
+ />
<FormControlLabel
- control={
- <Switch
- checked={switchState}
- onChange={() => { setSwitchState(!switchState) }}
- name="checkedB"
- color="primary"
- />
- }
+ control={state.contrast === "" ? <BlueCheckBox checked={switchState} onChange={() => { setSwitchState(!switchState) }} name="checkedB"/> : <ContrastCheckBox checked={switchState} onChange={() => { setSwitchState(!switchState) }} name="checkedB"/>}
label="Concorda com os termos de serviço?"
/>
</form>
@@ -572,36 +576,30 @@ const EditUser = () => {
<CardAction>
{
id !== "-1" ?
- <Button
+ <StyledButton
onClick={() => {
onSubmit();
}}
variant="contained"
color="primary"
disabled={isLoading}
- startIcon={isLoading ? null : <SaveIcon />}
- >
- {
- isLoading ? <CircularProgress size={24} /> : 'Salvar'
- }
- </Button>
+ icon={isLoading ? null : <SaveIcon />}
+ text={isLoading ? <CircularProgress size={24} /> : 'Salvar'}
+ />
:
- <Button
+ <StyledButton
onClick={() => {
onCreate();
}}
variant="contained"
color="primary"
disabled={isLoading}
- startIcon={isLoading ? null : <AddRoundedIcon />}
- >
- {
- isLoading ? <CircularProgress size={24} /> : 'Criar'
- }
- </Button>
+ icon={isLoading ? null : <AddRoundedIcon />}
+ text={isLoading ? <CircularProgress size={24} /> : 'Criar'}
+ />
}
</CardAction>
- </Card>
+ </StyledCard>
)
}
}
diff --git a/src/Admin/Components/Components/Inputs/EmailInputs.js b/src/Admin/Components/Components/Inputs/EmailInputs.js
index f75e8b482316ff43cea4ddff066ef9896ef81798..0a5df002cfb1f6c2f05b47b8dc93f6e6405bb097 100644
--- a/src/Admin/Components/Components/Inputs/EmailInputs.js
+++ b/src/Admin/Components/Components/Inputs/EmailInputs.js
@@ -16,23 +16,25 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useState } from "react";
+import React, { useState, useContext } from "react";
//material ui components
-import TextField from "@material-ui/core/TextField";
import MenuItem from "@material-ui/core/MenuItem";
import FormGroup from "@material-ui/core/FormGroup";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import CircularProgress from "@material-ui/core/CircularProgress";
import Checkbox from "@material-ui/core/Checkbox";
import SendRoundedIcon from "@material-ui/icons/SendRounded";
-import Button from "@material-ui/core/Button";
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles, withStyles } from '@material-ui/core/styles';
import Chip from '@material-ui/core/Chip';
+import { yellow, blue } from "@material-ui/core/colors";
//imports from local files
import SnackBar from "../../../../Components/SnackbarComponent";
import { postRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import ClassicEditor from "@ckeditor/ckeditor5-build-classic"
import { CKEditor } from '@ckeditor/ckeditor5-react';
+import { Store } from 'Store'
+import FormInput from "Components/FormInput.js"
+import StyledButton from '../Button';
const useStyles = makeStyles((theme) => ({
root: {
@@ -48,7 +50,30 @@ const useStyles = makeStyles((theme) => ({
},
}));
+export const BlueCheckBox = withStyles({
+ root: {
+ color: blue[400],
+ '&$checked': {
+ color: blue[600],
+ },
+ },
+ checked: {},
+})((props) => <Checkbox color="default" {...props} />);
+
+export const ContrastCheckBox = withStyles({
+ root: {
+ color: yellow[400],
+ '&$checked': {
+ color: yellow[600],
+ },
+ },
+ checked: {},
+})((props) => <Checkbox color="default" {...props} />);
+
const EmailInputs = (props) => {
+
+ const { state } = useContext(Store);
+
const classes = useStyles();
const [option, setOption] = useState(props.email ? "Emails" : "All"); //labels of the text field 'to'
const [isToEmails, setIsToEmails] = useState(props.email ? true : false)
@@ -371,31 +396,31 @@ const EmailInputs = (props) => {
}
/>
- <TextField
+ <FormInput
+ contrast={state.contrast}
id="outlined-input"
- label="De *"
- defaultValue="integrada.contato@mec.gov.br"
- variant="outlined"
- disabled={true}
- />
+ disableField={true}
+ placeholder="De *"
+ value="integrada.contato@mec.gov.br"
+ />
<div style={{ height: "1em" }} />
-
- <TextField
- select
- label="Para *"
+ <FormInput
+ contrast={state.contrast}
+ selectable={true}
+ placeholder="Para *"
value={option ? option : ""}
- onChange={handleChange}
- helperText="Por favor, selecione uma das opções"
- >
- {options.map((option, index) => (
+ handleChange={handleChange}
+ help="Por favor, selecione uma das opções"
+ items={options.map((option, index) => (
<MenuItem
key={option.value}
value={option.value}
+ className={`${state.contrast}BackColor ${state.contrast}LinkColor`}
>
{option.label}
</MenuItem>
))}
- </TextField>
+ />
<div style={{ height: "1em" }} />
{
isToRoles &&
@@ -403,14 +428,7 @@ const EmailInputs = (props) => {
{roles.map((role, index) => (
<FormControlLabel
key={index}
- control={
- <Checkbox
- checked={role.isChecked}
- onChange={() => handleChangeCheckBox(index)}
- name={role.label}
- color="primary"
- />
- }
+ control={props.contrast === "" ? <BlueCheckBox checked={role.isChecked} onChange={() => handleChangeCheckBox(index)} name={role.label}/> : <ContrastCheckBox checked={role.isChecked} onChange={() => handleChangeCheckBox(index)} name={role.label}/>}
label={role.label}
/>
))}
@@ -433,42 +451,41 @@ const EmailInputs = (props) => {
<Chip
label={email}
onDelete={() => HandleDelete(index)}
+ color="primary"
+ style={state.contrast === "" ? {backgroundColor: "#ddd", color: "black"} : {backgroundColor: "black", color: "white", border: "1px solid white"}}
classes={classes.chip}
/>
</li>
))}
</div>
- <TextField
+ <FormInput
+ contrast={state.contrast}
id="outlined-input"
- label="Emails"
- rows={1}
error={errorInEmails.error}
- helperText={errorInEmails.message}
+ help={errorInEmails.message}
value={emails}
onKeyPress={(key) => OnKeyPressHandler(key.which)}
- onChange={EmailsHandler}
- // onBlur={ShowEmails}
+ handleChange={EmailsHandler}
placeholder="Digite um email por vez e pressione Enter"
- variant="outlined"
style={{ marginBottom: "1em" }}
/>
</>
}
- <TextField
+ <FormInput
+ contrast={state.contrast}
id="outlined-input"
- label="Assunto"
- value={subject}
error={errorInSubject.error}
- helperText={errorInSubject.message}
+ help={errorInSubject.message}
+ value={subject}
+ onKeyPress={(key) => OnKeyPressHandler(key.which)}
+ handleChange={SubjectHandler}
placeholder="Digite o assunto do email"
- onChange={SubjectHandler}
- variant="outlined"
/>
</form >
<div style={{ height: "1em" }} />
- <div style={{ flex: 1 }}>
+ <div style={{ flex: 1, color: "#666" }}>
<CKEditor
editor={ClassicEditor}
data={message}
@@ -478,23 +495,23 @@ const EmailInputs = (props) => {
}}
/>
</div>
-
+ {/*
<div style={{ fontSize: 14 }}>
* Se você deseja enviar foto da sua máquina, é preciso <a href="mailto:name@email.com">Clicar aqui</a>
</div>
+ */}
<div style={{ marginTop: 18 }}>
- <Button
+ <StyledButton
onClick={() => {
submitRequest();
}}
variant="contained"
disabled={isSending}
color="primary"
- startIcon={<SendRoundedIcon />}
- >
- {isSending ? <CircularProgress size={24} /> : "Enviar"}
- </Button>
+ icon={<SendRoundedIcon />}
+ text={isSending ? <CircularProgress size={24} /> : "Enviar"}
+ />
</div>
</div >
);
diff --git a/src/Admin/Components/Components/Inputs/IntitutionsInputs.js b/src/Admin/Components/Components/Inputs/IntitutionsInputs.js
index 874879d4c095fd1e9cfeee7279d7898621106081..eacbd7f0307afc72f6796bf37a634ca59019a075 100644
--- a/src/Admin/Components/Components/Inputs/IntitutionsInputs.js
+++ b/src/Admin/Components/Components/Inputs/IntitutionsInputs.js
@@ -16,12 +16,10 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useContext } from 'react';
//imports material ui components
-import { TextField, Button } from '@material-ui/core';
import CircularProgress from '@material-ui/core/CircularProgress';
import SaveIcon from '@material-ui/icons/Save';
-import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import Typography from "@material-ui/core/Typography";
import ListRoundedIcon from "@material-ui/icons/ListRounded";
@@ -29,6 +27,10 @@ import Grid from "@material-ui/core/Grid";
//imports local files
import SnackBar from '../../../../Components/SnackbarComponent';
import LoadingSpinner from '../../../../Components/LoadingSpinner';
+import { StyledCard } from "../../../Components/Styles/DataCard";
+import { Store } from 'Store'
+import FormInput from "Components/FormInput.js";
+import StyledButton from '../Button';
//imports services
import { putRequest, getRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import { EditFilter, GetAData } from '../../../Filters';
@@ -37,6 +39,8 @@ import { Link } from 'react-router-dom';
const EditInstitution = () => {
+ const { state } = useContext(Store);
+
const urlParams = new URLSearchParams(window.location.search);
const id = urlParams.get("institution");
@@ -218,7 +222,7 @@ const EditInstitution = () => {
return <LoadingSpinner text="Carregando..." />
} else {
return (
- <Card>
+ <StyledCard contrast={state.contrast}>
<SnackBar
severity={snackInfo.icon}
text={snackInfo.message}
@@ -245,13 +249,12 @@ const EditInstitution = () => {
<Grid item>
<Link style={{ textDecoration: 'none' }} to={`/admin/institutions`}>
- <Button
- startIcon={<ListRoundedIcon />}
+ <StyledButton
+ icon={<ListRoundedIcon />}
color="primary"
variant="outlined"
- >
- Listar
- </Button>
+ text="Listar"
+ />
</Link>
</Grid>
</Grid>
@@ -260,40 +263,39 @@ const EditInstitution = () => {
<div>
<form style={{ display: 'flex', flexDirection: 'column' }}>
{fields.map((field, index) => (
- <TextField
+ <FormInput
+ contrast={state.contrast}
key={index}
required={field.required}
+ disableField={field.default}
error={field.error}
- helperText={field.error ? field.errorMessage : ''}
- style={{ width: '250px', marginBottom: '1em' }}
- label={field.label}
+ help={field.error ? field.errorMessage : ''}
+ style={{ marginBottom: '1em' }}
+ placeholder={field.label}
value={field.value}
- onChange={field.onChange}
- type="search"
- multiline={true}
+ handleChange={field.onChange}
+ inputType="search"
+ multi={true}
/>
))}
</form>
</div>
<div>
- <Button
+ <StyledButton
onClick={() => {
onSubmit();
}}
variant="contained"
color="primary"
disabled={isLoading}
- startIcon={isLoading ? null : <SaveIcon />}
- >
- {
- isLoading ? <CircularProgress size={24} /> : 'Salvar'
- }
- </Button>
+ icon={isLoading ? null : <SaveIcon />}
+ text={isLoading ? <CircularProgress size={24} /> : 'Salvar'}
+ />
</div>
</div>
</CardContent>
- </Card>
+ </StyledCard>
);
}
}
diff --git a/src/Admin/Components/Components/Inputs/NoteVarInputs.js b/src/Admin/Components/Components/Inputs/NoteVarInputs.js
index 96b951f99289e01ce4f3d6dc0a7e2a3db44678f9..69ee311eaf26de19711bc30d2288364dafafb8ee 100644
--- a/src/Admin/Components/Components/Inputs/NoteVarInputs.js
+++ b/src/Admin/Components/Components/Inputs/NoteVarInputs.js
@@ -16,12 +16,10 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useContext } from 'react';
//imports material ui components
-import { TextField, Button } from '@material-ui/core';
import CircularProgress from '@material-ui/core/CircularProgress';
import SaveIcon from '@material-ui/icons/Save';
-import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import Typography from "@material-ui/core/Typography";
import ListRoundedIcon from "@material-ui/icons/ListRounded";
@@ -29,6 +27,10 @@ import Grid from '@material-ui/core/Grid';
//imports local files
import SnackBar from '../../../../Components/SnackbarComponent';
import LoadingSpinner from '../../../../Components/LoadingSpinner';
+import { StyledCard } from "../../../Components/Styles/DataCard";
+import { Store } from 'Store'
+import FormInput from "Components/FormInput.js"
+import StyledButton from '../Button';
//imports services
import { getRequest, putRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import { EditFilter, GetAData } from '../../../Filters';
@@ -37,6 +39,8 @@ import { Link } from 'react-router-dom';
const NoteVarInputs = () => {
+ const { state } = useContext(Store);
+
const urlParams = new URLSearchParams(window.location.search);
const id = urlParams.get("id");
@@ -222,7 +226,7 @@ const NoteVarInputs = () => {
return <LoadingSpinner text="Carregando..." />
} else {
return (
- <Card>
+ <StyledCard contrast={state.contrast}>
<SnackBar
severity={snackInfo.icon}
text={snackInfo.message}
@@ -250,52 +254,51 @@ const NoteVarInputs = () => {
<Grid>
<Link style={{ textDecoration: 'none' }} to={`/admin/noteVars`}>
- <Button
- startIcon={<ListRoundedIcon />}
+ <StyledButton
+ icon={<ListRoundedIcon />}
color="primary"
variant="outlined"
- >
- Listar
- </Button>
+ text="Listar"
+ />
</Link>
</Grid>
</Grid>
<form style={{ display: 'flex', flexDirection: 'column' }}>
{fields.map((field, index) => (
- <TextField
+ <FormInput
+ contrast={state.contrast}
key={index}
+ disableField={field.default}
error={field.error}
- disabled={field.default}
- helperText={field.error ? field.errorMessage : ''}
+ help={field.error ? field.errorMessage : ''}
style={{ width: '250px', marginBottom: '1em' }}
- label={field.label}
+ placeholder={field.label}
value={field.value}
- onChange={field.onChange}
- type={field.type}
- multiline={true}
+ handleChange={field.onChange}
+ inputType={field.type}
+ multi={true}
/>
))}
</form>
<div>
- <Button
+ <StyledButton
onClick={() => {
onSubmit();
}}
variant="contained"
color="primary"
disabled={isLoading}
- startIcon={isLoading ? null : <SaveIcon />}
- >
- {
+ icon={isLoading ? null : <SaveIcon />}
+ text={
isLoading ? <CircularProgress size={24} /> : 'Salvar'
}
- </Button>
+ />
</div>
</CardContent>
- </Card>
+ </StyledCard>
)
}
}
diff --git a/src/Admin/Components/Components/MobileComponents/MobilePageHeader.js b/src/Admin/Components/Components/MobileComponents/MobilePageHeader.js
index f3520c9f12319310eba1544dd60d551aa001a29e..56255c2b696ec0a31dbeff1d87a8ff82ca5a9388 100644
--- a/src/Admin/Components/Components/MobileComponents/MobilePageHeader.js
+++ b/src/Admin/Components/Components/MobileComponents/MobilePageHeader.js
@@ -16,17 +16,20 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React from "react";
+import React, { useContext } from "react";
import Paper from "@material-ui/core/Paper"
import Grid from "@material-ui/core/Grid"
import Button from "@material-ui/core/Button"
import Typography from "@material-ui/core/Typography"
import CircularProgress from "@material-ui/core/CircularProgress"
+import styled from 'styled-components'
+import { Store } from 'Store'
const MobilePageHeader = (props) => {
+ const { state } = useContext(Store);
return (
- <Paper style={{ padding: "1em" }}>
- <Grid container spacing={3} direction="row" alignItems="center">
+ <Paper style={{ marginBottom: "2em", marginTop: "2em", marginLeft: "1em", marginRight: "1em" }}>
+ <StyledGrid contrast={state.contrast} container spacing={3} direction="row" alignItems="center">
<Grid item xs={12}>
<Typography variant="h4">{props.title}</Typography>
</Grid>
@@ -38,7 +41,8 @@ const MobilePageHeader = (props) => {
{props.actions.map((act, index) => {
return (
<Grid item key={act.name}>
- <Button
+ <StyledButton
+ contrast={state.contrast}
variant="contained"
color="secondary"
disabled={act.isLoading}
@@ -46,16 +50,35 @@ const MobilePageHeader = (props) => {
startIcon={act.icon}
>
{act.isLoading ? <CircularProgress size={24} /> : act.name}
- </Button>
+ </StyledButton>
</Grid>
)
})}
</Grid>
</Grid>
- </Grid>
+ </StyledGrid>
{props.children}
</Paper>
)
}
+const StyledGrid = styled(Grid)`
+ background-color: ${props => props.contrast === "" ? "white" : "black"};
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ border: 1px solid ${props => props.contrast === "" ? "#666" : "white"};
+ border-radius: 10px;
+ border-radius: 10px;
+`
+
+const StyledButton = styled(Button)`
+ background-color: ${props => props.contrast === "" ? "" : "black !important"};
+ color: ${props => props.contrast === "" ? "" : "yellow !important"};
+ border: 1px solid ${props => props.contrast === "" ? "" : "white !important"};
+ text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"};
+ :hover {
+ background-color: rgba(255,255,0,0.24) !important;
+ }
+`
+
+
export default MobilePageHeader;
\ No newline at end of file
diff --git a/src/Admin/Components/Components/MobileComponents/SimpleList.js b/src/Admin/Components/Components/MobileComponents/SimpleList.js
index f7afb24bc6b5a48f775d7561b71ceb57fe65b392..6f787e41a81757c068d9ab4b359d36bc1a97dfb6 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/PageHeader.js b/src/Admin/Components/Components/PageHeader.js
index beef3c04f372e78dec96dbe82d252e787555e7e9..b2110129d04445823893f2f89e93211468b707af 100644
--- a/src/Admin/Components/Components/PageHeader.js
+++ b/src/Admin/Components/Components/PageHeader.js
@@ -16,17 +16,20 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React from "react";
+import React, { useContext } from "react";
import Paper from "@material-ui/core/Paper"
import Grid from "@material-ui/core/Grid"
import Button from "@material-ui/core/Button"
import Typography from "@material-ui/core/Typography"
import CircularProgress from "@material-ui/core/CircularProgress"
+import styled from 'styled-components'
+import { Store } from 'Store'
const PageHeader = (props) => {
+ const { state } = useContext(Store);
return (
- <Paper style={{ padding: "1em" }}>
- <Grid container spacing={3} direction="row" alignItems="center">
+ <Paper style={{marginBottom: "2em", marginTop: "2em", marginLeft: "1em", marginRight: "1em"}}>
+ <StyledGrid contrast={state.contrast} container spacing={3} direction="row" alignItems="center">
<Grid item xs={6}>
<Typography variant="h4">{props.title}</Typography>
</Grid>
@@ -38,24 +41,49 @@ const PageHeader = (props) => {
{props.actions.map((act, index) => {
return (
<Grid item key={act.name}>
- <Button
+ <StyledButton
+ contrast={state.contrast}
variant="contained"
- color="secondary"
disabled={act.isLoading}
onClick={act.func}
startIcon={act.icon}
>
- {act.isLoading ? <CircularProgress size={24} /> : act.name}
- </Button>
+ <div style={state.contrast === "" ? {color: "white"} : {color: "yellow"}}>
+ {act.isLoading ? <CircularProgress size={24} /> : act.name}
+ </div>
+ </StyledButton>
</Grid>
)
})}
</Grid>
</Grid>
- </Grid>
+ </StyledGrid>
{props.children}
</Paper>
)
}
+const StyledGrid = styled(Grid)`
+ background-color: ${props => props.contrast === "" ? "white" : "black"};
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ border: 1px solid ${props => props.contrast === "" ? "#666" : "white"};
+ border-radius: 10px;
+`
+
+const StyledButton = styled(Button)`
+ background-color: ${props => props.contrast === "" ? "#ff7f00" : "black"} !important;
+ color: white !important;
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline yellow"} !important;
+ border: 1px solid ${props => props.contrast === "" ? "" : "white"} !important;
+`
+
+export const StyledFilter = styled.div`
+ background-color: ${props => props.contrast === "" ? "white" : "black"};
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ border: 1px solid ${props => props.contrast === "" ? "#666" : "white"};
+ border-radius: 0 0 10px 10px;
+ padding: 10px;
+ margin-top: 10px;
+`
+
export default PageHeader;
\ No newline at end of file
diff --git a/src/Admin/Components/Components/Table.js b/src/Admin/Components/Components/Table.js
index ddb7a377b4fea041f52c881835700312b7f8e6c8..3fbba67f1c58cea2cca69e2f43ab3e4f03cda7de 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/Components/Components/Unauthorized.js b/src/Admin/Components/Components/Unauthorized.js
index 3408a5761c77534efe53f7bbb2dbe6303709eca2..558f3422190d8e72c8d15d075c3167cf7ac03e0a 100644
--- a/src/Admin/Components/Components/Unauthorized.js
+++ b/src/Admin/Components/Components/Unauthorized.js
@@ -16,19 +16,17 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, {useState, useContext} from 'react';
+import React, {useState} from 'react';
import SnackBar from '../../../Components/SnackbarComponent';
import { Link } from 'react-router-dom';
import styled from "styled-components";
-import { Store } from '../../../Store'
-const Unauthorized = () => {
- const { state } = useContext(Store);
+const Unauthorized = (props) => {
const [openSnack, setOpenSnack] = useState(true);
return (
- <ContentDiv contrast={state.contrast} style={{ textAlign: 'center' }}>
+ <ContentDiv contrast={props.contrast} style={{ textAlign: 'center' }}>
<SnackBar
severity='warning'
text='Você não tem as permissões necessárias'
diff --git a/src/Admin/Components/Components/Welcome.js b/src/Admin/Components/Components/Welcome.js
index 47e4f942e27534ce052b96183368b931c9fb77b1..4780d2bda753710d1612bc56c1da37c5805d84ca 100644
--- a/src/Admin/Components/Components/Welcome.js
+++ b/src/Admin/Components/Components/Welcome.js
@@ -21,8 +21,8 @@ import {Styles} from '../Styles/WelcomeStyle';
// This file is a component that says welcome to the user
-const Welcome = () => {
- const classes = Styles();
+const Welcome = (props) => {
+ const classes = Styles(props.contrast);
return(
<div style={classes.welcomeContainer}>
<p style={classes.welcomeTitle}>
@@ -34,5 +34,8 @@ const Welcome = () => {
</div>
);
}
-
+/*
+ <div style={props.contrast === "" ? classes.welcomeContainer : classes.welcomeContainerContrast}>
+ <p style={props.contrast === "" ? classes.welcomeTitle : classes.welcomeTitleContrast}>
+*/
export default Welcome;
\ No newline at end of file
diff --git a/src/Admin/Components/Styles/DataCard.js b/src/Admin/Components/Styles/DataCard.js
index 17083da50639dd57f55aaedbfd45f1f9a825735c..f0f98c0766472f195f8b2ddf7a028ac383b62316 100644
--- a/src/Admin/Components/Styles/DataCard.js
+++ b/src/Admin/Components/Styles/DataCard.js
@@ -16,7 +16,9 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
+import Card from "@material-ui/core/Card";
import { makeStyles } from "@material-ui/core/styles";
+import styled from 'styled-components'
const useStyles = makeStyles({
table: {
@@ -53,4 +55,10 @@ const useStyles = makeStyles({
}
});
-export { useStyles };
\ No newline at end of file
+const StyledCard = styled(Card)`
+ background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
+ color: ${props => props.contrast === "" ? "#666" : "white"} !important;
+ border: 1px solid ${props => props.contrast === "" ? "#666" : "white"} !important;
+`
+
+export { useStyles, StyledCard };
\ No newline at end of file
diff --git a/src/Admin/Components/Styles/WelcomeStyle.js b/src/Admin/Components/Styles/WelcomeStyle.js
index 11364da864132b3ad83519ac3eaff9704ac81b7d..508848db03916b7b6ad12010329ba07f13e85e9f 100644
--- a/src/Admin/Components/Styles/WelcomeStyle.js
+++ b/src/Admin/Components/Styles/WelcomeStyle.js
@@ -16,12 +16,11 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-const Styles = () => ({
+const Styles = (contrast) => ({
welcomeContainer : {
- padding : '1em 1em',
- borderRadius : '22px',
- backgroundColor : 'white',
- boxShadow : '2px 2px 1px #A9A9A9'
+ padding: '1em',
+ borderRadius : '10px',
+ border: `1px solid ${contrast === "" ? "#666" : "white"}`
},
welcomeTitle : {
fontWeight : 'bold',
diff --git a/src/Admin/Pages/Pages/SubPages/Activity.js b/src/Admin/Pages/Pages/SubPages/Activity.js
index c87c1b25fd2b7ce07aac8c36adf11909a794cd9a..c6259b382ad886b4bef8f8a208883f4cf53833d4 100644
--- a/src/Admin/Pages/Pages/SubPages/Activity.js
+++ b/src/Admin/Pages/Pages/SubPages/Activity.js
@@ -16,7 +16,7 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useEffect, useState } from "react"
+import React, { useEffect, useState, useContext } from "react"
import moment from 'moment'
//imports from local files
import TableData from "../../../Components/Components/Table"
@@ -25,16 +25,16 @@ import { Url } from "../../../Filters"
import { getRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import LoadingSpinner from '../../../../Components/LoadingSpinner'
import MobilePageHeader from '../../../Components/Components/MobileComponents/MobilePageHeader'
-import PageHeader from '../../../Components/Components/PageHeader'
+import PageHeader, { StyledFilter } from '../../../Components/Components/PageHeader'
+import { StyledLoadMoreButton, StyledDivButton, useStylesCell, useStylesRow } from "./Collections.js";
+import FormInput from "Components/FormInput.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"
import TableRow from "@material-ui/core/TableRow"
-import TextField from "@material-ui/core/TextField"
import IconButton from "@material-ui/core/IconButton"
-import { Button, Paper } from "@material-ui/core"
+import { Button } from "@material-ui/core"
import CircularProgress from "@material-ui/core/CircularProgress"
import AddRoundedIcon from "@material-ui/icons/AddRounded"
import UpdateRoundedIcon from "@material-ui/icons/UpdateRounded"
@@ -44,27 +44,16 @@ import AllOutIcon from "@material-ui/icons/AllOut"
//routers
import { Link } from 'react-router-dom'
import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
-import styled from "styled-components"
-
-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);
+
+import { Store } from 'Store'
const Activity = () => {
+
+ const { state } = useContext(Store)
+
+ const classesCell = useStylesCell(state);
+ const classesRow = useStylesRow(state);
+
const ADD_ONE_LENGHT = [""];
const TOP_LABELS = [
"CRIADO EM",
@@ -83,6 +72,7 @@ const Activity = () => {
const [showFilter, setShowFilter] = useState(false);
const [option, setOption] = useState(); //labels of the text field 'to'
const [currPage, setCurrPage] = useState(0)
+ const [forceUpdate, setForceUpdate] = useState(false)
const [snackInfo, setSnackInfo] = useState({
message: "",
@@ -162,7 +152,7 @@ const Activity = () => {
setError(true)
}
)
- }, [currPage, option])
+ }, [currPage, option, forceUpdate])
useEffect(() => {
setOption()
@@ -200,6 +190,7 @@ const Activity = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -214,40 +205,40 @@ const Activity = () => {
]}
>
{showFilter ? (
- <>
- <div style={{ height: "1em" }}></div>
+ <StyledFilter contrast={state.contrast}>
<div style={{ alignSelf: "flex-end" }}>
- <TextField
- select
- label="Filtro"
- value={option ? option : ""}
- onChange={handleChange}
- helperText="Por favor, selecione uma das opções"
- >
- {options.map((option, index) => (
- <MenuItem
- key={option.value}
- value={option.name}
- name={option.value}
- >
- {option.value}
- </MenuItem>
- ))}
- </TextField>
+ <FormInput
+ contrast={state.contrast}
+ selectable={true}
+ placeholder="Filtro"
+ value={option ? option : ""}
+ handleChange={handleChange}
+ help="Por favor, selecione uma das opções"
+ items={options.map((option, index) => (
+ <MenuItem
+ key={option.value}
+ value={option.name}
+ name={option.value}
+ className={`${state.contrast}BackColor ${state.contrast}LinkColor`}
+ >
+ {option.value}
+ </MenuItem>
+ ))}
+ />
</div>
- </>
+ </StyledFilter>
) : null}
</MobilePageHeader>
- <div style={{ height: "2em" }}></div>
-
{items.map((row, index) =>
index === items.length - 1 ? (
<StyledDivButton
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
>
- <Button
+ <StyledLoadMoreButton
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
color="primary"
variant="text"
@@ -263,11 +254,12 @@ const Activity = () => {
) : (
"Carregar mais itens"
)}
- </Button>
+ </StyledLoadMoreButton>
</StyledDivButton>
) : (
<>
<MobileList
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
title={row.id}
subtitle={row.privacy}
@@ -295,7 +287,6 @@ const Activity = () => {
]
}
/>
- <div style={{ height: "0.5em" }} />
</>
)
)}
@@ -325,6 +316,7 @@ const Activity = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -339,41 +331,39 @@ const Activity = () => {
]}
>
{showFilter ? (
- <>
- <div style={{ height: "1em" }}></div>
+ <StyledFilter contrast={state.contrast}>
<div style={{ alignSelf: "flex-end" }}>
- <TextField
- select
- label="Filtro"
- value={option ? option : ""}
- onChange={handleChange}
- helperText="Por favor, selecione uma das opções"
- >
- {options.map((option, index) => (
- <MenuItem
- key={option.value}
- value={option.name}
- name={option.value}
- >
- {option.value}
- </MenuItem>
- ))}
- </TextField>
+ <FormInput
+ contrast={state.contrast}
+ selectable={true}
+ placeholder="Filtro"
+ value={option ? option : ""}
+ handleChange={handleChange}
+ help="Por favor, selecione uma das opções"
+ items={options.map((option, index) => (
+ <MenuItem
+ key={option.value}
+ value={option.name}
+ name={option.value}
+ className={`${state.contrast}BackColor ${state.contrast}LinkColor`}
+ >
+ {option.value}
+ </MenuItem>
+ ))}
+ />
</div>
- </>
+ </StyledFilter>
) : null}
</PageHeader>
- <div style={{ height: "2em" }}></div>
-
<TableData top={TOP_LABELS}>
<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 +373,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 +381,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>
@@ -426,10 +417,3 @@ const Activity = () => {
export default Activity;
-const StyledDivButton = styled(Paper)`
- width : 100%;
- display : flex;
- justify-content : center;
- align-items : center;
-`
-
diff --git a/src/Admin/Pages/Pages/SubPages/AproveTeacher.js b/src/Admin/Pages/Pages/SubPages/AproveTeacher.js
index dca8669260e3795ccc28c98d97ce9eea5e9c6b28..6b69fed21a912f9f59b254dc035f97369783f82f 100644
--- a/src/Admin/Pages/Pages/SubPages/AproveTeacher.js
+++ b/src/Admin/Pages/Pages/SubPages/AproveTeacher.js
@@ -16,9 +16,8 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useContext } from "react";
import moment from "moment";
-import styled from "styled-components";
//imports from local files
import TableData from "../../../Components/Components/Table";
import SnackBar from "../../../../Components/SnackbarComponent";
@@ -30,15 +29,17 @@ import {
} from "../../../../Components/HelperFunctions/getAxiosConfig";
import MobileList from "../../../Components/Components/MobileComponents/SimpleList";
import MobilePageHeader from "../../../Components/Components/MobileComponents/MobilePageHeader";
-import PageHeader from "../../../Components/Components/PageHeader";
+import PageHeader, { StyledFilter } from "../../../Components/Components/PageHeader";
import { apiDomain } from '../../../../env';
+import FormInput from "Components/FormInput.js"
+import { Store } from 'Store'
+import { StyledLoadMoreButton, StyledDivButton, useStylesCell, useStylesRow } from "./Collections.js";
+import StyledButton from '../../../Components/Components/Button';
//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";
import TableRow from "@material-ui/core/TableRow";
-import TextField from "@material-ui/core/TextField";
import IconButton from "@material-ui/core/IconButton";
import { Button, Paper, Grid } from "@material-ui/core";
import CircularProgress from "@material-ui/core/CircularProgress";
@@ -55,26 +56,13 @@ import { Link } from "react-router-dom";
//Image Import
import { noAvatar } from "ImportImages.js";
+const AproveTeacher = () => {
-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 { state } = useContext(Store);
+
+ const classesCell = useStylesCell(state);
+ const classesRow = useStylesRow(state);
-const AproveTeacher = () => {
const WINDOW_WIDTH = window.innerWidth
const ADD_ONE_LENGHT = [""];
const TOP_LABELS = [
@@ -101,6 +89,7 @@ const AproveTeacher = () => {
const [nameValue, setNameValue] = useState("")
const [email, setEmail] = useState("");
const [emailValue, setEmailValue] = useState("")
+ const [forceUpdate, setForceUpdate] = useState(false)
const [snackInfo, setSnackInfo] = useState({
message: "",
@@ -162,7 +151,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",
}}
@@ -176,7 +166,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",
}}
@@ -190,7 +181,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",
}}
@@ -204,7 +196,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",
}}
@@ -335,7 +328,7 @@ const AproveTeacher = () => {
setError(true)
}
)
- }, [currPage, option, email, name, invertList])
+ }, [currPage, option, email, name, invertList, forceUpdate])
useEffect(() => {
setOption("requested")
@@ -375,6 +368,7 @@ const AproveTeacher = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -396,8 +390,7 @@ const AproveTeacher = () => {
]}
>
{showFilter ? (
- <>
- <div style={{ height: "1em" }}></div>
+ <StyledFilter contrast={state.contrast}>
{showFilter ? (
<Grid
container
@@ -409,54 +402,56 @@ const AproveTeacher = () => {
xs={12}
>
<Grid item>
- <TextField
- select
- label="Estado"
- value={option ? option : ""}
- onChange={handleChange}
- helperText="Por favor, selecione uma das opções"
- >
- {StateOptions.map((option, index) => (
- <MenuItem
- key={option.value}
- value={option.name}
- name={option.value}
- >
- {option.value}
- </MenuItem>
- ))}
- </TextField>
+ <FormInput
+ contrast={state.contrast}
+ selectable={true}
+ placeholder="Estado"
+ value={option ? option : ""}
+ handleChange={handleChange}
+ help="Por favor, selecione uma das opções"
+ items={StateOptions.map((option, index) => (
+ <MenuItem
+ key={option.value}
+ value={option.name}
+ name={option.value}
+ className={`${state.contrast}BackColor ${state.contrast}LinkColor`}
+ >
+ {option.value}
+ </MenuItem>
+ ))}
+ />
</Grid>
<Grid item>
- <TextField
- label="Nome"
- onChange={NameHandler}
- value={nameValue}
- onBlur={(event) => { setName(event.target.value) }}
- helperText="Retire o foco do campo de texto ao terminar de digitar"
- />
+ <FormInput
+ contrast={state.contrast}
+ placeholder="Nome"
+ handleChange={NameHandler}
+ value={nameValue}
+ onBlur={(event) => { setName(event.target.value) }}
+ help="Retire o foco do campo de texto ao terminar de digitar"
+ />
</Grid>
<Grid item>
- <TextField
- label="Email"
- onChange={EmailHandler}
- value={emailValue}
- onBlur={(event) => { setEmail(event.target.value) }}
- helperText="Retire o foco do campo de texto ao terminar de digitar"
- />
+ <FormInput
+ contrast={state.contrast}
+ placeholder="Email"
+ handleChange={EmailHandler}
+ value={emailValue}
+ onBlur={(event) => { setEmail(event.target.value) }}
+ help="Retire o foco do campo de texto ao terminar de digitar"
+ />
</Grid>
</Grid>
) : null}
- </>
+ </StyledFilter>
) : null}
</MobilePageHeader>
- <div style={{ height: "2em" }}></div>
-
{items.map((row, index) =>
index === items.length - 1 ? (
- <StyledDivButton>
- <Button
+ <StyledDivButton contrast={state.contrast}>
+ <StyledLoadMoreButton
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
color="primary"
variant="text"
@@ -472,11 +467,12 @@ const AproveTeacher = () => {
) : (
"Carregar mais itens"
)}
- </Button>
+ </StyledLoadMoreButton>
</StyledDivButton>
) : (
<>
<MobileList
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
title={row.name}
subtitle={row.id}
@@ -501,13 +497,13 @@ const AproveTeacher = () => {
title: "Email",
subtitle: row.email ?
<Link to={`/admin/sendEmail?email=${row.email}`} style={{ textDecoration: 'none' }}>
- <Button
+ <StyledButton
variant='text'
color='primary'
- startIcon={<EmailRoundedIcon />}
- >
- {row.email}
- </Button>
+ style={state.contrast === "" ? {} : {color: "yellow", textDecoration: "underline yellow"}}
+ icon={<EmailRoundedIcon style={state.contrast === "" ? {color: "#666"} : {color: "white"}}/>}
+ text={row.email}
+ />
</Link> : null
},
@@ -522,44 +518,40 @@ const AproveTeacher = () => {
{
title: "Ações rápidas",
subtitle: <>
- <Button
+ <StyledButton
variant="contained"
color="secondary"
style={{ width: "100%" }}
disabled={
row.submitter_request === "requested" ? false : true
}
- startIcon={
+ icon={
<CloseRoundedIcon style={{ fill: "#FFFAFA" }} />
}
onClick={() => {
handleReject(row.id, row.name);
}}
- >
- Recusar
- </Button>
- <div style={{ height: "0.5em" }} />
- <Button
+ text="Recusar"
+ />
+ <StyledButton
variant="contained"
color="primary"
style={{ width: "100%" }}
disabled={
row.submitter_request === "requested" ? false : true
}
- startIcon={
+ icon={
<CheckRoundedIcon style={{ fill: "#FFFAFA" }} />
}
onClick={() => {
handleAprove(row.id, row.name);
}}
- >
- Aceitar
- </Button>
+ text="Aceitar"
+ />
</>
}
]}
/>
- <div style={{ height: "0.5em" }} />
</>
)
)}
@@ -591,6 +583,7 @@ const AproveTeacher = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -605,8 +598,7 @@ const AproveTeacher = () => {
]}
>
{showFilter ? (
- <>
- <div style={{ height: "1em" }}></div>
+ <StyledFilter contrast={state.contrast}>
{showFilter ? (
<Grid
container
@@ -618,50 +610,51 @@ const AproveTeacher = () => {
xs={12}
>
<Grid item>
- <TextField
- select
- label="Estado"
- value={option ? option : ""}
- onChange={handleChange}
- helperText="Por favor, selecione uma das opções"
- >
- {StateOptions.map((option, index) => (
- <MenuItem
- key={option.value}
- value={option.name}
- name={option.value}
- >
- {option.value}
- </MenuItem>
- ))}
- </TextField>
+ <FormInput
+ contrast={state.contrast}
+ selectable={true}
+ placeholder="Estado"
+ value={option ? option : ""}
+ handleChange={handleChange}
+ help="Por favor, selecione uma das opções"
+ items={StateOptions.map((option, index) => (
+ <MenuItem
+ key={option.value}
+ value={option.name}
+ name={option.value}
+ className={`${state.contrast}BackColor ${state.contrast}LinkColor`}
+ >
+ {option.value}
+ </MenuItem>
+ ))}
+ />
</Grid>
<Grid item>
- <TextField
- label="Nome"
- onChange={NameHandler}
- value={nameValue}
- onBlur={(event) => { setName(event.target.value) }}
- helperText="Retire o foco do campo de texto ao terminar de digitar"
- />
+ <FormInput
+ contrast={state.contrast}
+ placeholder="Nome"
+ handleChange={NameHandler}
+ value={nameValue}
+ onBlur={(event) => { setName(event.target.value) }}
+ help="Retire o foco do campo de texto ao terminar de digitar"
+ />
</Grid>
<Grid item>
- <TextField
- label="Email"
- onChange={EmailHandler}
- value={emailValue}
- onBlur={(event) => { setEmail(event.target.value) }}
- helperText="Retire o foco do campo de texto ao terminar de digitar"
- />
+ <FormInput
+ contrast={state.contrast}
+ placeholder="Email"
+ handleChange={EmailHandler}
+ value={emailValue}
+ onBlur={(event) => { setEmail(event.target.value) }}
+ help="Retire o foco do campo de texto ao terminar de digitar"
+ />
</Grid>
</Grid>
) : null}
- </>
+ </StyledFilter>
) : null}
</PageHeader>
- <div style={{ height: "2em" }}></div>
-
<Grid xs={12} container>
<TableData
top={TOP_LABELS}
@@ -670,9 +663,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"
@@ -682,6 +675,7 @@ const AproveTeacher = () => {
onClick={() => {
setCurrPage(currPage + 1)
}}
+ style={state.contrast === "" ? {width: "100%"} : {width: "100%", color: "yellow", textDecoration: "underline yellow"}}
>
{isLoadingMoreItems ? (
<CircularProgress size={24} />
@@ -689,69 +683,77 @@ 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">
- {row.email}
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
+ {
+ row.email ?
+ <Link to={`/admin/sendEmail?email=${row.email}`} style={{ textDecoration: 'none' }}>
+ <StyledButton
+ variant='text'
+ color='primary'
+ style={state.contrast === "" ? {} : {color: "yellow", textDecoration: "underline yellow"}}
+ icon={<EmailRoundedIcon style={state.contrast === "" ? {color: "#666"} : {color: "white"}}/>}
+ text={row.email}
+ />
+ </Link> : null
+ }
+ </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">
- <Button
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
+ <StyledButton
variant="contained"
color="secondary"
style={{ width: "100%" }}
disabled={
row.submitter_request === "requested" ? false : true
}
- startIcon={
+ icon={
<CloseRoundedIcon style={{ fill: "#FFFAFA" }} />
}
onClick={() => {
handleReject(row.id, row.name);
}}
- >
- Recusar
- </Button>
- <div style={{ height: "0.5em" }} />
- <Button
+ text="Recusar"
+ />
+ <StyledButton
variant="contained"
color="primary"
style={{ width: "100%" }}
disabled={
row.submitter_request === "requested" ? false : true
}
- startIcon={
+ icon={
<CheckRoundedIcon style={{ fill: "#FFFAFA" }} />
}
onClick={() => {
handleAprove(row.id, row.name);
}}
- >
- Aceitar
- </Button>
- </StyledTableCell>
- </StyledTableRow>
+ text="Aceitar"
+ />
+ </TableCell>
+ </TableRow>
)
)}
</TableBody>
@@ -762,11 +764,4 @@ const AproveTeacher = () => {
}
}
};
-export default AproveTeacher;
-
-const StyledDivButton = styled(Paper)`
- width: 100%;
- display: flex;
- justify-content: center;
- align-items: center;
-`;
+export default AproveTeacher;
\ No newline at end of file
diff --git a/src/Admin/Pages/Pages/SubPages/BlockedUsers.js b/src/Admin/Pages/Pages/SubPages/BlockedUsers.js
index ba077fdae792fd4eb6c7d6a4cc9a7362631e877d..9eac1d9a5f121dbddfce3f18d1f226bb19965f89 100644
--- a/src/Admin/Pages/Pages/SubPages/BlockedUsers.js
+++ b/src/Admin/Pages/Pages/SubPages/BlockedUsers.js
@@ -15,17 +15,14 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useContext } from 'react';
import moment from "moment";
-import styled from "styled-components"
//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 MenuItem from "@material-ui/core/MenuItem";
import TableRow from "@material-ui/core/TableRow";
-import TextField from "@material-ui/core/TextField";
import TableCell from '@material-ui/core/TableCell';
import RemoveCircleOutlineRoundedIcon from '@material-ui/icons/RemoveCircleOutlineRounded';
import VisibilityIcon from '@material-ui/icons/Visibility';
@@ -41,7 +38,11 @@ import LoadingSpinner from '../../../../Components/LoadingSpinner';
import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
import { apiDomain } from '../../../../env';
import MobilePageHeader from "../../../Components/Components/MobileComponents/MobilePageHeader"
-import PageHeader from "../../../Components/Components/PageHeader"
+import PageHeader, { StyledFilter } from "../../../Components/Components/PageHeader"
+import { StyledLoadMoreButton, StyledDivButton, useStylesCell, useStylesRow } from "./Collections.js";
+import { Store } from 'Store'
+import StyledButton from '../../../Components/Components/Button';
+import FormInput from "Components/FormInput.js"
//Services
import { getRequest, putRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import { Url } from '../../../Filters';
@@ -51,25 +52,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 BlockedUsers = () => {
-const StyledTableRow = withStyles((theme) => ({
- root: {
- '&:nth-of-type(odd)': {
- backgroundColor: theme.palette.action.hover,
- },
- },
-}))(TableRow);
+ const { state } = useContext(Store)
+
+ const classesCell = useStylesCell(state);
+ const classesRow = useStylesRow(state);
-const BlockedUsers = () => {
const ADD_ONE_LENGHT = [''];
const WINDOW_WIDTH = window.innerWidth
@@ -80,6 +69,7 @@ const BlockedUsers = () => {
const [isLoadingMoreItems, setIsLoadingMoreItems] = useState(false)
const [stateOpt, setStateOpt] = useState(1)
const [currPage, setCurrPage] = useState(0)
+ const [forceUpdate, setForceUpdate] = useState(false)
const [snackInfo, setSnackInfo] = useState({
message: '',
@@ -122,7 +112,8 @@ const BlockedUsers = () => {
style={{
textAlign: "center",
padding: "0.5em",
- backgroundColor: "#FF8C00",
+ backgroundColor: state.contrast === "" ? "#FF8C00" : "black",
+ border: state.contrast === "" ? "" : "1px solid white",
fontWeight: "500",
color: "#FFFAFA",
}}
@@ -136,7 +127,8 @@ const BlockedUsers = () => {
style={{
textAlign: "center",
padding: "0.5em",
- backgroundColor: "red",
+ backgroundColor: state.contrast === "" ? "red" : "black",
+ border: state.contrast === "" ? "" : "1px solid white",
fontWeight: "500",
color: "#FFFAFA",
}}
@@ -150,7 +142,8 @@ const BlockedUsers = () => {
style={{
textAlign: "center",
padding: "0.5em",
- backgroundColor: "#797D7F",
+ backgroundColor: state.contrast === "" ? "#797D7F" : "black",
+ border: state.contrast === "" ? "" : "1px solid white",
fontWeight: "500",
color: "#FFFAFA",
}}
@@ -232,7 +225,7 @@ const BlockedUsers = () => {
setError(true)
}
)
- }, [currPage, stateOpt, invertList])
+ }, [currPage, stateOpt, invertList, forceUpdate])
if (error) {
return <div>Error: {error.message}</div>;
@@ -265,6 +258,7 @@ const BlockedUsers = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -277,32 +271,34 @@ const BlockedUsers = () => {
},
]}
>
+ <StyledFilter contrast={state.contrast}>
<Grid item>
- <TextField
- select
- label="Estado de bloqueio"
- onChange={handleChange}
- helperText="Por favor, selecione uma das opções"
- >
- {StateOptions.map((option, index) => (
- <MenuItem
- key={option.value}
- value={option.name}
- name={option.value}
- >
- {option.value}
- </MenuItem>
- ))}
- </TextField>
+ <FormInput
+ contrast={state.contrast}
+ selectable={true}
+ placeholder="Estado de bloqueio"
+ handleChange={handleChange}
+ help="Por favor, selecione uma das opções"
+ items={StateOptions.map((option, index) => (
+ <MenuItem
+ key={option.value}
+ value={option.name}
+ name={option.value}
+ className={`${state.contrast}BackColor ${state.contrast}LinkColor`}
+ >
+ {option.value}
+ </MenuItem>
+ ))}
+ />
</Grid>
+ </StyledFilter>
</MobilePageHeader>
- <div style={{ height: '2em' }}></div>
-
{items.map((row, index) =>
index === items.length - 1 ? (
- <StyledDivButton>
- <Button
+ <StyledDivButton contrast={state.contrast}>
+ <StyledLoadMoreButton
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
color="primary"
variant="text"
@@ -318,11 +314,12 @@ const BlockedUsers = () => {
) : (
"Carregar mais itens"
)}
- </Button>
+ </StyledLoadMoreButton>
</StyledDivButton>
) : (
<>
<MobileList
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
title={row.name}
subtitle={row.id}
@@ -347,15 +344,13 @@ const BlockedUsers = () => {
title: "Email",
subtitle: row.email ?
<Link to={`/admin/sendEmail?email=${row.email}`} style={{ textDecoration: 'none' }}>
- <Button
+ <StyledButton
variant='text'
- color='primary'
- startIcon={<EmailRoundedIcon />}
- >
- {row.email}
- </Button>
+ color="primary"
+ icon={<EmailRoundedIcon style={state.contrast === "" ? {color: "#666"} : {color: "white"}}/>}
+ text={row.email}
+ />
</Link> : null
-
},
{
title: "Estado",
@@ -363,20 +358,18 @@ const BlockedUsers = () => {
},
{
title: "Ações rápidas",
- subtitle: <Button
+ subtitle: <StyledButton
style={{ width: "100%", marginBottom: "0.5em" }}
variant="contained"
color="secondary"
- startIcon={<RemoveCircleOutlineRoundedIcon />}
+ icon={<RemoveCircleOutlineRoundedIcon />}
onClick={() => ReactiveUser(row.id, index)}
- >
- Desbloquear
- </Button>
+ text="Desbloquear"
+ />
}
]
}
/>
- <div style={{ height: "0.5em" }} />
</>
)
)}
@@ -406,33 +399,35 @@ const BlockedUsers = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
]}
>
+ <StyledFilter contrast={state.contrast}>
<Grid item>
- <TextField
- select
- label="Estado de bloqueio"
- onChange={handleChange}
- helperText="Por favor, selecione uma das opções"
- >
- {StateOptions.map((option, index) => (
- <MenuItem
- key={option.value}
- value={option.name}
- name={option.value}
- >
- {option.value}
- </MenuItem>
- ))}
- </TextField>
+ <FormInput
+ contrast={state.contrast}
+ selectable={true}
+ placeholder="Estado de bloqueio"
+ handleChange={handleChange}
+ help="Por favor, selecione uma das opções"
+ items={StateOptions.map((option, index) => (
+ <MenuItem
+ key={option.value}
+ value={option.name}
+ name={option.value}
+ className={`${state.contrast}BackColor ${state.contrast}LinkColor`}
+ >
+ {option.value}
+ </MenuItem>
+ ))}
+ />
</Grid>
+ </StyledFilter>
</PageHeader>
- <div style={{ height: '2em' }}></div>
-
<TableData
top={topTable}
onIconPressed={cleanArrayAndInvert}
@@ -440,9 +435,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} colspan={6}>
<Button
color='primary'
variant='text'
@@ -451,61 +446,59 @@ 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">
- {
- row.email ?
- <Link to={`/admin/sendEmail?email=${row.email}`} style={{ textDecoration: 'none' }}>
- <Button
- variant='text'
- color='primary'
- startIcon={<EmailRoundedIcon />}
- >
- {row.email}
- </Button>
- </Link> : null
- }
- </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' }}>
+ <StyledButton
+ variant='text'
+ color="primary"
+ icon={<EmailRoundedIcon style={state.contrast === "" ? {color: "#666"} : {color: "white"}}/>}
+ text={row.email}
+ />
+ </Link> : null
+ }
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
{DisplayDate(row.suspended_at)}
- </StyledTableCell>
- <StyledTableCell align="right">
- <Button
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
+ <StyledButton
style={{ width: "100%", marginBottom: "0.5em" }}
variant="contained"
color="secondary"
- startIcon={<RemoveCircleOutlineRoundedIcon />}
+ icon={<RemoveCircleOutlineRoundedIcon />}
onClick={() => ReactiveUser(row.id, index)}
- >
- Desbloquear
- </Button>
+ text="Desbloquear"
+ />
<Link to={`/admin/user?id=${row.id}`}>
- <Button
+ <StyledButton
style={{ width: "100%" }}
variant="contained"
color="primary"
- startIcon={<VisibilityIcon />}
- >
- Visualizar
- </Button>
+ icon={<VisibilityIcon />}
+ text="Visualizar"
+ />
</Link>
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell>
+ </TableRow>
))}
</TableBody>
</TableData>
@@ -516,11 +509,4 @@ const BlockedUsers = () => {
}
-export default BlockedUsers;
-
-const StyledDivButton = styled(Paper)`
- width : 100%;
- display : flex;
- justify-content : center;
- align-items : center;
-`
\ No newline at end of file
+export default BlockedUsers;
\ No newline at end of file
diff --git a/src/Admin/Pages/Pages/SubPages/Collections.js b/src/Admin/Pages/Pages/SubPages/Collections.js
index dd15cbaefc69bf3b14657d8c13393f05b9c0edf0..f7ab54ccacc4394b0fd746ca7008c94159a700f0 100644
--- a/src/Admin/Pages/Pages/SubPages/Collections.js
+++ b/src/Admin/Pages/Pages/SubPages/Collections.js
@@ -16,7 +16,7 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useContext } from "react";
import moment from "moment";
//imports from local files
import TableData from "../../../Components/Components/Table";
@@ -26,15 +26,16 @@ import AlertDialog from "../../../Components/Components/AlertDialog";
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 PageHeader, { StyledFilter } from "../../../Components/Components/PageHeader"
+import FormInput from "Components/FormInput.js"
+import StyledButton from '../../../Components/Components/Button';
//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";
import MenuItem from "@material-ui/core/MenuItem";
import TableRow from "@material-ui/core/TableRow";
-import TextField from "@material-ui/core/TextField";
import IconButton from "@material-ui/core/IconButton";
import { Button, Paper, Grid } from "@material-ui/core";
import CircularProgress from "@material-ui/core/CircularProgress";
@@ -44,567 +45,599 @@ import FilterListRoundedIcon from "@material-ui/icons/FilterListRounded";
import VisibilityIcon from "@material-ui/icons/Visibility";
import DeleteIcon from "@material-ui/icons/Delete";
import {
- deleteRequest,
- getRequest,
+ deleteRequest,
+ getRequest,
} from "../../../../Components/HelperFunctions/getAxiosConfig";
//routers
import { Link } from "react-router-dom";
import styled from 'styled-components'
-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,
+import { Store } from 'Store'
+
+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",
+ }
+ }
+}));
+
+export const useStylesRow = makeStyles((theme) => ({
+ root: {
+ "&:nth-of-type(odd)": {
+ 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 ADD_ONE_LENGHT = [""];
- const TOP_LABELS = [
- "NOME",
- "DESCRIÇÃO",
- "DONO(A)",
- "CRIAÇÃO",
- "ATUALIZAÇÃO",
- "PRIVACIDADE",
- "VISUALIZAR",
- "DELETAR",
- ]; //Labels from Table
-
- const WINDOW_WIDTH = window.innerWidth;
-
- const [error, setError] = useState(null); //Necessary to consult the API, catch errors
- const [isLoaded, setIsLoaded] = useState(false); //Necessary to consult the API, wait until complete
- const [items, setItems] = useState([]); //Necessary to consult the API, data
-
- const [isLoadingMoreItems, setIsLoadingMoreItems] = useState(false); //controlls the state of loadind more data
-
- const [showFilter, setShowFilter] = useState(false);
- const [valueOfSearch, setValueOfSearch] = useState("")
- const [search, setSearch] = useState("");
- const [currPage, setCurrPage] = useState(0)
-
- const [openAlertDialog, setOpenAlertDialog] = useState(false);
- const [deleteItem, setDeleteItem] = useState({}); //Delete Item
- const [isLoadingToDelete, setIsLoadingToDelete] = useState(null);
- const [option, setOption] = useState(); //labels of the text field 'to'
-
- const [snackInfo, setSnackInfo] = useState({
- message: "",
- icon: "",
- open: false,
- color: "",
- });
-
- const privacyOptions = [
- { name: "private", value: "Privado" },
- { name: "public", value: "Público" }
- ];
-
-
- //handle snack info
- const HandleSnack = (message, state, icon, color) => {
- setSnackInfo({
- message: message,
- icon: icon,
- open: state,
- color: color,
+
+ const { state } = useContext(Store)
+
+ const classesCell = useStylesCell(state);
+ const classesRow = useStylesRow(state);
+
+ const ADD_ONE_LENGHT = [""];
+ const TOP_LABELS = [
+ "NOME",
+ "DESCRIÇÃO",
+ "DONO(A)",
+ "CRIAÇÃO",
+ "ATUALIZAÇÃO",
+ "PRIVACIDADE",
+ "VISUALIZAR",
+ "DELETAR",
+ ]; //Labels from Table
+
+ const WINDOW_WIDTH = window.innerWidth;
+
+ const [error, setError] = useState(null); //Necessary to consult the API, catch errors
+ const [isLoaded, setIsLoaded] = useState(false); //Necessary to consult the API, wait until complete
+ const [items, setItems] = useState([]); //Necessary to consult the API, data
+
+ const [isLoadingMoreItems, setIsLoadingMoreItems] = useState(false); //controlls the state of loadind more data
+
+ const [showFilter, setShowFilter] = useState(false);
+ const [valueOfSearch, setValueOfSearch] = useState("")
+ const [search, setSearch] = useState("");
+ const [currPage, setCurrPage] = useState(0)
+
+ const [openAlertDialog, setOpenAlertDialog] = useState(false);
+ const [deleteItem, setDeleteItem] = useState({}); //Delete Item
+ const [isLoadingToDelete, setIsLoadingToDelete] = useState(null);
+ const [option, setOption] = useState(); //labels of the text field 'to'
+ const [forceUpdate, setForceUpdate] = useState(false)
+
+ const [snackInfo, setSnackInfo] = useState({
+ message: "",
+ icon: "",
+ open: false,
+ color: "",
});
- };
-
- //Defines which row must show the circular progress
- const HandleStateCircularProgress = (i) => {
- setIsLoadingToDelete(i);
- };
-
- //Called when user want to delete one institution
- async function DeleteHandler() {
- const id = deleteItem.id;
- HandleStateAlertDialog(null);
- deleteRequest(
- DeleteFilter("collections", id),
- (data) => {
- if (data.errors)
- HandleSnack("Ocorreu algum erro", true, "warning", "#FA8072");
- else {
- HandleSnack(
- "A Coleção foi deletada com sucesso",
- true,
- "success",
- "#228B22"
- );
- setCurrPage(0)
- HandleStateCircularProgress(null);
- removeItemFromList(id);
- }
- },
- (error) => {
- HandleSnack("Ocorreu algum erro", true, "warning", "#FA8072");
- HandleStateCircularProgress(null);
- }
- );
- }
-
- //Controlls the state of the Alert Dialog
- const HandleStateAlertDialog = (i) => {
- const obj = { ...items[i] };
- setDeleteItem(obj);
- setOpenAlertDialog(!openAlertDialog);
- };
-
- // handle change of privacy
- const handleChange = (e) => {
- setOption(e.target.value);
- };
-
- const HandleSearch = (e) => {
- setValueOfSearch(e.target.value)
- }
-
- const DisplayDate = (date) => {
- const convertedData = moment.utc(date);
- return moment(convertedData)
- .format("LLL")
- .toString();
- };
-
- const buildUrl = (privacyOpt, name) => {
- if (privacyOpt && name)
- return Url("collections", `"privacy" : "${privacyOpt}", "name" : "${name}"`, currPage, "DESC")
- else if (privacyOpt)
- return Url("collections", `"privacy" : "${privacyOpt}"`, currPage, "DESC")
- else if (name)
- return Url("collections", `"name" : "${name}"`, currPage, "DESC")
- else
- return Url("collections", "", currPage, "DESC")
- }
-
- const removeItemFromList = (itemId) => {
- let index = -1;
- for (let i = 0; i < items.length; i++) {
- const element = items[i];
- if (element.id === itemId) {
- index = i
- break
- }
+
+ const privacyOptions = [
+ { name: "private", value: "Privado" },
+ { name: "public", value: "Público" }
+ ];
+
+
+ //handle snack info
+ const HandleSnack = (message, state, icon, color) => {
+ setSnackInfo({
+ message: message,
+ icon: icon,
+ open: state,
+ color: color,
+ });
+ };
+
+ //Defines which row must show the circular progress
+ const HandleStateCircularProgress = (i) => {
+ setIsLoadingToDelete(i);
+ };
+
+ //Called when user want to delete one institution
+ async function DeleteHandler() {
+ const id = deleteItem.id;
+ HandleStateAlertDialog(null);
+ deleteRequest(
+ DeleteFilter("collections", id),
+ (data) => {
+ if (data.errors)
+ HandleSnack("Ocorreu algum erro", true, "warning", "#FA8072");
+ else {
+ HandleSnack(
+ "A Coleção foi deletada com sucesso",
+ true,
+ "success",
+ "#228B22"
+ );
+ setCurrPage(0)
+ HandleStateCircularProgress(null);
+ removeItemFromList(id);
+ }
+ },
+ (error) => {
+ HandleSnack("Ocorreu algum erro", true, "warning", "#FA8072");
+ HandleStateCircularProgress(null);
+ }
+ );
}
- if (index !== -1) {
- const cpyItems = [...items]
- cpyItems.splice(index, 1)
- setItems(cpyItems)
+
+ //Controlls the state of the Alert Dialog
+ const HandleStateAlertDialog = (i) => {
+ const obj = { ...items[i] };
+ setDeleteItem(obj);
+ setOpenAlertDialog(!openAlertDialog);
+ };
+
+ // handle change of privacy
+ const handleChange = (e) => {
+ setOption(e.target.value);
+ };
+
+ const HandleSearch = (e) => {
+ setValueOfSearch(e.target.value)
}
- }
-
- useEffect(() => {
- if (currPage === 0)
- setIsLoaded(false)
- else
- setIsLoadingMoreItems(true)
- getRequest(
- buildUrl(option, search),
- (data, header) => {
- const arrData = [...data]
- if (arrData.length === 0) {
- HandleSnack('Não há mais dados para serem carregados', true, 'warning', '#FFC125')
- } else {
- const arrItems = [...items]
- if (currPage === 0) {
- setItems(arrData.concat(ADD_ONE_LENGHT))
- }
- else {
- arrItems.pop(); //Deleting the last position, that was used to display the button of load more items
- const arrResult = arrItems.concat(arrData)
- setItems(arrResult.concat(ADD_ONE_LENGHT))
- }
- }
- setIsLoaded(true)
- setIsLoadingMoreItems(false)
- },
- (error) => {
- HandleSnack('Erro ao carregar os dados', true, 'warning', '#FA8072')
- setIsLoadingMoreItems(false)
- setIsLoaded(true)
- setError(true)
- }
- )
- }, [currPage, search, option])
-
- useEffect(() => {
- setCurrPage(0)
- setOption()
- setSearch("")
- setValueOfSearch("")
- }, [showFilter])
-
- if (error) {
- return <div>Error: {error.message}</div>;
- } else if (!isLoaded) {
- return <LoadingSpinner text="Carregando..." />;
- } else {
- if (WINDOW_WIDTH <= 1024) {
- return (
- <>
- <SnackBar
- severity={snackInfo.icon}
- text={snackInfo.message}
- snackbarOpen={snackInfo.open}
- color={snackInfo.color}
- handleClose={() =>
- setSnackInfo({
- message: "",
- icon: "",
- open: false,
- color: "",
- })
+
+ const DisplayDate = (date) => {
+ const convertedData = moment.utc(date);
+ return moment(convertedData)
+ .format("LLL")
+ .toString();
+ };
+
+ const buildUrl = (privacyOpt, name) => {
+ if (privacyOpt && name)
+ return Url("collections", `"privacy" : "${privacyOpt}", "name" : "${name}"`, currPage, "DESC")
+ else if (privacyOpt)
+ return Url("collections", `"privacy" : "${privacyOpt}"`, currPage, "DESC")
+ else if (name)
+ return Url("collections", `"name" : "${name}"`, currPage, "DESC")
+ else
+ return Url("collections", "", currPage, "DESC")
+ }
+
+ const removeItemFromList = (itemId) => {
+ let index = -1;
+ for (let i = 0; i < items.length; i++) {
+ const element = items[i];
+ if (element.id === itemId) {
+ index = i
+ break
}
- />
- <AlertDialog
- open={openAlertDialog}
- OnDelete={DeleteHandler}
- deleteItem={deleteItem}
- HandleClose={() => {
- setOpenAlertDialog(false);
- HandleStateCircularProgress(null);
- }}
- />
- <MobilePageHeader
- title="Coleções"
- actions={[
- {
- name: "Atualizar",
- isLoading: false,
- func: () => {
- setCurrPage(0)
- },
- icon: <UpdateRoundedIcon />
- },
- {
- name: "Filtrar",
- isLoading: false,
- func: () => {
- setShowFilter(!showFilter);
- },
- icon: <FilterListRoundedIcon />
- }
- ]}
- >
- {showFilter ? (
- <>
- <div style={{ height: "1em" }}></div>
-
- <Grid
- container
- alignItems="center"
- alignContent="center"
- xs={12}
- direction="row"
- justify="space-between"
- >
- <Grid item>
- <TextField
- select
- label="Filtro"
- value={option}
- onChange={handleChange}
- helperText="Por favor, selecione uma das opções"
- >
- {privacyOptions.map((option, index) => (
- <MenuItem
- key={option.value}
- value={option.name}
- name={option.value}
- >
- {option.value}
- </MenuItem>
- ))}
- </TextField>
- </Grid>
-
- <Grid item>
- <TextField
- label="Pesquisa"
- value={valueOfSearch}
- helperText="Ao digitar, tire o foco do campo de texto"
- onChange={(event) => HandleSearch(event)}
- onBlur={(event) => setSearch(event.target.value)}
- ></TextField>
- </Grid>
- </Grid>
- </>
- ) : null}
- </MobilePageHeader>
-
- <div style={{ height: "2em" }}></div>
-
- {items.map((row, index) =>
- index === items.length - 1 ? (
- <StyledDivButton
- key={new Date().toISOString() + row.created_at}
- >
- <Button
- color="primary"
- variant="text"
- // disabled={isLoadingMoreItems}
- startIcon={<AddRoundedIcon />}
- disabled={isLoadingMoreItems}
- onClick={() => {
- setCurrPage(currPage + 1)
- }}
- >
- {isLoadingMoreItems ? (
- <CircularProgress size={24} />
- ) : (
- "Carregar mais itens"
- )}
- </Button>
- </StyledDivButton>
- ) : (
- <>
- <MobileList
- key={new Date().toISOString() + row.created_at}
- title={row.name}
- subtitle={row.privacy}
- backColor={"#e81f4f"}
- avatar={<PeopleRoundedIcon />}
- href={`/admin/Collection?collection=${row.id}`}
- reset={() => {
-
- }}
- data={
- [
- {
- title: "ID",
- subtitle: row.id
-
- },
- {
- title: "Dono(a)",
- subtitle: row.owner ? row.owner.name : "Sem dados"
-
- },
- {
- title: "Criado em",
- subtitle: DisplayDate(row.created_at)
- },
- {
- title: "Atualizado em",
- subtitle: DisplayDate(row.updated_at)
- },
- {
- title: "Deletar",
- subtitle:
- <Button
- variant="contained"
- color="secondary"
- onClick={() => {
- HandleStateAlertDialog(index);
- HandleStateCircularProgress(index);
- }}
- startIcon={<DeleteIcon />}
- >
- Deletar
- </Button>
- }
- ]
- }
- />
- <div style={{ height: "0.5em" }} />
- </>
- )
- )}
- </>
- );
+ }
+ if (index !== -1) {
+ const cpyItems = [...items]
+ cpyItems.splice(index, 1)
+ setItems(cpyItems)
+ }
}
- else {
- return (
- <>
- <SnackBar
- severity={snackInfo.icon}
- text={snackInfo.message}
- snackbarOpen={snackInfo.open}
- color={snackInfo.color}
- handleClose={() =>
- setSnackInfo({
- message: "",
- icon: "",
- open: false,
- color: "",
- })
+
+ useEffect(() => {
+ if (currPage === 0)
+ setIsLoaded(false)
+ else
+ setIsLoadingMoreItems(true)
+ getRequest(
+ buildUrl(option, search),
+ (data, header) => {
+ const arrData = [...data]
+ if (arrData.length === 0) {
+ HandleSnack('Não há mais dados para serem carregados', true, 'warning', '#FFC125')
+ } else {
+ const arrItems = [...items]
+ if (currPage === 0) {
+ setItems(arrData.concat(ADD_ONE_LENGHT))
+ }
+ else {
+ arrItems.pop(); //Deleting the last position, that was used to display the button of load more items
+ const arrResult = arrItems.concat(arrData)
+ setItems(arrResult.concat(ADD_ONE_LENGHT))
+ }
+ }
+ setIsLoaded(true)
+ setIsLoadingMoreItems(false)
+ },
+ (error) => {
+ HandleSnack('Erro ao carregar os dados', true, 'warning', '#FA8072')
+ setIsLoadingMoreItems(false)
+ setIsLoaded(true)
+ setError(true)
}
- />
-
- <PageHeader
- title="Coleções"
- actions={[
- {
- name: "Atualizar",
- isLoading: false,
- func: () => {
- setCurrPage(0)
- },
- icon: <UpdateRoundedIcon />
- },
- {
- name: "Filtrar",
- isLoading: false,
- func: () => {
- setShowFilter(!showFilter);
- },
- icon: <FilterListRoundedIcon />
- }
- ]}
- >
- {showFilter ? (
- <>
- <div style={{ height: "1em" }}></div>
-
- <Grid
- container
- alignItems="center"
- alignContent="center"
- xs={12}
- direction="row"
- justify="space-between"
- >
- <Grid item>
- <TextField
- select
- label="Filtro"
- value={option}
- onChange={handleChange}
- helperText="Por favor, selecione uma das opções"
- >
- {privacyOptions.map((option, index) => (
- <MenuItem
- key={option.value}
- value={option.name}
- name={option.value}
- >
- {option.value}
- </MenuItem>
- ))}
- </TextField>
- </Grid>
-
- <Grid item>
- <TextField
- label="Pesquisa"
- value={valueOfSearch}
- helperText="Ao digitar, tire o foco do campo de texto"
- onChange={(event) => HandleSearch(event)}
- onBlur={(event) => setSearch(event.target.value)}
- ></TextField>
- </Grid>
- </Grid>
- </>
- ) : null}
- </PageHeader>
-
- <div style={{ height: "2em" }}></div>
-
- <TableData top={TOP_LABELS}>
- <TableBody>
- {items.map((row, index) =>
- index === items.length - 1 ? (
- <StyledTableRow key={new Date().toISOString() + row.created_at}>
- <StyledTableCell>
- <Button
- color="primary"
- variant="text"
- // disabled={isLoadingMoreItems}
- startIcon={<AddRoundedIcon />}
- disabled={isLoadingMoreItems}
- onClick={() => {
- setCurrPage(currPage + 1)
- }}
- >
- {isLoadingMoreItems ? (
- <CircularProgress size={24} />
- ) : (
- "Carregar mais itens"
- )}
- </Button>
- </StyledTableCell>
- </StyledTableRow>
- ) : (
- <StyledTableRow key={new Date().toISOString() + index}>
- <StyledTableCell component="th" scope="row">
- {row.name}
- </StyledTableCell>
- <StyledTableCell align="right">
- <div
- dangerouslySetInnerHTML={{ __html: row.description }}
- ></div>
- </StyledTableCell>
- <StyledTableCell align="right">
- {row.owner ? row.owner.name : "Sem dados"}
- </StyledTableCell>
- <StyledTableCell align="right">
- {DisplayDate(row.created_at)}
- </StyledTableCell>
- <StyledTableCell align="right">
- {DisplayDate(row.updated_at)}
- </StyledTableCell>
- <StyledTableCell align="right">{row.privacy}</StyledTableCell>
- <StyledTableCell align="right">
- <Link to={`/admin/Collection?collection=${row.id}`}>
- <IconButton>
- <VisibilityIcon style={{ fill: "#00bcd4" }} />
- </IconButton>
- </Link>
- </StyledTableCell>
- <StyledTableCell align="right">
- {isLoadingToDelete === index ? (
- <CircularProgress size={24} color="primary" />
- ) : (
- <IconButton
- onClick={() => {
- HandleStateAlertDialog(index);
- HandleStateCircularProgress(index);
- }}
+ )
+ }, [currPage, search, option, forceUpdate])
+
+ useEffect(() => {
+ setCurrPage(0)
+ setOption()
+ setSearch("")
+ setValueOfSearch("")
+ }, [showFilter])
+
+ return (
+ <StyledContent contrast={state.contrast}>
+ {
+ error ? (
+ <div>Error: {error.message}</div>
+ )
+ :
+ (
+ !isLoaded ? (
+ <LoadingSpinner text="Carregando..." />
+ )
+ :
+ (
+ WINDOW_WIDTH <= 1024 ? (
+ <>
+ <SnackBar
+ severity={snackInfo.icon}
+ text={snackInfo.message}
+ snackbarOpen={snackInfo.open}
+ color={snackInfo.color}
+ handleClose={() =>
+ setSnackInfo({
+ message: "",
+ icon: "",
+ open: false,
+ color: "",
+ })
+ }
+ />
+ <AlertDialog
+ open={openAlertDialog}
+ OnDelete={DeleteHandler}
+ deleteItem={deleteItem}
+ HandleClose={() => {
+ setOpenAlertDialog(false);
+ HandleStateCircularProgress(null);
+ }}
+ />
+ <MobilePageHeader
+ title="Coleções"
+ actions={[
+ {
+ name: "Atualizar",
+ isLoading: false,
+ func: () => {
+ setCurrPage(0)
+ setForceUpdate(!forceUpdate)
+ },
+ icon: <UpdateRoundedIcon />
+ },
+ {
+ name: "Filtrar",
+ isLoading: false,
+ func: () => {
+ setShowFilter(!showFilter);
+ },
+ icon: <FilterListRoundedIcon />
+ }
+ ]}
>
- <DeleteIcon style={{ fill: "#FF0000" }} />
- </IconButton>
- )}
- </StyledTableCell>
- </StyledTableRow>
- )
- )}
- </TableBody>
- </TableData>
-
- {/* This alert will be displayed if the user click to delete an institution */}
- <AlertDialog
- open={openAlertDialog}
- OnDelete={DeleteHandler}
- deleteItem={deleteItem}
- HandleClose={() => {
- setOpenAlertDialog(false);
- HandleStateCircularProgress(null);
- }}
- />
- </>
- );
- }
- }
+ {showFilter ? (
+ <StyledFilter contrast={state.contrast}>
+ <Grid
+ container
+ alignItems="center"
+ alignContent="center"
+ xs={12}
+ direction="row"
+ justify="space-between"
+ >
+ <Grid item>
+ <FormInput
+ contrast={state.contrast}
+ selectable={true}
+ placeholder="Filtro"
+ value={option}
+ handleChange={handleChange}
+ help="Por favor, selecione uma das opções"
+ items={privacyOptions.map((option, index) => (
+ <MenuItem
+ key={option.value}
+ value={option.name}
+ name={option.value}
+ className={`${state.contrast}BackColor ${state.contrast}LinkColor`}
+ >
+ {option.value}
+ </MenuItem>
+ ))}
+ />
+ </Grid>
+
+ <Grid item>
+ <FormInput
+ contrast={state.contrast}
+ placeholder="Pesquisa"
+ handleChange={(event) => HandleSearch(event)}
+ value={valueOfSearch}
+ onBlur={(event) => setSearch(event.target.value)}
+ help="Retire o foco do campo de texto ao terminar de digitar"
+ />
+ </Grid>
+ </Grid>
+ </StyledFilter>
+ ) : null}
+ </MobilePageHeader>
+
+ {items.map((row, index) =>
+ index === items.length - 1 ? (
+ <StyledDivButton
+ contrast={state.contrast}
+ key={new Date().toISOString() + row.created_at}
+ >
+ <StyledLoadMoreButton
+ contrast={state.contrast}
+ color="primary"
+ variant="text"
+ // disabled={isLoadingMoreItems}
+ startIcon={<AddRoundedIcon />}
+ disabled={isLoadingMoreItems}
+ onClick={() => {
+ setCurrPage(currPage + 1)
+ }}
+ >
+ {isLoadingMoreItems ? (
+ <CircularProgress size={24} />
+ ) : (
+ "Carregar mais itens"
+ )}
+ </StyledLoadMoreButton>
+ </StyledDivButton>
+ ) : (
+ <>
+ <MobileList
+ contrast={state.contrast}
+ key={new Date().toISOString() + row.created_at}
+ title={row.name}
+ subtitle={row.privacy}
+ backColor={"#e81f4f"}
+ avatar={<PeopleRoundedIcon />}
+ href={`/admin/Collection?collection=${row.id}`}
+ reset={() => {
+
+ }}
+ data={
+ [
+ {
+ title: "ID",
+ subtitle: row.id
+ },
+ {
+ title: "Dono(a)",
+ subtitle: row.owner ? row.owner.name : "Sem dados"
+ },
+ {
+ title: "Criado em",
+ subtitle: DisplayDate(row.created_at)
+ },
+ {
+ title: "Atualizado em",
+ subtitle: DisplayDate(row.updated_at)
+ },
+ {
+ title: "Deletar",
+ subtitle:
+ <StyledButton
+ variant="contained"
+ color="secondary"
+ onClick={() => {
+ HandleStateAlertDialog(index);
+ HandleStateCircularProgress(index);
+ }}
+ icon={<DeleteIcon />}
+ text="Deletar"
+ >
+ </StyledButton>
+ }
+ ]
+ }
+ />
+ </>
+ )
+ )}
+ </>
+ )
+ :
+ (
+ <>
+ <SnackBar
+ severity={snackInfo.icon}
+ text={snackInfo.message}
+ snackbarOpen={snackInfo.open}
+ color={snackInfo.color}
+ handleClose={() =>
+ setSnackInfo({
+ message: "",
+ icon: "",
+ open: false,
+ color: "",
+ })
+ }
+ />
+
+ <PageHeader
+ title="Coleções"
+ actions={[
+ {
+ name: "Atualizar",
+ isLoading: false,
+ func: () => {
+ setCurrPage(0)
+ setForceUpdate(!forceUpdate)
+ },
+ icon: <UpdateRoundedIcon />
+ },
+ {
+ name: "Filtrar",
+ isLoading: false,
+ func: () => {
+ setShowFilter(!showFilter);
+ },
+ icon: <FilterListRoundedIcon />
+ }
+ ]}
+ >
+ {showFilter ? (
+ <StyledFilter contrast={state.contrast}>
+ <Grid
+ container
+ alignItems="center"
+ alignContent="center"
+ xs={12}
+ direction="row"
+ justify="space-between"
+ >
+ <Grid item>
+ <FormInput
+ contrast={state.contrast}
+ selectable={true}
+ placeholder="Filtro"
+ value={option}
+ handleChange={handleChange}
+ help="Por favor, selecione uma das opções"
+ items={privacyOptions.map((option, index) => (
+ <MenuItem
+ key={option.value}
+ value={option.name}
+ name={option.value}
+ className={`${state.contrast}BackColor ${state.contrast}LinkColor`}
+ >
+ {option.value}
+ </MenuItem>
+ ))}
+ />
+ </Grid>
+
+ <Grid item>
+ <FormInput
+ contrast={state.contrast}
+ placeholder="Pesquisa"
+ handleChange={(event) => HandleSearch(event)}
+ value={valueOfSearch}
+ onBlur={(event) => setSearch(event.target.value)}
+ help="Retire o foco do campo de texto ao terminar de digitar"
+ />
+ </Grid>
+ </Grid>
+ </StyledFilter>
+ ) : null}
+ </PageHeader>
+
+ <TableData top={TOP_LABELS}>
+ <TableBody>
+ {items.map((row, index) =>
+ index === items.length - 1 ? (
+ <TableRow className={classesRow.root} key={new Date().toISOString() + row.created_at}>
+ <TableCell className={classesCell.root} colSpan={8}>
+ <Button
+ color="primary"
+ variant="text"
+ // disabled={isLoadingMoreItems}
+ startIcon={<AddRoundedIcon />}
+ disabled={isLoadingMoreItems}
+ onClick={() => {
+ setCurrPage(currPage + 1)
+ }}
+ style={state.contrast === "" ? {width: "100%"} : {width: "100%", color: "yellow", textDecoration: "underline yellow"}}
+ >
+ {isLoadingMoreItems ? (
+ <CircularProgress size={24} />
+ ) : (
+ "Carregar mais itens"
+ )}
+ </Button>
+ </TableCell>
+ </TableRow>
+ ) : (
+ <TableRow className={classesRow.root} key={new Date().toISOString() + index}>
+ <TableCell className={classesCell.root} component="th" scope="row">
+ {row.name}
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
+ <div
+ dangerouslySetInnerHTML={{ __html: row.description }}
+ ></div>
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
+ {row.owner ? row.owner.name : "Sem dados"}
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
+ {DisplayDate(row.created_at)}
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
+ {DisplayDate(row.updated_at)}
+ </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: state.contrast === "" ? "#00bcd4" : "yellow" }} />
+ </IconButton>
+ </Link>
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
+ {isLoadingToDelete === index ? (
+ <CircularProgress size={24} color="primary" />
+ ) : (
+ <IconButton
+ onClick={() => {
+ HandleStateAlertDialog(index);
+ HandleStateCircularProgress(index);
+ }}
+ >
+ <DeleteIcon style={{ fill: state.contrast === "" ? "#FF0000" : "yellow" }} />
+ </IconButton>
+ )}
+ </TableCell>
+ </TableRow>
+ )
+ )}
+ </TableBody>
+ </TableData>
+
+ {/* This alert will be displayed if the user click to delete an institution */}
+ <AlertDialog
+ open={openAlertDialog}
+ OnDelete={DeleteHandler}
+ deleteItem={deleteItem}
+ HandleClose={() => {
+ setOpenAlertDialog(false);
+ HandleStateCircularProgress(null);
+ }}
+ />
+ </>
+ )
+ )
+ )
+ }
+ </StyledContent>
+ );
};
export default Collections;
-const StyledDivButton = styled(Paper)`
+export const StyledLoadMoreButton = styled(Button)`
+ background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
+ color: ${props => props.contrast === "" ? "" : "yellow"} !important;
+ text-decoration: ${props => props.contrast === "" ? "" : "underline yellow"} !important;
+`
+
+export const StyledDivButton = styled(Paper)`
width : 100%;
display : flex;
justify-content : center;
align-items : center;
+ background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
+ color: ${props => props.contrast === "" ? "#666" : "white"} !important;
+ border: 1px solid ${props => props.contrast === "" ? "#666" : "white"} !important;
`
+const StyledContent = styled.div`
+ background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+`
\ No newline at end of file
diff --git a/src/Admin/Pages/Pages/SubPages/CommunityQuestions.js b/src/Admin/Pages/Pages/SubPages/CommunityQuestions.js
index 4c93b941127ab8009536a7ada106ca0791ffec23..b6be7e2178f7fe4cd1d28bd0752d8ad0f7b0c34f 100644
--- a/src/Admin/Pages/Pages/SubPages/CommunityQuestions.js
+++ b/src/Admin/Pages/Pages/SubPages/CommunityQuestions.js
@@ -16,7 +16,7 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useContext } from "react";
import moment from 'moment';
//imports from local files
import TableData from "../../../Components/Components/Table";
@@ -26,15 +26,17 @@ import LoadingSpinner from '../../../../Components/LoadingSpinner';
import { getRequest } from '../../../../Components/HelperFunctions/getAxiosConfig';
import MobilePageHeader from "../../../Components/Components/MobileComponents/MobilePageHeader"
import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
-import PageHeader from "../../../Components/Components/PageHeader"
+import PageHeader, { StyledFilter } from "../../../Components/Components/PageHeader"
+import FormInput from "Components/FormInput.js"
+import { Store } from 'Store'
+import { StyledLoadMoreButton, StyledDivButton, useStylesCell, useStylesRow } from "./Collections.js";
+import StyledButton from '../../../Components/Components/Button';
//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";
-import TextField from "@material-ui/core/TextField";
import IconButton from "@material-ui/core/IconButton";
-import { Button, Paper, Grid } from "@material-ui/core";
+import { Button, Grid } from "@material-ui/core";
import CircularProgress from "@material-ui/core/CircularProgress";
import AddRoundedIcon from "@material-ui/icons/AddRounded";
import UpdateRoundedIcon from "@material-ui/icons/UpdateRounded";
@@ -44,27 +46,13 @@ import EmailRoundedIcon from '@material-ui/icons/EmailRounded';
import ContactSupportRoundedIcon from "@material-ui/icons/ContactSupportRounded";
//routers
import { Link } from 'react-router-dom';
-import styled from "styled-components"
-const StyledTableCell = withStyles((theme) => ({
- head: {
- backgroundColor: theme.palette.common.black,
- color: theme.palette.common.white,
- },
- body: {
- fontSize: 14,
- },
-}))(TableCell);
+const CommunityQuestion = () => {
-const StyledTableRow = withStyles((theme) => ({
- root: {
- "&:nth-of-type(odd)": {
- backgroundColor: theme.palette.action.hover,
- },
- },
-}))(TableRow);
+ const { state } = useContext(Store)
-const CommunityQuestion = () => {
+ const classesCell = useStylesCell(state);
+ const classesRow = useStylesRow(state);
const ADD_ONE_LENGHT = [""];
const TOP_LABELS = [
@@ -93,6 +81,7 @@ const CommunityQuestion = () => {
const [email, setEmail] = useState("");
const [valueOfNameField, setValueOfNameField] = useState("")
const [name, setName] = useState("");
+ const [forceUpdate, setForceUpdate] = useState(false)
const [snackInfo, setSnackInfo] = useState({
message: "",
@@ -192,7 +181,7 @@ const CommunityQuestion = () => {
setError(true)
}
)
- }, [currPage, message, email, name, invertList])
+ }, [currPage, message, email, name, invertList, forceUpdate])
useEffect(() => {
setCurrPage(0)
@@ -234,6 +223,7 @@ const CommunityQuestion = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -255,6 +245,7 @@ const CommunityQuestion = () => {
]}
>
{showFilter ? (
+ <StyledFilter contrast={state.contrast}>
<Grid
container
direction="row"
@@ -265,47 +256,48 @@ const CommunityQuestion = () => {
xs={12}
>
<Grid item>
- <TextField
- label="Email"
- value={valueOfEmailField}
- onChange={valueOfEmailHandler}
- onBlur={(e) => { setEmail(e.target.value) }}
- helperText="Por favor, ao digitar o email que você quer filtar, retire o foco do campo de texto"
- >
- </TextField>
+ <FormInput
+ contrast={state.contrast}
+ placeholder="Email"
+ handleChange={valueOfEmailHandler}
+ value={valueOfEmailField}
+ onBlur={(event) => setEmail(event.target.value)}
+ help="Por favor, ao digitar o email que você quer filtar, retire o foco do campo de texto"
+ />
</Grid>
<Grid item>
- <TextField
- label="Mensagem"
- value={valueOfMessageField}
- onChange={valueOfMessageHandler}
- onBlur={(e) => { setMessage(e.target.value) }}
- helperText="Por favor, ao digitar a mensagem que você quer filtar, retire o foco do campo de texto"
- >
- </TextField>
+ <FormInput
+ contrast={state.contrast}
+ placeholder="Mensagem"
+ handleChange={valueOfMessageHandler}
+ value={valueOfMessageField}
+ onBlur={(event) => setMessage(event.target.value)}
+ help="Por favor, ao digitar a mensagem que você quer filtar, retire o foco do campo de texto"
+ />
</Grid>
<Grid item>
- <TextField
- label="Nome"
- value={valueOfNameField}
- onChange={valueOfNameHandler}
- onBlur={(e) => { setName(e.target.value) }}
- helperText="Por favor, ao digitar o nome que você quer filtar, retire o foco do campo de texto"
- >
- </TextField>
+ <FormInput
+ contrast={state.contrast}
+ placeholder="Nome"
+ handleChange={valueOfNameHandler}
+ value={valueOfNameField}
+ onBlur={(event) => setName(event.target.value)}
+ help="Por favor, ao digitar o nome que você quer filtar, retire o foco do campo de texto"
+ />
</Grid>
</Grid>
+ </StyledFilter>
) : null}
</MobilePageHeader>
- <div style={{ height: "2em" }}></div>
-
{items.map((row, index) =>
index === items.length - 1 ? (
<StyledDivButton
+ contrast={state.contrast}
key="Load more"
>
- <Button
+ <StyledLoadMoreButton
+ contrast={state.contrast}
color="primary"
variant="text"
// disabled={isLoadingMoreItems}
@@ -320,11 +312,12 @@ const CommunityQuestion = () => {
) : (
"Carregar mais itens"
)}
- </Button>
+ </StyledLoadMoreButton>
</StyledDivButton>
) : (
<>
<MobileList
+ contrast={state.contrast}
key={index}
title={row.name}
subtitle={row.id}
@@ -340,13 +333,13 @@ const CommunityQuestion = () => {
subtitle:
row.email ?
<Link to={`/admin/sendEmail?email=${row.email}`} style={{ textDecoration: 'none' }}>
- <Button
+ <StyledButton
variant='text'
- color='primary'
- startIcon={<EmailRoundedIcon />}
- >
- {row.email}
- </Button>
+ color="primary"
+ style={state.contrast === "" ? {} : {color: "yellow", textDecoration: "underline yellow"}}
+ icon={<EmailRoundedIcon style={state.contrast === "" ? {color: "#666"} : {color: "white"}}/>}
+ text={row.email}
+ />
</Link> : null
},
@@ -362,7 +355,6 @@ const CommunityQuestion = () => {
]
}
/>
- <div style={{ height: "0.5em" }} />
</>
)
)}
@@ -394,6 +386,7 @@ const CommunityQuestion = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -408,6 +401,7 @@ const CommunityQuestion = () => {
]}
>
{showFilter ? (
+ <StyledFilter contrast={state.contrast}>
<Grid
container
direction="row"
@@ -418,48 +412,47 @@ const CommunityQuestion = () => {
xs={12}
>
<Grid item>
- <TextField
- label="Email"
- value={valueOfEmailField}
- onChange={valueOfEmailHandler}
- onBlur={(e) => { setEmail(e.target.value) }}
- helperText="Por favor, ao digitar o email que você quer filtar, retire o foco do campo de texto"
- >
- </TextField>
+ <FormInput
+ contrast={state.contrast}
+ placeholder="Email"
+ handleChange={valueOfEmailHandler}
+ value={valueOfEmailField}
+ onBlur={(event) => setEmail(event.target.value)}
+ help="Por favor, ao digitar o email que você quer filtar, retire o foco do campo de texto"
+ />
</Grid>
<Grid item>
- <TextField
- label="Mensagem"
- value={valueOfMessageField}
- onChange={valueOfMessageHandler}
- onBlur={(e) => { setMessage(e.target.value) }}
- helperText="Por favor, ao digitar a mensagem que você quer filtar, retire o foco do campo de texto"
- >
- </TextField>
+ <FormInput
+ contrast={state.contrast}
+ placeholder="Mensagem"
+ handleChange={valueOfMessageHandler}
+ value={valueOfMessageField}
+ onBlur={(event) => setMessage(event.target.value)}
+ help="Por favor, ao digitar a mensagem que você quer filtar, retire o foco do campo de texto"
+ />
</Grid>
<Grid item>
- <TextField
- label="Nome"
- value={valueOfNameField}
- onChange={valueOfNameHandler}
- onBlur={(e) => { setName(e.target.value) }}
- helperText="Por favor, ao digitar o nome que você quer filtar, retire o foco do campo de texto"
- >
- </TextField>
+ <FormInput
+ contrast={state.contrast}
+ placeholder="Nome"
+ handleChange={valueOfNameHandler}
+ value={valueOfNameField}
+ onBlur={(event) => setName(event.target.value)}
+ help="Por favor, ao digitar o nome que você quer filtar, retire o foco do campo de texto"
+ />
</Grid>
</Grid>
+ </StyledFilter>
) : null}
</PageHeader>
- <div style={{ height: "2em" }}></div>
-
<TableData top={TOP_LABELS} onIconPressed={cleanArrayAndInvert}>
<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"
@@ -468,6 +461,7 @@ const CommunityQuestion = () => {
onClick={() => {
setCurrPage(currPage + 1)
}}
+ style={state.contrast === "" ? {width: "100%"} : {width: "100%", color: "yellow", textDecoration: "underline yellow"}}
>
{isLoadingMoreItems ? (
<CircularProgress size={24} />
@@ -475,44 +469,44 @@ 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">
- {
- row.email ?
- <Link to={`/admin/sendEmail?email=${row.email}`} style={{ textDecoration: 'none' }}>
- <Button
- variant='text'
- color='primary'
- startIcon={<EmailRoundedIcon />}
- >
- {row.email}
- </Button>
- </Link> : null
- }
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
+ {
+ row.email ?
+ <Link to={`/admin/sendEmail?email=${row.email}`} style={{ textDecoration: 'none' }}>
+ <StyledButton
+ variant='text'
+ color='primary'
+ style={state.contrast === "" ? {} : {color: "yellow", textDecoration: "underline yellow"}}
+ icon={<EmailRoundedIcon style={state.contrast === "" ? {color: "#666"} : {color: "white"}}/>}
+ text={row.email}
+ />
+ </Link> : null
+ }
+ </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>
@@ -522,12 +516,3 @@ const CommunityQuestion = () => {
}
}
export default CommunityQuestion;
-
-
-const StyledDivButton = styled(Paper)`
- width : 100%;
- display : flex;
- justify-content : center;
- align-items : center;
-`
-
diff --git a/src/Admin/Pages/Pages/SubPages/Complaints.js b/src/Admin/Pages/Pages/SubPages/Complaints.js
index d03514dc91f170cd84c4807e42c5f4d643de036e..0da9bdf14296d50813f2de8cff6e73262443592b 100644
--- a/src/Admin/Pages/Pages/SubPages/Complaints.js
+++ b/src/Admin/Pages/Pages/SubPages/Complaints.js
@@ -16,7 +16,7 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useContext } from "react";
import moment from "moment";
//imports from local files
import TableData from "../../../Components/Components/Table";
@@ -26,14 +26,16 @@ import LoadingSpinner from '../../../../Components/LoadingSpinner';
import { getRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
import MobilePageHeader from "../../../Components/Components/MobileComponents/MobilePageHeader"
-import PageHeader from "../../../Components/Components/PageHeader"
+import PageHeader, { StyledFilter } from "../../../Components/Components/PageHeader"
+import FormInput from "Components/FormInput.js"
+import { Store } from 'Store'
+import StyledButton from '../../../Components/Components/Button';
+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";
import TableRow from "@material-ui/core/TableRow";
-import TextField from "@material-ui/core/TextField";
import IconButton from "@material-ui/core/IconButton";
import { Button, Paper, Grid } from "@material-ui/core";
import CircularProgress from "@material-ui/core/CircularProgress";
@@ -44,28 +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/";
@@ -93,6 +82,7 @@ const Complaints = () => {
const [description, setDescription] = useState("");
const [valueOfDescField, setValueOfDescField] = useState("")
const [currPage, setCurrPage] = useState(0)
+ const [forceUpdate, setForceUpdate] = useState(false)
const [snackInfo, setSnackInfo] = useState({
message: "",
@@ -158,7 +148,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",
}}
@@ -174,7 +165,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",
}}
@@ -188,7 +180,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",
}}
@@ -267,7 +260,7 @@ const Complaints = () => {
setError(true)
}
)
- }, [currPage, complainOption, stateOption, description, invertList])
+ }, [currPage, complainOption, stateOption, description, invertList, forceUpdate])
useEffect(() => {
setComplainOption()
@@ -307,6 +300,7 @@ const Complaints = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -328,6 +322,7 @@ const Complaints = () => {
]}
>
{showFilter ? (
+ <StyledFilter contrast={state.contrast}>
<Grid
container
direction="row"
@@ -338,58 +333,68 @@ const Complaints = () => {
xs={12}
>
<Grid item>
- <TextField
- select
- label="Motivo"
- value={complainOption}
- onChange={handleChangeComplain}
- helperText="Por favor, selecione uma das opções"
- >
- {ComplaintReasons.map((option, index) => (
- <MenuItem
- key={option.value}
- value={option.name}
- name={option.value}
- >
- {option.value}
- </MenuItem>
- ))}
- </TextField>
+ <FormInput
+ contrast={state.contrast}
+ selectable={true}
+ placeholder="Motivo"
+ value={complainOption}
+ handleChange={handleChangeComplain}
+ help="Por favor, selecione uma das opções"
+ items={ComplaintReasons.map((option, index) => (
+ <MenuItem
+ key={option.value}
+ value={option.name}
+ name={option.value}
+ className={`${state.contrast}BackColor ${state.contrast}LinkColor`}
+ >
+ {option.value}
+ </MenuItem>
+ ))}
+ />
</Grid>
<Grid item>
- <TextField
- select
- label="Estado"
- value={stateOption}
- onChange={handleChangeState}
- helperText="Por favor, selecione uma das opções"
- >
- {stateOptions.map((option, index) => (
- <MenuItem
- key={option.value}
- value={option.name}
- name={option.value}
- >
- {option.value}
- </MenuItem>
- ))}
- </TextField>
+ <FormInput
+ contrast={state.contrast}
+ selectable={true}
+ placeholder="Estado"
+ value={stateOption}
+ handleChange={handleChangeState}
+ help="Por favor, selecione uma das opções"
+ items={stateOptions.map((option, index) => (
+ <MenuItem
+ key={option.value}
+ value={option.name}
+ name={option.value}
+ className={`${state.contrast}BackColor ${state.contrast}LinkColor`}
+ >
+ {option.value}
+ </MenuItem>
+ ))}
+ />
</Grid>
<Grid item>
- <TextField label="Descrição" helperText="Ao digitar a descrição, retire o foco do campo de texto" onChange={DescriptionHandler} value={valueOfDescField} onBlur={e => setDescription(e.target.value)} />
+ <FormInput
+ contrast={state.contrast}
+ placeholder="Descrição"
+ handleChange={DescriptionHandler}
+ value={valueOfDescField}
+ onBlur={(event) => setDescription(event.target.value)}
+ help="Ao digitar a descrição, retire o foco do campo de texto"
+ />
</Grid>
</Grid>
+ </StyledFilter>
) : null}
</MobilePageHeader>
- <div style={{ height: "2em" }}></div>
-
{items.map((row, index) =>
index === items.length - 1 ? (
<StyledDivButton
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
>
- <Button
+ <StyledLoadMoreButton
+ contrast={state.contrast}
color="primary"
variant="text"
// disabled={isLoadingMoreItems}
@@ -404,11 +409,12 @@ const Complaints = () => {
) : (
"Carregar mais itens"
)}
- </Button>
+ </StyledLoadMoreButton>
</StyledDivButton>
) : (
<>
<MobileList
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
title={row.complainable_type}
subtitle={row.id}
@@ -440,7 +446,6 @@ const Complaints = () => {
]
}
/>
- <div style={{ height: "0.5em" }} />
</>
)
)}
@@ -473,6 +478,7 @@ const Complaints = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -487,6 +493,7 @@ const Complaints = () => {
]}
>
{showFilter ? (
+ <StyledFilter contrast={state.contrast}>
<Grid
container
direction="row"
@@ -497,52 +504,60 @@ const Complaints = () => {
xs={12}
>
<Grid item>
- <TextField
- select
- label="Motivo"
- value={complainOption}
- onChange={handleChangeComplain}
- helperText="Por favor, selecione uma das opções"
- >
- {ComplaintReasons.map((option, index) => (
- <MenuItem
- key={option.value}
- value={option.name}
- name={option.value}
- >
- {option.value}
- </MenuItem>
- ))}
- </TextField>
+ <FormInput
+ contrast={state.contrast}
+ selectable={true}
+ placeholder="Motivo"
+ value={complainOption}
+ handleChange={handleChangeComplain}
+ help="Por favor, selecione uma das opções"
+ items={ComplaintReasons.map((option, index) => (
+ <MenuItem
+ key={option.value}
+ value={option.name}
+ name={option.value}
+ className={`${state.contrast}BackColor ${state.contrast}LinkColor`}
+ >
+ {option.value}
+ </MenuItem>
+ ))}
+ />
</Grid>
<Grid item>
- <TextField
- select
- label="Estado"
- value={stateOption}
- onChange={handleChangeState}
- helperText="Por favor, selecione uma das opções"
- >
- {stateOptions.map((option, index) => (
- <MenuItem
- key={option.value}
- value={option.name}
- name={option.value}
- >
- {option.value}
- </MenuItem>
- ))}
- </TextField>
+ <FormInput
+ contrast={state.contrast}
+ selectable={true}
+ placeholder="Estado"
+ value={stateOption}
+ handleChange={handleChangeState}
+ help="Por favor, selecione uma das opções"
+ items={stateOptions.map((option, index) => (
+ <MenuItem
+ key={option.value}
+ value={option.name}
+ name={option.value}
+ className={`${state.contrast}BackColor ${state.contrast}LinkColor`}
+ >
+ {option.value}
+ </MenuItem>
+ ))}
+ />
</Grid>
<Grid item>
- <TextField label="Descrição" helperText="Ao digitar a descrição, retire o foco do campo de texto" onChange={DescriptionHandler} value={valueOfDescField} onBlur={e => setDescription(e.target.value)} />
+ <FormInput
+ contrast={state.contrast}
+ placeholder="Descrição"
+ handleChange={DescriptionHandler}
+ value={valueOfDescField}
+ onBlur={(event) => setDescription(event.target.value)}
+ help="Ao digitar a descrição, retire o foco do campo de texto"
+ />
</Grid>
</Grid>
+ </StyledFilter>
) : null}
</PageHeader>
- <div style={{ height: "2em" }}></div>
-
<Grid xs={12} container>
<TableData
top={TOP_LABELS}
@@ -551,9 +566,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"
@@ -563,6 +578,7 @@ const Complaints = () => {
onClick={() => {
setCurrPage(currPage + 1)
}}
+ style={state.contrast === "" ? {width: "100%"} : {width: "100%", color: "yellow", textDecoration: "underline yellow"}}
>
{isLoadingMoreItems ? (
<CircularProgress size={24} />
@@ -570,67 +586,57 @@ 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">
- <Button
- variant="text"
- secondary={true}
- startIcon={
- <LaunchRoundedIcon style={{ fill: "#FA8072" }} />
- }
- >
- <a
- style={{
- textDecoration: "none",
- color: "#FA8072",
- }}
- target="_blank"
- rel="noreferrer"
- href={
- PORTAL_MEC +
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
+ <a href={PORTAL_MEC +
convertToLink(
row.complainable_type,
row.complainable_id
- )
- }
+ )}
>
- MEC RED
- </a>
- </Button>
- </StyledTableCell>
- </StyledTableRow>
+ <StyledButton
+ variant="text"
+ secondary={true}
+ icon={
+ <LaunchRoundedIcon style={{ fill: "#FA8072" }} />
+ }
+ text="MEC RED"
+ />
+ </a>
+ </TableCell>
+ </TableRow>
)
)}
</TableBody>
@@ -641,12 +647,4 @@ const Complaints = () => {
}
}
};
-export default Complaints;
-
-const StyledDivButton = styled(Paper)`
- width : 100%;
- display : flex;
- justify-content : center;
- align-items : center;
-`
-
+export default Complaints;
\ No newline at end of file
diff --git a/src/Admin/Pages/Pages/SubPages/EducationalObjects.js b/src/Admin/Pages/Pages/SubPages/EducationalObjects.js
index 69d0dfc326b54a0f970a6e98e905dddff7f0f41f..64a493888db5f300d3293c169be3e3766df2ed4a 100644
--- a/src/Admin/Pages/Pages/SubPages/EducationalObjects.js
+++ b/src/Admin/Pages/Pages/SubPages/EducationalObjects.js
@@ -16,7 +16,7 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useContext } from "react";
import moment from 'moment';
// Imports from local file
import TableData from "../../../Components/Components/Table";
@@ -25,7 +25,11 @@ import AlertDialog from "../../../Components/Components/AlertDialog";
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 PageHeader, { StyledFilter } from "../../../Components/Components/PageHeader"
+import FormInput from "Components/FormInput.js"
+import { Store } from 'Store'
+import { StyledLoadMoreButton, StyledDivButton, useStylesCell, useStylesRow } from './Collections';
+import StyledButton from '../../../Components/Components/Button';
// Imports about icon
import FilterListRoundedIcon from "@material-ui/icons/FilterListRounded";
import AddRoundedIcon from "@material-ui/icons/AddRounded";
@@ -37,40 +41,24 @@ 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 Paper from "@material-ui/core/Paper";
import Button from "@material-ui/core/Button";
import Grid from "@material-ui/core/Grid";
import { CircularProgress } from "@material-ui/core";
-import TextField from "@material-ui/core/TextField";
// services
import { getRequest, deleteRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
//Filters
import { Url, DeleteFilter } from "../../../Filters";
//router
import { Link } from 'react-router-dom';
-import styled from 'styled-components'
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 = [""];
@@ -83,6 +71,7 @@ const EducationalObjects = () => {
const [isLoadingMoreItems, setIsLoadingMoreItems] = useState(false);
const [showFilter, setShowFilter] = useState(false)
const [openAlertDialog, setOpenAlertDialog] = useState(false);
+ const [forceUpdate, setForceUpdate] = useState(false)
const [snackInfo, setSnackInfo] = useState({
message: "",
@@ -237,7 +226,7 @@ const EducationalObjects = () => {
setError(true)
}
)
- }, [currPage, search, description, author])
+ }, [currPage, search, description, author, forceUpdate])
useEffect(() => {
setCurrPage(0)
@@ -326,6 +315,7 @@ const EducationalObjects = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -341,34 +331,36 @@ const EducationalObjects = () => {
>
{
showFilter &&
+ <StyledFilter contrast={state.contrast}>
<Grid item xs={12}>
<Grid container justify="space-between" spacing={3}>
{TextFieldOfTheFilter.map((field, index) => (
<Grid item key={field.label}>
- <TextField
- id={index}
- label={field.label}
- type="search"
- onChange={field.onChange}
- onBlur={field.onBlur}
- value={field.value}
- helperText={field.helperText}
- />
+ <FormInput
+ contrast={state.contrast}
+ id={index}
+ placeholder={field.label}
+ inputType="search"
+ handleChange={field.onChange}
+ onBlur={field.onBlur}
+ value={field.value}
+ help={field.helperText}
+ />
</Grid>
))}
</Grid>
</Grid>
+ </StyledFilter>
}
</MobilePageHeader>
{/************** End of the header **************/}
- <div style={{ height: "2em" }}></div>
-
{/************** Start of display data in table **************/}
{items.map((row, index) =>
index === items.length - 1 ? (
- <StyledDivButton>
- <Button
+ <StyledDivButton contrast={state.contrast}>
+ <StyledLoadMoreButton
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
color="primary"
variant="text"
@@ -384,11 +376,12 @@ const EducationalObjects = () => {
) : (
"Carregar mais itens"
)}
- </Button>
+ </StyledLoadMoreButton>
</StyledDivButton>
) : (
<>
<MobileList
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
title={row.name}
subtitle={row.id}
@@ -419,22 +412,20 @@ const EducationalObjects = () => {
{
title: "Deletar",
subtitle:
- <Button
+ <StyledButton
variant="contained"
color="secondary"
onClick={() => {
HandleStateAlertDialog(index);
HandleStateCircularProgress(index);
}}
- startIcon={<DeleteIcon />}
- >
- Deletar
- </Button>
+ icon={<DeleteIcon />}
+ text="Deletar"
+ />
}
]
}
/>
- <div style={{ height: "0.5em" }} />
</>
)
)}
@@ -468,6 +459,7 @@ const EducationalObjects = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -483,37 +475,38 @@ const EducationalObjects = () => {
>
{
showFilter &&
+ <StyledFilter contrast={state.contrast}>
<Grid item xs={12}>
<Grid container justify="space-between" spacing={3}>
{TextFieldOfTheFilter.map((field, index) => (
<Grid item key={field.label}>
- <TextField
- id={index}
- label={field.label}
- type="search"
- onChange={field.onChange}
- onBlur={field.onBlur}
- value={field.value}
- helperText={field.helperText}
- />
+ <FormInput
+ contrast={state.contrast}
+ id={index}
+ placeholder={field.label}
+ inputType="search"
+ handleChange={field.onChange}
+ onBlur={field.onBlur}
+ value={field.value}
+ help={field.helperText}
+ />
</Grid>
))}
</Grid>
</Grid>
+ </StyledFilter>
}
</PageHeader>
{/************** End of the header **************/}
- <div style={{ height: "2em" }}></div>
-
{/************** Start of display data in table **************/}
<TableData top={TOP_TABLE}>
<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"
@@ -524,6 +517,7 @@ const EducationalObjects = () => {
onClick={() => {
setCurrPage(currPage + 1)
}}
+ style={state.contrast === "" ? {width: "100%"} : {width: "100%", color: "yellow", textDecoration: "underline yellow"}}
>
{isLoadingMoreItems ? (
<CircularProgress size={24} />
@@ -531,33 +525,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" />
) : (
@@ -567,11 +561,11 @@ const EducationalObjects = () => {
HandleStateCircularProgress(index);
}}
>
- <DeleteIcon style={{ fill: "#FF0000" }} />
+ <DeleteIcon style={{ fill: state.contrast === "" ? "#FF0000" : "yellow" }}/>
</IconButton>
)}
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell>
+ </TableRow>
)
)}
</TableBody>
@@ -594,12 +588,4 @@ const EducationalObjects = () => {
}
};
-export default EducationalObjects;
-
-const StyledDivButton = styled(Paper)`
- width : 100%;
- display : flex;
- justify-content : center;
- align-items : center;
-`
-
+export default EducationalObjects;
\ No newline at end of file
diff --git a/src/Admin/Pages/Pages/SubPages/Inframe.js b/src/Admin/Pages/Pages/SubPages/Inframe.js
index f2979dbbda1405d86d73cd8bd1a51da35167a685..cfda1e2917175cd3bb4e21d543d6bd5748497579 100644
--- a/src/Admin/Pages/Pages/SubPages/Inframe.js
+++ b/src/Admin/Pages/Pages/SubPages/Inframe.js
@@ -16,24 +16,73 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React from 'react';
+import React, { useContext, useEffect, useState } from 'react';
import Welcome from '../../../Components/Components/Welcome';
+import LoadingSpinner from 'Components/LoadingSpinner';
+
+import { Store } from 'Store'
+import styled from 'styled-components'
const IframeComponent = () => {
+ const { state } = useContext(Store);
+
+ const [srcMetabase, setSrcMetabase] = useState('');
+ const [loading, setLoading] = useState(false);
+
+ const changeMetabase = () => {
+ if (state.contrast !== "")
+ setSrcMetabase("https://metabase.c3sl.ufpr.br/public/dashboard/8ada315d-b8df-4b18-b7fb-d06b0ac64623#theme=night");
+ else
+ setSrcMetabase("https://metabase.c3sl.ufpr.br/public/dashboard/8ada315d-b8df-4b18-b7fb-d06b0ac64623");
+ }
+
+ useEffect(() => {
+ if (loading === true) {
+ changeMetabase();
+ setLoading(false);
+ }
+ }, [ loading ])
+
+ useEffect(() => {
+ setLoading(true);
+ }, [ state.contrast ])
+
return (
- <div>
- <Welcome />
- <div style={{ height: '1em' }}></div>
- <iframe
- title="Métricas portal MEC"
- src='https://metabase.c3sl.ufpr.br/public/dashboard/8ada315d-b8df-4b18-b7fb-d06b0ac64623'
- height='800px'
- width='100%'
- // allowTransparency={true}
- frameBorder={0}
- >
- </iframe>
- </div>
+ <>
+ {!loading ? (
+ <StyledDiv contrast={state.contrast}>
+ <Welcome contrast={state.contrast}/>
+ <div style={{ height: '1em' }}></div>
+ <StyledIframe
+ title="Métricas portal MEC"
+ src={srcMetabase}
+ height='800px'
+ width='100%'
+ // allowTransparency={true}
+ frameBorder={0}
+ contrast={state.contrast}
+ >
+ </StyledIframe>
+ </StyledDiv>
+ )
+ :
+ (
+ <LoadingSpinner/>
+ )
+ }
+ </>
)
}
+
+const StyledDiv = styled.div`
+ background-color: ${props => props.contrast === "" ? "white" : "black"};
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+`
+
+const StyledIframe = styled.iframe`
+ background-color: ${props => props.contrast === "" ? "white" : "black"};
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ border: 1px solid ${props => props.contrast === "" ? "#666" : "white"};
+`
+
export default IframeComponent;
diff --git a/src/Admin/Pages/Pages/SubPages/Institutions.js b/src/Admin/Pages/Pages/SubPages/Institutions.js
index 7f713b9e4f42d42c906092fc0c3e1baccbdb1080..4fa613c5c156445f71b6331dd32d4ec2b1abc640 100644
--- a/src/Admin/Pages/Pages/SubPages/Institutions.js
+++ b/src/Admin/Pages/Pages/SubPages/Institutions.js
@@ -16,7 +16,7 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useContext } from "react";
// Imports from local files
import TableData from "../../../Components/Components/Table";
import SnackBar from "../../../../Components/SnackbarComponent";
@@ -24,7 +24,10 @@ import AlertDialog from "../../../Components/Components/AlertDialog";
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 PageHeader, { StyledFilter } from "../../../Components/Components/PageHeader"
+import { StyledLoadMoreButton, StyledDivButton, useStylesCell, useStylesRow } from "./Collections.js";
+import { Store } from 'Store';
+import StyledButton from '../../../Components/Components/Button';
// Imports about icon
import FilterListRoundedIcon from "@material-ui/icons/FilterListRounded";
import AddRoundedIcon from "@material-ui/icons/AddRounded";
@@ -36,40 +39,25 @@ 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 Paper from "@material-ui/core/Paper";
import Button from "@material-ui/core/Button";
import Grid from "@material-ui/core/Grid";
import { CircularProgress } from "@material-ui/core";
-import TextField from "@material-ui/core/TextField";
+import FormInput from "Components/FormInput.js"
// services
import { getRequest, deleteRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
//Filters
import { Url, DeleteFilter } from "../../../Filters";
//router
import { Link, useHistory } from 'react-router-dom';
-import styled from "styled-components"
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 = [""];
@@ -84,6 +72,7 @@ const Institutions = () => {
const [deleteItem, setDeleteItem] = useState({}); //Delete Item
const [isLoadingToDelete, setIsLoadingToDelete] = useState(null);
const [isLoadingMoreItems, setIsLoadingMoreItems] = useState(false);
+ const [forceUpdate, setForceUpdate] = useState(false)
const [openAlertDialog, setOpenAlertDialog] = useState(false);
@@ -228,7 +217,7 @@ const Institutions = () => {
setError(true)
}
)
- }, [currPage, description, country, search, city, invertList])
+ }, [currPage, description, country, search, city, invertList, forceUpdate])
useEffect(() => {
setSeacrh("")
@@ -327,6 +316,7 @@ const Institutions = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -350,35 +340,38 @@ const Institutions = () => {
>
{
showFilter &&
- <Grid item xs={12}>
- <Grid container justify="space-between" spacing={3}>
- {TextFieldOfTheFilter.map((field, index) => (
- <Grid item key={field.label}>
- <TextField
- id={index}
- label={field.label}
- value={field.value}
- helperText={field.helperText}
- onChange={field.onChange}
- onBlur={field.onBlur}
- />
- </Grid>
- ))}
+ <StyledFilter contrast={state.contrast}>
+ <Grid item xs={12}>
+ <Grid container justify="space-between" spacing={3}>
+ {TextFieldOfTheFilter.map((field, index) => (
+ <Grid item key={field.label}>
+ <FormInput
+ contrast={state.contrast}
+ id={index}
+ placeholder={field.label}
+ handleChange={field.onChange}
+ onBlur={field.onBlur}
+ value={field.value}
+ help={field.helperText}
+ />
+ </Grid>
+ ))}
+ </Grid>
</Grid>
- </Grid>
+ </StyledFilter>
}
</MobilePageHeader>
{/************** End of the header **************/}
- <div style={{ height: "2em" }}></div>
-
{/************** Start of display data in table **************/}
{items.map((row, index) =>
index === items.length - 1 ? (
<StyledDivButton
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
>
- <Button
+ <StyledLoadMoreButton
+ contrast={state.contrast}
color="primary"
variant="text"
// disabled={isLoadingMoreItems}
@@ -391,59 +384,58 @@ const Institutions = () => {
{isLoadingMoreItems ? (
<CircularProgress size={24} />
) : (
- "Carregar mais itens"
- )}
- </Button>
+ "Carregar mais itens"
+ )}
+ </StyledLoadMoreButton>
</StyledDivButton>
) : (
- <>
- <MobileList
- key={new Date().toISOString() + row.created_at}
- title={row.name}
- subtitle={row.id}
- backColor={"#ff7f00"}
- avatar={<AccountBalanceRoundedIcon />}
- href={`/admin/institution?institution=${row.id}`}
- reset={() => {
-
- }}
- data={
- [
- {
- title: "Descrição",
- subtitle: row.description ? row.description : "Sem dado"
-
- },
- {
- title: "Cidade",
- subtitle: row.city ? row.city : "Sem dado"
-
- },
- {
- title: "PaÃs",
- subtitle: row.country ? row.country : "Sem dado"
- },
- {
- title: "Deletar",
- subtitle:
- <Button
- variant="contained"
- color="secondary"
- onClick={() => {
- HandleStateAlertDialog(index);
- HandleStateCircularProgress(index);
- }}
- startIcon={<DeleteIcon />}
- >
- Deletar
- </Button>
- }
- ]
- }
- />
- <div style={{ height: "0.5em" }} />
- </>
- )
+ <>
+ <MobileList
+ contrast={state.contrast}
+ key={new Date().toISOString() + row.created_at}
+ title={row.name}
+ subtitle={row.id}
+ backColor={"#ff7f00"}
+ avatar={<AccountBalanceRoundedIcon />}
+ href={`/admin/institution?institution=${row.id}`}
+ reset={() => {
+
+ }}
+ data={
+ [
+ {
+ title: "Descrição",
+ subtitle: row.description ? row.description : "Sem dado"
+
+ },
+ {
+ title: "Cidade",
+ subtitle: row.city ? row.city : "Sem dado"
+
+ },
+ {
+ title: "PaÃs",
+ subtitle: row.country ? row.country : "Sem dado"
+ },
+ {
+ title: "Deletar",
+ subtitle:
+ <StyledButton
+ variant="contained"
+ color="secondary"
+ onClick={() => {
+ HandleStateAlertDialog(index);
+ HandleStateCircularProgress(index);
+ }}
+ icon={<DeleteIcon />}
+ text="Deletar"
+ />
+ }
+ ]
+ }
+ />
+ </>
+ )
)}
{/************** End of display data in table **************/}
@@ -477,6 +469,7 @@ const Institutions = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -500,36 +493,37 @@ const Institutions = () => {
>
{
showFilter &&
- <Grid item xs={12}>
- <Grid container justify="space-between" spacing={3}>
- {TextFieldOfTheFilter.map((field, index) => (
- <Grid item key={field.label}>
- <TextField
- id={index}
- label={field.label}
- value={field.value}
- helperText={field.helperText}
- onChange={field.onChange}
- onBlur={field.onBlur}
- />
- </Grid>
- ))}
+ <StyledFilter contrast={state.contrast}>
+ <Grid item xs={12}>
+ <Grid container justify="space-between" spacing={3}>
+ {TextFieldOfTheFilter.map((field, index) => (
+ <Grid item key={field.label}>
+ <FormInput
+ contrast={state.contrast}
+ id={index}
+ placeholder={field.label}
+ handleChange={field.onChange}
+ onBlur={field.onBlur}
+ value={field.value}
+ help={field.helperText}
+ />
+ </Grid>
+ ))}
+ </Grid>
</Grid>
- </Grid>
+ </StyledFilter>
}
</PageHeader>
{/************** End of the header **************/}
- <div style={{ height: "2em" }}></div>
-
{/************** Start of display data in table **************/}
<TableData top={topTable} onIconPressed={cleanArrayAndInvert}>
<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"
@@ -538,51 +532,52 @@ const Institutions = () => {
onClick={() => {
setCurrPage(currPage + 1)
}}
+ style={state.contrast === "" ? { width: "100%" } : { width: "100%", color: "yellow", textDecoration: "underline yellow" }}
>
{isLoadingMoreItems ? (
<CircularProgress size={24} />
) : (
- "Carregar mais itens"
- )}
+ "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">{row.city}</StyledTableCell>
- <StyledTableCell align="right">
- {row.country}
- </StyledTableCell>
- <StyledTableCell align="right">
- <Link to={`/admin/institution?institution=${row.id}`}>
- <IconButton>
- <VisibilityIcon style={{ fill: "#00bcd4" }} />
- </IconButton>
- </Link>
- </StyledTableCell>
- <StyledTableCell align="right">
- {isLoadingToDelete === index ? (
- <CircularProgress size={24} color="primary" />
- ) : (
- <IconButton
- onClick={() => {
- HandleStateAlertDialog(index);
- HandleStateCircularProgress(index);
- }}
- >
- <DeleteIcon style={{ fill: "#FF0000" }} />
- </IconButton>
- )}
- </StyledTableCell>
- </StyledTableRow>
- )
+ <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">{row.city}</TableCell>
+ <TableCell className={classesCell.root} align="right">
+ {row.country}
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
+ <Link to={`/admin/institution?institution=${row.id}`}>
+ <IconButton>
+ <VisibilityIcon style={{ fill: state.contrast === "" ? "#00bcd4" : "yellow" }} />
+ </IconButton>
+ </Link>
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
+ {isLoadingToDelete === index ? (
+ <CircularProgress size={24} color="primary" />
+ ) : (
+ <IconButton
+ onClick={() => {
+ HandleStateAlertDialog(index);
+ HandleStateCircularProgress(index);
+ }}
+ >
+ <DeleteIcon style={{ fill: state.contrast === "" ? "#FF0000" : "yellow" }} />
+ </IconButton>
+ )}
+ </TableCell>
+ </TableRow>
+ )
)}
</TableBody>
</TableData>
@@ -604,12 +599,4 @@ const Institutions = () => {
}
};
-export default Institutions;
-
-const StyledDivButton = styled(Paper)`
- width : 100%;
- display : flex;
- justify-content : center;
- align-items : center;
-`
-
+export default Institutions;
\ No newline at end of file
diff --git a/src/Admin/Pages/Pages/SubPages/Languages.js b/src/Admin/Pages/Pages/SubPages/Languages.js
index c38ac1e1015d1ad352f23e597ee85240c4e28a2c..55dca43dbdb64bdef7d7ea8e6dcb938640219bd6 100644
--- a/src/Admin/Pages/Pages/SubPages/Languages.js
+++ b/src/Admin/Pages/Pages/SubPages/Languages.js
@@ -16,7 +16,7 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState, useContext } from 'react'
//imports from local files
import TableData from '../../../Components/Components/Table';
import SnackBar from '../../../../Components/SnackbarComponent';
@@ -28,13 +28,15 @@ 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 { Store } from 'Store'
+import { StyledLoadMoreButton, StyledDivButton, useStylesCell, useStylesRow } from './Collections';
+import StyledButton from '../../../Components/Components/Button';
//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';
import IconButton from '@material-ui/core/IconButton';
-import { Button, Paper } from '@material-ui/core';
+import { Button } from '@material-ui/core';
import CircularProgress from '@material-ui/core/CircularProgress';
import AddRoundedIcon from '@material-ui/icons/AddRounded';
import UpdateRoundedIcon from '@material-ui/icons/UpdateRounded';
@@ -42,28 +44,15 @@ import EditRoundedIcon from '@material-ui/icons/EditRounded';
import DeleteRoundedIcon from '@material-ui/icons/DeleteRounded';
//router
import { Link, useHistory } from 'react-router-dom';
-import styled from "styled-components"
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 Languages = () => {
-const StyledTableRow = withStyles((theme) => ({
- root: {
- '&:nth-of-type(odd)': {
- backgroundColor: theme.palette.action.hover,
- },
- },
-}))(TableRow);
+ const { state } = useContext(Store)
+
+ const classesCell = useStylesCell(state);
+ const classesRow = useStylesRow(state);
-const Languages = () => {
const ADD_ONE_LENGHT = [""];
const TOP_LABELS = ['ID', 'NOME', 'CODE', 'EDITAR', 'DELETAR'] //Labels from Table
const WINDOW_WIDTH = window.innerWidth
@@ -80,6 +69,7 @@ const Languages = () => {
const [deleteItem, setDeleteItem] = useState({}); //Delete Item
const [isLoadingToDelete, setIsLoadingToDelete] = useState(null);
+ const [forceUpdate, setForceUpdate] = useState(false)
const [snackInfo, setSnackInfo] = useState({
message: '',
@@ -192,7 +182,7 @@ const Languages = () => {
setError(true)
}
)
- }, [currPage, invertList])
+ }, [currPage, invertList, forceUpdate])
if (error) {
return <div>Error: {error.message}</div>;
@@ -231,6 +221,7 @@ const Languages = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -246,12 +237,11 @@ const Languages = () => {
>
</MobilePageHeader>
- <div style={{ height: '2em' }}></div>
-
{items.map((row, index) =>
index === items.length - 1 ? (
- <StyledDivButton key={new Date().toISOString() + row.created_at}>
- <Button
+ <StyledDivButton contrast={state.contrast} key={new Date().toISOString() + row.created_at}>
+ <StyledLoadMoreButton
+ contrast={state.contrast}
color="primary"
variant="text"
// disabled={isLoadingMoreItems}
@@ -264,49 +254,48 @@ const Languages = () => {
{isLoadingMoreItems ? (
<CircularProgress size={24} />
) : (
- "Carregar mais itens"
- )}
- </Button>
+ "Carregar mais itens"
+ )}
+ </StyledLoadMoreButton>
</StyledDivButton>
) : (
- <>
- <MobileList
- key={new Date().toISOString() + row.created_at}
- title={row.name}
- subtitle={row.id}
- backColor={"#e81f4f"}
- avatar={<LanguageRoundedIcon />}
- href={`/admin/languageEdit?language=${row.id}`}
- reset={() => {
+ <>
+ <MobileList
+ contrast={state.contrast}
+ key={new Date().toISOString() + row.created_at}
+ title={row.name}
+ subtitle={row.id}
+ backColor={"#e81f4f"}
+ avatar={<LanguageRoundedIcon />}
+ href={`/admin/languageEdit?language=${row.id}`}
+ reset={() => {
- }}
- data={
- [
- {
- title: "Code",
- subtitle: row.code
- },
- {
- title: "Deletar",
- subtitle:
- <Button
- variant="contained"
- color="secondary"
- onClick={() => {
- HandleStateAlertDialog(index);
- HandleStateCircularProgress(index);
- }}
- startIcon={<DeleteRoundedIcon />}
- >
- Deletar
- </Button>
- }
- ]
- }
- />
- <div style={{ height: "0.5em" }} />
- </>
- )
+ }}
+ data={
+ [
+ {
+ title: "Code",
+ subtitle: row.code
+ },
+ {
+ title: "Deletar",
+ subtitle:
+ <StyledButton
+ variant="contained"
+ color="secondary"
+ onClick={() => {
+ HandleStateAlertDialog(index);
+ HandleStateCircularProgress(index);
+ }}
+ icon={<DeleteRoundedIcon />}
+ text="Deletar"
+ />
+ }
+ ]
+ }
+ />
+ </>
+ )
)}
</>
);
@@ -335,6 +324,7 @@ const Languages = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -350,8 +340,6 @@ const Languages = () => {
>
</PageHeader>
- <div style={{ height: '2em' }}></div>
-
<TableData
top={TOP_LABELS}
onIconPressed={cleanArrayAndInvert}
@@ -359,9 +347,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,42 +359,43 @@ 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" />
) : (
- <IconButton
- onClick={() => {
- HandleStateAlertDialog(index);
- HandleStateCircularProgress(index);
- }}
- >
- <DeleteRoundedIcon style={{ fill: "#FF0000" }} />
- </IconButton>
- )}
- </StyledTableCell>
- </StyledTableRow>
+ <IconButton
+ onClick={() => {
+ HandleStateAlertDialog(index);
+ HandleStateCircularProgress(index);
+ }}
+ >
+ <DeleteRoundedIcon style={{ fill: state.contrast === "" ? "#FF0000" : "yellow" }} />
+ </IconButton>
+ )}
+ </TableCell>
+ </TableRow>
))}
</TableBody>
</TableData>
@@ -426,12 +415,4 @@ const Languages = () => {
}
}
}
-export default Languages;
-
-const StyledDivButton = styled(Paper)`
- width : 100%;
- display : flex;
- justify-content : center;
- align-items : center;
-`
-
+export default Languages;
\ No newline at end of file
diff --git a/src/Admin/Pages/Pages/SubPages/NoteVariables.js b/src/Admin/Pages/Pages/SubPages/NoteVariables.js
index 1ad35f99a8c2a8c5a7e8340acfbd1d9551ec5473..865a290186031d94578ca0b42344035b88e3fae9 100644
--- a/src/Admin/Pages/Pages/SubPages/NoteVariables.js
+++ b/src/Admin/Pages/Pages/SubPages/NoteVariables.js
@@ -15,11 +15,9 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useEffect, useState } from 'react';
+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 Paper from "@material-ui/core/Paper";
import TableCell from '@material-ui/core/TableCell';
import TableRow from '@material-ui/core/TableRow';
import CheckRoundedIcon from "@material-ui/icons/CheckRounded";
@@ -37,34 +35,22 @@ 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, useStylesCell, useStylesRow } from './Collections';
+import { Store } from 'Store'
//Services
import { getRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import { Url } from '../../../Filters';
//routers
import { Link } from 'react-router-dom';
-import styled from "styled-components"
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 NoteVariables = () => {
+
+ const { state } = useContext(Store)
-const StyledTableRow = withStyles((theme) => ({
- root: {
- '&:nth-of-type(odd)': {
- backgroundColor: theme.palette.action.hover,
- },
- },
-}))(TableRow);
+ const classesCell = useStylesCell(state);
+ const classesRow = useStylesRow(state);
-const NoteVariables = () => {
const WINDOW_WIDTH = window.innerWidth
const ADD_ONE_LENGHT = [""];
@@ -74,6 +60,7 @@ const NoteVariables = () => {
const [currPage, setCurrPage] = useState(0)
const [items, setItems] = useState([]); //Necessary to consult the API, data
const [isLoadingMoreItems, setIsLoadingMoreItems] = useState(false)
+ const [forceUpdate, setForceUpdate] = useState(false)
const [snackInfo, setSnackInfo] = useState({
message: '',
@@ -130,7 +117,7 @@ const NoteVariables = () => {
setError(true)
}
)
- }, [currPage, invertList])
+ }, [currPage, invertList, forceUpdate])
if (error) {
return <div>Error: {error.message}</div>;
@@ -164,6 +151,7 @@ const NoteVariables = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -178,12 +166,11 @@ const NoteVariables = () => {
>
</MobilePageHeader>
- <div style={{ height: '2em' }}></div>
-
{items.map((row, index) =>
index === items.length - 1 ? (
- <StyledDivButton key={new Date().toISOString() + row.created_at}>
- <Button
+ <StyledDivButton contrast={state.contrast} key={new Date().toISOString() + row.created_at}>
+ <StyledLoadMoreButton
+ contrast={state.contrast}
color="primary"
variant="text"
// disabled={isLoadingMoreItems}
@@ -198,11 +185,12 @@ const NoteVariables = () => {
) : (
"Carregar mais itens"
)}
- </Button>
+ </StyledLoadMoreButton>
</StyledDivButton>
) : (
<>
<MobileList
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
title={row.name}
subtitle={row.id}
@@ -225,12 +213,11 @@ const NoteVariables = () => {
},
{
title: "Ativo",
- subtitle: row.active ? <CheckRoundedIcon style={{ fill: '#3CB371' }} /> : <BlockRoundedIcon style={{ fill: '#FA8072' }} />
+ subtitle: row.active ? <CheckRoundedIcon style={{ fill: state.contrast === "" ? "#3CB371" : "white" }} /> : <BlockRoundedIcon style={{ fill: state.contrast === "" ? "#FA8072" : "white" }} />
},
]
}
/>
- <div style={{ height: "0.5em" }} />
</>
)
)}
@@ -260,6 +247,7 @@ const NoteVariables = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -267,8 +255,6 @@ const NoteVariables = () => {
>
</PageHeader>
- <div style={{ height: '2em' }}></div>
-
<TableData
top={topTable}
onIconPressed={cleanArrayAndInvert}
@@ -276,9 +262,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'
@@ -287,27 +273,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 }}>
@@ -315,15 +302,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>
@@ -334,11 +321,4 @@ const NoteVariables = () => {
}
-export default NoteVariables;
-
-const StyledDivButton = styled(Paper)`
- width : 100%;
- display : flex;
- justify-content : center;
- align-items : center;
-`
+export default NoteVariables;
\ No newline at end of file
diff --git a/src/Admin/Pages/Pages/SubPages/Permissions.js b/src/Admin/Pages/Pages/SubPages/Permissions.js
index 787ac0de2893aeaa4107d7c57d3ef43935fe78dd..0623ea00ed8f2b755fe0beed8c4798597536c23c 100644
--- a/src/Admin/Pages/Pages/SubPages/Permissions.js
+++ b/src/Admin/Pages/Pages/SubPages/Permissions.js
@@ -16,7 +16,7 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState, useContext } from 'react'
//imports from local files
import TableData from '../../../Components/Components/Table';
import SnackBar from '../../../../Components/SnackbarComponent';
@@ -25,15 +25,17 @@ import { Url } from '../../../Filters';
import LoadingSpinner from '../../../../Components/LoadingSpinner';
import { DeleteFilter } from '../../../Filters';
import { getRequest, deleteRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
-import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
+import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
import MobilePageHeader from "../../../Components/Components/MobileComponents/MobilePageHeader"
import PageHeader from "../../../Components/Components/PageHeader"
+import { StyledLoadMoreButton, StyledDivButton, useStylesCell, useStylesRow } from './Collections';
+import { Store } from 'Store'
+import StyledButton from '../../../Components/Components/Button';
//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';
-import { Button, Paper } from '@material-ui/core';
+import { Button } from '@material-ui/core';
import CircularProgress from '@material-ui/core/CircularProgress';
import AddRoundedIcon from '@material-ui/icons/AddRounded';
import UpdateRoundedIcon from '@material-ui/icons/UpdateRounded';
@@ -41,28 +43,15 @@ import EditRoundedIcon from '@material-ui/icons/EditRounded';
import DeleteRoundedIcon from '@material-ui/icons/DeleteRounded';
//router
import { Link, useHistory } from 'react-router-dom';
-import styled from "styled-components"
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 UserPermissions = () => {
-const StyledTableRow = withStyles((theme) => ({
- root: {
- '&:nth-of-type(odd)': {
- backgroundColor: theme.palette.action.hover,
- },
- },
-}))(TableRow);
+ const { state } = useContext(Store)
+
+ const classesCell = useStylesCell(state);
+ const classesRow = useStylesRow(state);
-const UserPermissions = () => {
const ADD_ONE_LENGHT = [""];
const TOP_LABELS = ['ID', 'NOME', 'DESCRIÇÃO', 'AÇÕES'] //Labels from Table
const WINDOW_WIDTH = window.innerWidth
@@ -79,6 +68,7 @@ const UserPermissions = () => {
const [deleteItem, setDeleteItem] = useState({}); //Delete Item
const [isLoadingToDelete, setIsLoadingToDelete] = useState(null);
+ const [forceUpdate, setForceUpdate] = useState(false)
const [snackInfo, setSnackInfo] = useState({
message: '',
@@ -189,7 +179,7 @@ const UserPermissions = () => {
setError(true)
}
)
- }, [currPage, invertList])
+ }, [currPage, invertList, forceUpdate])
if (error) {
return <div>Error: {error.message}</div>;
@@ -228,6 +218,7 @@ const UserPermissions = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -250,12 +241,11 @@ const UserPermissions = () => {
>
</MobilePageHeader>
- <div style={{ height: '2em' }}></div>
-
{items.map((row, index) =>
index === items.length - 1 ? (
- <StyledDivButton key={new Date().toISOString() + row.created_at}>
- <Button
+ <StyledDivButton contrast={state.contrast} key={new Date().toISOString() + row.created_at}>
+ <StyledLoadMoreButton
+ contrast={state.contrast}
color="primary"
variant="text"
// disabled={isLoadingMoreItems}
@@ -270,11 +260,12 @@ const UserPermissions = () => {
) : (
"Carregar mais itens"
)}
- </Button>
+ </StyledLoadMoreButton>
</StyledDivButton>
) : (
<>
<MobileList
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
title={row.name}
subtitle={row.id}
@@ -292,22 +283,20 @@ const UserPermissions = () => {
},
{
title: "Ações",
- subtitle: <Button
+ subtitle: <StyledButton
variant="contained"
color="secondary"
onClick={() => {
HandleStateAlertDialog(index)
HandleStateCircularProgress(index)
}}
- startIcon={<DeleteRoundedIcon />}
- >
- Deletar
- </Button>
+ icon={<DeleteRoundedIcon />}
+ text="Deletar"
+ />
},
]
}
/>
- <div style={{ height: "0.5em" }} />
</>
)
)}
@@ -338,6 +327,7 @@ const UserPermissions = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -353,8 +343,6 @@ const UserPermissions = () => {
>
</PageHeader>
- <div style={{ height: '2em' }}></div>
-
<TableData
top={TOP_LABELS}
onIconPressed={cleanArrayAndInvert}
@@ -362,9 +350,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,36 +362,36 @@ 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
+ <StyledButton
style={{ width: "100%", marginBottom: "0.5em" }}
variant="contained"
color="primary"
- startIcon={<EditRoundedIcon />}
- >
- Editar
- </Button>
+ icon={<EditRoundedIcon />}
+ text="Editar"
+ />
</Link>
{isLoadingToDelete === index ? (
<CircularProgress size={24} color="primary" />
) : (
- <Button
+ <StyledButton
style={{ width: "100%" }}
variant="contained"
color="secondary"
@@ -411,14 +399,13 @@ const UserPermissions = () => {
HandleStateAlertDialog(index)
HandleStateCircularProgress(index)
}}
- startIcon={<DeleteRoundedIcon />}
- >
- Deletar
- </Button>
+ icon={<DeleteRoundedIcon />}
+ text="Deletar"
+ />
)}
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell>
+ </TableRow>
))}
</TableBody>
</TableData>
@@ -438,12 +425,4 @@ const UserPermissions = () => {
}
}
}
-export default UserPermissions;
-
-const StyledDivButton = styled(Paper)`
- width : 100%;
- display : flex;
- justify-content : center;
- align-items : center;
-`
-
+export default UserPermissions;
\ No newline at end of file
diff --git a/src/Admin/Pages/Pages/SubPages/Questions.js b/src/Admin/Pages/Pages/SubPages/Questions.js
index ca32e0cd11a506134b40c2801dde53209d615cb2..706a93cca96d177ce7afa8ff05d7393ed40e5eb6 100644
--- a/src/Admin/Pages/Pages/SubPages/Questions.js
+++ b/src/Admin/Pages/Pages/SubPages/Questions.js
@@ -16,7 +16,7 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState, useContext } from 'react'
import moment from 'moment';
//imports from local files
import TableData from '../../../Components/Components/Table';
@@ -27,40 +27,27 @@ 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, useStylesCell, useStylesRow } from './Collections';
+import { Store } from 'Store'
+import { BlueCheckBox, ContrastCheckBox } from "../../../Components/Components/Inputs/EmailInputs"
//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';
-import { Button, Paper } from '@material-ui/core';
+import { Button } from '@material-ui/core';
import CircularProgress from '@material-ui/core/CircularProgress';
import AddRoundedIcon from '@material-ui/icons/AddRounded';
import UpdateRoundedIcon from '@material-ui/icons/UpdateRounded';
-import Switch from '@material-ui/core/Switch';
//router
import { useHistory } from 'react-router-dom';
-import styled from "styled-components"
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 Questions = () => {
-const StyledTableRow = withStyles((theme) => ({
- root: {
- '&:nth-of-type(odd)': {
- backgroundColor: theme.palette.action.hover,
- },
- },
-}))(TableRow);
+ const { state } = useContext(Store)
-const Questions = () => {
+ const classesCell = useStylesCell(state);
+ const classesRow = useStylesRow(state);
const ADD_ONE_LENGHT = [""];
const WINDOW_WIDTH = window.innerWidth
@@ -73,6 +60,7 @@ const Questions = () => {
const [items, setItems] = useState([]); //Necessary to consult the API, data
const [currPage, setCurrPage] = useState(0)
const [isLoadingMoreItems, setIsLoadingMoreItems] = useState(false) //controlls the state of loadind more data
+ const [forceUpdate, setForceUpdate] = useState(false)
const [snackInfo, setSnackInfo] = useState({
message: '',
@@ -194,7 +182,7 @@ const Questions = () => {
setError(true)
}
)
- }, [currPage, invertList])
+ }, [currPage, invertList, forceUpdate])
if (error) {
@@ -226,6 +214,7 @@ const Questions = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -248,14 +237,14 @@ const Questions = () => {
>
</MobilePageHeader>
- <div style={{ height: '2em' }}></div>
-
{items.map((row, index) =>
index === items.length - 1 ? (
<StyledDivButton
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
>
- <Button
+ <StyledLoadMoreButton
+ contrast={state.contrast}
color="primary"
variant="text"
// disabled={isLoadingMoreItems}
@@ -270,11 +259,12 @@ const Questions = () => {
) : (
"Carregar mais itens"
)}
- </Button>
+ </StyledLoadMoreButton>
</StyledDivButton>
) : (
<>
<MobileList
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
title={row.id}
subtitle={DisplayDate(row.created_at)}
@@ -291,21 +281,7 @@ const Questions = () => {
{
title: "Status",
subtitle:
- row.status === 'active' ?
- <Switch
- checked={true}
- onChange={() => handleChange(index, row.status)}
- name="checkedB"
- color="primary"
- />
- :
-
- <Switch
- checked={false}
- onChange={() => handleChange(index, row.status)}
- name="checkedB"
- color="primary"
- />
+ state.contrast === "" ? <BlueCheckBox checked={row.status === "active"} onChange={() => handleChange(index, row.status)} name="checkedB"/> : <ContrastCheckBox checked={row.status === "active"} onChange={() => handleChange(index, row.status)} name="checkedB"/>
},
{
title: "Atualizado em",
@@ -314,7 +290,6 @@ const Questions = () => {
]
}
/>
- <div style={{ height: "0.5em" }} />
</>
)
)}
@@ -345,6 +320,7 @@ const Questions = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -360,8 +336,6 @@ const Questions = () => {
>
</PageHeader>
- <div style={{ height: '2em' }}></div>
-
<TableData
top={TOP_LABELS}
onIconPressed={cleanArrayAndInvert}
@@ -369,9 +343,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,41 +355,28 @@ 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">
- {
- row.status === 'active' ?
- <Switch
- checked={true}
- onChange={() => handleChange(index, row.status)}
- name="checkedB"
- color="primary"
- />
- :
-
- <Switch
- checked={false}
- onChange={() => handleChange(index, row.status)}
- name="checkedB"
- color="primary"
- />
- }
- </StyledTableCell>
- <StyledTableCell align="right">{DisplayDate(row.updated_at)}</StyledTableCell>
- </StyledTableRow>
+ <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">
+ {
+ state.contrast === "" ? <BlueCheckBox checked={row.status === "active"} onChange={() => handleChange(index, row.status)} name="checkedB"/> : <ContrastCheckBox checked={row.status === "active"} onChange={() => handleChange(index, row.status)} name="checkedB"/>
+ }
+ </TableCell >
+ <TableCell className={classesCell.root} align="right">{DisplayDate(row.updated_at)}</TableCell >
+ </TableRow>
))}
</TableBody>
</TableData>
@@ -424,12 +385,4 @@ const Questions = () => {
}
}
}
-export default Questions;
-
-const StyledDivButton = styled(Paper)`
- width : 100%;
- display : flex;
- justify-content : center;
- align-items : center;
-`
-
+export default Questions;
\ No newline at end of file
diff --git a/src/Admin/Pages/Pages/SubPages/Rating.js b/src/Admin/Pages/Pages/SubPages/Rating.js
index 22d57d409dfe56f9b649f36c9ad4b67d10cd923c..927426178ba72323816aa4f052a747ca6d28b4d1 100644
--- a/src/Admin/Pages/Pages/SubPages/Rating.js
+++ b/src/Admin/Pages/Pages/SubPages/Rating.js
@@ -16,11 +16,9 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useEffect, useState } from 'react';
+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 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';
@@ -37,6 +35,9 @@ 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, useStylesCell, useStylesRow } from './Collections';
+import { Store } from 'Store'
+import StyledButton from '../../../Components/Components/Button';
//Services
import AlertDialog from "../../../Components/Components/AlertDialog";
import { Url } from '../../../Filters';
@@ -45,27 +46,14 @@ import { getRequest, deleteRequest } from '../../../../Components/HelperFunction
//routers
import { Link, useHistory } from 'react-router-dom';
import StarRoundedIcon from "@material-ui/icons/StarRounded";
-import styled from "styled-components"
-const StyledTableCell = withStyles((theme) => ({
- head: {
- backgroundColor: theme.palette.common.black,
- color: theme.palette.common.white,
- },
- body: {
- fontSize: 14,
- },
-}))(TableCell);
+const Ratings = () => {
-const StyledTableRow = withStyles((theme) => ({
- root: {
- '&:nth-of-type(odd)': {
- backgroundColor: theme.palette.action.hover,
- },
- },
-}))(TableRow);
+ const { state } = useContext(Store)
+
+ const classesCell = useStylesCell(state);
+ const classesRow = useStylesRow(state);
-const Ratings = () => {
const WINDOW_WIDTH = window.innerWidth
const ADD_ONE_LENGHT = [""];
@@ -80,6 +68,7 @@ const Ratings = () => {
const [openAlertDialog, setOpenAlertDialog] = useState(false); //controlls the state od alert dialog
const [deleteItem, setDeleteItem] = useState({}); //Delete Item
const [isLoadingToDelete, setIsLoadingToDelete] = useState(null);
+ const [forceUpdate, setForceUpdate] = useState(false)
const [snackInfo, setSnackInfo] = useState({
message: '',
@@ -190,7 +179,7 @@ const Ratings = () => {
setError(true)
}
)
- }, [currPage, invertList])
+ }, [currPage, invertList, forceUpdate])
if (error) {
return <div>Error: {error.message}</div>;
@@ -232,6 +221,7 @@ const Ratings = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -247,12 +237,11 @@ const Ratings = () => {
>
</MobilePageHeader>
- <div style={{ height: '2em' }}></div>
-
{items.map((row, index) =>
index === items.length - 1 ? (
- <StyledDivButton key={new Date().toISOString() + row.created_at}>
- <Button
+ <StyledDivButton contrast={state.contrast} key={new Date().toISOString() + row.created_at}>
+ <StyledLoadMoreButton
+ contrast={state.contrast}
color="primary"
variant="text"
// disabled={isLoadingMoreItems}
@@ -267,11 +256,12 @@ const Ratings = () => {
) : (
"Carregar mais itens"
)}
- </Button>
+ </StyledLoadMoreButton>
</StyledDivButton>
) : (
<>
<MobileList
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
title={row.name}
subtitle={row.id}
@@ -290,22 +280,20 @@ const Ratings = () => {
{
title: "Deletar",
subtitle:
- <Button
+ <StyledButton
variant="contained"
color="secondary"
onClick={() => {
HandleStateAlertDialog(index);
HandleStateCircularProgress(index);
}}
- startIcon={<DeleteRoundedIcon />}
- >
- Deletar
- </Button>
+ icon={<DeleteRoundedIcon />}
+ text="Deletar"
+ />
}
]
}
/>
- <div style={{ height: "0.5em" }} />
</>
)
)}
@@ -335,6 +323,7 @@ const Ratings = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -350,8 +339,6 @@ const Ratings = () => {
>
</PageHeader>
- <div style={{ height: '2em' }}></div>
-
<TableData
top={topTable}
onIconPressed={cleanArrayAndInvert}
@@ -359,9 +346,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'
@@ -370,28 +357,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" />
) : (
@@ -401,11 +389,11 @@ const Ratings = () => {
HandleStateCircularProgress(index);
}}
>
- <DeleteRoundedIcon style={{ fill: "#FF0000" }} />
+ <DeleteRoundedIcon style={{ fill: state.contrast === "" ? "#FF0000" : "yellow" }} />
</IconButton>
)}
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell>
+ </TableRow>
))}
</TableBody>
</TableData>
@@ -428,11 +416,3 @@ const Ratings = () => {
export default Ratings;
-
-const StyledDivButton = styled(Paper)`
- width : 100%;
- display : flex;
- justify-content : center;
- align-items : center;
-`
-
diff --git a/src/Admin/Pages/Pages/SubPages/SendEmail.js b/src/Admin/Pages/Pages/SubPages/SendEmail.js
index aff09bc843ce63f5238516695dd3887398987756..92db3b654999d747828f2ab979a2147b3432896f 100644
--- a/src/Admin/Pages/Pages/SubPages/SendEmail.js
+++ b/src/Admin/Pages/Pages/SubPages/SendEmail.js
@@ -18,12 +18,14 @@ You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React from 'react';
-import Card from "@material-ui/core/Card";
+import React, { useContext } from 'react';
import CardContent from "@material-ui/core/CardContent";
import { makeStyles } from "@material-ui/core/styles";
import { Typography } from '@material-ui/core';
import EmailInputs from '../../../Components/Components/Inputs/EmailInputs';
+import { StyledCard } from "../../../Components/Styles/DataCard";
+
+import { Store } from 'Store'
const useStyles = makeStyles({
root: {
@@ -54,14 +56,16 @@ const useStyles = makeStyles({
},
});
-
const SendEmail = ({ match }) => {
+
+ const { state } = useContext(Store);
+
const classes = useStyles();
const urlParams = new URLSearchParams(window.location.search);
const email = urlParams.get("email");
return (
- <Card>
+ <StyledCard contrast={state.contrast}>
<CardContent>
<Typography
className={classes.title}
@@ -70,9 +74,9 @@ const SendEmail = ({ match }) => {
>
Enviar email
</Typography>
- <EmailInputs email={email} />
+ <EmailInputs email={email} contrast={state.contrast}/>
</CardContent>
- </Card>
+ </StyledCard>
);
}
diff --git a/src/Admin/Pages/Pages/SubPages/Users.js b/src/Admin/Pages/Pages/SubPages/Users.js
index dfb320d805bed3ad175195bbef2eaf886140bff5..55d5b5c9169afbed0cbdd36ce2beb52b91a71c0d 100644
--- a/src/Admin/Pages/Pages/SubPages/Users.js
+++ b/src/Admin/Pages/Pages/SubPages/Users.js
@@ -15,12 +15,10 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useEffect, useState } from 'react';
+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';
@@ -28,7 +26,6 @@ import VisibilityIcon from '@material-ui/icons/Visibility';
import { Button, Chip } from '@material-ui/core';
import CircularProgress from '@material-ui/core/CircularProgress';
import AddRoundedIcon from '@material-ui/icons/AddRounded';
-import TextField from '@material-ui/core/TextField';
import UpdateRoundedIcon from '@material-ui/icons/UpdateRounded'
import FilterListRoundedIcon from "@material-ui/icons/FilterListRounded";
//Local files
@@ -37,7 +34,11 @@ import SnackBar from '../../../../Components/SnackbarComponent';
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 PageHeader, { StyledFilter } from "../../../Components/Components/PageHeader"
+import FormInput from "Components/FormInput.js"
+import { Store } from 'Store'
+import { StyledLoadMoreButton, StyledDivButton, useStylesCell, useStylesRow } from './Collections';
+import StyledButton from '../../../Components/Components/Button';
//Services
import { getRequest, putRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import { Url } from '../../../Filters';
@@ -51,25 +52,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
@@ -82,6 +71,7 @@ const Users = () => {
const [isLoadingMoreItems, setIsLoadingMoreItems] = useState(false)
const [showFilter, setShowFilter] = useState(false)
const [currPage, setCurrPage] = useState(0)
+ const [forceUpdate, setForceUpdate] = useState(false)
const [name, setName] = useState("");
const [nameValue, setNameValue] = useState("")
@@ -226,7 +216,7 @@ const Users = () => {
setIsLoadingMoreItems(false)
}
)
- }, [currPage, email, name, invertList])
+ }, [currPage, email, name, invertList, forceUpdate])
useEffect(() => {
setNameValue("")
@@ -266,6 +256,7 @@ const Users = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -296,36 +287,39 @@ const Users = () => {
>
{
showFilter ? (
+ <StyledFilter contrast={state.contrast}>
<Grid container direction="row" justify="space-between" alignItems="center">
<Grid item>
- <TextField
- label="Name"
- value={nameValue}
- onChange={(e) => { NameHandler(e) }}
- onBlur={(e) => { setEmail(e.target.value) }}
- helperText="Ao digitar, retire o foco do campo"
+ <FormInput
+ contrast={state.contrast}
+ placeholder="Name"
+ handleChange={(e) => { NameHandler(e) }}
+ onBlur={(e) => { setName(e.target.value) }}
+ value={nameValue}
+ help="Ao digitar, retire o foco do campo"
/>
</Grid>
<Grid item>
- <TextField
- label="Email"
- value={emailValue}
- onChange={(e) => { EmailHandler(e) }}
- onBlur={(e) => { setEmail(e.target.value) }}
- helperText="Ao digitar, retire o foco do campo"
+ <FormInput
+ contrast={state.contrast}
+ placeholder="Email"
+ handleChange={(e) => { EmailHandler(e) }}
+ onBlur={(e) => { setEmail(e.target.value) }}
+ value={emailValue}
+ help="Ao digitar, retire o foco do campo"
/>
</Grid>
</Grid>
+ </StyledFilter>
) : null
}
</MobilePageHeader>
- <div style={{ height: '2em' }}></div>
-
{items.map((row, index) =>
index === items.length - 1 ? (
- <StyledDivButton key={new Date().toISOString() + row.created_at}>
- <Button
+ <StyledDivButton contrast={state.contrast} key={new Date().toISOString() + row.created_at}>
+ <StyledLoadMoreButton
+ contrast={state.contrast}
color="primary"
variant="text"
// disabled={isLoadingMoreItems}
@@ -340,11 +334,12 @@ const Users = () => {
) : (
"Carregar mais itens"
)}
- </Button>
+ </StyledLoadMoreButton>
</StyledDivButton>
) : (
<>
<MobileList
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
title={row.name}
subtitle={row.id}
@@ -368,13 +363,12 @@ const Users = () => {
title: "Email",
subtitle: row.email ?
<Link to={`/admin/sendEmail?email=${row.email}`} style={{ textDecoration: 'none' }}>
- <Button
+ <StyledButton
variant='text'
- color='primary'
- startIcon={<EmailRoundedIcon />}
- >
- {row.email}
- </Button>
+ color="primary"
+ icon={<EmailRoundedIcon style={state.contrast === "" ? {color: "#666"} : {color: "white"}}/>}
+ text={row.email}
+ />
</Link> : null
},
{
@@ -389,7 +383,9 @@ const Users = () => {
title: "Permissão",
subtitle: 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>
))
},
@@ -399,19 +395,17 @@ const Users = () => {
},
{
title: "Ações rápidas",
- subtitle: <Button
+ subtitle: <StyledButton
variant="contained"
color="primary"
disabled={isUserPublisher(row.roles)}
onClick={() => { turnUserPublisher(row.roles, row.id) }}
- >
- Tornar publicador
- </Button>
+ text="Tornar publicador"
+ />
}
]}
/>
- <div style={{ height: "0.5em" }} />
</>
)
)}
@@ -441,6 +435,7 @@ const Users = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -464,32 +459,34 @@ const Users = () => {
>
{
showFilter ? (
+ <StyledFilter contrast={state.contrast}>
<Grid container direction="row" justify="space-between" alignItems="center">
<Grid item>
- <TextField
- label="Name"
- value={nameValue}
- onChange={(e) => { NameHandler(e) }}
- onBlur={(e) => { setEmail(e.target.value) }}
- helperText="Ao digitar, retire o foco do campo"
+ <FormInput
+ contrast={state.contrast}
+ placeholder="Name"
+ handleChange={(e) => { NameHandler(e) }}
+ onBlur={(e) => { setName(e.target.value) }}
+ value={nameValue}
+ help="Ao digitar, retire o foco do campo"
/>
</Grid>
<Grid item>
- <TextField
- label="Email"
- value={emailValue}
- onChange={(e) => { EmailHandler(e) }}
- onBlur={(e) => { setEmail(e.target.value) }}
- helperText="Ao digitar, retire o foco do campo"
+ <FormInput
+ contrast={state.contrast}
+ placeholder="Email"
+ handleChange={(e) => { EmailHandler(e) }}
+ onBlur={(e) => { setEmail(e.target.value) }}
+ value={emailValue}
+ help="Ao digitar, retire o foco do campo"
/>
</Grid>
</Grid>
+ </StyledFilter>
) : null
}
</PageHeader>
- <div style={{ height: '2em' }}></div>
-
<TableData
top={topTable}
onIconPressed={cleanArrayAndInvert}
@@ -497,9 +494,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'
@@ -508,51 +505,65 @@ 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 ?
+ <Link to={`/admin/sendEmail?email=${row.email}`} style={{ textDecoration: 'none' }}>
+ <StyledButton
+ variant='text'
+ color="primary"
+ icon={<EmailRoundedIcon style={state.contrast === "" ? {color: "#666"} : {color: "white"}}/>}
+ text={row.email}
+ />
+ </Link> : null
+ }
+ </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">
- <Button
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
+ <StyledButton
variant="contained"
color="primary"
disabled={isUserPublisher(row.roles)}
onClick={() => { turnUserPublisher(row.roles, row.id) }}
- >
- Tornar publicador
- </Button>
- </StyledTableCell>
- <StyledTableCell align="right">
+ text="Tornar publicador"
+ />
+ </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>
@@ -566,12 +577,4 @@ export default Users;
const ChipDiv = styled.div`
margin-top : 0.5em;
-`
-
-const StyledDivButton = styled(Paper)`
- width : 100%;
- display : flex;
- justify-content : center;
- align-items : center;
-`
-
+`
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index 39fa0673f95359d1181fffeb92fc404ad3ca24fe..217d0f2584c59dcf82ea931f36134df5d2a2ea1e 100644
--- a/src/App.js
+++ b/src/App.js
@@ -181,299 +181,300 @@ export default function App() {
// history={piwik.connectToHistory(customHistory)}
<>
{!awaitTest &&
- <React.Suspense fallback={<LoadingScreen />}>
- <BrowserRouter history={piwik.connectToHistory(customHistory)}>
- <ContrastBar />
- <Header />
- <div
- style={{
- backgroundImage:
- "linear-gradient(to right,#ff7f00,#e81f4f,#673ab7,#00bcd4)",
- height: "5px",
+ <React.Suspense fallback={<LoadingScreen/>}>
+ {/*<BrowserRouter history={piwik.connectToHistory(customHistory)}>*/}
+ <BrowserRouter>
+ <ContrastBar/>
+ <Header/>
+ <div
+ style={{
+ backgroundImage:
+ "linear-gradient(to right,#ff7f00,#e81f4f,#673ab7,#00bcd4)",
+ height: "5px",
+ }}
+ ></div>
+ <link
+ href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto&display=swap"
+ rel="stylesheet"
+ />
+ <div id="Conteudo_scroll"></div>
+ <Switch style={state.contrast === "" ? {backgroundColor: "white"} : {backgroundColor: "black"}}>
+ <Redirect from="/home" to="/" />
+ <Route path="/" exact={true} component={Home} />
+ <Route path="/busca" component={Search} />
+ <Route path="/perfil" component={UserPage} />
+ <Route path="/editarperfil" component={EditProfilePage} />
+ <Route path="/recurso/:recursoId" component={ResourcePage} />
+ <Route path="/termos-publicar-recurso" component={TermsPage} />
+ <Route path="/permission" component={PublicationPermissionsPage} />
+ {/*<Route path="termos-de-uso#publicacoes-de-usuario" component={}*/}
+ <Route path="/ajuda" component={HelpCenter} />
+ <Route path="/contato" component={Contact} />
+ <Route path="/termos-resumido" component={SummarizedUserTerms} />
+ <Route path="/termos" component={UserTerms} />
+ <Route path="/sobre" component={AboutPage} />
+ <Route path="/mapa-site" component={SiteMap} />
+ <Route path="/acessibilidade" component={Accessibility} />
+ <Route path="/publicando-recurso" component={TabResoursePub} />
+ <Route path="/encontrando-recurso" component={TabResourseFind} />
+ <Route path="/participando-da-rede" component={TabNetPart} />
+ <Route path="/gerenciando-conta" component={TabManageAc} />
+ <Route path="/plataforma-mec" component={TabPlataformaMEC} />
+ <Route path="/recuperar-senha/alterar-senha" component={ChangePasswordPage} />
+ <Route path="/recuperar-senha" component={PasswordRecoveryPage} />
+ <Route path="/usuario-publico/:userId" component={PublicUserPage} />
+ <Route
+ path="/editar-recurso/:recursoId"
+ component={EditLearningObjectPage}
+ />
+ <Route path="/professor" component={PageProfessor} />
+ <Route path="/upload" component={UploadPage} />
+ <Route path="/loja" component={ItemStore} />
+ <Route path="/colecao-do-usuario/:id" component={CollectionPage} />
+ <Route path="/colecao" component={FormationMaterialPage} />
+ <Route path="/topico" component={FormationMaterialPage} />
+ <Route path="/iframe-colecao" component={FormationMaterialIframe} />
+ <Route path="/material-formacao" component={MaterialPage} />
+
+ <Route
+ path="/admin/home"
+ exact={true}
+ render={() => {
+ return <AdminTemplate inner={<Inframe/>}/>
+ }}
+ />
+ <Route
+ path="/admin/institutions"
+ render={() => {
+ return <AdminTemplate inner={<Institution />}/>
+ }}
+ />
+ <Route
+ path="/admin/institution"
+ render={() => {
+ return <AdminTemplate inner={<InstitutionCard />}/>
+ }}
+ />
+ <Route
+ path="/admin/institutionEdit"
+ render={() => {
+ return <AdminTemplate inner={<InstitutionsInput />}/>
}}
- ></div>
- <link
- href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto&display=swap"
- rel="stylesheet"
- />
- <div id="Conteudo_scroll"></div>
- <Switch style={state.contrast === "" ? { backgroundColor: "white" } : { backgroundColor: "black" }}>
- <Redirect from="/home" to="/" />
- <Route path="/" exact={true} component={Home} />
- <Route path="/busca" component={Search} />
- <Route path="/perfil" component={UserPage} />
- <Route path="/editarperfil" component={EditProfilePage} />
- <Route path="/recurso/:recursoId" component={ResourcePage} />
- <Route path="/termos-publicar-recurso" component={TermsPage} />
- <Route path="/permission" component={PublicationPermissionsPage} />
- {/*<Route path="termos-de-uso#publicacoes-de-usuario" component={}*/}
- <Route path="/ajuda" component={HelpCenter} />
- <Route path="/contato" component={Contact} />
- <Route path="/termos-resumido" component={SummarizedUserTerms} />
- <Route path="/termos" component={UserTerms} />
- <Route path="/sobre" component={AboutPage} />
- <Route path="/mapa-site" component={SiteMap} />
- <Route path="/acessibilidade" component={Accessibility} />
- <Route path="/publicando-recurso" component={TabResoursePub} />
- <Route path="/encontrando-recurso" component={TabResourseFind} />
- <Route path="/participando-da-rede" component={TabNetPart} />
- <Route path="/gerenciando-conta" component={TabManageAc} />
- <Route path="/plataforma-mec" component={TabPlataformaMEC} />
- <Route path="/recuperar-senha/alterar-senha" component={ChangePasswordPage} />
- <Route path="/recuperar-senha" component={PasswordRecoveryPage} />
- <Route path="/usuario-publico/:userId" component={PublicUserPage} />
- <Route
- path="/editar-recurso/:recursoId"
- component={EditLearningObjectPage}
- />
- <Route path="/professor" component={PageProfessor} />
- <Route path="/upload" component={UploadPage} />
- <Route path="/loja" component={ItemStore} />
- <Route path="/colecao-do-usuario/:id" component={CollectionPage} />
- <Route path="/colecao" component={FormationMaterialPage} />
- <Route path="/topico" component={FormationMaterialPage} />
- <Route path="/iframe-colecao" component={FormationMaterialIframe} />
- <Route path="/material-formacao" component={MaterialPage} />
-
- <Route
- path="/admin/home"
- exact={true}
- render={() => {
- return <AdminTemplate inner={<Inframe />} />
- }}
- />
- <Route
- path="/admin/institutions"
- render={() => {
- return <AdminTemplate inner={<Institution />} />
- }}
- />
- <Route
- path="/admin/institution"
- render={() => {
- return <AdminTemplate inner={<InstitutionCard />} />
- }}
- />
- <Route
- path="/admin/institutionEdit"
- render={() => {
- return <AdminTemplate inner={<InstitutionsInput />} />
- }}
- />
- <Route
- path="/admin/InstitutionCreate"
- render={() => {
- return <AdminTemplate inner={<CreateInstitution />} />
- }}
- />
- <Route
- path="/admin/noteVars"
- render={() => {
- return <AdminTemplate inner={<NoteVariables />} />
- }}
- />
- <Route
- path="/admin/noteVar"
- render={() => {
- return <AdminTemplate inner={<NoteVarCard />} />
- }}
- />
- <Route
- path="/admin/noteVarEdit"
- render={() => {
- return <AdminTemplate inner={<NoteVarInputs />} />
- }}
- />
- <Route
- path="/admin/languages"
- render={() => {
- return <AdminTemplate inner={<Languages />} />
- }}
- />
- <Route
- path="/admin/languageEdit"
- render={() => {
- return <AdminTemplate inner={<EditLanguage />} />
- }}
- />
- <Route
- path="/admin/languageCreate"
- render={() => {
- return <AdminTemplate inner={<CreateLanguage />} />
- }}
- />
- <Route
- path="/admin/CommunityQuestions"
- render={() => {
- return <AdminTemplate inner={<CommunityQuestions />} />
- }}
- />
- <Route
- path="/admin/CommunityQuestion"
- render={() => {
- return <AdminTemplate inner={<CommunityCard />} />
- }}
- />
- <Route
- path="/admin/Collections"
- render={() => {
- return <AdminTemplate inner={<Collections />} />
- }}
- />
- <Route
- path="/admin/Collection"
- render={() => {
- return <AdminTemplate inner={<CollectionCard />} />
- }}
- />
- <Route
- path="/admin/EditCollection"
- render={() => {
- return <AdminTemplate inner={<EditCollection />} />
- }}
- />
- <Route
- path="/admin/Ratings"
- render={() => {
- return <AdminTemplate inner={<Ratings />} />
- }}
- />
- <Route
- path="/admin/Rating"
- render={() => {
- return <AdminTemplate inner={<RatingCard />} />
- }}
- />
- <Route
- path="/admin/EditRating"
- render={() => {
- return <AdminTemplate inner={<EditRating />} />
- }}
- />
- <Route
- path="/admin/CreateRating"
- render={() => {
- return <AdminTemplate inner={<CreateRating />} />
- }}
- />
- <Route
- path="/admin/Questions"
- render={() => {
- return <AdminTemplate inner={<Questions />} />
- }}
- />
- <Route
- path="/admin/CreateQuestion"
- render={() => {
- return <AdminTemplate inner={<CreateQuestions />} />
- }}
- />
- <Route
- path="/admin/activities"
- render={() => {
- return <AdminTemplate inner={<Activity />} />
- }}
- />
- <Route
- path="/admin/activity"
- render={() => {
- return <AdminTemplate inner={<ActivityCard />} />
- }}
- />
- <Route
- path="/admin/learningObjects"
- render={() => {
- return <AdminTemplate inner={<EducationalObject />} />
- }}
- />
- <Route
- path="/admin/learningObject"
- render={() => {
- return <AdminTemplate inner={<EducationalObjectCard />} />
- }}
- />
- <Route
- path="/admin/learningObjectEdit"
- render={() => {
- return <AdminTemplate inner={<EducationalObjectEdit />} />
- }}
- />
- <Route
- path="/admin/complaints"
- render={() => {
- return <AdminTemplate inner={<Complaints />} />
- }}
- />
- <Route
- path="/admin/complaint"
- render={() => {
- return <AdminTemplate inner={<ComplaintCard />} />
- }}
- />
- <Route
- path="/admin/users/teacher_requests"
- render={() => {
- return <AdminTemplate inner={<AproveTeacher />} />
- }}
- />
- <Route
- path="/admin/usersList"
- render={() => {
- return <AdminTemplate inner={<UserList />} />
- }}
- />
- <Route
- path="/admin/user"
- render={() => {
- return <AdminTemplate inner={<UserCard />} />
- }}
- />
- <Route
- path="/admin/EditUser"
- render={() => {
- return <AdminTemplate inner={<EditUser />} />
- }}
- />
- <Route
- path="/admin/permissions"
- render={() => {
- return <AdminTemplate inner={<UserPermissions />} />
- }}
- />
- <Route
- path="/admin/EditPermissions"
- render={() => {
- return <AdminTemplate inner={<EditRole />} />
- }}
- />
- <Route
- path="/admin/CreateRole"
- render={() => {
- return <AdminTemplate inner={<CreateRole />} />
- }}
- />
- <Route
- path="/admin/BlockedUsers"
- render={() => {
- return <AdminTemplate inner={<BlockedUser />} />
- }}
- />
- <Route
- path="/admin/sendEmail"
- render={() => {
- return <AdminTemplate inner={<SendEmail />} />
- }}
- />
- <Route path='*' component={PageNotFound} />
- </Switch>
- {!hideFooter && (
- <div id="Rodape_scroll">
- <EcFooter contrast={state.contrast} />
- <GNUAGPLfooter contrast={state.contrast} />
- </div>
- )}
- </BrowserRouter>
- </React.Suspense>
+ />
+ <Route
+ path="/admin/InstitutionCreate"
+ render={() => {
+ return <AdminTemplate inner={<CreateInstitution />}/>
+ }}
+ />
+ <Route
+ path="/admin/noteVars"
+ render={() => {
+ return <AdminTemplate inner={<NoteVariables />}/>
+ }}
+ />
+ <Route
+ path="/admin/noteVar"
+ render={() => {
+ return <AdminTemplate inner={<NoteVarCard />}/>
+ }}
+ />
+ <Route
+ path="/admin/noteVarEdit"
+ render={() => {
+ return <AdminTemplate inner={<NoteVarInputs />}/>
+ }}
+ />
+ <Route
+ path="/admin/languages"
+ render={() => {
+ return <AdminTemplate inner={<Languages />}/>
+ }}
+ />
+ <Route
+ path="/admin/languageEdit"
+ render={() => {
+ return <AdminTemplate inner={<EditLanguage />}/>
+ }}
+ />
+ <Route
+ path="/admin/languageCreate"
+ render={() => {
+ return <AdminTemplate inner={<CreateLanguage />}/>
+ }}
+ />
+ <Route
+ path="/admin/CommunityQuestions"
+ render={() => {
+ return <AdminTemplate inner={<CommunityQuestions />}/>
+ }}
+ />
+ <Route
+ path="/admin/CommunityQuestion"
+ render={() => {
+ return <AdminTemplate inner={<CommunityCard />}/>
+ }}
+ />
+ <Route
+ path="/admin/Collections"
+ render={() => {
+ return <AdminTemplate inner={<Collections />}/>
+ }}
+ />
+ <Route
+ path="/admin/Collection"
+ render={() => {
+ return <AdminTemplate inner={<CollectionCard />}/>
+ }}
+ />
+ <Route
+ path="/admin/EditCollection"
+ render={() => {
+ return <AdminTemplate inner={<EditCollection />}/>
+ }}
+ />
+ <Route
+ path="/admin/Ratings"
+ render={() => {
+ return <AdminTemplate inner={<Ratings />}/>
+ }}
+ />
+ <Route
+ path="/admin/Rating"
+ render={() => {
+ return <AdminTemplate inner={<RatingCard />}/>
+ }}
+ />
+ <Route
+ path="/admin/EditRating"
+ render={() => {
+ return <AdminTemplate inner={<EditRating />}/>
+ }}
+ />
+ <Route
+ path="/admin/CreateRating"
+ render={() => {
+ return <AdminTemplate inner={<CreateRating />}/>
+ }}
+ />
+ <Route
+ path="/admin/Questions"
+ render={() => {
+ return <AdminTemplate inner={<Questions />}/>
+ }}
+ />
+ <Route
+ path="/admin/CreateQuestion"
+ render={() => {
+ return <AdminTemplate inner={<CreateQuestions />}/>
+ }}
+ />
+ <Route
+ path="/admin/activities"
+ render={() => {
+ return <AdminTemplate inner={<Activity />}/>
+ }}
+ />
+ <Route
+ path="/admin/activity"
+ render={() => {
+ return <AdminTemplate inner={<ActivityCard />}/>
+ }}
+ />
+ <Route
+ path="/admin/learningObjects"
+ render={() => {
+ return <AdminTemplate inner={<EducationalObject />}/>
+ }}
+ />
+ <Route
+ path="/admin/learningObject"
+ render={() => {
+ return <AdminTemplate inner={<EducationalObjectCard />}/>
+ }}
+ />
+ <Route
+ path="/admin/learningObjectEdit"
+ render={() => {
+ return <AdminTemplate inner={<EducationalObjectEdit />}/>
+ }}
+ />
+ <Route
+ path="/admin/complaints"
+ render={() => {
+ return <AdminTemplate inner={<Complaints />}/>
+ }}
+ />
+ <Route
+ path="/admin/complaint"
+ render={() => {
+ return <AdminTemplate inner={<ComplaintCard />}/>
+ }}
+ />
+ <Route
+ path="/admin/users/teacher_requests"
+ render={() => {
+ return <AdminTemplate inner={<AproveTeacher />}/>
+ }}
+ />
+ <Route
+ path="/admin/usersList"
+ render={() => {
+ return <AdminTemplate inner={<UserList />}/>
+ }}
+ />
+ <Route
+ path="/admin/user"
+ render={() => {
+ return <AdminTemplate inner={<UserCard />}/>
+ }}
+ />
+ <Route
+ path="/admin/EditUser"
+ render={() => {
+ return <AdminTemplate inner={<EditUser />}/>
+ }}
+ />
+ <Route
+ path="/admin/permissions"
+ render={() => {
+ return <AdminTemplate inner={<UserPermissions />}/>
+ }}
+ />
+ <Route
+ path="/admin/EditPermissions"
+ render={() => {
+ return <AdminTemplate inner={<EditRole />}/>
+ }}
+ />
+ <Route
+ path="/admin/CreateRole"
+ render={() => {
+ return <AdminTemplate inner={<CreateRole />}/>
+ }}
+ />
+ <Route
+ path="/admin/BlockedUsers"
+ render={() => {
+ return <AdminTemplate inner={<BlockedUser />}/>
+ }}
+ />
+ <Route
+ path="/admin/sendEmail"
+ render={() => {
+ return <AdminTemplate inner={<SendEmail />}/>
+ }}
+ />
+ <Route path='*' component={PageNotFound}/>
+ </Switch>
+ {!hideFooter && (
+ <div id="Rodape_scroll">
+ <EcFooter contrast={state.contrast}/>
+ <GNUAGPLfooter contrast={state.contrast}/>
+ </div>
+ )}
+ </BrowserRouter>
+ </React.Suspense>
}
</>
);
diff --git a/src/Components/Alert.js b/src/Components/Alert.js
index 747b819931a0cf64cd14804dd23203bd3932be5c..49bbd29e165d171a27a08044aa178f47d6eb0a8a 100644
--- a/src/Components/Alert.js
+++ b/src/Components/Alert.js
@@ -20,5 +20,5 @@ import React from 'react'
import MuiAlert from '@material-ui/lab/Alert';
export default function Alert(props) {
- return <MuiAlert elevation={6} variant="filled" {...props} />;
+ return <MuiAlert elevation={6} variant="filled" {...props} />;
}
diff --git a/src/Components/AreasSubPagesFunction.js b/src/Components/AreasSubPagesFunction.js
index 7078cb081a7a40a928da548ab6101ff1edacda6f..f3f3a60a33780af4e7b03db9b90589917aec980d 100644
--- a/src/Components/AreasSubPagesFunction.js
+++ b/src/Components/AreasSubPagesFunction.js
@@ -95,7 +95,7 @@ function ReqResources(props) {
</Grid>
</Grid>
:
- <Carousel showThumbs={false} infiniteLoop={true} showStatus={false}>
+ <Carousel className={`${props.contrast}Carousel`} showThumbs={false} infiniteLoop={true} showStatus={false}>
{
rows.length >= 1 ?
rows.map((row, index) => (
@@ -164,7 +164,7 @@ function ReqCollections(props) {
</Grid>
:
rows.length >= 1 ?
- <Carousel showThumbs={false} infiniteLoop={true} showStatus={false}>
+ <Carousel className={`${props.contrast}Carousel`} showThumbs={false} infiniteLoop={true} showStatus={false}>
{
rows.map((row, index) => (
<Row style={{ paddingBottom: "5px", margin: '0 auto', width: "80%", justifyContent: "center", minHeight: "50px" }} key={(index + 1)}>
diff --git a/src/Components/ButtonGuardarColecao.js b/src/Components/ButtonGuardarColecao.js
index ca0729a269e8d756bfc4686eb04acded43dbce12..eaa40ad7a2835c2dfab8e8bdae719f03364add8c 100644
--- a/src/Components/ButtonGuardarColecao.js
+++ b/src/Components/ButtonGuardarColecao.js
@@ -6,8 +6,8 @@ import CreateNewFolderIcon from '@material-ui/icons/CreateNewFolder';
import GuardarModal from './GuardarModal'
import SignUpModal from './SignUpModal'
import LoginModal from './LoginModal.js'
-import Snackbar from '@material-ui/core/Snackbar';
-import MuiAlert from '@material-ui/lab/Alert';
+
+import SnackBar from './SnackbarComponent';
export default function ButtonGuardarColecao(props) {
const { state } = useContext(Store)
@@ -29,10 +29,6 @@ export default function ButtonGuardarColecao(props) {
setLogin(!loginOpen)
}
- function Alert(props) {
- return <MuiAlert elevation={6} variant="filled" {...props} />;
- }
-
function toggleLoginSnackbar(reason) {
if (reason === 'clickaway') {
return;
@@ -51,11 +47,13 @@ export default function ButtonGuardarColecao(props) {
<LoginModal contrast={props.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
openSnackbar={() => { handleSuccessfulLogin(true) }}
/>
- <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleLoginSnackbar}
- anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
- >
- <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
- </Snackbar>
+ <SnackBar
+ snackbarOpen={successfulLoginOpen}
+ handleClose={toggleLoginSnackbar}
+ severity={"success"}
+ color={"#00acc1"}
+ text={"Você está conectado(a)!"}
+ />
<GuardarModal contrast={props.contrast} open={saveToCol} handleClose={() => { toggleSave(false) }}
thumb={props.thumb} title={props.title} recursoId={props.learningObjectId}
/>
diff --git a/src/Components/CollectionCardFunction.js b/src/Components/CollectionCardFunction.js
index 926de15f02f20605b7f3dd5ad7407974e186111d..632c522dbddc3573a12ef43f6b34d7be6c288e28 100644
--- a/src/Components/CollectionCardFunction.js
+++ b/src/Components/CollectionCardFunction.js
@@ -36,8 +36,8 @@ import { Link } from 'react-router-dom';
import { putRequest } from '../Components/HelperFunctions/getAxiosConfig'
import SignUpModal from './SignUpModal'
import LoginModal from './LoginModal.js'
-import Snackbar from '@material-ui/core/Snackbar';
-import MuiAlert from '@material-ui/lab/Alert';
+
+import SnackBar from './SnackbarComponent';
//Image Import
import { noAvatar } from "ImportImages.js";
@@ -168,10 +168,6 @@ export default function CollectionCardFunction(props) {
setLogin(!loginOpen)
}
- function Alert(props) {
- return <MuiAlert elevation={6} variant="filled" {...props} />;
- }
-
function toggleLoginSnackbar(reason) {
if (reason === 'clickaway') {
return;
@@ -186,11 +182,13 @@ export default function CollectionCardFunction(props) {
<LoginModal contrast={props.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
openSnackbar={() => { handleSuccessfulLogin(true) }}
/>
- <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleLoginSnackbar}
- anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
- >
- <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
- </Snackbar>
+ <SnackBar
+ snackbarOpen={successfulLoginOpen}
+ handleClose={toggleLoginSnackbar}
+ severity={"success"}
+ color={"#00acc1"}
+ text={"Você está conectado(a)!"}
+ />
<StyledCard>
<CardDiv className={`${props.contrast}Border`}>
<CardReaDiv className={`${props.contrast}BackColor`}>
diff --git a/src/Components/CollectionCommentSection.js b/src/Components/CollectionCommentSection.js
index a317a429b6174183140a772b4eab292bc10d4c66..8acd3a5477d1b0139a0227a1f379657ffee09d25 100644
--- a/src/Components/CollectionCommentSection.js
+++ b/src/Components/CollectionCommentSection.js
@@ -23,17 +23,16 @@ import Button from '@material-ui/core/Button';
import styled from 'styled-components';
import CommentForm from './ResourcePageComponents/CommentForm.js';
import Comment from './Comment.js';
-import Snackbar from '@material-ui/core/Snackbar';
-import MuiAlert from '@material-ui/lab/Alert';
import { getRequest } from '../Components/HelperFunctions/getAxiosConfig'
import ExitToAppIcon from '@material-ui/icons/ExitToApp';
import SignUpModal from './SignUpModal.js';
import LoginModal from './LoginModal.js';
-import SnackBarComponent from './SnackbarComponent';
import CircularProgress from '@material-ui/core/CircularProgress';
import IconButton from '@material-ui/core/IconButton';
import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
+import SnackBar from './SnackbarComponent';
+
//Image Import
import { Comentarios } from "ImportImages.js";
@@ -95,10 +94,6 @@ export default function CollectionCommentSection(props) {
setSignUpOpen(true)
}
- function Alert(props) {
- return <MuiAlert elevation={6} variant="filled" {...props} />;
- }
-
function handleLoadMoreReviews() {
if (reviews.length !== parseInt(totalReviews))
setCurrPageReviews((previous) => previous + 1)
@@ -196,7 +191,7 @@ export default function CollectionCommentSection(props) {
return (
<CommentAreaContainer contrast={props.contrast} container xs={12} direction="row" justify="center" alignItems="center">
- <SnackBarComponent
+ <SnackBar
snackbarOpen={snackInfo.open}
handleClose={handleCloseSnack}
severity={snackInfo.severity}
@@ -259,26 +254,18 @@ export default function CollectionCommentSection(props) {
}
</CommentAreaCard>
</Grid>
- <Snackbar
- open={post_snack_open}
- autoHideDuration={6000}
- onClose={handlePostSnackbar}
- anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
- >
- <Alert onClose={handlePostSnackbar} severity="info">
- Seu comentário foi publicado com sucesso!
- </Alert>
- </Snackbar>
- <Snackbar
- open={delete_snack_open}
- autoHideDuration={6000}
- onClose={handleDeleteSnackbar}
- anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
- >
- <Alert onClose={handleDeleteSnackbar} severity="info">
- Comentário deletado com sucesso.
- </Alert>
- </Snackbar>
+ <SnackBar
+ snackbarOpen={post_snack_open}
+ handleClose={handlePostSnackbar}
+ severity={"info"}
+ text={"Seu comentário foi publicado com sucesso!"}
+ />
+ <SnackBar
+ snackbarOpen={delete_snack_open}
+ handleClose={handleDeleteSnackbar}
+ severity={"info"}
+ text={"Comentário deletado com sucesso."}
+ />
</CommentAreaContainer>
);
}
diff --git a/src/Components/CollectionDowloadButton.js b/src/Components/CollectionDowloadButton.js
index 427b3464a833c94e60b0a76d55de7dc74b936767..ed934968110dd795e8ffab5f1ecebf3392f7cbe2 100644
--- a/src/Components/CollectionDowloadButton.js
+++ b/src/Components/CollectionDowloadButton.js
@@ -5,12 +5,8 @@ import Button from '@material-ui/core/Button';
import styled from 'styled-components';
import { apiUrl, apiDomain } from '../env';
import { getRequest } from './HelperFunctions/getAxiosConfig'
-import Snackbar from '@material-ui/core/Snackbar';
-import MuiAlert from '@material-ui/lab/Alert';
-function Alert(props) {
- return <MuiAlert elevation={6} variant="filled" {...props} />;
-}
+import SnackBar from './SnackbarComponent';
const DowloadButton = (props) => {
const [download_url, setDownloadUrl] = useState('');
@@ -85,16 +81,12 @@ const DowloadButton = (props) => {
return (
<>
- <Snackbar
- open={snackInfo.open}
- autoHideDuration={6000}
- onClose={handleCloseSnack}
- anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
- >
- <Alert onClose={handleCloseSnack} severity={snackInfo.severity}>
- {snackInfo.text}
- </Alert>
- </Snackbar>
+ <SnackBar
+ snackbarOpen={snackInfo.open}
+ handleClose={handleCloseSnack}
+ severity={snackInfo.severity}
+ text={snackInfo.text}
+ />
<DownloadButton
contrast={props.contrast}
variant="outlined"
diff --git a/src/Components/ContactButtons/FollowButton.js b/src/Components/ContactButtons/FollowButton.js
index 96c7794c6fd25ee6a5a333d3c0132e9456f7d1e9..114028d7ee1abbfcfb8fe5d9ab9d1bf5f011b0e4 100644
--- a/src/Components/ContactButtons/FollowButton.js
+++ b/src/Components/ContactButtons/FollowButton.js
@@ -23,13 +23,9 @@ import styled from 'styled-components'
import Button from '@material-ui/core/Button';
import { putRequest } from '../HelperFunctions/getAxiosConfig'
import LoginModal from './../LoginModal.js'
-import Snackbar from '@material-ui/core/Snackbar';
import SignUpModal from './../SignUpModal'
-import MuiAlert from '@material-ui/lab/Alert';
-function Alert(props) {
- return <MuiAlert elevation={6} variant="filled" {...props} />;
-}
+import SnackBar from '../SnackbarComponent';
export default function FollowButton(props) {
@@ -67,11 +63,13 @@ export default function FollowButton(props) {
return (
<React.Fragment>
- <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleSnackbar}
- anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
- >
- <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
- </Snackbar>
+ <SnackBar
+ snackbarOpen={successfulLoginOpen}
+ handleClose={toggleSnackbar}
+ severity={"success"}
+ color={"#00acc1"}
+ text={"Você está conectado(a)!"}
+ />
{/*-------------------------------MODALS---------------------------------------*/}
<LoginModal contrast={props.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
openSnackbar={() => { handleSuccessfulLogin(true) }}
@@ -145,11 +143,13 @@ export function NoIcon(props) {
return (
<React.Fragment>
- <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleSnackbar}
- anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
- >
- <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
- </Snackbar>
+ <SnackBar
+ snackbarOpen={successfulLoginOpen}
+ handleClose={toggleSnackbar}
+ severity={"success"}
+ color={"#00acc1"}
+ text={"Você está conectado(a)!"}
+ />
{/*-------------------------------MODALS---------------------------------------*/}
<LoginModal contrast={props.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
openSnackbar={() => { handleSuccessfulLogin(true) }}
diff --git a/src/Components/ContactCardOptions.js b/src/Components/ContactCardOptions.js
index f347928a858b6e6c3ab40f365cc5c6063e1250e0..4811e21ad6952ce5ae32b63a34652bf1b3c8618e 100644
--- a/src/Components/ContactCardOptions.js
+++ b/src/Components/ContactCardOptions.js
@@ -31,13 +31,9 @@ import { putRequest } from './HelperFunctions/getAxiosConfig'
import ReportModal from './ReportModal.js'
import {Link} from 'react-router-dom'
import LoginModal from './LoginModal.js'
-import Snackbar from '@material-ui/core/Snackbar';
import SignUpModal from './SignUpModal'
-import MuiAlert from '@material-ui/lab/Alert';
-function Alert(props) {
- return <MuiAlert elevation={6} variant="filled" {...props} />;
-}
+import SnackBar from './SnackbarComponent';
export default function SimpleMenu(props) {
const {state} = useContext(Store)
@@ -86,11 +82,13 @@ export default function SimpleMenu(props) {
return (
<React.Fragment>
- <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleSnackbar}
- anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
- >
- <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
- </Snackbar>
+ <SnackBar
+ snackbarOpen={successfulLoginOpen}
+ handleClose={toggleSnackbar}
+ severity={"success"}
+ color={"#00acc1"}
+ text={"Você está conectado(a)!"}
+ />
{/*-------------------------------MODALS---------------------------------------*/}
<LoginModal contrast={props.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
openSnackbar={() => { handleSuccessfulLogin(true) }}
diff --git a/src/Components/ContactForm.js b/src/Components/ContactForm.js
index e44460d3f1cf0148a2d29738dbefc15e6b715195..8d7f120c4f37c6eb04149fc2c8181d35f2b367a9 100644
--- a/src/Components/ContactForm.js
+++ b/src/Components/ContactForm.js
@@ -22,13 +22,9 @@ import styled from 'styled-components';
import FormInput from "../Components/FormInput.js"
import { postRequest } from './HelperFunctions/getAxiosConfig'
import LoginModal from './LoginModal.js'
-import Snackbar from '@material-ui/core/Snackbar';
import SignUpModal from './SignUpModal'
-import MuiAlert from '@material-ui/lab/Alert';
-function Alert(props) {
- return <MuiAlert elevation={6} variant="filled" {...props} />;
-}
+import SnackBar from './SnackbarComponent';
const Button = styled.button`
background-color: ${props => props.contrast === "" ? "#00acc1" : "black"};
@@ -224,11 +220,13 @@ function Formulario(props) {
return (
<React.Fragment>
- <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleSnackbar}
- anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
- >
- <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
- </Snackbar>
+ <SnackBar
+ snackbarOpen={successfulLoginOpen}
+ handleClose={toggleSnackbar}
+ severity={"success"}
+ color={"#00acc1"}
+ text={"Você está conectado(a)!"}
+ />
{/*-------------------------------MODALS---------------------------------------*/}
<LoginModal contrast={props.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
openSnackbar={() => { handleSuccessfulLogin(true) }}
diff --git a/src/Components/Firulas.js b/src/Components/Firulas.js
index 72dd44f196698f089f0039f3fac6eae7ceb37bff..d54f369dc120c70593c963a317ab507c0809ca7f 100644
--- a/src/Components/Firulas.js
+++ b/src/Components/Firulas.js
@@ -8,8 +8,8 @@ import FavoriteIcon from '@material-ui/icons/Favorite';
import { putRequest } from './HelperFunctions/getAxiosConfig'
import SignUpModal from './SignUpModal'
import LoginModal from './LoginModal.js'
-import Snackbar from '@material-ui/core/Snackbar';
-import MuiAlert from '@material-ui/lab/Alert';
+
+import SnackBar from './SnackbarComponent';
export default function Firulas(props) {
const { state } = useContext(Store);
@@ -20,10 +20,6 @@ export default function Firulas(props) {
const [loginOpen, setLogin] = useState(false)
const [successfulLoginOpen, handleSuccessfulLogin] = useState(false)
- function Alert(props) {
- return <MuiAlert elevation={6} variant="filled" {...props} />;
- }
-
function handleSuccessLike(data) {
toggleLiked(!liked)
setLikesCount(data.count)
@@ -62,11 +58,13 @@ export default function Firulas(props) {
<LoginModal contrast={props.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
openSnackbar={() => { handleSuccessfulLogin(true) }}
/>
- <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleLoginSnackbar}
- anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
- >
- <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
- </Snackbar>
+ <SnackBar
+ snackbarOpen={successfulLoginOpen}
+ handleClose={toggleLoginSnackbar}
+ severity={"success"}
+ color={"#00acc1"}
+ text={"Você está conectado(a)!"}
+ />
<Rating
className={`${props.contrast}IconColor`}
name="customized-empty"
diff --git a/src/Components/FormInput.js b/src/Components/FormInput.js
index 55c3e503745f0549fc6212590a10229800504565..d6dda2b5788e6c4b312b6129bb812f542f6c0417 100644
--- a/src/Components/FormInput.js
+++ b/src/Components/FormInput.js
@@ -25,18 +25,39 @@ const StyledTextField = styled(TextField)`
max-width: 100%;
font-size : 15px;
font-weight : lighter;
- color : white;
- width : 100% !important;
width : 100% !important;
+ .MuiFormHelperText-root {
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
+ .Mui-disabled{
+ color: ${props => props.contrast === "" ? "#999" : "white"} !important;
+ fieldset {
+ border-color: ${props => props.contrast === "" ? "#999" : "white"} !important;
+ }
+
+ }
+
+ .MuiFormHelperText-root.Mui-error {
+ color: ${props => props.contrast === "" ? "red" : "#e75480"};
+ }
+
+ .MuiInput-underline::after {
+ border-color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ }
+
+ .MuiInput-underline.Mui-error::after {
+ border-color: ${props => props.contrast === "" ? "red" : "#e75480"};
+ }
+
.MuiOutlinedInput-root {
- /* &.Mui-focused.Mui-error fieldset{
+ &.Mui-focused.Mui-error fieldset{
border-color: ${props => props.contrast === "" ? "red" : "#e75480"};
}
&.Mui-error fieldset{
border-color: ${props => props.contrast === "" ? "red" : "#e75480"};
- } */
+ }
&.Mui-focused fieldset {
border-color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
@@ -50,17 +71,25 @@ const StyledTextField = styled(TextField)`
color: ${props => props.contrast === "" ? "#666" : "white"};
}
+ .MuiFormLabel-asterisk {
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
+
+ .MuiFormLabel-asterisk.Mui-error {
+ color: ${props => props.contrast === "" ? "red" : "#e75480"};
+ }
+
label.Mui-focused {
color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
}
label.Mui-focused.Mui-error {
- color: red;
+ color: ${props => props.contrast === "" ? "red" : "#e75480"};
}
- /* label.Mui-error {
+ label.Mui-error {
color: ${props => props.contrast === "" ? "red" : "#e75480"};
- } */
+ }
`
const useStyles = makeStyles(theme => ({
@@ -91,25 +120,33 @@ export default function FormInput(props) {
return (
<StyledTextField
contrast={props.contrast}
+ key={props.key}
label={props.placeholder}
+ placeholder={props.placeholder}
+ select={props.selectable ? props.selectable : false}
+ disabled={props.disableField}
margin="normal"
id={props.id}
name={props.name}
type={props.inputType}
value={props.value}
+ onBlur={props.onBlur}
onChange={props.handleChange}
onKeyDown={props.onKeyDown}
variant="outlined"
rows={props.rows}
+ onKeyPress={props.onKeyPress}
error={props.error}
rowsMax={props.rowsMax}
InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
required={props.required}
// helperText={<span style={props.contrast === "" ? { color: "red" } : { color: "#e75480" }}>{props.help}</span>}
helperText={props.help}
- style={{ width: "100%" }}
mask={props.mask}
multiline={props.multi}
- />
+ >
+
+ {props.items}
+ </StyledTextField>
);
}
diff --git a/src/Components/Header.js b/src/Components/Header.js
index fb512f3c13fc314a98eb864fc7e8d67e26694952..b374379c8193abbcae8983523426284492e3b1a5 100644
--- a/src/Components/Header.js
+++ b/src/Components/Header.js
@@ -23,19 +23,11 @@ import SignUpModal from './SignUpModal'
import LoginModal from './LoginModal.js'
import { Store } from '../Store';
import ColaborarModal from './ColaborarModal.js'
-import Snackbar from '@material-ui/core/Snackbar';
-import MuiAlert from '@material-ui/lab/Alert';
import { useLocation, useHistory } from 'react-router-dom'
import MenuBarMobile from './MenuBarMobile.js'
import { getRequest, validateGoogleLoginToken } from './HelperFunctions/getAxiosConfig'
-//const StyledButton = styled(Button)`
-// background : #ffa54c !important;
-// boxShadow :none;
-//`
-function Alert(props) {
- return <MuiAlert elevation={6} variant="filled" {...props} />;
-}
+import SnackBar from './SnackbarComponent';
export default function Header(props) {
const { state, dispatch } = useContext(Store)
@@ -123,11 +115,13 @@ export default function Header(props) {
return (
<React.Fragment>
- <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleSnackbar}
- anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
- >
- <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
- </Snackbar>
+ <SnackBar
+ snackbarOpen={successfulLoginOpen}
+ handleClose={toggleSnackbar}
+ severity={"success"}
+ color={"#00acc1"}
+ text={"Você está conectado(a)!"}
+ />
{
windowWidth > 990 ?
(
diff --git a/src/Components/ItemCardAction.js b/src/Components/ItemCardAction.js
index ed1cc7dde66752bb622375c25b65172ab3d42e92..05ecb2354594b9ef5fcf70db5b491698124ba05e 100644
--- a/src/Components/ItemCardAction.js
+++ b/src/Components/ItemCardAction.js
@@ -17,8 +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, {useState} from 'react';
import styled from 'styled-components';
-import Snackbar from '@material-ui/core/Snackbar';
-import MuiAlert from '@material-ui/lab/Alert';
import Button from '@material-ui/core/Button';
import gem from '../img/gamification/gem.svg';
import Dialog from '@material-ui/core/Dialog';
@@ -29,9 +27,7 @@ import DialogTitle from '@material-ui/core/DialogTitle';
import axios from 'axios'
import {apiUrl} from '../env';
-function Alert(props) {
- return <MuiAlert elevation={6} variant="filled" {...props} />;
-}
+import SnackBar from './SnackbarComponent';
const actionStyle = (operation) => {
var stl = {
@@ -124,42 +120,45 @@ export default function ItemCardAction (props) {
return (
<div>
- <Snackbar open={info} autoHideDuration={6000} onClose={() => handleClose('info')}>
- <Alert onClose={handleClose} severity="info">
- {message}
- </Alert>
- </Snackbar>
- <Snackbar open={success} autoHideDuration={6000} onClose={() => handleClose('success')}>
- <Alert onClose={handleClose} severity="success">
- {message}
- </Alert>
- </Snackbar>
- <Snackbar open={failure} autoHideDuration={6000} onClose={() => handleClose('failure')}>
- <Alert onClose={handleClose} severity="error">
- {message}
- </Alert>
- </Snackbar>
+ <SnackBar
+ snackbarOpen={info}
+ handleClose={() => handleClose('info')}
+ severity={"info"}
+ text={message}
+ />
+ <SnackBar
+ snackbarOpen={success}
+ handleClose={() => handleClose('success')}
+ severity={"success"}
+ text={message}
+ />
+ <SnackBar
+ snackbarOpen={failure}
+ handleClose={() => handleClose('failure')}
+ severity={"error"}
+ text={message}
+ />
<span style={actionStyle(props.operation)} onClick={handleClick}>
{props.operation === 'buy' ? <GemImg src={gem}/> : <span/>}
{props.operation === 'buy' ? "COMPRAR" :
props.operation === 'equip' ? "USAR" : "TIRAR"}
</span>
<Dialog
- open={open_dialog}
- onClose={handleClose}
- aria-labelledby="alert-dialog-title"
- aria-describedby="alert-dialog-description"
- >
+ open={open_dialog}
+ onClose={handleClose}
+ aria-labelledby="alert-dialog-title"
+ aria-describedby="alert-dialog-description"
+ >
<DialogTitle id="alert-dialog-title">{"Deseja realmente comprar este item?"}</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
- <strong>Esta compra não envolve nenhum dinheiro real.</strong>
+ <strong>Esta compra não envolve nenhum dinheiro real.</strong>
- <br/><br/>O item que você deseja comprar, <strong>NOME DO ITEM</strong>, custa
- <GemImg src={gem}/><GemSpan>PREÇO</GemSpan> gemas. Você possui
- <GemImg src={gem}/><GemSpan><strong>GEMAS</strong></GemSpan> gemas.
+ <br/><br/>O item que você deseja comprar, <strong>NOME DO ITEM</strong>, custa
+ <GemImg src={gem}/><GemSpan>PREÇO</GemSpan> gemas. Você possui
+ <GemImg src={gem}/><GemSpan><strong>GEMAS</strong></GemSpan> gemas.
- <br/><br/>Comprar este item lhe deixará com <GemImg src={gem}/><GemSpan><strong>TANTAS</strong></GemSpan> gemas.
+ <br/><br/>Comprar este item lhe deixará com <GemImg src={gem}/><GemSpan><strong>TANTAS</strong></GemSpan> gemas.
</DialogContentText>
</DialogContent>
<DialogActions>
diff --git a/src/Components/LoadingSpinner.js b/src/Components/LoadingSpinner.js
index e25599746e6ffcf88f3f7746a13724d303e7df4b..391a5086eb1cc642b7e001ce15c9fc5a8908f776 100644
--- a/src/Components/LoadingSpinner.js
+++ b/src/Components/LoadingSpinner.js
@@ -1,11 +1,17 @@
-import React from 'react';
+import React, { useContext } from 'react';
+import { Store } from 'Store'
+
import LoadingGif from '../img/loading_busca.gif'
-const LoadingSpinner = (props) => (
- <div style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center" }}>
- <img alt="" src={LoadingGif} />
- <span style={props.contrast === "" ? { textTransform: "uppercase" } : { textTransform: "uppercase", color: "white" }}>{props.text}</span>
- </div>
-);
+const LoadingSpinner = (props) => {
+ const { state } = useContext(Store);
+
+ return (
+ <div style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", backgroundColor: "inherit" }}>
+ <img alt="" src={LoadingGif} />
+ <span style={state.contrast === "" ? { textTransform: "uppercase" } : { textTransform: "uppercase", color: "white" }}>{props.text}</span>
+ </div>
+ )
+}
export default LoadingSpinner;
diff --git a/src/Components/LoginModal.js b/src/Components/LoginModal.js
index eeb51a8c4f7bfc6d1968800f7872a965bfd8dc17..8dc9da52c2ecf210d6606c79e38a7ffc0077a2e0 100644
--- a/src/Components/LoginModal.js
+++ b/src/Components/LoginModal.js
@@ -23,10 +23,10 @@ import Zoom from '@material-ui/core/Fade';
import styled from 'styled-components'
import LoginContainer from './LoginContainerFunction.js'
import { Store } from '../Store.js'
-import Snackbar from '@material-ui/core/Snackbar';
-import MuiAlert from '@material-ui/lab/Alert';
import { authentication } from './HelperFunctions/getAxiosConfig'
+import SnackBar from './SnackbarComponent';
+
const StyledLogin = styled(Modal)`
margin : 0 !important;
margin-left : 0 !important;
@@ -38,9 +38,6 @@ const StyledLogin = styled(Modal)`
border-radius : 4px;
`
-export function Alert(props) {
- return <MuiAlert elevation={6} variant="filled" {...props} />;
-}
export default function LoginModal(props) {
const { state, dispatch } = useContext(Store)
@@ -81,11 +78,12 @@ export default function LoginModal(props) {
return (
<>
- <Snackbar open={snackbarOpened} autoHideDuration={1000} onClose={handleCloseSnackbar}
- anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
- >
- <Alert severity="error">Ocorreu um erro ao se conectar!</Alert>
- </Snackbar>
+ <SnackBar
+ snackbarOpen={snackbarOpened}
+ handleClose={handleCloseSnackbar}
+ severity={"error"}
+ text={"Ocorreu um erro ao se conectar!"}
+ />
<StyledLogin
aria-labelledby="transition-modal-title"
aria-describedby="transition-modal-description"
diff --git a/src/Components/ModalAvaliarRecurso.js b/src/Components/ModalAvaliarRecurso.js
index 4376cee70643c1f48b5ee74b34c86065ca0c5a2f..8ba192b8d024b66a2b7b2f20321aa766577db3b5 100644
--- a/src/Components/ModalAvaliarRecurso.js
+++ b/src/Components/ModalAvaliarRecurso.js
@@ -28,12 +28,13 @@ import Radio from '@material-ui/core/Radio';
import FormControl from '@material-ui/core/FormControl';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import CloseModalButton from './CloseModalButton'
-import Snackbar from '@material-ui/core/Snackbar';
import { withStyles } from '@material-ui/core/styles';
import { getRequest } from './HelperFunctions/getAxiosConfig'
import LoadingSpinner from '../Components/LoadingSpinner'
import {StyledTextField, useStyles} from './ReportUserForm.js'
+import SnackBar from './SnackbarComponent';
+
const StyledRadio = withStyles({
root: {
color: '#666',
@@ -118,9 +119,11 @@ export default function ModalAvaliarRecurso(props) {
return (
<>
- <Snackbar open={snackbarCancelar} autoHideDuration={1000} onClose={toggleSnackbarCancelar}
- anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
- message="Você cancelou a avaliação deste recurso."
+ <SnackBar
+ snackbarOpen={snackbarCancelar}
+ handleClose={toggleSnackbarCancelar}
+ severity={"info"}
+ text={"Você cancelou a avaliação deste recurso."}
/>
{
options ?
diff --git a/src/Components/ModalExcluirColecao.js b/src/Components/ModalExcluirColecao.js
index cb55a931f2784e8662820ff494ca932c5fb8bed4..f4b2dafdb37d68b3e9cea4d9b34dfe28763413a0 100644
--- a/src/Components/ModalExcluirColecao.js
+++ b/src/Components/ModalExcluirColecao.js
@@ -23,7 +23,7 @@ import Fade from '@material-ui/core/Fade';
import styled from 'styled-components'
import { ButtonCancelar, ButtonEnviar } from './EditarColecaoForm';
import CloseModalButton from './CloseModalButton'
-import SnackbarComponent from './SnackbarComponent'
+import Snackbar from './SnackbarComponent'
import {deleteRequest} from './HelperFunctions/getAxiosConfig'
export default function ModalExcluirColecao (props) {
@@ -56,7 +56,7 @@ export default function ModalExcluirColecao (props) {
>
<Fade in={props.open}>
<>
- <SnackbarComponent snackbarOpen={snackbarOpen} severity={"info"} handleClose={() => {toggleSnackbar(false)}} text={"Coleção excluÃda com sucesso"}/>
+ <Snackbar snackbarOpen={snackbarOpen} severity={"info"} handleClose={() => {toggleSnackbar(false)}} text={"Coleção excluÃda com sucesso"}/>
<Container contrast={props.contrast}>
<Header>
<h2>Tem certeza que deseja excluir esta Coleção?</h2>
diff --git a/src/Components/PageProfessorComponents/PartOne.js b/src/Components/PageProfessorComponents/PartOne.js
index e46c4f871547a5a8d8d3b694af8ceb43bc44480d..3c3a48d7013ac02708580a54e8a379f4ae4cd6a5 100644
--- a/src/Components/PageProfessorComponents/PartOne.js
+++ b/src/Components/PageProfessorComponents/PartOne.js
@@ -245,7 +245,34 @@ export default function PartOne(props) {
}
const StyledTextField = styled(TextField)`
+
+ .MuiFormHelperText-root {
+ text-align : left;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
+
+ .MuiFormHelperText-root.Mui-error {
+ text-align : left;
+ color: ${props => props.contrast === "" ? "red" : "#e75480"};
+ }
+
+ .MuiInput-underline::after {
+ border-color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ }
+
+ .MuiInput-underline.Mui-error::after {
+ border-color: ${props => props.contrast === "" ? "red" : "#e75480"};
+ }
+
.MuiOutlinedInput-root {
+ &.Mui-focused.Mui-error fieldset{
+ border-color: ${props => props.contrast === "" ? "red" : "#e75480"};
+ }
+
+ &.Mui-error fieldset{
+ border-color: ${props => props.contrast === "" ? "red" : "#e75480"};
+ }
+
&.Mui-focused fieldset {
border-color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
}
@@ -253,6 +280,30 @@ const StyledTextField = styled(TextField)`
border-color: ${props => props.contrast === "" ? "#666" : "white"};
}
}
+
+ label{
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
+
+ .MuiFormLabel-asterisk {
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
+
+ .MuiFormLabel-asterisk.Mui-error {
+ color: ${props => props.contrast === "" ? "red" : "#e75480"};
+ }
+
+ label.Mui-focused {
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ }
+
+ label.Mui-focused.Mui-error {
+ color: ${props => props.contrast === "" ? "red" : "#e75480"};
+ }
+
+ label.Mui-error {
+ color: ${props => props.contrast === "" ? "red" : "#e75480"};
+ }
`
export const ButtonsArea = styled.div`
diff --git a/src/Components/ReportModal.js b/src/Components/ReportModal.js
index 0bccdb086451935d80d3703b8fa321f8a96d99a2..d9cdd16d9d1f75674f4bb9d01471eb86fe223a9a 100644
--- a/src/Components/ReportModal.js
+++ b/src/Components/ReportModal.js
@@ -28,7 +28,7 @@ import ReportUserForm from './ReportUserForm.js'
import ReportRecursoForm from './ReportRecursoForm.js'
import ReportColecaoForm from './ReportColecaoForm.js'
import {postRequest} from './HelperFunctions/getAxiosConfig'
-import SnackbarComponent from './SnackbarComponent.js'
+import Snackbar from './SnackbarComponent.js'
function CloseModalButton (props) {
return (
@@ -80,7 +80,7 @@ export default function ReportModal (props) {
return (
<React.Fragment>
- <SnackbarComponent snackbarOpen={snackbarOpen} severity={"success"} handleClose={() => {handleSnackbar(false)}} text={"Sua reclamação foi recebida."}/>
+ <Snackbar snackbarOpen={snackbarOpen} severity={"success"} handleClose={() => {handleSnackbar(false)}} text={"Sua reclamação foi recebida."}/>
<StyledModal
aria-labelledby="transition-modal-title"
aria-describedby="transition-modal-description"
diff --git a/src/Components/ReportUserForm.js b/src/Components/ReportUserForm.js
index 28321b533bae36824d4b8c2b1421bc67258b4605..e4fce332da3767cf24c19ee80c3d4a9ecbff9932 100644
--- a/src/Components/ReportUserForm.js
+++ b/src/Components/ReportUserForm.js
@@ -174,7 +174,34 @@ export const ButtonEnviar = styled(Button)`
export const StyledTextField = styled(TextField)`
padding: 20px 20px 20px 20px;
+
+ .MuiFormHelperText-root {
+ text-align : left;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
+
+ .MuiFormHelperText-root.Mui-error {
+ text-align : left;
+ color: ${props => props.contrast === "" ? "red" : "#e75480"};
+ }
+
+ .MuiInput-underline::after {
+ border-color: ${props => props.contrast === "" ? "#ff7f00" : "yellow"};
+ }
+
+ .MuiInput-underline.Mui-error::after {
+ border-color: ${props => props.contrast === "" ? "red" : "#e75480"};
+ }
+
.MuiOutlinedInput-root {
+ &.Mui-focused.Mui-error fieldset{
+ border-color: ${props => props.contrast === "" ? "red" : "#e75480"};
+ }
+
+ &.Mui-error fieldset{
+ border-color: ${props => props.contrast === "" ? "red" : "#e75480"};
+ }
+
&.Mui-focused fieldset {
border-color: ${props => props.contrast === "" ? "#ff7f00" : "yellow"};
}
@@ -187,17 +214,24 @@ export const StyledTextField = styled(TextField)`
color: ${props => props.contrast === "" ? "#666" : "white"};
}
+ .MuiFormLabel-asterisk {
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
+
+ .MuiFormLabel-asterisk.Mui-error {
+ color: ${props => props.contrast === "" ? "red" : "#e75480"};
+ }
+
label.Mui-focused {
color: ${props => props.contrast === "" ? "#ff7f00" : "yellow"};
}
- .MuiFormHelperText-root {
- text-align : left;
- color: ${props => props.contrast === "" ? "#666" : "white"};
+ label.Mui-focused.Mui-error {
+ color: ${props => props.contrast === "" ? "red" : "#e75480"};
}
- .MuiInput-underline::after {
- border-bottom: 2px solid ${props => props.contrast === "" ? "#ff7f00" : "yellow"};
+ label.Mui-error {
+ color: ${props => props.contrast === "" ? "red" : "#e75480"};
}
`
diff --git a/src/Components/ResourceCardFunction.js b/src/Components/ResourceCardFunction.js
index 009310081359e26e51a92cc2fb07395fba1f9bf2..5cd567edd15ec9121b36c078a3a49f6ea972a5c0 100644
--- a/src/Components/ResourceCardFunction.js
+++ b/src/Components/ResourceCardFunction.js
@@ -36,8 +36,8 @@ import "./ResourceCard.css";
import { putRequest } from './HelperFunctions/getAxiosConfig'
import SignUpModal from './SignUpModal'
import LoginModal from './LoginModal.js'
-import Snackbar from '@material-ui/core/Snackbar';
-import MuiAlert from '@material-ui/lab/Alert';
+
+import SnackBar from './SnackbarComponent';
//Image Import
import { noAvatar } from "ImportImages.js";
@@ -58,10 +58,6 @@ export default function ResourceCardFunction(props) {
const [loginOpen, setLogin] = useState(false)
const [successfulLoginOpen, handleSuccessfulLogin] = useState(false)
- function Alert(props) {
- return <MuiAlert elevation={6} variant="filled" {...props} />;
- }
-
useEffect(() => {
//decide which thumbnail to use
if (props.thumbnail) {
@@ -149,11 +145,13 @@ export default function ResourceCardFunction(props) {
<LoginModal contrast={props.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
openSnackbar={() => { handleSuccessfulLogin(true) }}
/>
- <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleLoginSnackbar}
- anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
- >
- <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
- </Snackbar>
+ <SnackBar
+ snackbarOpen={successfulLoginOpen}
+ handleClose={toggleLoginSnackbar}
+ severity={"success"}
+ color={"#00acc1"}
+ text={"Você está conectado(a)!"}
+ />
<StyledCard>
<CardDiv className={`${props.contrast}Text ${props.contrast}Border`}>
<CardReaDiv>
diff --git a/src/Components/ResourceCardOptions.js b/src/Components/ResourceCardOptions.js
index acec633b1e0d3bbe05a79efd69728920a51bab1d..6c1b1e36e6116dec3fbf16a9f314f3a833e46b8a 100644
--- a/src/Components/ResourceCardOptions.js
+++ b/src/Components/ResourceCardOptions.js
@@ -33,7 +33,7 @@ import ShareIcon from '@material-ui/icons/Share';
import AddIcon from '@material-ui/icons/CreateNewFolder';
import GuardarModal from './GuardarModal'
import ShareModal from './ShareModal'
-import SnackbarComponent from './SnackbarComponent'
+import Snackbar from './SnackbarComponent'
import OpenInBrowserIcon from '@material-ui/icons/OpenInBrowser';
import { getRequest } from './HelperFunctions/getAxiosConfig'
@@ -126,7 +126,7 @@ export default function ResourceCardOptions(props) {
<ShareModal contrast={props.contrast} open={shareOpen} handleClose={() => { toggleShare(false) }}
thumb={props.thumb} title={props.title} link={getShareablePageLink()}
/>
- <SnackbarComponent snackbarOpen={snackbarOpen} severity={"info"} handleClose={() => { toggleSnackbar(false) }} text={"Baixando o Recurso... Lembre-se de relatar sua experiência após o uso do Recurso!"}
+ <Snackbar snackbarOpen={snackbarOpen} severity={"info"} handleClose={() => { toggleSnackbar(false) }} text={"Baixando o Recurso... Lembre-se de relatar sua experiência após o uso do Recurso!"}
/>
<div style={{ fontSize: "12px", display: "flex", flexDirection: "column", justifyContent: "center" }}>
<ButtonNoWidth aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick}>
diff --git a/src/Components/ResourceList.js b/src/Components/ResourceList.js
index e708c007b8b2f258d8dcf81c90d009d25adb48de..ce720dc78e6e0d30c19004e3cd843d0e1ee52e0b 100644
--- a/src/Components/ResourceList.js
+++ b/src/Components/ResourceList.js
@@ -26,14 +26,9 @@ import CheckBoxIcon from '@material-ui/icons/CheckBox';
import GetAppIcon from '@material-ui/icons/GetApp';
import ResourceCardFunction from './ResourceCardFunction.js';
import FloatingDownloadButton from './FloatingDownloadButton.js';
-import Snackbar from '@material-ui/core/Snackbar';
-import MuiAlert from '@material-ui/lab/Alert';
import { apiUrl } from '../env.js';
-function Alert(props) {
- return <MuiAlert elevation={6} variant="filled" {...props} />;
-}
-
+import SnackBar from './SnackbarComponent';
export default function ResourceList(props) {
@@ -184,16 +179,12 @@ export default function ResourceList(props) {
);
})}
</Grid>
- <Snackbar
- open={snackInfo.open}
- autoHideDuration={6000}
- onClose={handleCloseSnack}
- anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
- >
- <Alert onClose={handleCloseSnack} severity={snackInfo.severity}>
- {snackInfo.text}
- </Alert>
- </Snackbar>
+ <SnackBar
+ snackbarOpen={snackInfo.open}
+ handleClose={handleCloseSnack}
+ severity={snackInfo.severity}
+ text={snackInfo.text}
+ />
<FloatingDownloadButton
handleDownloadSelection={handleDownloadSelection}
/>
diff --git a/src/Components/ResourcePageComponents/CommentForm.js b/src/Components/ResourcePageComponents/CommentForm.js
index 7fe1093b5e82891a83c8f895011d6e2b992b2147..dbfb2bc516c6acaa601cb646a6dbd580641bc61c 100644
--- a/src/Components/ResourcePageComponents/CommentForm.js
+++ b/src/Components/ResourcePageComponents/CommentForm.js
@@ -235,22 +235,58 @@ const StyledTextField = styled(TextField)`
margin-bottom: 5px;
}
+ width: 95%;
+
+ .MuiFormHelperText-root {
+ text-align : left;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
+
+ .MuiFormHelperText-root.Mui-error {
+ text-align : left;
+ color: ${props => props.contrast === "" ? "red" : "#e75480"};
+ }
+
+ .MuiInput-underline::after {
+ border-color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ }
+
+ .MuiInput-underline.Mui-error::after {
+ border-color: ${props => props.contrast === "" ? "red" : "#e75480"};
+ }
+
.MuiOutlinedInput-root {
+ &.Mui-focused.Mui-error fieldset{
+ border-color: ${props => props.contrast === "" ? "red" : "#e75480"};
+ }
+
+ &.Mui-error fieldset{
+ border-color: ${props => props.contrast === "" ? "red" : "#e75480"};
+ }
+
&.Mui-focused fieldset {
- border-color: ${(props) =>
- props.contrast === ""
- ? props.colecao
- ? "#673ab7"
- : "rgb(255,127,0)"
- : "yellow"};
+ border-color: ${(props) =>
+ props.contrast === ""
+ ? props.colecao
+ ? "#673ab7"
+ : "rgb(255,127,0)"
+ : "yellow"};
}
fieldset {
- border-color: ${(props) => (props.contrast === "" ? "#666" : "white")};
+ border-color: ${props => props.contrast === "" ? "#666" : "white"};
}
}
- label {
- color: ${(props) => (props.contrast === "" ? "#666" : "white")};
+ label{
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
+
+ .MuiFormLabel-asterisk {
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
+
+ .MuiFormLabel-asterisk.Mui-error {
+ color: ${props => props.contrast === "" ? "red" : "#e75480"};
}
label.Mui-focused {
@@ -263,10 +299,12 @@ const StyledTextField = styled(TextField)`
}
label.Mui-focused.Mui-error {
- color: red;
+ color: ${props => props.contrast === "" ? "red" : "#e75480"};
}
- width: 95%;
+ label.Mui-error {
+ color: ${props => props.contrast === "" ? "red" : "#e75480"};
+ }
`;
const StyledForm = styled.form`
diff --git a/src/Components/ResourcePageComponents/CommentsArea.js b/src/Components/ResourcePageComponents/CommentsArea.js
index 990e60982fc38606d8a4461a773154a0b30749ce..3da805e22686fe9283e03fc200dfd5ea21137941 100644
--- a/src/Components/ResourcePageComponents/CommentsArea.js
+++ b/src/Components/ResourcePageComponents/CommentsArea.js
@@ -27,22 +27,17 @@ import CommentForm from './CommentForm.js'
import Comment from '../Comment.js'
import { getRequest } from '../HelperFunctions/getAxiosConfig'
import LoginModal from './../LoginModal.js'
-import Snackbar from '@material-ui/core/Snackbar';
import SignUpModal from './../SignUpModal'
-import MuiAlert from '@material-ui/lab/Alert';
import CircularProgress from '@material-ui/core/CircularProgress';
import IconButton from '@material-ui/core/IconButton';
import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
-import SnackBarComponent from '../../Components/SnackbarComponent';
+
+import SnackBar from '../SnackbarComponent';
//Image Import
import { Comentarios } from "ImportImages.js";
import { noAvatar } from "ImportImages.js";
-function Alert(props) {
- return <MuiAlert elevation={6} variant="filled" {...props} />;
-}
-
export default function CommentsArea(props) {
const { state } = useContext(Store)
const [comentarios, setComentarios] = useState([])
@@ -193,18 +188,20 @@ export default function CommentsArea(props) {
return (
<React.Fragment>
- <SnackBarComponent
+ <SnackBar
snackbarOpen={snackInfo.open}
handleClose={handleCloseSnack}
severity={snackInfo.severity}
text={snackInfo.text}
color={snackInfo.color}
/>
- <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleSnackbar}
- anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
- >
- <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
- </Snackbar>
+ <SnackBar
+ snackbarOpen={successfulLoginOpen}
+ handleClose={toggleSnackbar}
+ severity={"success"}
+ color={"#00acc1"}
+ text={"Você está conectado(a)!"}
+ />
{/*-------------------------------MODALS---------------------------------------*/}
<LoginModal contrast={props.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
openSnackbar={() => { handleSuccessfulLogin(true) }}
diff --git a/src/Components/ResourcePageComponents/Footer.js b/src/Components/ResourcePageComponents/Footer.js
index f1bc74654af9d90ee856c4ef8a8647649c05a72e..b4b0e38678ecda0db944823b35cdb397195d9488 100644
--- a/src/Components/ResourcePageComponents/Footer.js
+++ b/src/Components/ResourcePageComponents/Footer.js
@@ -34,14 +34,10 @@ import MoreVertIcon from '@material-ui/icons/MoreVert';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
import LoginModal from './../LoginModal.js'
-import Snackbar from '@material-ui/core/Snackbar';
import SignUpModal from './../SignUpModal'
-import MuiAlert from '@material-ui/lab/Alert';
import { getRequest } from '../HelperFunctions/getAxiosConfig'
-function Alert(props) {
- return <MuiAlert elevation={6} variant="filled" {...props} />;
-}
+import SnackBar from '../SnackbarComponent';
function ReportButton(props) {
return (
@@ -148,11 +144,13 @@ export default function Footer(props) {
return (
<React.Fragment>
- <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleSnackbar}
- anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
- >
- <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
- </Snackbar>
+ <SnackBar
+ snackbarOpen={successfulLoginOpen}
+ handleClose={toggleSnackbar}
+ severity={"success"}
+ color={"#00acc1"}
+ text={"Você está conectado(a)!"}
+ />
{/*-------------------------------MODALS---------------------------------------*/}
<ReportModal contrast={props.contrast} open={reportOpen} handleClose={() => { toggleReport(false) }}
form="recurso"
diff --git a/src/Components/ResourcePageComponents/Sobre.js b/src/Components/ResourcePageComponents/Sobre.js
index 63f646ae6aa9aa3c0299309ae70753e2ec61fa06..a13ff431a4f2f116cb159a34443562b066b252e8 100644
--- a/src/Components/ResourcePageComponents/Sobre.js
+++ b/src/Components/ResourcePageComponents/Sobre.js
@@ -34,17 +34,13 @@ import UpdateIcon from '@material-ui/icons/Update';
import AssignmentIcon from '@material-ui/icons/Assignment';
import ContactCardOptions from '../ContactCardOptions.js'
import LoginModal from './../LoginModal.js'
-import Snackbar from '@material-ui/core/Snackbar';
import SignUpModal from './../SignUpModal'
-import MuiAlert from '@material-ui/lab/Alert';
+
+import SnackBar from '../SnackbarComponent';
//Image Import
import { License } from "ImportImages.js";
-function Alert(props) {
- return <MuiAlert elevation={6} variant="filled" {...props} />;
-}
-
function AdditionalInfoItem(props) {
return (
<span className="meta-objeto">
@@ -171,11 +167,13 @@ export default function Sobre(props) {
return (
<React.Fragment>
- <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleSnackbar}
- anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
- >
- <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
- </Snackbar>
+ <SnackBar
+ snackbarOpen={successfulLoginOpen}
+ handleClose={toggleSnackbar}
+ severity={"success"}
+ color={"#00acc1"}
+ text={"Você está conectado(a)!"}
+ />
{/*-------------------------------MODALS---------------------------------------*/}
<LoginModal contrast={state.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
openSnackbar={() => { handleSuccessfulLogin(true) }}
diff --git a/src/Components/ResourcePageComponents/TextoObjeto.js b/src/Components/ResourcePageComponents/TextoObjeto.js
index f40324cf53c37c6909325ef65bf238c8e9ef4b67..96585e7bcb769217088ae0cf9c778cc57dca8e30 100644
--- a/src/Components/ResourcePageComponents/TextoObjeto.js
+++ b/src/Components/ResourcePageComponents/TextoObjeto.js
@@ -27,10 +27,10 @@ import EditIcon from '@material-ui/icons/Edit';
import DeleteForeverIcon from '@material-ui/icons/DeleteForever';
import Button from '@material-ui/core/Button';
import {Link, Redirect} from 'react-router-dom'
-import Alert from '../Alert.js';
-import Snackbar from '@material-ui/core/Snackbar';
import {deleteRequest} from '../HelperFunctions/getAxiosConfig'
+import SnackBar from '../SnackbarComponent';
+
export default function TextoObjeto (props) {
const {state} = useContext(Store)
@@ -111,13 +111,13 @@ export default function TextoObjeto (props) {
}}
/>
}
- <Snackbar open={snackbarOpen} autoHideDuration={1000} onClose={() => {toggleSnackbar(false)}}
- anchorOrigin = {{ vertical:'top', horizontal:'right' }}
- >
- <Alert severity="info" style={{backgroundColor:"#00acc1"}}>
- Recurso excluido com sucesso!
- </Alert>
- </Snackbar>
+ <SnackBar
+ snackbarOpen={snackbarOpen}
+ handleClose={() => {toggleSnackbar(false)}}
+ severity={"info"}
+ color={"#00acc1"}
+ text={"Recurso excluido com sucesso!"}
+ />
<Grid container style={{paddingLeft : "15px"}}>
<Grid item xs={11}>
<h3>{props.name}</h3>
diff --git a/src/Components/SignUpModal.js b/src/Components/SignUpModal.js
index 3114f8e578e5e8c83bd15bfa08f9c9db81ff1e7f..8a329fcac137299ee68150daf5520ecb79237db0 100644
--- a/src/Components/SignUpModal.js
+++ b/src/Components/SignUpModal.js
@@ -23,13 +23,8 @@ import styled from 'styled-components'
import SignUpContainer from './SignUpContainerFunction.js'
import { Store } from '../Store.js'
import { authentication } from './HelperFunctions/getAxiosConfig'
-import Snackbar from '@material-ui/core/Snackbar';
-import MuiAlert from '@material-ui/lab/Alert';
-//import {postRequest} from './HelperFunctions/getAxiosConfig'
-export function Alert(props) {
- return <MuiAlert elevation={6} variant="filled" {...props} />;
-}
+import SnackBar from './SnackbarComponent';
export default function SignUpModal(props) {
const { state, dispatch } = useContext(Store)
@@ -73,11 +68,12 @@ export default function SignUpModal(props) {
return (
<>
- <Snackbar open={snackbarOpened} autoHideDuration={1000} onClose={handleCloseSnackbar}
- anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
- >
- <Alert severity="error">Ocorreu um erro ao se conectar!</Alert>
- </Snackbar>
+ <SnackBar
+ snackbarOpen={snackbarOpened}
+ handleClose={handleCloseSnackbar}
+ severity={"error"}
+ text={"Ocorreu um erro ao se conectar!"}
+ />
<StyledModalSignUp
aria-labelledby="transition-modal-title"
aria-describedby="transition-modal-description"
diff --git a/src/Components/SnackbarComponent.js b/src/Components/SnackbarComponent.js
index 9017c2dc36b44ecb3daa836d5f534e5e1672e948..0250f3a5c0aed5cd908b2c0752f0b3a0ecb59419 100644
--- a/src/Components/SnackbarComponent.js
+++ b/src/Components/SnackbarComponent.js
@@ -16,19 +16,19 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { /*useContext*/ } from 'react'
-import Alert from '../Components/Alert.js';
+import React, { useContext } from 'react'
+import Alert from './Alert.js';
import Snackbar from '@material-ui/core/Snackbar';
-//import { Store } from '../Store.js'
+import { Store } from '../Store.js'
export default function SnackbarComponent(props) {
-// const { state } = useContext(Store)
+ const { state } = useContext(Store)
return (
- <Snackbar open={props.snackbarOpen} autoHideDuration={3000} onClose={props.handleClose}
+ <Snackbar open={props.snackbarOpen} autoHideDuration={2000} onClose={props.handleClose}
anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
>
- <Alert severity={props.severity}>
+ <Alert severity={props.severity} style={state.contrast === "" ? props.color ? { backgroundColor: props.color } : {} : { backgroundColor: "black", color: "white", border: "1px solid white" }}>
{props.text}
</Alert>
</Snackbar>
diff --git a/src/Components/Stepper.js b/src/Components/Stepper.js
index a50f700cc1ea897a999f52ff1d2ca7fe4fae0783..2ed12b9dabd3dce453ccae022e53899e9d9063b9 100644
--- a/src/Components/Stepper.js
+++ b/src/Components/Stepper.js
@@ -38,7 +38,7 @@ export default function CustomizedSteppers(props) {
<div className={props.activeStep === index ? "currStep" : "step"}>
{
index < props.activeStep ?
- <Check style={props.contrast === "" ? { color: "#00bcd4" } : { color: "white" }} /> : index
+ <Check style={props.contrast === "" ? { color: "#00bcd4" } : { color: "white" }} /> : <span>{index + 1}</span>
}
</div>
</Grid>
@@ -53,7 +53,7 @@ export default function CustomizedSteppers(props) {
index < props.activeStep ?
<Check style={{ color: 'white' }} /> :
<span style={{ color: 'white' }}>
- {index}
+ {index + 1}
</span>
}
</div>
diff --git a/src/Components/TabPanels/UserPageTabs/ModalExcluirConta.js b/src/Components/TabPanels/UserPageTabs/ModalExcluirConta.js
index 19f4c6e4485d3e674e1d5ba01a43ffd15932cf35..e4e99bc6a5c4187577a34e1e64236b5db2effb85 100644
--- a/src/Components/TabPanels/UserPageTabs/ModalExcluirConta.js
+++ b/src/Components/TabPanels/UserPageTabs/ModalExcluirConta.js
@@ -27,7 +27,7 @@ import CloseIcon from '@material-ui/icons/Close';
import GreyButton from '../../GreyButton'
import FormInput from '../../FormInput'
import {Link} from 'react-router-dom'
-import SnackbarComponent from '../../SnackbarComponent.js'
+import Snackbar from '../../SnackbarComponent.js'
import {deleteRequest} from '../../HelperFunctions/getAxiosConfig'
//Image Import
@@ -78,7 +78,7 @@ export default function ModalExcluirConta (props) {
return (
<React.Fragment>
- <SnackbarComponent snackbarOpen={snackbarOpen} severity={"info"} handleClose={() => {toggleSnackbar(false)}} text={deletedAccountText}/>
+ <Snackbar snackbarOpen={snackbarOpen} severity={"info"} handleClose={() => {toggleSnackbar(false)}} text={deletedAccountText}/>
<StyledModal
aria-labelledby="transition-modal-title"
aria-describedby="transition-modal-description"
diff --git a/src/Components/UploadPageComponents/Forms/Keywords.js b/src/Components/UploadPageComponents/Forms/Keywords.js
index 428047106c25ecbb2685973d3369ddfe7de01e2d..023765f8ede31af49d51e02c9a5b399b0ab1c444 100644
--- a/src/Components/UploadPageComponents/Forms/Keywords.js
+++ b/src/Components/UploadPageComponents/Forms/Keywords.js
@@ -98,8 +98,7 @@ function Keywords(props) {
handleSetKeywords([...keywords, keywordsBuffer])
setKeywordsBuffer('')
}
- }
- }
+ }}
fullWidth
onBlur={() => { props.onBlurCallback("tags", keywords, props.draftID) }}
/>
diff --git a/src/Components/UploadPageComponents/Stepper.js b/src/Components/UploadPageComponents/Stepper.js
index a4acce469786ff8af28648a0d4a31f4751a1a83e..a788b1bb95ba44ec7b3a487f7541fc16eb56dcbf 100644
--- a/src/Components/UploadPageComponents/Stepper.js
+++ b/src/Components/UploadPageComponents/Stepper.js
@@ -38,7 +38,7 @@ export default function CustomizedSteppers(props) {
<div className={props.activeStep === index ? "currStep" : "step"}>
{
index < props.activeStep ?
- <Check style={props.contrast === "" ? { color: "#00bcd4" } : { color: "white" }} /> : index
+ <Check style={props.contrast === "" ? { color: "#00bcd4" } : { color: "white" }} /> : <span>{index + 1}</span>
}
</div>
</Grid>
@@ -53,7 +53,7 @@ export default function CustomizedSteppers(props) {
index < props.activeStep ?
<Check style={{ color: 'white' }} /> :
<span style={{ color: 'white' }}>
- {index}
+ {index + 1}
</span>
}
</div>
diff --git a/src/Components/UploadPageComponents/StyledComponents.js b/src/Components/UploadPageComponents/StyledComponents.js
index f09077acd3440bfc2f8453937b668f8ad3bd842e..e7bc25217f6baa488af119d961c0475369dfbbdc 100644
--- a/src/Components/UploadPageComponents/StyledComponents.js
+++ b/src/Components/UploadPageComponents/StyledComponents.js
@@ -378,7 +378,33 @@ export const StyledTextField = styled(TextField)`
font-size : 14px;
width : 100% !important;
+ .MuiFormHelperText-root {
+ text-align : left;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
+
+ .MuiFormHelperText-root.Mui-error {
+ text-align : left;
+ color: ${props => props.contrast === "" ? "red" : "#e75480"};
+ }
+
+ .MuiInput-underline::after {
+ border-color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ }
+
+ .MuiInput-underline.Mui-error::after {
+ border-color: ${props => props.contrast === "" ? "red" : "#e75480"};
+ }
+
.MuiOutlinedInput-root {
+ &.Mui-focused.Mui-error fieldset{
+ border-color: ${props => props.contrast === "" ? "red" : "#e75480"};
+ }
+
+ &.Mui-error fieldset{
+ border-color: ${props => props.contrast === "" ? "red" : "#e75480"};
+ }
+
&.Mui-focused fieldset {
border-color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
}
@@ -391,17 +417,24 @@ export const StyledTextField = styled(TextField)`
color: ${props => props.contrast === "" ? "#666" : "white"};
}
+ .MuiFormLabel-asterisk {
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
+
+ .MuiFormLabel-asterisk.Mui-error {
+ color: ${props => props.contrast === "" ? "red" : "#e75480"};
+ }
+
label.Mui-focused {
color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
}
label.Mui-focused.Mui-error {
- color : red;
+ color: ${props => props.contrast === "" ? "red" : "#e75480"};
}
- .MuiFormHelperText-root {
- text-align : left;
- color: ${props => props.contrast === "" ? "#666" : "white"};
+ label.Mui-error {
+ color: ${props => props.contrast === "" ? "red" : "#e75480"};
}
`
diff --git a/src/Components/UploadPageComponents/UploadFileWrapper.js b/src/Components/UploadPageComponents/UploadFileWrapper.js
index 866f02097561cf25a9075ff8b3bb208c08bec2d5..8aa1b13b123b3954d17eeb4a4217199830f99f4e 100644
--- a/src/Components/UploadPageComponents/UploadFileWrapper.js
+++ b/src/Components/UploadPageComponents/UploadFileWrapper.js
@@ -27,8 +27,8 @@ import axios from 'axios'
import { apiUrl } from '../../env';
import DoneIcon from '@material-ui/icons/Done';
import DeleteIcon from '@material-ui/icons/Delete';
-import Alert from '../Alert.js';
-import Snackbar from '@material-ui/core/Snackbar';
+
+import SnackBar from '../SnackbarComponent';
export default function UploadFileWrapper(props) {
/*-----------------------------------------------------------------
@@ -221,13 +221,13 @@ export default function UploadFileWrapper(props) {
case "choosingLink":
return (
<React.Fragment>
- <Snackbar open={snackbarOpen} autoHideDuration={1000} onClose={() => { toggleSnackbar(false) }}
- anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
- >
- <Alert severity="info" style={{ backgroundColor: "#00acc1" }}>
- Link salvo com sucesso!
- </Alert>
- </Snackbar>
+ <SnackBar
+ snackbarOpen={snackbarOpen}
+ handleClose={() => { toggleSnackbar(false) }}
+ severity={"info"}
+ color={"#00acc1"}
+ text={"Link salvo com sucesso!"}
+ />
<ChooseLink contrast={props.contrast} handleNextStage={handleNextStage} submit={handleChooseLink} />
</React.Fragment>
)
diff --git a/src/Components/carousel.css b/src/Components/carousel.css
index 3a4c6336859565de33631450b35b9ed963a8dfdd..929ac9e38c8a118fffc3501e47deb192158b3a01 100644
--- a/src/Components/carousel.css
+++ b/src/Components/carousel.css
@@ -26,12 +26,16 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
position: inherit !important;
}
-.carousel .control-arrow {
+.Carousel .control-arrow {
background: orange !important;
- /* position: relative !important; */
- -webkit-box-shadow: 0 8px 17px 2px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2);
- box-shadow: 0 8px 17px 2px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2);
+ -webkit-box-shadow: 0px 0px 30px -10px #000000;
+ box-shadow: 0px 0px 15px -5px #000000;
+}
+
+.ContrastCarousel .control-arrow {
+ background: black !important;
+ border: 1px solid white !important;
}
.MuiPaper-elevation1-209{
@@ -48,4 +52,5 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
vertical-align: middle;
height: 50px;
width: 50px;
+ margin: 10px;
}
diff --git a/src/Pages/ChangePasswordPage.js b/src/Pages/ChangePasswordPage.js
index a7f90c2203cdd680446f35977b71d97424d4b4f6..c7a2d84b441e029b8d6a915d4fbcf2613f97afc6 100644
--- a/src/Pages/ChangePasswordPage.js
+++ b/src/Pages/ChangePasswordPage.js
@@ -7,17 +7,13 @@ import { CompletarCadastroButton } from '../Components/TabPanels/UserPageTabs/Pa
import ValidateUserInput from '../Components/HelperFunctions/FormValidationFunction.js'
import CustomizedBreadcrumbs from '../Components/TabPanels/Breadcrumbs.js'
import { putRequest } from '../Components/HelperFunctions/getAxiosConfig'
-import Snackbar from '@material-ui/core/Snackbar'
-import MuiAlert from '@material-ui/lab/Alert'
import Grid from '@material-ui/core/Grid'
import IconButton from '@material-ui/core/IconButton'
import VisibilityIcon from '@material-ui/icons/Visibility'
import VisibilityOffIcon from '@material-ui/icons/VisibilityOff'
import { Store } from '../Store'
-function Alert(props) {
- return <MuiAlert elevation={6} variant="filled" {...props} />;
-}
+import SnackBar from '../Components/SnackbarComponent';
export default function ChangePasswordPage(props) {
const { state } = useContext(Store)
@@ -176,16 +172,12 @@ export default function ChangePasswordPage(props) {
if (error)
return (
<BackgroundDiv contrast={state.contrast}>
- <Snackbar
- open={snackInfo.open}
- autoHideDuration={6000}
- onClose={handleCloseSnack}
- anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
- >
- <Alert onClose={handleCloseSnack} severity={snackInfo.severity}>
- {snackInfo.text}
- </Alert>
- </Snackbar>
+ <SnackBar
+ snackbarOpen={snackInfo.open}
+ handleClose={handleCloseSnack}
+ severity={snackInfo.severity}
+ text={snackInfo.text}
+ />
<div>
<CustomizedBreadcrumbs contrast={state.contrast}
values={["Recuperar senha", "Alterar senha"]}
@@ -207,16 +199,12 @@ export default function ChangePasswordPage(props) {
else if (success)
return (
<BackgroundDiv contrast={state.contrast}>
- <Snackbar
- open={snackInfo.open}
- autoHideDuration={6000}
- onClose={handleCloseSnack}
- anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
- >
- <Alert onClose={handleCloseSnack} severity={snackInfo.severity}>
- {snackInfo.text}
- </Alert>
- </Snackbar>
+ <SnackBar
+ snackbarOpen={snackInfo.open}
+ handleClose={handleCloseSnack}
+ severity={snackInfo.severity}
+ text={snackInfo.text}
+ />
<div>
<CustomizedBreadcrumbs contrast={state.contrast}
values={["Recuperar senha", "Alterar senha"]}
@@ -238,16 +226,12 @@ export default function ChangePasswordPage(props) {
else
return (
<BackgroundDiv contrast={state.contrast}>
- <Snackbar
- open={snackInfo.open}
- autoHideDuration={6000}
- onClose={handleCloseSnack}
- anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
- >
- <Alert onClose={handleCloseSnack} severity={snackInfo.severity}>
- {snackInfo.text}
- </Alert>
- </Snackbar>
+ <SnackBar
+ snackbarOpen={snackInfo.open}
+ handleClose={handleCloseSnack}
+ severity={snackInfo.severity}
+ text={snackInfo.text}
+ />
<div>
<CustomizedBreadcrumbs contrast={state.contrast}
values={["Recuperar senha", "Alterar senha"]}
diff --git a/src/Pages/EditLearningObjectPage.js b/src/Pages/EditLearningObjectPage.js
index e9b4da89fa5c10ce21e6cd2a33e53d1552284365..a8325bc0d4a3b5dfcf1208a57c298d7bc58ebeb7 100644
--- a/src/Pages/EditLearningObjectPage.js
+++ b/src/Pages/EditLearningObjectPage.js
@@ -22,8 +22,6 @@ import axios from 'axios'
import {apiUrl, apiDomain} from '../env';
import Grid from '@material-ui/core/Grid';
import UploadFileWrapper from '../Components/UploadPageComponents/UploadFileWrapper.js'
-import Alert from '../Components/Alert.js';
-import Snackbar from '@material-ui/core/Snackbar';
import {Redirect} from 'react-router-dom'
import {GreyButton, OrangeButton, InfoBox} from '../Components/UploadPageComponents/StyledComponents.js'
import {Background} from '../Components/UploadPageComponents/StyledComponents'
@@ -43,6 +41,8 @@ import DisplayThumbnail from '../Components/UploadPageComponents/PartTwoComponen
import DragAndDropThumbnail from '../Components/UploadPageComponents/PartTwoComponents/DragAndDropThumbnail'
import {getRequest, deleteRequest, putRequest, postRequest} from '../Components/HelperFunctions/getAxiosConfig.js'
+import SnackBar from '../Components/SnackbarComponent';
+
export default function EditLearningObjectPage (props) {
const recursoId = props.match.params.recursoId
const {state} = useContext(Store)
@@ -246,13 +246,13 @@ export default function EditLearningObjectPage (props) {
}}
/>
}
- <Snackbar open={snackbarOpen} autoHideDuration={1000} onClose={() => {toggleSnackbar(false)}}
- anchorOrigin = {{ vertical:'top', horizontal:'right' }}
- >
- <Alert severity="info" style={{backgroundColor:"#00acc1"}}>
- Recurso excluido com sucesso!
- </Alert>
- </Snackbar>
+ <SnackBar
+ snackbarOpen={snackbarOpen}
+ handleClose={() => {toggleSnackbar(false)}}
+ severity={"info"}
+ color={"#00acc1"}
+ text={"Recurso excluido com sucesso!"}
+ />
{
!loading ?
(
diff --git a/src/Pages/EditProfilePage.js b/src/Pages/EditProfilePage.js
index 6ed58aec32a714348acef51edd0b8b49000743c8..56a72c8cac3ddca27ec88dda0c36f367c84c95b6 100644
--- a/src/Pages/EditProfilePage.js
+++ b/src/Pages/EditProfilePage.js
@@ -6,13 +6,13 @@ import Paper from '@material-ui/core/Paper';
import TabPanelEditarPerfil from '../Components/TabPanels/UserPageTabs/PanelEditarPerfil.js'
import TabPanelSolicitarContaProfessor from '../Components/TabPanels/UserPageTabs/PanelSolicitarContaProfessor.js'
import TabPanelGerenciarConta from '../Components/TabPanels/UserPageTabs/PanelGerenciarConta.js'
-import Snackbar from '@material-ui/core/Snackbar';
-import { Alert } from '../Components/LoginModal.js'
import Grid from '@material-ui/core/Grid'
import CustomizedBreadcrumbs from '../Components/TabPanels/Breadcrumbs.js'
import { putRequest } from '../Components/HelperFunctions/getAxiosConfig'
import { Store } from '../Store.js'
+import SnackBar from '../Components/SnackbarComponent';
+
export default function EditProfilePage(props) {
const { state, dispatch } = useContext(Store)
const id = state.currentUser.id
@@ -120,11 +120,12 @@ export default function EditProfilePage(props) {
return (
<Main contrast={state.contrast}>
- <Snackbar open={snackbarOpened.open} autoHideDuration={1000} onClose={handleCloseSnackbar}
- anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
- >
- <Alert severity={snackbarOpened.severity} >{snackbarOpened.text}</Alert>
- </Snackbar>
+ <SnackBar
+ snackbarOpen={snackbarOpened.open}
+ handleClose={handleCloseSnackbar}
+ severity={snackbarOpened.severity}
+ text={snackbarOpened.text}
+ />
<CustomizedBreadcrumbs
contrast={state.contrast}
diff --git a/src/Pages/ResourcePage.js b/src/Pages/ResourcePage.js
index 17cc07adf2121aface9b8140785ce21098d1da89..290de7b749eafef0bff765b3b87ca2aabf33fe58 100644
--- a/src/Pages/ResourcePage.js
+++ b/src/Pages/ResourcePage.js
@@ -25,8 +25,6 @@ import TextoObjeto from "../Components/ResourcePageComponents/TextoObjeto.js";
import Footer from "../Components/ResourcePageComponents/Footer.js";
import Sobre from "../Components/ResourcePageComponents/Sobre.js";
import CommentsArea from "../Components/ResourcePageComponents/CommentsArea.js";
-import Snackbar from "@material-ui/core/Snackbar";
-import Alert from "../Components/Alert.js";
import VideoPlayer from "../Components/ResourcePageComponents/VideoPlayer.js";
import LoadingSpinner from "../Components/LoadingSpinner.js";
import { makeStyles } from "@material-ui/core/styles";
@@ -38,6 +36,8 @@ import { getRequest } from "../Components/HelperFunctions/getAxiosConfig";
import Button from '@material-ui/core/Button';
import { Link } from 'react-router-dom';
+import SnackBar from '../Components/SnackbarComponent';
+
//Image Import
import { noAvatar } from "ImportImages.js";
@@ -166,183 +166,179 @@ export default function LearningObjectPage(props) {
else
return (
<React.Fragment>
- <Snackbar
- open={snackbarOpen}
- autoHideDuration={6000}
- onClose={toggleSnackbar}
- anchorOrigin={{ vertical: "top", horizontal: "right" }}
- >
- <Alert severity="info"
- style={{ backgroundColor: "#00acc1" }}>
- {snackbarText[snackbarIndex]}
- </Alert>
- </Snackbar>
-
- <ModalAvaliarRecurso
- contrast={state.contrast}
- open={modalCuradoriaOpen}
- handleClose={() => {
- handleModalCuradoria(false);
- }}
- title={recurso.name}
- confirm={handleConfirm}
- setCriteria={setReportCriteria}
- />
- <ModalConfirmarCuradoria
- contrast={state.contrast}
- aceito={submissionAccepted}
- reportCriteria={reportCriteria}
- justificativa={justificativa}
- open={modalConfirmarCuradoriaOpen}
- handleClose={() => {
- handleModalConfirmarCuradoria(false);
- }}
- cancel={() => {
- handleModalCuradoria(true);
- }}
- recursoId={recurso.submission_id}
- finalizeCuratorshipFlow={finalizeCuratorshipFlow}
- handleErrorAprove={() => {
- handleSnackbar(6)
- }}
- />
- <Background contrast={state.contrast}>
- {carregando ? (
- <LoadingSpinner contrast={state.contrast} text={"Carregando Recurso"} />
- ) : (
- <>
- <Grid container spacing={2}>
- {recurso.object_type === "VÃdeo" && !recurso.link ? (
- <Grid item xs={12}>
- <Card contrast={state.contrast}>
- <VideoPlayer
+ <SnackBar
+ snackbarOpen={snackbarOpen}
+ handleClose={toggleSnackbar}
+ severity={"info"}
+ color={"#00acc1"}
+ text={snackbarText[snackbarIndex]}
+ />
+
+ <ModalAvaliarRecurso
+ contrast={state.contrast}
+ open={modalCuradoriaOpen}
+ handleClose={() => {
+ handleModalCuradoria(false);
+ }}
+ title={recurso.name}
+ confirm={handleConfirm}
+ setCriteria={setReportCriteria}
+ />
+ <ModalConfirmarCuradoria
+ contrast={state.contrast}
+ aceito={submissionAccepted}
+ reportCriteria={reportCriteria}
+ justificativa={justificativa}
+ open={modalConfirmarCuradoriaOpen}
+ handleClose={() => {
+ handleModalConfirmarCuradoria(false);
+ }}
+ cancel={() => {
+ handleModalCuradoria(true);
+ }}
+ recursoId={recurso.submission_id}
+ finalizeCuratorshipFlow={finalizeCuratorshipFlow}
+ handleErrorAprove={() => {
+ handleSnackbar(6)
+ }}
+ />
+ <Background contrast={state.contrast}>
+ {carregando ? (
+ <LoadingSpinner contrast={state.contrast} text={"Carregando Recurso"} />
+ ) : (
+ <>
+ <Grid container spacing={2}>
+ {recurso.object_type === "VÃdeo" && !recurso.link ? (
+ <Grid item xs={12}>
+ <Card contrast={state.contrast}>
+ <VideoPlayer
+ contrast={state.contrast}
+ link={recurso.link}
+ urlVerified={false}
+ videoUrl={recurso.default_attachment_location}
+ videoType={recurso.default_mime_type}
+ />
+ </Card>
+ </Grid>
+ ) : (
+ urlVerify(recurso.link) && (
+ <Grid item xs={12}>
+ <Card contrast={state.contrast}>
+ <VideoPlayer contrast={state.contrast} link={recurso.link} urlVerified={true} />
+ </Card>
+ </Grid>
+ )
+ )}
+
+ <Grid item xs={12}>
+ <Card contrast={state.contrast}>
+ <div>
+ {recurso.thumbnail && (
+ <img alt="recurso" src={apiDomain + recurso.thumbnail} />
+ )}
+
+ <TextoObjeto
contrast={state.contrast}
- link={recurso.link}
- urlVerified={false}
- videoUrl={recurso.default_attachment_location}
- videoType={recurso.default_mime_type}
+ name={recurso.name}
+ rating={recurso.review_average}
+ recursoId={id}
+ likesCount={recurso.likes_count}
+ likedBool={recurso.liked}
+ objType={recurso.object_type}
+ subjects={recurso.subjects}
+ educationalStages={recurso.educational_stages}
+ viewCount={recurso.views_count}
+ downloadCount={recurso.downloads_count}
+ id={recurso.publisher ? recurso.publisher.id : undefined}
+ stateRecurso={recurso.state}
+ attachments={recurso.attachments}
+ audioUrl={recurso.default_attachment_location}
/>
- </Card>
- </Grid>
- ) : (
- urlVerify(recurso.link) && (
- <Grid item xs={12}>
- <Card contrast={state.contrast}>
- <VideoPlayer contrast={state.contrast} link={recurso.link} urlVerified={true} />
- </Card>
- </Grid>
- )
- )}
-
- <Grid item xs={12}>
- <Card contrast={state.contrast}>
- <div>
- {recurso.thumbnail && (
- <img alt="recurso" src={apiDomain + recurso.thumbnail} />
- )}
+ </div>
- <TextoObjeto
+ <Footer
contrast={state.contrast}
- name={recurso.name}
- rating={recurso.review_average}
recursoId={id}
- likesCount={recurso.likes_count}
- likedBool={recurso.liked}
- objType={recurso.object_type}
- subjects={recurso.subjects}
- educationalStages={recurso.educational_stages}
- viewCount={recurso.views_count}
- downloadCount={recurso.downloads_count}
- id={recurso.publisher ? recurso.publisher.id : undefined}
- stateRecurso={recurso.state}
- attachments={recurso.attachments}
- audioUrl={recurso.default_attachment_location}
+ downloadableLink={recurso.default_attachment_location}
+ handleSnackbar={handleSnackbar}
+ link={recurso.link}
+ title={recurso.name}
+ thumb={recurso.thumbnail}
+ currPageLink={window.location.href}
+ complained={recurso.complained}
/>
- </div>
-
- <Footer
- contrast={state.contrast}
- recursoId={id}
- downloadableLink={recurso.default_attachment_location}
- handleSnackbar={handleSnackbar}
- link={recurso.link}
- title={recurso.name}
- thumb={recurso.thumbnail}
- currPageLink={window.location.href}
- complained={recurso.complained}
- />
- </Card>
- </Grid>
-
- <Grid item xs={12}>
- <Card contrast={state.contrast}>
- {/*todo: change render method on additional item info*/}
- <Sobre
- avatar={
- recurso.publisher
- ? recurso.publisher.avatar
- ? apiDomain + recurso.publisher.avatar
- : noAvatar
- : noAvatar
- }
- publisher={
- recurso.publisher ? recurso.publisher.name : undefined
- }
- id={recurso.publisher ? recurso.publisher.id : undefined}
- description={recurso.description}
- author={recurso.author}
- tags={recurso.tags}
- attachments={recurso.attachments}
- language={recurso.language}
- mimeType={recurso.default_mime_type}
- createdAt={recurso.created_at}
- updatedAt={recurso.updated_at}
- license={recurso.license}
- followed={recurso.publisher ? recurso.publisher.followed : undefined}
- />
- </Card>
- </Grid>
+ </Card>
+ </Grid>
- {recurso.state !== "submitted" && (
<Grid item xs={12}>
<Card contrast={state.contrast}>
- {/*adicionar funcionalidade ao botao de entrar*/}
- <CommentsArea
- recursoId={id}
- handleSnackbar={handleSnackbar}
- objType={recurso.object_type}
- recurso={true}
+ {/*todo: change render method on additional item info*/}
+ <Sobre
+ avatar={
+ recurso.publisher
+ ? recurso.publisher.avatar
+ ? apiDomain + recurso.publisher.avatar
+ : noAvatar
+ : noAvatar
+ }
+ publisher={
+ recurso.publisher ? recurso.publisher.name : undefined
+ }
+ id={recurso.publisher ? recurso.publisher.id : undefined}
+ description={recurso.description}
+ author={recurso.author}
+ tags={recurso.tags}
+ attachments={recurso.attachments}
+ language={recurso.language}
+ mimeType={recurso.default_mime_type}
+ createdAt={recurso.created_at}
+ updatedAt={recurso.updated_at}
+ license={recurso.license}
+ followed={recurso.publisher ? recurso.publisher.followed : undefined}
/>
</Card>
</Grid>
- )}
- </Grid>
-
- {recurso.state === "submitted" && checkAccessLevel("curator") && (
- <AppBar
- position="fixed"
- className={classes.appBar}
- style={state.contrast === "" ? { backgroundColor: "white" } : { backgroundColor: "black", borderTop: "1px solid white" }}
- >
- <StyledAppBarContainer contrast={state.contrast}>
- <div className="container">
- <div className="botoes">
- <ButtonAvaliarRecurso
- contrast={state.contrast}
- callback={() => {
- handleModalCuradoria(true);
- }}
+
+ {recurso.state !== "submitted" && (
+ <Grid item xs={12}>
+ <Card contrast={state.contrast}>
+ {/*adicionar funcionalidade ao botao de entrar*/}
+ <CommentsArea
+ recursoId={id}
+ handleSnackbar={handleSnackbar}
+ objType={recurso.object_type}
+ recurso={true}
/>
+ </Card>
+ </Grid>
+ )}
+ </Grid>
+
+ {recurso.state === "submitted" && checkAccessLevel("curator") && (
+ <AppBar
+ position="fixed"
+ className={classes.appBar}
+ style={state.contrast === "" ? { backgroundColor: "white" } : { backgroundColor: "black", borderTop: "1px solid white" }}
+ >
+ <StyledAppBarContainer contrast={state.contrast}>
+ <div className="container">
+ <div className="botoes">
+ <ButtonAvaliarRecurso
+ contrast={state.contrast}
+ callback={() => {
+ handleModalCuradoria(true);
+ }}
+ />
+ </div>
</div>
- </div>
- </StyledAppBarContainer>
- </AppBar>
- )}
- </>
- )}
- </Background>
- </React.Fragment>
- );
+ </StyledAppBarContainer>
+ </AppBar>
+ )}
+ </>
+ )}
+ </Background>
+ </React.Fragment>
+ );
}
const useStyles = makeStyles((theme) => ({
diff --git a/src/Pages/Search.js b/src/Pages/Search.js
index cedd26122f5acd816dd39c1912c79f21b1ea0774..89cff15f4d95264311bd2576200046d57616950d 100644
--- a/src/Pages/Search.js
+++ b/src/Pages/Search.js
@@ -36,13 +36,9 @@ import {
filtersStages,
filtersLanguages,
} from '../Components/SearchPageComponents/filters';
-import Snackbar from '@material-ui/core/Snackbar';
-import MuiAlert from '@material-ui/lab/Alert';
import { Store } from '../Store'
-function Alert(props) {
- return <MuiAlert elevation={6} variant="filled" {...props} />;
-}
+import SnackBar from '../Components/SnackbarComponent';
export default function Search() {
const history = useHistory();
@@ -430,16 +426,12 @@ export default function Search() {
return (
<div style={state.contrast === "" ? {} : { backgroundColor: "black" }}>
<MainPageError>
- <Snackbar
- open={snackInfo.open}
- autoHideDuration={6000}
- onClose={handleCloseSnack}
- anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
- >
- <Alert onClose={handleCloseSnack} severity={snackInfo.severity}>
- {snackInfo.text}
- </Alert>
- </Snackbar>
+ <SnackBar
+ snackbarOpen={snackInfo.open}
+ handleClose={handleCloseSnack}
+ severity={snackInfo.severity}
+ text={snackInfo.text}
+ />
<Error contrast={state.contrast} />
</MainPageError>
</div>
@@ -448,16 +440,12 @@ export default function Search() {
return (
<div style={state.contrast === "" ? {} : { backgroundColor: "black" }}>
<MainPage>
- <Snackbar
- open={snackInfo.open}
- autoHideDuration={6000}
- onClose={handleCloseSnack}
- anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
- >
- <Alert onClose={handleCloseSnack} severity={snackInfo.severity}>
- {snackInfo.text}
- </Alert>
- </Snackbar>
+ <SnackBar
+ snackbarOpen={snackInfo.open}
+ handleClose={handleCloseSnack}
+ severity={snackInfo.severity}
+ text={snackInfo.text}
+ />
<StyledBreadCrumbs contrast={state.contrast}>
<Link to='/'>Página Inicial</Link>
<span>Busca</span>