From e5c6999b949cc66b42e8210d866cdebe737ccd44 Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Fri, 11 Oct 2024 13:51:47 +0530
Subject: [PATCH] Exit section

---
 .../src/components/DeleteAccountModal.tsx     | 156 +++++++++---------
 .../photos/src/components/Sidebar/index.tsx   |  30 ++--
 2 files changed, 87 insertions(+), 99 deletions(-)

diff --git a/web/apps/photos/src/components/DeleteAccountModal.tsx b/web/apps/photos/src/components/DeleteAccountModal.tsx
index 795d96bfb3..51e05086a1 100644
--- a/web/apps/photos/src/components/DeleteAccountModal.tsx
+++ b/web/apps/photos/src/components/DeleteAccountModal.tsx
@@ -116,87 +116,85 @@ const DeleteAccountModal = ({ open, onClose }: Iprops) => {
     };
 
     return (
-        <>
-            <TitledMiniDialog
-                fullWidth
-                open={open}
-                onClose={onClose}
-                fullScreen={isMobile}
-                title={t("delete_account")}
+        <TitledMiniDialog
+            fullWidth
+            open={open}
+            onClose={onClose}
+            fullScreen={isMobile}
+            title={t("delete_account")}
+        >
+            <Formik<FormValues>
+                initialValues={{
+                    reason: "",
+                    feedback: "",
+                }}
+                validationSchema={Yup.object().shape({
+                    reason: Yup.string().required(t("required")),
+                })}
+                validateOnChange={false}
+                validateOnBlur={false}
+                onSubmit={initiateDelete}
             >
-                <Formik<FormValues>
-                    initialValues={{
-                        reason: "",
-                        feedback: "",
-                    }}
-                    validationSchema={Yup.object().shape({
-                        reason: Yup.string().required(t("required")),
-                    })}
-                    validateOnChange={false}
-                    validateOnBlur={false}
-                    onSubmit={initiateDelete}
-                >
-                    {({
-                        values,
-                        errors,
-                        handleChange,
-                        handleSubmit,
-                    }): JSX.Element => (
-                        <form noValidate onSubmit={handleSubmit}>
-                            <Stack spacing={"24px"}>
-                                <DropdownInput
-                                    options={deleteReasonOptions()}
-                                    label={t("delete_account_reason_label")}
-                                    placeholder={t(
-                                        "delete_account_reason_placeholder",
-                                    )}
-                                    selected={values.reason}
-                                    setSelected={handleChange("reason")}
-                                    messageProps={{ color: "critical.main" }}
-                                    message={errors.reason}
-                                />
-                                <MultilineInput
-                                    label={t("delete_account_feedback_label")}
-                                    placeholder={t(
-                                        "delete_account_feedback_placeholder",
-                                    )}
-                                    value={values.feedback}
-                                    onChange={handleChange("feedback")}
-                                    message={errors.feedback}
-                                    messageProps={{ color: "critical.main" }}
-                                    rowCount={3}
-                                />
-                                <CheckboxInput
-                                    checked={acceptDataDeletion}
-                                    onChange={setAcceptDataDeletion}
-                                    label={t(
-                                        "delete_account_confirm_checkbox_label",
-                                    )}
-                                />
-                                <Stack spacing={"8px"}>
-                                    <LoadingButton
-                                        type="submit"
-                                        size="large"
-                                        color="critical"
-                                        disabled={!acceptDataDeletion}
-                                        loading={loading}
-                                    >
-                                        {t("delete_account_confirm")}
-                                    </LoadingButton>
-                                    <FocusVisibleButton
-                                        size="large"
-                                        color={"secondary"}
-                                        onClick={onClose}
-                                    >
-                                        {t("cancel")}
-                                    </FocusVisibleButton>
-                                </Stack>
+                {({
+                    values,
+                    errors,
+                    handleChange,
+                    handleSubmit,
+                }): JSX.Element => (
+                    <form noValidate onSubmit={handleSubmit}>
+                        <Stack spacing={"24px"}>
+                            <DropdownInput
+                                options={deleteReasonOptions()}
+                                label={t("delete_account_reason_label")}
+                                placeholder={t(
+                                    "delete_account_reason_placeholder",
+                                )}
+                                selected={values.reason}
+                                setSelected={handleChange("reason")}
+                                messageProps={{ color: "critical.main" }}
+                                message={errors.reason}
+                            />
+                            <MultilineInput
+                                label={t("delete_account_feedback_label")}
+                                placeholder={t(
+                                    "delete_account_feedback_placeholder",
+                                )}
+                                value={values.feedback}
+                                onChange={handleChange("feedback")}
+                                message={errors.feedback}
+                                messageProps={{ color: "critical.main" }}
+                                rowCount={3}
+                            />
+                            <CheckboxInput
+                                checked={acceptDataDeletion}
+                                onChange={setAcceptDataDeletion}
+                                label={t(
+                                    "delete_account_confirm_checkbox_label",
+                                )}
+                            />
+                            <Stack spacing={"8px"}>
+                                <LoadingButton
+                                    type="submit"
+                                    size="large"
+                                    color="critical"
+                                    disabled={!acceptDataDeletion}
+                                    loading={loading}
+                                >
+                                    {t("delete_account_confirm")}
+                                </LoadingButton>
+                                <FocusVisibleButton
+                                    size="large"
+                                    color={"secondary"}
+                                    onClick={onClose}
+                                >
+                                    {t("cancel")}
+                                </FocusVisibleButton>
                             </Stack>
-                        </form>
-                    )}
-                </Formik>
-            </TitledMiniDialog>
-        </>
+                        </Stack>
+                    </form>
+                )}
+            </Formik>
+        </TitledMiniDialog>
     );
 };
 
