Updates to personalization

src/pages/homepage/components/SettingsButton/ThemingCard.tsx

@@ -22,7 +22,7 @@ import {
 } from 'styles';
 import type { Theme, ThemePlaylist } from 'types';
 
-function ThemingCard() {
+function ThemingCard({ wolEnabled }: { wolEnabled: number }) {
 	const { data: themePlaylistData } = useQueryAPI({
 		endpoint: 'api/themePlaylists',
 	});
@@ -69,19 +69,35 @@ function ThemingCard() {
 	return (
 		<Stack
 			gap={0}
-			justify='space-between'
+			justify={wolEnabled === 0 ? undefined : 'space-between'}
 			className={stackClasses.menuStack}
 			classNames={stackClasses}
 			pos={'relative'}
-			style={{ aspectRatio: isMobile ? undefined : '1/1' }}
+			style={{
+				aspectRatio: isMobile || wolEnabled === 0 ? undefined : '1/1',
+				height: wolEnabled === 0 ? '316px' : '150px',
+				width: '150px',
+			}}
 		>
 			<Menu.Label pb={'2rem'}>Themes</Menu.Label>
-			<Group mt={'-1.5rem'} mb={'-.25rem'} w={'95%'} h={'100%'} gap={0}>
-				<Stack gap={0}>
+			<Group
+				mt={'-1.5rem'}
+				mb={'-.25rem'}
+				w={'95%'}
+				h={wolEnabled === 0 ? undefined : '100%'}
+				gap={0}
+			>
+				<Stack gap={0} h={'fit-content'} w={'73%'}>
 					<Text className={textClasses.currentTheme} classNames={textClasses}>
 						Current theme:
 					</Text>
-					<Text className={textClasses.themeName} classNames={textClasses}>
+					<Text
+						w={'100%'}
+						ml={4}
+						mt={wolEnabled === 0 ? '1rem' : undefined}
+						className={textClasses.themeName}
+						classNames={textClasses}
+					>
 						{text}
 					</Text>
 				</Stack>