Repository: freeCodeCamp/freeCodeCamp
File: client/src/components/settings/email.tsx (TypeScript)

Code before:
            {t('buttons.edit')}
          </Button>
        </FullWidthRow>
      </div>
    );
  }
  return (
    <div className='email-settings'>
      <SectionHeader>{t('settings.email.heading')}</SectionHeader>
      {isEmailVerified ? null : (
        <FullWidthRow>
          <HelpBlock>
            <Alert
              variant='info'
              className='text-center'
              data-playwright-test-label='email-verification-alert'
            >
              {t('settings.email.not-verified')}
              <br />
              <Trans i18nKey='settings.email.check'>
                <Link
                  data-playwright-test-label='email-verification-link'
                  to='/update-email'
                />
              </Trans>
            </Alert>
          </HelpBlock>
        </FullWidthRow>
      )}
      <FullWidthRow>
        <form
          id='form-update-email'
          {...(!isDisabled
            ? { onSubmit: handleSubmit }
            : { onSubmit: e => e.preventDefault() })}
        >
          <FormGroup controlId='current-email'>
            <ControlLabel>{t('settings.email.current')}</ControlLabel>
            <FormControl.Static>{currentEmail}</FormControl.Static>
          </FormGroup>
          <div role='group' aria-label={t('settings.email.heading')}>
            <FormGroup
              controlId='new-email'
              validationState={newEmailValidation}
            >
              <ControlLabel htmlFor='new-email-input'>
                {t('settings.email.new')}
              </ControlLabel>
              <FormControl
                onChange={createHandleEmailFormChange('newEmail')}
                type='email'

Review comment (suggestion):
Looks good as a `Callout`. Just to confirm: does this email verification banner only show up when the page loads, or does it appear right after the user updates their email?  

- If it’s static on page load → `Callout` is perfect.  
- If it appears as feedback to a user action → we may want to keep `Alert`, or add `aria-live="polite"` so screen reader users hear it.


Code after:
            {t('buttons.edit')}
          </Button>
        </FullWidthRow>
      </div>
    );
  }
  return (
    <div className='email-settings'>
      <SectionHeader>{t('settings.email.heading')}</SectionHeader>
      {isEmailVerified ? null : (
        <FullWidthRow>
          <HelpBlock>
            <Callout
              variant='info'
              className='text-center'
              data-playwright-test-label='email-verification-alert'
            >
              {t('settings.email.not-verified')}
              <br />
              <Trans i18nKey='settings.email.check'>
                <Link
                  data-playwright-test-label='email-verification-link'
                  to='/update-email'
                />
              </Trans>
            </Callout>
          </HelpBlock>
        </FullWidthRow>
      )}
      <FullWidthRow>
        <form
          id='form-update-email'
          {...(!isDisabled
            ? { onSubmit: handleSubmit }
            : { onSubmit: e => e.preventDefault() })}
        >
          <FormGroup controlId='current-email'>
            <ControlLabel>{t('settings.email.current')}</ControlLabel>
            <FormControl.Static>{currentEmail}</FormControl.Static>
          </FormGroup>
          <div role='group' aria-label={t('settings.email.heading')}>
            <FormGroup
              controlId='new-email'
              validationState={newEmailValidation}
            >
              <ControlLabel htmlFor='new-email-input'>
                {t('settings.email.new')}
              </ControlLabel>
              <FormControl
                onChange={createHandleEmailFormChange('newEmail')}
                type='email'