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.
2024-03-28 20:29:54 +08:00
parent caca7c12f6
commit f6d1b500da
30 changed files with 1318 additions and 810 deletions
--- a/packages/features/team-accounts/src/components/invitations/accept-invitation-container.tsx
+++ b/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>
+  );
+}