Style updates and bugfixes

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

@@ -0,0 +1,43 @@
+import { Group, Text } from '@mantine/core';
+import type { Theme } from 'types';
+
+export function ThemeMiniCard({ miniTheme }: { miniTheme: Theme | undefined }) {
+	return (
+		<Group
+			gap={0}
+			align='center'
+			justify='center'
+			display={'grid'}
+			pos={'relative'}
+			w={'175px'}
+			h={'60px'}
+			style={{
+				backgroundImage:
+					miniTheme?.backgroundImage.toLocaleLowerCase() !== 'none'
+						? `linear-gradient(${miniTheme?.backgroundColor}33, ${miniTheme?.backgroundColor}33), url(../../api/backgroundImages/${miniTheme?.backgroundImage})`
+						: undefined,
+				backgroundSize:
+					miniTheme?.backgroundImage.toLocaleLowerCase() !== 'none' ? 'cover' : undefined,
+				backgroundColor:
+					miniTheme?.backgroundImage.toLocaleLowerCase() === 'none'
+						? miniTheme?.backgroundColor
+						: undefined,
+				backgroundPosition: 'center',
+				border: `solid ${miniTheme?.borderColor}`,
+				borderRadius: '8px',
+			}}
+		>
+			<Text
+				bg={miniTheme?.backgroundColor}
+				c={miniTheme?.primaryColor}
+				size='md'
+				style={{
+					padding: '.25rem',
+					borderRadius: '8px',
+				}}
+			>
+				{miniTheme?.name}
+			</Text>
+		</Group>
+	);
+}