diff --git a/src/components/Common/StatusBadgeMini/index.tsx b/src/components/Common/StatusBadgeMini/index.tsx
index 9404a93c..0071126c 100644
--- a/src/components/Common/StatusBadgeMini/index.tsx
+++ b/src/components/Common/StatusBadgeMini/index.tsx
@@ -1,3 +1,4 @@
+import Spinner from '@app/assets/spinner.svg';
import { CheckCircleIcon } from '@heroicons/react/20/solid';
import { BellIcon, ClockIcon, MinusSmallIcon } from '@heroicons/react/24/solid';
import { MediaStatus } from '@server/constants/media';
@@ -5,31 +6,40 @@ import { MediaStatus } from '@server/constants/media';
interface StatusBadgeMiniProps {
status: MediaStatus;
is4k?: boolean;
+ inProgress?: boolean;
}
-const StatusBadgeMini = ({ status, is4k = false }: StatusBadgeMiniProps) => {
- const badgeStyle = ['w-5 rounded-full p-0.5 text-white ring-1'];
+const StatusBadgeMini = ({
+ status,
+ is4k = false,
+ inProgress = false,
+}: StatusBadgeMiniProps) => {
+ const badgeStyle = ['w-5 rounded-full p-0.5 ring-1 bg-opacity-80'];
let indicatorIcon: React.ReactNode;
switch (status) {
case MediaStatus.PROCESSING:
- badgeStyle.push('bg-indigo-500 ring-indigo-400');
+ badgeStyle.push('bg-indigo-500 ring-indigo-400 text-indigo-100');
indicatorIcon = ;
break;
case MediaStatus.AVAILABLE:
- badgeStyle.push('bg-green-500 ring-green-400');
+ badgeStyle.push('bg-green-500 ring-green-400 text-green-100');
indicatorIcon = ;
break;
case MediaStatus.PENDING:
- badgeStyle.push('bg-yellow-500 ring-yellow-400');
+ badgeStyle.push('bg-yellow-500 ring-yellow-400 text-yellow-100');
indicatorIcon = ;
break;
case MediaStatus.PARTIALLY_AVAILABLE:
- badgeStyle.push('bg-green-500 ring-green-400');
+ badgeStyle.push('bg-green-500 ring-green-400 text-green-100');
indicatorIcon = ;
break;
}
+ if (inProgress) {
+ indicatorIcon = ;
+ }
+
return (
{indicatorIcon}
diff --git a/src/components/TitleCard/index.tsx b/src/components/TitleCard/index.tsx
index f9a0faec..6f15bc0a 100644
--- a/src/components/TitleCard/index.tsx
+++ b/src/components/TitleCard/index.tsx
@@ -1,6 +1,7 @@
import Spinner from '@app/assets/spinner.svg';
import Button from '@app/components/Common/Button';
import CachedImage from '@app/components/Common/CachedImage';
+import StatusBadgeMini from '@app/components/Common/StatusBadgeMini';
import RequestModal from '@app/components/RequestModal';
import ErrorCard from '@app/components/TitleCard/ErrorCard';
import Placeholder from '@app/components/TitleCard/Placeholder';
@@ -9,9 +10,7 @@ import { Permission, useUser } from '@app/hooks/useUser';
import globalMessages from '@app/i18n/globalMessages';
import { withProperties } from '@app/utils/typeHelpers';
import { Transition } from '@headlessui/react';
-import { CheckCircleIcon } from '@heroicons/react/20/solid';
import { ArrowDownTrayIcon } from '@heroicons/react/24/outline';
-import { BellIcon, ClockIcon } from '@heroicons/react/24/solid';
import { MediaStatus } from '@server/constants/media';
import type { MediaType } from '@server/models/Search';
import Link from 'next/link';
@@ -142,28 +141,14 @@ const TitleCard = ({
: intl.formatMessage(globalMessages.tvshow)}
-
- {(currentStatus === MediaStatus.AVAILABLE ||
- currentStatus === MediaStatus.PARTIALLY_AVAILABLE) && (
-
-
-
- )}
- {currentStatus === MediaStatus.PENDING && (
-
-
-
- )}
- {currentStatus === MediaStatus.PROCESSING && (
-
- {inProgress ? (
-
- ) : (
-
- )}
-
- )}
-
+ {currentStatus && (
+
+
+
+ )}