Updated styles as discussed

src/EligiblePage.tsx

@@ -8,23 +8,26 @@ const learnMoreAboutMemberships = 'https://harvardfcu.org/membership/join/'
 const EligiblePage: React.FC<Props> = () => {
     return (
         <>
-            <h3 className='elig-h3'>
+            <h3 id='elig-h3'>
                 Congrats! It looks like you are eligible for membership! 
             </h3>
             <p className='elig-p'>
                 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'>
-                <div>
+                <div className='elig-li-wrapper'>
                     <li>Valid Social Security #</li>
                     <li>Valid government issued ID #</li>
                     <li>Date of Birth</li>
                 </div>
-                <div>
+                <div className='elig-li-wrapper'>
                     <li>Address, Email address and phone number</li>
                     <li>Work ID (if applicable)</li>
                     <li>Your mobile phone</li>
                 </div>
+                <div className='elig-li-wrapper'>
+                    <div className='elig-success-svg'></div>
+                </div>
             </ul>
             <div className='elig-button-wrapper'>
                 <a href = {joinTodayUrl} target="_blank">

src/ErrorPage.tsx

@@ -5,7 +5,7 @@ type Props = React.PropsWithChildren<object>;
 const ErrorPage: React.FC<Props> = () => {
   return (
     <>
-      <h3 className='elig-h3'>Oops</h3>
+      <h3 id='elig-h3'>Oops</h3>
       <p className='elig-p'>An error occurred while processing your request. Please refresh the page and try again.</p>
     </>
   )

src/LoadingPage.tsx

@@ -8,7 +8,7 @@ const LoadingPage: React.FC<Props> = () => {
   // TO-DO: add spinner
   return (
     <>
-      <h3 className='elig-h3'>Do you live, work, worship, or attend school in one of our qualified census tracts?</h3>
+      <h3 id='elig-h3'>Do you live, work, worship, or attend school in one of our qualified census tracts?</h3>
       <p className='elig-p'>If so, you might be eligible for membership with us! Enter your address below to check and see if you qualify!</p>
       <div className="loading">
       <img src={LoadingImage} />

src/NoAddressPageHeading.tsx

@@ -5,7 +5,7 @@ type Props = React.PropsWithChildren<object>;
 const NoAddressPageHeading: React.FC<Props> = () => {
   return (
     <>
-      <h3 className='elig-h3'>It looks like the address you entered is incorrect. Re-enter your address to try again</h3>
+      <h3 id='elig-h3'>It looks like the address you entered is incorrect. Re-enter your address to try again</h3>
       <p className='elig-p'>{'(Image of a face with a raised eyebrow goes here)'}</p>
     </>
   )

src/NotEligiblePage.tsx

@@ -13,7 +13,7 @@ const NotEligiblePage: React.FC<Props> = (props: Props) => {
 
     return (
         <>
-            <h3 className='elig-h3'>
+            <h3 id='elig-h3'>
                 Sadly, that address is outside of our coverage area. But don't worry, there are still other options!
             </h3>
             <p className='elig-p'>

src/SearchPageHeading.tsx

@@ -5,7 +5,7 @@ type Props = React.PropsWithChildren<object>;
 const SearchPageHeading: React.FC<Props> = () => {
   return (
     <>
-      <h3 className='elig-h3'>Do you live, work, worship, or attend school in one of our qualified census tracts?</h3>
+      <h3 id='elig-h3'>Do you live, work, worship, or attend school in one of our qualified census tracts?</h3>
       <p className='elig-p'>If so, you might be eligible for membership with us! Enter your address below to check and see if you qualify!</p>
     </>
   )

src/index.css

@@ -19,9 +19,6 @@
   .eligibilityBox {
     max-width: 540px;
   }
-  .elig-ul {
-    height: 7rem;
-  }
   div .elig-button-wrapper {
     justify-content: start;
   }
@@ -41,19 +38,18 @@ body {
   flex-direction: column;
   max-width: 1440px;
   min-height: 208px;
-  margin: 3rem auto;
-  padding: 0 1rem;
   --primary-color: #8c2246;
   --text-color: #3b4544;
 }
 
-.elig-h3 {
-  font-size: 24px;
-  font-weight: 600;
-  /* line-height: 3rem; */
+#elig-h3 {
+  font-size: 24px !important;
+  font-weight: 700;
   color: var(--primary-color);
   margin-top: 0;
   margin-bottom: 8px;
+  font-family: "Poppins" !important;
+  line-height: 1.5;
 }
 
 .elig-p {
@@ -73,6 +69,7 @@ body {
   font-weight: 600;
   color: var(--primary-color);
   margin-bottom: 1rem;
+  display: block;
 }
 
 .elig-input {
@@ -93,12 +90,14 @@ body {
 
 .elig-input:focus {
   outline: 1.5px solid var(--primary-color);
+  outline-offset: 0;
 }
 
 .elig-input:focus-visible {
   outline: 1.5px solid var(--primary-color);
 }
 
+/* tbc */
 .elig-input:target {
   border: 1px solid yellow;
 }
@@ -144,6 +143,10 @@ div.loading {
   cursor: pointer;
 }
 
+.elig-button:focus {
+  outline: none;
+}
+
 .elig-button-secondary {
   background-color: white;
   color: var(--primary-color);
@@ -177,13 +180,34 @@ div.loading {
 }
 
 .elig-ul {
-  font-size: 1.5rem;
-  color: var(--text-color);
   display: flex;
-  flex-direction: column;
   flex-wrap: wrap;
   margin-top: 16px;
   margin-bottom: 16px;
+  padding: 0;
+}
+
+.elig-li-wrapper {
+  width: fit-content;
+  padding-left: 20px;
+  padding-right: 16px;
+}
+
+.elig-li {
+  color: var(--text-color);
+  font-size: 14px;
+  line-height: normal;
+  margin: 0;
+  padding: 0;
+}
+
+.elig-success-svg {
+  display: inline-block;
+  background-image: url("./assets/HFCU_Emotes_RGB_Full Color_Laughter.svg");
+  background-size: 100%;
+  width: 50px;
+  height: 50px;
+  transform: rotate(-10deg);
 }
 
 .elig-a {
@@ -193,11 +217,12 @@ div.loading {
   line-height: 1.5rem;
   padding: 16px 16px;
   min-width: 5rem;
+  text-decoration: underline;
 }
 
 .elig-h4 {
   font-size: 1.9rem;
   color: var(--primary-color);
   margin-top: 8px;
   margin-bottom: 8px;
-}
+}