style: deactivate acount modal (#2940)

web/components/account/deactivate-account-modal.tsx

@@ -1,9 +1,7 @@
 import React, { useState } from "react";
 import { useRouter } from "next/router";
-import { mutate } from "swr";
-import { useTheme } from "next-themes";
 import { Dialog, Transition } from "@headlessui/react";
-import { AlertTriangle } from "lucide-react";
+import { Trash2 } from "lucide-react";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 // ui
@@ -20,45 +18,21 @@ export const DeactivateAccountModal: React.FC<Props> = (props) => {
   const { isOpen, onClose } = props;
 
   // states
-  const [switchingAccount, setSwitchingAccount] = useState(false);
   const [isDeactivating, setIsDeactivating] = useState(false);
 
   const {
-    user: { deactivateAccount, signOut },
+    user: { deactivateAccount },
   } = useMobxStore();
 
   const router = useRouter();
 
-  const { setTheme } = useTheme();
-
   const { setToastAlert } = useToast();
 
   const handleClose = () => {
-    setSwitchingAccount(false);
     setIsDeactivating(false);
     onClose();
   };
 
-  const handleSwitchAccount = async () => {
-    setSwitchingAccount(true);
-
-    await signOut()
-      .then(() => {
-        mutate("CURRENT_USER_DETAILS", null);
-        setTheme("system");
-        router.push("/");
-        handleClose();
-      })
-      .catch(() =>
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: "Failed to sign out. Please try again.",
-        })
-      )
-      .finally(() => setSwitchingAccount(false));
-  };
-
   const handleDeleteAccount = async () => {
     setIsDeactivating(true);
 
@@ -67,7 +41,7 @@ export const DeactivateAccountModal: React.FC<Props> = (props) => {
         setToastAlert({
           type: "success",
           title: "Success!",
-          message: "Account deleted successfully.",
+          message: "Account deactivated successfully.",
         });
         handleClose();
         router.push("/");
@@ -108,32 +82,31 @@ export const DeactivateAccountModal: React.FC<Props> = (props) => {
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-onboarding-background-200 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-[40rem]">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-[40rem]">
                 <div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                   <div className="">
-                    <div className="flex items-center gap-x-4">
+                    <div className="flex items-start gap-x-4">
                       <div className="grid place-items-center rounded-full bg-red-500/20 p-4">
-                        <AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
+                        <Trash2 className="h-6 w-6 text-red-600" aria-hidden="true" />
+                      </div>
+                      <div>
+                        <Dialog.Title as="h3" className="text-2xl my-4 font-medium leading-6 text-custom-text-100">
+                          Deactivate your account?
+                        </Dialog.Title>
+                        <p className="pr-4 mt-6 text-custom-text-200 list-disc font-normal text-base">
+                          Once deactivated, you can{"'"}t be assigned issues and be billed for your workspace.To
+                          reactivate your account, you will need an invite to a workspace at this email address.
+                        </p>
                       </div>
-                      <Dialog.Title as="h3" className="text-2xl font-medium leading-6 text-onboarding-text-100">
-                        Deactivate account?
-                      </Dialog.Title>
-                    </div>
-
-                    <div className="mt-6 px-4">
-                      <ul className="text-onboarding-text-300 list-disc font-normal text-base">
-                        <li>Deactivate this account if you have another and won{"'"}t use this account.</li>
-                        <li>Switch to another account if you{"'"}d like to come back to this account another time.</li>
-                      </ul>
                     </div>
                   </div>
                 </div>
                 <div className="flex items-center justify-end gap-2 p-4 mb-2 sm:px-6">
-                  <Button variant="link-primary" onClick={handleSwitchAccount} loading={switchingAccount}>
+                  <Button variant="neutral-primary" onClick={onClose}>
-                    {switchingAccount ? "Switching..." : "Switch account"}
+                    Cancel
                   </Button>
-                  <Button variant="outline-danger" onClick={handleDeleteAccount}>
+                  <Button variant="danger" onClick={handleDeleteAccount}>
-                    {isDeactivating ? "Deactivating..." : "Deactivate account"}
+                    {isDeactivating ? "Deactivating..." : "Confirm"}
                   </Button>
                 </div>
               </Dialog.Panel>