From 652c04993cad89e693953b2c03f61e9bd8fab78d Mon Sep 17 00:00:00 2001
From: Dylan Jeffers <dylan@audius.co>
Date: Tue, 16 Apr 2024 17:32:19 -0700
Subject: [PATCH 1/3] Add hidden and premium variants

---
 .../src/foundations/spacing/spacing.ts        |   1 +
 .../collection/CollectionCard.test.tsx        | 119 +++++++++++++-----
 .../components/collection/CollectionCard.tsx  |  97 +++++++++++---
 .../src/components/dog-ear/DogEar.module.css  |  49 --------
 .../web/src/components/dog-ear/DogEar.tsx     |  72 +++++++----
 .../src/components/now-playing/NowPlaying.tsx |   2 +-
 .../desktop/components/PlayingTrackInfo.tsx   |   2 +-
 .../components/play-bar/mobile/PlayBar.tsx    |   2 +-
 .../track/LockedStatusBadge.module.css        |  19 ---
 .../components/track/LockedStatusBadge.tsx    |  52 +++++---
 packages/web/src/test/test-utils.tsx          |   9 +-
 11 files changed, 255 insertions(+), 169 deletions(-)
 delete mode 100644 packages/web/src/components/dog-ear/DogEar.module.css

diff --git a/packages/harmony/src/foundations/spacing/spacing.ts b/packages/harmony/src/foundations/spacing/spacing.ts
index cbc67cc1757..48b80318cc3 100644
--- a/packages/harmony/src/foundations/spacing/spacing.ts
+++ b/packages/harmony/src/foundations/spacing/spacing.ts
@@ -44,6 +44,7 @@ export const spacing = {
 }
 
 export const iconSizes = {
+  '2xs': 12,
   xs: 14,
   s: 16,
   m: 20,
diff --git a/packages/web/src/components/collection/CollectionCard.test.tsx b/packages/web/src/components/collection/CollectionCard.test.tsx
index e763a9b2349..479a5d1d14b 100644
--- a/packages/web/src/components/collection/CollectionCard.test.tsx
+++ b/packages/web/src/components/collection/CollectionCard.test.tsx
@@ -1,13 +1,14 @@
 import { SquareSizes } from '@audius/common/models'
 import { Text } from '@audius/harmony'
+import { merge } from 'lodash'
 import { Routes, Route } from 'react-router-dom-v5-compat'
 import { describe, it, expect } from 'vitest'
 
-import { render, screen } from 'test/test-utils'
+import { RenderOptions, render, screen } from 'test/test-utils'
 
 import { CollectionCard } from './CollectionCard'
 
-function renderCollectionCard() {
+function renderCollectionCard(options?: RenderOptions) {
   return render(
     <Routes>
       <Route path='/' element={<CollectionCard id={1} size='s' />} />
@@ -20,42 +21,45 @@ function renderCollectionCard() {
         element={<Text variant='heading'>Test User Page</Text>}
       />
     </Routes>,
-    {
-      reduxState: {
-        collections: {
-          entries: {
-            1: {
-              metadata: {
-                playlist_id: 1,
-                playlist_name: 'Test Collection',
-                playlist_owner_id: 2,
-                permalink: '/test-user/test-collection',
-                repost_count: 10,
-                save_count: 5,
-                _cover_art_sizes: {
-                  [SquareSizes.SIZE_150_BY_150]: 'image-small.jpg',
-                  [SquareSizes.SIZE_480_BY_480]: 'image-medium.jpg'
+    merge(
+      {
+        reduxState: {
+          collections: {
+            entries: {
+              1: {
+                metadata: {
+                  playlist_id: 1,
+                  playlist_name: 'Test Collection',
+                  playlist_owner_id: 2,
+                  permalink: '/test-user/test-collection',
+                  repost_count: 10,
+                  save_count: 5,
+                  _cover_art_sizes: {
+                    [SquareSizes.SIZE_150_BY_150]: 'image-small.jpg',
+                    [SquareSizes.SIZE_480_BY_480]: 'image-medium.jpg'
+                  }
                 }
               }
             }
-          }
-        },
-        users: {
-          entries: {
-            2: { metadata: { handle: 'test-user', name: 'Test User' } }
+          },
+          users: {
+            entries: {
+              2: { metadata: { handle: 'test-user', name: 'Test User' } }
+            }
           }
         }
-      }
-    }
+      },
+      options
+    )
   )
 }
 
 describe('CollectionCard', () => {
-  it('renders a button with the label comprising the collection and artist name', () => {
+  it('renders a button with the label comprising the collection and artist name, and favorites and reposts', () => {
     renderCollectionCard()
     expect(
       screen.getByRole('button', {
-        name: /test collection test user/i
+        name: /test collection test user reposts 10 favorites 5/i
       })
     ).toBeInTheDocument()
   })
@@ -89,12 +93,63 @@ describe('CollectionCard', () => {
     ).toBeInTheDocument()
   })
 
-  it('shows the number of reposts and favorites with the correct screen-reader text', () => {
-    renderCollectionCard()
-    expect(screen.getByTitle('Reposts')).toBeInTheDocument()
-    expect(screen.getByText('10')).toBeInTheDocument()
+  it('hidden collections are rendered correctly', () => {
+    renderCollectionCard({
+      reduxState: {
+        collections: { entries: { 1: { metadata: { is_private: true } } } }
+      }
+    })
+
+    expect(
+      screen.getByRole('button', { name: /test collection test user hidden/i })
+    ).toBeInTheDocument()
+  })
+
+  it('premium locked collections are rendered correctly', () => {
+    renderCollectionCard({
+      reduxState: {
+        collections: {
+          entries: {
+            1: {
+              metadata: {
+                access: { stream: false },
+                stream_conditions: {
+                  usdc_purchase: { price: 10, albumTrackPrice: 1, splits: {} }
+                }
+              }
+            }
+          }
+        }
+      }
+    })
+    expect(
+      screen.getByRole('button', {
+        name: /test collection test user reposts 10 favorites 5 available for purchase/i
+      })
+    )
+  })
 
-    expect(screen.getByTitle('Favorites')).toBeInTheDocument()
-    expect(screen.getByText('5')).toBeInTheDocument()
+  it('premium unlocked collections are rendered correctly', () => {
+    renderCollectionCard({
+      reduxState: {
+        collections: {
+          entries: {
+            1: {
+              metadata: {
+                access: { stream: true },
+                stream_conditions: {
+                  usdc_purchase: { price: 10, albumTrackPrice: 1, splits: {} }
+                }
+              }
+            }
+          }
+        }
+      }
+    })
+    expect(
+      screen.getByRole('button', {
+        name: /test collection test user reposts 10 favorites 5 purchased/i
+      })
+    )
   })
 })
diff --git a/packages/web/src/components/collection/CollectionCard.tsx b/packages/web/src/components/collection/CollectionCard.tsx
index 31a6415483f..4dda1c51d0e 100644
--- a/packages/web/src/components/collection/CollectionCard.tsx
+++ b/packages/web/src/components/collection/CollectionCard.tsx
@@ -1,11 +1,18 @@
-import { ID, SquareSizes } from '@audius/common/models'
+import {
+  DogEarType,
+  ID,
+  SquareSizes,
+  isContentUSDCPurchaseGated
+} from '@audius/common/models'
 import { cacheCollectionsSelectors } from '@audius/common/store'
 import { Divider, Flex, Paper, Text } from '@audius/harmony'
 import IconHeart from '@audius/harmony/src/assets/icons/Heart.svg'
 import IconRepost from '@audius/harmony/src/assets/icons/Repost.svg'
 import { Link, useLinkClickHandler } from 'react-router-dom-v5-compat'
 
+import { DogEar } from 'components/dog-ear'
 import { UserLink } from 'components/link'
+import { LockedStatusBadge } from 'components/track/LockedStatusBadge'
 import { useSelector } from 'utils/reducer'
 
 import { CollectionImage } from './CollectionImage'
@@ -13,7 +20,8 @@ const { getCollection } = cacheCollectionsSelectors
 
 const messages = {
   repost: 'Reposts',
-  favorites: 'Favorites'
+  favorites: 'Favorites',
+  hidden: 'Hidden'
 }
 
 type CardSize = 's' | 'm' | 'l'
@@ -51,50 +59,103 @@ export const CollectionCard = (props: CollectionCardProps) => {
     permalink,
     playlist_owner_id,
     repost_count,
-    save_count
+    save_count,
+    is_private,
+    access,
+    stream_conditions
   } = collection
 
+  const isPurchase = isContentUSDCPurchaseGated(stream_conditions)
+
+  const dogEarType = is_private
+    ? DogEarType.HIDDEN
+    : isPurchase && !access.stream
+    ? DogEarType.USDC_PURCHASE
+    : null
+
   return (
     <Paper
       role='button'
       tabIndex={0}
       onClick={handleClick}
-      aria-labelledby={`${id}-title ${id}-artist`}
+      aria-labelledby={`${id}-title ${id}-artist ${id}-repost ${id}-favorite ${id}-condition`}
       direction='column'
+      border='default'
       w={cardSizes[size]}
       css={{ cursor: 'pointer' }}
     >
+      {dogEarType ? (
+        <DogEar
+          type={dogEarType}
+          css={{ position: 'absolute', top: -1, left: -1 }}
+        />
+      ) : null}
       <Flex direction='column' p='s' gap='s'>
         <CollectionImage
           collectionId={id}
           size={cardSizeToCoverArtSizeMap[size]}
           data-testid={`${id}-cover-art`}
         />
-        <Link id={`${id}-title`} to={permalink} css={{ alignSelf: 'center' }}>
-          <Text variant='title' tag='span' color='default' textAlign='center'>
+        <Link
+          id={`${id}-title`}
+          to={permalink}
+          css={{
+            overflow: 'hidden',
+            textOverflow: 'ellipsis'
+          }}
+        >
+          <Text
+            variant='title'
+            tag='span'
+            color='default'
+            textAlign='center'
+            ellipses
+          >
             {playlist_name}
           </Text>
         </Link>
         <UserLink
           id={`${id}-artist`}
           userId={playlist_owner_id}
+          textVariant='body'
           css={{ alignSelf: 'center' }}
         />
       </Flex>
       <Divider orientation='horizontal' />
-      <Flex gap='l' p='s' justifyContent='center'>
-        <Flex gap='xs' alignItems='center'>
-          <IconRepost size='s' color='subdued' title={messages.repost} />
-          <Text color='subdued' variant='body' size='s'>
-            {repost_count}
-          </Text>
-        </Flex>
-        <Flex gap='xs' alignItems='center'>
-          <IconHeart size='s' color='subdued' title={messages.favorites} />{' '}
-          <Text color='subdued' variant='body' size='s'>
-            {save_count}
+      <Flex gap='l' p='s' justifyContent='center' backgroundColor='surface1'>
+        {is_private ? (
+          <Text
+            variant='body'
+            size='s'
+            strength='strong'
+            color='subdued'
+            id={`${id}-condition`}
+          >
+            {messages.hidden}
           </Text>
-        </Flex>
+        ) : (
+          <>
+            <Flex gap='xs' alignItems='center' id={`${id}-repost`}>
+              <IconRepost size='s' color='subdued' title={messages.repost} />
+              <Text variant='label' color='subdued'>
+                {repost_count}
+              </Text>
+            </Flex>
+            <Flex gap='xs' alignItems='center' id={`${id}-favorite`}>
+              <IconHeart size='s' color='subdued' title={messages.favorites} />
+              <Text variant='label' color='subdued'>
+                {save_count}
+              </Text>
+            </Flex>
+            {isPurchase ? (
+              <LockedStatusBadge
+                variant='premium'
+                locked={!access.stream}
+                id={`${id}-condition`}
+              />
+            ) : null}
+          </>
+        )}
       </Flex>
     </Paper>
   )
diff --git a/packages/web/src/components/dog-ear/DogEar.module.css b/packages/web/src/components/dog-ear/DogEar.module.css
deleted file mode 100644
index beb7a3827f4..00000000000
--- a/packages/web/src/components/dog-ear/DogEar.module.css
+++ /dev/null
@@ -1,49 +0,0 @@
-.container {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 10;
-  border-radius: var(--harmony-unit-2) 0px 0px 0px;
-  width: var(--harmony-unit-12);
-  height: var(--harmony-unit-12);
-  pointer-events: none;
-  overflow: hidden;
-}
-
-.rectangle {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-
-/* Note: dogEarRectangle has multiple `path` elements, but we only want to fill one of them.
-That path uses `fill='currentColor'`, allowing us to set `color` here instead of `fill` */
-.gated {
-  color: var(--harmony-blue);
-}
-
-.purchase {
-  color: var(--harmony-light-green);
-}
-
-.artistPick {
-  color: var(--harmony-secondary);
-}
-
-.hidden {
-  color: var(--harmony-neutral);
-}
-
-.icon {
-  position: absolute;
-  top: var(--harmony-unit-1);
-  left: var(--harmony-unit-1);
-  width: var(--harmony-unit-4);
-  height: var(--harmony-unit-4);
-}
-
-.icon path {
-  fill: var(--harmony-static-white);
-}
diff --git a/packages/web/src/components/dog-ear/DogEar.tsx b/packages/web/src/components/dog-ear/DogEar.tsx
index e47141c7115..b46a1961b95 100644
--- a/packages/web/src/components/dog-ear/DogEar.tsx
+++ b/packages/web/src/components/dog-ear/DogEar.tsx
@@ -5,15 +5,13 @@ import {
   IconSpecialAccess,
   IconCart,
   IconCollectible,
-  IconLock
+  IconLock,
+  useTheme,
+  ColorTheme,
+  Box
 } from '@audius/harmony'
-import cn from 'classnames'
 
 import Rectangle from 'assets/img/dogEarRectangle.svg'
-import { useIsMobile } from 'hooks/useIsMobile'
-import { isMatrix } from 'utils/theme/theme'
-
-import styles from './DogEar.module.css'
 
 export type DogEarProps = {
   type: DogEarType
@@ -38,32 +36,56 @@ const getIcon = (type: DogEarType) => {
   }
 }
 
+const getColor = (type: DogEarType, color: ColorTheme['day']) => {
+  switch (type) {
+    case DogEarType.COLLECTIBLE_GATED:
+    case DogEarType.SPECIAL_ACCESS:
+    case DogEarType.LOCKED:
+      return color.special.blue
+    case DogEarType.USDC_PURCHASE:
+      return color.special.lightGreen
+    case DogEarType.STAR:
+      return color.secondary.secondary
+    case DogEarType.HIDDEN:
+      return color.neutral.neutral
+  }
+}
+
 export const DogEar = (props: DogEarProps) => {
   const { type, className } = props
-  const isMatrixMode = isMatrix()
-  const isMobile = useIsMobile()
   const Icon = getIcon(type)
+  const { spacing, color } = useTheme()
+  const tagColor = getColor(type, color)
 
   return (
-    <div
-      className={cn(styles.container, className, {
-        [styles.isMobile]: isMobile,
-        [styles.matrix]: isMatrixMode
-      })}
+    <Box
+      css={{
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        zIndex: 10,
+        overflow: 'hidden'
+      }}
+      borderTopLeftRadius='m'
+      h='3xl'
+      w='3xl'
+      className={className}
     >
       <Rectangle
-        className={cn(styles.rectangle, {
-          [styles.gated]: [
-            DogEarType.COLLECTIBLE_GATED,
-            DogEarType.SPECIAL_ACCESS,
-            DogEarType.LOCKED
-          ].includes(type),
-          [styles.purchase]: type === DogEarType.USDC_PURCHASE,
-          [styles.artistPick]: type === DogEarType.STAR,
-          [styles.hidden]: type === DogEarType.HIDDEN
-        })}
+        css={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          width: '100%',
+          height: '100%',
+          color: tagColor
+        }}
+      />
+      <Icon
+        size='s'
+        color='staticWhite'
+        css={{ position: 'absolute', top: spacing.unit1, left: spacing.unit1 }}
       />
-      <Icon className={styles.icon} />
-    </div>
+    </Box>
   )
 }
diff --git a/packages/web/src/components/now-playing/NowPlaying.tsx b/packages/web/src/components/now-playing/NowPlaying.tsx
index bafcf735e34..32b417dfbde 100644
--- a/packages/web/src/components/now-playing/NowPlaying.tsx
+++ b/packages/web/src/components/now-playing/NowPlaying.tsx
@@ -489,7 +489,7 @@ const NowPlaying = g(
             {shouldShowPurchasePreview ? (
               <LockedStatusBadge
                 locked
-                iconSize='small'
+                iconSize='2xs'
                 coloredWhenLocked
                 variant='premium'
                 text={messages.preview}
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 dcc3df068ab..5bc20e1a252 100644
--- a/packages/web/src/components/play-bar/desktop/components/PlayingTrackInfo.tsx
+++ b/packages/web/src/components/play-bar/desktop/components/PlayingTrackInfo.tsx
@@ -120,7 +120,7 @@ const PlayingTrackInfo = ({
         {shouldShowPreviewLock ? (
           <LockedStatusBadge
             locked
-            iconSize='small'
+            iconSize='2xs'
             coloredWhenLocked
             variant='premium'
             text={messages.preview}
diff --git a/packages/web/src/components/play-bar/mobile/PlayBar.tsx b/packages/web/src/components/play-bar/mobile/PlayBar.tsx
index e504d22c2be..5ffd1817d83 100644
--- a/packages/web/src/components/play-bar/mobile/PlayBar.tsx
+++ b/packages/web/src/components/play-bar/mobile/PlayBar.tsx
@@ -214,7 +214,7 @@ const PlayBar = ({
                   variant='premium'
                   text={messages.preview}
                   coloredWhenLocked
-                  iconSize='small'
+                  iconSize='2xs'
                 />
               </div>
             ) : null}
diff --git a/packages/web/src/components/track/LockedStatusBadge.module.css b/packages/web/src/components/track/LockedStatusBadge.module.css
index db6e1907aa6..f1d9d711734 100644
--- a/packages/web/src/components/track/LockedStatusBadge.module.css
+++ b/packages/web/src/components/track/LockedStatusBadge.module.css
@@ -22,22 +22,3 @@
 .coloredWhenLocked.premium {
   background-color: var(--harmony-light-green);
 }
-
-.icon.medium {
-  width: 14px;
-  height: 14px;
-}
-
-.icon.small {
-  width: 12px;
-  height: 12px;
-}
-
-.icon path {
-  fill: var(--harmony-static-white);
-}
-
-.text {
-  color: var(--harmony-static-white);
-  text-decoration: none;
-}
diff --git a/packages/web/src/components/track/LockedStatusBadge.tsx b/packages/web/src/components/track/LockedStatusBadge.tsx
index a57b5bcf46f..45c221049f6 100644
--- a/packages/web/src/components/track/LockedStatusBadge.tsx
+++ b/packages/web/src/components/track/LockedStatusBadge.tsx
@@ -1,26 +1,37 @@
-import { IconLock, IconLockUnlocked, Text } from '@audius/harmony'
+import { IconLockUnlocked, IconSize, Text } from '@audius/harmony'
+import IconLock from '@audius/harmony/src/assets/icons/Lock.svg'
 import cn from 'classnames'
 
 import styles from './LockedStatusBadge.module.css'
 
+const messages = {
+  premiumLocked: 'Available for purchase',
+  premiumUnlocked: 'Purchased'
+}
+
 export type LockedStatusBadgeProps = {
   locked: boolean
   variant?: 'premium' | 'gated'
   text?: string
   /** Whether the badge is colored when locked */
   coloredWhenLocked?: boolean
-  iconSize?: 'medium' | 'small'
+  iconSize?: IconSize
+  id?: string
 }
 
 /** Renders a small badge with locked or unlocked icon */
-export const LockedStatusBadge = ({
-  locked,
-  variant = 'gated',
-  text,
-  coloredWhenLocked = false,
-  iconSize = 'medium'
-}: LockedStatusBadgeProps) => {
+export const LockedStatusBadge = (props: LockedStatusBadgeProps) => {
+  const {
+    locked,
+    variant = 'gated',
+    text,
+    coloredWhenLocked = false,
+    iconSize = 'xs',
+    id
+  } = props
+
   const LockComponent = locked ? IconLock : IconLockUnlocked
+
   return (
     <div
       className={cn(
@@ -34,18 +45,21 @@ export const LockedStatusBadge = ({
       )}
     >
       <LockComponent
-        className={cn(
-          styles.icon,
-          iconSize === 'medium' ? styles.medium : styles.small
-        )}
+        color='staticWhite'
+        size={iconSize}
+        id={text ? undefined : id}
+        title={
+          text
+            ? undefined
+            : variant === 'premium'
+            ? locked
+              ? messages.premiumLocked
+              : messages.premiumUnlocked
+            : undefined
+        }
       />
       {text ? (
-        <Text
-          className={styles.text}
-          size='xs'
-          variant='label'
-          color='staticWhite'
-        >
+        <Text size='xs' variant='label' color='staticWhite' id={id}>
           {text}
         </Text>
       ) : null}
diff --git a/packages/web/src/test/test-utils.tsx b/packages/web/src/test/test-utils.tsx
index 25e45d6a33c..659bc4c5538 100644
--- a/packages/web/src/test/test-utils.tsx
+++ b/packages/web/src/test/test-utils.tsx
@@ -40,10 +40,11 @@ const TestProviders =
     )
   }
 
-const customRender = (
-  ui: ReactElement,
-  options?: Omit<RenderOptions, 'wrapper'> & TestOptions
-) => render(ui, { wrapper: TestProviders(options), ...options })
+type CustomRenderOptions = Omit<RenderOptions, 'wrapper'> & TestOptions
+
+const customRender = (ui: ReactElement, options?: CustomRenderOptions) =>
+  render(ui, { wrapper: TestProviders(options), ...options })
 
 export * from '@testing-library/react'
+export type { CustomRenderOptions as RenderOptions }
 export { customRender as render }

From 94c6e2dae45abbf0e8c686ed6cb5140271932609 Mon Sep 17 00:00:00 2001
From: Dylan Jeffers <dylan@audius.co>
Date: Tue, 16 Apr 2024 18:51:25 -0700
Subject: [PATCH 2/3] Finalize

---
 .../components/collection/CollectionCard.tsx  | 41 +++++++++----------
 1 file changed, 19 insertions(+), 22 deletions(-)

diff --git a/packages/web/src/components/collection/CollectionCard.tsx b/packages/web/src/components/collection/CollectionCard.tsx
index 4dda1c51d0e..d890ed9e398 100644
--- a/packages/web/src/components/collection/CollectionCard.tsx
+++ b/packages/web/src/components/collection/CollectionCard.tsx
@@ -82,13 +82,10 @@ export const CollectionCard = (props: CollectionCardProps) => {
       direction='column'
       border='default'
       w={cardSizes[size]}
-      css={{ cursor: 'pointer' }}
+      css={{ cursor: 'pointer', overflow: 'unset' }}
     >
       {dogEarType ? (
-        <DogEar
-          type={dogEarType}
-          css={{ position: 'absolute', top: -1, left: -1 }}
-        />
+        <DogEar type={dogEarType} css={{ top: -1, left: -1 }} />
       ) : null}
       <Flex direction='column' p='s' gap='s'>
         <CollectionImage
@@ -96,33 +93,33 @@ export const CollectionCard = (props: CollectionCardProps) => {
           size={cardSizeToCoverArtSizeMap[size]}
           data-testid={`${id}-cover-art`}
         />
-        <Link
+        <Text
           id={`${id}-title`}
-          to={permalink}
-          css={{
-            overflow: 'hidden',
-            textOverflow: 'ellipsis'
-          }}
+          variant='title'
+          color='default'
+          ellipses
+          asChild
         >
-          <Text
-            variant='title'
-            tag='span'
-            color='default'
-            textAlign='center'
-            ellipses
-          >
+          <Link to={permalink} css={{ pointerEvents: 'none' }}>
             {playlist_name}
-          </Text>
-        </Link>
+          </Link>
+        </Text>
         <UserLink
           id={`${id}-artist`}
           userId={playlist_owner_id}
           textVariant='body'
-          css={{ alignSelf: 'center' }}
+          css={{ justifyContent: 'center' }}
         />
       </Flex>
       <Divider orientation='horizontal' />
-      <Flex gap='l' p='s' justifyContent='center' backgroundColor='surface1'>
+      <Flex
+        gap='l'
+        p='s'
+        justifyContent='center'
+        backgroundColor='surface1'
+        borderBottomLeftRadius='m'
+        borderBottomRightRadius='m'
+      >
         {is_private ? (
           <Text
             variant='body'

From f34670ef5aff0c601ed2b1a2be43f437c0d31f30 Mon Sep 17 00:00:00 2001
From: Dylan Jeffers <dylan@audius.co>
Date: Wed, 17 Apr 2024 17:33:31 -0700
Subject: [PATCH 3/3] Address comments

---
 .../components/collection/CollectionCard.tsx  |  4 +-
 .../LockedStatusPill.tsx}                     | 46 +++++++++++--------
 .../components/locked-status-pill/index.ts    |  1 +
 .../src/components/now-playing/NowPlaying.tsx |  4 +-
 .../desktop/components/PlayingTrackInfo.tsx   |  4 +-
 .../components/play-bar/mobile/PlayBar.tsx    |  4 +-
 .../components/PayToUnlockInfo.tsx            |  4 +-
 .../components/track/GatedContentSection.tsx  |  7 +--
 .../track/LockedStatusBadge.module.css        | 24 ----------
 .../components/track/desktop/TrackTile.tsx    |  9 ++--
 .../src/components/track/mobile/TrackTile.tsx |  9 ++--
 11 files changed, 55 insertions(+), 61 deletions(-)
 rename packages/web/src/components/{track/LockedStatusBadge.tsx => locked-status-pill/LockedStatusPill.tsx} (62%)
 create mode 100644 packages/web/src/components/locked-status-pill/index.ts
 delete mode 100644 packages/web/src/components/track/LockedStatusBadge.module.css

diff --git a/packages/web/src/components/collection/CollectionCard.tsx b/packages/web/src/components/collection/CollectionCard.tsx
index d890ed9e398..858a8d1afd3 100644
--- a/packages/web/src/components/collection/CollectionCard.tsx
+++ b/packages/web/src/components/collection/CollectionCard.tsx
@@ -12,7 +12,7 @@ import { Link, useLinkClickHandler } from 'react-router-dom-v5-compat'
 
 import { DogEar } from 'components/dog-ear'
 import { UserLink } from 'components/link'
-import { LockedStatusBadge } from 'components/track/LockedStatusBadge'
+import { LockedStatusPill } from 'components/locked-status-pill'
 import { useSelector } from 'utils/reducer'
 
 import { CollectionImage } from './CollectionImage'
@@ -145,7 +145,7 @@ export const CollectionCard = (props: CollectionCardProps) => {
               </Text>
             </Flex>
             {isPurchase ? (
-              <LockedStatusBadge
+              <LockedStatusPill
                 variant='premium'
                 locked={!access.stream}
                 id={`${id}-condition`}
diff --git a/packages/web/src/components/track/LockedStatusBadge.tsx b/packages/web/src/components/locked-status-pill/LockedStatusPill.tsx
similarity index 62%
rename from packages/web/src/components/track/LockedStatusBadge.tsx
rename to packages/web/src/components/locked-status-pill/LockedStatusPill.tsx
index 45c221049f6..c0425a34540 100644
--- a/packages/web/src/components/track/LockedStatusBadge.tsx
+++ b/packages/web/src/components/locked-status-pill/LockedStatusPill.tsx
@@ -1,15 +1,18 @@
-import { IconLockUnlocked, IconSize, Text } from '@audius/harmony'
+import {
+  Flex,
+  IconLockUnlocked,
+  IconSize,
+  Text,
+  useTheme
+} from '@audius/harmony'
 import IconLock from '@audius/harmony/src/assets/icons/Lock.svg'
-import cn from 'classnames'
-
-import styles from './LockedStatusBadge.module.css'
 
 const messages = {
   premiumLocked: 'Available for purchase',
   premiumUnlocked: 'Purchased'
 }
 
-export type LockedStatusBadgeProps = {
+export type LockedStatusPillProps = {
   locked: boolean
   variant?: 'premium' | 'gated'
   text?: string
@@ -19,8 +22,7 @@ export type LockedStatusBadgeProps = {
   id?: string
 }
 
-/** Renders a small badge with locked or unlocked icon */
-export const LockedStatusBadge = (props: LockedStatusBadgeProps) => {
+export const LockedStatusPill = (props: LockedStatusPillProps) => {
   const {
     locked,
     variant = 'gated',
@@ -32,17 +34,25 @@ export const LockedStatusBadge = (props: LockedStatusBadgeProps) => {
 
   const LockComponent = locked ? IconLock : IconLockUnlocked
 
+  const { color } = useTheme()
+
+  const backgroundColor =
+    !locked || coloredWhenLocked
+      ? variant === 'gated'
+        ? color.special.blue
+        : color.special.lightGreen
+      : color.neutral.n400
+
   return (
-    <div
-      className={cn(
-        styles.container,
-        locked ? styles.locked : styles.unlocked,
-        variant === 'premium' ? styles.premium : styles.gated,
-        {
-          [styles.hasText]: !!text,
-          [styles.coloredWhenLocked]: !!coloredWhenLocked
-        }
-      )}
+    <Flex
+      alignItems='center'
+      justifyContent='center'
+      gap='xs'
+      pv={text ? 'xs' : '2xs'}
+      ph='s'
+      h={16}
+      borderRadius='l'
+      css={{ backgroundColor }}
     >
       <LockComponent
         color='staticWhite'
@@ -63,6 +73,6 @@ export const LockedStatusBadge = (props: LockedStatusBadgeProps) => {
           {text}
         </Text>
       ) : null}
-    </div>
+    </Flex>
   )
 }
diff --git a/packages/web/src/components/locked-status-pill/index.ts b/packages/web/src/components/locked-status-pill/index.ts
new file mode 100644
index 00000000000..41f199262f1
--- /dev/null
+++ b/packages/web/src/components/locked-status-pill/index.ts
@@ -0,0 +1 @@
+export * from './LockedStatusPill'
diff --git a/packages/web/src/components/now-playing/NowPlaying.tsx b/packages/web/src/components/now-playing/NowPlaying.tsx
index 32b417dfbde..46baf1825af 100644
--- a/packages/web/src/components/now-playing/NowPlaying.tsx
+++ b/packages/web/src/components/now-playing/NowPlaying.tsx
@@ -43,6 +43,7 @@ import { useRecord, make } from 'common/store/analytics/actions'
 import CoSign, { Size } from 'components/co-sign/CoSign'
 import { DogEar } from 'components/dog-ear'
 import DynamicImage from 'components/dynamic-image/DynamicImage'
+import { LockedStatusPill } from 'components/locked-status-pill'
 import PlayButton from 'components/play-bar/PlayButton'
 import NextButtonProvider from 'components/play-bar/next-button/NextButtonProvider'
 import PreviousButtonProvider from 'components/play-bar/previous-button/PreviousButtonProvider'
@@ -50,7 +51,6 @@ import RepeatButtonProvider from 'components/play-bar/repeat-button/RepeatButton
 import ShuffleButtonProvider from 'components/play-bar/shuffle-button/ShuffleButtonProvider'
 import { PlayButtonStatus } from 'components/play-bar/types'
 import { GatedConditionsPill } from 'components/track/GatedConditionsPill'
-import { LockedStatusBadge } from 'components/track/LockedStatusBadge'
 import UserBadges from 'components/user-badges/UserBadges'
 import { useAuthenticatedClickCallback } from 'hooks/useAuthenticatedCallback'
 import { useFlag } from 'hooks/useRemoteConfig'
@@ -487,7 +487,7 @@ const NowPlaying = g(
               {title}
             </div>
             {shouldShowPurchasePreview ? (
-              <LockedStatusBadge
+              <LockedStatusPill
                 locked
                 iconSize='2xs'
                 coloredWhenLocked
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 5bc20e1a252..cf179a2df3f 100644
--- a/packages/web/src/components/play-bar/desktop/components/PlayingTrackInfo.tsx
+++ b/packages/web/src/components/play-bar/desktop/components/PlayingTrackInfo.tsx
@@ -19,7 +19,7 @@ import { animated, useSpring } from 'react-spring'
 
 import { Draggable } from 'components/dragndrop'
 import DynamicImage from 'components/dynamic-image/DynamicImage'
-import { LockedStatusBadge } from 'components/track/LockedStatusBadge'
+import { LockedStatusPill } from 'components/locked-status-pill'
 import UserBadges from 'components/user-badges/UserBadges'
 import { useProfilePicture } from 'hooks/useUserProfilePicture'
 import { fullTrackPage } from 'utils/route'
@@ -118,7 +118,7 @@ const PlayingTrackInfo = ({
           {trackTitle}
         </div>
         {shouldShowPreviewLock ? (
-          <LockedStatusBadge
+          <LockedStatusPill
             locked
             iconSize='2xs'
             coloredWhenLocked
diff --git a/packages/web/src/components/play-bar/mobile/PlayBar.tsx b/packages/web/src/components/play-bar/mobile/PlayBar.tsx
index 5ffd1817d83..773b27e1992 100644
--- a/packages/web/src/components/play-bar/mobile/PlayBar.tsx
+++ b/packages/web/src/components/play-bar/mobile/PlayBar.tsx
@@ -22,10 +22,10 @@ import { Dispatch } from 'redux'
 import { make, useRecord } from 'common/store/analytics/actions'
 import FavoriteButton from 'components/alt-button/FavoriteButton'
 import CoSign, { Size } from 'components/co-sign/CoSign'
+import { LockedStatusPill } from 'components/locked-status-pill'
 import PlayButton from 'components/play-bar/PlayButton'
 import TrackingBar from 'components/play-bar/TrackingBar'
 import { PlayButtonStatus } from 'components/play-bar/types'
-import { LockedStatusBadge } from 'components/track/LockedStatusBadge'
 import { useTrackCoverArt } from 'hooks/useTrackCoverArt'
 import { audioPlayer } from 'services/audio-player'
 import { AppState } from 'store/types'
@@ -209,7 +209,7 @@ const PlayBar = ({
             <div className={styles.artist}>{name}</div>
             {shouldShowPreviewLock ? (
               <div className={styles.lockPreview}>
-                <LockedStatusBadge
+                <LockedStatusPill
                   locked
                   variant='premium'
                   text={messages.preview}
diff --git a/packages/web/src/components/premium-content-purchase-modal/components/PayToUnlockInfo.tsx b/packages/web/src/components/premium-content-purchase-modal/components/PayToUnlockInfo.tsx
index 7f297e11523..c699b23d6de 100644
--- a/packages/web/src/components/premium-content-purchase-modal/components/PayToUnlockInfo.tsx
+++ b/packages/web/src/components/premium-content-purchase-modal/components/PayToUnlockInfo.tsx
@@ -3,7 +3,7 @@ import { useCallback } from 'react'
 import { Name } from '@audius/common/models'
 import { Text, TextLink } from '@audius/harmony'
 
-import { LockedStatusBadge } from 'components/track/LockedStatusBadge'
+import { LockedStatusPill } from 'components/locked-status-pill'
 import { make, track } from 'services/analytics'
 import { TERMS_OF_SERVICE } from 'utils/route'
 
@@ -30,7 +30,7 @@ export const PayToUnlockInfo = () => {
         className={styles.header}
       >
         <span>{messages.payToUnlock}</span>
-        <LockedStatusBadge locked />
+        <LockedStatusPill locked />
       </Text>
       <Text className={styles.copy} variant='body'>
         <span>{messages.copyPart1}</span>
diff --git a/packages/web/src/components/track/GatedContentSection.tsx b/packages/web/src/components/track/GatedContentSection.tsx
index 35d9aeaf17f..dbfbc5f1169 100644
--- a/packages/web/src/components/track/GatedContentSection.tsx
+++ b/packages/web/src/components/track/GatedContentSection.tsx
@@ -49,8 +49,9 @@ import { emptyStringGuard } from 'pages/track-page/utils'
 import { AppState } from 'store/types'
 import { profilePage } from 'utils/route'
 
+import { LockedStatusPill } from '../locked-status-pill'
+
 import styles from './GiantTrackTile.module.css'
-import { LockedStatusBadge } from './LockedStatusBadge'
 
 const { getUsers } = cacheUsersSelectors
 const { beginTip } = tippingActions
@@ -317,7 +318,7 @@ const LockedGatedContentSection = ({
     <div className={className}>
       <div className={styles.gatedContentDescriptionContainer}>
         <Flex alignItems='center' gap='s' mb='s'>
-          <LockedStatusBadge
+          <LockedStatusPill
             locked
             variant={isUSDCPurchaseGated ? 'premium' : 'gated'}
           />
@@ -522,7 +523,7 @@ const UnlockedGatedContentSection = ({
         {isOwner ? (
           <IconComponent className={styles.gatedContentIcon} />
         ) : (
-          <LockedStatusBadge
+          <LockedStatusPill
             locked={false}
             variant={
               isContentUSDCPurchaseGated(streamConditions) ? 'premium' : 'gated'
diff --git a/packages/web/src/components/track/LockedStatusBadge.module.css b/packages/web/src/components/track/LockedStatusBadge.module.css
deleted file mode 100644
index f1d9d711734..00000000000
--- a/packages/web/src/components/track/LockedStatusBadge.module.css
+++ /dev/null
@@ -1,24 +0,0 @@
-.container {
-  align-items: center;
-  justify-content: center;
-  gap: var(--harmony-unit-1);
-  background-color: var(--harmony-n-400);
-  border-radius: var(--harmony-unit-20);
-  display: flex;
-  height: var(--harmony-unit-4);
-  padding: var(--harmony-unit-half) var(--harmony-unit-2);
-}
-
-.container.hasText {
-  padding: var(--harmony-unit-1) var(--harmony-unit-2);
-}
-
-.unlocked.gated,
-.coloredWhenLocked.gated {
-  background-color: var(--harmony-blue);
-}
-
-.unlocked.premium,
-.coloredWhenLocked.premium {
-  background-color: var(--harmony-light-green);
-}
diff --git a/packages/web/src/components/track/desktop/TrackTile.tsx b/packages/web/src/components/track/desktop/TrackTile.tsx
index 9673fc24fd7..6480ac86228 100644
--- a/packages/web/src/components/track/desktop/TrackTile.tsx
+++ b/packages/web/src/components/track/desktop/TrackTile.tsx
@@ -36,8 +36,11 @@ import Skeleton from 'components/skeleton/Skeleton'
 import { useAuthenticatedClickCallback } from 'hooks/useAuthenticatedCallback'
 import { useFlag } from 'hooks/useRemoteConfig'
 
+import {
+  LockedStatusPill,
+  LockedStatusPillProps
+} from '../../locked-status-pill'
 import { GatedContentLabel } from '../GatedContentLabel'
-import { LockedStatusBadge, LockedStatusBadgeProps } from '../LockedStatusBadge'
 import { messages } from '../trackTileMessages'
 import {
   TrackTileSize,
@@ -92,9 +95,9 @@ const renderLockedOrPlaysContent = ({
   | 'isStreamGated'
   | 'listenCount'
 > &
-  Pick<LockedStatusBadgeProps, 'variant'>) => {
+  Pick<LockedStatusPillProps, 'variant'>) => {
   if (isStreamGated && !isOwner) {
-    return <LockedStatusBadge locked={!hasStreamAccess} variant={variant} />
+    return <LockedStatusPill locked={!hasStreamAccess} variant={variant} />
   }
 
   const hidePlays = fieldVisibility
diff --git a/packages/web/src/components/track/mobile/TrackTile.tsx b/packages/web/src/components/track/mobile/TrackTile.tsx
index 3476afe5414..3edbd534575 100644
--- a/packages/web/src/components/track/mobile/TrackTile.tsx
+++ b/packages/web/src/components/track/mobile/TrackTile.tsx
@@ -42,7 +42,10 @@ import { TrackTileProps } from 'components/track/types'
 import UserBadges from 'components/user-badges/UserBadges'
 import { useAuthenticatedClickCallback } from 'hooks/useAuthenticatedCallback'
 
-import { LockedStatusBadge, LockedStatusBadgeProps } from '../LockedStatusBadge'
+import {
+  LockedStatusPill,
+  LockedStatusPillProps
+} from '../../locked-status-pill'
 import { messages } from '../trackTileMessages'
 
 import BottomButtons from './BottomButtons'
@@ -85,9 +88,9 @@ const renderLockedOrPlaysContent = ({
   | 'isStreamGated'
   | 'listenCount'
 > &
-  Pick<LockedStatusBadgeProps, 'variant'>) => {
+  Pick<LockedStatusPillProps, 'variant'>) => {
   if (isStreamGated && !isOwner) {
-    return <LockedStatusBadge locked={!hasStreamAccess} variant={variant} />
+    return <LockedStatusPill locked={!hasStreamAccess} variant={variant} />
   }
 
   const hidePlays = fieldVisibility