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/auth/src/components/sign-in-methods-container.tsx

@@ -5,8 +5,8 @@ import { useRouter, useSearchParams } from 'next/navigation';
 import type { Provider } from '@supabase/supabase-js';
 
 import { isBrowser } from '@kit/shared/utils';
-import { Divider } from '@kit/ui/divider';
 import { If } from '@kit/ui/if';
+import { Separator } from '@kit/ui/separator';
 
 import { MagicLinkAuthContainer } from './magic-link-auth-container';
 import { OauthProviders } from './oauth-providers';
@@ -46,7 +46,7 @@ export function SignInMethodsContainer(props: {
       </If>
 
       <If condition={props.providers.oAuth.length}>
-        <Divider />
+        <Separator />
 
         <OauthProviders
           enabledProviders={props.providers.oAuth}

packages/features/auth/src/components/sign-up-methods-container.tsx

@@ -3,8 +3,8 @@
 import type { Provider } from '@supabase/supabase-js';
 
 import { isBrowser } from '@kit/shared/utils';
-import { Divider } from '@kit/ui/divider';
 import { If } from '@kit/ui/if';
+import { Separator } from '@kit/ui/separator';
 
 import { MagicLinkAuthContainer } from './magic-link-auth-container';
 import { OauthProviders } from './oauth-providers';
@@ -24,9 +24,7 @@ export function SignUpMethodsContainer(props: {
 
   inviteToken?: string;
 }) {
-  const redirectUrl = isBrowser()
-    ? new URL(props.paths.callback, window?.location.origin).toString()
-    : '';
+  const redirectUrl = getCallbackUrl(props);
 
   return (
     <>
@@ -42,7 +40,7 @@ export function SignUpMethodsContainer(props: {
       </If>
 
       <If condition={props.providers.oAuth.length}>
-        <Divider />
+        <Separator />
 
         <OauthProviders
           enabledProviders={props.providers.oAuth}
@@ -56,3 +54,26 @@ export function SignUpMethodsContainer(props: {
     </>
   );
 }
+
+function getCallbackUrl(props: {
+  paths: {
+    callback: string;
+    appHome: string;
+  };
+
+  inviteToken?: string;
+}) {
+  if (!isBrowser()) {
+    return '';
+  }
+
+  const redirectPath = props.paths.callback;
+  const origin = window.location.origin;
+  const url = new URL(redirectPath, origin);
+
+  if (props.inviteToken) {
+    url.searchParams.set('invite_token', props.inviteToken);
+  }
+
+  return url.href;
+}