From 855651e84913aab331290a7a347c0a897ed9cd7c Mon Sep 17 00:00:00 2001
From: Dylan Jeffers <dylan@audius.co>
Date: Sun, 28 Apr 2024 20:12:14 -0700
Subject: [PATCH 1/2] [C-4077] Replace help-callout with hint

---
 .../help-callout/HelpCallout.module.css       | 25 -------
 .../components/help-callout/HelpCallout.tsx   | 26 -------
 .../LeavingAudiusModal.module.css             | 19 -----
 .../LeavingAudiusModal.tsx                    | 12 +--
 .../components/modal-radio/ModalRadioItem.tsx | 19 +++--
 .../RemixSettingsModal.module.css             |  4 -
 .../RemixSettingsModal.tsx                    | 24 +++---
 .../components/BlockUserConfirmationModal.tsx |  6 +-
 .../fields/AccessAndSaleMenuFields.tsx        |  9 ++-
 .../upload-page/fields/ReleaseDateField.tsx   | 17 ++---
 .../RemixSettingsMenuFields.tsx               | 22 +++---
 .../DownloadAvailability.tsx                  | 75 ++++++++-----------
 .../SpecialAccessFields.tsx                   |  5 +-
 .../CollectibleGatedDescription.tsx           | 11 ++-
 .../CollectibleGatedFields.tsx                |  8 +-
 .../UsdcPurchaseFields.tsx                    | 13 +---
 .../UsdcPurchaseGatedRadioField.tsx           |  2 +-
 17 files changed, 101 insertions(+), 196 deletions(-)
 delete mode 100644 packages/web/src/components/help-callout/HelpCallout.module.css
 delete mode 100644 packages/web/src/components/help-callout/HelpCallout.tsx

diff --git a/packages/web/src/components/help-callout/HelpCallout.module.css b/packages/web/src/components/help-callout/HelpCallout.module.css
deleted file mode 100644
index f7ce8d4da70..00000000000
--- a/packages/web/src/components/help-callout/HelpCallout.module.css
+++ /dev/null
@@ -1,25 +0,0 @@
-.root {
-  display: flex;
-  align-items: flex-start;
-  gap: var(--harmony-unit-4);
-  padding: var(--harmony-unit-3) var(--harmony-unit-4);
-  background: var(--harmony-n-50);
-  border: 1px solid var(--harmony-n-150);
-  border-radius: var(--harmony-unit-2);
-}
-
-.icon,
-.icon svg {
-  width: var(--harmony-unit-6);
-  height: var(--harmony-unit-6);
-}
-
-.icon path {
-  fill: var(--harmony-neutral);
-}
-
-.content {
-  font-weight: var(--harmony-font-medium);
-  font-size: var(--harmony-font-m);
-  line-height: 140%;
-}
diff --git a/packages/web/src/components/help-callout/HelpCallout.tsx b/packages/web/src/components/help-callout/HelpCallout.tsx
deleted file mode 100644
index 563716ab490..00000000000
--- a/packages/web/src/components/help-callout/HelpCallout.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { ReactNode } from 'react'
-
-import { IconQuestionCircle } from '@audius/harmony'
-import cn from 'classnames'
-
-import styles from './HelpCallout.module.css'
-
-/** @todo Rename to hint */
-export const HelpCallout = ({
-  icon = <IconQuestionCircle />,
-  content,
-  className,
-  contentClassName
-}: {
-  icon?: ReactNode
-  content: ReactNode
-  className?: string
-  contentClassName?: string
-}) => {
-  return (
-    <div className={cn(styles.root, className)} role='alert'>
-      <div className={styles.icon}>{icon}</div>
-      <div className={cn(styles.content, contentClassName)}>{content}</div>
-    </div>
-  )
-}
diff --git a/packages/web/src/components/leaving-audius-modal/LeavingAudiusModal.module.css b/packages/web/src/components/leaving-audius-modal/LeavingAudiusModal.module.css
index c3e836d2156..e2ec414fff1 100644
--- a/packages/web/src/components/leaving-audius-modal/LeavingAudiusModal.module.css
+++ b/packages/web/src/components/leaving-audius-modal/LeavingAudiusModal.module.css
@@ -5,25 +5,6 @@
   gap: var(--harmony-unit-6);
 }
 
