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