@linktr.ee/messaging-react 3.9.0-rc-1783580190 → 3.9.1-rc-1783576271

package/src/components/LockedAttachment/components/Received/Card.tsx

@@ -0,0 +1,191 @@
+import { CheckCircleIcon, ImagesIcon } from '@phosphor-icons/react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+
+import { getSourceType } from '../../../AttachmentCard'
+import type {
+  LockedAttachmentBaseProps,
+  LockedAttachmentSource,
+} from '../../types'
+import CardBody from '../_shared/CardBody'
+import GalleryThumbnail from '../_shared/GalleryThumbnail'
+import LockedCardShell from '../_shared/LockedCardShell'
+import LockedThumbnail from '../_shared/LockedThumbnail'
+
+import ReceivedCardActions from './CardActions'
+
+export interface ReceivedCardProps extends LockedAttachmentBaseProps {
+  /**
+   * Called when the recipient clicks Unlock on an unpaid attachment.
+   * Use this to open a checkout flow. Omit to hide the Unlock button.
+   */
+  onUnlockClick?: () => void
+  /**
+   * Called to fetch the attachment source — fired automatically when
+   * `paymentStatus` transitions to `'paid'`, or immediately on click when
+   * `paymentStatus` is already `'paid'`. Return a `LockedAttachmentSource`
+   * to unlock the card.
+   */
+  onFetchSource?: () => Promise<LockedAttachmentSource | void>
+  /**
+   * Called when the recipient clicks Download on an unlocked card.
+   * Omit to hide the Download button.
+   */
+  onDownloadClick?: () => void
+  /**
+   * When true, shows a loading spinner on the Unlock button.
+   * Driven by the LockedAttachmentContext (e.g. checkout in progress).
+   */
+  isUnlocking?: boolean
+}
+
+/**
+ * The card the recipient sees in chat for a paid attachment.
+ * Matches the Received column of the messaging design system in Figma:
+ * locked → blurred thumbnail + Unlock CTA, unlocked → clear image + Download CTA.
+ */
+const ReceivedCard: React.FC<ReceivedCardProps> = ({
+  title,
+  amountText,
+  thumbnailUrl,
+  mimeType = 'application/octet-stream',
+  detail,
+  gallery,
+  onUnlockClick,
+  onFetchSource,
+  onDownloadClick,
+  paymentStatus,
+  isUnlocking = false,
+}) => {
+  const isGallery = (gallery?.length ?? 0) >= 2
+  const [source, setSource] = useState<LockedAttachmentSource | undefined>()
+
+  const cardRef = useRef<HTMLDivElement>(null)
+  const fetchingRef = useRef(false)
+
+  const onFetchSourceRef = useRef(onFetchSource)
+  onFetchSourceRef.current = onFetchSource
+
+  const effectiveSourceUrl = source?.sourceUrl
+  const effectiveRedeemUrl = source?.redeemUrl
+
+  const fetchSource = useCallback(async (): Promise<void> => {
+    if (fetchingRef.current) return
+    fetchingRef.current = true
+    try {
+      const result = await onFetchSourceRef.current?.()
+      if (result) setSource(result)
+    } finally {
+      fetchingRef.current = false
+    }
+  }, [])
+
+  const handleUnlockClick = useCallback(() => {
+    if (paymentStatus === 'paid') {
+      void fetchSource()
+    } else {
+      onUnlockClick?.()
+    }
+  }, [paymentStatus, fetchSource, onUnlockClick])
+
+  // Auto-fetch the source once the paid card scrolls into view.
+  useEffect(() => {
+    if (!cardRef.current) return
+    if (paymentStatus !== 'paid' || source !== undefined) return
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          void fetchSource()
+          observer.disconnect()
+        }
+      },
+      { threshold: 1.0 }
+    )
+
+    observer.observe(cardRef.current)
+    return () => observer.disconnect()
+  }, [paymentStatus, source, fetchSource])
+
+  // For gallery, the per-item sources are carried by `gallery` itself, so
+  // the lock state is driven by paymentStatus rather than the single
+  // `effectiveSourceUrl`. Everything else still respects the source fetch.
+  const isLocked = isGallery
+    ? paymentStatus !== 'paid'
+    : effectiveSourceUrl === undefined
+  const sourceType = getSourceType(mimeType)
+
+  const statusBadge =
+    paymentStatus === 'paid' ? (
+      <React.Fragment>
+        <span className="text-xs font-medium text-black/55">&bull;</span>
+        <span className="text-xs font-medium text-[#008236]">Purchased</span>
+        <CheckCircleIcon className="size-4 text-[#008236]" weight="bold" />
+      </React.Fragment>
+    ) : amountText != null ? (
+      <React.Fragment>
+        <span className="text-xs font-medium text-black/55">&bull;</span>
+        <span className="text-xs font-medium text-black/55">{amountText}</span>
+      </React.Fragment>
+    ) : null
+
+  // For gallery, ReceivedCardActions falls back to a plain <button>
+  // (no anchor) because the gallery has no single sourceUrl to link to —
+  // the per-item sources live on `gallery` itself.
+  const actionSourceUrl = isGallery ? undefined : effectiveSourceUrl
+
+  return (
+    <LockedCardShell
+      variant="light"
+      rootRef={cardRef}
+      data-testid="locked-attachment"
+    >
+      {isGallery ? (
+        <GalleryThumbnail
+          variant="light"
+          gallery={gallery!}
+          title={title}
+          showLocked={isLocked}
+          paymentStatus={paymentStatus}
+        />
+      ) : (
+        <LockedThumbnail
+          variant="light"
+          mimeType={mimeType}
+          thumbnailUrl={thumbnailUrl}
+          title={title}
+          source={source}
+          showLocked={isLocked}
+          paymentStatus={paymentStatus}
+          containedImage={
+            !isLocked && (sourceType === 'image' || sourceType === 'document')
+          }
+        />
+      )}
+
+      <CardBody
+        variant="light"
+        title={title}
+        mimeType={mimeType}
+        detail={detail}
+        statusBadge={statusBadge}
+        icon={
+          isGallery ? (
+            <ImagesIcon className="size-5 shrink-0 text-black/55" />
+          ) : undefined
+        }
+        action={
+          <ReceivedCardActions
+            isLocked={isLocked}
+            isUnlocking={isUnlocking}
+            sourceUrl={actionSourceUrl}
+            redeemUrl={effectiveRedeemUrl}
+            onUnlockClicked={handleUnlockClick}
+            onDownloadClicked={onDownloadClick}
+          />
+        }
+      />
+    </LockedCardShell>
+  )
+}
+
+export default ReceivedCard

