chore: update UI

This commit is contained in:
2026-04-23 08:56:33 +02:00
parent a276e1126f
commit 322882d587
5 changed files with 94 additions and 73 deletions
@@ -3,10 +3,12 @@ import {
Modal as RNModal, Modal as RNModal,
View, View,
ScrollView, ScrollView,
KeyboardAvoidingView,
TouchableOpacity, TouchableOpacity,
Text, Text,
StyleSheet, StyleSheet,
Animated, Animated,
Platform,
} from "react-native"; } from "react-native";
import { Ionicons } from "@expo/vector-icons"; import { Ionicons } from "@expo/vector-icons";
import { spacing, borderRadius, fontSize } from "../../theme"; import { spacing, borderRadius, fontSize } from "../../theme";
@@ -133,6 +135,10 @@ export default function Modal({
animationType="fade" animationType="fade"
onRequestClose={onClose} onRequestClose={onClose}
> >
<KeyboardAvoidingView
style={{ flex: 1 }}
behavior={Platform.OS === "ios" ? "padding" : "height"}
>
<View style={styles.overlay}> <View style={styles.overlay}>
<Animated.View <Animated.View
style={[ style={[
@@ -186,6 +192,7 @@ export default function Modal({
</ScrollView> </ScrollView>
</Animated.View> </Animated.View>
</View> </View>
</KeyboardAvoidingView>
</RNModal> </RNModal>
); );
} }
@@ -974,9 +974,9 @@ export default function UsersScreen() {
{ color: colors.warning }, { color: colors.warning },
]} ]}
> >
{item.clientData.amende} {item.clientData.amende}
</Text> </Text>
<Text style={styles.statLabel}>Amendes</Text> <Text style={styles.statLabel}>Amende</Text>
</View> </View>
)} )}
<View style={styles.stat}> <View style={styles.stat}>
@@ -1456,16 +1456,16 @@ export default function UsersScreen() {
Amende actuelle Amende actuelle
</Text> </Text>
<Text style={{ color: colors.warning, fontSize: fontSize.lg, fontWeight: "700" }}> <Text style={{ color: colors.warning, fontSize: fontSize.lg, fontWeight: "700" }}>
{sanctionModal.client?.amende ?? 0} pts {sanctionModal.client?.amende ?? 0}
</Text> </Text>
</View> </View>
{/* Ajouter amende */} {/* Ajouter amende */}
<TextInput <TextInput
label="Points à ajouter" label="Montant à ajouter ()"
value={amendeAmount} value={amendeAmount}
onChangeText={setAmendeAmount} onChangeText={setAmendeAmount}
keyboardType="numeric" keyboardType="decimal-pad"
icon={<Ionicons name="add-circle-outline" size={18} color={colors.textMuted} />} icon={<Ionicons name="add-circle-outline" size={18} color={colors.textMuted} />}
/> />
<TextInput <TextInput
@@ -150,9 +150,9 @@ export default function UsersScreen() {
{appSettings.show_amende_score && ( {appSettings.show_amende_score && (
<View style={styles.stat}> <View style={styles.stat}>
<Text style={[styles.statValue, { color: colors.warning }]}> <Text style={[styles.statValue, { color: colors.warning }]}>
{item.amende} {item.amende}
</Text> </Text>
<Text style={styles.statLabel}>Amendes</Text> <Text style={styles.statLabel}>Amende</Text>
</View> </View>
)} )}
<View style={styles.stat}> <View style={styles.stat}>
+78 -64
View File
@@ -2,10 +2,13 @@ import React, { type ReactNode, useEffect, useRef } from "react";
import { import {
Modal as RNModal, Modal as RNModal,
View, View,
ScrollView,
KeyboardAvoidingView,
TouchableOpacity, TouchableOpacity,
Text, Text,
StyleSheet, StyleSheet,
Animated, Animated,
Platform,
} from "react-native"; } from "react-native";
import { Ionicons } from "@expo/vector-icons"; import { Ionicons } from "@expo/vector-icons";
import { spacing, borderRadius, fontSize } from "../../theme"; import { spacing, borderRadius, fontSize } from "../../theme";
@@ -60,74 +63,86 @@ export default function Modal({
animationType="fade" animationType="fade"
onRequestClose={onClose} onRequestClose={onClose}
> >
<View style={styles.overlay}> <KeyboardAvoidingView
<Animated.View style={{ flex: 1 }}
style={[ behavior={Platform.OS === "ios" ? "padding" : "height"}
styles.content, >
{ <View style={styles.overlay}>
backgroundColor: colors.bgSecondary, <Animated.View
borderColor: colors.borderSubtle,
shadowColor: colors.accent,
transform: [{ scale }],
opacity,
},
]}
>
<View
style={[ style={[
styles.accentBar, styles.content,
{ backgroundColor: colors.accent }, {
backgroundColor: colors.bgSecondary,
borderColor: colors.borderSubtle,
shadowColor: colors.accent,
transform: [{ scale }],
opacity,
},
]} ]}
/> >
<View style={styles.header}> <View
<View style={styles.titleRow}>
{icon && (
<View
style={[
styles.iconCircle,
{
backgroundColor:
(iconColor || colors.accent) +
"20",
},
]}
>
<Ionicons
name={icon}
size={20}
color={iconColor || colors.accent}
/>
</View>
)}
{title && (
<Text
style={[
styles.title,
{ color: colors.textWhite },
]}
>
{title}
</Text>
)}
</View>
<TouchableOpacity
onPress={onClose}
style={[ style={[
styles.closeBtn, styles.accentBar,
{ backgroundColor: colors.borderSubtle }, { backgroundColor: colors.accent },
]} ]}
activeOpacity={0.7} />
<View style={styles.header}>
<View style={styles.titleRow}>
{icon && (
<View
style={[
styles.iconCircle,
{
backgroundColor:
(iconColor || colors.accent) +
"20",
},
]}
>
<Ionicons
name={icon}
size={20}
color={iconColor || colors.accent}
/>
</View>
)}
{title && (
<Text
style={[
styles.title,
{ color: colors.textWhite },
]}
>
{title}
</Text>
)}
</View>
<TouchableOpacity
onPress={onClose}
style={[
styles.closeBtn,
{ backgroundColor: colors.borderSubtle },
]}
activeOpacity={0.7}
>
<Ionicons
name="close"
size={20}
color={colors.textMuted}
/>
</TouchableOpacity>
</View>
<ScrollView
style={styles.body}
contentContainerStyle={{ paddingBottom: spacing.xl }}
showsVerticalScrollIndicator={false}
keyboardShouldPersistTaps="handled"
> >
<Ionicons {children}
name="close" </ScrollView>
size={20} </Animated.View>
color={colors.textMuted} </View>
/> </KeyboardAvoidingView>
</TouchableOpacity>
</View>
<View style={styles.body}>{children}</View>
</Animated.View>
</View>
</RNModal> </RNModal>
); );
} }
@@ -190,6 +205,5 @@ const styles = StyleSheet.create({
}, },
body: { body: {
paddingHorizontal: spacing.xl, paddingHorizontal: spacing.xl,
paddingBottom: spacing.xl,
}, },
}); });
@@ -333,10 +333,10 @@ export default function OrderHistoryScreen() {
penaltyCount > 0 && penaltyCount < 3 && { color: colors.warning }, penaltyCount > 0 && penaltyCount < 3 && { color: colors.warning },
]} ]}
> >
{penaltyCount} {penaltyCount}
</Text> </Text>
<Text style={styles.statLabel}> <Text style={styles.statLabel}>
Score amendes Amende
</Text> </Text>
</View> </View>
)} )}