Merge pull request #150 from makeopensource/74-update-gradebook-styli…

…ng-instructor

74 update gradebook styling instructor

devU-client/src/assets/global.scss

@@ -61,17 +61,11 @@
 
     --background: white;
     --text-color: black;
-    --text-color2: white;
     --text-color-secondary: #363636;
     --focus: var(--blue);
 
-    --primary-lighter: #41a8f7;
-
     --primary: var(--purple);
 
-    // --primary: #D9D9D9;
-
-    --primary-darker: #054272;
     --secondary-lighter: #cfd1d1;
     --secondary: #a8abab;
     --secondary-darker: #686b6b;
@@ -98,14 +92,21 @@
     --input-field-background: var(--grey-lightest);
     --input-field-label: var(--grey);
 
+    --table-row-even: var(--grey-lighter);
+    --table-row-odd: var(--grey-lightest);
+
+    --red-text: var(--red);
+    --yellow-text: var(--yellow-dark);
+
     // Non theme colors - will not update with light/dark toggle
     --grey-lightest: #e5e5e5;
     --grey-lighter: #c5c5c5;
     --grey: #555555;
-    --grey-dark: #333333; 
+    --grey-darker: #444444;
+    --grey-darkest: #333333; 
 
-    //--blue-lighter: #78B7FF;
-    //--blue: #1F3D7A;
+    --blue-lighter: #78B7FF;
+    --blue: #1F3D7A;
 
     --red-lighter: #FFA3A3;
     --red: #8A2626;
@@ -117,7 +118,7 @@
     --green-lighter: #B0EEA2;
     --green: #306025;
 
-    --yellow-lighter: #ffeaa7;
+    --yellow-dark: #664600;
     --yellow: #F8D487;
 
     transition: background-color 150ms linear;
@@ -127,16 +128,9 @@
     --background: #1e1e1e;
     --text-color: #FFF;
     --text-color-secondary: #9b9b9b;
-    --blue-darker: #2767a3;
-    --primary-lighter: #3796bc;
-    --primary: #5c36c3;
-   // --primary-darker: rgb(92, 54, 195);
+    --focus: var(--blue-lighter);
 
-    //--primary: #7257EB;
-//     --primary-darker: #2F2363;
-
-    // --primary: #636666;
-    --primary-darker: #133441;
+    --primary: #7257EB;
 
     --secondary-lighter: #636666;
     --secondary: #3d3f3f;
@@ -161,6 +155,12 @@
     --input-field-background: var(--grey);
     --input-field-label: var(--grey-lightest);
 
+    --table-row-even: var(--grey-darker);
+    --table-row-odd: var(--grey-darkest);
+
+    --red-text: var(--red-lighter);
+    --yellow-text: var(--yellow);
+
     background-color: var(--background);
     color: var(--text-color);
   }

devU-client/src/assets/variables.scss

@@ -8,21 +8,16 @@
 $background: var(--background);
 $text-color: var(--text-color);
 $text-color-secondary: var(--text-color-secondary);
-$text-color2 : var(--text-color2);
-$primary-lighter: var(--primary-lighter);
-$primary: var(--primary);
-$primary-darker: var(--primary-darker);
-$blue-darker: var(--blue-darker);
-
 
+$primary: var(--primary);
 
 $secondary-lighter: var(--secondary-lighter);
 $secondary: var(--secondary);
 $secondary-darker: var(--secondary-darker);
 
 $list-item-background: var(--list-item-background);
 $list-item-background-hover: var(--list-item-background-hover);
-$list-item-subtext: var(--list-item-subtext); 
+$list-item-subtext: var(--list-item-subtext);
 
 $list-simple-item-background: var(--list-simple-item-background);
 $list-simple-item-background-hover: var(--list-simple-item-background-hover);
@@ -31,6 +26,9 @@ $list-simple-item-subtext: var(--list-item-subtext);
 $input-field-background: var(--input-field-background);
 $input-field-label: var(--input-field-label);
 
+$table-row-even: var(--table-row-even);
+$table-row-odd: var(--table-row-odd);
+
 $focus: var(--focus);
 
 // These variables WILL NOT update with dark vs light theme
