Move "Back to Loved Ones" button above "I received my kit"

- 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>
This commit is contained in:
Sergei 2026-01-09 19:43:22 -08:00
parent 2d5e5186f7
commit c004d3c3a4

View File

@ -277,6 +277,15 @@ export default function EquipmentStatusScreen() {
})} })}
</View> </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 */} {/* Action Button */}
<View style={styles.actionSection}> <View style={styles.actionSection}>
{isDelivered ? ( {isDelivered ? (
@ -289,16 +298,16 @@ export default function EquipmentStatusScreen() {
</TouchableOpacity> </TouchableOpacity>
) : ( ) : (
<TouchableOpacity <TouchableOpacity
style={[styles.outlineButton, isConfirming && styles.buttonDisabled]} style={[styles.receivedButton, isConfirming && styles.buttonDisabled]}
onPress={handleConfirmReceived} onPress={handleConfirmReceived}
disabled={isConfirming} disabled={isConfirming}
> >
{isConfirming ? ( {isConfirming ? (
<ActivityIndicator color={AppColors.primary} /> <ActivityIndicator color={AppColors.textMuted} />
) : ( ) : (
<> <>
<Ionicons name="checkmark-circle-outline" size={20} color={AppColors.primary} /> <Ionicons name="checkmark-circle-outline" size={20} color={AppColors.textMuted} />
<Text style={styles.outlineButtonText}>I received my kit</Text> <Text style={styles.receivedButtonText}>I received my kit</Text>
</> </>
)} )}
</TouchableOpacity> </TouchableOpacity>
@ -326,15 +335,6 @@ export default function EquipmentStatusScreen() {
<Text style={styles.supportText}>Need help? Contact support</Text> <Text style={styles.supportText}>Need help? Contact support</Text>
<Ionicons name="chevron-forward" size={18} color={AppColors.textMuted} /> <Ionicons name="chevron-forward" size={18} color={AppColors.textMuted} />
</TouchableOpacity> </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> </ScrollView>
</SafeAreaView> </SafeAreaView>
); );
@ -474,6 +474,7 @@ const styles = StyleSheet.create({
// Action Section // Action Section
actionSection: { actionSection: {
marginBottom: Spacing.lg, marginBottom: Spacing.lg,
marginTop: Spacing.md,
}, },
primaryButton: { primaryButton: {
flexDirection: 'row', flexDirection: 'row',
@ -489,21 +490,19 @@ const styles = StyleSheet.create({
fontWeight: FontWeights.semibold, fontWeight: FontWeights.semibold,
color: AppColors.white, color: AppColors.white,
}, },
outlineButton: { receivedButton: {
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
backgroundColor: AppColors.surface, backgroundColor: AppColors.surfaceSecondary,
paddingVertical: Spacing.md, paddingVertical: Spacing.sm,
borderRadius: BorderRadius.lg, borderRadius: BorderRadius.lg,
borderWidth: 1,
borderColor: AppColors.primary,
gap: Spacing.sm, gap: Spacing.sm,
}, },
outlineButtonText: { receivedButtonText: {
fontSize: FontSizes.base, fontSize: FontSizes.sm,
fontWeight: FontWeights.semibold, fontWeight: FontWeights.medium,
color: AppColors.primary, color: AppColors.textMuted,
}, },
buttonDisabled: { buttonDisabled: {
opacity: 0.7, opacity: 0.7,
@ -553,17 +552,14 @@ const styles = StyleSheet.create({
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
backgroundColor: AppColors.surface, backgroundColor: AppColors.primary,
paddingVertical: Spacing.md, paddingVertical: Spacing.md,
borderRadius: BorderRadius.lg, borderRadius: BorderRadius.lg,
borderWidth: 1,
borderColor: AppColors.border,
gap: Spacing.sm, gap: Spacing.sm,
marginTop: Spacing.lg,
}, },
backToLovedOnesText: { backToLovedOnesText: {
fontSize: FontSizes.base, fontSize: FontSizes.base,
fontWeight: FontWeights.medium, fontWeight: FontWeights.semibold,
color: AppColors.primary, color: AppColors.white,
}, },
}); });