Bug fixes

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

@@ -3,7 +3,7 @@ import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
 import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
 import { useEffect, useState } from 'react';
 import { FaDice } from 'react-icons/fa';
-import { FiChevronRight } from 'react-icons/fi';
+import { FiChevronRight, FiEdit, FiMousePointer, FiStopCircle } from 'react-icons/fi';
 import { useNavigate } from 'react-router-dom';
 import { switchClasses, textClasses } from 'styles';
 import type { Theme, ThemePlaylist } from 'types';
@@ -162,8 +162,9 @@ function ThemesSettings() {
 				justify='center'
 				align='center'
 				pos={'relative'}
+				display={'flex'}
 				mt={isMobile ? '11.5rem' : '7rem'}
-				mb={isMobile ? '12rem' : '6.5rem'}
+				mb={isMobile ? '100%' : '6.5rem'}
 			>
 				<Overlay
 					display={currentTheme === 'random' && debouncedSearch === '' ? 'flex' : 'none'}
@@ -231,8 +232,6 @@ function ThemesSettings() {
 				)}
 			</Group>
 			<Group
-				align='center'
-				justify='center'
 				style={{
 					backdropFilter: 'blur(10px) brightness(.75)',
 					zIndex: 199,
@@ -240,9 +239,7 @@ function ThemesSettings() {
 					paddingBottom: '1.5rem',
 					paddingLeft: '1rem',
 					paddingRight: '1rem',
-					height: 'min-content',
 					width: '100%',
-					marginTop: 0,
 					position: 'absolute',
 					bottom: isMobile ? '3.25rem' : 0,
 				}}
@@ -252,10 +249,15 @@ function ThemesSettings() {
 						miw={isMobile ? 100 : undefined}
 						className={textClasses.settingsSubTitle}
 						classNames={textClasses}
+						fz={isMobile ? '1rem' : undefined}
 					>
 						Current Settings:
 					</Text>
-					<Group pos={isMobile ? undefined : 'absolute'} w={'100%'} justify='center'>
+					<Group
+						pos={isMobile ? undefined : 'absolute'}
+						w={isMobile ? undefined : '100%'}
+						justify='center'
+					>
 						<Group align='center' justify='center'>
 							<Text
 								style={{
@@ -269,7 +271,7 @@ function ThemesSettings() {
 								style={{
 									color: 'var(--mantine-color-primary-0)',
 									fontWeight: 'bold',
-									fontSize: '1.2rem',
+									fontSize: isMobile ? '.8rem' : '1.2rem',
 								}}
 							>
 								{currentThemePlaylist === 'All' ? 'All' : currentThemePlaylist}
@@ -284,8 +286,22 @@ function ThemesSettings() {
 									setCurrentTheme(theme.name);
 								}
 							}}
+							style={{
+								aspectRatio: isMobile ? 1 : undefined,
+								padding: isMobile ? 0 : undefined,
+							}}
 						>
-							{currentThemePlaylist === 'All' ? 'Select Playlist' : 'Disable Playlist'}
+							{currentThemePlaylist === 'All' ? (
+								isMobile ? (
+									<FiMousePointer />
+								) : (
+									'Select Playlist'
+								)
+							) : isMobile ? (
+								<FiStopCircle />
+							) : (
+								'Disable Playlist'
+							)}
 						</Button>
 						<Tooltip
 							label='Shuffle is always on when a playlist is active.'
@@ -321,12 +337,14 @@ function ThemesSettings() {
 					<Button
 						style={{
 							zIndex: 200,
+							aspectRatio: isMobile ? 1 : undefined,
+							padding: isMobile ? 0 : undefined,
 						}}
 						onClick={() => {
 							openBackgroundModal();
 						}}
 					>
-						Manage Backgrounds
+						{isMobile ? <FiEdit /> : 'Manage Backgrounds'}
 					</Button>
 				</Group>
 			</Group>