diff --git a/packages/harmony/src/foundations/spacing/spacing.ts b/packages/harmony/src/foundations/spacing/spacing.ts
index bb0950a9065..e6a682bcc3e 100644
--- 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
index c167e694204..f5b03efd9d3 100644
--- a/packages/web/src/components/artist-recommendations/ArtistRecommendations.tsx
+++ b/packages/web/src/components/artist-recommendations/ArtistRecommendations.tsx
@@ -115,7 +115,7 @@ const ArtistPopoverWrapper = ({
diff --git a/packages/web/src/components/artist/ArtistCardCover.tsx b/packages/web/src/components/artist/ArtistCardCover.tsx
index 24d08046cb2..7b3c405dc33 100644
--- 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) => {
{name}
-
+
{name}
-
+
{name}
-
+
@{handle}
diff --git a/packages/web/src/components/card-legacy/desktop/UserArtCard.tsx b/packages/web/src/components/card-legacy/desktop/UserArtCard.tsx
index 6ad07d31344..7caa16a9177 100644
--- 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(
{name}
diff --git a/packages/web/src/components/co-sign/HoverInfo.tsx b/packages/web/src/components/co-sign/HoverInfo.tsx
index 9401322b1e3..635cb480a76 100644
--- a/packages/web/src/components/co-sign/HoverInfo.tsx
+++ b/packages/web/src/components/co-sign/HoverInfo.tsx
@@ -60,11 +60,7 @@ const HoverInfo = ({
diff --git a/packages/web/src/components/collectibles/components/CollectiblesPage.tsx b/packages/web/src/components/collectibles/components/CollectiblesPage.tsx
index de7737c4eda..d04b42d9f67 100644
--- 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) => {
{`${collectibleMessages.subtitlePrefix}${name}`}
{userId && (
-
+
)}
diff --git a/packages/web/src/components/edit/fields/RemixSettingsField/TrackInfo.tsx b/packages/web/src/components/edit/fields/RemixSettingsField/TrackInfo.tsx
index d99b41a6799..ec33dbb3b84 100644
--- 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) => {
{' '}
{user.name}
-
+
)
}
diff --git a/packages/web/src/components/first-upload-modal/FirstUploadModal.tsx b/packages/web/src/components/first-upload-modal/FirstUploadModal.tsx
index 594880d6cb1..11387c0a85c 100644
--- 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 }) => {
{`@${account.handle}`}
diff --git a/packages/web/src/components/link/UserLink.tsx b/packages/web/src/components/link/UserLink.tsx
index 2ddbfcb7696..08d753c82f8 100644
--- 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) => {
{userName}
{noBadges ? null : (
)}
{children}
diff --git a/packages/web/src/components/nav/desktop/AccountSwitcher/AccountSwitcherRow.tsx b/packages/web/src/components/nav/desktop/AccountSwitcher/AccountSwitcherRow.tsx
index 2c83a70e1ae..eeb4ab8636e 100644
--- 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 (
{user.name}
-
+
{
return (
- {audioTierMapPng[tier]}}>
+ {audioTierMap[tier]}}>
{tier} {messages.unlocked}
diff --git a/packages/web/src/components/notification/Notification/components/UserNameLink.tsx b/packages/web/src/components/notification/Notification/components/UserNameLink.tsx
index 486886abac7..d6f39668023 100644
--- 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) => {
diff --git a/packages/web/src/components/now-playing/NowPlaying.tsx b/packages/web/src/components/now-playing/NowPlaying.tsx
index dbe5860d885..0256a1b2b0a 100644
--- 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}
diff --git a/packages/web/src/components/play-bar/desktop/components/PlayingTrackInfo.tsx b/packages/web/src/components/play-bar/desktop/components/PlayingTrackInfo.tsx
index 66b94eafc69..b56def74cb6 100644
--- 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}
-
+
diff --git a/packages/web/src/components/profile-info/ProfileInfo.tsx b/packages/web/src/components/profile-info/ProfileInfo.tsx
index 534fc7b40e3..5c4d0407004 100644
--- 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 = ({
{user.name}
-
+
diff --git a/packages/web/src/components/tipping/feed-tip-tile/FeedTipTile.tsx b/packages/web/src/components/tipping/feed-tip-tile/FeedTipTile.tsx
index f5926d42632..6ed0854d27a 100644
--- 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) => (
{tipper.name}
-
+
{index < tippers.length - 1 &&
index < NUM_FEED_TIPPERS_DISPLAYED - 1 ? (
,
@@ -138,7 +133,7 @@ const SendTipButton = ({ user, hideName = false }: SendTipButtonProps) => {
@@ -254,7 +249,6 @@ export const FeedTipTile = () => {
diff --git a/packages/web/src/components/tipping/tip-audio/SendTip.tsx b/packages/web/src/components/tipping/tip-audio/SendTip.tsx
index 01b628a6619..e9b0f076e6b 100644
--- 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/tokenBadgePurple16@2x.webp'
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
index 1c74377ecf6..4479437a057 100644
--- 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}
-
+
),
diff --git a/packages/web/src/components/track/mobile/TrackTile.tsx b/packages/web/src/components/track/mobile/TrackTile.tsx
index 1a66176802f..d8526f579fd 100644
--- 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) => {
{coSign.user.name}
-
+
{formatCoSign({
hasReposted: coSign.has_remix_author_reposted,
diff --git a/packages/web/src/components/transaction-details-modal/components/TransactionDetailsContent.tsx b/packages/web/src/components/transaction-details-modal/components/TransactionDetailsContent.tsx
index d4df39eb8ef..5429bccd440 100644
--- a/packages/web/src/components/transaction-details-modal/components/TransactionDetailsContent.tsx
+++ b/packages/web/src/components/transaction-details-modal/components/TransactionDetailsContent.tsx
@@ -89,12 +89,7 @@ const UserDetails = ({ userId }: UserDetailsProps) => {
}}
>
{usersMap[userId].name}
-
+
)}
>
diff --git a/packages/web/src/components/user-badges/ProfilePageBadge.tsx b/packages/web/src/components/user-badges/ProfilePageBadge.tsx
index 6e1e34d8aca..8c39ea1d4ec 100644
--- 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 (
- {badge}
+ {badgeWithSize}
{!isCompact &&
}
} = {
none: null,
- bronze: (
-
- ),
- silver: (
-
- ),
- gold: (
-
- ),
- platinum: (
-
- )
+ bronze: ,
+ silver: ,
+ gold: ,
+ platinum:
}
type UserBadgesProps = {
userId: ID
- badgeSize: number
+ size?: IconSize
className?: string
inline?: boolean
@@ -70,7 +41,7 @@ type UserBadgesProps = {
const UserBadges = ({
userId,
- badgeSize,
+ size = 'xs',
className,
inline = false,
isVerifiedOverride,
@@ -78,7 +49,7 @@ const UserBadges = ({
}: UserBadgesProps) => {
const { tier: currentTier, isVerified } = useSelectTierInfo(userId)
const tier = overrideTier || currentTier
- const tierMap = audioTierMapPng
+ const tierMap = audioTierMap
const audioBadge = tierMap[tier as BadgeTier]
const hasContent = (isVerifiedOverride ?? isVerified) || audioBadge
@@ -95,10 +66,9 @@ const UserBadges = ({
)}
>
{(isVerifiedOverride ?? isVerified) && (
-
+
)}
- {audioBadge &&
- cloneElement(audioBadge, { height: badgeSize, width: badgeSize })}
+ {audioBadge && cloneElement(audioBadge, { size })}
)
}
diff --git a/packages/web/src/components/user-name-and-badges/UserNameAndBadges.tsx b/packages/web/src/components/user-name-and-badges/UserNameAndBadges.tsx
index 1c86206bd13..90bdac35506 100644
--- a/packages/web/src/components/user-name-and-badges/UserNameAndBadges.tsx
+++ b/packages/web/src/components/user-name-and-badges/UserNameAndBadges.tsx
@@ -55,12 +55,7 @@ const UserNameAndBadgesImpl = (props: UserNameAndBadgesImplProps) => {
>
{user.name}
-
+
)
diff --git a/packages/web/src/pages/ai-attributed-tracks-page/components/desktop/AiPage.tsx b/packages/web/src/pages/ai-attributed-tracks-page/components/desktop/AiPage.tsx
index 1b77916aeba..00f0123fbc8 100644
--- a/packages/web/src/pages/ai-attributed-tracks-page/components/desktop/AiPage.tsx
+++ b/packages/web/src/pages/ai-attributed-tracks-page/components/desktop/AiPage.tsx
@@ -41,7 +41,7 @@ const AiPage = g(({ title, user, getLineupProps, goToArtistPage }) => {
diff --git a/packages/web/src/pages/ai-attributed-tracks-page/components/mobile/AiPage.tsx b/packages/web/src/pages/ai-attributed-tracks-page/components/mobile/AiPage.tsx
index d4ef82a2bff..55596f02e1b 100644
--- a/packages/web/src/pages/ai-attributed-tracks-page/components/mobile/AiPage.tsx
+++ b/packages/web/src/pages/ai-attributed-tracks-page/components/mobile/AiPage.tsx
@@ -71,7 +71,7 @@ const AiPage = g(({ title, user, getLineupProps, goToArtistPage }) => {
{user.name}
diff --git a/packages/web/src/pages/chat-page/components/ChatUser.tsx b/packages/web/src/pages/chat-page/components/ChatUser.tsx
index 6b3ec1c7a92..ea2dc92cf17 100644
--- a/packages/web/src/pages/chat-page/components/ChatUser.tsx
+++ b/packages/web/src/pages/chat-page/components/ChatUser.tsx
@@ -35,7 +35,7 @@ export const ChatUser = ({
{user.name}
-
+
diff --git a/packages/web/src/pages/chat-page/components/ComposePreviewInfo.tsx b/packages/web/src/pages/chat-page/components/ComposePreviewInfo.tsx
index 1eb4fa2f5c3..13b00864c2f 100644
--- a/packages/web/src/pages/chat-page/components/ComposePreviewInfo.tsx
+++ b/packages/web/src/pages/chat-page/components/ComposePreviewInfo.tsx
@@ -34,7 +34,7 @@ const ComposePreviewInfo = (props: ComposePreviewInfoProps) => {
{name}
-
+
diff --git a/packages/web/src/pages/dashboard-page/components/ArtistCard.tsx b/packages/web/src/pages/dashboard-page/components/ArtistCard.tsx
index 00de4254d04..bf76661d18c 100644
--- a/packages/web/src/pages/dashboard-page/components/ArtistCard.tsx
+++ b/packages/web/src/pages/dashboard-page/components/ArtistCard.tsx
@@ -48,7 +48,7 @@ export const ArtistCard = ({ userId, handle, name }: ArtistCardProps) => {
{name}
-
+
{`@${handle}`}
diff --git a/packages/web/src/pages/deleted-page/components/desktop/DeletedPage.tsx b/packages/web/src/pages/deleted-page/components/desktop/DeletedPage.tsx
index 68e2ba60593..6f5c16fd1f0 100644
--- a/packages/web/src/pages/deleted-page/components/desktop/DeletedPage.tsx
+++ b/packages/web/src/pages/deleted-page/components/desktop/DeletedPage.tsx
@@ -121,7 +121,7 @@ const DeletedPage = g(
{user.name}
diff --git a/packages/web/src/pages/deleted-page/components/mobile/DeletedPage.tsx b/packages/web/src/pages/deleted-page/components/mobile/DeletedPage.tsx
index 68cfc0d7972..f3750c178e7 100644
--- a/packages/web/src/pages/deleted-page/components/mobile/DeletedPage.tsx
+++ b/packages/web/src/pages/deleted-page/components/mobile/DeletedPage.tsx
@@ -113,7 +113,7 @@ const DeletedPage = g(
{user.name}
diff --git a/packages/web/src/pages/profile-page/components/EditableName.tsx b/packages/web/src/pages/profile-page/components/EditableName.tsx
index 2f0e357a923..0e2f1b7d4d7 100644
--- a/packages/web/src/pages/profile-page/components/EditableName.tsx
+++ b/packages/web/src/pages/profile-page/components/EditableName.tsx
@@ -63,7 +63,7 @@ export const EditableName = (props: EditableNameProps) => {
{name}
diff --git a/packages/web/src/pages/profile-page/components/mobile/ProfileHeader.tsx b/packages/web/src/pages/profile-page/components/mobile/ProfileHeader.tsx
index 4fc9c7436da..d20a27984e3 100644
--- a/packages/web/src/pages/profile-page/components/mobile/ProfileHeader.tsx
+++ b/packages/web/src/pages/profile-page/components/mobile/ProfileHeader.tsx
@@ -333,7 +333,7 @@ const ProfileHeader = ({
diff --git a/packages/web/src/pages/remixes-page/components/desktop/RemixesPage.tsx b/packages/web/src/pages/remixes-page/components/desktop/RemixesPage.tsx
index a665dfa56fa..9bf76e66839 100644
--- a/packages/web/src/pages/remixes-page/components/desktop/RemixesPage.tsx
+++ b/packages/web/src/pages/remixes-page/components/desktop/RemixesPage.tsx
@@ -65,7 +65,7 @@ const RemixesPage = g(
diff --git a/packages/web/src/pages/remixes-page/components/mobile/RemixesPage.tsx b/packages/web/src/pages/remixes-page/components/mobile/RemixesPage.tsx
index ce733b8eb66..e6bedd1e75e 100644
--- a/packages/web/src/pages/remixes-page/components/mobile/RemixesPage.tsx
+++ b/packages/web/src/pages/remixes-page/components/mobile/RemixesPage.tsx
@@ -97,7 +97,7 @@ const RemixesPage = g(
{user.name}
diff --git a/packages/web/src/pages/settings-page/components/desktop/ManagerMode/AccountListItem/ArtistInfo.tsx b/packages/web/src/pages/settings-page/components/desktop/ManagerMode/AccountListItem/ArtistInfo.tsx
index 432081c749d..5927cb2ca11 100644
--- a/packages/web/src/pages/settings-page/components/desktop/ManagerMode/AccountListItem/ArtistInfo.tsx
+++ b/packages/web/src/pages/settings-page/components/desktop/ManagerMode/AccountListItem/ArtistInfo.tsx
@@ -1,5 +1,5 @@
import { SquareSizes, UserMetadata } from '@audius/common/models'
-import { Flex, Text, useTheme } from '@audius/harmony'
+import { Flex, Text } from '@audius/harmony'
import DynamicImage from 'components/dynamic-image/DynamicImage'
import UserBadges from 'components/user-badges/UserBadges'
@@ -12,7 +12,6 @@ export const ArtistInfo = ({ user }: { user: UserMetadata }) => {
userId: user.user_id,
size: SquareSizes.SIZE_150_BY_150
})
- const { iconSizes } = useTheme()
return (
{
{user.name}
-
+
{`@${user.handle}`}
diff --git a/packages/web/src/pages/settings-page/components/desktop/VerificationModal.tsx b/packages/web/src/pages/settings-page/components/desktop/VerificationModal.tsx
index 2bc2579afc5..c278f5def6a 100644
--- a/packages/web/src/pages/settings-page/components/desktop/VerificationModal.tsx
+++ b/packages/web/src/pages/settings-page/components/desktop/VerificationModal.tsx
@@ -190,7 +190,7 @@ const SuccessBody = ({ handle, userId, name, goToRoute }: SuccessBodyProps) => {
{name}
diff --git a/packages/web/src/pages/settings-page/components/mobile/VerificationPage.tsx b/packages/web/src/pages/settings-page/components/mobile/VerificationPage.tsx
index 014daf70a07..8c38dcccabc 100644
--- a/packages/web/src/pages/settings-page/components/mobile/VerificationPage.tsx
+++ b/packages/web/src/pages/settings-page/components/mobile/VerificationPage.tsx
@@ -193,7 +193,7 @@ const SuccessBody = ({ handle, userId, name, goToRoute }: SuccessBodyProps) => {
{name}