fix(avatars): Move gravatar help text to radio description (#93507)

Looks like this now

<img alt="clipboard.png" width="335"
src="https://i.imgur.com/dHN85fh.png" />

Before was like this

<img alt="clipboard.png" width="1404"
src="https://i.imgur.com/5hRmDOf.png" />

Part of [RTC-1020: Avatar chooser is
huge](https://linear.app/getsentry/issue/RTC-1020/avatar-chooser-is-huge)

Author: evanpurkhiser

static/app/components/avatarChooser.tsx

@@ -8,15 +8,15 @@ import {SentryAppAvatar} from 'sentry/components/core/avatar/sentryAppAvatar';
 import {TeamAvatar} from 'sentry/components/core/avatar/teamAvatar';
 import {UserAvatar} from 'sentry/components/core/avatar/userAvatar';
 import {Button} from 'sentry/components/core/button';
+import type {RadioOption} from 'sentry/components/forms/controls/radioGroup';
 import RadioGroup from 'sentry/components/forms/controls/radioGroup';
 import ExternalLink from 'sentry/components/links/externalLink';
 import LoadingError from 'sentry/components/loadingError';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
 import Panel from 'sentry/components/panels/panel';
 import PanelBody from 'sentry/components/panels/panelBody';
 import PanelHeader from 'sentry/components/panels/panelHeader';
-import Well from 'sentry/components/well';
-import {t} from 'sentry/locale';
+import {t, tct} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {SentryApp, SentryAppAvatarPhotoType} from 'sentry/types/integrations';
 import type {Organization, Team} from 'sentry/types/organization';
@@ -149,7 +149,7 @@ function AvatarChooser(props: AvatarChooserProps) {
   const isOrganization = type === 'organization';
   const isSentryApp = type?.startsWith('sentryApp');
 
-  const choices: Array<[AvatarType, string]> = [];
+  const choices: Array<RadioOption<AvatarType>> = [];
 
   if (allowDefault && preview) {
     choices.push(['default', defaultChoiceText ?? t('Use default avatar')]);
@@ -161,7 +161,13 @@ function AvatarChooser(props: AvatarChooserProps) {
     choices.push(['upload', t('Upload an image')]);
   }
   if (allowGravatar) {
-    choices.push(['gravatar', t('Use Gravatar')]);
+    choices.push([
+      'gravatar',
+      t('Use Gravatar'),
+      tct('Manage your Gravatar on [gravatarLink:gravatar.com].', {
+        gravatarLink: <ExternalLink href="https://gravatar.com" />,
+      }),
+    ]);
   }
 
   const sharedAvatarProps = {
@@ -205,12 +211,6 @@ function AvatarChooser(props: AvatarChooserProps) {
             {isDefault && preview}
           </AvatarGroup>
           <AvatarUploadSection>
-            {allowGravatar && avatarType === 'gravatar' && (
-              <Well>
-                {t('Gravatars are managed through ')}
-                <ExternalLink href="http://gravatar.com">Gravatar.com</ExternalLink>
-              </Well>
-            )}
             {model.avatar && avatarType === 'upload' && (
               <AvatarUploader
                 {...props}