Merge pull request #46 from hack4impact-calpoly/41-mobile-frontend-mainpage

41 mobile frontend mainpage

Author: IvanA673

public/produce.jpg

@@ -21,14 +21,31 @@ export default function Home() {
             <ReferralForm />
           </Suspense>
         </div>
-        <div className={styles.heroImage}>
-          <Image src="/produce.jpg" alt="Fresh Produce" width={600} height={600} layout="intrinsic" />
+        <div className={styles.heroImageWrapper}>
+          <Image
+            src="/produce.jpg"
+            alt="Fresh Produce"
+            fill
+            className={styles.heroImage}
+            style={{ objectFit: "cover" }}
+          />
         </div>
       </section>
 
       {/* Why Refer & Referral History */}
       <section className={styles.referralSection}>
         <div className={styles.leftSection}>
+          <div className={styles.produceImageWrapper}>
+            <Image
+              src="/produce_2.jpg"
+              alt="Fresh Produce"
+              fill
+              className={styles.produceImage}
+              style={{ objectFit: "cover" }}
+            />
+          </div>
+        </div>
+        <div className={styles.rightSection}>
           <h2>Why Should I Refer?</h2>
           <p>
             Each new member brings fresh ideas, helps us offer more events, and keeps our shelves stocked with an even
@@ -40,9 +57,6 @@ export default function Home() {
             bottles of wine, engraved bricks, and more.
           </p>
         </div>
-        <div className={styles.rightSection}>
-          <h2 className={styles.referralHistoryTitle}>Referral History</h2>
-        </div>
       </section>
     </main>
   );

public/produce_2.jpg

@@ -1,15 +1,13 @@
-/* Header.module.css */
 .header {
   width: 100%;
-  height: 8vw; /* Adjust height as needed */
+  height: 8vw;
   background-color: white;
   display: flex;
   align-items: center;
-  justify-content: flex-start; /* Align logo to the left */
-  /* padding: 0 30px; Adjust horizontal padding as needed */
+  justify-content: flex-start;
   padding: 5vh;
   padding-bottom: 5vh;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Optional, for a subtle shadow */
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 
 .logoContainer {
@@ -19,6 +17,29 @@
 
 .logo {
   height: 4vw;
-  min-height: 60px; /* Adjust logo size as needed */
+  min-height: 60px;
   width: auto;
 }
+
+@media (max-width: 768px) {
+  .header {
+    background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url("/produce.jpg");
+    height: auto;
+    background-size: 100% auto;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-color: unset;
+    padding: 60px 20px;
+    box-shadow: none;
+  }
+
+  .logo {
+    height: auto;
+    max-height: 50px;
+    width: auto;
+  }
+
+  .logoContainer {
+    width: 100%;
+  }
+}

src/app/page.tsx

@@ -8,7 +8,7 @@ const Header: React.FC = () => {
       <div className={styles.logoContainer}>
         {/* <img src="/logo.jpg" alt="Logo" className={styles.logo} /> */}
         <Image
-          src="/logo.jpg"
+          src="/assets/logo.png"
           alt="Logo"
           className={styles.logo}
           width={120} // Adjust based on your needs

src/components/Header/Header.module.css

@@ -1,15 +1,14 @@
 /* Container styling */
 .container {
   width: 100%;
-  max-width: 800px; /* Adjusted max-width to fit more input fields */
-  /* padding: 0.2rem; */
+  max-width: 800px;
   border: none;
   border-radius: 1rem;
-  box-sizing: border-box; /* Ensure padding is included in the container size */
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
   justify-content: center;
-  align-items: flex-start; /* Align items to the start */
+  align-items: flex-start;
 }
 
 /* Title styling */
@@ -25,17 +24,17 @@
 .form {
   display: flex;
   flex-direction: column;
-  gap: 1.25rem;
+  gap: 1.75rem;
   width: 100%;
 }
 
 /* Input group layout */
-.inputGroup {
+.referrerEmail {
   display: flex;
   flex-direction: row;
-  gap: 0.5rem; /* Reduced gap between input fields */
-  align-items: flex-start; /* Align items to the left */
-  margin-left: -0.4rem; /* Remove left margin */
+  gap: 0.5rem;
+  align-items: flex-start;
+  width: 100%;
 }
 
 /* Label styling */
@@ -48,12 +47,9 @@
 
 /* Input field styling */
 .input {
-  display: flex;
-  width: 30%; /* Adjusted width to fit more input fields */
+  flex: 1;
+  min-width: 0; /* This ensures inputs can shrink below their content size */
   padding: 12px 18px;
-  align-items: center;
-  gap: 10px;
-  flex-shrink: 0;
   border-radius: 8px;
   border: 2px solid var(--brown, #523018);
   background: #fff;
@@ -79,6 +75,7 @@
     background-color 0.2s,
     transform 0.1s;
   text-align: center;
+  align-self: flex-end;
 }
 
 /* Button hover and active effects */
@@ -105,37 +102,34 @@
   cursor: pointer;
 }
 
-/* Delete button */
+/* Prospect container styling */
 .prospectContainer {
   position: relative;
-  /* padding: 1px; */
-  border: none;
-  border-radius: 0px;
-  margin-bottom: 1vh;
   display: flex;
-  flex-direction: row; /* Changed to row to align input fields horizontally */
-  gap: 0.2rem; /* Reduced gap between input fields */
-  align-items: center; /* Align items to the center */
-  /*margin-left: -0.5rem; /* Remove left margin */
+  width: 100%;
+  margin-bottom: 1vh;
   box-sizing: border-box;
+  gap: 0.5rem;
 }
 
 /* Scrollable prospect list */
 .prospectList {
+  width: 100%;
   height: 15vh;
-  max-height: 15vh; /* Adjust height as needed */
+  max-height: 15vh;
   overflow-y: auto;
 }
 
 .crossButton {
+  display: flex;
   background: none;
   border: none;
   font-size: 18px;
   color: red;
   cursor: pointer;
-  margin-top: 0.5rem; /* Add margin to the top of the delete button */
-  margin-right: 0.5rem; /* Add margin to the right of the delete button */
-  align-self: flex-start; /* Align the delete button to the start */
+  /* margin-right: 10px; */
+  margin-bottom: 0.75rem;
+  align-self: flex-end;
 }
 
 .crossButton:hover {
@@ -147,3 +141,89 @@
   font-weight: bold;
   margin-top: 10px;
 }
+
+.inputFields {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: 0.5rem;
+}
+
+.nameRow {
+  display: flex;
+  gap: 0.5rem;
+  width: 100%;
+  flex-wrap: wrap;
+}
+
+/* .nameRow input {
+  flex: 1;
+  min-width: 120px; 
+} */
+
+.emailRow {
+  display: flex;
+  width: 100%;
+}
+
+.emailRow input {
+  width: 100%;
+}
+
+/* Confirmation popup styling */
+.confirmationPopup {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.confirmationContent {
+  background-color: white;
+  padding: 20px;
+  border-radius: 8px;
+  text-align: center;
+}
+
+.closeButton {
+  margin-top: 10px;
+  padding: 8px 16px;
+  background-color: #831002;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+/* When larger than mobile view */
+@media (min-width: 768px) {
+  .inputFields {
+    flex-direction: row;
+    /* gap: 15px; */
+  }
+
+  .nameRow {
+    width: 60%;
+  }
+
+  .emailRow {
+    width: 40%;
+  }
+
+  /* .crossButton {
+    margin-bottom: 0;
+    align-self: center;
+  } */
+}
+
+@media (max-width: 480px) {
+  .nameRow {
+    flex-direction: column;
+  }
+}

src/components/Header/Header.tsx

@@ -134,7 +134,7 @@ export default function ReferralForm() {
         </div>
       )}
       <form onSubmit={handleSubmit} className={styles.form}>
-        <div className={styles.inputGroup}>
+        <div className={styles.referrerEmail}>
           <label htmlFor="yourEmail" className={styles.label}></label>
           <input
             id="yourEmail"
@@ -149,45 +149,52 @@ export default function ReferralForm() {
         <div className={styles.prospectList}>
           {prospects.map((prospect, index) => (
             <div key={index} className={styles.prospectContainer}>
-              <label htmlFor={`prospectFirstName${index}`} className={styles.label}></label>
-              <input
-                id={`prospectFirstName${index}`}
-                type="text"
-                value={prospect.firstName}
-                onChange={(e) => handleProspectChange(index, "firstName", e.target.value)}
-                placeholder="Prospect's First Name"
-                className={styles.input}
-              />
-              <label htmlFor={`prospectLastName${index}`} className={styles.label}></label>
-              <input
-                id={`prospectLastName${index}`}
-                type="text"
-                value={prospect.lastName}
-                onChange={(e) => handleProspectChange(index, "lastName", e.target.value)}
-                placeholder="Prospect's Last Name"
-                className={styles.input}
-              />
-              <label htmlFor={`prospectEmail${index}`} className={styles.label}></label>
-              <input
-                id={`prospectEmail${index}`}
-                type="email"
-                value={prospect.email}
-                onChange={(e) => handleProspectChange(index, "email", e.target.value)}
-                placeholder="Prospect's Email Address"
-                className={styles.input}
-              />
               <button type="button" onClick={() => deleteProspect(index)} className={styles.crossButton}>
                 <Image src="/trash.png" alt="Delete" width={18} height={18} />
               </button>
+              <div className={styles.inputFields}>
+                <div className={styles.nameRow}>
+                  <label htmlFor={`prospectFirstName${index}`} className={styles.label}></label>
+                  <input
+                    id={`prospectFirstName${index}`}
+                    type="text"
+                    value={prospect.firstName}
+                    onChange={(e) => handleProspectChange(index, "firstName", e.target.value)}
+                    placeholder="Enter First Name"
+                    className={styles.input}
+                  />
+                  <label htmlFor={`prospectLastName${index}`} className={styles.label}></label>
+                  <input
+                    id={`prospectLastName${index}`}
+                    type="text"
+                    value={prospect.lastName}
+                    onChange={(e) => handleProspectChange(index, "lastName", e.target.value)}
+                    placeholder="Enter Last Name"
+                    className={styles.input}
+                  />
+                </div>
+                <div className={styles.emailRow}>
+                  <label htmlFor={`prospectEmail${index}`} className={styles.label}></label>
+                  <input
+                    id={`prospectEmail${index}`}
+                    type="email"
+                    value={prospect.email}
+                    onChange={(e) => handleProspectChange(index, "email", e.target.value)}
+                    placeholder="Enter Referee Email Address"
+                    className={styles.input}
+                  />
+                </div>
+              </div>
             </div>
           ))}
         </div>
-        <button type="button" onClick={addProspect} className={styles.plusBox}>
-          +
-        </button>
         <button type="submit" className={styles.button}>
           Invite
         </button>
+        <button type="button" onClick={addProspect} className={styles.plusBox}>
+          +
+        </button>
+
         {errorMessage && <p className={styles.error}>{errorMessage}</p>}
         <input type="hidden" name="referrerEmail" value={referrerEmail} />
         <input type="hidden" name="referrerFirstName" value={referrerFirstName} />