Refactored common hooks to reduce api calls

src/pages/settings/components/ThemeModal.tsx

@@ -7,7 +7,6 @@ import {
 	Group,
 	Image,
 	Modal,
-	OptionalPortal,
 	Select,
 	Stack,
 	Text,
@@ -153,35 +152,32 @@ function ThemeModal({
 								/>
 							</Group>
 							<Group justify='space-between'>
-								<OptionalPortal withinPortal={false}>
-									<Select
-										data={backgroundList}
-										className={selectClasses.select}
-										classNames={selectClasses}
-										label='Background Image'
-										value={selectedTheme.backgroundImage}
-										renderOption={(value) => {
-											return (
-												<Group h={'100%'} w={'100%'} justify='space-between'>
-													{value.option.value}
-													{value.option.value && value.option.value !== 'None' && (
-														<Image
-															h={'28px'}
-															w={'50px'}
-															src={`/backgrounds/${value.option.value}`}
-														/>
-													)}
-												</Group>
-											);
-										}}
-										onChange={(value) =>
-											setSelectedTheme({
-												...selectedTheme,
-												backgroundImage: value,
-											})
-										}
-									/>
-								</OptionalPortal>
+								<Select
+									data={backgroundList}
+									classNames={selectClasses}
+									label='Background Image'
+									value={selectedTheme.backgroundImage}
+									renderOption={(value) => {
+										return (
+											<Group h={'100%'} w={'100%'} justify='space-between'>
+												{value.option.value}
+												{value.option.value && value.option.value !== 'None' && (
+													<Image
+														h={'28px'}
+														w={'50px'}
+														src={`/backgrounds/${value.option.value}`}
+													/>
+												)}
+											</Group>
+										);
+									}}
+									onChange={(value) =>
+										setSelectedTheme({
+											...selectedTheme,
+											backgroundImage: value,
+										})
+									}
+								/>
 							</Group>
 						</Stack>
 						<Stack h={'100%'} w={'50%'} align='center' justify='center'>