diff --git a/web/apps/photos/src/components/Sidebar/index.tsx b/web/apps/photos/src/components/Sidebar/index.tsx
index 118af9780c..db393b0056 100644
--- a/web/apps/photos/src/components/Sidebar/index.tsx
+++ b/web/apps/photos/src/components/Sidebar/index.tsx
@@ -612,43 +612,33 @@ const HelpSection: React.FC = () => {
 };
 
 const ExitSection: React.FC = () => {
-    const { setDialogMessage, logout } = useContext(AppContext);
+    const { showMiniDialog, logout } = useContext(AppContext);
 
-    const [deleteAccountModalView, setDeleteAccountModalView] = useState(false);
+    const { show: showDeleteAccount, props: deleteAccountVisibilityProps } =
+        useModalVisibility();
 
-    const closeDeleteAccountModal = () => setDeleteAccountModalView(false);
-    const openDeleteAccountModal = () => setDeleteAccountModalView(true);
-
-    const confirmLogout = () => {
-        setDialogMessage({
+    const handleLogout = () =>
+        showMiniDialog({
             title: t("logout_message"),
-            proceed: {
-                text: t("logout"),
-                action: logout,
-                variant: "critical",
-            },
-            close: { text: t("cancel") },
+            continue: { text: t("logout"), color: "critical", action: logout },
+            buttonDirection: "row"
         });
-    };
 
     return (
         <>
             <EnteMenuItem
-                onClick={confirmLogout}
+                onClick={handleLogout}
                 color="critical"
                 label={t("logout")}
                 variant="secondary"
             />
             <EnteMenuItem
-                onClick={openDeleteAccountModal}
+                onClick={showDeleteAccount}
                 color="critical"
                 variant="secondary"
                 label={t("delete_account")}
             />
-            <DeleteAccountModal
-                open={deleteAccountModalView}
-                onClose={closeDeleteAccountModal}
-            />
+            <DeleteAccountModal {...deleteAccountVisibilityProps} />
         </>
     );
 };