feat(mobile): add delete account function (#12688)

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **New Features**
  - Introduced a "Delete my account" option in mobile settings with role-based warnings and confirmation modals.
- **Enhancements**
  - Added flexible row and reverse row layout options for modal footers and action buttons on mobile.
- **Localization**
  - Added English translation for the "Delete my account" setting.
- **Style**
  - Updated styles for modal footers and action buttons on mobile.
  - Added styling for account deletion dialog descriptions.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

packages/frontend/component/src/ui/modal/confirm-modal.css.ts

@@ -67,9 +67,16 @@ export const mobileStyles = {
     flexDirection: 'column',
     gap: 16,
     selectors: {
+      '&.row': {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+      },
       '&.reverse': {
         flexDirection: 'column-reverse',
       },
+      '&.rowReverse': {
+        flexDirection: 'row-reverse',
+      },
     },
   }),
   action: style([
@@ -80,6 +87,15 @@ export const mobileStyles = {
       borderRadius: 8,
       fontSize: 17,
       fontWeight: 400,
+      selectors: {
+        '&.row': {
+          width: 'auto',
+          minWidth: 0,
+          maxWidth: 140,
+          flex: 1,
+          height: 32,
+        },
+      },
     },
   ]),
 };

packages/frontend/component/src/ui/modal/confirm-modal.tsx

@@ -21,6 +21,11 @@ export interface ConfirmModalProps extends ModalProps {
   cancelText?: React.ReactNode;
   cancelButtonOptions?: Omit<ButtonProps, 'children'>;
   reverseFooter?: boolean;
+  /**
+   * Whether to use row layout for mobile footer
+   * @default false
+   */
+  rowFooter?: boolean;
   /**
    * Auto focus on confirm button when modal opened
    * @default true
@@ -45,6 +50,7 @@ export const ConfirmModal = ({
   descriptionClassName,
   childrenContentClassName,
   contentOptions,
+  rowFooter = false,
   ...props
 }: ConfirmModalProps) => {
   const onConfirmClick = useCallback(() => {
@@ -84,13 +90,17 @@ export const ConfirmModal = ({
       <div
         className={clsx(styles.footer, {
           modalFooterWithChildren: !!children,
-          reverse: reverseFooter,
+          reverse: reverseFooter && !rowFooter,
+          row: rowFooter,
+          rowReverse: reverseFooter && rowFooter,
         })}
       >
         {onCancel !== false ? (
           <DialogTrigger asChild>
             <Button
-              className={styles.action}
+              className={clsx(styles.action, {
+                row: rowFooter,
+              })}
               onClick={handleCancel}
               data-testid="confirm-modal-cancel"
               {...cancelButtonOptions}
@@ -108,7 +118,9 @@ export const ConfirmModal = ({
           <CustomConfirmButton data-testid="confirm-modal-confirm" />
         ) : (
           <Button
-            className={styles.action}
+            className={clsx(styles.action, {
+              row: rowFooter,
+            })}
             onClick={onConfirmClick}
             data-testid="confirm-modal-confirm"
             autoFocus={autoFocusConfirm}