Toggleable shadows

src/pages/settings/components/Search/SearchProviders.tsx

@@ -40,7 +40,7 @@ const SearchProviderSettings = () => {
 		endpoint: endpoint,
 	});
 	const [providers, setProviders] = useState<Provider[]>([]);
-	const { isMobile } = useCommonHooks();
+	const { isMobile, theme } = useCommonHooks();
 	const { mutateAsync } = useMutationAPI();
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
 	const [searchValue, setSearchValue] = useState('');
@@ -98,6 +98,11 @@ const SearchProviderSettings = () => {
 										className={textInputClasses.settingsItem}
 										classNames={textInputClasses}
 										withAsterisk
+										styles={
+											theme.textShadowsEnabled && {
+												label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+											}
+										}
 									/>
 									<TextInput
 										key={form.key('prefix')}
@@ -107,6 +112,11 @@ const SearchProviderSettings = () => {
 										className={textInputClasses.settingsItem}
 										classNames={textInputClasses}
 										withAsterisk
+										styles={
+											theme.textShadowsEnabled && {
+												label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+											}
+										}
 									/>
 								</Group>
 								<TextInput
@@ -118,6 +128,11 @@ const SearchProviderSettings = () => {
 									w={'64%'}
 									classNames={textInputClasses}
 									withAsterisk
+									styles={
+										theme.textShadowsEnabled && {
+											label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+										}
+									}
 								/>
 							</Stack>
 							<Group mt={'1rem'}>