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"
/>
</>
@@ -191,6 +191,15 @@
rgb(0 0 0 / 5%) 50%,
transparent 100%
);
@mixin light {
background: linear-gradient(
to bottom,
var(--theme-colors-background) 0%,
alpha(var(--theme-colors-background), 0.05) 50%,
transparent 100%
);
}
}
.item-table-left-scroll-shadow {
@@ -207,6 +216,15 @@
rgb(0 0 0 / 5%) 50%,
transparent 100%
);
@mixin light {
background: linear-gradient(
to right,
var(--theme-colors-background) 0%,
alpha(var(--theme-colors-background), 0.05) 50%,
transparent 100%
);
}
}
.item-table-right-scroll-shadow {
@@ -223,6 +241,15 @@
rgb(0 0 0 / 5%) 50%,
transparent 100%
);
@mixin light {
background: linear-gradient(
to left,
var(--theme-colors-background) 0%,
alpha(var(--theme-colors-background), 0.05) 50%,
transparent 100%
);
}
}
.item-table-top-scroll-shadow {
@@ -239,4 +266,13 @@
rgb(0 0 0 / 5%) 50%,
transparent 100%
);
@mixin light {
background: linear-gradient(
to bottom,
var(--theme-colors-background) 0%,
alpha(var(--theme-colors-background), 0.05) 50%,
transparent 100%
);
}
}
@@ -38,6 +38,21 @@
overflow-x: hidden;
}
.search-text-input {
background: transparent;
border-color: rgb(255 255 255 / 5%);
border-style: solid;
border-width: 1px;
@mixin light {
border-color: rgb(0 0 0 / 5%);
}
@mixin dark {
border-color: rgb(255 255 255 / 5%);
}
}
@container (min-width: $mantine-breakpoint-lg) {
.content-layout {
grid-template-areas: 'songs metadata';
@@ -622,6 +622,7 @@ const AlbumDetailSongsTable = ({ songs }: AlbumDetailSongsTableProps) => {
<Stack gap="md">
<Group gap="sm" w="100%">
<TextInput
classNames={{ input: styles.searchTextInput }}
flex={1}
leftSection={<Icon icon="search" />}
onChange={(e) => setSearchTerm(e.target.value)}
@@ -638,12 +639,6 @@ const AlbumDetailSongsTable = ({ songs }: AlbumDetailSongsTableProps) => {
/>
) : null
}
styles={{
input: {
background: 'transparent',
border: '1px solid rgba(255, 255, 255, 0.05)',
},
}}
value={searchTerm}
/>
<ListSortByDropdownControlled
@@ -86,6 +86,12 @@
font-weight: 600;
color: black;
@mixin light {
color: white;
}
svg {
color: black;
fill: black;