Remove usage of z-index for manga badges (#711)

Caused the badges to be over some components which they were not intended to be
This commit is contained in:
schroda
2024-04-07 15:21:36 +02:00
committed by GitHub
parent 41d876e156
commit d68d9b7ed2

View File

@@ -197,6 +197,28 @@ export const MangaCard = (props: MangaCardProps) => {
height: '100%',
}}
>
<SpinnerImage
alt={title}
src={thumbnailUrl}
imgStyle={
inLibraryIndicator && inLibrary
? {
height: '100%',
width: '100%',
objectFit: 'cover',
filter: 'brightness(0.4)',
}
: {
height: '100%',
width: '100%',
objectFit: 'cover',
}
}
spinnerStyle={{
display: 'grid',
placeItems: 'center',
}}
/>
<Stack
alignItems="start"
justifyContent="space-between"
@@ -210,9 +232,7 @@ export const MangaCard = (props: MangaCardProps) => {
>
<BadgeContainer>
{inLibraryIndicator && inLibrary && (
<Typography
sx={{ backgroundColor: 'primary.dark', zIndex: '1' }}
>
<Typography sx={{ backgroundColor: 'primary.dark' }}>
{t('manga.button.in_library')}
</Typography>
)}
@@ -239,28 +259,6 @@ export const MangaCard = (props: MangaCardProps) => {
handleSelection={handleSelection}
/>
</Stack>
<SpinnerImage
alt={title}
src={thumbnailUrl}
imgStyle={
inLibraryIndicator && inLibrary
? {
height: '100%',
width: '100%',
objectFit: 'cover',
filter: 'brightness(0.4)',
}
: {
height: '100%',
width: '100%',
objectFit: 'cover',
}
}
spinnerStyle={{
display: 'grid',
placeItems: 'center',
}}
/>
<>
{gridLayout !== GridLayout.Comfortable && (
<>