[React] Stylish form titles (#5817)

* Use <StylishText> for form title

- Also removes useModalState
- This was clunky

* Remove unused improt

src/frontend/src/components/nav/Layout.tsx

@@ -1,8 +1,7 @@
-import { Container, Flex, LoadingOverlay, Space } from '@mantine/core';
+import { Container, Flex, Space } from '@mantine/core';
 import { Navigate, Outlet } from 'react-router-dom';
 
 import { InvenTreeStyle } from '../../globalStyle';
-import { useModalState } from '../../states/ModalState';
 import { useSessionState } from '../../states/SessionState';
 import { Footer } from './Footer';
 import { Header } from './Header';
@@ -20,12 +19,9 @@ export const ProtectedRoute = ({ children }: { children: JSX.Element }) => {
 export default function LayoutComponent() {
   const { classes } = InvenTreeStyle();
 
-  const modalState = useModalState();
-
   return (
     <ProtectedRoute>
       <Flex direction="column" mih="100vh">
-        <LoadingOverlay visible={modalState.loading} />
         <Header />
         <Container className={classes.layoutContent} size="100%">
           <Outlet />

src/frontend/src/functions/forms.tsx

@@ -6,8 +6,8 @@ import { AxiosResponse } from 'axios';
 import { api } from '../App';
 import { ApiForm, ApiFormProps } from '../components/forms/ApiForm';
 import { ApiFormFieldType } from '../components/forms/fields/ApiFormField';
+import { StylishText } from '../components/items/StylishText';
 import { apiUrl } from '../states/ApiState';
-import { useModalState } from '../states/ModalState';
 import { invalidResponse, permissionDenied } from './notifications';
 import { generateUniqueId } from './uid';
 
@@ -98,10 +98,6 @@ export function openModalApiForm(props: ApiFormProps) {
 
   let url = constructFormUrl(props);
 
-  // let modalState = useModalState();
-
-  useModalState.getState().lock();
-
   // Make OPTIONS request first
   api
     .options(url)
@@ -122,7 +118,7 @@ export function openModalApiForm(props: ApiFormProps) {
       let modalId: string = `modal-${props.title}-` + generateUniqueId();
 
       modals.open({
-        title: props.title,
+        title: <StylishText>{props.title}</StylishText>,
         modalId: modalId,
         size: 'xl',
         onClose: () => {
@@ -132,12 +128,8 @@ export function openModalApiForm(props: ApiFormProps) {
           <ApiForm modalId={modalId} props={props} fieldDefinitions={fields} />
         )
       });
-
-      useModalState.getState().unlock();
     })
     .catch((error) => {
-      useModalState.getState().unlock();
-
       console.log('Error:', error);
       if (error.response) {
         invalidResponse(error.response.status);

src/frontend/src/states/ModalState.tsx

@@ -1,16 +0,0 @@
-import { create } from 'zustand';
-
-interface ModalStateProps {
-  loading: boolean;
-  lock: () => void;
-  unlock: () => void;
-}
-
-/**
- * Global state manager for modal forms.
- */
-export const useModalState = create<ModalStateProps>((set) => ({
-  loading: false,
-  lock: () => set(() => ({ loading: true })),
-  unlock: () => set(() => ({ loading: false }))
-}));