@@ -41,21 +39,22 @@ $grey: var(--grey);
 $blue-lighter: var(--blue-lighter);
 $blue: var(--blue);
 
-
-
-
 $red-lighter: var(--red-lighter);
 $red: var(--red);
 
 $purple-lighter: var(--purple-lighter);
 $purple: var(--purple);
+$purple-darker: var(--purple-darker);
 
 $green-lighter: var(--green-lighter);
 $green: var(--green);
 
-$yellow-lighter: var(--yellow-lighter);
+$yellow-dark: var(--yellow-dark);
 $yellow: var(--yellow);
 
+$redText: var(--red-text);
+$yellowText: var(--yellow-text);
+
 // Non color CSS variables
 $border-radius: 3px;
 
@@ -72,4 +71,4 @@ $extreme: 780px;
   text-overflow: ellipsis;
   white-space: nowrap;
   word-wrap: normal;
-}
+}

devU-client/src/components/misc/globalToolbar.scss

@@ -16,8 +16,8 @@ $font-size: 16px;
   @extend .flex;
 
   text-decoration: none;
+  color: #FFF;
 
-  color: #d9d9d9;
   font-size: $font-size;
 
   //height: $bar-height;
@@ -40,23 +40,16 @@ $font-size: 16px;
   @extend .link;
   font-size: 40px;
   border-radius: 30px;
-  color: #D9D9D9;
   font-weight: 550;
   //font-size: 2em;
   //font-weight: bold;
 }
 
 .bar {
-  height: 80px;
-  background-color: $purple;
-  //height: $bar-height;
-
+  height: 60px;
+  background-color: $primary;
   font-size: 40px;
-  border-radius: 30px;
-  color: #D9D9D9;
-  font-weight: 550;
-
-
+  color: #FFF;
   @extend .flex;
   justify-content: space-between;
 }
@@ -73,7 +66,7 @@ $font-size: 16px;
 
 // Controls turning the menu options into a sidebar
 // As well as whether or not that sidebar is being shown
