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/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