chore(demo): tweak ui

Author: fadi-george

examples/build.md

@@ -353,20 +353,21 @@ Always remove listeners on cleanup (useEffect return function):
 
 ### Section Order (top to bottom)
 
-1. **App Section** (App ID, Guidance Banner, Consent Toggle, Logged-in-as display, Login/Logout)
-2. **Push Section** (Push ID, Enabled Toggle, Auto-prompts permission on load)
-3. **Send Push Notification Section** (Simple, With Image, Custom buttons)
-4. **In-App Messaging Section** (Pause toggle)
-5. **Send In-App Message Section** (Top Banner, Bottom Banner, Center Modal, Full Screen - with icons)
-6. **Aliases Section** (Add/Add Multiple, read-only list)
-7. **Emails Section** (Collapsible list >5 items)
-8. **SMS Section** (Collapsible list >5 items)
-9. **Tags Section** (Add/Add Multiple/Remove Selected)
-10. **Outcome Events Section** (Send Outcome dialog with type selection)
-11. **Triggers Section** (Add/Add Multiple/Remove Selected/Clear All - IN MEMORY ONLY)
-12. **Track Event Section** (Track Event with JSON validation)
-13. **Location Section** (Location Shared toggle, Prompt Location button)
-14. **Next Page Button**
+1. **App Section** (App ID, Guidance Banner, Consent Toggle)
+2. **User Section** (Status display, Login/Logout)
+3. **Push Section** (Push ID, Enabled Toggle, Auto-prompts permission on load)
+4. **Send Push Notification Section** (Simple, With Image, Custom buttons)
+5. **In-App Messaging Section** (Pause toggle)
+6. **Send In-App Message Section** (Top Banner, Bottom Banner, Center Modal, Full Screen - with icons)
+7. **Aliases Section** (Add/Add Multiple, read-only list)
+8. **Emails Section** (Collapsible list >5 items)
+9. **SMS Section** (Collapsible list >5 items)
+10. **Tags Section** (Add/Add Multiple/Remove Selected)
+11. **Outcome Events Section** (Send Outcome dialog with type selection)
+12. **Triggers Section** (Add/Add Multiple/Remove Selected/Clear All - IN MEMORY ONLY)
+13. **Track Event Section** (Track Event with JSON validation)
+14. **Location Section** (Location Shared toggle, Prompt Location button)
+15. **Next Page Button**
 
 ### Prompt 2.1 - App Section
 
@@ -391,7 +392,11 @@ App Section layout:
    - Separated from the above toggle by a horizontal divider
    - NOT a blocking overlay - user can interact with app regardless of state
 
-4. User status card (always visible, ABOVE the login/logout buttons):
+### Prompt 2.1b - User Section
+
+User Section layout (separate section from App, placed directly below it):
+
+1. User status card (always visible, ABOVE the login/logout buttons):
    - Card with two rows separated by a divider
    - Row 1: "Status" label on the left, value on the right
    - Row 2: "External ID" label on the left, value on the right
@@ -402,12 +407,12 @@ App Section layout:
      - Status shows "Logged In" with success styling
      - External ID shows the actual external user ID
 
-5. LOGIN USER button:
+2. LOGIN USER button:
    - Shows "LOGIN USER" when no user is logged in
    - Shows "SWITCH USER" when a user is logged in
-   - Opens modal with empty "External User Id" field
+   - Opens "Login User" modal with empty `External User Id` field
 
-6. LOGOUT USER button (only visible when a user is logged in)
+3. LOGOUT USER button (only visible when a user is logged in)
 
 ### Prompt 2.2 - Push Section
 
@@ -473,8 +478,8 @@ Tooltip should explain each IAM type.
 Aliases Section (placed after Send In-App Message):
 
 - Section title: "Aliases" with info icon for tooltip
-- List showing key-value pairs (read-only, no delete icons)
-- Each item shows: Label | ID
+- Stacked key-value list (read-only, no delete icons)
+- Each item shows Label on top, ID below (see styles.md "Stacked" list layout)
 - Filter out "external_id" and "onesignal_id" from display (these are special)
 - "No Aliases Added" text when empty
 - ADD button -> PairInputModal with empty Label and ID fields on the same row (single add)
