fix(frontend): apply feedback updates

frontend/src/app-components/buttons/FormButtons.tsx

@@ -1,34 +1,32 @@
 /*
- * Copyright © 2024 Hexastack. All rights reserved.
+ * Copyright © 2025 Hexastack. All rights reserved.
  *
  * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
  * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
  * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
  */
 
+
 import CheckIcon from "@mui/icons-material/Check";
 import CloseIcon from "@mui/icons-material/Close";
-import { Button } from "@mui/material";
+import { Button, Grid } from "@mui/material";
 
 import { useTranslate } from "@/hooks/useTranslate";
 import { FormButtonsProps } from "@/types/common/dialogs.types";
 
-export const FormButtons = <T,>({
+export const DialogFormButtons = <T,>({
   onCancel,
-  onConfirm,
+  onSubmit,
 }: FormButtonsProps<T>) => {
   const { t } = useTranslate();
 
   return (
-    <>
+    <Grid
-      <Button
+      p="5px 15px"
-        type="submit"
+      width="100%"
-        variant="contained"
+      display="flex"
-        onClick={onConfirm}
+      justifyContent="space-between"
-        startIcon={<CheckIcon />}
+    >
-      >
-        {t("button.submit")}
-      </Button>
       <Button
         color="error"
         variant="outlined"
@@ -37,6 +35,14 @@ export const FormButtons = <T,>({
       >
         {t("button.cancel")}
       </Button>
-    </>
+      <Button
+        type="button"
+        variant="contained"
+        onClick={onSubmit}
+        startIcon={<CheckIcon />}
+      >
+        {t("button.submit")}
+      </Button>
+    </Grid>
   );
 };

frontend/src/app-components/dialogs/FormDialog.tsx

@@ -6,13 +6,12 @@
  * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
  */
 
-
 import { Dialog, DialogActions, DialogContent } from "@mui/material";
 
 import { DialogTitle } from "@/app-components/dialogs";
 import { FormDialogProps } from "@/types/common/dialogs.types";
 
-import { FormButtons } from "../buttons/FormButtons";
+import { DialogFormButtons } from "../buttons/FormButtons";
 
 export const FormDialog = <T,>({
   title,
@@ -26,10 +25,10 @@ export const FormDialog = <T,>({
         {title}
       </DialogTitle>
       <DialogContent>{children}</DialogContent>
-      <DialogActions>
+      <DialogActions style={{ padding: "8px" }}>
-        <FormButtons
+        <DialogFormButtons
           onCancel={() => rest.onClose?.({}, "backdropClick")}
-          onConfirm={onSubmit}
+          onSubmit={onSubmit}
         />
       </DialogActions>
     </Dialog>

frontend/src/components/categories/CategoryForm.tsx

@@ -85,9 +85,9 @@ export const CategoryForm: FC<ComponentFormProps<ICategory>> = ({
 
   return (
     <FormWrapper
-      open={!!FormWrapperProps?.open}
-      onSubmit={submitAsync}
       {...FormWrapperProps}
+      onSubmit={submitAsync}
+      open={!!FormWrapperProps?.open}
     >
       <form onSubmit={submitAsync}>
         <ContentContainer>

frontend/src/types/common/dialogs.types.ts

@@ -154,7 +154,7 @@ export type ComponentFormProps<T> = {
 
 export interface FormButtonsProps<T> {
   onCancel?: () => void;
-  onConfirm: (e: BaseSyntheticEvent) => Promise<T>;
+  onSubmit: (e: BaseSyntheticEvent) => Promise<T>;
 }
 
 export type ComponentFormDialogProps<T> = DialogProps<T | null, boolean>;