Toggleable shadows

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

@@ -37,7 +37,7 @@ const BookmarkSettings = () => {
 	const [dragging, setDragging] = useState(false);
 	const [groups, setGroups] = useState<BookmarkGroup[]>([]);
 	const [groupList, setGroupList] = useState<BookmarkGroup[]>([]);
-	const { isMobile, reorder } = useCommonHooks();
+	const { isMobile, reorder, theme } = useCommonHooks();
 	const { mutateAsync } = useMutationAPI();
 	const [searchValue, setSearchValue] = useState('');
 	const [debouncedGroupSearch] = useDebouncedValue(searchValue, 500);
@@ -149,6 +149,11 @@ const BookmarkSettings = () => {
 									className={textInputClasses.settingsItem}
 									classNames={textInputClasses}
 									withAsterisk
+									styles={
+										theme.textShadowsEnabled && {
+											label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+										}
+									}
 								/>
 								<TextInput
 									key={form.key('filterName')}
@@ -158,6 +163,11 @@ const BookmarkSettings = () => {
 									className={textInputClasses.settingsItem}
 									classNames={textInputClasses}
 									withAsterisk
+									styles={
+										theme.textShadowsEnabled && {
+											label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+										}
+									}
 								/>
 							</Group>
 							<Group mt={'1rem'}>

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>

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