Update theme toggle functionality and UI components

Implemented a new ModeToggle feature for theme switching in personal account dropdown. The changes also made adjustments to several UI components, such as transforming Dialog to AlertDialog in transfer-ownership-dialog, and introducing invitation-submit-button in team-accounts. Some minor amendments include text changes and styling modifications.

packages/features/accounts/src/components/personal-account-dropdown.tsx

@@ -22,6 +22,7 @@ import {
   DropdownMenuTrigger,
 } from '@kit/ui/dropdown-menu';
 import { If } from '@kit/ui/if';
+import { SubMenuModeToggle } from '@kit/ui/mode-toggle';
 import { ProfileAvatar } from '@kit/ui/profile-avatar';
 import { Trans } from '@kit/ui/trans';
 import { cn } from '@kit/ui/utils';
@@ -34,6 +35,7 @@ export function PersonalAccountDropdown({
   signOutRequested,
   showProfileName,
   paths,
+  features,
 }: {
   className?: string;
   session: Session | null;
@@ -42,6 +44,9 @@ export function PersonalAccountDropdown({
   paths: {
     home: string;
   };
+  features: {
+    enableThemeToggle: boolean;
+  };
 }) {
   const { data: personalAccountData } = usePersonalAccountData();
   const authUser = session?.user;
@@ -156,6 +161,12 @@ export function PersonalAccountDropdown({
 
         <DropdownMenuSeparator />
 
+        <If condition={features.enableThemeToggle}>
+          <SubMenuModeToggle />
+        </If>
+
+        <DropdownMenuSeparator />
+
         <DropdownMenuItem
           role={'button'}
           className={'cursor-pointer'}