Mobile and style improvements

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

@@ -221,7 +221,7 @@ function ThemeModal({
 									</Group>
 								</Group>
 							) : (
-								<Stack h={256} justify='center'>
+								<Stack h={isMobile ? '100%' : 256} justify='center'>
 									<Group justify='space-between'>
 										<Text className={textClasses.label} classNames={textClasses}>
 											Primary Color
@@ -383,7 +383,7 @@ function ThemeModal({
 						</Stack>
 					</Group>
 					<Divider color='black' my='sm' />
-					<Group pos={'absolute'} bottom={8}>
+					<Group pos={'absolute'} bottom={isMobile ? -64 : 8}>
 						<Button
 							color={'green'}
 							styles={{ label: { color: 'black' } }}

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

@@ -249,10 +249,19 @@ function ThemePlaylistCard({ cardPlaylist, handleOpen, allThemes }: any) {
 				}}
 			>
 				{hover && <Overlay opacity={0.5} zIndex={1} />}
-				<Stack h={'100%'} w={'100%'}>
+				<Stack h={'100%'} w={'100%'} align='center'>
 					{cardPlaylist.name !== 'Time of Day' ? (
 						<>
-							<Text mt={8} mb={-8}>
+							<Text
+								px={8}
+								mt={8}
+								mb={-8}
+								style={{
+									color: theme.backgroundColor,
+									backgroundColor: theme.primaryColor,
+									borderRadius: '4px',
+								}}
+							>
 								Count: {themeList.length}
 							</Text>
 							<ScrollArea h={'255px'} w={'100%'} style={{ zIndex: 2 }}>

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

@@ -126,7 +126,7 @@ function ThemePlaylists() {
 						pos={isMobile ? undefined : 'absolute'}
 						className={textInputClasses.settingsItem}
 						classNames={textInputClasses}
-						autoFocus
+						autoFocus={!isMobile}
 						placeholder='Search...'
 						value={searchValue}
 						onInput={(event: any) => {

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

@@ -153,7 +153,7 @@ function ThemesSettings() {
 						pos={isMobile ? undefined : 'absolute'}
 						className={textInputClasses.settingsItem}
 						classNames={textInputClasses}
-						autoFocus
+						autoFocus={!isMobile}
 						placeholder='Search...'
 						value={searchValue}
 						onInput={(event: any) => {
@@ -180,7 +180,7 @@ function ThemesSettings() {
 						color={theme.primaryColor}
 					/>
 				</Group>
-				<Group justify='center' align='center' pos={'relative'}>
+				<Group justify='center' align='center' pos={'relative'} mt={'1rem'}>
 					<Overlay
 						display={currentTheme === 'random' ? 'flex' : 'none'}
 						blur={5}