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

@@ -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.",

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>
   );
 

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 {