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 = ({
{coSignName} - +
{text}
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}