Style rsvp modal content (#287)

* style rsvp modal content * style pro to general modal * remove modal padding and underline email links
HackIllinois · Feb 5, 2025 · 908cd5c · 908cd5c
1 parent a6c84d0
commit 908cd5c
Show file tree

Hide file tree

Showing 6 changed files with 119 additions and 30 deletions.
diff --git a/app/profile/page.tsx b/app/profile/page.tsx
@@ -139,7 +139,8 @@ const Profile: React.FC = () => {
                                 windowSizeHook?.width &&
                                 windowSizeHook?.width < 768
                                     ? "10px"
-                                    : "40px"
+                                    : "40px",
+                            padding: 0
                         }
                     }}
                     isOpen={modalOpen}

diff --git a/app/profile/styles.module.scss b/app/profile/styles.module.scss
@@ -104,6 +104,7 @@
     align-items: center;
     justify-content: center;
     height: 100%;
+    background: linear-gradient(0deg, #98c8d3 0%, #5ea6b7 41%, #0a3147 100%);
 }
 
 .modalContent p {

diff --git a/components/Profile/RSVP/ModalViews/Accepted.tsx b/components/Profile/RSVP/ModalViews/Accepted.tsx
@@ -102,28 +102,35 @@ function AcceptedVerbage({ acceptedType }: AcceptedVerbageProps) {
         case "GENERAL":
             return (
                 <>
-                    <b>Congratulations! You&apos;ve been accepted as a</b>
+                    <b className={styles.acceptedText}>
+                        Congratulations! You&apos;ve been accepted as a
+                    </b>
                     <b> </b>
                     <b className={styles.shiny}>General Attendee</b>
+                    <b> </b>
                 </>
             );
         case "PRO_TO_GENERAL":
             return (
                 <>
-                    <b>
+                    <b className={styles.acceptedText}>
                         Unfortunately, we couldn&apos;t offer you a spot as a
                         HackKnight, but you&apos;ve been accepted as a
                     </b>
                     <b> </b>
                     <b className={styles.shiny}>General Attendee</b>
+                    <b> </b>
                 </>
             );
         case "PRO":
             return (
                 <>
-                    <b>Congratulations! You&apos;ve been accepted as a</b>
+                    <b className={styles.acceptedText}>
+                        Congratulations! You&apos;ve been accepted as a
+                    </b>
                     <b> </b>
                     <b className={styles.shiny}>HackOlympian</b>
+                    <b> </b>
                 </>
             );
     }

diff --git a/components/Profile/RSVP/ModalViews/ConfirmReject.tsx b/components/Profile/RSVP/ModalViews/ConfirmReject.tsx
@@ -1,31 +1,34 @@
 import styles from "./styles.module.scss";
+import OlympianButton from "@/components/OlympianButton/OlympianButton";
 
 type ConfirmRejectProps = {
     handleGoBack: () => void;
     handleAPIDecline: () => void;
 };
 
-export default function ConfirmReject({ handleGoBack }: ConfirmRejectProps) {
+export default function ConfirmReject({
+    handleGoBack,
+    handleAPIDecline
+}: ConfirmRejectProps) {
     return (
         <div className={styles.container}>
-            <b>Are you sure you want to decline?</b>
+            <b className={styles.confirmRejectText}>
+                Are you sure you want to decline?
+            </b>
+
             <div className={styles.buttonGroup}>
-                <button
-                    onClick={handleGoBack}
-                    className={styles.unhoveredButton}
-                >
-                    GO BACK
-                </button>
-                {/* <DeclineButton onClick={handleDecline} /> */}
-            </div>
-            <div className={styles.mobileButtonGroup}>
-                <button
+                <OlympianButton
+                    text="Go Back"
                     onClick={handleGoBack}
-                    className={styles.unhoveredButton}
-                >
-                    GO BACK
-                </button>
-                {/* <DeclineButton onClick={handleDecline} /> */}
+                    medium
+                    gold
+                />
+                <OlympianButton
+                    text="Decline"
+                    onClick={handleAPIDecline}
+                    medium
+                    blue
+                />
             </div>
         </div>
     );

diff --git a/components/Profile/RSVP/ModalViews/Rejected.tsx b/components/Profile/RSVP/ModalViews/Rejected.tsx
@@ -3,17 +3,17 @@ import styles from "./styles.module.scss";
 export function Rejected() {
     return (
         <div className={styles.container}>
-            <p>
+            <p className={styles.unfortunatelyText}>
                 <b>
                     Unfortunately, we were unable to offer you a spot at
                     HackIllinois
                 </b>
             </p>
-            <p>
+            <p className={styles.unfortunatelyText}>
                 <b>
                     Email us at{" "}
                     <a href="mailto:[email protected]">
-                        [email protected]
+                        <u>[email protected]</u>
                     </a>{" "}
                     if you have any questions!
                 </b>
@@ -26,17 +26,17 @@ export function Rejected() {
 export function Waitlisted() {
     return (
         <div className={styles.container}>
-            <p>
+            <p className={styles.unfortunatelyText}>
                 <b>
                     Unfortunately, we have deferred your application at this
                     time
                 </b>
             </p>
-            <p>
+            <p className={styles.unfortunatelyText}>
                 <b>
                     Email us at{" "}
                     <a href="mailto:[email protected]">
-                        [email protected]
+                        <u>[email protected]</u>
                     </a>{" "}
                     if you have any questions!
                 </b>

diff --git a/components/Profile/RSVP/ModalViews/styles.module.scss b/components/Profile/RSVP/ModalViews/styles.module.scss
@@ -1,12 +1,89 @@
 .buttonGroup {
-    width: 100%;
+    width: 70%;
     display: flex;
     margin-top: 15px;
-    justify-content: center;
+    justify-content: space-around;
     align-items: center;
     gap: 5px;
+    margin: auto;
+
+    @media (max-width: 468px) {
+        flex-direction: column;
+        gap: 15px;
+    }
 }
 
 .container {
-    color: black;
+    color: white;
+    display: flex;
+    flex-direction: column;
+    gap: 4vw;
+    padding: 20px;
+}
+
+.textBlock {
+    display: flex;
+    flex-direction: column;
+    color: white;
+
+    align-items: center;
+    gap: 20px;
+    padding: 20px;
+    width: 70%;
+    margin: auto;
+    text-align: center;
+    font-size: 1.5vw;
+
+    @media (max-width: 768px) {
+        width: 100%;
+    }
+}
+
+.textBlock p {
+    color: white;
+    text-align: center;
+
+    @media (max-width: 768px) {
+        font-size: 3vw;
+    }
+}
+
+.shiny {
+    font-size: 3vw;
+    text-shadow: 0px 4px 20px #ffb23e;
+
+    @media (max-width: 768px) {
+        font-size: 6vw;
+    }
+}
+
+.acceptedText {
+    font-weight: bold;
+    font-size: 2.5vw;
+
+    @media (max-width: 768px) {
+        font-size: 5vw;
+    }
+}
+
+.unfortunatelyText {
+    font-size: 4vw;
+    text-align: center;
+
+    @media (max-width: 768px) {
+        font-size: 6vw;
+    }
+}
+
+.unfortunatelyText b {
+    color: white;
+}
+
+.confirmRejectText {
+    font-size: 4vw;
+    text-align: center;
+
+    @media (max-width: 768px) {
+        font-size: 6vw;
+    }
 }