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