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/team-accounts/src/components/index.ts

@@ -3,3 +3,4 @@ export * from './members/invite-members-dialog-container';
 export * from './settings/team-account-danger-zone';
 export * from './invitations/account-invitations-table';
 export * from './settings/team-account-settings-container';
+export * from './invitations/accept-invitation-container';

packages/features/team-accounts/src/components/invitations/accept-invitation-container.tsx

@@ -0,0 +1,85 @@
+import Image from 'next/image';
+
+import { Heading } from '@kit/ui/heading';
+import { If } from '@kit/ui/if';
+import { Separator } from '@kit/ui/separator';
+import { Trans } from '@kit/ui/trans';
+
+import { acceptInvitationAction } from '../../server/actions/team-invitations-server-actions';
+import { InvitationSubmitButton } from './invitation-submit-button';
+import { SignOutInvitationButton } from './sign-out-invitation-button';
+
+export function AcceptInvitationContainer(props: {
+  inviteToken: string;
+
+  invitation: {
+    id: string;
+
+    account: {
+      name: string;
+      id: string;
+      picture_url: string | null;
+    };
+  };
+
+  paths: {
+    signOutNext: string;
+    accountHome: string;
+  };
+}) {
+  return (
+    <div className={'flex flex-col items-center space-y-8'}>
+      <Heading className={'text-center'} level={5}>
+        <Trans
+          i18nKey={'teams:acceptInvitationHeading'}
+          values={{
+            accountName: props.invitation.account.name,
+          }}
+        />
+      </Heading>
+
+      <If condition={props.invitation.account.picture_url}>
+        {(url) => (
+          <Image
+            alt={`Logo`}
+            src={url}
+            width={64}
+            height={64}
+            className={'object-cover'}
+          />
+        )}
+      </If>
+
+      <div className={'text-muted-foreground text-center text-sm'}>
+        <Trans
+          i18nKey={'teams:acceptInvitationDescription'}
+          values={{
+            accountName: props.invitation.account.name,
+          }}
+        />
+      </div>
+
+      <div className={'flex flex-col space-y-2.5'}>
+        <form className={'w-full'} action={acceptInvitationAction}>
+          <input type="hidden" name={'inviteToken'} value={props.inviteToken} />
+
+          <input
+            type={'hidden'}
+            name={'nextPath'}
+            value={props.paths.accountHome}
+          />
+
+          <InvitationSubmitButton accountName={props.invitation.account.name} />
+        </form>
+
+        <Separator />
+
+        <SignOutInvitationButton nextPath={props.paths.signOutNext} />
+
+        <span className={'text-muted-foreground text-center text-xs'}>
+          <Trans i18nKey={'teams:signInWithDifferentAccountDescription'} />
+        </span>
+      </div>
+    </div>
+  );
+}

packages/features/team-accounts/src/components/invitations/invitation-submit-button.tsx

@@ -0,0 +1,21 @@
+'use client';
+
+import { useFormStatus } from 'react-dom';
+
+import { Button } from '@kit/ui/button';
+import { Trans } from '@kit/ui/trans';
+
+export function InvitationSubmitButton(props: { accountName: string }) {
+  const { pending } = useFormStatus();
+
+  return (
+    <Button className={'w-full'} disabled={pending}>
+      <Trans
+        i18nKey={pending ? 'teams:joiningTeam' : 'teams:joinTeam'}
+        values={{
+          accountName: props.accountName,
+        }}
+      />
+    </Button>
+  );
+}

packages/features/team-accounts/src/components/invitations/sign-out-invitation-button.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import { useSignOut } from '@kit/supabase/hooks/use-sign-out';
+import { Button } from '@kit/ui/button';
+import { Trans } from '@kit/ui/trans';
+
+export function SignOutInvitationButton(
+  props: React.PropsWithChildren<{
+    nextPath: string;
+  }>,
+) {
+  const signOut = useSignOut();
+
+  return (
+    <Button
+      variant={'ghost'}
+      onClick={async () => {
+        await signOut.mutateAsync();
+        window.location.assign(props.nextPath);
+      }}
+    >
+      <Trans i18nKey={'teams:signInWithDifferentAccount'} />
+    </Button>
+  );
+}

packages/features/team-accounts/src/components/members/role-badge.tsx

