Update allowed users mode selector to 2x2 grid layout

- Change from horizontal layout to 2x2 grid for better visual organization
- Update button labels and order to match design: Only Me, Invite Only, Public Relay, Subscription
- Increase button height to 80px to properly accommodate two-line text
- Add proper flexbox layout to prevent text overlapping
- Improve typography with larger main labels and smaller subtitle text
- Maintain existing colors and functionality while improving layout

Layout: Top row (Only Me, Invite Only), Bottom row (Public Relay, Subscription)

Author: Maphikza

src/components/allowed-users/components/ModeSelector/ModeSelector.styles.ts

@@ -8,12 +8,14 @@ export const Container = styled.div`
 
 export const ModeGrid = styled.div`
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(2, 1fr);
   gap: 1rem;
   margin-bottom: 1.5rem;
 
   ${media.md} {
     grid-template-columns: 1fr;
+    grid-template-rows: none;
     gap: 0.75rem;
   }
 `;
@@ -24,10 +26,14 @@ interface ModeButtonProps {
 }
 
 export const ModeButton = styled(Button)<ModeButtonProps>`
-  height: 60px;
+  height: 80px;
   border-radius: 8px;
   font-weight: 600;
   transition: all 0.3s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 16px;
 
   ${({ $isActive, $color }) => $isActive && `
     background-color: ${$color} !important;
@@ -41,7 +47,7 @@ export const ModeButton = styled(Button)<ModeButtonProps>`
   }
 
   ${media.md} {
-    height: 50px;
+    height: 70px;
   }
 `;
 

src/components/allowed-users/components/ModeSelector/ModeSelector.tsx

@@ -10,25 +10,29 @@ interface ModeSelectorProps {
 }
 
 const MODE_INFO = {
+  personal: {
+    label: 'Only Me',
+    subtitle: '[Free]',
+    description: 'Personal relay for single user with unlimited access',
+    color: '#fa541c'
+  },
+  exclusive: {
+    label: 'Invite Only',
+    subtitle: '[Free]',
+    description: 'Invite-only access with manual NPUB management',
+    color: '#722ed1'
+  },
   free: {
-    label: 'Free - Public Relay',
+    label: 'Public Relay',
+    subtitle: '[Free]',
     description: 'Open access with optional free tiers',
     color: '#1890ff'
   },
   paid: {
-    label: 'Paid - Subscription Tiers', 
+    label: 'Subscription',
+    subtitle: '[Paid]',
     description: 'Subscription-based access control',
     color: '#52c41a'
-  },
-  exclusive: {
-    label: 'Free - Invite Only',
-    description: 'Invite-only access with manual NPUB management',
-    color: '#722ed1'
-  },
-  personal: {
-    label: 'Free - Only Me',
-    description: 'Personal relay for single user with unlimited access',
-    color: '#fa541c'
   }
 };
 
@@ -40,7 +44,7 @@ export const ModeSelector: React.FC<ModeSelectorProps> = ({
   return (
     <S.Container>
       <S.ModeGrid>
-        {(Object.keys(MODE_INFO) as AllowedUsersMode[]).map((mode) => {
+        {(['personal', 'exclusive', 'free', 'paid'] as AllowedUsersMode[]).map((mode) => {
           const info = MODE_INFO[mode];
           const isActive = currentMode === mode;
 
@@ -54,7 +58,16 @@ export const ModeSelector: React.FC<ModeSelectorProps> = ({
                 $isActive={isActive}
                 $color={info.color}
               >
-                {info.label}
+                <div style={{ 
+                  display: 'flex', 
+                  flexDirection: 'column', 
+                  alignItems: 'center',
+                  gap: '2px',
+                  lineHeight: '1.2'
+                }}>
+                  <div style={{ fontSize: '16px', fontWeight: '600' }}>{info.label}</div>
+                  <div style={{ fontSize: '12px', opacity: 0.8, fontWeight: '400' }}>{info.subtitle}</div>
+                </div>
               </S.ModeButton>
             </Tooltip>
           );