From c548323ad5e9991c95c00d4f4b86628f2d35341f Mon Sep 17 00:00:00 2001
From: JeevaRamanathan <64531160+JeevaRamanathan@users.noreply.github.com>
Date: Fri, 3 May 2024 18:53:06 +0530
Subject: [PATCH] fix: updated donation progress with heading (#54377)

Co-authored-by: Naomi <nhcarrigan@gmail.com>
Co-authored-by: ahmad abdolsaheb <ahmad.abdolsaheb@gmail.com>
---
 client/i18n/locales/english/translations.json |  1 +
 client/src/components/Intro/learn-alert.tsx   | 12 ++++++---
 client/src/templates/Introduction/intro.css   | 26 +++----------------
 3 files changed, 12 insertions(+), 27 deletions(-)

diff --git a/client/i18n/locales/english/translations.json b/client/i18n/locales/english/translations.json
index ad7e4c4ca5d..853cfee13e4 100644
--- a/client/i18n/locales/english/translations.json
+++ b/client/i18n/locales/english/translations.json
@@ -404,6 +404,7 @@
     "scrimba-tip": "Tip: If the mini-browser is covering the code, click and drag to move it. Also, feel free to stop and edit the code in the video at any time.",
     "chal-preview": "Challenge Preview",
     "donation-record-not-found": "Your donation record has not been found.",
+    "donation-heading": "Progress towards donation goal",
     "sign-in-card-update": "Sign in to update your card",
     "sign-in-see-benefits": "Sign in to see your supporter benefits",
     "card-has-been-updated": "Your card has been updated successfully.",
diff --git a/client/src/components/Intro/learn-alert.tsx b/client/src/components/Intro/learn-alert.tsx
index b8d85b753a9..a14097cfef8 100644
--- a/client/src/components/Intro/learn-alert.tsx
+++ b/client/src/components/Intro/learn-alert.tsx
@@ -22,17 +22,21 @@ const LearnAlert = ({
     <Alert variant='info' className='annual-donation-alert'>
       {value && (
         <>
+          <div className='text-center'>
+            <h2>{t('learn.donation-heading')}</h2>
+            <Spacer size='small' />
+            <b className='m-0 progress-percent-value'>{`${value}%`}</b>
+          </div>
           <div aria-hidden='true' className='progress-wrapper'>
             <div>
               <ProgressBar now={value} />
             </div>
           </div>
-          <h3 className='text-center'>{`${value}%`}</h3>
         </>
       )}
       <p>{text}</p>
-      <hr />
-      <p className={'text-center'}>
+      <Spacer size='medium' />
+      <div className={'text-center'}>
         <Link
           className='btn'
           key='donate'
@@ -42,7 +46,7 @@ const LearnAlert = ({
         >
           {t('buttons.donate')}
         </Link>
-      </p>
+      </div>
     </Alert>
   );
 
diff --git a/client/src/templates/Introduction/intro.css b/client/src/templates/Introduction/intro.css
index 612964353c7..9d83c18b5ac 100644
--- a/client/src/templates/Introduction/intro.css
+++ b/client/src/templates/Introduction/intro.css
@@ -465,7 +465,8 @@ ToDo: find out why, and remove the need for it */
   border: 1px solid var(--blue70);
 }
 
-.annual-donation-alert h3 {
+.annual-donation-alert h3,
+.annual-donation-alert h2 {
   color: var(--blue70);
 }
 
@@ -497,29 +498,8 @@ ToDo: find out why, and remove the need for it */
 .annual-donation-alert .progress-bar-percent {
   border-right: 1px solid var(--blue70);
   background-color: var(--blue-mid);
+  background-image: linear-gradient(to right, #31708f, #198eee);
   box-shadow: none;
-  animation: progress-bar-stripes 3s linear infinite;
-  background-image: linear-gradient(
-    -45deg,
-    rgba(225, 225, 225, 0.3) 0%,
-    rgba(225, 225, 225, 0.3) 25%,
-    transparent 25%,
-    transparent 50%,
-    rgba(225, 225, 225, 0.3) 51%,
-    rgba(225, 225, 225, 0.3) 75%,
-    transparent 75%,
-    transparent 100%
-  );
-  background-size: 100px 100px;
-}
-
-@keyframes progress-bar-stripes {
-  from {
-    background-position: 0 0;
-  }
-  to {
-    background-position: 100px 0;
-  }
 }
 
 .tags-wrapper {