Toggleable shadows

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

@@ -14,7 +14,7 @@ function DebouncedWolClient({
 	wolClient: WolClient;
 	setIsOpen: (isOpen: boolean) => void;
 }) {
-	const { handleDelete, isMobile } = useCommonHooks();
+	const { handleDelete, isMobile, theme } = useCommonHooks();
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
 	const { mutateAsync } = useMutationAPI();
 
@@ -96,6 +96,11 @@ function DebouncedWolClient({
 							hostname: event.target.value,
 						});
 					}}
+					styles={
+						theme.textShadowsEnabled && {
+							label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+						}
+					}
 				/>
 				<TextInput
 					label={'MAC Address'}
@@ -108,6 +113,11 @@ function DebouncedWolClient({
 							macAddress: event.target.value,
 						});
 					}}
+					styles={
+						theme.textShadowsEnabled && {
+							label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+						}
+					}
 				/>
 			</Group>
 		</Card>

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

@@ -33,7 +33,7 @@ const WolClientSettings = () => {
 	});
 	const [wolClients, setWolClients] = useState<WolClient[]>([]);
 	const { mutateAsync } = useMutationAPI();
-	const { isMobile } = useCommonHooks();
+	const { isMobile, theme } = useCommonHooks();
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
 	const [searchValue, setSearchValue] = useState('');
 	const [debouncedSearch] = useDebouncedValue(searchValue, 500);
@@ -85,6 +85,11 @@ const WolClientSettings = () => {
 									className={textInputClasses.settingsItem}
 									classNames={textInputClasses}
 									withAsterisk
+									styles={
+										theme.textShadowsEnabled && {
+											label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+										}
+									}
 								/>
 								<TextInput
 									key={form.key('macAddress')}
@@ -94,6 +99,11 @@ const WolClientSettings = () => {
 									className={textInputClasses.settingsItem}
 									classNames={textInputClasses}
 									withAsterisk
+									styles={
+										theme.textShadowsEnabled && {
+											label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+										}
+									}
 								/>
 							</Group>
 							<Group mt={'1rem'}>