refactor: restructure settings

refactor: migrate react components

apps/client/src/features/app-settings/panel/shutdown-panel/ShutdownPanel.tsx

@@ -1,27 +1,20 @@
 import { useRef } from 'react';
-import {
-  AlertDialog,
-  AlertDialogBody,
-  AlertDialogContent,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogOverlay,
-  Button,
-  useDisclosure,
-} from '@chakra-ui/react';
+import { useDisclosure } from '@mantine/hooks';
 
+import Button from '../../../../common/components/buttons/Button';
+import Dialog from '../../../../common/components/dialog/Dialog';
 import { useElectronEvent } from '../../../../common/hooks/useElectronEvent';
 import { isLocalhost, isOntimeCloud } from '../../../../externals';
 import * as Panel from '../../panel-utils/PanelUtils';
 
 export default function ShutdownPanel() {
   const { isElectron, sendToElectron } = useElectronEvent();
-  const { isOpen, onOpen, onClose } = useDisclosure();
+  const [isOpen, handler] = useDisclosure();
   const cancelRef = useRef<HTMLButtonElement | null>(null);
 
   const sendShutdown = () => {
     sendToElectron('shutdown', 'now');
-    onClose();
+    handler.close();
   };
 
   const canShutdown = isElectron || isLocalhost;
@@ -40,32 +33,33 @@ export default function ShutdownPanel() {
             The runtime state will be lost, but your project is kept for next time.
           </Panel.Paragraph>
         )}
-        <Button colorScheme='red' onClick={onOpen} maxWidth='350px' isDisabled={!(isElectron || isLocalhost)}>
+        <Button variant='destructive' onClick={handler.open} disabled={!(isElectron || isLocalhost)}>
           Shutdown ontime
         </Button>
         {!canShutdown && (
           <Panel.Description>Note: Ontime can only be shutdown from the machine it is running in.</Panel.Description>
         )}
-        <AlertDialog variant='ontime' isOpen={isOpen} leastDestructiveRef={cancelRef} onClose={onClose}>
-          <AlertDialogOverlay>
-            <AlertDialogContent>
-              <AlertDialogHeader fontSize='lg' fontWeight='bold'>
-                Ontime Shutdown
-              </AlertDialogHeader>
-              <AlertDialogBody>
-                This will shutdown the Ontime server. <br /> Are you sure?
-              </AlertDialogBody>
-              <AlertDialogFooter>
-                <Button ref={cancelRef} onClick={onClose} variant='ontime-ghosted-white'>
-                  Cancel
-                </Button>
-                <Button colorScheme='red' onClick={sendShutdown} disabled={!canShutdown}>
-                  Shutdown
-                </Button>
-              </AlertDialogFooter>
-            </AlertDialogContent>
-          </AlertDialogOverlay>
-        </AlertDialog>
+        <Dialog
+          isOpen={isOpen}
+          title='Shutdown Ontime'
+          showCloseButton
+          onClose={handler.close}
+          bodyElements={
+            <Panel.Paragraph>
+              This will shutdown the Ontime server. <br /> Are you sure?
+            </Panel.Paragraph>
+          }
+          footerElements={
+            <>
+              <Button ref={cancelRef} onClick={handler.close} variant='ghosted-white'>
+                Cancel
+              </Button>
+              <Button variant='destructive' onClick={sendShutdown} disabled={!canShutdown}>
+                Shutdown
+              </Button>
+            </>
+          }
+        />
       </Panel.Section>
     </>
   );