diff --git a/React-frontend/src/components/Admin/TaskCard.js b/React-frontend/src/components/Admin/TaskCard.js index 662906d..40f9180 100644 --- a/React-frontend/src/components/Admin/TaskCard.js +++ b/React-frontend/src/components/Admin/TaskCard.js @@ -9,14 +9,16 @@ import { Container, Typography, Button - } from '@material-ui/core'; +import Tooltip from '@mui/material/Tooltip'; +import CreateIcon from '@material-ui/icons/Create'; +import CheckCircleIcon from '@material-ui/icons/CheckCircle'; +import CheckCircleOutlineIcon from '@material-ui/icons/CheckCircleOutline'; import { useHistory } from 'react-router-dom'; import { useDispatch, useSelector } from 'react-redux'; import { updateTask } from '../../store/actions/admin'; - // Custom styles const useStyles = makeStyles((theme) => ({ root: { @@ -45,19 +47,22 @@ const useStyles = makeStyles((theme) => ({ bodyText: { fontSize: theme.spacing(1.4), fontWeight: '400', - marginBottom: theme.spacing(.3) + marginBottom: theme.spacing(1) + }, + icons: { + fontSize: '2.3vh' + }, + button: { + marginLeft: theme.spacing(1) } })) - - function TaskCard({ id, title, description, due_on, is_completed }) { const classes = useStyles() const auth = useSelector(state => state.auth) const dispatch = useDispatch() const history = useHistory() - // toggle is_completed true of false function function toggleComplete(id, is_completed) { dispatch(updateTask(id, is_completed, history)) @@ -93,17 +98,52 @@ function TaskCard({ id, title, description, due_on, is_completed }) { } - {/* Button to mask task completed */} { (auth.user.role === "admin") ? - ( + + ) : ( + + + + ) } - ) + {/* Task Edit Button */} + + + + + + ) : null } diff --git a/React-frontend/src/pages/dashboard/Dashboard.js b/React-frontend/src/pages/dashboard/Dashboard.js index 2875b51..ecb1038 100644 --- a/React-frontend/src/pages/dashboard/Dashboard.js +++ b/React-frontend/src/pages/dashboard/Dashboard.js @@ -14,7 +14,7 @@ import { Box, Grid } from '@material-ui/core'; -import { useDispatch, useSelector } from 'react-redux'; +import { useSelector } from 'react-redux'; import TaskCard from '../../components/Admin/TaskCard';