Standardization

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

@@ -61,7 +61,7 @@ function SettingsCard({
 				{sectionTitle}
 			</Text>
 			<Group w={'100%'} justify='center'>
-				<Stack w={scale !== undefined ? '60%' : '90%'} align='center'>
+				<Stack w={scale === undefined ? '90%' : '60%'} align='center'>
 					<Text fz={'.875rem'} mt={'1rem'}>
 						Density
 					</Text>

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

@@ -58,11 +58,11 @@ function ThemingCard() {
 	});
 
 	useEffect(() => {
-		if (theme.name !== current) {
-			start();
-		} else {
+		if (theme.name === current) {
 			setCurrent(theme.name);
 			stop();
+		} else {
+			start();
 		}
 	}, [theme]);
 
@@ -215,9 +215,7 @@ function ThemingCard() {
 					}
 					onChange={(_value, option: ComboboxItem) => {
 						setCurrentThemePlaylist(option.value);
-						if (option.value !== 'Time of Day') {
-							setThemeName('random');
-						} else {
+						if (option.value === 'Time of Day') {
 							const themeList = JSON.parse(
 								themePlaylistData.find((t: ThemePlaylist) => t.name === 'Time of Day')
 									.themeList,
@@ -228,6 +226,8 @@ function ThemingCard() {
 										t.id === Number(themeList[Math.floor(new Date().getHours() / 6)]),
 								).name,
 							);
+						} else {
+							setThemeName('random');
 						}
 					}}
 				/>