@@ -1059,7 +1064,8 @@ examples/demo/
 │       │   ├── CustomNotificationModal.tsx
 │       │   └── TooltipModal.tsx
 │       └── sections/
-│           ├── AppSection.tsx               # App ID, consent, login/logout
+│           ├── AppSection.tsx               # App ID, guidance banner, consent
+│           ├── UserSection.tsx              # User status, login/logout
 │           ├── PushSection.tsx              # Push subscription controls
 │           ├── SendPushSection.tsx          # Send notification buttons
 │           ├── InAppSection.tsx             # IAM pause toggle

examples/demo/App.tsx

@@ -146,6 +146,7 @@ function App() {
               headerStyle: { backgroundColor: AppColors.osPrimary },
               headerTintColor: AppColors.white,
               headerTitleAlign: 'center',
+              headerShadowVisible: false,
             }}
           >
             <Stack.Screen
@@ -189,7 +190,6 @@ const headerStyles = StyleSheet.create({
     fontSize: 14,
     fontWeight: '400',
     color: AppColors.white,
-    opacity: 0.9,
   },
 });
 

examples/demo/src/components/ActionButton.tsx

@@ -32,18 +32,17 @@ export default function ActionButton({
   leftAligned,
 }: Props) {
   const bgColor =
-    variant === 'primary'
-      ? AppColors.osPrimary
-      : variant === 'destructive'
-        ? AppColors.osPrimary
-        : 'transparent';
+    variant === 'primary' ? AppColors.osPrimary : 'transparent';
 
   const borderStyle =
-    variant === 'outlined'
+    variant === 'outlined' || variant === 'destructive'
       ? { borderWidth: 1, borderColor: AppColors.osPrimary }
       : {};
 
-  const textColor = variant === 'outlined' ? AppColors.osPrimary : AppColors.white;
+  const textColor =
+    variant === 'outlined' || variant === 'destructive'
+      ? AppColors.osPrimary
+      : AppColors.white;
 
   return (
     <TouchableOpacity
@@ -78,7 +77,8 @@ export default function ActionButton({
 const styles = StyleSheet.create({
   button: {
     borderRadius: 8,
-    paddingVertical: 14,
+    height: 48,
+    justifyContent: 'center',
     paddingHorizontal: 16,
     width: '100%',
     marginBottom: AppSpacing.gap,
@@ -94,8 +94,6 @@ const styles = StyleSheet.create({
   text: {
     fontSize: 14,
     fontWeight: '600',
-    letterSpacing: 0.5,
-    textTransform: 'uppercase',
   },
   iconLeft: {
     marginRight: 8,

examples/demo/src/components/ListWidgets.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialIcons';
-import { AppColors, AppTheme } from '../theme';
+import { AppColors, AppTextStyles, AppTheme } from '../theme';
 
 // PairItem
 interface PairItemProps {
@@ -187,25 +187,24 @@ const styles = StyleSheet.create({
   pairRow: {
     flexDirection: 'row',
     alignItems: 'center',
-    paddingVertical: 8,
+    paddingVertical: 4,
+    paddingHorizontal: 4,
   },
   pairStackedContent: {
     flex: 1,
     marginRight: 8,
   },
   pairStackedKey: {
-    fontSize: 15,
-    color: AppColors.osGrey700,
-    fontWeight: '500',
+    ...AppTextStyles.bodyMedium,
     marginBottom: 2,
   },
   pairStackedValue: {
-    fontSize: 14,
+    ...AppTextStyles.bodySmall,
     color: AppColors.osGrey600,
   },
   pairKey: {
+    ...AppTextStyles.bodyMedium,
     flex: 1,
-    fontSize: 14,
     color: AppColors.osGrey600,
   },
   pairSeparator: {
@@ -214,41 +213,41 @@ const styles = StyleSheet.create({
     marginHorizontal: 8,
   },
   pairValue: {
+    ...AppTextStyles.bodyMedium,
     flex: 1,
-    fontSize: 14,
     color: AppColors.osGrey700,
     textAlign: 'right',
     marginRight: 8,
   },
   singleRow: {
     flexDirection: 'row',
     alignItems: 'center',
-    paddingVertical: 8,
+    paddingVertical: 4,
+    paddingHorizontal: 4,
   },
   singleValue: {
+    ...AppTextStyles.bodyMedium,
     flex: 1,
-    fontSize: 14,
     color: AppColors.osGrey700,
   },
   emptyContainer: {
-    paddingVertical: 8,
+    paddingVertical: 12,
     alignItems: 'center',
   },
   emptyText: {
-    fontSize: 14,
+    ...AppTextStyles.bodyMedium,
     color: AppColors.osGrey600,
-    fontStyle: 'italic',
   },
   divider: {
     height: 1,
     backgroundColor: AppColors.osDivider,
   },
   moreButton: {
-    paddingVertical: 8,
+    paddingVertical: 4,
     alignItems: 'center',
   },
   moreText: {
-    fontSize: 13,
+    fontSize: 14,
     color: AppColors.osPrimary,
     fontWeight: '500',
   },

examples/demo/src/components/LogView.tsx

@@ -8,7 +8,7 @@ import {
 } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialIcons';
 import LogManager, { LogEntry } from '../services/LogManager';
-import { AppColors } from '../theme';
+import { AppColors, AppTextStyles } from '../theme';
 
 const LEVEL_COLORS: Record<string, string> = {
   D: AppColors.osLogDebug,
@@ -142,13 +142,13 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   headerText: {
-    fontSize: 11,
+    ...AppTextStyles.labelSmall,
     fontWeight: '700',
     color: AppColors.white,
     letterSpacing: 0.8,
   },
   countText: {
-    fontSize: 11,
+    ...AppTextStyles.labelSmall,
     color: AppColors.osGrey500,
     marginLeft: 8,
   },
@@ -172,22 +172,22 @@ const styles = StyleSheet.create({
     gap: 4,
   },
   timestamp: {
-    fontSize: 11,
+    ...AppTextStyles.labelSmall,
     color: AppColors.osLogTimestamp,
     fontFamily: 'monospace',
   },
   level: {
-    fontSize: 11,
+    ...AppTextStyles.labelSmall,
     fontWeight: '700',
     fontFamily: 'monospace',
   },
   message: {
-    fontSize: 11,
+    ...AppTextStyles.labelSmall,
     color: AppColors.white,
     fontFamily: 'monospace',
   },
   emptyText: {
-    fontSize: 11,
+    ...AppTextStyles.labelSmall,
     color: AppColors.osGrey500,
     paddingVertical: 12,
     textAlign: 'center',

examples/demo/src/components/SectionCard.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
-import { AppColors, AppTheme, AppSpacing } from '../theme';
+import { AppColors, AppTextStyles, AppTheme, AppSpacing } from '../theme';
 
 interface Props {
   title: string;
@@ -46,7 +46,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: 4,
   },
   title: {
-    fontSize: 12,
+    ...AppTextStyles.bodySmall,
     fontWeight: '700',
     color: AppColors.osGrey700,
     letterSpacing: 0.5,

examples/demo/src/components/ToggleRow.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View, Text, Switch, StyleSheet } from 'react-native';
-import { AppColors } from '../theme';
+import { AppColors, AppTextStyles } from '../theme';
 
 interface Props {
   label: string;
@@ -49,12 +49,11 @@ const styles = StyleSheet.create({
     marginRight: 12,
   },
   label: {
-    fontSize: 15,
+    ...AppTextStyles.bodyMedium,
     color: '#212121',
-    fontWeight: '500',
   },
   description: {
-    fontSize: 12,
+    ...AppTextStyles.bodySmall,
     color: AppColors.osGrey600,
     marginTop: 2,
   },