Light mode fixes (#1379)

* Fix color of text in text buttons in light mode

* fix border color of search input in light mode

* fix carousel text colors in light mode

* fix scroll shadows colors in light mode
This commit is contained in:
Damien Erambert
2025-12-12 19:30:30 -08:00
committed by GitHub
parent 578083d994
commit 22dd20884d
6 changed files with 81 additions and 7 deletions
@@ -181,6 +181,11 @@
text-shadow: 0 0 8px rgb(0 0 0 / 50%);
}
.badge {
color: white;
text-shadow: 0 0 8px rgb(0 0 0 / 50%);
}
.nav-arrow-left,
.nav-arrow-right {
position: absolute;
@@ -130,6 +130,7 @@ const CarouselItem = ({ album }: CarouselItemProps) => {
<Group gap="xs" justify="center" wrap="wrap">
{album.genres?.slice(0, 2).map((genre) => (
<Badge
classNames={{ label: styles.badge }}
key={`genre-${genre.id}`}
size="sm"
variant="transparent"
@@ -138,7 +139,11 @@ const CarouselItem = ({ album }: CarouselItemProps) => {
</Badge>
))}
{album.releaseYear && (
<Badge size="sm" variant="transparent">
<Badge
classNames={{ label: styles.badge }}
size="sm"
variant="transparent"
>
{album.releaseYear}
</Badge>
)}
@@ -248,6 +253,12 @@ export const FeatureCarousel = ({ data, onNearEnd }: FeatureCarouselProps) => {
onClick={handlePrevious}
radius="50%"
size="md"
styles={{
icon: {
color: 'white',
fill: 'white',
},
}}
variant="subtle"
/>
<ActionIcon
@@ -257,6 +268,12 @@ export const FeatureCarousel = ({ data, onNearEnd }: FeatureCarouselProps) => {
onClick={handleNext}
radius="50%"
size="md"
styles={{
icon: {
color: 'white',
fill: 'white',
},
}}
variant="subtle"
/>
</>