chrisryn/requestarr
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

fix(ui): resize streaming service logos (#1106)

Browse Source 
The size of streaming service logos has been changed due to the Next.js Image component update.

fix #1103
This commit is contained in:
Gauthier
2024-11-16 15:26:48 +01:00
committed by GitHub
parent 14f316a9a6
commit fe5d016929
1 changed files with 20 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/components/Selector/index.tsx
View File

@@ -437,7 +437,7 @@ export const WatchProviderSelector = ({
key={`prodiver-${provider.id}`} key={`prodiver-${provider.id}`}
> >
<div <div
className={`provider-container relative w-full cursor-pointer rounded-lg p-2 ring-1 ${ className={`provider-container w-full cursor-pointer rounded-lg ring-1 ${
isActive isActive
? 'bg-gray-600 ring-indigo-500 hover:bg-gray-500' ? 'bg-gray-600 ring-indigo-500 hover:bg-gray-500'
: 'bg-gray-700 ring-gray-500 hover:bg-gray-600' : 'bg-gray-700 ring-gray-500 hover:bg-gray-600'
@@ -451,18 +451,15 @@ export const WatchProviderSelector = ({
role="button" role="button"
tabIndex={0} tabIndex={0}
> >
<CachedImage <div className="relative m-2 aspect-1">
type="tmdb" <CachedImage
src={`https://image.tmdb.org/t/p/original${provider.logoPath}`} type="tmdb"
alt="" src={`https://image.tmdb.org/t/p/original${provider.logoPath}`}
style={{ alt=""
width: '100%', fill
height: '100%', className="rounded-lg object-contain"
objectFit: 'contain', />
}} </div>
fill
className="rounded-lg"
/>
{isActive && ( {isActive && (
<div className="pointer-events-none absolute -top-1 -left-1 flex items-center justify-center text-indigo-100 opacity-90"> <div className="pointer-events-none absolute -top-1 -left-1 flex items-center justify-center text-indigo-100 opacity-90">
<CheckCircleIcon className="h-6 w-6" /> <CheckCircleIcon className="h-6 w-6" />
@@ -483,7 +480,7 @@ export const WatchProviderSelector = ({
key={`prodiver-${provider.id}`} key={`prodiver-${provider.id}`}
> >
<div <div
className={`provider-container relative w-full cursor-pointer rounded-lg p-2 ring-1 transition ${ className={`provider-container w-full cursor-pointer rounded-lg ring-1 transition ${
isActive isActive
? 'bg-gray-600 ring-indigo-500 hover:bg-gray-500' ? 'bg-gray-600 ring-indigo-500 hover:bg-gray-500'
: 'bg-gray-700 ring-gray-500 hover:bg-gray-600' : 'bg-gray-700 ring-gray-500 hover:bg-gray-600'
@@ -497,18 +494,15 @@ export const WatchProviderSelector = ({
role="button" role="button"
tabIndex={0} tabIndex={0}
> >
<CachedImage <div className="relative m-2 aspect-1">
type="tmdb" <CachedImage
src={`https://image.tmdb.org/t/p/original${provider.logoPath}`} type="tmdb"
alt="" src={`https://image.tmdb.org/t/p/original${provider.logoPath}`}
style={{ alt=""
width: '100%', fill
height: '100%', className="rounded-lg object-contain"
objectFit: 'cover', />
}} </div>
fill
className="rounded-lg"
/>
{isActive && ( {isActive && (
<div className="pointer-events-none absolute -top-1 -left-1 flex items-center justify-center text-indigo-100 opacity-90"> <div className="pointer-events-none absolute -top-1 -left-1 flex items-center justify-center text-indigo-100 opacity-90">
<CheckCircleIcon className="h-6 w-6" /> <CheckCircleIcon className="h-6 w-6" />