From 3b5653ad36ed50ed6b96c93c09e80d25b79f84aa Mon Sep 17 00:00:00 2001
From: Claude Code Assistant <claude@anthropic.com>
Date: Thu, 24 Jul 2025 10:38:43 +0100
Subject: [PATCH] Improve invitation page header hierarchy
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Move personalized invitation heading above group avatar and Private Group tag
- Creates better visual flow: purpose first, then supporting visual context
- Added mb: 3 spacing between heading and group info

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/pages/InvitationPage.tsx | 36 ++++++++++++++++++------------------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/pages/InvitationPage.tsx b/src/pages/InvitationPage.tsx
index 534f540..58a2a5a 100644
--- a/src/pages/InvitationPage.tsx
+++ b/src/pages/InvitationPage.tsx
@@ -225,6 +225,24 @@ const InvitationPage = () => {
 
       {/* Header */}
       <Box sx={{ textAlign: 'center', mb: 4 }}>
+        {isGroupInvite && (
+          <Typography variant="h3" component="h1" gutterBottom sx={{ mb: 3 }}>
+            {personalizedInvite.inviteeName
+              ? `Invite ${personalizedInvite.inviteeName} to ${group?.name}`
+              : `Invite to ${group?.name}`
+            }
+          </Typography>
+        )}
+        
+        {!isGroupInvite && (
+          <Typography variant="h3" component="h1" gutterBottom>
+            {personalizedInvite.inviteeName 
+              ? `Invite ${personalizedInvite.inviteeName} to Your Network`
+              : 'Invite to Your Network'
+            }
+          </Typography>
+        )}
+        
         {isGroupInvite && group && (
           <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 2, mb: 2 }}>
             <Avatar
@@ -249,24 +267,6 @@ const InvitationPage = () => {
           </Box>
         )}
         
-        {!isGroupInvite && (
-          <Typography variant="h3" component="h1" gutterBottom>
-            {personalizedInvite.inviteeName 
-              ? `Invite ${personalizedInvite.inviteeName} to Your Network`
-              : 'Invite to Your Network'
-            }
-          </Typography>
-        )}
-        
-        {isGroupInvite && (
-          <Typography variant="h3" component="h1" gutterBottom>
-            {personalizedInvite.inviteeName
-              ? `Invite ${personalizedInvite.inviteeName} to ${group?.name}`
-              : `Invite to ${group?.name}`
-            }
-          </Typography>
-        )}
-        
       </Box>
 
       <Grid container spacing={4}>