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:
parent
2d5e5186f7
commit
c004d3c3a4
@ -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,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user