Student Modal Styling (#318)

* update modal styling to mirror DS and edit button font

* update header typography and update outline styling

* ran prettier

* update button padding to align with other containers

* run prettier

* re-add modalContent styling class

* reinstate env example file

* prevent render of IEP fields if null or undefined

* edit to CI workflow

---------

Co-authored-by: test <test@hannnahs-mbp.attlocal.net>
Co-authored-by: test <test@hannnahs-mbp.lan>
Co-authored-by: Katrina Connors <koktakatrina@gmail.com>

Author: 4 people

.env.example

@@ -17,4 +17,4 @@ S3_USER_UPLOADS_SECRET_ACCESS_KEY=minioadmin
 S3_USER_UPLOADS_BUCKET_NAME=compass-files
 
 EMAIL=no.reply.project.compass@gmail.com
-EMAIL_PASS=
+EMAIL_PASS=

.github/workflows/pr.yml

@@ -1,5 +1,5 @@
 name: PR
-on: [pull_request]
+on: [push]
 jobs:
   type-check:
     name: type-check

src/components/design_system/button/Button.module.css

@@ -9,6 +9,8 @@
   text-decoration: none;
   text-align: center;
   font-size: var(--base-size);
+  font-family: var(--quicksand);
+  font-weight: normal;
   text-transform: none;
   line-height: normal;
   letter-spacing: 0;

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

@@ -1,2 +1,74 @@
-/* PLACEHOLDER FOR DESIGN SYSTEMS COMPONENT CSS
-see notes in component file */
+.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%;
+  }
+}