chore(demo): tweak ui

Author: fadi-george

examples/build.md

@@ -473,8 +473,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)

examples/demo/src/components/ListWidgets.tsx

@@ -187,20 +187,21 @@ const styles = StyleSheet.create({
   pairRow: {
     flexDirection: 'row',
     alignItems: 'center',
-    paddingVertical: 8,
+    paddingVertical: 4,
+    paddingHorizontal: 4,
   },
   pairStackedContent: {
     flex: 1,
     marginRight: 8,
   },
   pairStackedKey: {
-    fontSize: 15,
+    fontSize: 14,
     color: AppColors.osGrey700,
     fontWeight: '500',
     marginBottom: 2,
   },
   pairStackedValue: {
-    fontSize: 14,
+    fontSize: 12,
     color: AppColors.osGrey600,
   },
   pairKey: {
@@ -223,32 +224,32 @@ const styles = StyleSheet.create({
   singleRow: {
     flexDirection: 'row',
     alignItems: 'center',
-    paddingVertical: 8,
+    paddingVertical: 4,
+    paddingHorizontal: 4,
   },
   singleValue: {
     flex: 1,
     fontSize: 14,
     color: AppColors.osGrey700,
   },
   emptyContainer: {
-    paddingVertical: 8,
+    paddingVertical: 12,
     alignItems: 'center',
   },
   emptyText: {
     fontSize: 14,
     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/ToggleRow.tsx

@@ -49,9 +49,8 @@ const styles = StyleSheet.create({
     marginRight: 12,
   },
   label: {
-    fontSize: 15,
+    fontSize: 14,
     color: '#212121',
-    fontWeight: '500',
   },
   description: {
     fontSize: 12,

examples/demo/src/components/sections/AliasesSection.tsx

@@ -35,7 +35,7 @@ export default function AliasesSection({
         </View>
       ) : (
         <View style={styles.listCard}>
-          <PairList items={filtered} />
+          <PairList items={filtered} layout="stacked" />
         </View>
       )}
       <ActionButton

examples/demo/src/components/sections/AppSection.tsx

@@ -89,27 +89,25 @@ const styles = StyleSheet.create({
     color: AppColors.osGrey600,
   },
   idValue: {
-    fontSize: 13,
+    fontSize: 12,
     color: AppColors.osGrey700,
     flex: 1,
     textAlign: 'right',
     marginLeft: 8,
     fontFamily: 'monospace',
   },
   banner: {
+    ...AppTheme.card,
     backgroundColor: AppColors.osWarningBackground,
-    borderRadius: 8,
-    padding: 12,
     marginBottom: AppSpacing.gap,
   },
   bannerText: {
-    fontSize: 13,
+    fontSize: 12,
     color: AppColors.osGrey700,
-    marginBottom: 4,
   },
   bannerLink: {
-    fontSize: 13,
+    fontSize: 12,
     color: AppColors.osPrimary,
-    fontWeight: '500',
+    fontWeight: '600',
   },
 });

examples/demo/src/components/sections/PushSection.tsx

@@ -65,7 +65,7 @@ const styles = StyleSheet.create({
     minWidth: 60,
   },
   idValue: {
-    fontSize: 13,
+    fontSize: 12,
     color: AppColors.osGrey700,
     flex: 1,
     textAlign: 'right',

examples/demo/src/components/sections/SendIamSection.tsx

@@ -61,7 +61,7 @@ const styles = StyleSheet.create({
     justifyContent: 'flex-start',
   },
   icon: {
-    marginRight: 10,
+    marginRight: 8,
   },
   label: {
     fontSize: 14,

examples/demo/src/screens/HomeScreen.tsx

@@ -250,9 +250,9 @@ const styles = StyleSheet.create({
     color: AppColors.osGrey600,
   },
   statusValue: {
-    fontSize: 14,
+    fontSize: 12,
     color: AppColors.osGrey700,
-    fontWeight: '500',
+    fontFamily: 'monospace',
   },
   loggedInText: {
     color: AppColors.osSuccess,