[PAY-3815] Use PNGs in web UserBadges (#11092)

AudiusProject · Jan 19, 2025 · 80ab773 · 80ab773
1 parent 7b56c1a
commit 80ab773
Show file tree

Hide file tree

Showing 39 changed files with 70 additions and 153 deletions.
diff --git a/packages/harmony/src/foundations/spacing/spacing.ts b/packages/harmony/src/foundations/spacing/spacing.ts
@@ -44,6 +44,8 @@ export const spacing = {
 }
 
 export const iconSizes = {
+  '4xs': 8,
+  '3xs': 10,
   '2xs': 12,
   xs: 14,
   s: 16,

diff --git a/packages/web/src/components/artist-recommendations/ArtistRecommendations.tsx b/packages/web/src/components/artist-recommendations/ArtistRecommendations.tsx
@@ -115,7 +115,7 @@ const ArtistPopoverWrapper = ({
       <UserBadges
         userId={userId}
         className={styles.verified}
-        badgeSize={10}
+        size='3xs'
         inline={true}
       />
     </div>

diff --git a/packages/web/src/components/artist/ArtistCardCover.tsx b/packages/web/src/components/artist/ArtistCardCover.tsx
@@ -68,11 +68,7 @@ export const ArtistCardCover = (props: ArtistCoverProps) => {
             <div className={styles.artistName} onClick={handleClickUser}>
               {name}
             </div>
-            <UserBadges
-              userId={user_id}
-              badgeSize={14}
-              className={styles.iconVerified}
-            />
+            <UserBadges userId={user_id} className={styles.iconVerified} />
           </div>
           <div className={styles.artistHandleWrapper}>
             <div

diff --git a/packages/web/src/components/artist/ArtistChip.tsx b/packages/web/src/components/artist/ArtistChip.tsx
@@ -40,12 +40,7 @@ const ArtistIdentifier = ({
       >
         <div className={styles.name}>
           <span>{name}</span>
-          <UserBadges
-            userId={userId}
-            className={cn(styles.badge)}
-            badgeSize={14}
-            inline
-          />
+          <UserBadges userId={userId} className={cn(styles.badge)} inline />
         </div>
       </ArtistPopover>
       <ArtistPopover
@@ -61,12 +56,7 @@ const ArtistIdentifier = ({
     <div>
       <div className={styles.name}>
         <span>{name}</span>
-        <UserBadges
-          userId={userId}
-          className={cn(styles.badge)}
-          badgeSize={14}
-          inline
-        />
+        <UserBadges userId={userId} className={cn(styles.badge)} inline />
       </div>
       <div className={styles.handle}>@{handle}</div>
     </div>

diff --git a/packages/web/src/components/card-legacy/desktop/UserArtCard.tsx b/packages/web/src/components/card-legacy/desktop/UserArtCard.tsx
@@ -98,7 +98,7 @@ const UserArtCard = g(
           <span>{name}</span>
           <UserBadges
             userId={user_id}
-            badgeSize={16}
+            size='s'
             className={styles.iconVerified}
           />
         </div>

diff --git a/packages/web/src/components/co-sign/HoverInfo.tsx b/packages/web/src/components/co-sign/HoverInfo.tsx
@@ -60,11 +60,7 @@ const HoverInfo = ({
         <div className={styles.text}>
           <div className={styles.name}>
             {coSignName}
-            <UserBadges
-              userId={userId}
-              badgeSize={14}
-              className={styles.iconVerified}
-            />
+            <UserBadges userId={userId} className={styles.iconVerified} />
           </div>
           {text}
         </div>

diff --git a/packages/web/src/components/collectibles/components/CollectiblesPage.tsx b/packages/web/src/components/collectibles/components/CollectiblesPage.tsx
@@ -570,11 +570,7 @@ const CollectiblesPage = (props: CollectiblesPageProps) => {
             <div className={styles.subtitle}>
               {`${collectibleMessages.subtitlePrefix}${name}`}
               {userId && (
-                <UserBadges
-                  className={styles.badges}
-                  userId={userId}
-                  badgeSize={14}
-                />
+                <UserBadges className={styles.badges} userId={userId} />
               )}
             </div>
           </div>

diff --git a/packages/web/src/components/edit/fields/RemixSettingsField/TrackInfo.tsx b/packages/web/src/components/edit/fields/RemixSettingsField/TrackInfo.tsx
@@ -40,11 +40,7 @@ export const TrackInfo = (props: TrackInfoProps) => {
         </Text>{' '}
         <Text tag='span'>{user.name}</Text>
       </Text>
-      <UserBadges
-        className={styles.iconVerified}
-        userId={user.user_id}
-        badgeSize={14}
-      />
+      <UserBadges className={styles.iconVerified} userId={user.user_id} />
     </SelectedValue>
   )
 }
diff --git a/packages/web/src/components/first-upload-modal/FirstUploadModal.tsx b/packages/web/src/components/first-upload-modal/FirstUploadModal.tsx
@@ -95,7 +95,7 @@ const FirstUploadModal = g(({ account, isOpen, close }) => {
               <UserBadges
                 userId={account.user_id}
                 className={styles.iconVerified}
-                badgeSize={12}
+                size='2xs'
               />
             </div>
             <div className={styles.handle}>{`@${account.handle}`}</div>

diff --git a/packages/web/src/components/link/UserLink.tsx b/packages/web/src/components/link/UserLink.tsx
@@ -34,7 +34,7 @@ export const UserLink = (props: UserLinkProps) => {
     noBadges,
     ...other
   } = props
-  const { iconSizes, spacing } = useTheme()
+  const { spacing } = useTheme()
 
   const url = useSelector((state) => {
     const handle = getUser(state, { id: userId })?.handle
@@ -58,9 +58,9 @@ export const UserLink = (props: UserLinkProps) => {
       <Text ellipses>{userName}</Text>
       {noBadges ? null : (
         <UserBadges
-          badgeSize={iconSizes[badgeSize]}
           userId={userId}
           css={{ marginTop: spacing['2xs'] }}
+          size={badgeSize}
         />
       )}
       {children}

diff --git a/packages/web/src/components/nav/desktop/AccountSwitcher/AccountSwitcherRow.tsx b/packages/web/src/components/nav/desktop/AccountSwitcher/AccountSwitcherRow.tsx
@@ -31,7 +31,7 @@ export const AccountSwitcherRow = ({
     userId: user.user_id,
     size: SquareSizes.SIZE_150_BY_150
   })
-  const { iconSizes, color } = useTheme()
+  const { color } = useTheme()
   return (
     <Flex
       ph='xl'
@@ -73,7 +73,7 @@ export const AccountSwitcherRow = ({
           >
             {user.name}
           </Text>
-          <UserBadges userId={user.user_id} badgeSize={iconSizes.xs} inline />
+          <UserBadges userId={user.user_id} inline />
         </Flex>
         <Text
           variant='body'

diff --git a/packages/web/src/components/notification/Notification/TierChangeNotification.tsx b/packages/web/src/components/notification/Notification/TierChangeNotification.tsx
@@ -6,7 +6,7 @@ import {
 } from '@audius/common/store'
 import { capitalize } from 'lodash'
 
-import { audioTierMapPng } from 'components/user-badges/UserBadges'
+import { audioTierMap } from 'components/user-badges/UserBadges'
 import { useSelector } from 'utils/reducer'
 import { fullProfilePage } from 'utils/route'
 
@@ -63,7 +63,7 @@ export const TierChangeNotification = (props: TierChangeNotificationProps) => {
 
   return (
     <NotificationTile notification={notification}>
-      <NotificationHeader icon={<IconTier>{audioTierMapPng[tier]}</IconTier>}>
+      <NotificationHeader icon={<IconTier>{audioTierMap[tier]}</IconTier>}>
         <NotificationTitle className={styles.title}>
           {tier} {messages.unlocked}
         </NotificationTitle>

diff --git a/packages/web/src/components/notification/Notification/components/UserNameLink.tsx b/packages/web/src/components/notification/Notification/components/UserNameLink.tsx
@@ -77,7 +77,7 @@ export const UserNameLink = (props: UserNameLinkProps) => {
       <UserBadges
         inline
         userId={user_id}
-        badgeSize={12}
+        size='2xs'
         className={styles.badges}
       />
     </span>

diff --git a/packages/web/src/components/now-playing/NowPlaying.tsx b/packages/web/src/components/now-playing/NowPlaying.tsx
@@ -466,7 +466,7 @@ const NowPlaying = g(
             {name}
             <UserBadges
               userId={owner_id}
-              badgeSize={16}
+              size='s'
               className={styles.verified}
             />
           </div>

diff --git a/packages/web/src/components/play-bar/desktop/components/PlayingTrackInfo.tsx b/packages/web/src/components/play-bar/desktop/components/PlayingTrackInfo.tsx
@@ -149,11 +149,7 @@ const PlayingTrackInfo = ({
           >
             {artistName}
           </div>
-          <UserBadges
-            userId={artistUserId}
-            badgeSize={12}
-            className={styles.iconVerified}
-          />
+          <UserBadges userId={artistUserId} className={styles.iconVerified} />
         </animated.div>
       </div>
     </div>

diff --git a/packages/web/src/components/profile-info/ProfileInfo.tsx b/packages/web/src/components/profile-info/ProfileInfo.tsx
@@ -12,7 +12,6 @@ type ProfileInfoProps = {
   className?: string
   imgClassName?: string
   centered?: boolean
-  badgeSize?: number
   displayNameClassName?: string
   handleClassName?: string
 }
@@ -21,7 +20,6 @@ export const ProfileInfo = ({
   className = '',
   imgClassName = '',
   centered = true,
-  badgeSize = 12,
   displayNameClassName,
   handleClassName
 }: ProfileInfoProps) => {
@@ -41,11 +39,7 @@ export const ProfileInfo = ({
         <div className={styles.userInfoWrapper}>
           <div className={cn(styles.name, displayNameClassName)}>
             {user.name}
-            <UserBadges
-              userId={user?.user_id}
-              badgeSize={badgeSize}
-              className={styles.badge}
-            />
+            <UserBadges userId={user?.user_id} className={styles.badge} />
           </div>
           <div className={styles.handleContainer}>
             <span

diff --git a/packages/web/src/components/remix-card/RemixCard.tsx b/packages/web/src/components/remix-card/RemixCard.tsx
@@ -68,7 +68,7 @@ const RemixCard = ({
             <UserBadges
               className={styles.badges}
               userId={userId}
-              badgeSize={12}
+              size='2xs'
               inline
             />
           </div>

diff --git a/packages/web/src/components/tipping/feed-tip-tile/FeedTipTile.tsx b/packages/web/src/components/tipping/feed-tip-tile/FeedTipTile.tsx
@@ -92,12 +92,7 @@ const Tippers = ({ tippers, receiver }: TippersProps) => {
       {tippers.slice(0, NUM_FEED_TIPPERS_DISPLAYED).map((tipper, index) => (
         <div key={`tipper-${tipper.user_id}`} className={styles.tipperName}>
           <span>{tipper.name}</span>
-          <UserBadges
-            userId={tipper.user_id}
-            className={styles.badge}
-            badgeSize={14}
-            inline
-          />
+          <UserBadges userId={tipper.user_id} className={styles.badge} inline />
           {index < tippers.length - 1 &&
           index < NUM_FEED_TIPPERS_DISPLAYED - 1 ? (
             <div className={styles.tipperSeparator}>,</div>
@@ -138,7 +133,7 @@ const SendTipButton = ({ user, hideName = false }: SendTipButtonProps) => {
         <UserBadges
           userId={user.user_id}
           className={styles.badge}
-          badgeSize={12}
+          size='2xs'
           inline
         />
       </div>
@@ -254,7 +249,6 @@ export const FeedTipTile = () => {
               <UserBadges
                 userId={tipToDisplay.receiver_id}
                 className={styles.badge}
-                badgeSize={14}
                 inline
               />
             </div>

diff --git a/packages/web/src/components/tipping/tip-audio/SendTip.tsx b/packages/web/src/components/tipping/tip-audio/SendTip.tsx
@@ -41,7 +41,7 @@ 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 { audioTierMapPng } from 'components/user-badges/UserBadges'
+import { audioTierMap } 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 = audioTierMapPng[tier as BadgeTier]
+  const audioBadge = audioTierMap[tier as BadgeTier]
 
   const [isDisabled, setIsDisabled] = useState(true)
 

diff --git a/packages/web/src/components/track/AiTrackSection.tsx b/packages/web/src/components/track/AiTrackSection.tsx
@@ -63,11 +63,7 @@ export const AiTrackSection = ({
           }
         >
           {entity.name}
-          <UserBadges
-            userId={entity.user_id}
-            className={styles.badgeIcon}
-            badgeSize={14}
-          />
+          <UserBadges userId={entity.user_id} className={styles.badgeIcon} />
         </h2>
       </ArtistPopover>
     ),

diff --git a/packages/web/src/components/track/mobile/TrackTile.tsx b/packages/web/src/components/track/mobile/TrackTile.tsx
@@ -285,7 +285,7 @@ const TrackTile = (props: CombinedProps) => {
           <Text variant='body' size='xs' className={styles.coSignText}>
             <div className={styles.name}>
               {coSign.user.name}
-              <UserBadges userId={coSign.user.user_id} badgeSize={8} />
+              <UserBadges userId={coSign.user.user_id} size='4xs' />
             </div>
             {formatCoSign({
               hasReposted: coSign.has_remix_author_reposted,

diff --git a/...ges/web/src/components/transaction-details-modal/components/TransactionDetailsContent.tsx b/...ges/web/src/components/transaction-details-modal/components/TransactionDetailsContent.tsx
@@ -89,12 +89,7 @@ const UserDetails = ({ userId }: UserDetailsProps) => {
           }}
         >
           <span>{usersMap[userId].name}</span>
-          <UserBadges
-            userId={userId}
-            className={styles.badge}
-            badgeSize={14}
-            inline
-          />
+          <UserBadges userId={userId} className={styles.badge} inline />
         </div>
       )}
     </>

diff --git a/packages/web/src/components/user-badges/ProfilePageBadge.tsx b/packages/web/src/components/user-badges/ProfilePageBadge.tsx
@@ -1,4 +1,4 @@
-import { useCallback } from 'react'
+import { cloneElement, useCallback } from 'react'
 
 import { useSelectTierInfo } from '@audius/common/src/hooks/useSelectTierInfo'
 import { BadgeTier } from '@audius/common/src/models/BadgeTier'
@@ -7,7 +7,7 @@ import { setVisibility } from '@audius/common/src/store/ui/modals/parentSlice'
 import cn from 'classnames'
 import { useDispatch } from 'react-redux'
 
-import { audioTierMapPng } from 'components/user-badges/UserBadges'
+import { audioTierMap } from 'components/user-badges/UserBadges'
 
 import styles from './ProfilePageBadge.module.css'
 
@@ -83,7 +83,9 @@ const ProfilePageBadge = ({
 
   if (tier === 'none') return null
 
-  const badge = audioTierMapPng[tier as BadgeTier]
+  const badge = audioTierMap[tier as BadgeTier]
+  if (!badge) return null
+  const badgeWithSize = cloneElement(badge, { size: '3xl' })
 
   return (
     <div
@@ -94,7 +96,7 @@ const ProfilePageBadge = ({
       )}
       onClick={onClick}
     >
-      {badge}
+      {badgeWithSize}
       {!isCompact && <div className={styles.divider} />}
       <div className={styles.text}>
         <span