From c004d3c3a492a5f7d779aefc8197f8d7bb91af35 Mon Sep 17 00:00:00 2001
From: Sergei <sergei@Sergeis-MacBook-Pro.local>
Date: Fri, 9 Jan 2026 19:43:22 -0800
Subject: [PATCH] Move "Back to Loved Ones" button above "I received my kit"
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Make "Back to My Loved Ones" the primary action (blue button)
- Make "I received my kit" secondary/subtle (gray, smaller)
- Prevents accidental confirmation of kit receipt
- Users can easily return to beneficiary list

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../beneficiaries/[id]/equipment-status.tsx   | 52 +++++++++----------
 1 file changed, 24 insertions(+), 28 deletions(-)

diff --git a/app/(tabs)/beneficiaries/[id]/equipment-status.tsx b/app/(tabs)/beneficiaries/[id]/equipment-status.tsx
index 1ea1de1..04faae6 100644
--- a/app/(tabs)/beneficiaries/[id]/equipment-status.tsx
+++ b/app/(tabs)/beneficiaries/[id]/equipment-status.tsx
@@ -277,6 +277,15 @@ export default function EquipmentStatusScreen() {
           })}
         </View>
 
+        {/* Back to Loved Ones Button - above action button */}
+        <TouchableOpacity
+          style={styles.backToLovedOnesButton}
+          onPress={() => router.replace('/(tabs)/beneficiaries')}
+        >
+          <Ionicons name="people" size={20} color={AppColors.white} />
+          <Text style={styles.backToLovedOnesText}>Back to My Loved Ones</Text>
+        </TouchableOpacity>
+
         {/* Action Button */}
         <View style={styles.actionSection}>
           {isDelivered ? (
@@ -289,16 +298,16 @@ export default function EquipmentStatusScreen() {
             </TouchableOpacity>
           ) : (
             <TouchableOpacity
-              style={[styles.outlineButton, isConfirming && styles.buttonDisabled]}
+              style={[styles.receivedButton, isConfirming && styles.buttonDisabled]}
               onPress={handleConfirmReceived}
               disabled={isConfirming}
             >
               {isConfirming ? (
-                <ActivityIndicator color={AppColors.primary} />
+                <ActivityIndicator color={AppColors.textMuted} />
               ) : (
                 <>
-                  <Ionicons name="checkmark-circle-outline" size={20} color={AppColors.primary} />
-                  <Text style={styles.outlineButtonText}>I received my kit</Text>
+                  <Ionicons name="checkmark-circle-outline" size={20} color={AppColors.textMuted} />
+                  <Text style={styles.receivedButtonText}>I received my kit</Text>
                 </>
               )}
             </TouchableOpacity>
@@ -326,15 +335,6 @@ export default function EquipmentStatusScreen() {
           <Text style={styles.supportText}>Need help? Contact support</Text>
           <Ionicons name="chevron-forward" size={18} color={AppColors.textMuted} />
         </TouchableOpacity>
-
-        {/* Back to Loved Ones Button */}
-        <TouchableOpacity
-          style={styles.backToLovedOnesButton}
-          onPress={() => router.replace('/(tabs)/beneficiaries')}
-        >
-          <Ionicons name="arrow-back" size={20} color={AppColors.primary} />
-          <Text style={styles.backToLovedOnesText}>Back to My Loved Ones</Text>
-        </TouchableOpacity>
       </ScrollView>
     </SafeAreaView>
   );
@@ -474,6 +474,7 @@ const styles = StyleSheet.create({
   // Action Section
   actionSection: {
     marginBottom: Spacing.lg,
+    marginTop: Spacing.md,
   },
   primaryButton: {
     flexDirection: 'row',
@@ -489,21 +490,19 @@ const styles = StyleSheet.create({
     fontWeight: FontWeights.semibold,
     color: AppColors.white,
   },
-  outlineButton: {
+  receivedButton: {
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
-    backgroundColor: AppColors.surface,
-    paddingVertical: Spacing.md,
+    backgroundColor: AppColors.surfaceSecondary,
+    paddingVertical: Spacing.sm,
     borderRadius: BorderRadius.lg,
-    borderWidth: 1,
-    borderColor: AppColors.primary,
     gap: Spacing.sm,
   },
-  outlineButtonText: {
-    fontSize: FontSizes.base,
-    fontWeight: FontWeights.semibold,
-    color: AppColors.primary,
+  receivedButtonText: {
+    fontSize: FontSizes.sm,
+    fontWeight: FontWeights.medium,
+    color: AppColors.textMuted,
   },
   buttonDisabled: {
     opacity: 0.7,
@@ -553,17 +552,14 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
-    backgroundColor: AppColors.surface,
+    backgroundColor: AppColors.primary,
     paddingVertical: Spacing.md,
     borderRadius: BorderRadius.lg,
-    borderWidth: 1,
-    borderColor: AppColors.border,
     gap: Spacing.sm,
-    marginTop: Spacing.lg,
   },
   backToLovedOnesText: {
     fontSize: FontSizes.base,
-    fontWeight: FontWeights.medium,
-    color: AppColors.primary,
+    fontWeight: FontWeights.semibold,
+    color: AppColors.white,
   },
 });