From e6743ab27e64e7a03c3f3237261e7bf1b1dd3ca0 Mon Sep 17 00:00:00 2001
From: Pas <74743263+Pasithea0@users.noreply.github.com>
Date: Sun, 23 Mar 2025 11:27:41 -0600
Subject: [PATCH] Update AccountActionsPart.tsx

---
 .../parts/settings/AccountActionsPart.tsx     | 103 ++++++++++--------
 1 file changed, 55 insertions(+), 48 deletions(-)

diff --git a/src/pages/parts/settings/AccountActionsPart.tsx b/src/pages/parts/settings/AccountActionsPart.tsx
index 801ea9b5..166dd31c 100644
--- a/src/pages/parts/settings/AccountActionsPart.tsx
+++ b/src/pages/parts/settings/AccountActionsPart.tsx
@@ -32,48 +32,50 @@ export function AccountActionsPart() {
     <div>
       <Heading2 border>{t("settings.account.actions.title")}</Heading2>
 
-      {/* Logout All Devices Section */}
-      <SolidSettingsCard
-        paddingClass="px-6 py-12 mb-10"
-        className="grid grid-cols-1 lg:grid-cols-2 gap-6 lg:gap-12"
-      >
-        <div>
-          <Heading3>
-            {" "}
-            {t("settings.account.actions.logoutAllDevices.title")}
-          </Heading3>
-          <p className="text-type-text">
-            {t("settings.account.actions.logoutAllDevices.text")}
-          </p>
-        </div>
-        <div className="flex justify-start lg:justify-end items-center">
-          <Button theme="danger" onClick={signOutAllDevices}>
-            {t("settings.account.actions.logoutAllDevices.button")}
-          </Button>
-        </div>
-      </SolidSettingsCard>
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        {/* Logout All Devices Card */}
+        <SolidSettingsCard
+          paddingClass="px-6 py-8"
+          className="flex flex-col h-full"
+        >
+          <div className="flex-grow">
+            <Heading3>
+              {t("settings.account.actions.logoutAllDevices.title")}
+            </Heading3>
+            <p className="text-type-text mt-3">
+              {t("settings.account.actions.logoutAllDevices.text")}
+            </p>
+          </div>
+          <div className="mt-6 flex justify-center">
+            <Button theme="danger" onClick={signOutAllDevices}>
+              {t("settings.account.actions.logoutAllDevices.button")}
+            </Button>
+          </div>
+        </SolidSettingsCard>
+
+        {/* Delete Account Card */}
+        <SolidSettingsCard
+          paddingClass="px-6 py-8"
+          className="flex flex-col h-full"
+        >
+          <div className="flex-grow">
+            <Heading3>{t("settings.account.actions.delete.title")}</Heading3>
+            <p className="text-type-text mt-3">
+              {t("settings.account.actions.delete.text")}
+            </p>
+          </div>
+          <div className="mt-6 flex justify-center">
+            <Button
+              theme="danger"
+              loading={deleteResult.loading}
+              onClick={deleteModal.show}
+            >
+              {t("settings.account.actions.delete.button")}
+            </Button>
+          </div>
+        </SolidSettingsCard>
+      </div>
 
-      {/* Delete Account Section */}
-      <SolidSettingsCard
-        paddingClass="px-6 py-12"
-        className="grid grid-cols-1 lg:grid-cols-2 gap-6 lg:gap-12"
-      >
-        <div>
-          <Heading3>{t("settings.account.actions.delete.title")}</Heading3>
-          <p className="text-type-text">
-            {t("settings.account.actions.delete.text")}
-          </p>
-        </div>
-        <div className="flex justify-start lg:justify-end items-center">
-          <Button
-            theme="danger"
-            loading={deleteResult.loading}
-            onClick={deleteModal.show}
-          >
-            {t("settings.account.actions.delete.button")}
-          </Button>
-        </div>
-      </SolidSettingsCard>
       <Modal id={deleteModal.id}>
         <ModalCard>
           <Heading2 className="!mt-0">
@@ -82,13 +84,18 @@ export function AccountActionsPart() {
           <Paragraph>
             {t("settings.account.actions.delete.confirmDescription")}
           </Paragraph>
-          <Button
-            theme="danger"
-            loading={deleteResult.loading}
-            onClick={deleteExec}
-          >
-            {t("settings.account.actions.delete.confirmButton")}
-          </Button>
+          <div className="flex gap-4 mt-4 justify-between">
+            <Button theme="secondary" onClick={deleteModal.hide}>
+              {t("onboarding.defaultConfirm.cancel")}
+            </Button>
+            <Button
+              theme="danger"
+              loading={deleteResult.loading}
+              onClick={deleteExec}
+            >
+              {t("settings.account.actions.delete.confirmButton")}
+            </Button>
+          </div>
         </ModalCard>
       </Modal>
     </div>