State fixed

src/pages/homepage/components/SettingsButton.tsx

@@ -47,8 +47,10 @@ function SettingsButton() {
 	const {
 		currentTheme,
 		setCurrentTheme,
+		setThemeName,
 		handleThemeChange,
 		theme,
+		setTheme,
 		appFilter,
 		setAppFilter,
 		bookmarkFilter,
@@ -174,8 +176,8 @@ function SettingsButton() {
 								className={stackClasses.menuStack}
 								classNames={stackClasses}
 							>
-								<Menu.Label pb={'1rem'}>Themes</Menu.Label>
-								<Group pb={'1rem'}>
+								<Menu.Label pb={'.25rem'}>Themes</Menu.Label>
+								<Group mt={'-1rem'} mb={'-.75rem'} w={'95%'} justify='space-between'>
 									<Tooltip label='Shuffle Themes' color={theme.primaryColor} withArrow>
 										<ActionIcon
 											className={actionIconClasses.menuActions}
@@ -216,10 +218,13 @@ function SettingsButton() {
 										</ActionIcon>
 									</Tooltip>
 								</Group>
-								<Text fw={'bold'} fz={20}>
+								<Text fw={'bold'} fz={18}>
 									Currently:{' '}
 								</Text>
 								{theme.name}
+								<Text fw={'bold'} fz={18}>
+									Playlist:{' '}
+								</Text>
 								<Select
 									labelProps={{ display: 'none' }}
 									placeholder='Pick a playlist...'
@@ -242,9 +247,24 @@ function SettingsButton() {
 										option: selectClasses.menuSelectOption,
 									}}
 									comboboxProps={{ withinPortal: false }}
-									onChange={(_value, option: any) =>
-										setCurrentThemePlaylist(option.value)
+									onChange={(_value, option: any) => {
+										setCurrentThemePlaylist(option.value);
+										if (option.value !== 'Time of Day') {
+											setThemeName('random');
+										} else {
+											const themeList = JSON.parse(
+												themePlaylists.find((t: any) => t.name === 'Time of Day')
+													.themeList,
+											);
+											setThemeName(
+												allThemes.find(
+													(t: any) =>
+														t.id ===
+														Number(themeList[Math.floor(new Date().getHours() / 6)]),
+												).name,
+											);
 										}
+									}}
 									onLoad={(option: any) => setCurrentThemePlaylist(option)}
 								/>
 							</Stack>