feat: add discard changes modal to profile edit

components/Forms/Edit/Profile/index.tsx

@@ -13,8 +13,8 @@ import { profile } from "@/constants/routes/myPages"
 import { trpc } from "@/lib/trpc/client"
 
 import { editProfile } from "@/actions/editProfile"
+import Dialog from "@/components/Dialog"
 import Button from "@/components/TempDesignSystem/Button"
-import Link from "@/components/TempDesignSystem/Link"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { toast } from "@/components/TempDesignSystem/Toasts"
 
@@ -118,11 +118,16 @@ export default function Form({ user }: EditFormProps) {
         </Title>
       </hgroup>
       <div className={styles.btnContainer}>
-        <Button asChild intent="secondary" size="small" theme="base">
-          <Link href={profile[lang]}>
-            {intl.formatMessage({ id: "Discard changes" })}
-          </Link>
-        </Button>
+        <Dialog
+          bodyText={intl.formatMessage({
+            id: "Any changes you've made will be lost.",
+          })}
+          cancelButtonText={intl.formatMessage({ id: "Go back to edit" })}
+          proceedHref={profile[lang]}
+          proceedText={intl.formatMessage({ id: "Yes, discard changes" })}
+          titleText={intl.formatMessage({ id: "Discard unsaved changes?" })}
+          triggerButtonText={intl.formatMessage({ id: "Discard changes" })}
+        />
         <Button
           disabled={!isValid || methods.formState.isSubmitting}
           form={formId}