Updates to styles; misc bugfixes

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

@@ -12,7 +12,7 @@ import {
 	Text,
 	TextInput,
 } from '@mantine/core';
-import { useDebouncedValue } from '@mantine/hooks';
+import { useDebouncedValue, useElementSize } from '@mantine/hooks';
 import { useCommonHooks } from 'hooks';
 import { useFileUploadAPI } from 'hooks/useAPI';
 import { useEffect, useState } from 'react';
@@ -38,6 +38,7 @@ function BackgroundModal({
 	backgroundList: string[];
 	inUseBackgrounds: string[];
 }) {
+	const { ref, width } = useElementSize();
 	const [background, setBackground] = useState<File | null>(null);
 	const [fileName, setFileName] = useState<string>('');
 	const [newFileName, setNewFileName] = useState<string>('');
@@ -173,7 +174,7 @@ function BackgroundModal({
 									backgroundFilter: 'blur(5px)',
 								}}
 							>
-								<SimpleGrid w={'100%'} cols={3} p={'.5rem'}>
+								<SimpleGrid w={'100%'} cols={3} p={'.75rem'}>
 									{backgroundList
 										.filter((background) => background !== 'None')
 										.filter(
@@ -195,11 +196,17 @@ function BackgroundModal({
 														top: '-.5rem',
 														left: 0,
 														zIndex: 3,
+														boxShadow: '2px -2px var(--mantine-color-primary-0)',
+														textOverflow: 'ellipsis',
+														overflow: 'hidden',
+														whiteSpace: 'nowrap',
+														maxWidth: width,
 													}}
 												>
 													{background}
 												</Text>
 												<Card
+													ref={ref}
 													style={{
 														aspectRatio: '16/9',
 														width: '100%',

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

@@ -1,5 +1,5 @@
 import { ActionIcon, Box, Button, Group, Overlay, Stack, Text } from '@mantine/core';
-import { useDisclosure } from '@mantine/hooks';
+import { useDisclosure, useElementSize } from '@mantine/hooks';
 import { useCommonHooks, useMutationAPI } from 'hooks';
 import { useState } from 'react';
 import { FiEdit, FiShuffle, FiTrash, FiX } from 'react-icons/fi';
@@ -18,6 +18,7 @@ function ThemeCard({
 	allThemes: Theme[];
 	themePlaylists: ThemePlaylist[];
 }) {
+	const { ref, width } = useElementSize();
 	const [hover, setHover] = useState(false);
 	const [shiftEdit, setShiftEdit] = useState<number>(0);
 	const [shiftShuffle, setShiftShuffle] = useState<number>(0);
@@ -73,18 +74,24 @@ function ThemeCard({
 					left: 6,
 					paddingRight: '.25rem',
 					paddingLeft: '.25rem',
-					backgroundColor: cardTheme.borderColor,
+					backgroundColor: cardTheme.backgroundColor,
 					borderRadius: '4px',
 					color:
 						cardTheme.borderColor === cardTheme.primaryColor
 							? cardTheme.accentColor
 							: cardTheme.primaryColor,
 					zIndex: 3,
+					boxShadow: `2px -2px ${cardTheme.borderColor}`,
+					textOverflow: 'ellipsis',
+					overflow: 'hidden',
+					whiteSpace: 'nowrap',
+					maxWidth: width,
 				}}
 			>
 				{cardTheme.name}
 			</Text>
 			<Button
+				ref={ref}
 				w={'275px'}
 				h={'115px'}
 				disabled={currentTheme === 'random'}

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

@@ -171,7 +171,7 @@ function ThemeModal({
 				</Modal.Header>
 				<Modal.Body>
 					<Group p={'2rem'} w={'100%'} align='flex-start' justify='space-between'>
-						<Stack display={'flex'} pos={'relative'} w={'70%'}>
+						<Stack display={'flex'} pos={'relative'} w={isMobile ? '100%' : '70%'}>
 							<ThemeModalContent selectedTheme={designerTheme} />
 							<Tooltip
 								label={'Change Primary Color'}
@@ -242,7 +242,7 @@ function ThemeModal({
 									bd={`1px solid ${selectedTheme.primaryColor}`}
 									pos={'absolute'}
 									top={'4.5rem'}
-									right={'7rem'}
+									right={'15%'}
 								/>
 							</Tooltip>
 							<Tooltip
@@ -260,7 +260,7 @@ function ThemeModal({
 									bd={`1px solid ${selectedTheme.primaryColor}`}
 									pos={'absolute'}
 									top={'3.25rem'}
-									left={'14.5rem'}
+									left={'6.5rem'}
 								/>
 							</Tooltip>
 							<Tooltip
@@ -282,7 +282,7 @@ function ThemeModal({
 							</Tooltip>
 						</Stack>
 						<Stack
-							w={'28%'}
+							w={isMobile ? '100%' : '28%'}
 							h={'436px'}
 							p={'1rem'}
 							style={{

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

@@ -97,7 +97,7 @@ function ThemePlaylists() {
 				isLoading={isLoading}
 				setIsLoading={setIsLoading}
 			/>
-			<Stack>
+			<Stack mt={isMobile ? '10rem' : '6rem'}>
 				{allThemeData && (
 					<>
 						<Group justify='center' align='center' pos={'relative'}>

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

@@ -170,7 +170,7 @@ function ThemesSettings() {
 				isLoading={isLoading}
 				setIsLoading={setIsLoading}
 			/>
-			<Stack mt={'1rem'} align='center'>
+			<Stack mt={isMobile ? '11rem' : '7rem'} align='center'>
 				<Group
 					w={'85%'}
 					justify='center'
@@ -258,24 +258,34 @@ function ThemesSettings() {
 					bottom: isMobile ? '3.25rem' : 0,
 				}}
 			>
-				<Group w={isMobile ? undefined : '100%'} justify='space-between'>
+				<Group w={'100%'} justify={isMobile ? 'center' : 'space-between'}>
 					<Text
-						miw={isMobile ? 100 : undefined}
+						w={'fit-content'}
 						className={textClasses.settingsSubTitle}
 						classNames={textClasses}
 						fz={isMobile ? '1rem' : undefined}
+						style={
+							isMobile
+								? {
+										position: 'absolute',
+										top: -16,
+										left: 4,
+										padding: '.25rem',
+										backgroundColor: 'var(--mantine-color-background-0)',
+										backdropFilter: 'blur(5px) brightness(.25)',
+										borderRadius: '10px',
+										boxShadow: '2px -2px var(--mantine-color-accent-0)',
+									}
+								: undefined
+						}
 					>
 						Current Settings:
 					</Text>
-					<Group
-						pos={isMobile ? undefined : 'absolute'}
-						w={isMobile ? undefined : '100%'}
-						justify='center'
-					>
+					<Group>
 						<Group>
 							<Text
 								style={{
-									color: 'var(--mantine-color-accent-0)',
+									color: 'var(--mantine-color-primary-0)',
 									fontWeight: 'bold',
 								}}
 							>