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/ui/package.json

@@ -119,7 +119,8 @@
     "./auth-change-listener": "./src/makerkit/auth-change-listener.tsx",
     "./loading-overlay": "./src/makerkit/loading-overlay.tsx",
     "./profile-avatar": "./src/makerkit/profile-avatar.tsx",
-    "./mdx": "./src/makerkit/mdx/mdx-renderer.tsx"
+    "./mdx": "./src/makerkit/mdx/mdx-renderer.tsx",
+    "./mode-toggle": "./src/makerkit/mode-toggle.tsx"
   },
   "typesVersions": {
     "*": {

packages/ui/src/makerkit/mode-toggle.tsx

@@ -0,0 +1,99 @@
+'use client';
+
+import { useMemo } from 'react';
+
+import { Check, Moon, Sun } from 'lucide-react';
+import { useTheme } from 'next-themes';
+
+import { Button } from '../shadcn/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from '../shadcn/dropdown-menu';
+import { If } from './if';
+import { Trans } from './trans';
+
+const MODES = ['light', 'dark', 'system'];
+
+export function ModeToggle() {
+  const { setTheme } = useTheme();
+
+  const Items = useMemo(() => {
+    return MODES.map((mode) => {
+      return (
+        <DropdownMenuItem
+          key={mode}
+          onClick={() => {
+            setTheme(mode);
+          }}
+        >
+          <Trans i18nKey={`common:${mode}Theme`} />
+        </DropdownMenuItem>
+      );
+    });
+  }, [setTheme]);
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="icon">
+          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">{Items}</DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+export function SubMenuModeToggle() {
+  const { setTheme, theme, resolvedTheme } = useTheme();
+
+  const MenuItems = useMemo(
+    () =>
+      ['light', 'dark', 'system'].map((item) => {
+        return (
+          <DropdownMenuItem
+            className={'justify-between'}
+            key={item}
+            onClick={() => {
+              setTheme(item);
+            }}
+          >
+            <Trans i18nKey={`common:${item}Theme`} />
+
+            <If condition={theme === item}>
+              <Check className={'mr-2 h-4'} />
+            </If>
+          </DropdownMenuItem>
+        );
+      }),
+    [setTheme, theme],
+  );
+
+  return (
+    <DropdownMenuSub>
+      <DropdownMenuSubTrigger>
+        <span className={'flex w-full items-center space-x-2'}>
+          {resolvedTheme === 'light' ? (
+            <Sun className={'h-5'} />
+          ) : (
+            <Moon className={'h-5'} />
+          )}
+
+          <span>
+            <Trans i18nKey={'common:theme'} />
+          </span>
+        </span>
+      </DropdownMenuSubTrigger>
+
+      <DropdownMenuSubContent>{MenuItems}</DropdownMenuSubContent>
+    </DropdownMenuSub>
+  );
+}

packages/ui/src/shadcn/separator.tsx

@@ -4,7 +4,7 @@ import * as React from 'react';
 
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 
-import { cn } from '@kit/ui/utils';
+import { cn } from '../utils';
 
 const Separator = React.forwardRef<
   React.ElementRef<typeof SeparatorPrimitive.Root>,