-.hint {
-  align-self: stretch;
-}
-
-.hintContent {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  word-break: break-all;
-
-  /*
-    Clamp vertically
-    Ignore the webkit prefix, it's actually supported across browsers: 
-    https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp
-  */
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 20;
-}
-
 .footer {
   display: flex;
   gap: var(--harmony-unit-2);
diff --git a/packages/web/src/components/leaving-audius-modal/LeavingAudiusModal.tsx b/packages/web/src/components/leaving-audius-modal/LeavingAudiusModal.tsx
index dfc0211df4d..f52be84591a 100644
--- a/packages/web/src/components/leaving-audius-modal/LeavingAudiusModal.tsx
+++ b/packages/web/src/components/leaving-audius-modal/LeavingAudiusModal.tsx
@@ -10,11 +10,10 @@ import {
   Button,
   IconExternalLink,
   IconInfo,
-  Text
+  Text,
+  Hint
 } from '@audius/harmony'
 
-import { HelpCallout } from '../help-callout/HelpCallout'
-
 import styles from './LeavingAudiusModal.module.css'
 
 const messages = {
@@ -44,12 +43,7 @@ export const LeavingAudiusModal = () => {
       </ModalHeader>
       <ModalContent className={styles.content}>
         <Text>{messages.body}</Text>
-        <HelpCallout
-          className={styles.hint}
-          contentClassName={styles.hintContent}
-          icon={<IconExternalLink />}
-          content={link}
-        />
+        <Hint icon={IconExternalLink}>{link}</Hint>
       </ModalContent>
       <ModalFooter className={styles.footer}>
         <Button className={styles.button} variant='secondary' onClick={onClose}>
diff --git a/packages/web/src/components/modal-radio/ModalRadioItem.tsx b/packages/web/src/components/modal-radio/ModalRadioItem.tsx
index 13ef48de4d7..b7e363fca99 100644
--- a/packages/web/src/components/modal-radio/ModalRadioItem.tsx
+++ b/packages/web/src/components/modal-radio/ModalRadioItem.tsx
@@ -1,11 +1,18 @@
 import { ReactNode, useContext, useEffect, useState } from 'react'
 
-import { Tag, Radio, RadioGroupContext, Text } from '@audius/harmony'
+import {
+  Tag,
+  Radio,
+  RadioGroupContext,
+  Text,
+  IconComponent,
+  Hint,
+  IconQuestionCircle
+} from '@audius/harmony'
 import { ResizeObserver } from '@juggle/resize-observer'
 import cn from 'classnames'
 import useMeasure from 'react-use-measure'
 
-import { HelpCallout } from 'components/help-callout/HelpCallout'
 import layoutStyles from 'components/layout/layout.module.css'
 
 import styles from './ModalRadioItem.module.css'
@@ -15,7 +22,7 @@ type ModalRadioItemProps = {
   title?: ReactNode
   description?: ReactNode
   hintContent?: string | ReactNode
-  hintIcon?: ReactNode
+  hintIcon?: IconComponent
   tag?: string
   value: any
   disabled?: boolean
@@ -28,7 +35,7 @@ export const ModalRadioItem = (props: ModalRadioItemProps) => {
     icon,
     label,
     hintContent,
-    hintIcon,
+    hintIcon = IconQuestionCircle,
     tag,
     title,
     description,
@@ -72,9 +79,7 @@ export const ModalRadioItem = (props: ModalRadioItemProps) => {
         </Text>
         {tag ? <Tag className={styles.tag}>{tag}</Tag> : null}
       </div>
-      {hintContent ? (
-        <HelpCallout icon={hintIcon} content={hintContent} />
-      ) : null}
+      {hintContent ? <Hint icon={hintIcon}>{hintContent}</Hint> : null}
       {checkedContent || description ? (
         <div
           className={cn(styles.collapsibleContainer, {
diff --git a/packages/web/src/components/remix-settings-modal/RemixSettingsModal.module.css b/packages/web/src/components/remix-settings-modal/RemixSettingsModal.module.css
index 7383a5b4c06..29a4e8bd043 100644
--- a/packages/web/src/components/remix-settings-modal/RemixSettingsModal.module.css
+++ b/packages/web/src/components/remix-settings-modal/RemixSettingsModal.module.css
@@ -44,10 +44,6 @@
   align-items: center;
 }
 
-.disableInfo {
-  margin-bottom: var(--harmony-unit-6);
-}
-
 .toggleRow {
   display: flex;
   align-items: center;
diff --git a/packages/web/src/components/remix-settings-modal/RemixSettingsModal.tsx b/packages/web/src/components/remix-settings-modal/RemixSettingsModal.tsx
index e6616500163..3c338a4adad 100644
--- a/packages/web/src/components/remix-settings-modal/RemixSettingsModal.tsx
+++ b/packages/web/src/components/remix-settings-modal/RemixSettingsModal.tsx
@@ -18,14 +18,15 @@ import {
   Switch,
   IconRemix,
   ModalFooter,
-  Button
+  Button,
+  Hint,
+  IconQuestionCircle
 } from '@audius/harmony'
 import cn from 'classnames'
 import { debounce } from 'lodash'
 
 import Input from 'components/data-entry/Input'
 import DynamicImage from 'components/dynamic-image/DynamicImage'
-import { HelpCallout } from 'components/help-callout/HelpCallout'
 import UserBadges from 'components/user-badges/UserBadges'
 import { useTrackCoverArt } from 'hooks/useTrackCoverArt'
 import { fullTrackPage } from 'utils/route'
@@ -181,16 +182,15 @@ const RemixSettingsModal = ({
       </ModalHeader>
       <ModalContent>
         {isStreamGated ? (
-          <HelpCallout
-            className={styles.disableInfo}
-            content={`${messages.changeAvailabilityPrefix} ${
-              isUSDCPurchaseGated
-                ? messages.premium
-                : isContentCollectibleGated(streamConditions)
-                ? messages.collectibleGated
-                : messages.specialAccess
-            }${messages.changeAvailabilitySuffix}`}
-          />
+          <Hint icon={IconQuestionCircle} mb='l'>{`${
+            messages.changeAvailabilityPrefix
+          } ${
+            isUSDCPurchaseGated
+              ? messages.premium
+              : isContentCollectibleGated(streamConditions)
+              ? messages.collectibleGated
+              : messages.specialAccess
+          }${messages.changeAvailabilitySuffix}`}</Hint>
         ) : null}
         <div className={styles.toggleRow}>
           <span className={cn({ [styles.remixDisabled]: isStreamGated })}>
diff --git a/packages/web/src/pages/chat-page/components/BlockUserConfirmationModal.tsx b/packages/web/src/pages/chat-page/components/BlockUserConfirmationModal.tsx
index 8e2eff7bec7..be4f355c6aa 100644
--- a/packages/web/src/pages/chat-page/components/BlockUserConfirmationModal.tsx
+++ b/packages/web/src/pages/chat-page/components/BlockUserConfirmationModal.tsx
@@ -10,11 +10,11 @@ import {
   ModalFooter,
   IconMessageBlock,
   IconInfo,
-  Button
+  Button,
+  Hint
 } from '@audius/harmony'
 import { useDispatch } from 'react-redux'
 
-import { HelpCallout } from 'components/help-callout/HelpCallout'
 import { UserNameAndBadges } from 'components/user-name-and-badges/UserNameAndBadges'
 import { track, make } from 'services/analytics'
 
@@ -74,7 +74,7 @@ export const BlockUserConfirmationModal = ({
       </ModalHeader>
       <ModalContent className={styles.content}>
         <div>{messages.content(user, isReportAbuse)}</div>
-        <HelpCallout icon={<IconInfo />} content={messages.callout} />
+        <Hint icon={IconInfo}>{messages.callout}</Hint>
       </ModalContent>
       <ModalFooter className={styles.footer}>
         <Button variant='secondary' onClick={onClose} fullWidth>
diff --git a/packages/web/src/pages/upload-page/fields/AccessAndSaleMenuFields.tsx b/packages/web/src/pages/upload-page/fields/AccessAndSaleMenuFields.tsx
index 7f1c8387daf..509b8d5a731 100644
--- a/packages/web/src/pages/upload-page/fields/AccessAndSaleMenuFields.tsx
+++ b/packages/web/src/pages/upload-page/fields/AccessAndSaleMenuFields.tsx
@@ -9,12 +9,13 @@ import {
   RadioGroup,
   IconSpecialAccess,
   IconVisibilityPublic,
-  Text
+  Text,
+  IconQuestionCircle,
+  Hint
 } from '@audius/harmony'
 import cn from 'classnames'
 import { useField } from 'formik'
 
-import { HelpCallout } from 'components/help-callout/HelpCallout'
 import layoutStyles from 'components/layout/layout.module.css'
 import { ModalRadioItem } from 'components/modal-radio/ModalRadioItem'
 import { useFlag } from 'hooks/useRemoteConfig'
@@ -112,7 +113,9 @@ export const AccessAndSaleMenuFields = (props: AccesAndSaleMenuFieldsProps) => {
 
   return (
     <div className={cn(layoutStyles.col, layoutStyles.gap4)}>
-      {isRemix ? <HelpCallout content={messages.isRemix} /> : null}
+      {isRemix ? (
+        <Hint icon={IconQuestionCircle}>{messages.isRemix}</Hint>
+      ) : null}
       <Text variant='body'>{messages.modalDescription}</Text>
       {isPublishDisabled ? (
         <HelpCallout content={messages.publishDisabled} />
diff --git a/packages/web/src/pages/upload-page/fields/ReleaseDateField.tsx b/packages/web/src/pages/upload-page/fields/ReleaseDateField.tsx
index 93ca5f8f398..9e9d0d50502 100644
--- a/packages/web/src/pages/upload-page/fields/ReleaseDateField.tsx
+++ b/packages/web/src/pages/upload-page/fields/ReleaseDateField.tsx
@@ -7,7 +7,8 @@ import {
   Flex,
   IconCalendarMonth,
   RadioGroup,
-  Text
+  Text,
+  Hint
 } from '@audius/harmony'
 import cn from 'classnames'
 import { useField } from 'formik'
@@ -21,7 +22,6 @@ import {
 } from 'components/data-entry/ContextualMenu'
 import { DropdownField } from 'components/form-fields'
 import { HarmonyTextField } from 'components/form-fields/HarmonyTextField'
-import { HelpCallout } from 'components/help-callout/HelpCallout'
 import layoutStyles from 'components/layout/layout.module.css'
 import { ModalRadioItem } from 'components/modal-radio/ModalRadioItem'
 import { formatCalendarTime } from 'utils/dateUtils'
@@ -311,14 +311,11 @@ export const SelectReleaseDate = (props: ReleaseDateRadioProps) => {
       )}
       {releaseDateTypeField.value === ReleaseDateType.SCHEDULED_RELEASE ? (
         <ModalContent className={styles.releaseDateHint}>
-          <HelpCallout
-            icon={<IconInfo />}
-            content={
-              timePeriod === TimePeriodType.PAST
-                ? messages.pastReleaseHint
-                : messages.futureReleaseHint(getLocalTimezone())
-            }
-          />
+          <Hint icon={IconInfo}>
+            {timePeriod === TimePeriodType.PAST
+              ? messages.pastReleaseHint
+              : messages.futureReleaseHint(getLocalTimezone())}
+          </Hint>
         </ModalContent>
       ) : null}
     </>
diff --git a/packages/web/src/pages/upload-page/fields/RemixSettingsField/RemixSettingsMenuFields.tsx b/packages/web/src/pages/upload-page/fields/RemixSettingsField/RemixSettingsMenuFields.tsx
index a979cc8289e..8a7b948ac7d 100644
--- a/packages/web/src/pages/upload-page/fields/RemixSettingsField/RemixSettingsMenuFields.tsx
+++ b/packages/web/src/pages/upload-page/fields/RemixSettingsField/RemixSettingsMenuFields.tsx
@@ -8,13 +8,13 @@ import {
 } from '@audius/common/models'
 import { accountSelectors } from '@audius/common/store'
 import { getPathFromTrackUrl } from '@audius/common/utils'
+import { Hint, IconQuestionCircle } from '@audius/harmony'
 import { useField } from 'formik'
 import { useSelector } from 'react-redux'
 import { useThrottle } from 'react-use'
 
 import { Divider } from 'components/divider'
 import { TextField } from 'components/form-fields'
-import { HelpCallout } from 'components/help-callout/HelpCallout'
 
 import { SwitchRowField } from '../SwitchRowField'
 import { IS_STREAM_GATED, STREAM_CONDITIONS } from '../types'
@@ -74,13 +74,13 @@ export const RemixSettingsMenuFields = () => {
   const renderGatedContentCallout = () => {
     if (isStreamGated && !isUSDCPurchaseGated) {
       return (
-        <HelpCallout
-          content={`${messages.changeAvailabilityPrefix} ${
-            isContentCollectibleGated(streamConditions)
-              ? messages.collectibleGated
-              : messages.specialAccess
-          }${messages.changeAvailabilitySuffix}`}
-        />
+        <Hint icon={IconQuestionCircle}>{`${
+          messages.changeAvailabilityPrefix
+        } ${
+          isContentCollectibleGated(streamConditions)
+            ? messages.collectibleGated
+            : messages.specialAccess
+        }${messages.changeAvailabilitySuffix}`}</Hint>
       )
     }
     return null
@@ -89,9 +89,9 @@ export const RemixSettingsMenuFields = () => {
   const renderUsdcPurchaseGatedContentCallout = () => {
     if (isUSDCPurchaseGated) {
       return (
-        <HelpCallout
-          content={`${messages.changeAvailabilityPrefix} ${messages.premium}${messages.changeAvailabilitySuffix}`}
-        />
+        <Hint icon={IconQuestionCircle}>
+          {`${messages.changeAvailabilityPrefix} ${messages.premium}${messages.changeAvailabilitySuffix}`}
+        </Hint>
       )
     }
     return null
diff --git a/packages/web/src/pages/upload-page/fields/download-availability/DownloadAvailability.tsx b/packages/web/src/pages/upload-page/fields/download-availability/DownloadAvailability.tsx
index df83a858518..9c1ca5bfcbe 100644
--- a/packages/web/src/pages/upload-page/fields/download-availability/DownloadAvailability.tsx
+++ b/packages/web/src/pages/upload-page/fields/download-availability/DownloadAvailability.tsx
@@ -21,16 +21,15 @@ import {
   Text,
   TextLink,
   IconError,
-  useTheme,
   SegmentedControl,
   Option,
-  IconStars
+  IconStars,
+  Hint
 } from '@audius/harmony'
 import { useFormikContext } from 'formik'
 
 import { MenuFormCallbackStatus } from 'components/data-entry/ContextualMenu'
 import { Divider } from 'components/divider'
-import { HelpCallout } from 'components/help-callout/HelpCallout'
 import { useTrackField } from 'pages/upload-page/hooks'
 import { make, track } from 'services/analytics'
 
@@ -76,12 +75,6 @@ export const DownloadAvailability = ({
   const { isEnabled: isUsdcUploadEnabled } = useFeatureFlag(
     FeatureFlags.USDC_PURCHASES_UPLOAD
   )
-  const {
-    color: {
-      primary,
-      neutral: { neutral, n400: subdued }
-    }
-  } = useTheme()
   const { submitForm, setStatus } = useFormikContext()
   const [{ value: streamConditions }] =
     useTrackField<Nullable<AccessConditions>>(STREAM_CONDITIONS)
@@ -119,7 +112,7 @@ export const DownloadAvailability = ({
     {
       key: DownloadTrackAvailabilityType.PUBLIC,
       text: messages.public,
-      icon: <IconVisibilityPublic size='s' fill={neutral} />
+      icon: <IconVisibilityPublic size='s' color='default' />
     },
     {
       key: DownloadTrackAvailabilityType.FOLLOWERS,
@@ -127,7 +120,7 @@ export const DownloadAvailability = ({
       icon: (
         <IconUserFollowing
           size='s'
-          fill={isFollowersOptionDisabled ? subdued : neutral}
+          color={isFollowersOptionDisabled ? 'subdued' : 'default'}
         />
       ),
       disabled: isFollowersOptionDisabled
@@ -138,8 +131,10 @@ export const DownloadAvailability = ({
       icon: (
         <IconCart
           size='s'
-          fill={
-            isPremiumOptionDisabled || !isUsdcUploadEnabled ? subdued : neutral
+          color={
+            isPremiumOptionDisabled || !isUsdcUploadEnabled
+              ? 'subdued'
+              : 'default'
           }
         />
       ),
@@ -172,23 +167,21 @@ export const DownloadAvailability = ({
     return isUsdcUploadEnabled ? (
       <DownloadPriceField disabled={false} />
     ) : (
-      <HelpCallout
-        icon={<IconStars />}
-        content={
-          <Flex direction='column' gap='m'>
-            <Text variant='body'>{messages.waitlist}</Text>
-            <TextLink
-              onClick={handleClickWaitListLink}
-              href={WAITLIST_TYPEFORM}
-              css={{ color: primary.p500, width: 'fit-content' }}
-              showUnderline
-              isExternal
-            >
-              {messages.join}
-            </TextLink>
-          </Flex>
+      <Hint
+        icon={IconStars}
+        actions={
+          <TextLink
+            onClick={handleClickWaitListLink}
+            href={WAITLIST_TYPEFORM}
+            variant='visible'
+            isExternal
+          >
+            {messages.join}
+          </TextLink>
         }
-      />
+      >
+        {messages.waitlist}
+      </Hint>
     )
   }
 
@@ -205,22 +198,16 @@ export const DownloadAvailability = ({
         </Box>
       </Flex>
       {shouldRenderCallout ? (
-        <HelpCallout
-          icon={<IconError css={{ alignSelf: 'center' }} />}
-          content={
-            <Text variant='body'>
-              {getCalloutMessage()}
-              &nbsp;
-              <TextLink
-                onClick={handleCalloutClick}
-                css={{ color: primary.p500 }}
-              >
-                {messages.callout.accessAndSale}
-              </TextLink>
-              .
-            </Text>
+        <Hint
+          icon={IconError}
+          actions={
+            <TextLink onClick={handleCalloutClick} variant='visible'>
+              {messages.callout.accessAndSale}
+            </TextLink>
           }
-        />
+        >
+          {getCalloutMessage()}
+        </Hint>
       ) : (
         <>
           <SegmentedControl
diff --git a/packages/web/src/pages/upload-page/fields/stream-availability/SpecialAccessFields.tsx b/packages/web/src/pages/upload-page/fields/stream-availability/SpecialAccessFields.tsx
index 8c421ac92ec..e91dbc32870 100644
--- a/packages/web/src/pages/upload-page/fields/stream-availability/SpecialAccessFields.tsx
+++ b/packages/web/src/pages/upload-page/fields/stream-availability/SpecialAccessFields.tsx
@@ -3,12 +3,11 @@ import { ChangeEvent, useCallback } from 'react'
 import { AccessConditions } from '@audius/common/models'
 import { accountSelectors } from '@audius/common/store'
 import { Nullable } from '@audius/common/utils'
-import { IconInfo, Radio, RadioGroup, Text } from '@audius/harmony'
+import { Hint, IconInfo, Radio, RadioGroup, Text } from '@audius/harmony'
 import cn from 'classnames'
 import { useField } from 'formik'
 import { useSelector } from 'react-redux'
 
-import { HelpCallout } from 'components/help-callout/HelpCallout'
 import Tooltip from 'components/tooltip/Tooltip'
 
 import {
@@ -104,7 +103,7 @@ export const SpecialAccessFields = (props: TrackAvailabilityFieldsProps) => {
         </label>
       </RadioGroup>
       {downloadConditions ? (
-        <HelpCallout icon={<IconInfo />} content={messages.premiumDownloads} />
+        <Hint icon={IconInfo}>{messages.premiumDownloads}</Hint>
       ) : null}
     </>
   )
diff --git a/packages/web/src/pages/upload-page/fields/stream-availability/collectible-gated/CollectibleGatedDescription.tsx b/packages/web/src/pages/upload-page/fields/stream-availability/collectible-gated/CollectibleGatedDescription.tsx
index 7eef8e65985..030661071f0 100644
--- a/packages/web/src/pages/upload-page/fields/stream-availability/collectible-gated/CollectibleGatedDescription.tsx
+++ b/packages/web/src/pages/upload-page/fields/stream-availability/collectible-gated/CollectibleGatedDescription.tsx
@@ -1,6 +1,11 @@
-import { Flex, IconExternalLink, Text } from '@audius/harmony'
+import {
+  Flex,
+  Hint,
+  IconExternalLink,
+  IconQuestionCircle,
+  Text
+} from '@audius/harmony'
 
-import { HelpCallout } from 'components/help-callout/HelpCallout'
 import { ExternalTextLink } from 'components/link'
 import { AUDIUS_GATED_CONTENT_BLOG_LINK } from 'utils/route'
 
@@ -28,7 +33,7 @@ export const CollectibleGatedDescription = (
     <Flex gap='xl' direction='column'>
       <Text variant='body'>{messages.collectibleGatedSubtitle}</Text>
       {!hasCollectibles && isUpload ? (
-        <HelpCallout content={helpContent} />
+        <Hint icon={IconQuestionCircle}>{helpContent}</Hint>
       ) : null}
       <ExternalTextLink to={AUDIUS_GATED_CONTENT_BLOG_LINK} textVariant='body'>
         {messages.learnMore} <IconExternalLink size='s' color='default' />
diff --git a/packages/web/src/pages/upload-page/fields/stream-availability/collectible-gated/CollectibleGatedFields.tsx b/packages/web/src/pages/upload-page/fields/stream-availability/collectible-gated/CollectibleGatedFields.tsx
index fa237345686..872e486445f 100644
--- a/packages/web/src/pages/upload-page/fields/stream-availability/collectible-gated/CollectibleGatedFields.tsx
+++ b/packages/web/src/pages/upload-page/fields/stream-availability/collectible-gated/CollectibleGatedFields.tsx
@@ -9,12 +9,11 @@ import {
 } from '@audius/common/models'
 import { collectiblesSelectors } from '@audius/common/store'
 import { Nullable } from '@audius/common/utils'
-import { Box, IconInfo } from '@audius/harmony'
+import { Box, Hint, IconInfo } from '@audius/harmony'
 import { useField } from 'formik'
 import { useSelector } from 'react-redux'
 
 import DropdownInput from 'components/ai-attribution-modal/DropdownInput'
-import { HelpCallout } from 'components/help-callout/HelpCallout'
 import LoadingSpinner from 'components/loading-spinner/LoadingSpinner'
 
 import {
@@ -175,10 +174,7 @@ export const CollectibleGatedFields = (props: CollectibleGatedFieldsProps) => {
       />
       {downloadConditions ? (
         <Box mt='l'>
-          <HelpCallout
-            icon={<IconInfo />}
-            content={messages.premiumDownloads}
-          />
+          <Hint icon={IconInfo}>{messages.premiumDownloads}</Hint>
         </Box>
       ) : null}
     </div>
diff --git a/packages/web/src/pages/upload-page/fields/stream-availability/usdc-purchase-gated/UsdcPurchaseFields.tsx b/packages/web/src/pages/upload-page/fields/stream-availability/usdc-purchase-gated/UsdcPurchaseFields.tsx
index 0dbffe69815..b3e192352a6 100644
--- a/packages/web/src/pages/upload-page/fields/stream-availability/usdc-purchase-gated/UsdcPurchaseFields.tsx
+++ b/packages/web/src/pages/upload-page/fields/stream-availability/usdc-purchase-gated/UsdcPurchaseFields.tsx
@@ -12,11 +12,10 @@ import {
   decimalIntegerToHumanReadable,
   Nullable
 } from '@audius/common/utils'
-import { IconInfo } from '@audius/harmony'
+import { Hint, IconInfo } from '@audius/harmony'
 import cn from 'classnames'
 import { useField } from 'formik'
 
-import { HelpCallout } from 'components/help-callout/HelpCallout'
 import layoutStyles from 'components/layout/layout.module.css'
 
 import { BoxedTextField } from '../../BoxedTextField'
@@ -107,10 +106,7 @@ export const UsdcPurchaseFields = (props: TrackAvailabilityFieldsProps) => {
           )}
           <input type='hidden' name={PREVIEW} value='0' />
           {downloadConditions && !isAlbum ? (
-            <HelpCallout
-              icon={<IconInfo />}
-              content={messages.premiumDownloads}
-            />
+            <Hint icon={IconInfo}>{messages.premiumDownloads}</Hint>
           ) : null}
         </>
       ) : (
@@ -122,10 +118,7 @@ export const UsdcPurchaseFields = (props: TrackAvailabilityFieldsProps) => {
           />
           <PreviewField disabled={disabled} />
           {downloadConditions ? (
-            <HelpCallout
-              icon={<IconInfo />}
-              content={messages.premiumDownloads}
-            />
+            <Hint icon={IconInfo}>{messages.premiumDownloads}</Hint>
           ) : null}
         </>
       )}
diff --git a/packages/web/src/pages/upload-page/fields/stream-availability/usdc-purchase-gated/UsdcPurchaseGatedRadioField.tsx b/packages/web/src/pages/upload-page/fields/stream-availability/usdc-purchase-gated/UsdcPurchaseGatedRadioField.tsx
index b82f7b98a8c..7255e5f901d 100644
--- a/packages/web/src/pages/upload-page/fields/stream-availability/usdc-purchase-gated/UsdcPurchaseGatedRadioField.tsx
+++ b/packages/web/src/pages/upload-page/fields/stream-availability/usdc-purchase-gated/UsdcPurchaseGatedRadioField.tsx
@@ -89,7 +89,7 @@ export const UsdcPurchaseGatedRadioField = (
       description={messages.usdcPurchaseSubtitle}
       value={StreamTrackAvailabilityType.USDC_PURCHASE}
       disabled={disabled}
-      hintIcon={<IconStars />}
+      hintIcon={IconStars}
       hintContent={!isUsdcUploadEnabled ? helpContent : undefined}
       tag={!isUsdcUploadEnabled ? messages.comingSoon : undefined}
       checkedContent={

From a31ee95ce85f71c22bd909ec29656777c11b90e4 Mon Sep 17 00:00:00 2001
From: Dylan Jeffers <dylan@audius.co>
Date: Sun, 5 May 2024 23:12:10 -0700
Subject: [PATCH 2/2] Replace mobile instances

---
 packages/harmony/src/components/hint/Hint.tsx |  5 +-
 .../components/help-callout/HelpCallout.tsx   | 63 -------------------
 .../LeavingAudiusDrawer.tsx                   | 10 +--
 .../WaitForDownloadDrawer.tsx                 | 12 ++--
 .../harmony-native/components/Hint/Hint.tsx   | 28 ++++++---
 .../harmony-native/components/Text/Text.tsx   |  6 +-
 .../CollectibleGatedAvailability.tsx          | 16 +----
 .../components/HiddenAvailability.tsx         |  8 +--
 .../PremiumRadioField/PremiumRadioField.tsx   | 38 ++---------
 .../screens/AccessAndSaleScreen.tsx           | 16 +----
 .../screens/ReleaseDateScreen.tsx             | 20 +++---
 .../screens/RemixSettingsScreen.tsx           | 23 +++----
 .../components/EmailInUseHint.tsx             | 12 ++--
 .../LeavingAudiusModal.tsx                    |  4 +-
 .../RemixSettingsModal.tsx                    |  2 +-
 .../fields/AccessAndSaleMenuFields.tsx        |  4 +-
 16 files changed, 71 insertions(+), 196 deletions(-)
 delete mode 100644 packages/mobile/src/components/help-callout/HelpCallout.tsx

diff --git a/packages/harmony/src/components/hint/Hint.tsx b/packages/harmony/src/components/hint/Hint.tsx
index 7887ada0b11..9b12b748a5a 100644
--- a/packages/harmony/src/components/hint/Hint.tsx
+++ b/packages/harmony/src/components/hint/Hint.tsx
@@ -4,9 +4,10 @@ import type { IconComponent } from 'components/icon'
 import { Flex } from 'components/layout'
 import { Paper, PaperProps } from 'components/layout/Paper'
 import { Text } from 'components/text'
+import { IconQuestionCircle } from 'icons'
 
 type HintProps = {
-  icon: IconComponent
+  icon?: IconComponent
   actions?: ReactNode
 } & PaperProps
 
@@ -14,7 +15,7 @@ type HintProps = {
  * A way of informing the user of important details in line in a prominent way.
  */
 export const Hint = (props: HintProps) => {
-  const { icon: Icon, children, actions, ...other } = props
+  const { icon: Icon = IconQuestionCircle, children, actions, ...other } = props
   return (
     <Paper
       role='alert'
diff --git a/packages/mobile/src/components/help-callout/HelpCallout.tsx b/packages/mobile/src/components/help-callout/HelpCallout.tsx
deleted file mode 100644
index c52e07da96d..00000000000
--- a/packages/mobile/src/components/help-callout/HelpCallout.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import type { ComponentType, ReactNode } from 'react'
-
-import type { ViewStyle } from 'react-native'
-import { View } from 'react-native'
-
-import { IconQuestionCircle } from '@audius/harmony-native'
-import { Text } from 'app/components/core'
-import { makeStyles } from 'app/styles'
-import type { SvgProps } from 'app/types/svg'
-import { useColor } from 'app/utils/theme'
-
-const useStyles = makeStyles(({ spacing, palette }) => ({
-  root: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: spacing(4),
-    paddingVertical: spacing(3),
-    paddingHorizontal: spacing(4),
-    borderWidth: 1,
-    borderColor: palette.neutralLight7,
-    borderRadius: spacing(2),
-    backgroundColor: palette.neutralLight9
-  },
-  text: {
-    flex: 1,
-    flexWrap: 'wrap',
-    lineHeight: 20
-  }
-}))
-
-type HelpCalloutProps = {
-  content: ReactNode
-  style?: ViewStyle
-  icon?: ComponentType<SvgProps>
-  numberOfLines?: number
-}
-
-/**
- * @todo Rename to Hint
- */
-export const HelpCallout = (props: HelpCalloutProps) => {
-  const {
-    style,
-    content,
-    icon: Icon = IconQuestionCircle,
-    numberOfLines
-  } = props
-  const styles = useStyles()
-  const neutral = useColor('neutral')
-
-  return (
-    <View style={[styles.root, style]}>
-      <Icon fill={neutral} />
-      {typeof content === 'string' ? (
-        <Text numberOfLines={numberOfLines} style={styles.text}>
-          {content}
-        </Text>
-      ) : (
-        content
-      )}
-    </View>
-  )
-}
diff --git a/packages/mobile/src/components/leaving-audius-drawer/LeavingAudiusDrawer.tsx b/packages/mobile/src/components/leaving-audius-drawer/LeavingAudiusDrawer.tsx
index ea2b4f9fdb4..7a5a7d13010 100644
--- a/packages/mobile/src/components/leaving-audius-drawer/LeavingAudiusDrawer.tsx
+++ b/packages/mobile/src/components/leaving-audius-drawer/LeavingAudiusDrawer.tsx
@@ -3,13 +3,11 @@ import React from 'react'
 import { useLeavingAudiusModal } from '@audius/common/store'
 import { View } from 'react-native'
 
-import { IconExternalLink, IconInfo } from '@audius/harmony-native'
+import { Hint, IconExternalLink, IconInfo } from '@audius/harmony-native'
 import { Button, Text, useLink } from 'app/components/core'
 import Drawer from 'app/components/drawer/Drawer'
 import { makeStyles } from 'app/styles'
 
-import { HelpCallout } from '../help-callout/HelpCallout'
-
 const messages = {
   title: 'Are You Sure?',
   content: 'This link is taking you to the following website',
@@ -40,11 +38,7 @@ export const LeavingAudiusDrawer = () => {
     >
       <View style={styles.root}>
         <Text>{messages.content}</Text>
-        <HelpCallout
-          numberOfLines={10}
-          content={link}
-          icon={IconExternalLink}
-        />
+        <Hint icon={IconExternalLink}>{link}</Hint>
         <Button title={messages.visit} onPress={onLinkPress} fullWidth />
         <Button
           variant='common'
diff --git a/packages/mobile/src/components/wait-for-download-drawer/WaitForDownloadDrawer.tsx b/packages/mobile/src/components/wait-for-download-drawer/WaitForDownloadDrawer.tsx
index 971ecb39a1e..9c7f88278a8 100644
--- a/packages/mobile/src/components/wait-for-download-drawer/WaitForDownloadDrawer.tsx
+++ b/packages/mobile/src/components/wait-for-download-drawer/WaitForDownloadDrawer.tsx
@@ -102,11 +102,9 @@ export const WaitForDownloadDrawer = () => {
         </Flex>
         <Flex ph='l'>
           {downloadError ? (
-            <Hint icon={IconError}>
-              <Flex direction='column' gap='m'>
-                <Text variant='body' color='default'>
-                  {messages.somethingWrong}
-                </Text>
+            <Hint
+              icon={IconError}
+              actions={
                 <TextLink
                   variant='visible'
                   textVariant='body'
@@ -114,7 +112,9 @@ export const WaitForDownloadDrawer = () => {
                 >
                   {messages.tryAgain}
                 </TextLink>
-              </Flex>
+              }
+            >
+              {messages.somethingWrong}
             </Hint>
           ) : (
             <LoadingSpinner
diff --git a/packages/mobile/src/harmony-native/components/Hint/Hint.tsx b/packages/mobile/src/harmony-native/components/Hint/Hint.tsx
index f356437e6ff..0c9c69aff30 100644
--- a/packages/mobile/src/harmony-native/components/Hint/Hint.tsx
+++ b/packages/mobile/src/harmony-native/components/Hint/Hint.tsx
@@ -1,18 +1,20 @@
-import type { IconComponent } from 'app/harmony-native/icons'
+import type { ReactNode } from 'react'
 
+import { IconQuestionCircle, type IconComponent } from '../../icons'
+import { Text } from '../Text/Text'
 import type { PaperProps } from '../layout'
-import { Paper } from '../layout'
+import { Flex, Paper } from '../layout'
 
 export type HintProps = {
-  icon: IconComponent
+  icon?: IconComponent
+  actions?: ReactNode
 } & PaperProps
 
 export const Hint = (props: HintProps) => {
-  const { icon: Icon, children, ...other } = props
+  const { icon: Icon = IconQuestionCircle, children, actions, ...other } = props
   return (
     <Paper
       role='alert'
-      direction='row'
       gap='l'
       ph='l'
       pv='m'
@@ -20,13 +22,19 @@ export const Hint = (props: HintProps) => {
       backgroundColor='surface2'
       shadow='flat'
       border='strong'
-      // Width 100% is necessary to allow for text wrapping inside
-      // the flex container that wraps children
-      style={{ width: '100%' }}
       {...other}
     >
-      <Icon size='l' color='default' />
-      {children}
+      <Flex gap='l' alignItems='center' direction='row'>
+        <Icon size='l' color='default' />
+        <Text variant='body' shrink>
+          {children}
+        </Text>
+      </Flex>
+      {actions ? (
+        <Flex pl='unit10' gap='l'>
+          {actions}
+        </Flex>
+      ) : null}
     </Paper>
   )
 }
diff --git a/packages/mobile/src/harmony-native/components/Text/Text.tsx b/packages/mobile/src/harmony-native/components/Text/Text.tsx
index 0a90b121350..8cdea9a2b6c 100644
--- a/packages/mobile/src/harmony-native/components/Text/Text.tsx
+++ b/packages/mobile/src/harmony-native/components/Text/Text.tsx
@@ -12,6 +12,8 @@ export type TextProps = NativeTextProps &
   Omit<BaseTextProps, 'textAlign'> & {
     textAlign?: TextStyle['textAlign']
     textTransform?: TextStyle['textTransform']
+    // Needed for proper text wrapping
+    shrink?: boolean
   }
 
 export const Text = forwardRef<TextBase, TextProps>((props, ref) => {
@@ -24,6 +26,7 @@ export const Text = forwardRef<TextBase, TextProps>((props, ref) => {
     textAlign,
     textTransform,
     shadow,
+    shrink,
     ...other
   } = props
   const theme = useTheme()
@@ -52,7 +55,8 @@ export const Text = forwardRef<TextBase, TextProps>((props, ref) => {
     // Fixes demiBold text misalignment on iOS
     ...(fontWeight === 'demiBold' && Platform.OS === 'ios'
       ? { marginTop: 2 }
-      : {})
+      : {}),
+    ...(shrink ? { flexShrink: 1 } : {})
   })
 
   const isHeading = variant === 'display' || variant === 'heading'
diff --git a/packages/mobile/src/screens/edit-track-screen/components/CollectibleGatedAvailability.tsx b/packages/mobile/src/screens/edit-track-screen/components/CollectibleGatedAvailability.tsx
index f0df04c8e89..8978a2378b4 100644
--- a/packages/mobile/src/screens/edit-track-screen/components/CollectibleGatedAvailability.tsx
+++ b/packages/mobile/src/screens/edit-track-screen/components/CollectibleGatedAvailability.tsx
@@ -9,12 +9,12 @@ import { View, Image, Dimensions } from 'react-native'
 import { TouchableOpacity } from 'react-native-gesture-handler'
 
 import {
+  Hint,
   IconCaretRight,
   IconCollectible,
   IconExternalLink
 } from '@audius/harmony-native'
 import { Text, useLink } from 'app/components/core'
-import { HelpCallout } from 'app/components/help-callout/HelpCallout'
 import { useNavigation } from 'app/hooks/useNavigation'
 import { useSetTrackAvailabilityFields } from 'app/hooks/useSetTrackAvailabilityFields'
 import { flexRowCentered, makeStyles } from 'app/styles'
@@ -115,9 +115,6 @@ const useStyles = makeStyles(({ typography, spacing, palette }) => ({
     width: spacing(5),
     height: spacing(5)
   },
-  noCollectibles: {
-    marginTop: spacing(4)
-  },
   noCollectiblesText: {
     flex: 1,
     flexWrap: 'wrap'
@@ -194,10 +191,6 @@ export const CollectibleGatedAvailability = ({
     navigation.navigate('NFTCollections')
   }, [navigation])
 
-  const renderHelpCalloutContent = useCallback(() => {
-    return hasNoCollectibles ? messages.noCollectibles : null
-  }, [hasNoCollectibles])
-
   return (
     <View style={styles.root}>
       <View style={styles.titleContainer}>
@@ -213,12 +206,7 @@ export const CollectibleGatedAvailability = ({
           </Text>
         </View>
       ) : null}
-      {hasNoCollectibles ? (
-        <HelpCallout
-          style={styles.noCollectibles}
-          content={renderHelpCalloutContent()}
-        />
-      ) : null}
+      {hasNoCollectibles ? <Hint mt='l'>{messages.noCollectibles}</Hint> : null}
       <TouchableOpacity style={styles.learnMore} onPress={onLearnMorePress}>
         <Text weight='bold' color='neutralLight4' fontSize='large'>
           {messages.learnMore}
diff --git a/packages/mobile/src/screens/edit-track-screen/components/HiddenAvailability.tsx b/packages/mobile/src/screens/edit-track-screen/components/HiddenAvailability.tsx
index 44a29df5f5f..6dbd5bb1af0 100644
--- a/packages/mobile/src/screens/edit-track-screen/components/HiddenAvailability.tsx
+++ b/packages/mobile/src/screens/edit-track-screen/components/HiddenAvailability.tsx
@@ -3,9 +3,8 @@ import { useEffect } from 'react'
 import { useField } from 'formik'
 import { Dimensions, View } from 'react-native'
 
-import { IconVisibilityHidden } from '@audius/harmony-native'
+import { Hint, IconVisibilityHidden } from '@audius/harmony-native'
 import { Text } from 'app/components/core'
-import { HelpCallout } from 'app/components/help-callout/HelpCallout'
 import { useSetTrackAvailabilityFields } from 'app/hooks/useSetTrackAvailabilityFields'
 import { makeStyles } from 'app/styles'
 import { useColor } from 'app/utils/theme'
@@ -72,9 +71,6 @@ const useStyles = makeStyles(({ spacing, palette }) => ({
   },
   switch: {
     marginTop: spacing(2)
-  },
-  noHidden: {
-    marginTop: spacing(4)
   }
 }))
 
@@ -128,7 +124,7 @@ export const HiddenAvailability = ({
         </Text>
       </View>
       {isUnlisted && isScheduledRelease ? (
-        <HelpCallout style={styles.noHidden} content={messages.noHiddenHint} />
+        <Hint mt='l'>{messages.noHiddenHint}</Hint>
       ) : null}
       {selected ? (
         <>
diff --git a/packages/mobile/src/screens/edit-track-screen/fields/AccessAndSaleField/PremiumRadioField/PremiumRadioField.tsx b/packages/mobile/src/screens/edit-track-screen/fields/AccessAndSaleField/PremiumRadioField/PremiumRadioField.tsx
index 1ef01d128ad..b1b1857c6b8 100644
--- a/packages/mobile/src/screens/edit-track-screen/fields/AccessAndSaleField/PremiumRadioField/PremiumRadioField.tsx
+++ b/packages/mobile/src/screens/edit-track-screen/fields/AccessAndSaleField/PremiumRadioField/PremiumRadioField.tsx
@@ -1,16 +1,12 @@
-import { useCallback, useEffect, useMemo, useRef } from 'react'
+import { useEffect, useMemo, useRef } from 'react'
 
-import { useFeatureFlag } from '@audius/common/hooks'
-import { Name, isContentUSDCPurchaseGated } from '@audius/common/models'
-import { FeatureFlags } from '@audius/common/services'
+import { isContentUSDCPurchaseGated } from '@audius/common/models'
 import { useField } from 'formik'
 import { Dimensions, View } from 'react-native'
 
-import { Flex, IconCart } from '@audius/harmony-native'
-import { Link, Tag, Text } from 'app/components/core'
-import { HelpCallout } from 'app/components/help-callout/HelpCallout'
+import { IconCart } from '@audius/harmony-native'
+import { Text } from 'app/components/core'
 import { useSetTrackAvailabilityFields } from 'app/hooks/useSetTrackAvailabilityFields'
-import { make, track } from 'app/services/analytics'
 import { makeStyles } from 'app/styles'
 import { useColor } from 'app/utils/theme'
 
@@ -19,8 +15,6 @@ import type { TrackAvailabilitySelectionProps } from '../../../components/types'
 import { TRACK_PREVIEW, TrackPreviewField } from './TrackPreviewField'
 import { TrackPriceField } from './TrackPriceField'
 
-const WAITLIST_TYPEFORM = 'https://link.audius.co/waitlist'
-
 type PremiumRadioFieldProps = TrackAvailabilitySelectionProps
 
 const screenWidth = Dimensions.get('screen').width
@@ -76,17 +70,10 @@ const useStyles = makeStyles(({ spacing, palette }) => ({
 }))
 
 export const PremiumRadioField = (props: PremiumRadioFieldProps) => {
-  const { isEnabled: isUsdcUploadEnabled } = useFeatureFlag(
-    FeatureFlags.USDC_PURCHASES_UPLOAD
-  )
   const { selected, disabled, previousStreamConditions } = props
   const { set: setTrackAvailabilityFields } = useSetTrackAvailabilityFields()
   const styles = useStyles()
 
-  const handlePressWaitListLink = useCallback(() => {
-    track(make({ eventName: Name.TRACK_UPLOAD_CLICK_USDC_WAITLIST_LINK }))
-  }, [])
-
   const secondary = useColor('secondary')
   const neutral = useColor('neutral')
   const neutralLight4 = useColor('neutralLight4')
@@ -130,17 +117,6 @@ export const PremiumRadioField = (props: PremiumRadioFieldProps) => {
     setTrackAvailabilityFields
   ])
 
-  const renderHelpCalloutContent = useCallback(() => {
-    return (
-      <Flex gap='l' alignItems='flex-start'>
-        <Text style={{ flex: 1 }}>{messages.waitlist}</Text>
-        <Link url={WAITLIST_TYPEFORM} onPress={handlePressWaitListLink}>
-          <Text style={styles.link}>{messages.join}</Text>
-        </Link>
-      </Flex>
-    )
-  }, [handlePressWaitListLink, styles.link])
-
   return (
     <View style={styles.root}>
       <View style={styles.titleContainer}>
@@ -156,12 +132,6 @@ export const PremiumRadioField = (props: PremiumRadioFieldProps) => {
           </Text>
         </View>
       ) : null}
-      {!isUsdcUploadEnabled ? (
-        <>
-          <Tag style={styles.comingSoon}>{messages.comingSoon}</Tag>
-          <HelpCallout content={renderHelpCalloutContent()} />
-        </>
-      ) : null}
       {selected ? (
         <View style={styles.fields}>
           <TrackPriceField />
diff --git a/packages/mobile/src/screens/edit-track-screen/screens/AccessAndSaleScreen.tsx b/packages/mobile/src/screens/edit-track-screen/screens/AccessAndSaleScreen.tsx
index 2b84c120f3e..7bf0bcff383 100644
--- a/packages/mobile/src/screens/edit-track-screen/screens/AccessAndSaleScreen.tsx
+++ b/packages/mobile/src/screens/edit-track-screen/screens/AccessAndSaleScreen.tsx
@@ -14,9 +14,8 @@ import { removeNullable } from '@audius/common/utils'
 import type { Nullable } from '@audius/common/utils'
 import { useField, useFormikContext } from 'formik'
 
-import { IconCaretLeft, IconCart } from '@audius/harmony-native'
+import { Hint, IconCaretLeft, IconCart } from '@audius/harmony-native'
 import { Button } from 'app/components/core'
-import { HelpCallout } from 'app/components/help-callout/HelpCallout'
 import { useNavigation } from 'app/hooks/useNavigation'
 import { TopBarIconButton } from 'app/screens/app-screen'
 import { makeStyles } from 'app/styles'
@@ -59,26 +58,15 @@ const useStyles = makeStyles(({ spacing }) => ({
   backButton: {
     marginLeft: -6
   },
-  isRemix: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginTop: spacing(4),
-    marginHorizontal: spacing(4),
-    paddingVertical: spacing(2),
-    paddingHorizontal: spacing(4)
-  },
   listItem: {
     paddingVertical: spacing(6)
   }
 }))
 
 const MarkedAsRemix = () => {
-  const styles = useStyles()
   const [{ value: remixOf }] = useField<RemixOfField>('remix_of')
 
-  return remixOf ? (
-    <HelpCallout style={styles.isRemix} content={messages.markedAsRemix} />
-  ) : null
+  return remixOf ? <Hint m='l'>{messages.markedAsRemix}</Hint> : null
 }
 
 export const AccessAndSaleScreen = () => {
diff --git a/packages/mobile/src/screens/edit-track-screen/screens/ReleaseDateScreen.tsx b/packages/mobile/src/screens/edit-track-screen/screens/ReleaseDateScreen.tsx
index 77b5596a767..70d4428ef30 100644
--- a/packages/mobile/src/screens/edit-track-screen/screens/ReleaseDateScreen.tsx
+++ b/packages/mobile/src/screens/edit-track-screen/screens/ReleaseDateScreen.tsx
@@ -10,10 +10,9 @@ import { Dimensions, View } from 'react-native'
 import DateTimePickerModal from 'react-native-modal-datetime-picker'
 import { useDispatch } from 'react-redux'
 
-import { IconCalendarMonth, Text } from '@audius/harmony-native'
+import { Hint, IconCalendarMonth, Text } from '@audius/harmony-native'
 import { Button } from 'app/components/core'
 import { TextField } from 'app/components/fields'
-import { HelpCallout } from 'app/components/help-callout/HelpCallout'
 import { useNavigation } from 'app/hooks/useNavigation'
 import { makeStyles } from 'app/styles'
 import { useThemeColors, useThemeVariant } from 'app/utils/theme'
@@ -210,14 +209,11 @@ export const ScheduledReleaseRadioField = (props) => {
             isDarkModeEnabled={theme !== Theme.DEFAULT}
           />
           {selected && releaseDateValue ? (
-            <HelpCallout
-              style={styles.releaseDateInput}
-              content={
-                moment(releaseDateValue).isAfter(moment())
-                  ? messages.futureReleaseHint(dayjs().format('z'))
-                  : messages.pastReleaseHint
-              }
-            />
+            <Hint mt='l'>
+              {moment(releaseDateValue).isAfter(moment())
+                ? messages.futureReleaseHint(dayjs().format('z'))
+                : messages.pastReleaseHint}
+            </Hint>
           ) : null}
         </View>
       </View>
@@ -323,7 +319,9 @@ export const ReleaseDateScreen = (props) => {
       icon={IconCalendarMonth}
       header={
         <View style={styles.description}>
-          <Text size='l'>{messages.description}</Text>
+          <Text variant='body' size='l'>
+            {messages.description}
+          </Text>
         </View>
       }
       value={releaseDateType}
diff --git a/packages/mobile/src/screens/edit-track-screen/screens/RemixSettingsScreen.tsx b/packages/mobile/src/screens/edit-track-screen/screens/RemixSettingsScreen.tsx
index ce315cfde17..bc86dc6ea36 100644
--- a/packages/mobile/src/screens/edit-track-screen/screens/RemixSettingsScreen.tsx
+++ b/packages/mobile/src/screens/edit-track-screen/screens/RemixSettingsScreen.tsx
@@ -19,11 +19,10 @@ import { debounce } from 'lodash'
 import { View } from 'react-native'
 import { useDispatch, useSelector } from 'react-redux'
 
-import { IconCaretLeft, IconRemix } from '@audius/harmony-native'
+import { Hint, IconCaretLeft, IconRemix } from '@audius/harmony-native'
 import type { TextProps } from 'app/components/core'
 import { TextInput, Divider, Button, Switch, Text } from 'app/components/core'
 import { InputErrorMessage } from 'app/components/core/InputErrorMessage'
-import { HelpCallout } from 'app/components/help-callout/HelpCallout'
 import { useNavigation } from 'app/hooks/useNavigation'
 import { TopBarIconButton } from 'app/screens/app-screen'
 import { makeStyles } from 'app/styles'
@@ -79,9 +78,6 @@ const useStyles = makeStyles(({ palette, spacing, typography }) => ({
   input: {
     fontSize: typography.fontSize.large
   },
-  changeAvailability: {
-    marginBottom: spacing(16)
-  },
   changeAvailabilityText: {
     flexDirection: 'row',
     flexWrap: 'wrap'
@@ -236,16 +232,13 @@ export const RemixSettingsScreen = () => {
       <View>
         <View style={styles.setting}>
           {isStreamGated ? (
-            <HelpCallout
-              style={styles.changeAvailability}
-              content={`${messages.changeAvailbilityPrefix} ${
-                isUsdcGated
-                  ? messages.premium
-                  : isCollectibleGated
-                  ? messages.collectibleGated
-                  : messages.specialAccess
-              } ${messages.changeAvailbilitySuffix}`}
-            />
+            <Hint mb='xl'>{`${messages.changeAvailbilityPrefix} ${
+              isUsdcGated
+                ? messages.premium
+                : isCollectibleGated
+                ? messages.collectibleGated
+                : messages.specialAccess
+            } ${messages.changeAvailbilitySuffix}`}</Hint>
           ) : null}
           <View style={styles.option}>
             <Text {...labelProps}>{messages.markRemix}</Text>
diff --git a/packages/mobile/src/screens/sign-on-screen/components/EmailInUseHint.tsx b/packages/mobile/src/screens/sign-on-screen/components/EmailInUseHint.tsx
index ad08b92c433..067b2238584 100644
--- a/packages/mobile/src/screens/sign-on-screen/components/EmailInUseHint.tsx
+++ b/packages/mobile/src/screens/sign-on-screen/components/EmailInUseHint.tsx
@@ -1,7 +1,7 @@
 import { createEmailPageMessages } from '@audius/common/messages'
 import { emailSchemaMessages } from '@audius/common/schemas'
 
-import { Hint, IconError, Text, TextLink } from '@audius/harmony-native'
+import { Hint, IconError, TextLink } from '@audius/harmony-native'
 
 export type EmailInUseHintProps = {
   onChangeScreen: (screen: string) => void
@@ -12,12 +12,10 @@ export const EmailInUseHint = (props: EmailInUseHintProps) => {
 
   return (
     <Hint icon={IconError}>
-      <Text variant='body' size='m' textAlign='center'>
-        {emailSchemaMessages.emailInUse}{' '}
-        <TextLink variant='visible' onPress={() => onChangeScreen('sign-in')}>
-          {createEmailPageMessages.signIn}
-        </TextLink>
-      </Text>
+      {emailSchemaMessages.emailInUse}{' '}
+      <TextLink variant='visible' onPress={() => onChangeScreen('sign-in')}>
+        {createEmailPageMessages.signIn}
+      </TextLink>
     </Hint>
   )
 }
diff --git a/packages/web/src/components/leaving-audius-modal/LeavingAudiusModal.tsx b/packages/web/src/components/leaving-audius-modal/LeavingAudiusModal.tsx
index f52be84591a..4a70bfa66fe 100644
--- a/packages/web/src/components/leaving-audius-modal/LeavingAudiusModal.tsx
+++ b/packages/web/src/components/leaving-audius-modal/LeavingAudiusModal.tsx
@@ -43,7 +43,9 @@ export const LeavingAudiusModal = () => {
       </ModalHeader>
       <ModalContent className={styles.content}>
         <Text>{messages.body}</Text>
-        <Hint icon={IconExternalLink}>{link}</Hint>
+        <Hint icon={IconExternalLink} w='100%'>
+          {link}
+        </Hint>
       </ModalContent>
       <ModalFooter className={styles.footer}>
         <Button className={styles.button} variant='secondary' onClick={onClose}>
diff --git a/packages/web/src/components/remix-settings-modal/RemixSettingsModal.tsx b/packages/web/src/components/remix-settings-modal/RemixSettingsModal.tsx
index 3c338a4adad..d2679d8dfa6 100644
--- a/packages/web/src/components/remix-settings-modal/RemixSettingsModal.tsx
+++ b/packages/web/src/components/remix-settings-modal/RemixSettingsModal.tsx
@@ -182,7 +182,7 @@ const RemixSettingsModal = ({
       </ModalHeader>
       <ModalContent>
         {isStreamGated ? (
-          <Hint icon={IconQuestionCircle} mb='l'>{`${
+          <Hint icon={IconQuestionCircle} mb='xl'>{`${
             messages.changeAvailabilityPrefix
           } ${
             isUSDCPurchaseGated
diff --git a/packages/web/src/pages/upload-page/fields/AccessAndSaleMenuFields.tsx b/packages/web/src/pages/upload-page/fields/AccessAndSaleMenuFields.tsx
index 509b8d5a731..c4ada3110f9 100644
--- a/packages/web/src/pages/upload-page/fields/AccessAndSaleMenuFields.tsx
+++ b/packages/web/src/pages/upload-page/fields/AccessAndSaleMenuFields.tsx
@@ -117,9 +117,7 @@ export const AccessAndSaleMenuFields = (props: AccesAndSaleMenuFieldsProps) => {
         <Hint icon={IconQuestionCircle}>{messages.isRemix}</Hint>
       ) : null}
       <Text variant='body'>{messages.modalDescription}</Text>
-      {isPublishDisabled ? (
-        <HelpCallout content={messages.publishDisabled} />
-      ) : null}
+      {isPublishDisabled ? <Hint>{messages.publishDisabled}</Hint> : null}
       <RadioGroup {...availabilityField} aria-label={messages.title}>
         <ModalRadioItem
           icon={<IconVisibilityPublic className={styles.icon} />}