Toggleable shadows

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

@@ -38,7 +38,7 @@ function DebouncedGroupSettingsItem({
 	bookmarks: Bookmark[];
 	searchTerm: string;
 }) {
-	const { isMobile, handleDelete, reorder } = useCommonHooks();
+	const { isMobile, handleDelete, reorder, theme } = useCommonHooks();
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
 	const [popoverOpened, setPopoverOpened] = useState(false);
 	const { mutateAsync } = useMutationAPI();
@@ -156,6 +156,11 @@ function DebouncedGroupSettingsItem({
 									categoryName: event.target.value,
 								});
 							}}
+							styles={
+								theme.textShadowsEnabled && {
+									label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+								}
+							}
 						/>
 						<TextInput
 							label={'Filter Name'}
@@ -169,6 +174,11 @@ function DebouncedGroupSettingsItem({
 									filterName: event.target.value,
 								});
 							}}
+							styles={
+								theme.textShadowsEnabled && {
+									label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+								}
+							}
 						/>
 						<Tooltip
 							c={'var(--mantine-color-primary-0)'}
@@ -332,6 +342,11 @@ function DebouncedGroupSettingsItem({
 												pt={'1rem'}
 												classNames={textInputClasses}
 												withAsterisk
+												styles={
+													theme.textShadowsEnabled && {
+														label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+													}
+												}
 											/>
 											<TextInput
 												key={form.key('category')}
@@ -342,6 +357,11 @@ function DebouncedGroupSettingsItem({
 												classNames={textInputClasses}
 												disabled
 												defaultValue={group.categoryName}
+												styles={
+													theme.textShadowsEnabled && {
+														label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+													}
+												}
 											/>
 										</Group>
 										<Group w={'100%'} justify='center' mb={60}>
@@ -355,6 +375,11 @@ function DebouncedGroupSettingsItem({
 												pt={'1rem'}
 												classNames={textInputClasses}
 												withAsterisk
+												styles={
+													theme.textShadowsEnabled && {
+														label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+													}
+												}
 											/>
 										</Group>
 										<Group