feat: create confirm dialog to use instead of window.confirm (#4256)

* feat: create confirm dialog to use instead of window.confirm

* move confirm to right

* add types

* less margin

src/components/ConfirmDialog.tsx

@@ -0,0 +1,52 @@
+import { t } from "../i18n";
+import { Dialog, DialogProps } from "./Dialog";
+import { ToolButton } from "./ToolButton";
+
+import "./ConfirmDialog.scss";
+
+interface Props extends Omit<DialogProps, "onCloseRequest"> {
+  onConfirm: () => void;
+  onCancel: () => void;
+  confirmText?: string;
+  cancelText?: string;
+}
+const ConfirmDialog = (props: Props) => {
+  const {
+    onConfirm,
+    onCancel,
+    children,
+    confirmText = t("buttons.confirm"),
+    cancelText = t("buttons.cancel"),
+    className = "",
+    ...rest
+  } = props;
+  return (
+    <Dialog
+      onCloseRequest={onCancel}
+      small={true}
+      {...rest}
+      className={`confirm-dialog ${className}`}
+    >
+      {children}
+      <div className="confirm-dialog-buttons">
+        <ToolButton
+          type="button"
+          title={cancelText}
+          aria-label={cancelText}
+          label={cancelText}
+          onClick={onCancel}
+          className="confirm-dialog--cancel"
+        />
+        <ToolButton
+          type="button"
+          title={confirmText}
+          aria-label={confirmText}
+          label={confirmText}
+          onClick={onConfirm}
+          className="confirm-dialog--confirm"
+        />
+      </div>
+    </Dialog>
+  );
+};
+export default ConfirmDialog;