chore: update UI
This commit is contained in:
@@ -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}>
|
||||||
|
|||||||
@@ -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>
|
||||||
)}
|
)}
|
||||||
|
|||||||
Reference in New Issue
Block a user