Toggleable shadows

src/pages/settings/components/Applications/Applications.tsx

@@ -56,7 +56,7 @@ const ApplicationSettings = () => {
 	});
 	const [applications, setApplications] = useState<Application[]>([]);
 	const [applicationList, setApplicationList] = useState<Application[]>([]);
-	const { isMobile, reorder } = useCommonHooks();
+	const { isMobile, reorder, theme } = useCommonHooks();
 	const { mutateAsync } = useMutationAPI();
 	const [searchValue, setSearchValue] = useState('');
 	const [debouncedSearch] = useDebouncedValue(searchValue, 500);
@@ -176,6 +176,11 @@ const ApplicationSettings = () => {
 									w={'45%'}
 									classNames={textInputClasses}
 									withAsterisk
+									styles={
+										theme.textShadowsEnabled && {
+											label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+										}
+									}
 								/>
 								<TextInput
 									key={form.key('baseUrl')}
@@ -185,6 +190,11 @@ const ApplicationSettings = () => {
 									className={textInputClasses.settingsItem}
 									w={'45%'}
 									classNames={textInputClasses}
+									styles={
+										theme.textShadowsEnabled && {
+											label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+										}
+									}
 								/>
 							</Group>
 							<Group w={isMobile ? '94%' : '92%'} justify='center'>
@@ -197,6 +207,11 @@ const ApplicationSettings = () => {
 									w={'100%'}
 									classNames={textInputClasses}
 									withAsterisk
+									styles={
+										theme.textShadowsEnabled && {
+											label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+										}
+									}
 								/>
 							</Group>
 							<Group w={'100%'} justify='center' pos={'relative'}>
@@ -223,6 +238,11 @@ const ApplicationSettings = () => {
 									comboboxProps={{
 										zIndex: 3000,
 									}}
+									styles={
+										theme.textShadowsEnabled && {
+											label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+										}
+									}
 									renderOption={(item: ComboboxLikeRenderOptionInput<ComboboxItem>) => {
 										const Icon = allIcons[item.option.value];
 										return (
@@ -249,6 +269,11 @@ const ApplicationSettings = () => {
 									classNames={textInputClasses}
 									defaultValue={defaultApplication.filterName}
 									withAsterisk
+									styles={
+										theme.textShadowsEnabled && {
+											label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+										}
+									}
 								/>
 							</Group>
 							<Group mt={'1rem'}>