Add .studentEditContainer and .editForm to the StudentPage.module.css…

…. Add width 100% to Stack for form. Add padding to .studentEditContainer to match design.
sfbrigade · Nov 3, 2023 · 2fcf17e · 2fcf17e
1 parent 6f386ca
commit 2fcf17e
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 8 deletions.
diff --git a/src/pages/students/[student_id].tsx b/src/pages/students/[student_id].tsx
@@ -222,15 +222,18 @@ const ViewStudentPage = () => {
       </Container>
 
       {viewState === VIEW_STATES.EDIT ? (
-        <Stack gap={0.5} sx={{ justifyContent: "center" }}>
-          <form id="edit" onSubmit={handleEditStudent}>
+        <Stack gap={0.5} sx={{ width: "100%" }}>
+          <form
+            className={$StudentPage.editForm}
+            id="edit"
+            onSubmit={handleEditStudent}
+          >
             <Stack gap={0.5}>
               <Container
                 className={$StudentPage.studentEditContainer}
                 sx={{
                   display: "grid",
                   gridTemplateColumns: "200px 30px 300px",
-                  padding: "8px 0px",
                 }}
               >
                 <label>First Name</label>
@@ -247,7 +250,6 @@ const ViewStudentPage = () => {
                 sx={{
                   display: "grid",
                   gridTemplateColumns: "200px 30px 300px",
-                  padding: "8px 0px",
                 }}
               >
                 <label>Last Name</label>
@@ -264,7 +266,6 @@ const ViewStudentPage = () => {
                 sx={{
                   display: "grid",
                   gridTemplateColumns: "200px 30px 300px",
-                  padding: "8px 0px",
                 }}
               >
                 <label>Grade</label>
@@ -281,7 +282,6 @@ const ViewStudentPage = () => {
                 sx={{
                   display: "grid",
                   gridTemplateColumns: "200px 30px 300px",
-                  padding: "8px 0px",
                 }}
               >
                 <label>Email</label>
@@ -294,7 +294,6 @@ const ViewStudentPage = () => {
                 />
               </Container>
             </Stack>
-            {/* <button type="submit">Submit</button> */}
           </form>
 
           <Container sx={{ marginTop: "2rem" }}>

diff --git a/src/styles/StudentPage.module.css b/src/styles/StudentPage.module.css
@@ -7,7 +7,7 @@
 .studentEditContainer {
   background-color: #ffffff;
   border-radius: 10px;
-  padding: 0.5rem;
+  padding: 20px 50px;
 }
 
 .displayBox {
@@ -31,6 +31,10 @@
   display: flex;
 }
 
+.editForm {
+  width: 100%;
+}
+
 .singleInfoArea {
   padding: 10px 0;
   text-align: center;