fix: update StatusBadgeMini to shrink on title cards (and remove ring) (#3210)

src/components/Common/StatusBadgeMini/index.tsx

@@ -7,31 +7,47 @@ interface StatusBadgeMiniProps {
   status: MediaStatus;
   is4k?: boolean;
   inProgress?: boolean;
+  // Should the badge shrink on mobile to a smaller size? (TitleCard)
+  shrink?: boolean;
 }
 
 const StatusBadgeMini = ({
   status,
   is4k = false,
   inProgress = false,
+  shrink = false,
 }: StatusBadgeMiniProps) => {
-  const badgeStyle = ['w-5 rounded-full p-0.5 ring-1 bg-opacity-80'];
+  const badgeStyle = [
+    `rounded-full bg-opacity-80 shadow-md ${
+      shrink ? 'w-4 sm:w-5 border p-0' : 'w-5 ring-1 p-0.5'
+    }`,
+  ];
+
   let indicatorIcon: React.ReactNode;
 
   switch (status) {
     case MediaStatus.PROCESSING:
-      badgeStyle.push('bg-indigo-500 ring-indigo-400 text-indigo-100');
+      badgeStyle.push(
+        'bg-indigo-500 border-indigo-400 ring-indigo-400 text-indigo-100'
+      );
       indicatorIcon = <ClockIcon />;
       break;
     case MediaStatus.AVAILABLE:
-      badgeStyle.push('bg-green-500 ring-green-400 text-green-100');
+      badgeStyle.push(
+        'bg-green-500 border-green-400 ring-green-400 text-green-100'
+      );
       indicatorIcon = <CheckCircleIcon />;
       break;
     case MediaStatus.PENDING:
-      badgeStyle.push('bg-yellow-500 ring-yellow-400 text-yellow-100');
+      badgeStyle.push(
+        'bg-yellow-500 border-yellow-400 ring-yellow-400 text-yellow-100'
+      );
       indicatorIcon = <BellIcon />;
       break;
     case MediaStatus.PARTIALLY_AVAILABLE:
-      badgeStyle.push('bg-green-500 ring-green-400 text-green-100');
+      badgeStyle.push(
+        'bg-green-500 border-green-400 ring-green-400 text-green-100'
+      );
       indicatorIcon = <MinusSmallIcon />;
       break;
   }
@@ -41,7 +57,11 @@ const StatusBadgeMini = ({
   }
 
   return (
-    <div className="inline-flex whitespace-nowrap rounded-full text-xs font-semibold leading-5 ring-1 ring-gray-700">
+    <div
+      className={`relative inline-flex whitespace-nowrap rounded-full border-gray-700 text-xs font-semibold leading-5 ring-gray-700 ${
+        shrink ? '' : 'ring-1'
+      }`}
+    >
       <div className={badgeStyle.join(' ')}>{indicatorIcon}</div>
       {is4k && <span className="pl-1 pr-2 text-gray-200">4K</span>}
     </div>

src/components/TitleCard/index.tsx

@@ -129,7 +129,7 @@ const TitleCard = ({
           />
           <div className="absolute left-0 right-0 flex items-center justify-between p-2">
             <div
-              className={`pointer-events-none z-40 rounded-full border bg-opacity-80 shadow ${
+              className={`pointer-events-none z-40 rounded-full border bg-opacity-80 shadow-md ${
                 mediaType === 'movie'
                   ? 'border-blue-500 bg-blue-600'
                   : 'border-purple-600 bg-purple-600'
@@ -142,10 +142,11 @@ const TitleCard = ({
               </div>
             </div>
             {currentStatus && (
-              <div className="pointer-events-none z-40">
+              <div className="pointer-events-none z-40 flex items-center">
                 <StatusBadgeMini
                   status={currentStatus}
                   inProgress={inProgress}
+                  shrink
                 />
               </div>
             )}