Toggleable shadows

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

@@ -25,7 +25,7 @@ function DebouncedApplication({
 	setIsOpen: (isOpen: boolean) => void;
 	allIcons: any;
 }) {
-	const { handleDelete, isMobile } = useCommonHooks();
+	const { handleDelete, isMobile, theme } = useCommonHooks();
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
 	const { mutateAsync } = useMutationAPI();
 
@@ -103,6 +103,11 @@ function DebouncedApplication({
 						});
 					}}
 					disabled
+					styles={
+						theme.textShadowsEnabled && {
+							label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+						}
+					}
 				/>
 				<TextInput
 					label={'Base URL'}
@@ -115,6 +120,11 @@ function DebouncedApplication({
 							baseUrl: event.target.value,
 						});
 					}}
+					styles={
+						theme.textShadowsEnabled && {
+							label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+						}
+					}
 				/>
 			</Group>
 			<Group
@@ -134,6 +144,11 @@ function DebouncedApplication({
 							url: event.target.value,
 						});
 					}}
+					styles={
+						theme.textShadowsEnabled && {
+							label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+						}
+					}
 				/>
 			</Group>
 			<Group
@@ -163,6 +178,11 @@ function DebouncedApplication({
 					comboboxProps={{
 						zIndex: 3000,
 					}}
+					styles={
+						theme.textShadowsEnabled && {
+							label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+						}
+					}
 					onChange={(value: string | null) => {
 						setUpdate({
 							...app,
@@ -194,6 +214,11 @@ function DebouncedApplication({
 							filterName: event.target.value,
 						});
 					}}
+					styles={
+						theme.textShadowsEnabled && {
+							label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+						}
+					}
 				/>
 			</Group>
 		</Card>