useModalOpen hook

frontend/src/metabase/admin/people/containers/NewUserModal.jsx

@@ -3,18 +3,22 @@ import { connect } from "react-redux";
 import { goBack, push } from "react-router-redux";
 import { t } from "ttag";
 
+import { Modal } from "metabase/ui";
+
 import * as Urls from "metabase/lib/urls";
 
 import User from "metabase/entities/users";
+import { useModalOpen } from "metabase/hooks/use-modal-open";
 
-const NewUserModal = ({ onClose, onSaved, ...props }) => (
-  <User.ModalForm
-    {...props}
-    title={t`New user`}
-    onClose={onClose}
-    onSaved={onSaved}
-  />
-);
+const NewUserModal = ({ onClose, onSaved, ...props }) => {
+  const { open } = useModalOpen();
+
+  return (
+    <Modal opened={open} onClose={onClose} title={t`New User`}>
+      <User.Form {...props} onSaved={onSaved} />
+    </Modal>
+  );
+};
 
 export default connect(null, {
   onClose: goBack,

frontend/src/metabase/admin/routes.jsx

@@ -130,7 +130,7 @@ const getRoutes = (store, CanAccessSettings, IsAdmin) => (
           </Route>
 
           <Route path="" component={PeopleListingApp}>
-            <ModalRoute path="new" modal={NewUserModal} />
+            <Route path="new" component={NewUserModal} />
           </Route>
 
           <Route path=":userId" component={PeopleListingApp}>

frontend/src/metabase/hooks/use-modal-open.tsx

@@ -0,0 +1,13 @@
+import { useEffect, useState } from "react";
+
+export function useModalOpen() {
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    setTimeout(() => {
+      setOpen(true);
+    });
+  }, []);
+
+  return { open };
+}

frontend/src/metabase/ui/components/overlays/Modal/Modal.styled.tsx

@@ -18,6 +18,14 @@ export const getModalOverrides = (): MantineThemeOverride["components"] => ({
         backgroundColor: theme.fn.rgba(theme.colors.bg[3], 0.6),
       },
     }),
+    defaultProps: {
+      centered: true,
+      size: "lg",
+      shadow: "md",
+      radius: "sm",
+      withinPortal: true,
+      padding: "2rem",
+    },
   },
   ModalRoot: {
     defaultProps: {