style: switch or delete account workflow

web/components/onboarding/switch-delete-account-modal.tsx

@@ -5,7 +5,7 @@ import { mutate } from "swr";
 import { Trash2 } from "lucide-react";
 import { Dialog, Transition } from "@headlessui/react";
 // hooks
-import { TOAST_TYPE, setToast } from "@plane/ui";
+import { Button, TOAST_TYPE, setToast } from "@plane/ui";
 import { useUser } from "@/hooks/store";
 // ui
 
@@ -24,7 +24,7 @@ export const SwitchOrDeleteAccountModal: React.FC<Props> = (props) => {
   // store hooks
   const { signOut, deactivateAccount } = useUser();
 
-  const { resolvedTheme, setTheme } = useTheme();
+  const { setTheme } = useTheme();
 
   const handleClose = () => {
     setSwitchingAccount(false);
@@ -102,17 +102,11 @@ export const SwitchOrDeleteAccountModal: 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 pb-4 pt-5 sm:p-6 sm:pb-4">
                   <div>
                     <div className="flex items-center gap-x-4">
-                      <div
-                        className={`grid place-items-center rounded-full ${
-                          resolvedTheme === "dark" ? "bg-[#2F3135]" : "bg-red-500/20"
-                        } p-4`}
-                      >
+                      <div className="grid place-items-center rounded-full bg-red-500/20 p-4">
                         <Trash2 className="h-6 w-6 text-red-600" aria-hidden="true" />
                       </div>
                       <Dialog.Title as="h3" className="text-2xl font-medium leading-6 text-onboarding-text-100">
@@ -129,22 +123,12 @@ export const SwitchOrDeleteAccountModal: React.FC<Props> = (props) => {
                   </div>
                 </div>
                 <div className="mb-2 flex items-center justify-end gap-3 p-4 sm:px-6">
-                  <button
-                    onClick={handleSwitchAccount}
-                    disabled={switchingAccount}
-                    className={`${resolvedTheme === "dark" ? "bg-[#2F3135]" : ""} rounded-sm px-4 py-1.5 text-sm`}
-                  >
+                  <Button variant="neutral-primary" onClick={handleSwitchAccount} disabled={switchingAccount}>
                     {switchingAccount ? "Switching..." : "Switch account"}
-                  </button>
-                  <button
-                    disabled={isDeactivating}
-                    onClick={handleDeactivateAccount}
-                    className={`${
-                      resolvedTheme === "dark" ? "bg-[#2F3135]" : ""
-                    } rounded-sm border border-red-500 px-4 py-1.5 text-sm text-red-500`}
-                  >
+                  </Button>
+                  <Button variant="outline-danger" onClick={handleDeactivateAccount} loading={isDeactivating}>
                     {isDeactivating ? "Deleting..." : "Delete account"}
-                  </button>
+                  </Button>
                 </div>
               </Dialog.Panel>
             </Transition.Child>

web/components/onboarding/switch-or-delete-account-dropdown.tsx

@@ -4,6 +4,8 @@ import { ChevronDown } from "lucide-react";
 import { Menu, Transition } from "@headlessui/react";
 // ui
 import { Avatar } from "@plane/ui";
+// helpers
+import { cn } from "@/helpers/common.helper";
 // hooks
 import { useUser } from "@/hooks/store";
 // components
@@ -20,19 +22,19 @@ export const SwitchOrDeleteAccountDropdown: FC<TSwithOrDeleteAccountDropdownProp
   // store hooks
   const { data: user } = useUser();
 
+  const displayName = user?.first_name
+    ? `${user?.first_name} ${user?.last_name ?? ""}`
+    : fullName && fullName.trim().length > 0
+      ? fullName
+      : user?.email;
+
   return (
     <div className="flex w-full shrink-0 justify-end">
       <SwitchOrDeleteAccountModal isOpen={showDeleteAccountModal} onClose={() => setShowDeleteAccountModal(false)} />
       <div className="flex items-center gap-x-2 pr-4 z-10">
         {user?.avatar && (
           <Avatar
-            name={
-              user?.first_name
-                ? `${user?.first_name} ${user?.last_name ?? ""}`
-                : fullName && fullName.trim().length > 0
-                  ? fullName
-                  : user?.email
-            }
+            name={displayName}
             src={user?.avatar}
             size={24}
             shape="square"
@@ -40,43 +42,35 @@ export const SwitchOrDeleteAccountDropdown: FC<TSwithOrDeleteAccountDropdownProp
             className="!text-base capitalize"
           />
         )}
-        <div>
-          <Menu>
-            <Menu.Button className={"flex items-center gap-x-1 z-10"}>
-              <span className="text-sm font-medium">
-                <p className="text-sm font-medium text-custom-text-200">
-                  {user?.first_name
-                    ? `${user?.first_name} ${user?.last_name ?? ""}`
-                    : fullName && fullName.trim().length > 0
-                      ? fullName
-                      : user?.email}
-                </p>
-              </span>
-              <ChevronDown className="h-4 w-4 text-custom-text-300" />
-            </Menu.Button>
-            <Transition
-              enter="transition duration-100 ease-out"
-              enterFrom="transform scale-95 opacity-0"
-              enterTo="transform scale-100 opacity-100"
-              leave="transition duration-75 ease-out"
-              leaveFrom="transform scale-100 opacity-100"
-              leaveTo="transform scale-95 opacity-0"
-            >
-              <Menu.Items className={"absolute min-w-fit"}>
-                <Menu.Item as="div">
-                  <div
-                    className="mr-auto mt-2 rounded-md border border-red-400 bg-onboarding-background-200 p-3 text-base font-normal text-red-400 shadow-sm hover:cursor-pointer"
-                    onClick={() => {
-                      setShowDeleteAccountModal(true);
-                    }}
-                  >
-                    Wrong e-mail address?
-                  </div>
-                </Menu.Item>
-              </Menu.Items>
-            </Transition>
-          </Menu>
-        </div>
+        <Menu as="div" className="relative">
+          <Menu.Button className="flex items-center gap-x-1 z-10">
+            <span className="text-sm font-medium text-custom-text-200">{displayName}</span>
+            <ChevronDown className="h-4 w-4 text-custom-text-300" />
+          </Menu.Button>
+          <Transition
+            enter="transition duration-100 ease-out"
+            enterFrom="transform scale-95 opacity-0"
+            enterTo="transform scale-100 opacity-100"
+            leave="transition duration-75 ease-out"
+            leaveFrom="transform scale-100 opacity-100"
+            leaveTo="transform scale-95 opacity-0"
+          >
+            <Menu.Items className="absolute z-10 right-0 rounded-md border-[0.5px] border-custom-border-300 mt-2 bg-custom-background-100 px-2 py-2.5 text-sm min-w-[12rem] shadow-custom-shadow-rg">
+              <Menu.Item
+                as="button"
+                type="button"
+                className={({ active }) =>
+                  cn("text-red-500 px-1 py-1.5 whitespace-nowrap text-left rounded w-full", {
+                    "bg-custom-background-80": active,
+                  })
+                }
+                onClick={() => setShowDeleteAccountModal(true)}
+              >
+                Wrong e-mail address?
+              </Menu.Item>
+            </Menu.Items>
+          </Transition>
+        </Menu>
       </div>
     </div>
   );