From 4eb887d82b8326b86c26abcce09f8d35583d960f Mon Sep 17 00:00:00 2001
From: Bob Ziroll <elderziroll@gmail.com>
Date: Tue, 6 Feb 2024 12:36:43 -0700
Subject: [PATCH] refactor(statusbadgemini): improves the visibility of the
 status indicator on the title cards

The small circle indicator was a bit difficult to see IMO. Putting a triangle that covers the
upper-right of the card makes it easier to understand at a glance what the status for that movie or
series is. Just a style suggestion, no hurt feelings if you don't like it :)
---
 .../Common/StatusBadgeMini/index.tsx          | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/components/Common/StatusBadgeMini/index.tsx b/src/components/Common/StatusBadgeMini/index.tsx
index a7e24a37..083f76db 100644
--- a/src/components/Common/StatusBadgeMini/index.tsx
+++ b/src/components/Common/StatusBadgeMini/index.tsx
@@ -15,16 +15,21 @@ const StatusBadgeMini = ({
   status,
   is4k = false,
   inProgress = false,
-  shrink = false,
+  shrink = true,
 }: StatusBadgeMiniProps) => {
   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'
+    `bg-opacity-80 shadow-md w-full h-full pl-3.5 md:pl-4 ${
+      shrink ? 'border' : 'ring-1'
     }`,
   ];
 
   let indicatorIcon: React.ReactNode;
 
+  // clip-path not directly supported in Tailwind.
+  const triangleStyle = {
+    clipPath: 'polygon(100% 0, 100% 100%, 0 0)',
+  };
+
   switch (status) {
     case MediaStatus.PROCESSING:
       badgeStyle.push(
@@ -58,11 +63,13 @@ const StatusBadgeMini = ({
 
   return (
     <div
-      className={`relative inline-flex whitespace-nowrap rounded-full border-gray-700 text-xs font-semibold leading-5 ring-gray-700 ${
-        shrink ? '' : 'ring-1'
+      className={`absolute top-0 right-0 inline-flex whitespace-nowrap border-gray-700 text-xs font-semibold leading-5 ring-gray-700 ${
+        shrink ? 'h-9 w-9 md:h-10 md:w-10' : 'h-10 w-10 ring-1'
       }`}
     >
-      <div className={badgeStyle.join(' ')}>{indicatorIcon}</div>
+      <div className={badgeStyle.join(' ')} style={triangleStyle}>
+        {indicatorIcon}
+      </div>
       {is4k && <span className="pl-1 pr-2 text-gray-200">4K</span>}
     </div>
   );