Performance tweaks

src/pages/settings/components/Theming/ThemePlaylists/ThemePlaylists.tsx

@@ -166,7 +166,7 @@ export function ThemePlaylists() {
 				setSortBy={undefined}
 				customSearchEnabled={false}
 			/>
-			<Stack mt={isMobile ? '10rem' : '6rem'}>
+			<Stack mt={isMobile ? '10rem' : '6rem'} gap={'2rem'}>
 				<LoadingOverlay
 					visible={themePlaylistDataIsFetching}
 					zIndex={180}
@@ -203,13 +203,11 @@ export function ThemePlaylists() {
 											}}
 										/>
 									)}
-									<Box>
 									<ThemePlaylistStack
 										cardPlaylist={allStack}
 										handleOpen={handleOpen}
 										allThemes={allThemeData}
 									/>
-									</Box>
 								</Group>
 								<Group pos={'relative'}>
 									{'Backgrounds' === currentThemePlaylist && (
@@ -229,13 +227,11 @@ export function ThemePlaylists() {
 											}}
 										/>
 									)}
-									<Box>
 									<ThemePlaylistStack
 										cardPlaylist={backgroundsStack}
 										handleOpen={handleOpen}
 										allThemes={allThemeData}
 									/>
-									</Box>
 								</Group>
 								<Group pos={'relative'}>
 									{'No Backgrounds' === currentThemePlaylist && (
@@ -255,13 +251,11 @@ export function ThemePlaylists() {
 											}}
 										/>
 									)}
-									<Box>
 									<ThemePlaylistStack
 										cardPlaylist={noBackgroundsStack}
 										handleOpen={handleOpen}
 										allThemes={allThemeData}
 									/>
-									</Box>
 								</Group>
 								<Group pos={'relative'}>
 									{'Time of Day' === currentThemePlaylist && (

src/pages/settings/components/Theming/ThemePlaylists/components/ThemePlaylistStack.tsx

@@ -274,7 +274,7 @@ export function ThemePlaylistStack({
 										paddingLeft: '.25rem',
 										backgroundColor: 'var(--mantine-color-background-0)',
 										borderRadius: '16px',
-										color: 'var(--mantine-color-border-0)',
+										color: 'var(--mantine-color-accent-0)',
 										minWidth: '1.5rem',
 										textAlign: 'center',
 									}}