Merge pull request #15 from IuliiaSam/eligibility-box-styling

Updated css styles and links
codeforboston · Jan 15, 2025 · 492445b · 492445b
2 parents 43a050e + 2afde01
commit 492445b
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 40 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -19,25 +19,25 @@ function App() {
       case 'search':
         return <>
           <SearchPageHeading/>
-          <SearchPage setPageState={setEligibilityAppState}/>;
+          <SearchPage setPageState={setEligibilityAppState}/>
         </>
       case 'loading':
         return <LoadingPage/>
       case 'no_address':
         return <>
           <NoAddressPageHeading/>
-          <SearchPage setPageState={setEligibilityAppState}/>;
+          <SearchPage setPageState={setEligibilityAppState}/>
         </>
       case 'eligible':
         return <EligiblePage/>
       case 'not_eligible':
         return <NotEligiblePage setPageState={setEligibilityAppState} />
       case 'error':
-        return <ErrorPage/>;
+        return <ErrorPage/>
       default:
-        return <h1>Did not match any component</h1>;
+        return <h1>Did not match any component</h1>
     }
-  };
+  }
 
   // Render main application
   return (

diff --git a/src/EligiblePage.tsx b/src/EligiblePage.tsx
@@ -2,8 +2,8 @@ import * as React from "react";
 
 type Props = React.PropsWithChildren<object>;
 
-// const JoinTodayUrl = 'https://app.loanspq.com/xa/xpressApp.aspx?enc=Kw21Wblm1yxpjJabdoZaD-Gr_IHl-C8fchODgpSxXjXxSPGFrEl4jSeBYt4aHlqZ_hVg_J5c4ST0o0u4NRrvqXWvff49QjYj346K93kVe7U&_gl=1*se66a5*_gcl_au*MTQ3NTg0NDEyLjE3MTc0MTY3OTI.*_ga*MTA5OTEzNjYxNy4xNzE3NDE2Nzky*_ga_TW1V1ZP5ET*MTcxNzQyNzE3OC4zLjEuMTcxNzQzMDU3Ni4wLjAuMA';
-// const FFAUrl = 'https://financialfitnessassociation.org'
+const joinTodayUrl = 'https://app.loanspq.com/xa/xpressApp.aspx?enc=Kw21Wblm1yxpjJabdoZaD-Gr_IHl-C8fchODgpSxXjXxSPGFrEl4jSeBYt4aHlqZ_hVg_J5c4ST0o0u4NRrvqXWvff49QjYj346K93kVe7U&_gl=1*se66a5*_gcl_au*MTQ3NTg0NDEyLjE3MTc0MTY3OTI.*_ga*MTA5OTEzNjYxNy4xNzE3NDE2Nzky*_ga_TW1V1ZP5ET*MTcxNzQyNzE3OC4zLjEuMTcxNzQzMDU3Ni4wLjAuMA';
+const learnMoreAboutMemberships = 'https://harvardfcu.org/membership/join/'
 
 const EligiblePage: React.FC<Props> = () => {
     return (
@@ -15,19 +15,23 @@ const EligiblePage: React.FC<Props> = () => {
                 Click the link below to start your application! Make sure you have the following ready before you start the application:
             </p>
             <ul className='elig-ul'>
-                <li>Valid Social Security #</li>
-                <li>Valid government issued ID #</li>
-                <li>Date of Birth</li>
-                <li>Address, Email address and phone number</li>
-                <li>Work ID (if applicable)</li>
-                <li>Your mobile phone</li>
+                <div>
+                    <li>Valid Social Security #</li>
+                    <li>Valid government issued ID #</li>
+                    <li>Date of Birth</li>
+                </div>
+                <div>
+                    <li>Address, Email address and phone number</li>
+                    <li>Work ID (if applicable)</li>
+                    <li>Your mobile phone</li>
+                </div>
             </ul>
             <div className='elig-button-wrapper'>
-            <a href="https://app.loanspq.com/xa/xpressApp.aspx?enc=Kw21Wblm1yxpjJabdoZaD-Gr_IHl-C8fchODgpSxXjXxSPGFrEl4jSeBYt4aHlqZ_hVg_J5c4ST0o0u4NRrvqXWvff49QjYj346K93kVe7U">
-            <button className='elig-button' type='button'>{'Join Today! >'}</button>
-            </a>
-            <a href='https://harvardfcu.org/membership/join/' className='elig-a'>Learn More About Memberships</a>
-        </div>
+                <a href = {joinTodayUrl} target="_blank">
+                    <button className='elig-button' type='button'>{'Join Today! >'}</button>
+                </a>
+                <a className='elig-a' href={learnMoreAboutMemberships} target="_blank">Learn More About Memberships</a>
+            </div>
         </>
     )
 }

diff --git a/src/NotEligiblePage.tsx b/src/NotEligiblePage.tsx
@@ -6,31 +6,30 @@ type Props = {
     setPageState: React.Dispatch<React.SetStateAction<EligibilityAppStates>>;
   }
 
+const ffaUrl = 'https://financialfitnessassociation.org'
+
 const NotEligiblePage: React.FC<Props> = (props: Props) => {
     const { setPageState } = props;
 
     return (
         <>
             <h3 className='elig-h3'>
-                We're sorry, that address is outside of our coverage area. But don't worry, there are still other options!
+                Sadly, that address is outside of our coverage area. But don't worry, there are still other options!
             </h3>
             <p className='elig-p'>
-                You can also qualify by your workplace, school, or place of worship. If you haven't checked those, try again to see if you qualify!
+                You can also qualify by your workplace, school, or place of worship! If you haven't checked those, try again to see if you qualify!
             </p>
-
-            <div className='elig-button-wrapper'>
-            <button className='elig-button' type='button' onClick={() => setPageState('search')}>Try Another Address</button>
-            </div>
-
             <div>
-            <h4 className='elig-h4'>Financial Fitness Association</h4>
-            <p className='elig-p'>
-                If you become a member of the Financial Fitness Association, then you automatically qualify for membership at Harvard FCU. Harvard FCU will even cover the $8 annual membership fee for the first year!
-            </p>
-            <button className={'elig-button elig-button-secondary'} type='button' onClick={() => location.href = '#'}>
-                {'FFA Learn More >'}
-                {/* https://financialfitnessassociation.org */}
-            </button>
+                <h4 className='elig-h4'>Financial Fitness Association</h4>
+                <p className='elig-p'>
+                    If you become a member of the Financial Fitness Association, then you automatically qualify for membership at Harvard FCU. Harvard FCU will cover the $8 annual membership fee for the first year, and there is no obligation for you to renew your FFA membership after that; once you are a member of the Credit Union, you're a member for life!
+                </p>
+                <div className='elig-button-wrapper'>
+                    <button className='elig-button' type='button' onClick={() => setPageState('search')}>Try Another Address</button>
+                    <a className='elig-a' href = {ffaUrl} target="_blank">
+                        {'Learn More About the FFA >'}
+                    </a>
+                </div>
             </div>
 
         </>

diff --git a/src/SearchPage.tsx b/src/SearchPage.tsx
@@ -95,7 +95,7 @@ const SearchPage: React.FC<Props> = (props: Props) => {
 
   return (
     <>
-      <form onSubmit={handleSubmit} >
+      <form className='elig-form' onSubmit={handleSubmit} >
         <label className='elig-label'>Street Address</label>
         <AddressBox className='elig-input' 
                     placeholder='Enter your address here...' 

diff --git a/src/index.css b/src/index.css
@@ -19,6 +19,12 @@
   .eligibilityBox {
     max-width: 540px;
   }
+  .elig-ul {
+    height: 7rem;
+  }
+  div .elig-button-wrapper {
+    justify-content: start;
+  }
 }
 
 html {
@@ -46,15 +52,18 @@ body {
   line-height: 3rem;
   color: var(--primary-color);
   margin-top: 0;
-  margin-bottom: 1rem;
-  /* margin: 0.5rem; */
+  margin-bottom: 8px;
 }
 
 .elig-p {
   font-size: 1.9rem;
   color: #3b4544;
   margin-top: 0;
-  margin-bottom: 2rem;
+  margin-bottom: 0;
+}
+
+.elig-form {
+  margin-top: 16px;
 }
 
 .elig-label {
@@ -77,6 +86,7 @@ body {
   border-radius: 5px;
   border: 0.5px solid var(--primary-color);
   margin: 0.5rem 0;
+  margin-bottom: 16px;
 }
 
 .elig-input:focus {
@@ -93,16 +103,19 @@ body {
 
 .elig-button-wrapper {
   display: flex;
+  margin-top: 8px;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 1rem;
 }
 
 .elig-button {
+  align-self: center;
+  min-height: 5rem;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   color: #ffffff;
-  margin-right: 1rem;
-  margin-top: 1.3rem;
-  margin-bottom: 3rem;
   font-size: 1.8rem;
   font-weight: 600;
   font-family: "Poppins";
@@ -150,6 +163,11 @@ body {
 
 .elig-ul {
   font-size: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  margin-top: 16px;
+  margin-bottom: 16px;
 }
 
 .elig-a {
@@ -158,9 +176,12 @@ body {
   font-size: 1.5rem;
   line-height: 1.5rem;
   padding: 16px 16px;
+  min-width: 5rem;
 }
 
 .elig-h4 {
   font-size: 1.9rem;
   color: var(--primary-color);
+  margin-top: 8px;
+  margin-bottom: 8px;
 }