From bbe383ea21a264b48d0dac163592a67a61d132dd Mon Sep 17 00:00:00 2001
From: Owen Lester <owlester@sas.upenn.edu>
Date: Sat, 2 Nov 2024 22:21:07 -0400
Subject: [PATCH] fixed modal

---
 .../components/ClubEditPage/ClubEditCard.tsx  | 27 +++++++++++++------
 1 file changed, 19 insertions(+), 8 deletions(-)

diff --git a/frontend/components/ClubEditPage/ClubEditCard.tsx b/frontend/components/ClubEditPage/ClubEditCard.tsx
index 3fb9250fc..a6caff698 100644
--- a/frontend/components/ClubEditPage/ClubEditCard.tsx
+++ b/frontend/components/ClubEditPage/ClubEditCard.tsx
@@ -170,19 +170,28 @@ const EmailModal = ({
       show={true}
       closeModal={closeModal}
       children={
-        <div>
-          <div>
+        <div
+          style={{
+            alignItems: 'center',
+          }}
+        >
+          <Text className="card-content">
             Warning: This email will be down to the public. We highly recommend
             you don't use a personal email, and instead use a club email. Feel
             free to ignore this if the email is not a personal email.
-          </div>
+          </Text>
           <Field
-            type="email"
             name="email"
             value={email}
             onChange={(e) => setEmail(e.target.value)}
+            className={`input`}
+            style={{ maxWidth: '350px', marginBottom: '12px' }}
           ></Field>
-          <button onClick={confirmSubmission}>Confirm</button>
+          <div>
+            <button onClick={confirmSubmission} className="button is-primary">
+              Confirm
+            </button>
+          </div>
         </div>
       }
     />
@@ -919,19 +928,21 @@ export default function ClubEditCard({
       enableReinitialize
       validate={(values) => {
         const errors: { email?: string } = {}
-        if (values.email.includes('upenn.edu')) {
+        if (values.email.includes('upenn.edu') && !emailModal) {
           showEmailModal(true)
           errors.email = 'Please confirm your email'
         }
         return errors
       }}
+      validateOnChange={false}
+      validateOnBlur={false}
     >
-      {({ dirty, isSubmitting, setFieldValue, submitForm }) => (
+      {({ dirty, isSubmitting, setFieldValue, submitForm, values }) => (
         <Form>
           {emailModal && (
             <EmailModal
               closeModal={() => showEmailModal(false)}
-              email=""
+              email={values.email}
               setEmail={(newEmail) => setFieldValue('email', newEmail)}
               confirmSubmission={() => {
                 showEmailModal(false)