Merge branch 'main' into export-more-for-header

invokeai/frontend/web/src/common/components/IAIAlertDialog.tsx

@@ -9,6 +9,7 @@ import {
   useDisclosure,
 } from '@chakra-ui/react';
 import { cloneElement, memo, ReactElement, ReactNode, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
 import IAIButton from './IAIButton';
 
 type Props = {
@@ -22,10 +23,12 @@ type Props = {
 };
 
 const IAIAlertDialog = forwardRef((props: Props, ref) => {
+  const { t } = useTranslation();
+
   const {
-    acceptButtonText = 'Accept',
+    acceptButtonText = t('common.accept'),
     acceptCallback,
-    cancelButtonText = 'Cancel',
+    cancelButtonText = t('common.cancel'),
     cancelCallback,
     children,
     title,
@@ -56,6 +59,7 @@ const IAIAlertDialog = forwardRef((props: Props, ref) => {
         isOpen={isOpen}
         leastDestructiveRef={cancelRef}
         onClose={onClose}
+        isCentered
       >
         <AlertDialogOverlay>
           <AlertDialogContent>

invokeai/frontend/web/src/common/components/IAIForm.tsx

@@ -0,0 +1,8 @@
+import { chakra } from '@chakra-ui/react';
+
+/**
+ * Chakra-enabled <form />
+ */
+const IAIForm = chakra.form;
+
+export default IAIForm;

invokeai/frontend/web/src/common/components/IAIForms/IAIFormItemWrapper.tsx

@@ -0,0 +1,23 @@
+import { Flex } from '@chakra-ui/react';
+import { ReactElement } from 'react';
+
+export function IAIFormItemWrapper({
+  children,
+}: {
+  children: ReactElement | ReactElement[];
+}) {
+  return (
+    <Flex
+      sx={{
+        flexDirection: 'column',
+        padding: 4,
+        rowGap: 4,
+        borderRadius: 'base',
+        width: 'full',
+        bg: 'base.900',
+      }}
+    >
+      {children}
+    </Flex>
+  );
+}