-@media (max-width: 300px) {
+@media (max-width: 410px) {
   .flex {
     gap: 1rem;
 

devU-client/src/components/pages/courses/courseDetailPage.scss

@@ -17,8 +17,8 @@
 
 
 .color{
-    background-color: $purple;
-    color: $text-color2;
+    background-color: $primary;
+    color: #FFF; // always white against purple bg
     width: 100%;
     padding: 20px;
     text-align: center;

devU-client/src/components/pages/gradebook/gradebookInstructorPage.tsx

@@ -1,15 +1,16 @@
-import React, {useEffect, useState} from 'react'
+import React, { useEffect, useState } from 'react'
 
-import {Assignment, AssignmentScore, User, UserCourse} from 'devu-shared-modules'
+import { Assignment, AssignmentScore, User, UserCourse } from 'devu-shared-modules'
 
 import PageWrapper from 'components/shared/layouts/pageWrapper'
 import LoadingOverlay from 'components/shared/loaders/loadingOverlay'
+import TextField from 'components/shared/inputs/textField'
 import ErrorPage from '../errorPage/errorPage'
 
 import RequestService from 'services/request.service'
 
 import styles from './gradebookPage.scss'
-import {useParams} from 'react-router-dom'
+import { useParams } from 'react-router-dom'
 
 type TableProps = {
     users: User[]
@@ -18,38 +19,46 @@ type TableProps = {
     assignmentScores: AssignmentScore[]
 }
 type RowProps = {
-    index: Number
+    index: number
     user: User
     userCourse: UserCourse
     assignments: Assignment[]
     assignmentScores: AssignmentScore[]
 }
 
-const TableRow = ({index, user, userCourse, assignments, assignmentScores}: RowProps) => {
+const TableRow = ({ index, user, userCourse, assignments, assignmentScores }: RowProps) => {
+    // style table row to alternating colors based on index odd?even
+    const rowClass = index % 2 === 0 ? 'evenRow' : 'oddRow';
+
+    // dont show row if dropped
+    if (userCourse.dropped) {
+        return (<></>)
+    }
+
     return (
-        <tr>
+        <tr className={styles[rowClass]}>
             <td>{index}</td>
             <td>{user.email}</td>
-            <td>{user.externalId}</td>
+            {/* <td>{user.externalId}</td> */}
             <td>{user.preferredName}</td>
-            <td>{userCourse.dropped.toString()}</td>
+            {/* <td>{userCourse.dropped.toString()}</td> */}
             {assignments.map(a => (
                 <td>{assignmentScores.find(as => as.assignmentId === a.id)?.score ?? 'N/A'}</td>
             ))}
         </tr>
     )
 }
 
-const GradebookTable = ({users, userCourses, assignments, assignmentScores}: TableProps) => {
+const GradebookTable = ({ users, userCourses, assignments, assignmentScores }: TableProps) => {
     return (
-        <table>
-            <th>#</th> 
+        <table className={styles.instrGradesTable}>
+            <th>#</th>
             <th>Email</th>
-            <th>External ID</th>
+            {/* <th>External ID</th> */}
             <th>Preferred Name</th>
-            <th>Dropped</th>
+            {/* <th>Dropped</th> */}
             {assignments.map((a) => {
-                return ( <th>{a.name}</th> )
+                return (<th>{a.name}</th>)
             })}
             {users.map((u, index) => (
                 <TableRow
@@ -72,26 +81,26 @@ const GradebookInstructorPage = () => {
     const [userCourses, setUserCourses] = useState(new Array<UserCourse>()) //All user-course connections for the course
     const [assignments, setAssignments] = useState(new Array<Assignment>()) //All assignments in the course
     const [assignmentScores, setAssignmentScores] = useState(new Array<AssignmentScore>()) //All assignment scores for assignments in the course
-    
-    const { courseId } = useParams<{courseId: string}>()
-    
+
+    const { courseId } = useParams<{ courseId: string }>()
+
     useEffect(() => {
         fetchData()
-      }, [])
-    
+    }, [])
+
     const fetchData = async () => {
         try {
             const userCourses = await RequestService.get<UserCourse[]>(`/api/course/${courseId}/user-courses/`)
             setUserCourses(userCourses)
 
             const users = await RequestService.get<User[]>(`/api/users/course/${courseId}`)
             setUsers(users)
-            
-            const assignments = await RequestService.get<Assignment[]>( `/api/course/${courseId}/assignments` )
+
+            const assignments = await RequestService.get<Assignment[]>(`/api/course/${courseId}/assignments`)
             assignments.sort((a, b) => (Date.parse(a.startDate) - Date.parse(b.startDate))) //Sort by assignment's start date
             setAssignments(assignments)
 
-            const assignmentScores = await RequestService.get<AssignmentScore[]>( `/api/course/${courseId}/assignment-scores` )
+            const assignmentScores = await RequestService.get<AssignmentScore[]>(`/api/course/${courseId}/assignment-scores`)
             setAssignmentScores(assignmentScores)
 
         } catch (error: any) {
@@ -104,13 +113,28 @@ const GradebookInstructorPage = () => {
     if (loading) return <LoadingOverlay delay={250} />
     if (error) return <ErrorPage error={error} />
 
+    const handleStudentSearch = () => {
+
+    }
+
     return (
         <PageWrapper>
-            <div className={styles.header}>
-                <h1>Instructor Gradebook</h1>
-            </div>
-            <div>
-                <GradebookTable 
+            {/* <div className={styles.header}> */}
+            <h1>Instructor Gradebook</h1>
+            {/* </div> */}
+            <div className={styles.tableWrapper}>
+                <div className={styles.tableOptions}>
+                    <p>Key: <span>! = late</span>, <span>- = no submission</span></p>
+                    <div>
+                        <TextField
+                            onChange={handleStudentSearch}
+                            label='Search'
+                            id='preferredName'
+                            placeholder='search students'
+                        />
+                    </div>
+                </div>
+                <GradebookTable
                     users={users}
                     userCourses={userCourses}
                     assignments={assignments}