Small refactoring

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

@@ -1,8 +1,7 @@
 import { ActionIcon, Group, isLightColor, Stack, Text } from '@mantine/core';
 import { useCommonHooks, useMutationAPI } from 'hooks';
 import { useState } from 'react';
-import { FaTrashAlt } from 'react-icons/fa';
-import { FaPencil } from 'react-icons/fa6';
+import { FaPencil, FaTrash } from 'react-icons/fa6';
 import { FiEdit, FiPower, FiShuffle } from 'react-icons/fi';
 import { actionIconClasses } from 'styles';
 import type { Theme, ThemePlaylist } from 'types';
@@ -238,7 +237,7 @@ export function ThemeManagementPill({
 							onClick={openModal}
 							disabled={cardTheme.name === theme.name}
 						>
-							<FaTrashAlt
+							<FaTrash
 								style={{ padding: '.25rem', filter: 'brightness(1.25)' }}
 								color='Brown'
 							/>

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

@@ -27,7 +27,7 @@ export function NewThemeStarter({
 	setSelectedTheme: (selectedTheme: Theme) => void;
 	setDefaultTheme: (selectedTheme: Theme) => void;
 }) {
-	const [pressed, setPressed] = useState<any>(false);
+	const [pressed, setPressed] = useState<boolean>(false);
 	const handlers = useLongPress(() => {
 		setPressed(true);
 	});

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

@@ -10,8 +10,7 @@ import {
 } from '@mantine/core';
 import { notifications } from '@mantine/notifications';
 import { useCommonHooks } from 'hooks';
-import { FaClipboard } from 'react-icons/fa';
-import { FiX } from 'react-icons/fi';
+import { FaClipboard, FaX } from 'react-icons/fa6';
 import { scrollAreaClasses, toolTipClasses } from 'styles';
 import { type Theme, ThemeProperties } from 'types';
 
@@ -104,7 +103,7 @@ export default function ThemeChanges({
 													pos={'absolute'}
 													right={0}
 												>
-													<FiX />
+													<FaX />
 												</ActionIcon>
 											</Tooltip>
 										</Group>

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

@@ -1,55 +0,0 @@
-import { Box, Stack, Text } from '@mantine/core';
-import { useState } from 'react';
-import { FiCheck } from 'react-icons/fi';
-import { boxClasses, textClasses } from 'styles';
-import type { Theme } from 'types';
-
-export function ThemeExampleApp({ selectedTheme }: { selectedTheme: Theme }) {
-	const [textDecoration, setTextDecoration] = useState<string>('none');
-
-	return (
-		<Box
-			component='a'
-			onMouseOver={() => setTextDecoration('underline')}
-			onMouseOut={() => setTextDecoration('none')}
-			className={boxClasses.appItemBox}
-			h={'64px'}
-		>
-			<Stack
-				style={{
-					marginRight: '1rem',
-					marginLeft: '1rem',
-				}}
-				justify='center'
-			>
-				<FiCheck style={{ color: selectedTheme?.primaryColor }} />
-			</Stack>
-			<Stack
-				style={{
-					justifyContent: 'center',
-					overflow: 'hidden',
-					textOverflow: 'ellipsis',
-					gap: 0,
-				}}
-			>
-				<Text
-					c={selectedTheme?.primaryColor}
-					className={textClasses.appName}
-					classNames={textClasses}
-				>
-					{'Example App'}
-				</Text>
-				<Text
-					c={selectedTheme?.accentColor}
-					className={textClasses.appUrl}
-					classNames={textClasses}
-					style={{
-						textDecoration: textDecoration,
-					}}
-				>
-					{'https://www.example.com'}
-				</Text>
-			</Stack>
-		</Box>
-	);
-}

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

@@ -11,9 +11,7 @@ import {
 } from '@mantine/core';
 import { useCommonHooks } from 'hooks';
 import FontPicker from 'react-fontpicker-ts';
-import { FaFont, FaGoogle } from 'react-icons/fa';
-import { FaShuffle } from 'react-icons/fa6';
-import { FiX } from 'react-icons/fi';
+import { FaFont, FaGoogle, FaShuffle, FaX } from 'react-icons/fa6';
 import { textClasses, toolTipClasses } from 'styles';
 import type { Theme } from 'types';
 import ThemeChanges from './ThemeChanges';
@@ -192,7 +190,7 @@ export default function ThemeOptions({
 								borderRadius: '0px',
 							}}
 						>
-							<FiX />
+							<FaX />
 						</ActionIcon>
 					</Tooltip>
 				</Group>

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

@@ -17,7 +17,7 @@ export function ThemePreviewMiddleware({
 	selectedPlaylist: any;
 	setSelectedPlaylist: (selectedPlaylist: any) => void;
 }) {
-	const [pressed, setPressed] = useState<any>(false);
+	const [pressed, setPressed] = useState<boolean>(false);
 	const handlers = useLongPress(() => {
 		setPressed(true);
 	});