fix: updated donation progress with heading

client/i18n/locales/english/translations.json

@@ -398,6 +398,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,12 +22,15 @@ const LearnAlert = ({
     <Alert variant='info' className='annual-donation-alert'>
       {value && (
         <>
+          <div className='text-center'>
+            <h2>{t('learn.donation-heading')}</h2>
+            <h3>{`${value}%`}</h3>
+          </div>
           <div aria-hidden='true' className='progress-wrapper'>
             <div>
               <ProgressBar now={value} />
             </div>
           </div>
-          <h3 className='text-center'>{`${value}%`}</h3>
         </>
       )}
       <p>{text}</p>

client/src/templates/Introduction/intro.css

@@ -499,17 +499,6 @@ ToDo: find out why, and remove the need for it */
   background-color: var(--blue-mid);
   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;
 }