Xor290/projet_gestion_commande
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: update UI

Browse Source
This commit is contained in:
Xor290
2026-04-23 08:56:33 +02:00
parent a276e1126f
commit 322882d587
5 changed files with 94 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
mobile/src/components/ui/Modal.tsx
+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,
},
});