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.

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>