Theme changes

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

@@ -14,7 +14,7 @@ function DebouncedWolClient({
 	wolClient: WolClient;
 	setIsOpen: (isOpen: boolean) => void;
 }) {
-	const { theme, handleDelete } = useCommonHooks();
+	const { handleDelete } = useCommonHooks();
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
 	const { mutateAsync } = useMutationAPI();
 
@@ -55,8 +55,8 @@ function DebouncedWolClient({
 								padding: '8px',
 								margin: '8px',
 								borderRadius: '10px',
-								backgroundColor: 'var(--color-text-acc)',
-								color: 'var(--color-background)',
+								backgroundColor: 'var(--mantine-color-accent-0)',
+								color: 'var(--mantine-color-background-0)',
 							}}
 						>{`"${client.hostname}"`}</Text>
 						<Text c='red'>This action cannot be undone!</Text>
@@ -64,8 +64,8 @@ function DebouncedWolClient({
 				}
 			/>
 			<Tooltip
-				color={theme.primaryColor}
-				bd={`solid 1px ${theme.borderColor}`}
+				color={'var(--mantine-color-primary-0)'}
+				bd={'solid 1px var(--mantine-color-border-0)'}
 				label={'Delete'}
 			>
 				<ActionIcon

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

@@ -144,7 +144,6 @@ const WolClientSettings = () => {
 							<Popover
 								withArrow
 								withOverlay
-								withinPortal={false}
 								closeOnClickOutside={!isOpen}
 								classNames={popoverClasses}
 							>