Style updates

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

@@ -4,7 +4,7 @@ import { DeleteItemModal } from 'components';
 import { useCommonHooks, useMutationAPI } from 'hooks';
 import { useEffect, useState } from 'react';
 import { FiTrash } from 'react-icons/fi';
-import { cardClasses, textInputClasses } from 'styles';
+import { cardClasses, textClasses, textInputClasses, toolTipClasses } from 'styles';
 import type { WolClient } from 'types';
 
 function DebouncedWolClient({
@@ -53,24 +53,16 @@ function DebouncedWolClient({
 					<Stack gap={0} w={'100%'} h={'150px'} align='center'>
 						<Text>Are you sure you want to delete this WoL Client?</Text>
 						<Text
-							style={{
-								fontWeight: 'bold',
-								fontSize: '1.25rem',
-								padding: '.5rem',
-								margin: '.5rem',
-								borderRadius: '10px',
-								backgroundColor: 'var(--mantine-color-accent-0)',
-								color: 'var(--mantine-color-background-0)',
-							}}
+							className={textClasses.deleteItem}
+							classNames={textClasses}
 						>{`"${client.hostname}"`}</Text>
 						<Text c='red'>This action cannot be undone!</Text>
 					</Stack>
 				}
 			/>
 			<Tooltip
-				c={'var(--mantine-color-primary-0)'}
-				bg={'var(--mantine-color-background-0)'}
-				bd={'solid 1px var(--mantine-color-border-0)'}
+				className={toolTipClasses.default}
+				classNames={toolTipClasses}
 				label={'Delete'}
 			>
 				<ActionIcon