[QA-1448] Fix user badge spacing (#9302)

Author: Kyle-Shanks

packages/web/src/components/track/GatedContentSection.tsx

@@ -639,20 +639,22 @@ export const GatedContentSection = ({
         mouseEnterDelay={0.1}
         component='span'
       >
-        <h2
-          className={styles.gatedContentOwner}
-          onClick={() =>
-            dispatch(pushRoute(profilePage(emptyStringGuard(entity.handle))))
-          }
-        >
-          {entity.name}
+        <Flex gap='xs' alignItems='center'>
+          <h2
+            className={styles.gatedContentOwner}
+            onClick={() =>
+              dispatch(pushRoute(profilePage(emptyStringGuard(entity.handle))))
+            }
+          >
+            {entity.name}
+          </h2>
           <UserBadges
             userId={entity.user_id}
             className={styles.badgeIcon}
             badgeSize={14}
             useSVGTiers
           />
-        </h2>
+        </Flex>
       </ArtistPopover>
     ),
     [dispatch]
@@ -661,7 +663,7 @@ export const GatedContentSection = ({
   if (!streamConditions) return null
   if (!shouldDisplay) return null
 
-  if (hasStreamAccess) {
+  if (!hasStreamAccess) {
     return (
       <div className={cn(styles.gatedContentSection, fadeIn, wrapperClassName)}>
         <UnlockedGatedContentSection

packages/web/src/components/user-badges/UserBadges.module.css

@@ -1,9 +1,9 @@
 .container {
   display: flex;
   overflow: visible;
+  gap: 4px;
 }
 
-.container svg,
-.inlineContainer svg {
+.inlineContainer svg:first-child {
   margin-right: 4px !important;
 }

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

@@ -101,19 +101,16 @@ const UserBadges = ({
 
   if (!hasContent) return null
 
-  if (inline) {
-    return (
-      <span className={cn(styles.inlineContainer, className)}>
-        {(isVerifiedOverride ?? isVerified) && (
-          <IconVerified height={badgeSize} width={badgeSize} />
-        )}
-        {audioBadge &&
-          cloneElement(audioBadge, { height: badgeSize, width: badgeSize })}
-      </span>
-    )
-  }
   return (
-    <span className={cn(styles.container, className)}>
+    <span
+      className={cn(
+        {
+          [styles.inlineContainer]: inline,
+          [styles.container]: !inline
+        },
+        className
+      )}
+    >
       {(isVerifiedOverride ?? isVerified) && (
         <IconVerified height={badgeSize} width={badgeSize} />
       )}