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,
View,
ScrollView,
KeyboardAvoidingView,
TouchableOpacity,
Text,
StyleSheet,
Animated,
Platform,
} from "react-native";
import { Ionicons } from "@expo/vector-icons";
import { spacing, borderRadius, fontSize } from "../../theme";
@@ -133,6 +135,10 @@ export default function Modal({
animationType="fade"
onRequestClose={onClose}
>
<KeyboardAvoidingView
style={{ flex: 1 }}
behavior={Platform.OS === "ios" ? "padding" : "height"}
>
<View style={styles.overlay}>
<Animated.View
style={[
@@ -186,6 +192,7 @@ export default function Modal({
</ScrollView>
</Animated.View>
</View>
</KeyboardAvoidingView>
</RNModal>
);
}
@@ -974,9 +974,9 @@ export default function UsersScreen() {
{ color: colors.warning },
]}
>
{item.clientData.amende}
{item.clientData.amende}
</Text>
<Text style={styles.statLabel}>Amendes</Text>
<Text style={styles.statLabel}>Amende</Text>
</View>
)}
<View style={styles.stat}>
@@ -1456,16 +1456,16 @@ export default function UsersScreen() {
Amende actuelle
</Text>
<Text style={{ color: colors.warning, fontSize: fontSize.lg, fontWeight: "700" }}>
{sanctionModal.client?.amende ?? 0} pts
{sanctionModal.client?.amende ?? 0}
</Text>
</View>
{/* Ajouter amende */}
<TextInput
label="Points à ajouter"
label="Montant à ajouter ()"
value={amendeAmount}
onChangeText={setAmendeAmount}
keyboardType="numeric"
keyboardType="decimal-pad"
icon={<Ionicons name="add-circle-outline" size={18} color={colors.textMuted} />}
/>
<TextInput
@@ -150,9 +150,9 @@ export default function UsersScreen() {
{appSettings.show_amende_score && (
<View style={styles.stat}>
<Text style={[styles.statValue, { color: colors.warning }]}>
{item.amende}
{item.amende}
</Text>
<Text style={styles.statLabel}>Amendes</Text>
<Text style={styles.statLabel}>Amende</Text>
</View>
)}
<View style={styles.stat}>
+78 -64
View File
@@ -2,10 +2,13 @@ import React, { type ReactNode, useEffect, useRef } from "react";
import {
Modal as RNModal,
View,
ScrollView,
KeyboardAvoidingView,
TouchableOpacity,
Text,
StyleSheet,
Animated,
Platform,
} from "react-native";
import { Ionicons } from "@expo/vector-icons";
import { spacing, borderRadius, fontSize } from "../../theme";
@@ -60,74 +63,86 @@ export default function Modal({
animationType="fade"
onRequestClose={onClose}
>
<View style={styles.overlay}>
<Animated.View
style={[
styles.content,
{
backgroundColor: colors.bgSecondary,
borderColor: colors.borderSubtle,
shadowColor: colors.accent,
transform: [{ scale }],
opacity,
},
]}
>
<View
<KeyboardAvoidingView
style={{ flex: 1 }}
behavior={Platform.OS === "ios" ? "padding" : "height"}
>
<View style={styles.overlay}>
<Animated.View
style={[
styles.accentBar,
{ backgroundColor: colors.accent },
styles.content,
{
backgroundColor: colors.bgSecondary,
borderColor: colors.borderSubtle,
shadowColor: colors.accent,
transform: [{ scale }],
opacity,
},
]}
/>
<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}
>
<View
style={[
styles.closeBtn,
{ backgroundColor: colors.borderSubtle },
styles.accentBar,
{ 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
name="close"
size={20}
color={colors.textMuted}
/>
</TouchableOpacity>
</View>
<View style={styles.body}>{children}</View>
</Animated.View>
</View>
{children}
</ScrollView>
</Animated.View>
</View>
</KeyboardAvoidingView>
</RNModal>
);
}
@@ -190,6 +205,5 @@ const styles = StyleSheet.create({
},
body: {
paddingHorizontal: spacing.xl,
paddingBottom: spacing.xl,
},
});
@@ -333,10 +333,10 @@ export default function OrderHistoryScreen() {
penaltyCount > 0 && penaltyCount < 3 && { color: colors.warning },
]}
>
{penaltyCount}
{penaltyCount}
</Text>
<Text style={styles.statLabel}>
Score amendes
Amende
</Text>
</View>
)}