From a05f276a887e001d5a93b479b44ce4105bd3567e Mon Sep 17 00:00:00 2001
From: Diego Cabiya <dvcabiya@gmail.com>
Date: Wed, 2 Apr 2025 17:22:47 -0400
Subject: [PATCH 1/3] added buttons for decrease/increase options, changed join
 course page styling

---
 devU-client/src/assets/global.scss            |  2 +-
 .../listItems/assignmentProblemListItem.tsx   |  2 -
 .../assignments/assignmentDetailPage.tsx      |  2 +-
 .../assignments/multipleChoiceModal.scss      | 35 ++++++++
 .../forms/assignments/multipleChoiceModal.tsx | 73 +++++++++--------
 .../components/pages/homePage/homePage.tsx    |  2 +-
 .../listPages/courses/coursesListPage.scss    | 82 ++++++++-----------
 .../listPages/courses/coursesListPage.tsx     | 17 ++--
 .../submissions/submissionDetailPage.tsx      |  4 +-
 .../components/utils/userOptionsDropdown.tsx  |  8 +-
 10 files changed, 127 insertions(+), 100 deletions(-)
 create mode 100644 devU-client/src/components/pages/forms/assignments/multipleChoiceModal.scss

diff --git a/devU-client/src/assets/global.scss b/devU-client/src/assets/global.scss
index 912d4282..5a5bf92b 100644
--- a/devU-client/src/assets/global.scss
+++ b/devU-client/src/assets/global.scss
@@ -206,7 +206,7 @@
     --input-field-background: #fff;
     --input-field-label: var(--grey);
 
-    --table-row-even: var(--grey-lighter);
+    --table-row-even: var(--background);
     --table-row-odd: var(--grey-lightest);
 
     --red-text: var(--red);
