Repository: freeCodeCamp/freeCodeCamp
File: client/src/components/Donation/donation-modal-body.tsx (TypeScript)

Code before:

const AnimationContainer = ({
  secondsRemaining
}: {
  secondsRemaining: number;
}) => {
  const newBearAnimation = useFeature('new-bear-animation').on;
  console.log(newBearAnimation);
  const { t } = useTranslation();
  return (
    <>
      <div style={{ opacity: 0, position: 'absolute' }}>
        <p>{t('donate.animation-description')}</p>
        <span aria-live='polite'>
          {t('donate.animation-countdown', { secondsRemaining })}
        </span>
      </div>
      <div className='donation-animation-container' aria-hidden='true'>
        <div className='donation-animation-bullet-points'>
          {newBearAnimation ? (
            <>
              <p className='donation-animation-bullet-1-b'>
                {t('donate.become-supporter')}
              </p>
              <p className='donation-animation-bullet-2-b'>
                {t('donate.remove-distruptions')}
              </p>
              <p className='donation-animation-bullet-3-b'>
                {t('donate.acquire-skills-faster')}
              </p>
              <p className='donation-animation-bullet-4-b'>
                {t('donate.help-millions-learn')}
              </p>
            </>
          ) : (
            <>
              <p className='donation-animation-bullet-1'>
                {t('donate.become-supporter')}
              </p>
              <p className='donation-animation-bullet-2'>
                {t('donate.remove-distractions')}
              </p>
              <p className='donation-animation-bullet-3'>
                {t('donate.reach-goals-faster')}
              </p>
              <p className='donation-animation-bullet-4'>
                {t('donate.help-millions-learn')}
              </p>
            </>
          )}
        </div>

Review comment (suggestion):
```suggestion
                {t('donate.remove-interruptions')}
```

Code after:

const AnimationContainer = ({
  secondsRemaining
}: {
  secondsRemaining: number;
}) => {
  const newBearAnimation = useFeature('new-bear-animation').on;
  const { t } = useTranslation();
  return (
    <>
      <div style={{ opacity: 0, position: 'absolute' }}>
        <p>{t('donate.animation-description')}</p>
        <span aria-live='polite'>
          {t('donate.animation-countdown', { secondsRemaining })}
        </span>
      </div>
      <div className='donation-animation-container' aria-hidden='true'>
        <div className='donation-animation-bullet-points'>
          {newBearAnimation ? (
            <>
              <p className='donation-animation-bullet-1-b'>
                {t('donate.become-supporter')}
              </p>
              <p className='donation-animation-bullet-2-b'>
                {t('donate.remove-interruptions')}
              </p>
              <p className='donation-animation-bullet-3-b'>
                {t('donate.acquire-skills-faster')}
              </p>
              <p className='donation-animation-bullet-4-b'>
                {t('donate.help-millions-learn')}
              </p>
            </>
          ) : (
            <>
              <p className='donation-animation-bullet-1'>
                {t('donate.become-supporter')}
              </p>
              <p className='donation-animation-bullet-2'>
                {t('donate.remove-distractions')}
              </p>
              <p className='donation-animation-bullet-3'>
                {t('donate.reach-goals-faster')}
              </p>
              <p className='donation-animation-bullet-4'>
                {t('donate.help-millions-learn')}
              </p>
            </>
          )}
        </div>
        <img