added a test for single student overview and some styling/functionality for single student overview pages

Author: rmfay1

package-lock.json

@@ -30,6 +30,7 @@
     "formik": "^2.2.6",
     "get-video-id": "^3.2.0",
     "graphql": "^15.5.0",
+    "history": "^5.0.0",
     "react": "^17.0.2",
     "react-bootstrap": "^1.5.2",
     "react-dom": "^17.0.2",

package.json

@@ -8,6 +8,8 @@ import SingleStudentOverview from '../SingleStudentOverview/SingleStudentOvervie
 import SingleStudentMasteryOverview from '../SingleStudentMasteryOverview/SingleStudentMasteryOverview';
 import CourseHome from '../CourseHome/CourseHome';
 import SingleTargetOverview from '../SingleTargetOverview/SingleTargetOverview';
+import SingleMissionOverview from '../SingleStudentOverview/SingleMissionOverview';
+
 import TaskView from '../../Screens/TaskView/TaskView';
 import ClassMastery from '../../Screens/ClassMastery/ClassMastery';
 import './Content.css';
@@ -40,6 +42,9 @@ export default function Content() {
             <Route path="/singleTargetOverview">
                <SingleTargetOverview />
             </Route>
+            <Route path="/singleMissionOverview/:name">
+               <SingleMissionOverview />
+            </Route>
             <Route path="/viewTask">
                <TaskView taskId="90e0c730e56" />
             </Route>

src/Components/Content/Content.tsx

@@ -8,8 +8,8 @@ import Collapse from '@material-ui/core/Collapse';
 import ExpandLess from '@material-ui/icons/ExpandLess';
 import ExpandMore from '@material-ui/icons/ExpandMore';
 import { Link } from 'react-router-dom';
+import { Divider } from '@material-ui/core';
 import LinearProgressWithLabel from './LinearProgressWithLabel';
-import ObjectiveDropDown from './ObjectiveDropDown';
 import { MissionSubMission } from '../../interfaces/MissionSubMission';
 import { TaskStats } from '../../__generated__/types';
 
@@ -29,12 +29,8 @@ const useStyles = makeStyles((theme: Theme) =>
    })
 );
 
-const PaddedDiv = styled.div`
-   padding-left: 10px;
-`;
-
 const DoublePaddedDiv = styled.div`
-   padding-left: 30px;
+   padding-left: 40px;
    width: 100%;
    justify-content: left;
 `;
@@ -59,23 +55,14 @@ export default function MissionDropDown({ name, progress }: MissionDropDownProps
    const TARGET_PERCENT = 50;
 
    return (
-      <List component="nav" aria-labelledby="nested-list-subheader" className={classes.root}>
-         <PaddedDiv>
-            <ListItem
-               button
-               onClick={() => handleClick(open, setOpen)}
-               style={{
-                  borderTop: '1px',
-                  borderBottom: '1px',
-                  borderColor: '#C2D2FC',
-                  borderStyle: 'solid',
-               }}
-            >
-               {open ? <ExpandLess /> : <ExpandMore />}
-               <ListItemText primary={name} />
-               <LinearProgressWithLabel className={classes.progressBar} value={TARGET_PERCENT} />
-            </ListItem>
-         </PaddedDiv>
+      <List component="div" disablePadding>
+         <ListItem button onClick={() => handleClick(open, setOpen)}>
+            {open ? <ExpandLess /> : <ExpandMore />}
+            <ListItemText primary={name} />
+            <LinearProgressWithLabel className={classes.progressBar} value={TARGET_PERCENT} />
+         </ListItem>
+
+         <Divider orientation="horizontal" />
          <Collapse in={open} timeout="auto" unmountOnExit>
             {progress.map((task: TaskStats) => (
                <Link to="/viewTask">

src/Components/LinearProgressWithLabel/MissionDropDown.tsx

@@ -54,7 +54,7 @@ export default function TargetDropDown({ name, tasks }: ObjectiveDropDownProps)
    const OBJECTIVE_PERCENT = 50;
 
    return (
-      <List component="div" disablePadding>
+      <List component="div" disablePadding style={{ justifyContent: 'right', width: '100%' }}>
          <ListItem button onClick={() => handleClick(open, setOpen)} divider>
             {open ? <ExpandLess /> : <ExpandMore />}
             <ListItemText primary={name} />

src/Components/LinearProgressWithLabel/ObjectiveDropDown.tsx

@@ -0,0 +1,4 @@
+.dashboard-container {
+   display: flex;
+   flex-wrap: wrap;
+}

src/Components/SingleStudentMasteryOverview/DashBoard.css

@@ -0,0 +1,35 @@
+.mission-card {
+   border: 1px solid gray;
+   margin: 12px;
+   box-sizing: border-box;
+   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
+   border-radius: 4px;
+   overflow: hidden;
+   background: #fff;
+   width: 262px;
+   height: 120px;
+   display: inline-block;
+   vertical-align: top;
+   margin: 36px 0 0 36px;
+   // padding: 5px;
+}
+
+.mission-card {
+   .mission-title {
+      font-size: 1.2em;
+      color: black;
+      text-overflow: ellipsis;
+      display: inline-block;
+   }
+
+   .mission-card-header {
+      display: block;
+      height: 30px;
+      background-color: #2f80ed;
+   }
+
+   .mission-card-body {
+      padding: 12px;
+      text-align: center;
+   }
+}