package/src/components/{CustomMessage/LockedAttachment/components/Media → LockedAttachment/components/Received}/CardActions.tsx

@@ -1,8 +1,6 @@
 import { DownloadSimpleIcon, LockSimpleIcon } from '@phosphor-icons/react'
 import React from 'react'
 
-import LoadingDots from '../_shared/LoadingDots'
-
 export interface ReceivedCardActionsProps {
   /** Whether the card is currently locked. Drives which CTA we render. */
   isLocked: boolean
@@ -21,7 +19,7 @@ export interface ReceivedCardActionsProps {
 }
 
 const buttonClass =
-  'mt-3 inline-flex h-10 w-full items-center justify-center gap-2 rounded-full bg-[#121110] px-4 text-sm font-medium leading-none text-white hover:bg-[#2a2928]'
+  'mt-3 inline-flex h-10 w-full items-center justify-center gap-2 rounded-full bg-[#121110] px-4 text-sm font-medium leading-none text-white hover:bg-[#2a2928] disabled:opacity-70'
 
 /**
  * Renders the primary CTA below the body of a Received card.
@@ -44,13 +42,10 @@ const ReceivedCardActions: React.FC<ReceivedCardActionsProps> = ({
         type="button"
         onClick={onUnlockClicked}
         disabled={isUnlocking}
-        aria-label={isUnlocking ? 'Unlocking' : 'Unlock'}
-        aria-busy={isUnlocking}
-        title={isUnlocking ? 'Unlocking' : 'Unlock'}
         className={buttonClass}
       >
         {isUnlocking ? (
-          <LoadingDots />
+          <span className="size-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
         ) : (
           <React.Fragment>
             <LockSimpleIcon className="size-4" weight="fill" />
@@ -67,7 +62,6 @@ const ReceivedCardActions: React.FC<ReceivedCardActionsProps> = ({
       return (
         <a
           href={href}
-          aria-label="Download"
           target="_blank"
           rel="noopener noreferrer"
           onClick={onDownloadClicked}
@@ -83,7 +77,6 @@ const ReceivedCardActions: React.FC<ReceivedCardActionsProps> = ({
       <button
         type="button"
         onClick={onDownloadClicked}
-        aria-label="Download"
         className={buttonClass}
       >
         <DownloadSimpleIcon className="size-4" weight="bold" />

package/src/components/LockedAttachment/components/Received/index.ts

@@ -0,0 +1,2 @@
+export { default as ReceivedCard } from './Card'
+export type { ReceivedCardProps } from './Card'

package/src/components/LockedAttachment/components/Sent/Card.tsx

@@ -0,0 +1,177 @@
+import { CheckCircleIcon, ImagesIcon } from '@phosphor-icons/react'
+import React, { useCallback, useRef, useState } from 'react'
+
+import type {
+  LockedAttachmentBaseProps,
+  LockedAttachmentSource,
+} from '../../types'
+import CardBody from '../_shared/CardBody'
+import GalleryThumbnail from '../_shared/GalleryThumbnail'
+import LockedCardShell from '../_shared/LockedCardShell'
+import LockedThumbnail from '../_shared/LockedThumbnail'
+
+export interface SentCardProps extends LockedAttachmentBaseProps {
+  /** Placeholder shown in the title slot when no title is set. */
+  placeholderTitle?: string
+  /** Fired the first time the sender taps the thumbnail to preview their own attachment. */
+  onPreviewClick?: () => void
+  /**
+   * Lazily loads the underlying source so the sender can preview the attachment.
+   * Called the first time the thumbnail is tapped; the returned source is cached
+   * and reused on subsequent toggles.
+   */
+  onFetchSource?: () => Promise<LockedAttachmentSource | void>
+}
+
+/**
+ * The card the sender sees in chat after a paid attachment has been posted.
+ * Matches the Sent column of the messaging design system in Figma.
+ */
+const SentCard: React.FC<SentCardProps> = ({
+  title,
+  mimeType = 'application/octet-stream',
+  thumbnailUrl,
+  detail,
+  amountText,
+  placeholderTitle = 'Attachment title',
+  paymentStatus,
+  gallery,
+  onPreviewClick,
+  onFetchSource,
+}) => {
+  const [source, setSource] = useState<LockedAttachmentSource | undefined>()
+  const [isPreviewVisible, setIsPreviewVisible] = useState(false)
+  const [isLoadingPreview, setIsLoadingPreview] = useState(false)
+  const fetchingRef = useRef(false)
+
+  const isGallery = (gallery?.length ?? 0) >= 2
+
+  const handleToggle = useCallback(async () => {
+    onPreviewClick?.()
+    if (isPreviewVisible) {
+      setIsPreviewVisible(false)
+      return
+    }
+    // Gallery items carry their own per-item sources on the `gallery` prop, so
+    // we just flip visibility — no async source fetch is needed.
+    if (isGallery) {
+      setIsPreviewVisible(true)
+      return
+    }
+    if (source) {
+      setIsPreviewVisible(true)
+      return
+    }
+    if (!onFetchSource) return
+    if (fetchingRef.current) return
+    fetchingRef.current = true
+    setIsLoadingPreview(true)
+    try {
+      const result = await onFetchSource()
+      if (result) {
+        setSource(result)
+        setIsPreviewVisible(true)
+      }
+    } finally {
+      fetchingRef.current = false
+      setIsLoadingPreview(false)
+    }
+  }, [isPreviewVisible, isGallery, source, onPreviewClick, onFetchSource])
+
+  // Gallery is always previewable for the sender because each item's source
+  // is already provided up-front via `gallery[*].sourceUrl`.
+  const togglePreview =
+    isGallery || onFetchSource || onPreviewClick ? handleToggle : undefined
+  const showLocked = !isPreviewVisible
+  const isBusy = isLoadingPreview
+
+  const statusBadge =
+    paymentStatus === 'paid' ? (
+      <React.Fragment>
+        <span className="text-xs font-medium text-white/55">&bull;</span>
+        <span className="text-xs font-medium text-[#34c759]">Sold</span>
+        <CheckCircleIcon className="size-4 text-[#34c759]" weight="bold" />
+      </React.Fragment>
+    ) : amountText ? (
+      <React.Fragment>
+        <span className="text-xs font-medium text-white/55">&bull;</span>
+        <span className="text-xs font-medium text-white/55">{amountText}</span>
+      </React.Fragment>
+    ) : null
+
+  const thumbnail = isGallery ? (
+    <GalleryThumbnail
+      variant="dark"
+      gallery={gallery!}
+      title={title}
+      showLocked={showLocked}
+      paymentStatus={paymentStatus}
+    />
+  ) : (
+    <LockedThumbnail
+      variant="dark"
+      mimeType={mimeType}
+      thumbnailUrl={thumbnailUrl}
+      title={title}
+      source={source}
+      showLocked={showLocked}
+      paymentStatus={paymentStatus}
+    />
+  )
+
+  return (
+    <LockedCardShell variant="dark">
+      {togglePreview ? (
+        // Uses a `<div role="button">` rather than a native `<button>` so the
+        // gallery's carousel arrow `<button>`s rendered inside `thumbnail`
+        // don't produce invalid nested interactive elements.
+        <div
+          role="button"
+          tabIndex={isBusy ? -1 : 0}
+          aria-label="Toggle preview"
+          aria-busy={isBusy}
+          aria-pressed={!showLocked}
+          aria-disabled={isBusy || undefined}
+          onClick={isBusy ? undefined : togglePreview}
+          onKeyDown={(e) => {
+            if (isBusy) return
+            // Only handle keys that originate on the wrapper itself, not on
+            // inner interactive elements (gallery carousel arrows). Without
+            // this guard, pressing Enter/Space on a focused child would bubble
+            // up and toggle the preview in addition to activating the child.
+            if (e.target !== e.currentTarget) return
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault()
+              void togglePreview()
+            }
+          }}
+          className={
+            !isBusy
+              ? 'block w-full cursor-pointer text-left'
+              : 'block w-full text-left'
+          }
+        >
+          {thumbnail}
+        </div>
+      ) : (
+        thumbnail
+      )}
+
+      <CardBody
+        variant="dark"
+        title={title}
+        placeholderTitle={placeholderTitle}
+        mimeType={mimeType}
+        detail={detail}
+        statusBadge={statusBadge}
+        icon={
+          isGallery ? (
+            <ImagesIcon className="size-5 shrink-0 text-white/55" />
+          ) : undefined
+        }
+      />
+    </LockedCardShell>
+  )
+}
+
+export default SentCard

