Toggleable shadows

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

@@ -14,7 +14,7 @@ function DebouncedBookmarkItem({
 	bookmarkItem: Bookmark;
 	setIsOpen: (isOpen: boolean) => void;
 }) {
-	const { handleDelete, isMobile } = useCommonHooks();
+	const { handleDelete, isMobile, theme } = useCommonHooks();
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
 	const { mutateAsync } = useMutationAPI();
 
@@ -97,6 +97,11 @@ function DebouncedBookmarkItem({
 							name: event.target.value,
 						});
 					}}
+					styles={
+						theme.textShadowsEnabled && {
+							label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+						}
+					}
 				/>
 				<TextInput
 					label={'Category'}
@@ -109,6 +114,11 @@ function DebouncedBookmarkItem({
 							category: event.target.value,
 						});
 					}}
+					styles={
+						theme.textShadowsEnabled && {
+							label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+						}
+					}
 				/>
 			</Group>
 			<Group justify='center' style={{ flexDirection: isMobile ? 'column' : 'row' }}>
@@ -124,6 +134,11 @@ function DebouncedBookmarkItem({
 							url: event.target.value,
 						});
 					}}
+					styles={
+						theme.textShadowsEnabled && {
+							label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+						}
+					}
 				/>
 			</Group>
 		</Card>