Style bugfixes and updates

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

@@ -1,7 +1,7 @@
 import { Box, Stack, Text } from '@mantine/core';
 import { useState } from 'react';
 import { FiCheck } from 'react-icons/fi';
-import { stackClasses } from 'styles';
+import { boxClasses, textClasses } from 'styles';
 import type { Theme } from 'types';
 
 function ExampleApp({ selectedTheme }: { selectedTheme: Theme }) {
@@ -12,50 +12,33 @@ function ExampleApp({ selectedTheme }: { selectedTheme: Theme }) {
 			component='a'
 			onMouseOver={() => setTextDecoration('underline')}
 			onMouseOut={() => setTextDecoration('none')}
-			className={stackClasses.appItemBox}
+			className={boxClasses.appItemBox}
+			h={'64px'}
 		>
 			<Stack
 				style={{
-					height: '64px',
 					marginRight: '1rem',
 					marginLeft: '1rem',
-					paddingTop: '1rem',
 				}}
+				justify='center'
 			>
-				<FiCheck style={{ color: selectedTheme?.primaryColor }} height={32} width={32} />
+				<FiCheck style={{ color: selectedTheme?.primaryColor }} />
 			</Stack>
 			<Stack
 				style={{
-					display: 'flex',
-					flexDirection: 'column',
 					justifyContent: 'center',
-					flex: 1,
 					overflow: 'hidden',
+					textOverflow: 'ellipsis',
 					gap: 0,
 				}}
 			>
-				<Text
-					style={{
-						fontWeight: 400,
-						fontSize: '.625rem',
-						fontStyle: 'normal',
-						color: selectedTheme?.primaryColor,
-						fontFamily:
-							'-apple-system, Jost, BlinkMacSystemFont, Helvetica Neue, Roboto, sans-serif !important',
-						margin: 0,
-					}}
-				>
+				<Text className={textClasses.appName} classNames={textClasses}>
 					{'Example App'}
 				</Text>
 				<Text
+					className={textClasses.appUrl}
+					classNames={textClasses}
 					style={{
-						fontWeight: 400,
-						fontSize: '.625rem',
-						fontStyle: 'italic',
-						color: selectedTheme?.accentColor,
-						fontFamily:
-							'-apple-system, Jost, BlinkMacSystemFont, Helvetica Neue, Roboto, sans-serif !important',
-						margin: 0,
 						textDecoration: textDecoration,
 					}}
 				>

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

@@ -141,7 +141,6 @@ export default function ThemeModalContent({ selectedTheme }: { selectedTheme: Th
 						<Text
 							style={{
 								fontSize: '.875rem',
-								fontWeight: 400,
 								height: '10px',
 								width: 'auto',
 								color: selectedTheme?.accentColor,
@@ -188,7 +187,6 @@ export default function ThemeModalContent({ selectedTheme }: { selectedTheme: Th
 						<Text
 							style={{
 								fontSize: '.875rem',
-								fontWeight: 400,
 								height: '10px',
 								width: 'auto',
 								color: selectedTheme?.accentColor,

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

@@ -108,25 +108,21 @@ function ThemePlaylistCard({
 			)}
 			{cardPlaylist.default === 0 && (
 				<ActionIcon
+					color='red'
 					style={{
 						position: 'absolute',
 						top: -10,
 						right: 40,
 						paddingRight: '.25rem',
 						paddingLeft: '.25rem',
-						backgroundColor: 'var(--mantine-color-border-0)',
 						borderRadius: '4px',
-						color:
-							theme.borderColor === theme.primaryColor
-								? 'var(--mantine-color-accent-0)'
-								: 'var(--mantine-color-red-6)',
 						zIndex: 3,
 					}}
 					onClick={() => {
 						openModal();
 					}}
 				>
-					<FiTrash />
+					<FiTrash color='black' />
 				</ActionIcon>
 			)}
 			<Button

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

@@ -81,31 +81,26 @@ function ThemePlaylists() {
 				allThemes={allThemeData}
 				createPlaylist={mutateAsync}
 			/>
-			<Stack h={'100%'} w={'100%'}>
-				<SettingsHeader
-					setDragging={undefined}
-					openModal={open}
-					title={'Theme Playlists'}
-					tooltip={{
-						title: 'Theme playlists can be created here and applied to the homepage.',
-						highlightList: ['theme', 'themes', 'homepage', 'playlist'],
-						description:
-							'Playlists are lists of themes. They can be enabled either here or in the settings button on the homepage. When a playlist is enabled, it will shuffle the included themes on the homepage. If a theme is part of a playlist, it will appear while the playlist is active, regardless of random/shuffle.',
-					}}
-					searchValue={searchValue}
-					setSearchValue={setSearchValue}
-					searchPlaceholder={'Search Theme Playlists...'}
-					isLoading={isLoading}
-					setIsLoading={setIsLoading}
-				/>
+			<SettingsHeader
+				setDragging={undefined}
+				openModal={open}
+				title={'Theme Playlists'}
+				tooltip={{
+					title: 'Theme playlists can be created here and applied to the homepage.',
+					highlightList: ['theme', 'themes', 'homepage', 'playlist'],
+					description:
+						'Playlists are lists of themes. They can be enabled either here or in the settings button on the homepage. When a playlist is enabled, it will shuffle the included themes on the homepage. If a theme is part of a playlist, it will appear while the playlist is active, regardless of random/shuffle.',
+				}}
+				searchValue={searchValue}
+				setSearchValue={setSearchValue}
+				searchPlaceholder={'Search Theme Playlists...'}
+				isLoading={isLoading}
+				setIsLoading={setIsLoading}
+			/>
+			<Stack>
 				{allThemeData && (
 					<>
-						<Group
-							mt={isMobile ? '10rem' : '6rem'}
-							justify='center'
-							align='center'
-							pos={'relative'}
-						>
+						<Group justify='center' align='center' pos={'relative'}>
 							<Text
 								p={0}
 								className={textClasses.settingsSubTitle}

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

@@ -136,7 +136,7 @@ function ThemesSettings() {
 	}, [allThemes]);
 
 	return (
-		<Stack w={'100%'} align='center'>
+		<Stack>
 			<ThemeModal
 				opened={themeModalOpened}
 				handleClose={handleClose}
@@ -170,80 +170,81 @@ function ThemesSettings() {
 				isLoading={isLoading}
 				setIsLoading={setIsLoading}
 			/>
-			<Group
-				w={'85%'}
-				justify='center'
-				align='center'
-				pos={'relative'}
-				display={'flex'}
-				mt={isMobile ? '11.5rem' : '7rem'}
-				mb={isMobile ? '100%' : '6.5rem'}
-			>
-				<Overlay
-					display={currentTheme === 'random' && debouncedSearch === '' ? 'flex' : 'none'}
-					blur={5}
-					style={{
-						zIndex: 190,
-						borderRadius: '10px',
-						marginTop: '-1rem',
-						marginBottom: '-1.25rem',
-						boxShadow: '0px 0px 10px 3px rgba(0, 0, 0, .8)',
-					}}
-					pos={'absolute'}
-				/>
-				{allThemes.length > 0 ? (
-					allThemes.map((cardTheme: Theme) => (
-						<Group key={cardTheme.name} pos={'relative'}>
-							{cardTheme.name === currentTheme && (
-								<FiChevronRight
+			<Stack mt={'1rem'} align='center'>
+				<Group
+					w={'85%'}
+					justify='center'
+					pos={'relative'}
+					mb={isMobile ? '10rem' : '7.5rem'}
+				>
+					<Overlay
+						display={
+							currentTheme === 'random' && debouncedSearch === '' ? 'flex' : 'none'
+						}
+						blur={5}
+						style={{
+							zIndex: 190,
+							borderRadius: '10px',
+							marginTop: '-1rem',
+							marginBottom: '-1rem',
+							boxShadow: '0px 0px 10px 3px rgba(0, 0, 0, .8)',
+						}}
+						pos={'absolute'}
+					/>
+					{allThemes.length > 0 ? (
+						allThemes.map((cardTheme: Theme) => (
+							<Group key={cardTheme.name} pos={'relative'}>
+								{cardTheme.name === currentTheme && (
+									<FiChevronRight
+										style={{
+											position: 'absolute',
+											left: -14,
+											zIndex: 1,
+											fontSize: '2rem',
+											fontWeight: 'bold',
+											borderRadius: '50%',
+											backgroundColor: cardTheme.borderColor,
+											color:
+												cardTheme.borderColor === cardTheme.primaryColor
+													? cardTheme.accentColor
+													: cardTheme.primaryColor,
+										}}
+									/>
+								)}
+								<Box
 									style={{
-										position: 'absolute',
-										left: -14,
-										zIndex: 1,
-										fontSize: '2rem',
-										fontWeight: 'bold',
-										borderRadius: '50%',
-										backgroundColor: cardTheme.borderColor,
-										color:
-											cardTheme.borderColor === cardTheme.primaryColor
-												? cardTheme.accentColor
-												: cardTheme.primaryColor,
+										zIndex:
+											currentTheme === 'random' &&
+											(themePlaylists
+												.filter(
+													(t: ThemePlaylist) =>
+														t.name.toLowerCase() === currentThemePlaylist.toLowerCase(),
+												)[0]
+												?.themeList.includes(`${cardTheme.id}`) ||
+												cardTheme.name === theme.name)
+												? 195
+												: 0,
 									}}
-								/>
-							)}
-							<Box
-								style={{
-									zIndex:
-										currentTheme === 'random' &&
-										(themePlaylists
-											.filter(
-												(t: ThemePlaylist) =>
-													t.name.toLowerCase() === currentThemePlaylist.toLowerCase(),
-											)[0]
-											?.themeList.includes(`${cardTheme.id}`) ||
-											cardTheme.name === theme.name)
-											? 195
-											: 0,
-								}}
-							>
-								<ThemeCard
-									allThemes={allThemeData}
-									cardTheme={cardTheme}
-									handleOpen={handleOpen}
-									themePlaylists={themePlaylists}
-								/>
-							</Box>
+								>
+									<ThemeCard
+										allThemes={allThemeData}
+										cardTheme={cardTheme}
+										handleOpen={handleOpen}
+										themePlaylists={themePlaylists}
+									/>
+								</Box>
+							</Group>
+						))
+					) : (
+						<Group
+							w={'100%'}
+							style={{ zIndex: 1000, display: 'flex', justifyContent: 'center' }}
+						>
+							<NoItemsFound />
 						</Group>
-					))
-				) : (
-					<Group
-						w={'100%'}
-						style={{ zIndex: 1000, display: 'flex', justifyContent: 'center' }}
-					>
-						<NoItemsFound />
-					</Group>
-				)}
-			</Group>
+					)}
+				</Group>
+			</Stack>
 			<Group
 				style={{
 					backdropFilter: 'blur(5px) brightness(.75)',
@@ -271,7 +272,7 @@ function ThemesSettings() {
 						w={isMobile ? undefined : '100%'}
 						justify='center'
 					>
-						<Group align='center' justify='center'>
+						<Group>
 							<Text
 								style={{
 									color: 'var(--mantine-color-accent-0)',