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

src/renderer/components/feature-carousel/feature-carousel.module.css

@@ -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;

src/renderer/components/feature-carousel/feature-carousel.tsx

@@ -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"
                     />
                 </>

src/renderer/components/item-list/item-table-list/item-table-list.module.css

@@ -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%
+        );
+    }
 }

src/renderer/features/albums/components/album-detail-content.module.css

@@ -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';

src/renderer/features/albums/components/album-detail-content.tsx

@@ -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

src/renderer/features/shared/components/play-button.module.css

@@ -86,6 +86,12 @@
     font-weight: 600;
     color: black;
 
+    @mixin light {
+        color: white;
+    }
+
+
+
     svg {
         color: black;
         fill: black;