Theme changes

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

@@ -24,7 +24,7 @@ function DebouncedApplication({
 	setIsOpen,
 	allIcons,
 }: { application: Application; setIsOpen: (isOpen: boolean) => void; allIcons: any }) {
-	const { theme, handleDelete } = useCommonHooks();
+	const { handleDelete } = useCommonHooks();
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
 	const { mutateAsync } = useMutationAPI();
 
@@ -63,8 +63,8 @@ function DebouncedApplication({
 								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)',
 							}}
 						>{`"${app.name}"`}</Text>
 						<Text c='red'>This action cannot be undone!</Text>
@@ -72,8 +72,8 @@ function DebouncedApplication({
 				}
 			/>
 			<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
@@ -89,8 +89,8 @@ function DebouncedApplication({
 				</ActionIcon>
 			</Tooltip>
 			<Tooltip
-				color={theme.primaryColor}
-				bd={`solid 1px ${theme.borderColor}`}
+				color={'var(--mantine-color-primary-0)'}
+				bd={'solid 1px var(--mantine-color-border-0)'}
 				label={'Enabled'}
 			>
 				<Switch
@@ -175,7 +175,6 @@ function DebouncedApplication({
 					defaultValue={app?.icon}
 					comboboxProps={{
 						zIndex: 3000,
-						withinPortal: false,
 					}}
 					onChange={(value: string | null) => {
 						setUpdate({