Convert tier badges back to png from svg [C-1337] (#8105)

Co-authored-by: Nikki Kang <[email protected]>

packages/web/src/components/audio-balance-pill/AUDIOBalancePill.tsx

@@ -6,13 +6,13 @@ import {
 } from '@audius/common/hooks'
 import { accountSelectors } from '@audius/common/store'
 import { isNullOrUndefined, formatWei } from '@audius/common/utils'
-import { IconTokenNoTier } from '@audius/harmony'
 import BN from 'bn.js'
 import cn from 'classnames'
 import { useSelector } from 'react-redux'
 
+import IconNoTierBadge from 'assets/img/[email protected]'
 import Skeleton from 'components/skeleton/Skeleton'
-import { audioTierMapSVG } from 'components/user-badges/UserBadges'
+import { audioTierMapPng } from 'components/user-badges/UserBadges'
 
 import styles from './AUDIOBalancePill.module.css'
 
@@ -32,7 +32,7 @@ export const AudioBalancePill = ({ className }: AudioPillProps) => {
   // we only show the audio balance and respective badge when there is an account
   // so below null-coalescing is okay
   const { tier } = useSelectTierInfo(account?.user_id ?? 0)
-  const audioBadge = audioTierMapSVG[tier]
+  const audioBadge = audioTierMapPng[tier]
 
   return (
     <div className={cn(styles.container, className)}>
@@ -42,7 +42,7 @@ export const AudioBalancePill = ({ className }: AudioPillProps) => {
           width: 20
         })
       ) : (
-        <IconTokenNoTier size='m' />
+        <img alt='no tier' src={IconNoTierBadge} width='20' height='20' />
       )}
       {isNullOrUndefined(totalBalance) ? (
         <Skeleton className={styles.skeleton} />

packages/web/src/components/buy-audio-modal/BuyAudioModal.module.css

@@ -6,7 +6,3 @@
 .modalContent {
   padding-bottom: 0;
 }
-
-.noFill path {
-  fill: revert-layer !important;
-}

packages/web/src/components/buy-audio-modal/BuyAudioModal.tsx

@@ -5,11 +5,11 @@ import {
   Modal,
   ModalContentPages,
   ModalHeader,
-  ModalTitle,
-  IconTokenGold
+  ModalTitle
 } from '@audius/harmony'
 import { useSelector } from 'react-redux'
 
+import IconGoldBadgeSrc from 'assets/img/[email protected]'
 import { useModalState } from 'common/hooks/useModalState'
 
 import styles from './BuyAudioModal.module.css'
@@ -23,6 +23,16 @@ const messages = {
   buyAudio: 'Buy $AUDIO'
 }
 
+const IconGoldBadge = () => (
+  <img
+    draggable={false}
+    src={IconGoldBadgeSrc}
+    alt='Gold Badge Icon'
+    width={24}
+    height={24}
+  />
+)
+
 const stageToPage = (stage: BuyAudioStage) => {
   switch (stage) {
     case BuyAudioStage.START:
@@ -60,10 +70,7 @@ export const BuyAudioModal = () => {
         onClose={handleClose}
         showDismissButton={!inProgress || error}
       >
-        <ModalTitle
-          title={messages.buyAudio}
-          icon={<IconTokenGold size='l' className={styles.noFill} />}
-        />
+        <ModalTitle title={messages.buyAudio} icon={<IconGoldBadge />} />
       </ModalHeader>
       <ModalContentPages
         contentClassName={styles.modalContent}

packages/web/src/components/notification/Notification/TierChangeNotification.tsx

@@ -5,7 +5,7 @@ import {
   BadgeTierInfo
 } from '@audius/common/store'
 
-import { audioTierMapSVG } from 'components/user-badges/UserBadges'
+import { audioTierMapPng } from 'components/user-badges/UserBadges'
 import { useSelector } from 'utils/reducer'
 import { fullProfilePage } from 'utils/route'
 
@@ -62,7 +62,7 @@ export const TierChangeNotification = (props: TierChangeNotificationProps) => {
 
   return (
     <NotificationTile notification={notification}>
-      <NotificationHeader icon={<IconTier>{audioTierMapSVG[tier]}</IconTier>}>
+      <NotificationHeader icon={<IconTier>{audioTierMapPng[tier]}</IconTier>}>
         <NotificationTitle className={styles.title}>
           {tier} {messages.unlocked}
         </NotificationTitle>

packages/web/src/components/tipping/tip-audio/SendTip.tsx

@@ -26,7 +26,6 @@ import {
 } from '@audius/common/utils'
 import {
   IconQuestionCircle,
-  IconTokenNoTier,
   IconArrowRight as IconArrow,
   IconTrophy,
   TokenAmountInput,
@@ -38,10 +37,11 @@ import BN from 'bn.js'
 import cn from 'classnames'
 import { useDispatch, useSelector } from 'react-redux'
 
+import IconNoTierBadge from 'assets/img/[email protected]'
 import { OnRampButton } from 'components/on-ramp-button'
 import Skeleton from 'components/skeleton/Skeleton'
 import Tooltip from 'components/tooltip/Tooltip'
-import { audioTierMapSVG } from 'components/user-badges/UserBadges'
+import { audioTierMapPng } from 'components/user-badges/UserBadges'
 import { useFlag, useRemoteVar } from 'hooks/useRemoteConfig'
 
 import { ProfileInfo } from '../../profile-info/ProfileInfo'
@@ -98,7 +98,7 @@ export const SendTip = () => {
   const { tier } = getTierAndNumberForBalance(
     weiToString(accountBalance ?? (new BN('0') as BNWei))
   )
-  const audioBadge = audioTierMapSVG[tier as BadgeTier]
+  const audioBadge = audioTierMapPng[tier as BadgeTier]
 
   const [isDisabled, setIsDisabled] = useState(true)
 
@@ -185,7 +185,7 @@ export const SendTip = () => {
             width: 16
           })
         ) : (
-          <IconTokenNoTier size='s' />
+          <img alt='no tier' src={IconNoTierBadge} width='16' height='16' />
         )}
         <span className={styles.amountAvailable}>
           {isNullOrUndefined(accountBalance) ? (

packages/web/src/components/tipping/tip-audio/TipAudioModal.tsx

@@ -3,25 +3,25 @@ import { useCallback, useEffect } from 'react'
 import { StringKeys } from '@audius/common/services'
 import {
   accountSelectors,
-  tippingSelectors,
   tippingActions,
-  walletActions,
-  TippingSendStatus
+  tippingSelectors,
+  TippingSendStatus,
+  walletActions
 } from '@audius/common/store'
 import { Nullable } from '@audius/common/utils'
 import {
+  IconVerified as IconSuccess,
   Modal,
   ModalHeader,
-  ModalTitle,
-  IconVerified as IconSuccess,
-  IconTokenGold
+  ModalTitle
 } from '@audius/harmony'
 import cn from 'classnames'
 import { useDispatch } from 'react-redux'
 // eslint-disable-next-line no-restricted-imports -- TODO: migrate to @react-spring/web
 import { animated, Transition } from 'react-spring/renderprops.cjs'
 import { usePrevious } from 'react-use'
 
+import IconGoldBadge from 'assets/img/[email protected]'
 import { useSelector } from 'common/hooks/useSelector'
 import { useRemoteVar } from 'hooks/useRemoteConfig'
 
@@ -42,10 +42,12 @@ const messages = {
 }
 
 const GoldBadgeIconImage = () => (
-  <IconTokenGold
-    size='l'
-    aria-label='Gold badge'
-    className={styles.iconToken}
+  <img
+    draggable={false}
+    alt='Gold badge'
+    src={IconGoldBadge}
+    width={24}
+    height={24}
   />
 )
 

packages/web/src/components/user-badges/ProfilePageBadge.tsx

@@ -6,7 +6,7 @@ import { modalsActions } from '@audius/common/store'
 import cn from 'classnames'
 import { useDispatch } from 'react-redux'
 
-import { audioTierMapSVG } from 'components/user-badges/UserBadges'
+import { audioTierMapPng } from 'components/user-badges/UserBadges'
 
 import styles from './ProfilePageBadge.module.css'
 const { setVisibility } = modalsActions
@@ -83,7 +83,7 @@ const ProfilePageBadge = ({
 
   if (tier === 'none') return null
 
-  const badge = audioTierMapSVG[tier as BadgeTier]
+  const badge = audioTierMapPng[tier as BadgeTier]
 
   return (
     <div

packages/web/src/components/user-badges/UserBadges.tsx

@@ -12,6 +12,11 @@ import {
 } from '@audius/harmony'
 import cn from 'classnames'
 
+import IconBronzeBadge from 'assets/img/[email protected]'
+import IconGoldBadge from 'assets/img/[email protected]'
+import IconPlatinumBadge from 'assets/img/[email protected]'
+import IconSilverBadge from 'assets/img/[email protected]'
+
 import styles from './UserBadges.module.css'
 
 export const audioTierMapSVG: { [tier in BadgeTier]: Nullable<ReactElement> } =
@@ -23,6 +28,48 @@ export const audioTierMapSVG: { [tier in BadgeTier]: Nullable<ReactElement> } =
     platinum: <IconPlatinumBadgeSVG />
   }
 
+export const audioTierMapPng: {
+  [tier in BadgeTier]: Nullable<ReactElement>
+} = {
+  none: null,
+  bronze: (
+    <img
+      draggable={false}
+      alt=''
+      src={IconBronzeBadge as string}
+      width='40'
+      height='40'
+    />
+  ),
+  silver: (
+    <img
+      draggable={false}
+      width='40'
+      height='40'
+      alt=''
+      src={IconSilverBadge as string}
+    />
+  ),
+  gold: (
+    <img
+      draggable={false}
+      width='40'
+      height='40'
+      alt=''
+      src={IconGoldBadge as string}
+    />
+  ),
+  platinum: (
+    <img
+      draggable={false}
+      width='40'
+      height='40'
+      alt=''
+      src={IconPlatinumBadge as string}
+    />
+  )
+}
+
 type UserBadgesProps = {
   userId: ID
   badgeSize: number
@@ -47,13 +94,15 @@ const UserBadges = ({
   badgeSize,
   className,
   noContentClassName = '',
+  useSVGTiers = false,
   inline = false,
   isVerifiedOverride,
   overrideTier
 }: UserBadgesProps) => {
   const { tier: currentTier, isVerified } = useSelectTierInfo(userId)
   const tier = overrideTier || currentTier
-  const audioBadge = audioTierMapSVG[tier as BadgeTier]
+  const tierMap = useSVGTiers ? audioTierMapSVG : audioTierMapPng
+  const audioBadge = tierMap[tier as BadgeTier]
   const hasContent = isVerifiedOverride ?? (isVerified || audioBadge)
 
   if (inline) {

packages/web/src/pages/audio-rewards-page/config.tsx

@@ -1,23 +1,23 @@
 import { ReactNode } from 'react'
 
 import { ChallengeName, ChallengeRewardID } from '@audius/common/models'
-import { challengeRewardsConfig, Nullable } from '@audius/common/utils'
+import { Nullable, challengeRewardsConfig } from '@audius/common/utils'
 import {
   IconArrowRight,
   IconCheck,
   IconCloudUpload,
-  IconComponent,
-  IconTokenGold
+  IconComponent
 } from '@audius/harmony'
 
+import IconGoldBadge from 'assets/img/[email protected]'
 import {
-  profilePage,
+  EXPLORE_PAGE,
+  EXPLORE_PREMIUM_TRACKS_PAGE,
+  LIBRARY_PAGE,
   SETTINGS_PAGE,
   TRENDING_PAGE,
   UPLOAD_PAGE,
-  EXPLORE_PAGE,
-  LIBRARY_PAGE,
-  EXPLORE_PREMIUM_TRACKS_PAGE
+  profilePage
 } from 'utils/route'
 
 type LinkButtonType =
@@ -38,7 +38,13 @@ type LinkButtonInfo = {
 }
 
 const GoldBadgeIconImage = () => (
-  <IconTokenGold size='l' aria-label='Gold badge' />
+  <img
+    draggable={false}
+    alt='Gold badge'
+    src={IconGoldBadge}
+    width={24}
+    height={24}
+  />
 )
 
 const linkButtonMap: Record<LinkButtonType, LinkButtonInfo> = {