[PAY-1618] Update DogEar rendering and fix spacing (#3775)

packages/mobile/src/components/card/Card.tsx

@@ -105,7 +105,7 @@ export const Card = (props: CardProps) => {
       {...TileProps}
     >
       {props.type === 'collection' ? (
-        <CollectionDogEar collectionId={props.id} />
+        <CollectionDogEar collectionId={props.id} borderOffset={1} />
       ) : null}
       {renderImage({
         style: [styles.cardImage, props.type === 'user' && styles.userImage]

packages/mobile/src/components/card/CollectionDogEar.tsx

@@ -7,11 +7,12 @@ import { DogEar } from '../core'
 const { getCollection } = cacheCollectionsSelectors
 
 type CollectionDogEarProps = {
+  borderOffset?: number
   collectionId: ID
 }
 
 export const CollectionDogEar = (props: CollectionDogEarProps) => {
-  const { collectionId } = props
+  const { borderOffset, collectionId } = props
 
   const isPrivate = useSelector(
     (state) => getCollection(state, { id: collectionId })?.is_private
@@ -20,7 +21,7 @@ export const CollectionDogEar = (props: CollectionDogEarProps) => {
   const dogEarType = isPrivate ? DogEarType.HIDDEN : null
 
   if (dogEarType) {
-    return <DogEar type={dogEarType} />
+    return <DogEar type={dogEarType} borderOffset={borderOffset} />
   }
 
   return null

packages/mobile/src/components/core/DogEar.tsx

@@ -1,49 +1,61 @@
 import { DogEarType } from '@audius/common'
 import type { ViewStyle } from 'react-native'
 import { View } from 'react-native'
-import LinearGradient from 'react-native-linear-gradient'
 
+import DogEarRectangle from 'app/assets/images/dogEarRectangle.svg'
 import IconCart from 'app/assets/images/iconCart.svg'
 import IconCollectible from 'app/assets/images/iconCollectible.svg'
 import IconHidden from 'app/assets/images/iconHidden.svg'
 import IconSpecialAccess from 'app/assets/images/iconSpecialAccess.svg'
 import IconStar from 'app/assets/images/iconStar.svg'
 import { makeStyles } from 'app/styles'
+import { spacing } from 'app/styles/spacing'
 import { useThemeColors } from 'app/utils/theme'
 
 const useStyles = makeStyles(({ spacing }) => ({
-  bannerIcon: {
+  container: {
     position: 'absolute',
+    top: 0,
+    left: 0,
     zIndex: 10,
-    width: 80,
-    height: 80,
+    width: spacing(12),
+    height: spacing(12),
     overflow: 'hidden',
-    borderRadius: spacing(2),
-
-    shadowOpacity: 0.3,
-    shadowOffset: { width: 0, height: 1 },
-    shadowRadius: 3
+    borderRadius: spacing(2)
   },
 
-  container: {
+  rectangle: {
     position: 'absolute',
-    transform: [{ rotate: '45deg' }, { translateX: -68 }],
-    width: spacing(20),
-    height: spacing(20)
+    top: 0,
+    left: 0,
+    width: spacing(12),
+    height: spacing(12),
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 0
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: spacing(2)
   },
+
   icon: {
-    marginTop: spacing(1),
-    marginLeft: spacing(1)
+    position: 'absolute',
+    width: spacing(4),
+    height: spacing(4),
+    top: spacing(1),
+    left: spacing(1)
   }
 }))
 
-type DogEarProps = {
+export type DogEarProps = {
+  borderOffset?: number
   type: DogEarType
   style?: ViewStyle
 }
 
 export const DogEar = (props: DogEarProps) => {
-  const { type, style } = props
+  const { borderOffset, type, style } = props
   const styles = useStyles()
   const {
     neutral,
@@ -78,15 +90,19 @@ export const DogEar = (props: DogEarProps) => {
     }
   }[type]
 
+  const borderOffsetStyle = borderOffset
+    ? { left: -borderOffset, top: -borderOffset }
+    : undefined
+
   return (
-    <View style={[styles.bannerIcon, style]}>
-      <LinearGradient
-        colors={colors}
-        style={[styles.container]}
-        start={{ x: 1, y: 1 }}
-        end={{ x: 0, y: 0 }}
+    <View style={[styles.container, borderOffsetStyle, style]}>
+      <DogEarRectangle fill={colors[0]} style={styles.rectangle} />
+      <Icon
+        width={spacing(4)}
+        height={spacing(4)}
+        fill={staticWhite}
+        style={styles.icon}
       />
-      <Icon fill={staticWhite} height={16} width={16} style={styles.icon} />
     </View>
   )
 }

packages/mobile/src/components/details-tile/DetailsTile.tsx

@@ -235,7 +235,7 @@ export const DetailsTile = ({
       premiumConditions,
       isUnlisted
     })
-    return dogEarType ? <DogEar type={dogEarType} /> : null
+    return dogEarType ? <DogEar type={dogEarType} borderOffset={1} /> : null
   }
 
   const renderDetailLabels = () => {

packages/mobile/src/components/lineup-tile/LineupTile.tsx

@@ -102,9 +102,7 @@ export const LineupTile = ({
       scaleTo={scale}
       {...TileProps}
     >
-      {dogEarType ? (
-        <DogEar type={dogEarType} style={{ shadowRadius: 1 }} />
-      ) : null}
+      {dogEarType ? <DogEar type={dogEarType} borderOffset={1} /> : null}
       <View>
         <LineupTileTopRight
           duration={duration}

packages/web/src/components/dog-ear/DogEar.module.css

@@ -1,61 +1,49 @@
-.artistPick {
+.container {
   position: absolute;
   top: 0;
   left: 0;
   z-index: 10;
-  width: 80px;
+  border-radius: var(--unit-2) 0px 0px 0px;
+  width: var(--unit-12);
+  height: var(--unit-12);
   pointer-events: none;
+  overflow: hidden;
 }
 
-.container {
+.rectangle {
   position: absolute;
-  transform: rotate(45deg) translateX(-64px);
-  box-shadow: 1px 1px 7px -2px rgba(0, 0, 0, 0.5);
-  width: 80px;
-  height: 80px;
-  overflow: hidden;
+  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 {
-  background: var(--accent-blue);
+  color: var(--accent-blue);
 }
 
 .purchase {
-  background: var(--special-light-green);
+  color: var(--special-light-green);
 }
 
-.star {
-  background: linear-gradient(314.61deg, #7e1bcc 0%, #a22feb 100%);
+.artistPick {
+  color: var(--secondary);
 }
 
 .hidden {
-  background: linear-gradient(314.61deg, #858199 0%, #c2c0cc 100%);
+  color: var(--neutral);
 }
 
-.matrix .container {
-  background: var(--page-header-gradient);
-}
-
-.isMobile .container {
-  transform: rotate(45deg) translateX(-68px);
-}
-
-.artistPick svg {
+.icon {
   position: absolute;
-  left: 0;
-  top: 0;
-  margin-left: 5px;
-  margin-top: 2px;
+  top: var(--unit-1);
+  left: var(--unit-1);
   width: var(--unit-4);
-  height: var(--unit-6);
-}
-
-.isMobile svg {
-  margin: 4px 0px 0px 4px;
-  width: 16px;
-  height: 16px;
+  height: var(--unit-4);
 }
 
-.artistPick svg path {
+.icon path {
   fill: var(--static-white);
 }

packages/web/src/components/dog-ear/DogEar.tsx

@@ -7,6 +7,7 @@ import {
 } from '@audius/stems'
 import cn from 'classnames'
 
+import { ReactComponent as Rectangle } from 'assets/img/dogEarRectangle.svg'
 import { ReactComponent as IconHidden } from 'assets/img/iconHidden.svg'
 import { ReactComponent as IconStar } from 'assets/img/iconStar.svg'
 import { isMobile } from 'utils/clientUtil'
@@ -17,50 +18,52 @@ import styles from './DogEar.module.css'
 export type DogEarProps = {
   type: DogEarType
   className?: string
-  containerClassName?: string
+}
+
+const getIcon = (type: DogEarType) => {
+  switch (type) {
+    case DogEarType.STAR:
+      return IconStar
+    case DogEarType.HIDDEN:
+      return IconHidden
+    case DogEarType.LOCKED:
+      return IconLock
+    case DogEarType.COLLECTIBLE_GATED:
+      return IconCollectible
+    case DogEarType.USDC_PURCHASE:
+      return IconCart
+    case DogEarType.SPECIAL_ACCESS:
+    default:
+      return IconSpecialAccess
+  }
 }
 
 export const DogEar = (props: DogEarProps) => {
-  const { type, className, containerClassName } = props
+  const { type, className } = props
   const isMatrixMode = isMatrix()
   const isMobileMode = isMobile()
-  const renderIcon = () => {
-    switch (type) {
-      case DogEarType.STAR:
-        return <IconStar />
-      case DogEarType.HIDDEN:
-        return <IconHidden />
-      case DogEarType.LOCKED:
-        return <IconLock />
-      case DogEarType.COLLECTIBLE_GATED:
-        return <IconCollectible />
-      case DogEarType.USDC_PURCHASE:
-        return <IconCart />
-      case DogEarType.SPECIAL_ACCESS:
-        return <IconSpecialAccess />
-    }
-  }
+  const Icon = getIcon(type)
 
   return (
     <div
-      className={cn(styles.artistPick, className, {
+      className={cn(styles.container, className, {
         [styles.isMobile]: isMobileMode,
         [styles.matrix]: isMatrixMode
       })}
     >
-      <div
-        className={cn(styles.container, containerClassName, {
+      <Rectangle
+        className={cn(styles.rectangle, {
           [styles.gated]: [
             DogEarType.COLLECTIBLE_GATED,
             DogEarType.SPECIAL_ACCESS,
             DogEarType.LOCKED
           ].includes(type),
           [styles.purchase]: type === DogEarType.USDC_PURCHASE,
-          [styles.star]: type === DogEarType.STAR,
+          [styles.artistPick]: type === DogEarType.STAR,
           [styles.hidden]: type === DogEarType.HIDDEN
         })}
       />
-      {renderIcon()}
+      <Icon className={styles.icon} />
     </div>
   )
 }

packages/web/src/components/tile/Tile.module.css

@@ -1,12 +1,18 @@
 .root {
+  --border-width: 1px;
   display: flex;
   flex-direction: column;
   position: relative;
-  border: 1px solid var(--neutral-light-8);
+  border: var(--border-width) solid var(--neutral-light-8);
   border-radius: var(--unit-2);
   background-color: var(--white);
   transition: all var(--expressive);
-  overflow: hidden;
+}
+
+.borderOffset {
+  position: absolute;
+  top: calc(-1 * var(--border-width));
+  left: calc(-1 * var(--border-width));
 }
 
 .near {