CHG Assignment Card (#256)

web/src/Components/Public/Assignments/AssignmentCardV2/AssignmentCardV2.jsx

@@ -1,27 +1,67 @@
 import React from 'react';
-
+import {useHistory} from 'react-router-dom';
 import Card from '@material-ui/core/Card';
 import CardContent from '@material-ui/core/CardContent';
 import CardActions from '@material-ui/core/CardActions';
 import CardActionArea from '@material-ui/core/CardActionArea';
 import Typography from '@material-ui/core/Typography';
 import Button from '@material-ui/core/Button';
+import Box from '@material-ui/core/Box';
+import clsx from 'clsx';
 
 import {useStyles} from './AssignmentCardV2.styles';
 
-const AssignmentCard = ({
+
+const AssignmentCardV2 = ({
   id,
   name,
   due_date,
   course,
+  repo_url,
 }) => {
+  const history = useHistory();
   const classes = useStyles();
-
+  const due_days = Math.round((new Date(due_date) - new Date())/(1000*3600*24));
   return (
-    <div>
 
-    </div>
+    <Box className={classes.asignmentContainer}>
+      {due_days > 0 &&
+        <Box
+          className={
+            clsx(classes.dueBadge,
+              due_days > 7 ? classes.greenBadge :due_days <= 5 && due_days > 3 ? classes.orangeBadge : classes.redBadge)
+          }
+        >
+          <Typography className={classes.dueDate} align='center'>
+            {`${due_days} ${due_days == 1 ? 'day' : 'days'}`} remaining
+          </Typography>
+        </Box>
+      }
+      <Typography className={classes.assignmentName}>{name}</Typography>
+      <Typography className={classes.courseName}>{course.name}</Typography>
+      <Box className={classes.courseActionsContainer}>
+        <Button
+          onClick = {() => {
+            history.push(`/courses/assignment?assignmentId=${id}`);
+          }}
+          className={classes.openCourseButton}
+        >
+            Open Assignment
+        </Button>
+        <Button
+          onClick = {() => {
+            history.push(repo_url);
+          }}
+          className={classes.viewRepoButon}
+        >
+          View Repo
+        </Button>
+      </Box>
+
+    </Box>
+
   );
 };
 
-export default AssignmentCard;
+
+export default AssignmentCardV2;

web/src/Components/Public/Assignments/AssignmentCardV2/AssignmentCardV2.styles.jsx

@@ -1,7 +1,70 @@
 import {makeStyles} from '@material-ui/core/styles';
 
 export const useStyles = makeStyles((theme) => ({
-  courseCardContainer: {
-    minWidth: '300px',
+  asignmentContainer: {
+    position: 'relative',
+    color: theme.palette.white,
+    flexGrow: 1,
+    minWidth: 275,
+    maxWidth: 280,
+    backgroundColor: theme.palette.dark.blue['200'],
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+    padding: `${theme.spacing(2.5)}px`,
+    borderRadius: `${theme.spacing(1.25)}px`,
+    margin: theme.spacing(5),
+  },
+  dueBadge: {
+    boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)',
+    position: 'absolute',
+    padding: `${theme.spacing(0.5)}px ${theme.spacing(1.5)}px ${theme.spacing(0.5)}px ${theme.spacing(1.5)}px`,
+    borderRadius: '3px',
+    top: -theme.spacing(2),
+    right: -theme.spacing(1),
+    flexGrow: 1,
+    minWidth: 100,
+    maxWidth: 150,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  dueDate: {
+    color: 'black',
+  },
+  greenBadge: {
+    backgroundColor: theme.palette.color.green,
+  },
+  redBadge: {
+    backgroundColor: theme.palette.color.red,
+  },
+  orangeBadge: {
+    backgroundColor: theme.palette.color.orange,
+  },
+  assignmentName: {
+    fontSize: '20px',
+  },
+  courseName: {
+    fontSize: '16px',
+    color: theme.palette.gray['200'],
+  },
+  courseActionsContainer: {
+    marginTop: '20px',
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    width: '100%',
+  },
+  openCourseButton: {
+    fontSize: '14px',
+    borderRadius: '3px',
+    backgroundColor: theme.palette.primary.main,
+    padding: '5px 10px 5px',
+  },
+  viewRepoButon: {
+    fontSize: '.8rem',
+    backgroundColor: theme.palette.dark.blue['0'],
+    marginLeft: '10px;',
+    color: theme.palette.gray['200'],
   },
 }));

web/src/Pages/Public/Assignments.jsx

@@ -4,7 +4,7 @@ import Grid from '@material-ui/core/Grid';
 import Grow from '@material-ui/core/Grow';
 import useQuery from '../../hooks/useQuery';
 
-import AssignmentCard from '../../Components/Public/Assignments/AssignmentCard';
+import AssignmentCardV2 from '../../Components/Public/Assignments/AssignmentCardV2/AssignmentCardV2';
 import axios from 'axios';
 import standardErrorHandler from '../../Utils/standardErrorHandler';
 import {useSnackbar} from 'notistack';
@@ -77,13 +77,7 @@ const Assignments = () => {
               style={{transformOrigin: '0 0 0'}}
               {...({timeout: 300 * (pos + 1)})}
             >
-              <AssignmentCard
-                assignment={assignment}
-                setSelectedTheia={setSelectedTheia}
-                runAssignmentPolling={assignment.id === pollingAssignmentId && runAssignmentPolling}
-                setRunAssignmentPolling={setRunAssignmentPolling}
-                setPollingAssignmentId={setPollingAssignmentId}
-              />
+              <AssignmentCardV2 {... assignment}/>
             </Grow>
           </Grid>
         ))}