update modal styling

app/profile/page.tsx

@@ -285,7 +285,7 @@ const Profile: React.FC = () => {
 const QR: React.FC<{ qrUrl: string | null }> = ({ qrUrl }) => {
     return (
         <>
-            <h2>Your QR Code</h2>
+            <h1>Your QR Code</h1>
             {qrUrl && <QRCodeSVG value={qrUrl} className={styles.qr} />}
         </>
     );

app/profile/styles.module.scss

@@ -103,9 +103,16 @@
     gap: 10px;
     align-items: center;
     justify-content: center;
+    width: calc(100% - 4rem);
+    min-height: calc(100% - (4rem + 6vw));
+    padding: calc(2rem + 6vw) 2rem;
+
+    @media screen and (max-width: 1152px) {
+        min-height: calc(100% - (4rem + 30vw));
+        padding: calc(2rem + 30vw) 2rem;
+    }
+
     width: 100%;
-    min-height: 100%;
-    padding: 2rem;
 }
 
 .modalContent p {
@@ -114,14 +121,27 @@
 
 .qr {
     width: 100%;
-    max-width: 600px;
+    max-width: 400px;
     height: auto;
 }
 
-.modalContent h2 {
+.modalContent h1 {
+    color: white;
+    font-size: 3vw;
+
+    @media screen and (max-width: 1152px) {
+        font-size: 6vw;
+    }
+}
+
+.modalContent p {
     color: white;
     margin-bottom: 10px;
-    font-size: 30px;
+    font-size: 2vw;
+
+    @media screen and (max-width: 1152px) {
+        font-size: 4vw;
+    }
 }
 
 .closeButton {

components/AcceptRSVPForm/AcceptRSVPForm.module.scss

@@ -1,6 +1,10 @@
 .container {
     width: 100%;
     height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 10%;
 }
 
 .form {
@@ -17,6 +21,11 @@
 
 .form h2 {
     color: white;
+    font-size: 2rem;
+
+    @media screen and (max-width: 1152px) {
+        font-size: 1.5rem;
+    }
 }
 
 .form label {

components/AcceptRSVPForm/AcceptRSVPForm.tsx

@@ -54,6 +54,7 @@ const AcceptRSVPForm: React.FC<AcceptRSVPFormProps> = ({ closeModal }) => {
 
     return (
         <div className={styles.container}>
+            <h1>We are so excited to have you at HackIllinois this year!</h1>
             <Formik
                 initialValues={{
                     displayName: "",
@@ -66,7 +67,6 @@ const AcceptRSVPForm: React.FC<AcceptRSVPFormProps> = ({ closeModal }) => {
             >
                 <Form className={styles.form}>
                     <h2>
-                        We are so excited to have you at HackIllinois this year!
                         Please complete the following information to confirm
                         your attendance:
                     </h2>
@@ -87,7 +87,7 @@ const AcceptRSVPForm: React.FC<AcceptRSVPFormProps> = ({ closeModal }) => {
                     <Checkboxes
                         name="codeOfConductAcknowledge"
                         label={
-                            <p>
+                            <label>
                                 To participate in HackIllinois, you must accept
                                 our{" "}
                                 <Link
@@ -98,7 +98,7 @@ const AcceptRSVPForm: React.FC<AcceptRSVPFormProps> = ({ closeModal }) => {
                                     Code of Conduct
                                 </Link>
                                 :
-                            </p>
+                            </label>
                         }
                         options={[
                             {

components/CloseButton/CloseButton.module.scss

@@ -1,9 +1,19 @@
 .button {
+    position: absolute;
+    left: 0;
+    top: 0;
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 5px;
     margin-left: 15px; // To align the button with the other content
     margin-top: 15px;
+    width: 6vw;
+    height: 6vw;
     cursor: pointer;
+
+    @media screen and (max-width: 1152px) {
+        width: 30vw;
+        height: 30vw;
+    }
 }

components/CloseButton/CloseButton.tsx

@@ -4,15 +4,16 @@ const CloseButton = ({ handleClose }: { handleClose: () => void }) => {
     return (
         <button className={styles.button} onClick={handleClose}>
             <svg
+                viewBox="0 0 24 24"
+                fill="none"
                 xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24px 24px"
-                width="24px"
-                height="24px"
             >
                 <path
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="M5.29289 5.29289C5.68342 4.90237 6.31658 4.90237 6.70711 5.29289L12 10.5858L17.2929 5.29289C17.6834 4.90237 18.3166 4.90237 18.7071 5.29289C19.0976 5.68342 19.0976 6.31658 18.7071 6.70711L13.4142 12L18.7071 17.2929C19.0976 17.6834 19.0976 18.3166 18.7071 18.7071C18.3166 19.0976 17.6834 19.0976 17.2929 18.7071L12 13.4142L6.70711 18.7071C6.31658 19.0976 5.68342 19.0976 5.29289 18.7071C4.90237 18.3166 4.90237 17.6834 5.29289 17.2929L10.5858 12L5.29289 6.70711C4.90237 6.31658 4.90237 5.68342 5.29289 5.29289Z"
                     fill="#ffffff"
-                    d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z"
-                ></path>
+                />
             </svg>
         </button>
     );

components/Profile/RSVP/ModalViews/Accepted.tsx

@@ -80,16 +80,17 @@ export function ChooseRSVP({
             <div className={styles.textBlock}>
                 <AcceptedVerbage acceptedType={acceptedType} />
                 <p>
-                    If you would like to attend HackIllinois 2025, click Confirm
-                    to finish the RSVP process. If you won&apos;t be attending
-                    please click Decline. This cannot be reversed.
+                    If you would like to attend HackIllinois 2025, click{" "}
+                    <code>Confirm</code> to finish the RSVP process. If you
+                    won&apos;t be attending please click <code>Decline</code> .{" "}
+                    <b>This cannot be reversed</b>.
                 </p>
                 {reimburse > 0 && (
                     <p>
                         Additionally, you have been approved for a travel
-                        reimbursement of ${reimburse.toFixed(2)}. Receiving this
-                        reimbursement is contingent on you coming to
-                        HackIllinois in-person and submitting a project.
+                        reimbursement of ${reimburse.toLocaleString("en-US")}.
+                        Receiving this reimbursement is contingent on you coming
+                        to HackIllinois in-person and submitting a project.
                     </p>
                 )}
             </div>

components/Profile/RSVP/ModalViews/Rejected.tsx

@@ -3,20 +3,17 @@ import styles from "./styles.module.scss";
 export function Rejected() {
     return (
         <div className={styles.container}>
-            <p className={styles.unfortunatelyText}>
-                <b>
-                    Unfortunately, we were unable to offer you a spot at
-                    HackIllinois.
-                </b>
+            <h1>Rejected</h1>
+            <p>
+                Unfortunately, we were unable to offer you a spot at
+                HackIllinois.
             </p>
-            <p className={styles.unfortunatelyText}>
-                <b>
-                    Email us at{" "}
-                    <a href="mailto:[email protected]">
-                        <u>[email protected]</u>
-                    </a>{" "}
-                    if you have any questions!
-                </b>
+            <p>
+                Email us at{" "}
+                <a href="mailto:[email protected]">
+                    <u>[email protected]</u>
+                </a>{" "}
+                if you have any questions!
             </p>
         </div>
     );
@@ -25,23 +22,19 @@ export function Rejected() {
 export function Waitlisted() {
     return (
         <div className={styles.container}>
-            <p className={styles.unfortunatelyText}>
-                <b>
-                    Your application has been waitlisted at this time. If you
-                    are still interested in participating in HackIllinois 2025,
-                    please visit our Help Desk at 4:30pm on Friday, Feb 28rd for
-                    reconsideration opportunities depending on current
-                    capacities.
-                </b>
+            <h1>Waitlisted</h1>
+            <p>
+                Your application has been waitlisted at this time. If you are
+                still interested in participating in HackIllinois 2025, please
+                visit our Help Desk at 4:30pm on Friday, Feb 28rd for
+                reconsideration opportunities depending on current capacities.
             </p>
-            <p className={styles.unfortunatelyText}>
-                <b>
-                    Email us at{" "}
-                    <a href="mailto:[email protected]">
-                        <u>[email protected]</u>
-                    </a>{" "}
-                    if you have any questions!
-                </b>
+            <p>
+                Email us at{" "}
+                <a href="mailto:[email protected]">
+                    <u>[email protected]</u>
+                </a>{" "}
+                if you have any questions!
             </p>
         </div>
     );

components/Profile/RSVP/ModalViews/styles.module.scss

@@ -17,6 +17,7 @@
     color: white;
     display: flex;
     flex-direction: column;
+    align-items: center;
     gap: 4vw;
     padding: 20px;
 }
@@ -67,7 +68,7 @@
 }
 
 .unfortunatelyText {
-    font-size: 4vw;
+    font-size: 2vw;
     text-align: center;
 
     @media (max-width: 768px) {