package/src/components/LockedAttachment/components/Sent/index.ts

@@ -0,0 +1,2 @@
+export { default as SentCard } from './Card'
+export type { SentCardProps } from './Card'

package/src/components/{CustomMessage/LockedAttachment → LockedAttachment}/components/_shared/CardBody.tsx

@@ -1,12 +1,12 @@
 import classNames from 'classnames'
 import React from 'react'
 
-import { renderTypeIcon } from '../../../../AttachmentCard'
+import { renderTypeIcon } from '../../../AttachmentCard'
 
-import type { CardVariant } from './MediaShell'
+import type { LockedCardVariant } from './LockedCardShell'
 
 export interface CardBodyProps {
-  variant: CardVariant
+  variant: LockedCardVariant
   title?: string
   placeholderTitle?: string
   mimeType: string
@@ -20,7 +20,7 @@ export interface CardBodyProps {
 }
 
 /**
- * Title + status row layout shared by Composer and `LockedAttachment.Media`.
+ * Title + status row layout shared by Composer / Sent / Received cards.
  * Layout matches the Figma `Container > Labels` group (16px h-padding, 12px v-padding,
  * 4px gap between title and status row, 4px gap inside status row).
  */
@@ -36,8 +36,8 @@ const CardBody: React.FC<CardBodyProps> = ({
   trailingAction,
 }) => {
   const isDark = variant === 'dark'
-  const displayTitle = title || placeholderTitle
-  const titleDimmed = !title
+  const displayTitle = isDark ? (title ?? placeholderTitle) : (title ?? '')
+  const titleDimmed = isDark && !title
 
   const typeIcon =
     icon ??
@@ -56,8 +56,7 @@ const CardBody: React.FC<CardBodyProps> = ({
           {displayTitle.trim() !== '' && (
             <p
               className={classNames('truncate text-base font-medium leading-6', {
-                'text-black/90': !isDark && !titleDimmed,
-                'text-black/30': !isDark && titleDimmed,
+                'text-black/90': !isDark,
                 'text-white/30': isDark && titleDimmed,
                 'text-white': isDark && !titleDimmed,
               })}

package/src/components/{CustomMessage/LockedAttachment → LockedAttachment}/components/_shared/GalleryThumbnail.tsx

@@ -1,18 +1,23 @@
-import { CaretLeftIcon, CaretRightIcon } from '@phosphor-icons/react'
+import {
+  CaretLeftIcon,
+  CaretRightIcon,
+  LockOpenIcon,
+  LockSimpleIcon,
+  PlayIcon,
+} from '@phosphor-icons/react'
 import classNames from 'classnames'
 import React, { useState } from 'react'
 
-import { AttachmentThumbnail, getSourceType } from '../../../../AttachmentCard'
+import { AttachmentThumbnail, getSourceType } from '../../../AttachmentCard'
 import type {
   LockedAttachmentGalleryItem,
   PaymentStatus,
 } from '../../types'
 
-import { LockBadge } from './LockBadge'
-import type { CardVariant } from './MediaShell'
+import type { LockedCardVariant } from './LockedCardShell'
 
 export interface GalleryThumbnailProps {
-  variant: CardVariant
+  variant: LockedCardVariant
   gallery: LockedAttachmentGalleryItem[]
   title?: string
   /** When true, all items are shown blurred + the locked/play badge is overlaid. */
@@ -47,8 +52,24 @@ const GalleryThumbnail: React.FC<GalleryThumbnailProps> = ({
   const current = gallery[safeIndex]
   const isVideoItem = isPlayableItem(current)
 
+  // Center badge: PLAY for video items, LOCK for non-video locked items.
+  // Unlocked image items show no center badge — the image is the content.
+  const centerBadge = (() => {
+    if (isVideoItem) {
+      return <PlayIcon className="size-6" weight="fill" />
+    }
+    if (showLocked) {
+      return paymentStatus === 'paid' ? (
+        <LockOpenIcon className="size-6" weight="fill" />
+      ) : (
+        <LockSimpleIcon className="size-6" weight="fill" />
+      )
+    }
+    return null
+  })()
+
   // Stop propagation so arrow taps don't bubble up to the outer preview-toggle
-  // wrapper on PreviewMediaCard / OwnMediaCard.
+  // wrapper on ComposerCard / SentCard.
   const goPrev = (e: React.MouseEvent) => {
     e.stopPropagation()
     setIndex((i) => Math.max(0, i - 1))
@@ -65,22 +86,14 @@ const GalleryThumbnail: React.FC<GalleryThumbnailProps> = ({
   // Locked + unlocked render entirely separate trees so the locked state
   // doesn't end up stacking a blurred `<img>` on top of an underlying
   // `AttachmentThumbnail` (whose `bg-white/10` poster shell otherwise
-  // shows through as a visible horizontal seam).
-  //
-  // The locked placeholder is absolutely positioned, so it needs the fixed
-  // 337/386 box for height; unlocked content (video, natural-sized image)
-  // manages its own height and can expand/shrink per item.
+  // shows through as a visible horizontal seam at the 16:9 boundary
+  // inside the taller 337/386 gallery aspect).
   //
   // The locked branch uses `filter: blur` on a single full-size `<img>`
   // — not `backdrop-filter` — so the rounded corners are clipped
-  // normally without any clip-path workarounds (see SingleThumbnail).
+  // normally without any clip-path workarounds (see LockedThumbnail).
   return (
-    <div
-      className={classNames(
-        'group relative overflow-hidden rounded-t-md',
-        showLocked ? 'aspect-[337/386]' : undefined
-      )}
-    >
+    <div className="relative aspect-[337/386] overflow-hidden rounded-t-md">
       {showLocked ? (
         <div
           className={classNames(
@@ -102,25 +115,20 @@ const GalleryThumbnail: React.FC<GalleryThumbnailProps> = ({
         </div>
       ) : (
         <AttachmentThumbnail
-          key={safeIndex}
           mimeType={current.mimeType}
           sourceUrl={current.sourceUrl}
           thumbnailUrl={current.thumbnailUrl}
           title={title}
           variant={variant}
-          mediaPlayerProps={{ autoPlay: true }}
         />
       )}
 
-      {/* LOCK while locked. Once unlocked, video/audio autoplays via
-          `mediaPlayerProps` and MediaPlayer already has its own inline
-          controls, so no separate Play affordance is shown. */}
-      {showLocked && (
-        <LockBadge
-          paymentStatus={paymentStatus}
-          isPlayable={isVideoItem}
-          isLocked={showLocked}
-        />
+      {centerBadge && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="flex size-12 items-center justify-center rounded-full bg-black/25 text-white">
+            {centerBadge}
+          </div>
+        </div>
       )}
 
       {total > 1 && (
@@ -150,8 +158,8 @@ const GalleryThumbnail: React.FC<GalleryThumbnailProps> = ({
             <CaretRightIcon className="size-5" weight="bold" />
           </button>
 
-          <div className="pointer-events-none absolute bottom-10 left-1/2 flex size-8 -translate-x-1/2 items-center justify-center rounded-full bg-black/30">
-            <span className="text-xs font-medium leading-none text-white">
+          <div className="pointer-events-none absolute bottom-5 left-1/2 -translate-x-1/2 rounded-lg bg-black/30 px-2 py-1">
+            <span className="text-xs font-medium leading-4 text-white">
               {safeIndex + 1}/{total}
             </span>
           </div>

package/src/components/LockedAttachment/components/_shared/LockBadge.tsx

@@ -0,0 +1,39 @@
+import {
+  LockOpenIcon,
+  LockSimpleIcon,
+  PlayIcon,
+} from '@phosphor-icons/react'
+import React from 'react'
+
+import { getSourceType } from '../../../AttachmentCard'
+import type { PaymentStatus } from '../../types'
+
+/**
+ * Centered 48x48 lock badge that overlays the thumbnail of any locked attachment.
+ * Uses `bg-black/25` from the design system's `alpha-black-25` token.
+ *
+ * For playable media (video/audio), the badge shows a play icon instead of a
+ * lock — matching the convention used by `GalleryThumbnail`.
+ */
+export const LockBadge: React.FC<{
+  paymentStatus?: PaymentStatus
+  mimeType?: string
+}> = ({ paymentStatus, mimeType }) => {
+  const sourceType = mimeType ? getSourceType(mimeType) : undefined
+  const isPlayable = sourceType === 'video' || sourceType === 'audio'
+
+  const Icon = isPlayable
+    ? PlayIcon
+    : paymentStatus === 'paid'
+      ? LockOpenIcon
+      : LockSimpleIcon
+  return (
+    <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+      <div className="flex size-12 items-center justify-center rounded-full bg-black/25 text-white">
+        <Icon className="size-6" weight="fill" />
+      </div>
+    </div>
+  )
+}
+
+export default LockBadge

package/src/components/{CustomMessage/LockedAttachment/components/_shared/MediaShell.tsx → LockedAttachment/components/_shared/LockedCardShell.tsx}

@@ -1,10 +1,10 @@
 import classNames from 'classnames'
 import React from 'react'
 
-export type CardVariant = 'dark' | 'light'
+export type LockedCardVariant = 'dark' | 'light'
 
-export interface MediaShellProps {
-  variant: CardVariant
+export interface LockedCardShellProps {
+  variant: LockedCardVariant
   children: React.ReactNode
   rootRef?: React.Ref<HTMLDivElement>
   'data-testid'?: string
@@ -12,9 +12,9 @@ export interface MediaShellProps {
 
 /**
  * Outer chrome for every LockedAttachment card.
- * Mirrors the 16px radius treatment from the Figma design system.
+ * Mirrors the `shadow-400` + 16px radius treatment from the Figma design system.
  */
-const MediaShell: React.FC<MediaShellProps> = ({
+const LockedCardShell: React.FC<LockedCardShellProps> = ({
   variant,
   children,
   rootRef,
@@ -25,12 +25,12 @@ const MediaShell: React.FC<MediaShellProps> = ({
     data-testid={dataTestId}
     className={classNames(
       'relative w-[280px] select-none overflow-hidden rounded-md',
-      variant === 'dark' ? 'bg-[#1e2330]' : 'bg-white',
-      'shadow-[0_1px_2px_rgba(0,0,0,0.08)]'
+      'shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_1px_2px_rgba(0,0,0,0.04),0_8px_32px_rgba(0,0,0,0.1)]',
+      variant === 'dark' ? 'bg-[#1e2330]' : 'bg-white'
     )}
   >
     {children}
   </div>
 )
 
-export default MediaShell
+export default LockedCardShell