Update invitation acceptance UI for clarity

Updated the invitation acceptance interface components. The 'Join Team' button text has been changed to reflect the user's email. This provides the user more clarity about which account they are accepting the invitation for. Other minor adjustments were made to the layout and heading level for consistency and improved readability.

apps/web/app/join/page.tsx

@@ -94,8 +94,11 @@ async function JoinTeamAccountPage({ searchParams }: Context) {
     invitation.account.slug,
   );
 
+  const email = auth.data.email ?? '';
+
   return (
     <AcceptInvitationContainer
+      email={email}
       inviteToken={token}
       invitation={invitation}
       paths={{

apps/web/public/locales/en/teams.json

@@ -152,7 +152,7 @@
   "signInWithDifferentAccountDescription": "If you wish to accept the invitation with a different account, please sign out and back in with the account you wish to use.",
   "acceptInvitationHeading": "Accept Invitation to join {{accountName}}",
   "acceptInvitationDescription": "You have been invited to join the team {{accountName}}. If you wish to accept the invitation, please click the button below.",
-  "joinTeam": "Join {{accountName}}",
+  "continueAs": "Continue as {{email}}",
   "joinTeamAccount": "Join Team",
   "joiningTeam": "Joining team...",
   "leaveTeamInputLabel": "Please type LEAVE to confirm leaving the team.",

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

@@ -11,6 +11,7 @@ import { SignOutInvitationButton } from './sign-out-invitation-button';
 
 export function AcceptInvitationContainer(props: {
   inviteToken: string;
+  email: string;
 
   invitation: {
     id: string;
@@ -29,7 +30,7 @@ export function AcceptInvitationContainer(props: {
 }) {
   return (
     <div className={'flex flex-col items-center space-y-4'}>
-      <Heading className={'text-center'} level={5}>
+      <Heading className={'text-center'} level={4}>
         <Trans
           i18nKey={'teams:acceptInvitationHeading'}
           values={{
@@ -59,7 +60,7 @@ export function AcceptInvitationContainer(props: {
         />
       </div>
 
-      <div className={'flex flex-col space-y-2.5'}>
+      <div className={'flex flex-col space-y-4'}>
         <form
           data-test={'join-team-form'}
           className={'w-full'}
@@ -73,7 +74,10 @@ export function AcceptInvitationContainer(props: {
             value={props.paths.accountHome}
           />
 
-          <InvitationSubmitButton accountName={props.invitation.account.name} />
+          <InvitationSubmitButton
+            email={props.email}
+            accountName={props.invitation.account.name}
+          />
         </form>
 
         <Separator />

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

@@ -5,15 +5,19 @@ import { useFormStatus } from 'react-dom';
 import { Button } from '@kit/ui/button';
 import { Trans } from '@kit/ui/trans';
 
-export function InvitationSubmitButton(props: { accountName: string }) {
+export function InvitationSubmitButton(props: {
+  accountName: string;
+  email: string;
+}) {
   const { pending } = useFormStatus();
 
   return (
     <Button type={'submit'} className={'w-full'} disabled={pending}>
       <Trans
-        i18nKey={pending ? 'teams:joiningTeam' : 'teams:joinTeam'}
+        i18nKey={pending ? 'teams:joiningTeam' : 'teams:continueAs'}
         values={{
           accountName: props.accountName,
+          email: props.email,
         }}
       />
     </Button>