refactor: migrate params editor drawer to custom component

apps/client/src/common/components/view-params-editor/ViewParamsEditor.tsx

@@ -1,18 +1,12 @@
 import { FormEvent, memo, useEffect } from 'react';
+import { IoClose } from 'react-icons/io5';
 import { useSearchParams } from 'react-router-dom';
-import {
-  Button,
-  Drawer,
-  DrawerBody,
-  DrawerCloseButton,
-  DrawerContent,
-  DrawerFooter,
-  DrawerHeader,
-  DrawerOverlay,
-  useDisclosure,
-} from '@chakra-ui/react';
+import { Dialog } from '@base-ui-components/react/dialog';
+import { useDisclosure } from '@mantine/hooks';
 
 import useViewSettings from '../../hooks-query/useViewSettings';
+import Button from '../buttons/Button';
+import IconButton from '../buttons/IconButton';
 import Info from '../info/Info';
 
 import { ViewOption } from './viewParams.types';
@@ -31,27 +25,27 @@ function ViewParamsEditor({ viewOptions }: EditFormDrawerProps) {
   const [searchParams, setSearchParams] = useSearchParams();
   const { data: viewSettings } = useViewSettings();
 
-  const { isOpen, onClose, onOpen } = useDisclosure();
+  const [isOpen, handlers] = useDisclosure(false);
 
   // handle opening the drawer
   useEffect(() => {
     const isEditing = searchParams.get('edit');
 
     if (isEditing === 'true') {
-      return onOpen();
+      return handlers.open();
     }
-  }, [searchParams, onOpen]);
+  }, [searchParams, handlers]);
 
   const handleClose = () => {
     searchParams.delete('edit');
     setSearchParams(searchParams);
 
-    onClose();
+    handlers.close();
   };
 
   const resetParams = () => {
     setSearchParams();
-    onClose();
+    handlers.close();
   };
 
   const onParamsFormSubmit = (formEvent: FormEvent<HTMLFormElement>) => {
@@ -63,39 +57,48 @@ function ViewParamsEditor({ viewOptions }: EditFormDrawerProps) {
   };
 
   return (
-    <Drawer isOpen={isOpen} placement='right' onClose={handleClose} variant='ontime' size='lg'>
-      <DrawerOverlay />
-      <DrawerContent>
-        <DrawerHeader>
-          <DrawerCloseButton size='lg' />
-          Customise
-        </DrawerHeader>
-
-        <DrawerBody>
-          {viewSettings.overrideStyles && (
-            <Info className={style.info}>This view style is being modified by a custom CSS file.</Info>
-          )}
-          <form id='edit-params-form' onSubmit={onParamsFormSubmit} className={style.sectionList}>
-            {viewOptions.map((section) => (
-              <ViewParamsSection
-                key={section.title}
-                title={section.title}
-                collapsible={section.collapsible}
-                options={section.options}
-              />
-            ))}
-          </form>
-        </DrawerBody>
-
-        <DrawerFooter className={style.drawerFooter}>
-          <Button variant='ontime-ghosted' onClick={resetParams} type='reset'>
-            Reset to default
-          </Button>
-          <Button variant='ontime-filled' form='edit-params-form' type='submit'>
-            Save
-          </Button>
-        </DrawerFooter>
-      </DrawerContent>
-    </Drawer>
+    <Dialog.Root
+      open={isOpen}
+      onOpenChange={(open) => {
+        if (!open) {
+          handleClose();
+        }
+      }}
+    >
+      <Dialog.Portal>
+        <Dialog.Backdrop className={style.backdrop} />
+        <Dialog.Popup className={style.drawer}>
+          <div className={style.header}>
+            <Dialog.Title>Customise</Dialog.Title>
+            <IconButton variant='subtle-white' size='large' onClick={handleClose}>
+              <IoClose />
+            </IconButton>
+          </div>
+          <div className={style.body}>
+            {viewSettings.overrideStyles && (
+              <Info className={style.info}>This view style is being modified by a custom CSS file.</Info>
+            )}
+            <form id='edit-params-form' onSubmit={onParamsFormSubmit} className={style.sectionList}>
+              {viewOptions.map((section) => (
+                <ViewParamsSection
+                  key={section.title}
+                  title={section.title}
+                  collapsible={section.collapsible}
+                  options={section.options}
+                />
+              ))}
+            </form>
+          </div>
+          <div className={style.footer}>
+            <Button variant='subtle' size='large' onClick={resetParams} type='reset'>
+              Reset to default
+            </Button>
+            <Button variant='primary' size='large' form='edit-params-form' type='submit'>
+              Save
+            </Button>
+          </div>
+        </Dialog.Popup>
+      </Dialog.Portal>
+    </Dialog.Root>
   );
 }