fix(frontend): apply feedback updates

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

@@ -19,17 +19,14 @@ export const FormDialog = <T,>({
   onSubmit,
   ...rest
 }: FormDialogProps<T>) => {
+  const handleClose = () => rest.onClose?.({}, "backdropClick");
+
   return (
     <Dialog fullWidth {...rest}>
-      <DialogTitle onClose={() => rest.onClose?.({}, "backdropClick")}>
-        {title}
-      </DialogTitle>
+      <DialogTitle onClose={handleClose}>{title}</DialogTitle>
       <DialogContent>{children}</DialogContent>
-      <DialogActions style={{ padding: "8px" }}>
-        <DialogFormButtons
-          onCancel={() => rest.onClose?.({}, "backdropClick")}
-          onSubmit={onSubmit}
-        />
+      <DialogActions style={{ padding: "0.5rem" }}>
+        <DialogFormButtons onCancel={handleClose} onSubmit={onSubmit} />
       </DialogActions>
     </Dialog>
   );

frontend/src/app-components/dialogs/confirm/ConfirmDialog.tsx

@@ -6,9 +6,16 @@
  * 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 { Button, Dialog, DialogActions, DialogContent } from "@mui/material";
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  Grid,
+} from "@mui/material";
 import { FC, ReactNode } from "react";
 
+import { useTranslate } from "@/hooks/useTranslate";
 import { ConfirmOptions, DialogProps } from "@/types/common/dialogs.types";
 
 import { DialogTitle } from "../DialogTitle";
@@ -23,6 +30,7 @@ export interface ConfirmDialogProps
   extends DialogProps<ConfirmDialogPayload, boolean> {}
 
 export const ConfirmDialog: FC<ConfirmDialogProps> = ({ payload, ...rest }) => {
+  const { t } = useTranslate();
   const cancelButtonProps = useDialogLoadingButton(() => rest.onClose(false));
   const okButtonProps = useDialogLoadingButton(() => rest.onClose(true));
 
@@ -34,22 +42,24 @@ export const ConfirmDialog: FC<ConfirmDialogProps> = ({ payload, ...rest }) => {
       onClose={() => rest.onClose(false)}
     >
       <DialogTitle onClose={() => rest.onClose(false)}>
-        {payload.title}
+        {payload.title || t("title.warning")}
       </DialogTitle>
       <DialogContent>{payload.msg}</DialogContent>
       <DialogActions>
-        <Button
-          color={payload.severity || "error"}
-          variant="contained"
-          disabled={!open}
-          autoFocus
-          {...okButtonProps}
-        >
-          {payload.okText}
-        </Button>
-        <Button variant="outlined" disabled={!open} {...cancelButtonProps}>
-          {payload.cancelText}
-        </Button>
+        <Grid p="0.3rem 1rem" gap="0.5rem" display="flex">
+          <Button
+            color={payload.severity || "error"}
+            variant="contained"
+            disabled={!open}
+            autoFocus
+            {...okButtonProps}
+          >
+            {payload.okText || t("label.yes")}
+          </Button>
+          <Button variant="outlined" disabled={!open} {...cancelButtonProps}>
+            {payload.cancelText || t("label.no")}
+          </Button>
+        </Grid>
       </DialogActions>
     </Dialog>
   );

frontend/src/app-components/dialogs/confirm/ConfirmDialogBody.tsx

@@ -11,16 +11,30 @@ import { Grid, Typography } from "@mui/material";
 
 import { useTranslate } from "@/hooks/useTranslate";
 
-export const ConfirmDialogBody = () => {
+export const ConfirmDialogBody = ({
+  mode = "click",
+  itemsNumber = 1,
+}: {
+  mode?: "selection" | "click";
+  itemsNumber?: number;
+}) => {
   const { t } = useTranslate();
+  const DialogBodyText =
+    itemsNumber === 1
+      ? t("message.item_delete_confirm", {
+          "0": mode === "click" ? "" : t("message.selected"),
+        })
+      : t("message.items_delete_confirm", {
+          "0": itemsNumber.toString(),
+        });
 
   return (
     <Grid container gap={1}>
-      <Grid item height="28px">
-        <ErrorIcon sx={{ fontSize: "28px" }} color="error" />
+      <Grid item height="1.75rem">
+        <ErrorIcon sx={{ fontSize: "1.75rem" }} color="error" />
       </Grid>
       <Grid item alignSelf="center">
-        <Typography>{t("message.item_delete_confirm")}</Typography>
+        <Typography>{DialogBodyText}</Typography>
       </Grid>
     </Grid>
   );