@@ -9,8 +9,9 @@ type Role = Database['public']['Enums']['account_role'];
 const roleClassNameBuilder = cva('font-medium capitalize', {
   variants: {
     role: {
-      owner: 'bg-primary',
-      member: 'bg-blue-50 text-blue-500 dark:bg-blue-500/10',
+      owner: '',
+      member:
+        'bg-blue-50 hover:bg-blue-50 text-blue-500 dark:bg-blue-500/10 dark:hover:bg-blue-500/10',
     },
   },
 });

packages/features/team-accounts/src/components/members/transfer-ownership-dialog.tsx

@@ -6,14 +6,16 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
 
 import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
-import { Button } from '@kit/ui/button';
 import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from '@kit/ui/dialog';
+  AlertDialog,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@kit/ui/alert-dialog';
+import { Button } from '@kit/ui/button';
 import {
   Form,
   FormControl,
@@ -38,17 +40,17 @@ export const TransferOwnershipDialog: React.FC<{
   targetDisplayName: string;
 }> = ({ isOpen, setIsOpen, targetDisplayName, accountId, userId }) => {
   return (
-    <Dialog open={isOpen} onOpenChange={setIsOpen}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>
+    <AlertDialog open={isOpen} onOpenChange={setIsOpen}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>
             <Trans i18nKey="team:transferOwnership" />
-          </DialogTitle>
+          </AlertDialogTitle>
 
-          <DialogDescription>
+          <AlertDialogDescription>
             <Trans i18nKey="team:transferOwnershipDescription" />
-          </DialogDescription>
-        </DialogHeader>
+          </AlertDialogDescription>
+        </AlertDialogHeader>
 
         <TransferOrganizationOwnershipForm
           accountId={accountId}
@@ -56,8 +58,8 @@ export const TransferOwnershipDialog: React.FC<{
           targetDisplayName={targetDisplayName}
           setIsOpen={setIsOpen}
         />
-      </DialogContent>
-    </Dialog>
+      </AlertDialogContent>
+    </AlertDialog>
   );
 };
 
@@ -100,7 +102,7 @@ function TransferOrganizationOwnershipForm({
   return (
     <Form {...form}>
       <form
-        className={'flex flex-col space-y-2 text-sm'}
+        className={'flex flex-col space-y-4 text-sm'}
         onSubmit={form.handleSubmit(onSubmit)}
       >
         <If condition={error}>
@@ -117,10 +119,6 @@ function TransferOrganizationOwnershipForm({
           />
         </p>
 
-        <p>
-          <Trans i18nKey={'common:modalConfirmationQuestion'} />
-        </p>
-
         <FormField
           name={'confirmation'}
           render={({ field }) => {
@@ -144,19 +142,31 @@ function TransferOrganizationOwnershipForm({
           }}
         />
 
-        <Button
-          type={'submit'}
-          data-test={'confirm-transfer-ownership-button'}
-          variant={'destructive'}
-          disabled={pending}
-        >
-          <If
-            condition={pending}
-            fallback={<Trans i18nKey={'teams:transferOwnership'} />}
+        <div>
+          <p className={'text-muted-foreground'}>
+            <Trans i18nKey={'common:modalConfirmationQuestion'} />
+          </p>
+        </div>
+
+        <AlertDialogFooter>
+          <AlertDialogCancel>
+            <Trans i18nKey={'common:cancel'} />
+          </AlertDialogCancel>
+
+          <Button
+            type={'submit'}
+            data-test={'confirm-transfer-ownership-button'}
+            variant={'destructive'}
+            disabled={pending}
           >
-            <Trans i18nKey={'teams:transferringOwnership'} />
-          </If>
-        </Button>
+            <If
+              condition={pending}
+              fallback={<Trans i18nKey={'teams:transferOwnership'} />}
+            >
+              <Trans i18nKey={'teams:transferringOwnership'} />
+            </If>
+          </Button>
+        </AlertDialogFooter>
       </form>
     </Form>
   );

packages/features/team-accounts/src/components/members/update-member-role-dialog.tsx

@@ -124,7 +124,7 @@ function UpdateMemberForm({
           render={({ field }) => {
             return (
               <FormItem>
-                <FormLabel>{t('memberRole')}</FormLabel>
+                <FormLabel>{t('roleLabel')}</FormLabel>
 
                 <FormControl>
                   <MembershipRoleSelector