refactor: update mini status icons on titlecard to match badge colors (#3188)

pull/3190/head
Ryan Cohen 2 years ago committed by GitHub
parent 3309f77aa4
commit 76335ec8d3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -129,8 +129,10 @@ const TitleCard = ({
/> />
<div className="absolute left-0 right-0 flex items-center justify-between p-2"> <div className="absolute left-0 right-0 flex items-center justify-between p-2">
<div <div
className={`pointer-events-none z-40 rounded-full shadow ${ className={`pointer-events-none z-40 rounded-full border bg-opacity-80 shadow ${
mediaType === 'movie' ? 'bg-blue-500' : 'bg-purple-600' mediaType === 'movie'
? 'border-blue-500 bg-blue-600'
: 'border-purple-600 bg-purple-600'
}`} }`}
> >
<div className="flex h-4 items-center px-2 py-2 text-center text-xs font-medium uppercase tracking-wider text-white sm:h-5"> <div className="flex h-4 items-center px-2 py-2 text-center text-xs font-medium uppercase tracking-wider text-white sm:h-5">
@ -142,17 +144,17 @@ const TitleCard = ({
<div className="pointer-events-none z-40"> <div className="pointer-events-none z-40">
{(currentStatus === MediaStatus.AVAILABLE || {(currentStatus === MediaStatus.AVAILABLE ||
currentStatus === MediaStatus.PARTIALLY_AVAILABLE) && ( currentStatus === MediaStatus.PARTIALLY_AVAILABLE) && (
<div className="flex h-4 w-4 items-center justify-center rounded-full bg-green-400 text-white shadow sm:h-5 sm:w-5"> <div className="flex h-4 w-4 items-center justify-center rounded-full border border-green-500 bg-green-500 bg-opacity-80 text-green-100 shadow sm:h-5 sm:w-5">
<CheckIcon className="h-3 w-3 sm:h-4 sm:w-4" /> <CheckIcon className="h-3 w-3 sm:h-4 sm:w-4" />
</div> </div>
)} )}
{currentStatus === MediaStatus.PENDING && ( {currentStatus === MediaStatus.PENDING && (
<div className="flex h-4 w-4 items-center justify-center rounded-full bg-yellow-500 text-white shadow sm:h-5 sm:w-5"> <div className="flex h-4 w-4 items-center justify-center rounded-full border border-yellow-500 bg-yellow-500 bg-opacity-80 text-yellow-100 shadow sm:h-5 sm:w-5">
<BellIcon className="h-3 w-3 sm:h-4 sm:w-4" /> <BellIcon className="h-3 w-3 sm:h-4 sm:w-4" />
</div> </div>
)} )}
{currentStatus === MediaStatus.PROCESSING && ( {currentStatus === MediaStatus.PROCESSING && (
<div className="flex h-4 w-4 items-center justify-center rounded-full bg-indigo-500 text-white shadow sm:h-5 sm:w-5"> <div className="flex h-4 w-4 items-center justify-center rounded-full border border-indigo-500 bg-indigo-500 bg-opacity-80 text-indigo-100 shadow sm:h-5 sm:w-5">
{inProgress ? ( {inProgress ? (
<Spinner className="h-3 w-3" /> <Spinner className="h-3 w-3" />
) : ( ) : (

Loading…
Cancel
Save