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/scenes/Settings/ApiKeys.tsx

@@ -71,7 +71,6 @@ function ApiKeys() {
         title={t("Create a token")}
         onRequestClose={handleNewModalClose}
         isOpen={newModalOpen}
-        isCentered
       >
         <APITokenNew onSubmit={handleNewModalClose} />
       </Modal>

app/scenes/Settings/Details.tsx

@@ -113,7 +113,6 @@ function Details() {
     dialogs.openModal({
       title: t("Delete workspace"),
       content: <TeamDelete onSubmit={dialogs.closeAllModals} />,
-      isCentered: true,
     });
   };
 

app/scenes/Settings/Export.tsx

@@ -24,7 +24,6 @@ function Export() {
 
       dialogs.openModal({
         title: t("Export data"),
-        isCentered: true,
         content: <ExportDialog onSubmit={dialogs.closeAllModals} />,
       });
     },

app/scenes/Settings/Import.tsx

@@ -51,7 +51,6 @@ function Import() {
               onClick={() => {
                 dialogs.openModal({
                   title: t("Import data"),
-                  isCentered: true,
                   content: <ImportMarkdownDialog />,
                 });
               }}
@@ -77,7 +76,6 @@ function Import() {
               onClick={() => {
                 dialogs.openModal({
                   title: t("Import data"),
-                  isCentered: true,
                   content: <ImportJSONDialog />,
                 });
               }}
@@ -98,7 +96,6 @@ function Import() {
               onClick={() => {
                 dialogs.openModal({
                   title: t("Import data"),
-                  isCentered: true,
                   content: <ImportNotionDialog />,
                 });
               }}

app/scenes/Settings/Preferences.tsx

@@ -43,7 +43,6 @@ function Preferences() {
     dialogs.openModal({
       title: t("Delete account"),
       content: <UserDelete onSubmit={dialogs.closeAllModals} />,
-      isCentered: true,
     });
   };
 

app/scenes/Settings/Security.tsx

@@ -102,7 +102,6 @@ function Security() {
 
       if (inviteRequired) {
         dialogs.openModal({
-          isCentered: true,
           title: t("Are you sure you want to require invites?"),
           content: (
             <ConfirmationDialog

app/scenes/Settings/components/FileOperationListItem.tsx

@@ -76,7 +76,6 @@ const FileOperationListItem = ({ fileOperation }: Props) => {
 
   const handleConfirmDelete = React.useCallback(async () => {
     dialogs.openModal({
-      isCentered: true,
       title: t("Are you sure you want to delete this import?"),
       content: (
         <ConfirmationDialog