Bug fixes

src/components/HelpModal/HelpModal.tsx

@@ -21,6 +21,7 @@ export function HelpModal({
 			classNames={modalClasses}
 			opened={providerModalOpened}
 			fullScreen={isMobile}
+			centered
 			onClose={() => {
 				setSearchValue('');
 				setProviderLabel('Google Search');

src/components/WeatherModal/WeatherModal.tsx

@@ -39,6 +39,7 @@ export function WeatherModal({
 			className={modalClasses.helpModal}
 			classNames={modalClasses}
 			opened={weatherModalOpened}
+			centered
 			onClose={() => {
 				setSearchValue('');
 				setProviderLabel('Google Search');

src/pages/settings/components/Applications/Applications.tsx

@@ -46,6 +46,7 @@ const ApplicationSettings = () => {
 	const [searchValue, setSearchValue] = useState('');
 	const [debouncedSearch] = useDebouncedValue(searchValue, 500);
 	const [dragging, setDragging] = useState(false);
+	const [isOpen, setIsOpen] = useState(false);
 
 	const reorder = (list: any, startIndex: any, endIndex: any) => {
 		const result = Array.from(list);
@@ -319,7 +320,12 @@ const ApplicationSettings = () => {
 					<Grid columns={18} w={'75%'}>
 						{applicationData?.map((application: Application) => (
 							<GridCol span={6} key={application.id}>
-								<Popover withArrow withOverlay withinPortal={false}>
+								<Popover
+									withArrow
+									withOverlay
+									withinPortal={false}
+									closeOnClickOutside={!isOpen}
+								>
 									<Popover.Target>
 										<Box
 											onClick={(e) => {
@@ -335,7 +341,10 @@ const ApplicationSettings = () => {
 										</Box>
 									</Popover.Target>
 									<Popover.Dropdown>
-										<DebouncedApplication application={application} />
+										<DebouncedApplication
+											application={application}
+											setIsOpen={setIsOpen}
+										/>
 									</Popover.Dropdown>
 								</Popover>
 							</GridCol>

src/pages/settings/components/Applications/DebouncedApplication.tsx

@@ -17,7 +17,10 @@ import { cardClasses, textInputClasses } from 'styles';
 import type { Application } from 'types';
 import DeleteItemModal from '../Shared/DeleteItemModal';
 
-function DebouncedApplication({ application }: { application: Application }) {
+function DebouncedApplication({
+	application,
+	setIsOpen,
+}: { application: Application; setIsOpen: any }) {
 	const { theme, handleDelete } = useCommonHooks();
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
 	const { mutateAsync } = useMutationAPI();
@@ -25,7 +28,10 @@ function DebouncedApplication({ application }: { application: Application }) {
 	const [app, setApp] = useState<Application>(application);
 	const [update, setUpdate] = useState<any>();
 	const [debounced] = useDebouncedValue(update, 1000);
-
+	const handleClose = () => {
+		setIsOpen(false);
+		closeModal();
+	};
 	useEffect(() => {
 		if (debounced && Object.keys(debounced).length > 0) {
 			mutateAsync({ method: 'PATCH', endpoint: 'api/apps', body: debounced });
@@ -41,7 +47,7 @@ function DebouncedApplication({ application }: { application: Application }) {
 		<Card className={cardClasses.settingsItem} classNames={cardClasses}>
 			<DeleteItemModal
 				modalOpened={modalOpened}
-				handleClose={closeModal}
+				handleClose={handleClose}
 				title='Delete Application'
 				body={
 					<Stack gap={0} w={'100%'} h={'150px'} align='center'>
@@ -64,7 +70,7 @@ function DebouncedApplication({ application }: { application: Application }) {
 								styles={{ label: { color: 'black' } }}
 								onClick={() => {
 									handleDelete(app, 'api/apps');
-									closeModal();
+									handleClose();
 								}}
 							>
 								Delete
@@ -72,9 +78,7 @@ function DebouncedApplication({ application }: { application: Application }) {
 							<Button
 								color={'grey'}
 								styles={{ label: { color: 'black' } }}
-								onClick={() => {
+								onClick={handleClose}
-									closeModal();
-								}}
 							>
 								Cancel
 							</Button>
@@ -92,6 +96,7 @@ function DebouncedApplication({ application }: { application: Application }) {
 					right={16}
 					color='red'
 					onClick={() => {
+						setIsOpen(true);
 						openModal();
 					}}
 				>

src/pages/settings/components/Bookmarks/DebouncedBookmarkItem.tsx

@@ -27,7 +27,10 @@ function DebouncedBookmarkItem({
 	const [bookmark, setBookmark] = useState<Bookmark>(bookmarkItem);
 	const [update, setUpdate] = useState<any>({});
 	const [debounced] = useDebouncedValue(update, 1000);
-
+	const handleClose = () => {
+		setIsOpen(false);
+		closeModal();
+	};
 	useEffect(() => {
 		if (Object.keys(debounced).length) {
 			mutateAsync({ method: 'PATCH', endpoint: 'api/links', body: debounced });
@@ -44,7 +47,7 @@ function DebouncedBookmarkItem({
 		<Card className={cardClasses.settingsItem} classNames={cardClasses}>
 			<DeleteItemModal
 				modalOpened={modalOpened}
-				handleClose={closeModal}
+				handleClose={handleClose}
 				body={
 					<Stack gap={0} w={'100%'} h={'150px'} align='center'>
 						<Text>Are you sure you want to delete this bookmark?</Text>
@@ -66,7 +69,7 @@ function DebouncedBookmarkItem({
 								styles={{ label: { color: 'black' } }}
 								onClick={() => {
 									handleDelete(bookmark, 'api/links');
-									closeModal();
+									handleClose();
 								}}
 							>
 								Delete
@@ -74,9 +77,7 @@ function DebouncedBookmarkItem({
 							<Button
 								color={'grey'}
 								styles={{ label: { color: 'black' } }}
-								onClick={() => {
+								onClick={handleClose}
-									closeModal();
-								}}
 							>
 								Cancel
 							</Button>

src/pages/settings/components/Search/DebouncedSearchProvider.tsx

@@ -16,7 +16,7 @@ import { cardClasses, textInputClasses } from 'styles';
 import type { Provider } from 'types';
 import DeleteItemModal from '../Shared/DeleteItemModal';
 
-function DebouncedSearchProvider({ searchProvider }: any) {
+function DebouncedSearchProvider({ searchProvider, setIsOpen }: any) {
 	const { theme, handleDelete } = useCommonHooks();
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
 	const { mutateAsync } = useMutationAPI();
@@ -25,6 +25,11 @@ function DebouncedSearchProvider({ searchProvider }: any) {
 	const [update, setUpdate] = useState<any>({});
 	const [debounced] = useDebouncedValue(update, 1000);
 
+	const handleClose = () => {
+		setIsOpen(false);
+		closeModal();
+	};
+
 	useEffect(() => {
 		if (Object.keys(debounced).length) {
 			mutateAsync({ method: 'PATCH', endpoint: 'api/providers', body: debounced });
@@ -41,7 +46,7 @@ function DebouncedSearchProvider({ searchProvider }: any) {
 		<Card className={cardClasses.settingsItem} classNames={cardClasses}>
 			<DeleteItemModal
 				modalOpened={modalOpened}
-				handleClose={closeModal}
+				handleClose={handleClose}
 				title={'Delete Search Provider'}
 				body={
 					<Stack gap={0} w={'100%'} h={'150px'} align='center'>
@@ -64,7 +69,7 @@ function DebouncedSearchProvider({ searchProvider }: any) {
 								styles={{ label: { color: 'black' } }}
 								onClick={() => {
 									handleDelete(provider, 'api/providers');
-									closeModal();
+									handleClose();
 								}}
 							>
 								Delete
@@ -72,9 +77,7 @@ function DebouncedSearchProvider({ searchProvider }: any) {
 							<Button
 								color={'grey'}
 								styles={{ label: { color: 'black' } }}
-								onClick={() => {
+								onClick={handleClose}
-									closeModal();
-								}}
 							>
 								Cancel
 							</Button>
@@ -92,6 +95,7 @@ function DebouncedSearchProvider({ searchProvider }: any) {
 					right={16}
 					color='red'
 					onClick={() => {
+						setIsOpen(true);
 						openModal();
 					}}
 				>

src/pages/settings/components/Search/SearchProviders.tsx

@@ -37,6 +37,7 @@ const SearchProviderSettings = () => {
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
 	const [searchValue, setSearchValue] = useState('');
 	const [debouncedSearch] = useDebouncedValue(searchValue, 500);
+	const [isOpen, setIsOpen] = useState(false);
 
 	const handleClose = () => {
 		setNewProvider(defaultProvider);
@@ -151,7 +152,12 @@ const SearchProviderSettings = () => {
 				<Grid columns={18} w={'75%'}>
 					{providerData?.map((provider: Provider) => (
 						<GridCol span={isMobile ? 18 : 6} key={provider.id}>
-							<Popover withArrow withOverlay withinPortal={false}>
+							<Popover
+								withArrow
+								withOverlay
+								withinPortal={false}
+								closeOnClickOutside={!isOpen}
+							>
 								<Popover.Target>
 									<Box
 										onClick={(e) => {
@@ -162,7 +168,10 @@ const SearchProviderSettings = () => {
 									</Box>
 								</Popover.Target>
 								<Popover.Dropdown>
-									<DebouncedSearchProvider searchProvider={provider} />
+									<DebouncedSearchProvider
+										searchProvider={provider}
+										setIsOpen={setIsOpen}
+									/>
 								</Popover.Dropdown>
 							</Popover>
 						</GridCol>

src/pages/settings/components/Shared/AddItemModal.tsx

@@ -15,8 +15,9 @@ function AddItemModal({ modalOpened, handleClose, body, title }: any) {
 			style={modalStyle}
 			closeOnEscape
 			closeOnClickOutside
+			centered
 		>
-			<Modal.Overlay style={{ zIndex: 999 }} />
+			<Modal.Overlay style={{ zIndex: 999, backdropFilter: 'blur(5px)' }} />
 			<Modal.Content style={{ zIndex: 1000 }}>
 				<Modal.Header>
 					<Modal.Title>{title}</Modal.Title>

src/pages/settings/components/Shared/DeleteItemModal.tsx

@@ -15,8 +15,9 @@ function DeleteItemModal({ modalOpened, handleClose, body, title }: any) {
 			style={modalStyle}
 			closeOnEscape
 			closeOnClickOutside
+			centered
 		>
-			<Modal.Overlay style={{ zIndex: 999 }} />
+			<Modal.Overlay style={{ zIndex: 999, backdropFilter: 'blur(5px)' }} />
 			<Modal.Content style={{ zIndex: 1000 }}>
 				<Modal.Header>
 					<Modal.Title>{title}</Modal.Title>

src/pages/settings/components/Theming/ThemeModal.tsx

@@ -126,6 +126,7 @@ function ThemeModal({
 			opened={opened}
 			onClose={handleClose}
 			fullScreen={isMobile}
+			centered
 			style={{
 				'--color-text-pri': theme.primaryColor,
 				'--color-text-acc': theme.accentColor,
@@ -135,7 +136,7 @@ function ThemeModal({
 				'--image-background': `url("${theme.backgroundImage}")`,
 			}}
 		>
-			<Modal.Overlay />
+			<Modal.Overlay style={{ backdropFilter: 'blur(5px)' }} />
 			<Modal.Content>
 				<Modal.Header style={{ justifyContent: 'center' }}>
 					<Group pos={'absolute'}>

src/pages/settings/components/Theming/ThemePlaylistModal.tsx

@@ -45,6 +45,7 @@ function ThemePlaylistModal({
 			classNames={modalClasses}
 			opened={opened}
 			fullScreen={isMobile}
+			centered
 			onClose={() => {
 				handleClose();
 				setThemeList('[]');
@@ -58,7 +59,7 @@ function ThemePlaylistModal({
 				'--image-background': `url("${theme.backgroundImage}")`,
 			}}
 		>
-			<Modal.Overlay />
+			<Modal.Overlay style={{ backdropFilter: 'blur(5px)' }} />
 			<Modal.Content>
 				<Modal.Header style={{ justifyContent: 'center' }}>
 					<Group pos={'absolute'}>

src/pages/settings/components/WoL/DebouncedWolClient.tsx

@@ -15,7 +15,7 @@ import { FiTrash } from 'react-icons/fi';
 import { cardClasses, textInputClasses } from 'styles';
 import DeleteItemModal from '../Shared/DeleteItemModal';
 
-function DebouncedWolClient({ wolClient }: any) {
+function DebouncedWolClient({ wolClient, setIsOpen }: any) {
 	const { theme, handleDelete } = useCommonHooks();
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
 	const { mutateAsync } = useMutationAPI();
@@ -23,6 +23,10 @@ function DebouncedWolClient({ wolClient }: any) {
 	const [client, setClient] = useState<any>(wolClient);
 	const [update, setUpdate] = useState({});
 	const [debounced] = useDebouncedValue(update, 1000);
+	const handleClose = () => {
+		setIsOpen(false);
+		closeModal();
+	};
 
 	useEffect(() => {
 		if (Object.keys(debounced).length) {
@@ -40,7 +44,7 @@ function DebouncedWolClient({ wolClient }: any) {
 		<Card className={cardClasses.settingsItem} classNames={cardClasses}>
 			<DeleteItemModal
 				modalOpened={modalOpened}
-				handleClose={closeModal}
+				handleClose={handleClose}
 				title={'Delete WoL Client'}
 				body={
 					<Stack gap={0} w={'100%'} h={'150px'} align='center'>
@@ -63,7 +67,7 @@ function DebouncedWolClient({ wolClient }: any) {
 								styles={{ label: { color: 'black' } }}
 								onClick={() => {
 									handleDelete(client, 'api/WolClients');
-									closeModal();
+									handleClose();
 								}}
 							>
 								Delete
@@ -71,9 +75,7 @@ function DebouncedWolClient({ wolClient }: any) {
 							<Button
 								color={'grey'}
 								styles={{ label: { color: 'black' } }}
-								onClick={() => {
+								onClick={handleClose}
-									closeModal();
-								}}
 							>
 								Cancel
 							</Button>

src/pages/settings/components/WoL/WolClients.tsx

@@ -35,6 +35,7 @@ const WolClientSettings = () => {
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
 	const [searchValue, setSearchValue] = useState('');
 	const [debouncedSearch] = useDebouncedValue(searchValue, 500);
+	const [isOpen, setIsOpen] = useState(false);
 
 	const handleClose = () => {
 		setNewWolClient(defaultWolClient);
@@ -134,7 +135,12 @@ const WolClientSettings = () => {
 				<Grid columns={18} w={'75%'}>
 					{wolClients?.map((client: WolClient) => (
 						<GridCol w={'100%'} span={isMobile ? 18 : 6} key={client.id}>
-							<Popover withArrow withOverlay withinPortal={false}>
+							<Popover
+								withArrow
+								withOverlay
+								withinPortal={false}
+								closeOnClickOutside={!isOpen}
+							>
 								<Popover.Target>
 									<Group
 										onClick={(e) => {
@@ -146,7 +152,7 @@ const WolClientSettings = () => {
 									</Group>
 								</Popover.Target>
 								<Popover.Dropdown>
-									<DebouncedWolClient wolClient={client} />
+									<DebouncedWolClient wolClient={client} setIsOpen={setIsOpen} />
 								</Popover.Dropdown>
 							</Popover>
 						</GridCol>