diff --git a/devU-client/src/components/listItems/assignmentProblemListItem.tsx b/devU-client/src/components/listItems/assignmentProblemListItem.tsx
index 50c59b8c..2bea4fbe 100644
--- a/devU-client/src/components/listItems/assignmentProblemListItem.tsx
+++ b/devU-client/src/components/listItems/assignmentProblemListItem.tsx
@@ -49,7 +49,6 @@ const AssignmentProblemListItem = ({problem, handleChange, disabled}: Props) =>
     if (type == "Text") {
         return (
         <div key={problem.id} className={styles.problem}>
-            <div>{type}</div>
             <h4 className={styles.problem_header}>{problem.problemName}</h4>
             <input className={styles.textField}
                 type='text'
@@ -67,7 +66,6 @@ const AssignmentProblemListItem = ({problem, handleChange, disabled}: Props) =>
         }
         return (
             <div key={problem.id} className={styles.problem}>
-                            <div>{type}</div>
                 <h4 className={styles.problem_header}>{problem.problemName}</h4>
                 {Object.keys(options).map((key : string) => (
                     <label key={key} className={styles.mcqLabel} style={disabled ? {cursor: 'default'} : undefined}>
diff --git a/devU-client/src/components/pages/assignments/assignmentDetailPage.tsx b/devU-client/src/components/pages/assignments/assignmentDetailPage.tsx
index 6e414363..f14dd59a 100644
--- a/devU-client/src/components/pages/assignments/assignmentDetailPage.tsx
+++ b/devU-client/src/components/pages/assignments/assignmentDetailPage.tsx
@@ -201,7 +201,7 @@ const AssignmentDetailPage = () => {
         <PageWrapper>
             <div className={styles.header}>
                 <h1 style={{gridColumnStart:2}}>Submit Assignment</h1> 
-                <button style={{marginLeft:'auto'}} className='btnPrimary' onClick={() => {history.goBack()}}>Back to Course</button>
+                <button style={{marginLeft:'auto'}} className='btnPrimary' onClick={() => {history.push(`/course/${courseId}`)}}>Back to Course</button>
             </div>
 
             <div className={styles.details}>
diff --git a/devU-client/src/components/pages/forms/assignments/multipleChoiceModal.scss b/devU-client/src/components/pages/forms/assignments/multipleChoiceModal.scss
new file mode 100644
index 00000000..7e18857e
--- /dev/null
+++ b/devU-client/src/components/pages/forms/assignments/multipleChoiceModal.scss
@@ -0,0 +1,35 @@
+
+@import 'variables';
+
+.btn{
+    background-color: var(--btn-secondary-background);
+    color: var(--btn-secondary-text);
+    border: 2px solid var(--btn-secondary-border);
+    font-weight: 700;
+    min-width: 20px;
+    &:hover {
+      background-color: var(--hover-lighter);
+    }
+    &:active{
+        background-color: #c9bef9;
+    }
+    &:disabled{
+        opacity: 50%;
+        cursor: not-allowed;
+    }
+}
+.addButton{
+    border-top-left-radius: 5px;
+    border-bottom-left-radius: 5px;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    border-right: 1px solid var(--btn-secondary-border);;
+}
+
+.subtractButton{
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    border-top-right-radius: 5px;
+    border-bottom-right-radius: 5px;
+    border-left: 1px solid var(--btn-secondary-border);;
+}
\ No newline at end of file
diff --git a/devU-client/src/components/pages/forms/assignments/multipleChoiceModal.tsx b/devU-client/src/components/pages/forms/assignments/multipleChoiceModal.tsx
index 31b44590..5a48f9f2 100644
--- a/devU-client/src/components/pages/forms/assignments/multipleChoiceModal.tsx
+++ b/devU-client/src/components/pages/forms/assignments/multipleChoiceModal.tsx
@@ -5,6 +5,7 @@ import { SET_ALERT } from 'redux/types/active.types'
 import { useActionless } from 'redux/hooks'
 import RequestService from 'services/request.service'
 import Modal from 'components/shared/layouts/modal'
+import styles from './multipleChoiceModal.scss'
 
 interface Props {
     open: boolean;
@@ -15,7 +16,11 @@ const MultipleChoiceModal = ({ open, onClose }: Props) => {
     const [setAlert] = useActionless(SET_ALERT)
     const { assignmentId } = useParams<{ assignmentId: string }>()
     const { courseId } = useParams<{ courseId: string }>()
-    const [options, setOptions] = useState({})
+    const [options, setOptions] = useState({
+        a: '',
+        b: '',
+        c: ''
+    })
     const [formData, setFormData] = useState({
         type: 'MCQ-mult',
         title: '',
@@ -77,7 +82,7 @@ const MultipleChoiceModal = ({ open, onClose }: Props) => {
         closeModal()
     }
 
-    const resetData = () => { // reset data whenever question submitted/hits error, so data is not carried over, shows erroneous messages
+    const resetData = () => { // reset data whenever question submitted/hits error, so data is not carried over next time modal opened and potentially result in text not inputted being assigned
         setFormData({
             type: 'MCQ-mult',
             title: '',
@@ -132,6 +137,22 @@ const MultipleChoiceModal = ({ open, onClose }: Props) => {
         
     }
 
+    const getPlaceholder = (key: string) => {
+        const choices = new Map([['a', 'e.g. Java'], 
+            ['b', 'e.g. Python'],
+            ['c', 'e.g. C'],
+            ['d', 'e.g. JavaScript'],
+            ['e', 'e.g. MATLAB...?']])
+        return choices.get(key)
+    }
+
+    const increaseOptions = () => {
+        const insert = Object.keys(options).length
+        const index = String.fromCharCode("a".charCodeAt(0) + insert)
+        setOptions(prevState => ({...prevState, [index]: ''}))
+    }
+
+
     const switchBoxType = (e: React.ChangeEvent<HTMLInputElement>) => {
         const newState = e.target.checked
         if (newState === true) { // if box checked, then we're only accepting one answer, switch inputs to radio.
@@ -160,37 +181,25 @@ const MultipleChoiceModal = ({ open, onClose }: Props) => {
                     placeholder='e.g. What is the best programming language?' />
             </div>
             <div className="input-group" style={{gap: '5px'}} >
-                <label>Answer Choices:</label>
-                <div className="input-group" style={{flexDirection:"row", alignItems:"center", width: '100%'}}>
-                    <label>a.</label>
-                    <input type='text' id="a" onChange={handleQuestionTextChange} style={{width:'100%'}}
-                    placeholder='e.g. Java' />
-                    <input type={`${boxType}`} id="a" onChange={handleCorrectAnswerChange} name="correct"/>
-                </div>
-                <div className="input-group" style={{flexDirection:"row", alignItems:"center"}}>
-                    <label>b.</label>
-                    <input type="text" id="b" onChange={handleQuestionTextChange} style={{width:'100%'}}
-                    placeholder='e.g. Python' />
-                    <input type={`${boxType}`} id="b" onChange={handleCorrectAnswerChange} name="correct"/>
-                </div>
-                <div className="input-group" style={{flexDirection:"row", alignItems:"center"}}>
-                    <label>c.</label>
-                    <input type="text" id="c" onChange={handleQuestionTextChange} style={{width:'100%'}}
-                    placeholder='e.g. C' />
-                    <input type={`${boxType}`} id="c" onChange={handleCorrectAnswerChange} name="correct"/>
-                </div>
-                <div className="input-group" style={{flexDirection:"row", alignItems:"center"}}>
-                    <label>d.</label>
-                    <input type="text" id="d" onChange={handleQuestionTextChange} style={{width:'100%'}}
-                    placeholder='e.g. JavaScript' />
-                    <input type={`${boxType}`} id="d" onChange={handleCorrectAnswerChange} name="correct"/>
-                </div>
-                <div className="input-group" style={{flexDirection:"row", alignItems:"center"}}>
-                    <label>e.</label>
-                    <input type="text" id="e" onChange={handleQuestionTextChange} style={{width:'100%'}}
-                    placeholder='e.g. ...MATLAB?' />
-                    <input type={`${boxType}`} id="e" onChange={handleCorrectAnswerChange} name="correct"/>
+                <div style={{display:'flex', justifyContent:'space-between'}}>
+                    <label>Answer Choices:</label> 
+                    <div>
+                        <button 
+                        className={`${styles.btn} ${styles.addButton}`} 
+                        id='add'
+                        onClick={increaseOptions}
+                        disabled={Object.keys(options).length >= 5}>+</button>
+                        <button className={`${styles.btn} ${styles.subtractButton}`} id='subtract'>-</button>
+                    </div>
                 </div>
+                
+                {Object.entries(options).map(([key, text]) => 
+                <div className="input-group" style={{flexDirection:"row", alignItems:"center", width: '100%'}}>
+                    <label>{key}.</label>
+                    <input type='text' id={key} value={text} onChange={handleQuestionTextChange} style={{width:'100%'}}
+                    placeholder={getPlaceholder(key)} />
+                    <input type={`${boxType}`} id={key} onChange={handleCorrectAnswerChange} name="correct"/>
+                </div>)}
             </div>
             <div style={{display:'flex', alignItems: 'center'}}>
                 <input type='checkbox' onChange={switchBoxType}/><label>Allow only one answer</label>
diff --git a/devU-client/src/components/pages/homePage/homePage.tsx b/devU-client/src/components/pages/homePage/homePage.tsx
index 545a70a7..317ec662 100644
--- a/devU-client/src/components/pages/homePage/homePage.tsx
+++ b/devU-client/src/components/pages/homePage/homePage.tsx
@@ -113,7 +113,7 @@ const HomePage = () => {
                         <UserCourseListItem course={course} assignments={assignments.get(course)} key={course.id} />
                     </div>
                 ))}
-                {enrollCourses.length === 0 && instructorCourses.length == 0 && <div className='no_items'>You do not have current enrollment yet</div>}
+                {enrollCourses.length === 0 && instructorCourses.length == 0 && <div className='no_items'>No current courses</div>}
             </div>
 
             <h2 className={styles.courses_heading}>Completed Courses</h2>
diff --git a/devU-client/src/components/pages/listPages/courses/coursesListPage.scss b/devU-client/src/components/pages/listPages/courses/coursesListPage.scss
index 490f8c6d..fd55cfca 100644
--- a/devU-client/src/components/pages/listPages/courses/coursesListPage.scss
+++ b/devU-client/src/components/pages/listPages/courses/coursesListPage.scss
@@ -2,9 +2,7 @@
 
 .coursesListPage {
   font-family: $font-family;
-  background-color: $background;
   color: $text-color;
-  min-height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -49,52 +47,41 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    width: 90%;
-    max-width: 1000px;
+    width: 100%;
     margin-bottom: 20px;
     gap: 12px;
 
     input {
       flex-grow: 1;
       padding: 10px;
-      border: 1px solid $input-border;
+      border: 2px solid #999;
       background-color: $input-field-background;
       color: $text-color;
       border-radius: 12px;
-      font-size: 1rem;
-    }
+      width: 100%;
+      max-width: 1000px;
 
-    button {
-      padding: 10px 16px;
-      background-color: $primary;
-      color: white;
-      border: none;
-      border-radius: 12px;
       font-size: 1rem;
-      font-weight: bold;
-      cursor: pointer;
-      transition: 0.2s;
-
     }
-
-    .joinWithCodeButton {
-      margin-left: auto; 
-      background-color: $primary;
+    .far_button{
+      margin-left:auto;
     }
+
+    
   }
 
   /* Table Styling */
   .tableContainer {
-    width: 96%;
-    max-width: 1200px;
-    margin: 10px auto;
-    border-radius: 8px;
+    width: 100%;
+    margin: 10px 20px;
+    border-radius: 10px;
     overflow: hidden;
 
     table {
         width: 100%;
         border-collapse: collapse;
-
+        border: 2px solid $primary;
+        border-radius: 10px;
         th, td {
             text-align: center;
             padding: 12px;
@@ -108,41 +95,34 @@
             text-transform: capitalize;
         }
 
+        tr{
+          background-color: $primary;
+        }
+
         tr:nth-child(even) {
+          td{
             background-color: $table-row-even;
+          } 
         }
-
+        
         tr:nth-child(odd) {
+          td{
             background-color: $table-row-odd;
+          } 
         }
 
-        tr:hover {
-            background-color: $list-item-background-hover;
+        tr:last-of-type{
+          td:first-of-type{
+            border-bottom-left-radius: 11px 12px;
+          }
+          td:last-of-type{
+            border-bottom-right-radius: 11px 12px;
+          }
         }
     }
 
     /* Join Button */
-    .joinButton {
-        background-color: $primary;
-        color: white;
-        border: none;
-        padding: 10px 14px;
-        border-radius: 20px; /* ✅ Makes button rounded */
-        cursor: pointer;
-        font-size: 1rem;
-        font-weight: bold;
-        transition: 0.2s;
-        box-shadow: $box-shadow;
-
-        &:hover {
-            background-color: $secondary-darker;
-        }
 
-        &:disabled {
-            background-color: $grey-lighter; 
-            cursor: not-allowed;
-        }
-    }
   }
 
   /* Responsive Design */
@@ -155,6 +135,10 @@
     .searchSection {
       flex-direction: column;
       align-items: flex-start;
+      .far_button{
+        margin-left:0;
+      }
     }
+
   }
 }
diff --git a/devU-client/src/components/pages/listPages/courses/coursesListPage.tsx b/devU-client/src/components/pages/listPages/courses/coursesListPage.tsx
index 8fd4cd9e..b38ae081 100644
--- a/devU-client/src/components/pages/listPages/courses/coursesListPage.tsx
+++ b/devU-client/src/components/pages/listPages/courses/coursesListPage.tsx
@@ -7,7 +7,6 @@ import RequestService from 'services/request.service';
 import styles from './coursesListPage.scss';
 import { useAppSelector, useActionless } from "../../../../redux/hooks";
 import { SET_ALERT } from "../../../../redux/types/active.types";
-import Button from '@mui/material/Button';
 import { useHistory } from "react-router-dom";
 
 const UserCoursesListPage = () => {
@@ -85,7 +84,7 @@ const UserCoursesListPage = () => {
     return (
         <PageWrapper>
             <div className={styles.coursesListPage}>
-                <h1 className={styles.pageTitle}>Join Course</h1>
+                <h2 className={styles.pageTitle}>Join Course</h2>
                 <div className={styles.searchSection}>
                     <input
                         type="text"
@@ -93,10 +92,10 @@ const UserCoursesListPage = () => {
                         value={searchQuery}
                         onChange={(e) => setSearchQuery(e.target.value)}
                     />
-                    <button className={styles.searchButton}>Search</button>
-                    <button className={styles.joinWithCodeButton} onClick={() => history.push("/join-course")}>
+                    <button className='btnPrimary'>Search</button>
+                    <button className={`btnSecondary ${styles.far_button}`} onClick={() => history.push("/join-course")}>
                         Join with Code
-                        </button>
+                    </button>
 
                 </div>
 
@@ -121,14 +120,14 @@ const UserCoursesListPage = () => {
                                         {/* <td>{course.instructor}</td> */}
                                         <td>{course.semester}</td> 
                                         <td>
-                                            <Button 
-                                                variant="contained"
-                                                className={styles.joinButton}
+                                            <button 
+                                                className='btnPrimary'
+                                                style={{width: "100%"}} 
                                                 onClick={() => course.id !== undefined && handleJoinCourse(course.id)}
                                                 disabled={joinedCourses.has(course.id ?? -1)} // ✅ Fix: Prevents undefined issues
                                             >
                                                 {joinedCourses.has(course.id ?? -1) ? "Joined" : "Join Course"}
-                                            </Button>
+                                            </button>
                                         </td>
                                     </tr>
                                 ))
diff --git a/devU-client/src/components/pages/submissions/submissionDetailPage.tsx b/devU-client/src/components/pages/submissions/submissionDetailPage.tsx
index a330a715..c444e434 100644
--- a/devU-client/src/components/pages/submissions/submissionDetailPage.tsx
+++ b/devU-client/src/components/pages/submissions/submissionDetailPage.tsx
@@ -63,8 +63,8 @@ const SubmissionDetailPage = () => {
             <div className="pageHeader">
                 <h1>View Feedback</h1>
                 <button className="pageHeaderBtn" onClick={() => {
-                    history.push(`/course/${courseId}`)
-                }}>Back to Course</button>
+                    history.push(`/course/${courseId}/assignment/${assignmentId}`)
+                }}>Back to Assignment</button>
             </div>
             <div className={styles.container}>
                 <div className={styles.left}>
diff --git a/devU-client/src/components/utils/userOptionsDropdown.tsx b/devU-client/src/components/utils/userOptionsDropdown.tsx
index ee505f53..ea6bc010 100644
--- a/devU-client/src/components/utils/userOptionsDropdown.tsx
+++ b/devU-client/src/components/utils/userOptionsDropdown.tsx
@@ -29,7 +29,7 @@ const UserOptionsDropdown = () => {
           RequestService.delete(`/api/course/${courseId}/user-courses`).then(() => {
          
               setAlert({autoDelete: true, type: 'success', message: 'Course Dropped'})
-              history.push('/courses')
+              history.push('/')
 
       }).catch((error: Error) => {
           const message = error.message
@@ -49,9 +49,11 @@ const UserOptionsDropdown = () => {
                 <Link className={styles.option} to={`/user/${userId}/update`}>
                     Account
                 </Link>
-                <button className={styles.option} onClick={handleDropCourse}>
+                {/* In the first place this probably shouldn't just be hanging out in the dropdown and should be next in a menu page or something, but:
+                    For now, this courseId && check makes sure courses can only be dropped when you're actually in a course, not on the homepage */}
+                {courseId && <button className={styles.option} onClick={handleDropCourse}> 
                    Drop Course
-                </button>
+                </button>}
                 <button onClick={handleLogout} className={styles.option} style={{borderBottom: 'none',
                     borderBottomRightRadius: '7px',
                     borderBottomLeftRadius: '7px'

From b3d4354ab7c1cc40517748b40d0d56acc6a04d95 Mon Sep 17 00:00:00 2001
From: Diego Cabiya <dvcabiya@gmail.com>
Date: Wed, 2 Apr 2025 21:24:46 -0400
Subject: [PATCH 2/3] adding options works fine but need to add behavior for
 removal

---
 .../listItems/assignmentProblemListItem.scss  | 31 ++++++++++---------
 .../listItems/assignmentProblemListItem.tsx   |  6 ++--
 .../forms/assignments/multipleChoiceModal.tsx | 12 +++++--
 3 files changed, 31 insertions(+), 18 deletions(-)

diff --git a/devU-client/src/components/listItems/assignmentProblemListItem.scss b/devU-client/src/components/listItems/assignmentProblemListItem.scss
index 3fdca7e3..ce2c1c1c 100644
--- a/devU-client/src/components/listItems/assignmentProblemListItem.scss
+++ b/devU-client/src/components/listItems/assignmentProblemListItem.scss
@@ -65,7 +65,7 @@
 
       .checkbox {
         position: absolute;
-        transition: all .1s ease;
+        transition: all .2s ease;
         top: 3px;
         left: 0;
         height: 18px;
@@ -74,17 +74,19 @@
         border: 1px solid #999;
         border-radius: 5px;
         margin-left: 0;
+        .checkboxCheck {
+            opacity: 0;
+            width: 15px;
+            left: 2px;
+            top: 2px;
+            height: 15px;
+            border-radius: 5px;
+            color: #fff;
+            position: absolute;
+          }
       }
 
-      .checkboxCheck {
-        width: 15px;
-        height: 15px;
-        top: 2px;
-        left: 2px;
-        border-radius: 5px;
-        color: white;
-        position: absolute;
-      }
+      
 
 
     input:checked {
@@ -96,16 +98,17 @@
         ~ .checkbox{
             background-color: $primary;
             border: 1px solid $primary;
+            .checkboxCheck{
+                opacity: 100%;
+            }
         }
 
+       
+
         ~ .radio::after {
             display: block;
             border: 3px solid #fff;
         }
-        ~ .checkboxCheck{
-            display: block;
-        }
-        
     }
 
     &:last-of-type{
diff --git a/devU-client/src/components/listItems/assignmentProblemListItem.tsx b/devU-client/src/components/listItems/assignmentProblemListItem.tsx
index 2bea4fbe..764281ab 100644
--- a/devU-client/src/components/listItems/assignmentProblemListItem.tsx
+++ b/devU-client/src/components/listItems/assignmentProblemListItem.tsx
@@ -74,8 +74,10 @@ const AssignmentProblemListItem = ({problem, handleChange, disabled}: Props) =>
                         value={key}
                         onChange={handleChange} 
                         disabled={disabled ?? false}/> {options[key]}
-
-                        <span className={styles.checkbox}><FaIcon icon='check' className={styles.checkboxCheck}/></span>{/* custom checkbox */}
+                        
+                        <span className={styles.checkbox}>
+                                <FaIcon icon='check' className={styles.checkboxCheck}/>
+                        </span>{/* custom checkbox */}
                     </label>))}
             </div>)
     } else if(type == "MCQ-single") {
diff --git a/devU-client/src/components/pages/forms/assignments/multipleChoiceModal.tsx b/devU-client/src/components/pages/forms/assignments/multipleChoiceModal.tsx
index 5a48f9f2..483f67dc 100644
--- a/devU-client/src/components/pages/forms/assignments/multipleChoiceModal.tsx
+++ b/devU-client/src/components/pages/forms/assignments/multipleChoiceModal.tsx
@@ -152,6 +152,15 @@ const MultipleChoiceModal = ({ open, onClose }: Props) => {
         setOptions(prevState => ({...prevState, [index]: ''}))
     }
 
+    const decreaseOptions = () => { //fix this
+        const newState = {}
+        const oldKeys = Object.keys(options)
+        for (let i = 0; i < Object.keys(options).length - 1; i++){
+            newState[oldKeys.at(i)] = 
+        }
+
+    }
+
 
     const switchBoxType = (e: React.ChangeEvent<HTMLInputElement>) => {
         const newState = e.target.checked
@@ -186,10 +195,9 @@ const MultipleChoiceModal = ({ open, onClose }: Props) => {
                     <div>
                         <button 
                         className={`${styles.btn} ${styles.addButton}`} 
-                        id='add'
                         onClick={increaseOptions}
                         disabled={Object.keys(options).length >= 5}>+</button>
-                        <button className={`${styles.btn} ${styles.subtractButton}`} id='subtract'>-</button>
+                        <button className={`${styles.btn} ${styles.subtractButton}`}>-</button>
                     </div>
                 </div>
                 

From 2ddabbea8b055421f006f5d6e2a61e3c2dcaa38e Mon Sep 17 00:00:00 2001
From: Diego Cabiya <dvcabiya@gmail.com>
Date: Thu, 3 Apr 2025 13:17:38 -0400
Subject: [PATCH 3/3] now totally implemented, options can be increased up to
 10 and decreased to 2

---
 .../listItems/assignmentProblemListItem.tsx   |  4 +-
 .../assignments/assignmentDetailPage.scss     |  1 +
 .../pages/courses/courseDetailPage.scss       |  7 ++-
 .../pages/courses/courseDetailPage.tsx        |  4 +-
 .../forms/assignments/assignmentFormPage.tsx  |  8 ++-
 .../assignments/assignmentUpdatePage.tsx      |  1 -
 .../forms/assignments/multipleChoiceModal.tsx | 62 ++++++++++++-------
 .../components/shared/inputs/textDropDown.tsx | 16 ++---
 8 files changed, 66 insertions(+), 37 deletions(-)

diff --git a/devU-client/src/components/listItems/assignmentProblemListItem.tsx b/devU-client/src/components/listItems/assignmentProblemListItem.tsx
index 764281ab..42f06129 100644
--- a/devU-client/src/components/listItems/assignmentProblemListItem.tsx
+++ b/devU-client/src/components/listItems/assignmentProblemListItem.tsx
@@ -76,7 +76,7 @@ const AssignmentProblemListItem = ({problem, handleChange, disabled}: Props) =>
                         disabled={disabled ?? false}/> {options[key]}
                         
                         <span className={styles.checkbox}>
-                                <FaIcon icon='check' className={styles.checkboxCheck}/>
+                             <FaIcon icon='check' className={styles.checkboxCheck}/>
                         </span>{/* custom checkbox */}
                     </label>))}
             </div>)
@@ -92,7 +92,7 @@ const AssignmentProblemListItem = ({problem, handleChange, disabled}: Props) =>
                     <label key={key} className={styles.mcqLabel} style={disabled ? {cursor: 'default'} : undefined}>
                         <input id={problem.problemName} 
                         type='radio' 
-                        name='correct'
+                        name={`${problem.id}_answer`}
                         value={key}
                         onChange={handleChange} 
                         disabled={disabled ?? false}/> {options[key]}
diff --git a/devU-client/src/components/pages/assignments/assignmentDetailPage.scss b/devU-client/src/components/pages/assignments/assignmentDetailPage.scss
index dfe21f0d..5f17d045 100644
--- a/devU-client/src/components/pages/assignments/assignmentDetailPage.scss
+++ b/devU-client/src/components/pages/assignments/assignmentDetailPage.scss
@@ -34,6 +34,7 @@
     width: 100%;
     box-sizing: border-box;
     font-size: 16px;
+    transition: ease .2s background-color;
     background-color: $list-item-background-hover;
     border-radius: 20px
 }
diff --git a/devU-client/src/components/pages/courses/courseDetailPage.scss b/devU-client/src/components/pages/courses/courseDetailPage.scss
index 53437aa9..cbdd757d 100644
--- a/devU-client/src/components/pages/courses/courseDetailPage.scss
+++ b/devU-client/src/components/pages/courses/courseDetailPage.scss
@@ -121,8 +121,13 @@
     display: block;
     width: 100%;
     margin: 5px auto;
-    border-bottom: 1px solid #ddd;
+}
 
+.border{
+    border-bottom: 1px solid #ddd;
+    &:last-of-type{
+        border-bottom: none;
+    }
 }
 
 .due_end{
diff --git a/devU-client/src/components/pages/courses/courseDetailPage.tsx b/devU-client/src/components/pages/courses/courseDetailPage.tsx
index c0af9680..7f491fbc 100644
--- a/devU-client/src/components/pages/courses/courseDetailPage.tsx
+++ b/devU-client/src/components/pages/courses/courseDetailPage.tsx
@@ -133,9 +133,9 @@ const CourseDetailPage = () => {
                                             {category}
                                         </Typography>
                                     </CardContent>
-                                    <List disablePadding style={{backgroundColor:'var(--background)'}}>
+                                    <List disablePadding style={{backgroundColor:'var(--background)', transition: 'ease .2s background-color'}}>
                                         {categoryMap[category].map((assignment, index) => (
-                                            <ListItem key={index}  disablePadding>
+                                            <ListItem key={index}  disablePadding className={styles.border}>
                                                 <ListItemButton sx={{padding: 0}} onClick={() => {
                                                     history.push(`/course/${courseId}/assignment/${assignment.id}`)
                                                 }}>
diff --git a/devU-client/src/components/pages/forms/assignments/assignmentFormPage.tsx b/devU-client/src/components/pages/forms/assignments/assignmentFormPage.tsx
index 3f4580b5..10572092 100644
--- a/devU-client/src/components/pages/forms/assignments/assignmentFormPage.tsx
+++ b/devU-client/src/components/pages/forms/assignments/assignmentFormPage.tsx
@@ -141,9 +141,11 @@ const AddAssignmentModal = ({ open, onClose }: Props) => {
                 onChange={handleCategoryChange}
                 onCreate={handleCategoryCreate}
                 options={categoryOptions}
-                custom={{control: () => ({border:'none', padding:'3px 0'}),
-                        placeholder: () => ({color: '#555555'}),
-                        input: () => ({fontSize: '14px'}),
+                custom={{control: () => ({border:'none', padding:'3px 0', backgroundColor: 'var(--input-field-background)'}),
+                        placeholder: () => ({color: 'var(--input-field-label)'}),
+                        input: () => ({fontSize: '14px', backgroundColor: 'var(--input-field-background)'}),
+                        option: (_, state) => ({ backgroundColor: state.isFocused ? 'var(--grey-darker)' : 'var(--input-field-background)',}),
+                        menu: () => ({ backgroundColor: 'var(--input-field-background)', overflow:'hidden'}),
                         singleValue: () => ({fontSize: '14px'})}}
                 value={formData.categoryName ? {value: formData.categoryName, label: formData.categoryName} : undefined}/>
             </div>
diff --git a/devU-client/src/components/pages/forms/assignments/assignmentUpdatePage.tsx b/devU-client/src/components/pages/forms/assignments/assignmentUpdatePage.tsx
index 2caf5dbb..5bf4cf1f 100644
--- a/devU-client/src/components/pages/forms/assignments/assignmentUpdatePage.tsx
+++ b/devU-client/src/components/pages/forms/assignments/assignmentUpdatePage.tsx
@@ -124,7 +124,6 @@ const AssignmentUpdatePage = () => {
   useEffect(() => {RequestService.get(`/api/course/${courseId}/assignment/${assignmentId}/non-container-auto-graders`).then((res) => { setNonContainerAutograders(res) })}, [])
 
   useEffect(() => {RequestService.get(`/api/course/${courseId}/assignment/${assignmentId}/container-auto-graders`).then((res) => { setContainerAutograders(res) })}, [])
-  console.log(containerAutograders)
   useEffect(() => {RequestService.get(`/api/course/${courseId}/assignments`).then((res) => { setAssignments(res) })}, [formData])
 
   useEffect(() => {
diff --git a/devU-client/src/components/pages/forms/assignments/multipleChoiceModal.tsx b/devU-client/src/components/pages/forms/assignments/multipleChoiceModal.tsx
index 483f67dc..65e9b592 100644
--- a/devU-client/src/components/pages/forms/assignments/multipleChoiceModal.tsx
+++ b/devU-client/src/components/pages/forms/assignments/multipleChoiceModal.tsx
@@ -16,11 +16,7 @@ const MultipleChoiceModal = ({ open, onClose }: Props) => {
     const [setAlert] = useActionless(SET_ALERT)
     const { assignmentId } = useParams<{ assignmentId: string }>()
     const { courseId } = useParams<{ courseId: string }>()
-    const [options, setOptions] = useState({
-        a: '',
-        b: '',
-        c: ''
-    })
+    const [options, setOptions] = useState<Map<string,string>>(new Map<string,string>([['a',''],['b',''],['c','']]))
     const [formData, setFormData] = useState({
         type: 'MCQ-mult',
         title: '',
@@ -55,9 +51,10 @@ const MultipleChoiceModal = ({ open, onClose }: Props) => {
             correctString: formData.correctAnswer,
             score: Number(formData.maxScore),
             isRegex: formData.regex,
-            metadata: {type: formData.type, options: options},
+            metadata: {type: formData.type, options: Object.fromEntries(options)},
             createdAt: createdAt
         }
+        console.log(graderFormData)
 
         RequestService.post(`/api/course/${courseId}/assignment/${assignmentId}/assignment-problems`, problemFormData)
             .then(() => {
@@ -108,7 +105,10 @@ const MultipleChoiceModal = ({ open, onClose }: Props) => {
         const key = e.target.id
         const value = e.target.value
 
-        setOptions(prevState => ({ ...prevState, [key]: value }))
+        setOptions(prevState => {
+            const newMap = new Map(prevState)
+            newMap.set(key, value)
+            return newMap})
     }
 
     const handleCorrectAnswerChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -142,23 +142,40 @@ const MultipleChoiceModal = ({ open, onClose }: Props) => {
             ['b', 'e.g. Python'],
             ['c', 'e.g. C'],
             ['d', 'e.g. JavaScript'],
-            ['e', 'e.g. MATLAB...?']])
+            ['e', 'e.g. C++'],
+            ['f', 'e.g. Rust'],
+            ['g', 'e.g. OCaml'],
+            ['h', 'e.g. FORTRAN'],
+            ['i', 'e.g. COBOL'],
+            ['j', 'e.g. ...MATLAB?'],])
         return choices.get(key)
     }
 
     const increaseOptions = () => {
-        const insert = Object.keys(options).length
+        const insert = options.size
         const index = String.fromCharCode("a".charCodeAt(0) + insert)
-        setOptions(prevState => ({...prevState, [index]: ''}))
+        setOptions(prevState => {
+            const newMap = new Map(prevState)
+            newMap.set(index, '')
+            return newMap})
     }
 
-    const decreaseOptions = () => { //fix this
-        const newState = {}
-        const oldKeys = Object.keys(options)
-        for (let i = 0; i < Object.keys(options).length - 1; i++){
-            newState[oldKeys.at(i)] = 
-        }
-
+    const decreaseOptions = () => { 
+        const remove = options.size - 1 // gets index of last element, which we want to remove
+        const index = String.fromCharCode("a".charCodeAt(0) + remove) // translates that into a char to actually remove this element
+        setOptions(prevState => {
+            const newMap = new Map(prevState)
+            newMap.delete(index)
+            return newMap})
+        setFormData(prevState => { // make sure element getting removed is no longer in correctAnswer
+            const currentValue = prevState.correctAnswer || ""; 
+            let res = currentValue.replace(index, "")
+            res = res.split('').sort().join('') // makes selecting answers in any order correct
+            return {
+                ...prevState,
+                correctAnswer: res
+            };
+        });
     }
 
 
@@ -196,14 +213,17 @@ const MultipleChoiceModal = ({ open, onClose }: Props) => {
                         <button 
                         className={`${styles.btn} ${styles.addButton}`} 
                         onClick={increaseOptions}
-                        disabled={Object.keys(options).length >= 5}>+</button>
-                        <button className={`${styles.btn} ${styles.subtractButton}`}>-</button>
+                        disabled={options.size >= 10}>+</button>
+
+                        <button className={`${styles.btn} ${styles.subtractButton}`}
+                        onClick={decreaseOptions}
+                        disabled={options.size <= 2}>-</button>
                     </div>
                 </div>
                 
-                {Object.entries(options).map(([key, text]) => 
+                {[...options].map(([key, text]) => 
                 <div className="input-group" style={{flexDirection:"row", alignItems:"center", width: '100%'}}>
-                    <label>{key}.</label>
+                    <label style={{width: '15px'}}>{key}.</label>
                     <input type='text' id={key} value={text} onChange={handleQuestionTextChange} style={{width:'100%'}}
                     placeholder={getPlaceholder(key)} />
                     <input type={`${boxType}`} id={key} onChange={handleCorrectAnswerChange} name="correct"/>
diff --git a/devU-client/src/components/shared/inputs/textDropDown.tsx b/devU-client/src/components/shared/inputs/textDropDown.tsx
index 9f16abcc..0f9607e4 100644
--- a/devU-client/src/components/shared/inputs/textDropDown.tsx
+++ b/devU-client/src/components/shared/inputs/textDropDown.tsx
@@ -76,7 +76,7 @@ const TextDropdown = ({
       backgroundColor: background, 
       boxShadow: 'none',
       border: '2px solid #ccc',
-      borderRadius: '10px'
+      borderRadius: '10px',
     }),
 
     container: (provided) => ({ ...provided, 
@@ -92,10 +92,10 @@ const TextDropdown = ({
         }
         }),
 
-    placeholder: (provided) => ({ ...provided,
-        fontStyle:'italic',
-        color: '#9c9c9c',
-        margin: '0'
+    placeholder: (provided) => ({
+        ...provided,
+        color: '#ffffff',
+        
     }),
 
     control: (provided) => ({ ...provided, 
@@ -112,11 +112,13 @@ const TextDropdown = ({
     option: (provided, state) => ({
       ...provided,
       cursor: 'pointer',
-      color: 'var(--color)', 
+      color: textColor, 
       borderBottom: '1px solid #ccc',
+      width: 'inherit',
       backgroundColor: state.isFocused ? 'var(--list-item-background-hover)' : background,
       "&:last-of-type":{
-        borderBottom: 'none'
+        borderBottom: 'none',
+        
       }
     }),
   
