refactor(web/alert): alert dialog mantine rewrite

web/src/features/dev/debug/alert.ts

@@ -10,10 +10,10 @@ export const debugAlert = () => {
         content: 'General kenobi  \n Markdown works',
         centered: true,
         cancel: true,
-        labels: {
+        // labels: {
-          confirm: 'Ok',
+        //   confirm: 'Ok',
-          cancel: 'Not ok',
+        //   cancel: 'Not ok',
-        },
+        // },
       },
     },
   ]);

web/src/features/dialog/AlertDialog.tsx

@@ -1,14 +1,5 @@
-import {
+import { Modal, Button, Stack, Group } from '@mantine/core';
-  AlertDialog as Dialog,
+import { useState } from 'react';
-  AlertDialogBody,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogContent,
-  AlertDialogOverlay,
-  useDisclosure,
-  Button,
-} from '@chakra-ui/react';
-import { useRef, useState } from 'react';
 import ReactMarkdown from 'react-markdown';
 import { useNuiEvent } from '../../hooks/useNuiEvent';
 import { fetchNui } from '../../utils/fetchNui';
@@ -27,57 +18,66 @@ export interface AlertProps {
 
 const AlertDialog: React.FC = () => {
   const { locale } = useLocales();
-  const { isOpen, onOpen, onClose } = useDisclosure();
+  const [opened, setOpened] = useState(false);
-  const cancelRef = useRef(null);
   const [dialogData, setDialogData] = useState<AlertProps>({
     header: '',
     content: '',
   });
 
   const closeAlert = (button: string) => {
-    onClose();
+    setOpened(false);
     fetchNui('closeAlert', button);
   };
 
   useNuiEvent('sendAlert', (data: AlertProps) => {
     setDialogData(data);
-    onOpen();
+    setOpened(true);
   });
 
   useNuiEvent('closeAlertDialog', () => {
-    onClose();
+    setOpened(false);
   });
 
   return (
     <>
-      <Dialog
+      <Modal
-        leastDestructiveRef={cancelRef}
+        opened={opened}
-        onClose={onClose}
+        centered={dialogData.centered}
-        isOpen={isOpen}
+        closeOnClickOutside={false}
-        isCentered={dialogData.centered}
+        onClose={() => {
-        closeOnOverlayClick={false}
+          setOpened(false);
-        onEsc={() => closeAlert('cancel')}
+          closeAlert('cancel');
+        }}
+        withCloseButton={false}
+        overlayOpacity={0.5}
+        exitTransitionDuration={150}
+        title={<ReactMarkdown>{dialogData.header}</ReactMarkdown>}
       >
-        <AlertDialogOverlay />
+        <Stack>
-        <AlertDialogContent fontFamily="Inter">
+          <ReactMarkdown>{dialogData.content}</ReactMarkdown>
-          <AlertDialogHeader fontSize="lg" fontWeight="bold">
+          <Group position="right" spacing={10}>
-            {dialogData.header}
-          </AlertDialogHeader>
-          <AlertDialogBody>
-            <ReactMarkdown>{dialogData.content}</ReactMarkdown>
-          </AlertDialogBody>
-          <AlertDialogFooter>
             {dialogData.cancel && (
-              <Button onClick={() => closeAlert('cancel')} mr={3}>
+              <Button
+                uppercase
+                variant="default"
+                sx={{ transition: '150ms' }}
+                onClick={() => closeAlert('cancel')}
+                mr={3}
+              >
                 {dialogData.labels?.cancel || locale.ui.cancel}
               </Button>
             )}
-            <Button colorScheme={dialogData.cancel ? 'blue' : undefined} onClick={() => closeAlert('confirm')}>
+            <Button
+              uppercase
+              variant="light"
+              color={dialogData.cancel ? 'blue' : undefined}
+              onClick={() => closeAlert('confirm')}
+            >
               {dialogData.labels?.confirm || locale.ui.confirm}
             </Button>
-          </AlertDialogFooter>
+          </Group>
-        </AlertDialogContent>
+        </Stack>
-      </Dialog>
+      </Modal>
     </>
   );
 };

web/src/main.tsx

@@ -4,7 +4,6 @@ import './index.css';
 import App from './App';
 import { ChakraProvider } from '@chakra-ui/react';
 import { theme } from './theme';
-import { debugData } from './utils/debugData';
 import { fas } from '@fortawesome/free-solid-svg-icons';
 import { far } from '@fortawesome/free-regular-svg-icons';
 import { fab } from '@fortawesome/free-brands-svg-icons';

web/src/providers/LocaleProvider.tsx

@@ -15,6 +15,7 @@ debugData([
     data: {
       language: 'English',
       ui: {
+        cancel: 'Cancel',
         close: 'Close',
         confirm: 'Confirm',
       },