sergei_t/WellNuo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 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
1 changed files with 24 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
app/(tabs)/beneficiaries/[id]/equipment-status.tsx
View File

@ -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,
},
});