style: enhance Embedded component styles and layout for improved usability and visual consistency

Author: lposen

example/src/components/Embedded/Embedded.styles.ts

@@ -19,14 +19,31 @@ import {
 const styles = StyleSheet.create({
   button,
   buttonText,
-  container,
+  compactUtilityButton: {
+    ...button,
+    paddingVertical: 8,
+  },
+  compactUtilityButtonText: {
+    ...buttonText,
+    fontSize: 12,
+    lineHeight: 17,
+  },
+  container:{
+    ...container,
+    marginHorizontal: 0,
+    marginTop: 0,
+    paddingHorizontal: 0,
+  },
+  embeddedHr: {
+    ...hr,
+    marginVertical: 12,
+  },
   embeddedSection: {
     display: 'flex',
     flexDirection: 'column',
     gap: 16,
     paddingHorizontal: 16,
   },
-  hr,
   inputContainer: {
     marginVertical: 10,
   },
@@ -39,6 +56,30 @@ const styles = StyleSheet.create({
   modalButtons,
   modalContent,
   modalOverlay,
+  placementIdsInput: {
+    ...input,
+    flex: 1,
+    marginBottom: 0,
+    minWidth: 72,
+  },
+  placementIdsLabel: {
+    flexShrink: 1,
+    fontSize: 14,
+  },
+  placementIdsRow: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    gap: 8,
+    marginBottom: 8,
+  },
+  sessionButtonHalf: {
+    flex: 1,
+  },
+  sessionButtonsRow: {
+    flexDirection: 'row',
+    gap: 8,
+    marginBottom: 8,
+  },
   subtitle: { ...subtitle, textAlign: 'center' },
   text: { textAlign: 'center' },
   textInput: input,
@@ -52,27 +93,37 @@ const styles = StyleSheet.create({
     borderRadius: 8,
     borderWidth: 2,
     flex: 1,
-    paddingHorizontal: 12,
-    paddingVertical: 8,
+    paddingHorizontal: 8,
+    paddingVertical: 7,
   },
   viewTypeButtonSelected: {
     backgroundColor: colors.brandCyan,
   },
   viewTypeButtonText: {
     color: colors.brandCyan,
-    fontSize: 14,
+    fontSize: 12,
     fontWeight: '600',
   },
   viewTypeButtonTextSelected: {
     color: colors.backgroundPrimary,
   },
   viewTypeButtons: {
+    flex: 1,
     flexDirection: 'row',
     gap: 8,
     justifyContent: 'space-around',
-    marginTop: 8,
+    minWidth: 0,
+  },
+  viewTypeLabel: {
+    flexShrink: 0,
+    fontSize: 13,
+    fontWeight: '600',
   },
   viewTypeSelector: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 8,
     marginVertical: 12,
   },
   warningContainer: {

example/src/components/Embedded/Embedded.tsx

@@ -88,7 +88,6 @@ export const Embedded = () => {
 
   return (
     <SafeAreaView style={styles.container}>
-      <Text style={styles.title}>Embedded</Text>
       {!Iterable.embeddedManager.isEnabled && (
         <View style={styles.warningContainer}>
           <Text style={styles.warningText}>
@@ -97,12 +96,9 @@ export const Embedded = () => {
           </Text>
         </View>
       )}
-      <Text style={styles.subtitle}>
-        Enter placement IDs to fetch embedded messages
-      </Text>
       <View style={styles.utilitySection}>
         <View style={styles.viewTypeSelector}>
-          <Text style={styles.text}>Select View Type:</Text>
+          <Text style={styles.viewTypeLabel}>View:</Text>
           <View style={styles.viewTypeButtons}>
             <TouchableOpacity
               style={[
@@ -164,28 +160,43 @@ export const Embedded = () => {
             </TouchableOpacity>
           </View>
         </View>
-        <TouchableOpacity style={styles.button} onPress={syncEmbeddedMessages}>
-          <Text style={styles.buttonText}>Sync messages</Text>
-        </TouchableOpacity>
-        <TouchableOpacity style={styles.button} onPress={startEmbeddedSession}>
-          <Text style={styles.buttonText}>Start session</Text>
-        </TouchableOpacity>
-        <TouchableOpacity style={styles.button} onPress={endEmbeddedSession}>
-          <Text style={styles.buttonText}>End session</Text>
-        </TouchableOpacity>
-        <TouchableOpacity style={styles.button} onPress={openConfigEditor}>
-          <Text style={styles.buttonText}>Set view config</Text>
+        <View style={styles.sessionButtonsRow}>
+          <TouchableOpacity
+            style={[styles.compactUtilityButton, styles.sessionButtonHalf]}
+            onPress={syncEmbeddedMessages}
+          >
+            <Text style={styles.compactUtilityButtonText}>Sync</Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            style={[styles.compactUtilityButton, styles.sessionButtonHalf]}
+            onPress={startEmbeddedSession}
+          >
+            <Text style={styles.compactUtilityButtonText}>Start session</Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            style={[styles.compactUtilityButton, styles.sessionButtonHalf]}
+            onPress={endEmbeddedSession}
+          >
+            <Text style={styles.compactUtilityButtonText}>End session</Text>
+          </TouchableOpacity>
+        </View>
+        <TouchableOpacity style={styles.compactUtilityButton} onPress={openConfigEditor}>
+          <Text style={styles.compactUtilityButtonText}>Set view config</Text>
         </TouchableOpacity>
         <View style={styles.inputContainer}>
-          <Text style={styles.text}>Placement IDs (comma-separated):</Text>
-          <TextInput
-            style={styles.textInput}
-            placeholder="e.g., 1, 2, 3"
-            placeholderTextColor="#999"
-            value={placementIdsInput}
-            onChangeText={setPlacementIdsInput}
-            keyboardType="numbers-and-punctuation"
-          />
+          <View style={styles.placementIdsRow}>
+            <Text style={styles.placementIdsLabel}>
+              Placement IDs{'\n'}(comma-separated):
+            </Text>
+            <TextInput
+              style={styles.placementIdsInput}
+              placeholder="e.g., 1, 2, 3"
+              placeholderTextColor="#999"
+              value={placementIdsInput}
+              onChangeText={setPlacementIdsInput}
+              keyboardType="numbers-and-punctuation"
+            />
+          </View>
           <TouchableOpacity style={styles.button} onPress={getEmbeddedMessages}>
             <Text style={styles.buttonText}>
               Get messages for placement ids
@@ -227,7 +238,7 @@ export const Embedded = () => {
           </View>
         </View>
       </Modal>
-      <View style={styles.hr} />
+      <View style={styles.embeddedHr} />
       <ScrollView>
         <View style={styles.embeddedSection}>
           {embeddedMessages.map((message) => (