Resolution of any value error within [student_id] - Issue #334 (#351)

* renaming Modal import post file name change
>
>
Co-authored-by: Yun Whitman <savannahwhitman1@gmail.com>

* rename Modal for clarity and error resolution
>
>
Co-authored-by: Yun Whitman <savannahwhitman1@gmail.com>

* removing outdated test comment

Author: katconnors

src/components/design_system/modal/CompassModal.module.css

@@ -0,0 +1,74 @@
+.editForm {
+  width: 100%;
+}
+
+.modalContent {
+  position: absolute;
+  top: 25%;
+  left: 50%;
+  transform: translate(-50%);
+  width: 400;
+  background-color: white;
+  border: 1px solid #000;
+  border-radius: 10px;
+  box-shadow: 24;
+  padding: 3rem;
+}
+
+.editModalContent {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 80%;
+  height: auto;
+  background-color: white;
+  border: 1px solid var(--on-primary-container);
+  border-radius: 10px;
+  box-shadow: 24;
+  padding: 2rem;
+  color: var(--on-primary-container);
+  font-family: var(--inter);
+}
+
+.editModalHeader {
+  font-family: var(--quicksand);
+  font-weight: var(--semibold);
+  font-size: var(--h4);
+  text-align: center;
+}
+
+.editModalContainer {
+  background-color: #ffffff;
+  border-radius: 10px;
+  padding: 10px 20px;
+}
+
+.editModalTextfield {
+  width: 100%;
+}
+
+.editModalContainerButtons {
+  margin-top: 1rem;
+  padding: 10px 20px;
+}
+
+.editModalButtonWrap {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+
+/* Small Devices, Tablets */
+@media only screen and (min-width: 768px) {
+  .editModalContent {
+    width: 60%;
+  }
+}
+
+/* Medium Devices, Desktops */
+@media only screen and (min-width: 992px) {
+  .editModalContent {
+    width: 40%;
+  }
+}

src/pages/students/[student_id].tsx

@@ -10,7 +10,7 @@ import $Image from "../../styles/Image.module.css";
 import $button from "@/components/design_system/button/Button.module.css";
 import $Form from "../../styles/Form.module.css";
 import $input from "@/styles/Input.module.css";
-import $Modal from "@/components/design_system/modal/Modal.module.css";
+import $CompassModal from "../../components/design_system/modal/CompassModal.module.css";
 import $StudentPage from "../../styles/StudentPage.module.css";
 
 import * as React from "react";
@@ -159,51 +159,51 @@ const ViewStudentPage = () => {
           aria-labelledby="modal-modal-title"
           aria-describedby="modal-modal-description"
         >
-          <Box className={$Modal.editModalContent}>
-            <p id="modal-modal-title" className={$Modal.editModalHeader}>
+          <Box className={$CompassModal.editModalContent}>
+            <p id="modal-modal-title" className={$CompassModal.editModalHeader}>
               Editing {student?.first_name || "Student"}&apos;s Profile
             </p>
             <Typography id="modal-modal-description" sx={{ mt: 2 }}>
               <Stack gap={0.5} sx={{ width: "100%" }}>
                 <form
-                  className={$Modal.editForm}
+                  className={$CompassModal.editForm}
                   id="edit"
                   onSubmit={handleEditStudent}
                 >
                   <Stack gap={0.5}>
-                    <Container className={$Modal.editModalContainer}>
+                    <Container className={$CompassModal.editModalContainer}>
                       <TextField
-                        className={$Modal.editModalTextfield}
+                        className={$CompassModal.editModalTextfield}
                         label="First Name"
                         type="text"
                         name="firstName"
                         defaultValue={student?.first_name || ""}
                         required
                       />
                     </Container>
-                    <Container className={$Modal.editModalContainer}>
+                    <Container className={$CompassModal.editModalContainer}>
                       <TextField
-                        className={$Modal.editModalTextfield}
+                        className={$CompassModal.editModalTextfield}
                         label="Last Name"
                         type="text"
                         name="lastName"
                         defaultValue={student?.last_name || ""}
                         required
                       />
                     </Container>
-                    <Container className={$Modal.editModalContainer}>
+                    <Container className={$CompassModal.editModalContainer}>
                       <TextField
-                        className={$Modal.editModalTextfield}
+                        className={$CompassModal.editModalTextfield}
                         label="Email"
                         type="text"
                         name="email"
                         defaultValue={student?.email || ""}
                         required
                       />
                     </Container>
-                    <Container className={$Modal.editModalContainer}>
+                    <Container className={$CompassModal.editModalContainer}>
                       <TextField
-                        className={$Modal.editModalTextfield}
+                        className={$CompassModal.editModalTextfield}
                         label="Grade"
                         type="number"
                         name="grade"
@@ -213,9 +213,9 @@ const ViewStudentPage = () => {
                     </Container>
                     {activeIep != null && (
                       <div>
-                        <Container className={$Modal.editModalContainer}>
+                        <Container className={$CompassModal.editModalContainer}>
                           <TextField
-                            className={$Modal.editModalTextfield}
+                            className={$CompassModal.editModalTextfield}
                             label="IEP Start Date"
                             type="date"
                             name="start_date"
@@ -224,9 +224,9 @@ const ViewStudentPage = () => {
                             required
                           />
                         </Container>
-                        <Container className={$Modal.editModalContainer}>
+                        <Container className={$CompassModal.editModalContainer}>
                           <TextField
-                            className={$Modal.editModalTextfield}
+                            className={$CompassModal.editModalTextfield}
                             label="IEP End Date"
                             type="date"
                             name="end_date"
@@ -240,8 +240,8 @@ const ViewStudentPage = () => {
                   </Stack>
                 </form>
 
-                <Container className={$Modal.editModalContainerButtons}>
-                  <Box className={$Modal.editModalButtonWrap}>
+                <Container className={$CompassModal.editModalContainerButtons}>
+                  <Box className={$CompassModal.editModalButtonWrap}>
                     <Button
                       onClick={handleMainState}
                       className={`${$button.secondary}`}
@@ -344,7 +344,7 @@ const ViewStudentPage = () => {
         aria-labelledby="archiving-student"
         aria-describedby="archiving-current-student"
       >
-        <Box className={$Modal.modalContent}>
+        <Box className={$CompassModal.modalContent}>
           <p className={$StudentPage.centerText}>
             Are you sure you want to archive
           </p>
@@ -377,7 +377,7 @@ const ViewStudentPage = () => {
         aria-labelledby="create-student-iep"
         aria-describedby="modal for creating student iep"
       >
-        <Box className={$Modal.modalContent}>
+        <Box className={$CompassModal.modalContent}>
           <p className={$StudentPage.centerText}>Create an IEP for</p>
           <p className={$StudentPage.centerText}>
             <b>