Refactor collection creation UI (#6485)

* Iteration, before functional component

* Use react-hook-form, shared form for new and edit

* Avoid negative margin on input prefix

* Centered now default for modals

app/menus/ApiKeyMenu.tsx

@@ -24,7 +24,6 @@ function ApiKeyMenu({ apiKey }: Props) {
   const handleRevoke = React.useCallback(() => {
     dialogs.openModal({
       title: t("Revoke token"),
-      isCentered: true,
       content: (
         <ApiKeyRevokeDialog onSubmit={dialogs.closeAllModals} apiKey={apiKey} />
       ),

app/menus/CollectionMenu.tsx

@@ -63,7 +63,6 @@ function CollectionMenu({
   const handleExport = React.useCallback(() => {
     dialogs.openModal({
       title: t("Export collection"),
-      isCentered: true,
       content: (
         <ExportDialog
           collection={collection}

app/menus/CommentMenu.tsx

@@ -38,7 +38,6 @@ function CommentMenu({ comment, onEdit, onDelete, className }: Props) {
   const handleDelete = React.useCallback(() => {
     dialogs.openModal({
       title: t("Delete comment"),
-      isCentered: true,
       content: <CommentDeleteDialog comment={comment} onSubmit={onDelete} />,
     });
   }, [dialogs, comment, onDelete, t]);

app/menus/GroupMenu.tsx

@@ -39,7 +39,6 @@ function GroupMenu({ group, onMembers }: Props) {
         title={t("Delete group")}
         onRequestClose={() => setDeleteModalOpen(false)}
         isOpen={deleteModalOpen}
-        isCentered
       >
         <GroupDelete group={group} onSubmit={() => setDeleteModalOpen(false)} />
       </Modal>

app/menus/UserMenu.tsx

@@ -40,7 +40,6 @@ function UserMenu({ user }: Props) {
       ev.preventDefault();
       dialogs.openModal({
         title: t("Change role to admin"),
-        isCentered: true,
         content: (
           <UserChangeToAdminDialog
             user={user}
@@ -57,7 +56,6 @@ function UserMenu({ user }: Props) {
       ev.preventDefault();
       dialogs.openModal({
         title: t("Change role to editor"),
-        isCentered: true,
         content: (
           <UserChangeToMemberDialog
             user={user}
@@ -74,7 +72,6 @@ function UserMenu({ user }: Props) {
       ev.preventDefault();
       dialogs.openModal({
         title: t("Change role to viewer"),
-        isCentered: true,
         content: (
           <UserChangeToViewerDialog
             user={user}
@@ -91,7 +88,6 @@ function UserMenu({ user }: Props) {
       ev.preventDefault();
       dialogs.openModal({
         title: t("Change name"),
-        isCentered: true,
         content: (
           <UserChangeNameDialog user={user} onSubmit={dialogs.closeAllModals} />
         ),
@@ -105,7 +101,6 @@ function UserMenu({ user }: Props) {
       ev.preventDefault();
       dialogs.openModal({
         title: t("Suspend user"),
-        isCentered: true,
         content: (
           <UserSuspendDialog user={user} onSubmit={dialogs.closeAllModals} />
         ),