字体大小适配

app/locales/fr/translation.json

@@ -186,7 +186,7 @@
     "order.pay_now": "Payer maintenant",
     "order.reorder": "Commander à nouveau",
     "order.unable_to_load": "Impossible de charger le statut de la commande",
-    "order.select_payment": "Sélectionner le mode de paiement",
+    "order.select_payment": "Moyens de paiement",
     "order.select_currency": "Sélectionner la devise",
     "order.confirm_payment": "Confirmer le paiement",
     "member.introduction": "Avantages pour les membres",
@@ -299,7 +299,7 @@
         "total": "Total",
         "converting": "Conversion en cours...",
         "submit_order": "Soumettre la commande",
-        "select_payment": "Veuillez sélectionner un mode de paiement"
+        "select_payment": "Moyens de paiement"
     },
     "settings": {
         "title": "Paramètres",

app/screens/MemberScreen/CompanyScreen.tsx

@@ -17,6 +17,8 @@ import { RootStackParamList } from "../../types/navigation";
 import { VideoView, useVideoPlayer } from "expo-video";
 import { useTranslation } from "react-i18next";
 import BackIcon from "../../components/BackIcon";
+import fontSize from "../../utils/fontsizeUtils";
+
 
 export const CompanyScreen = () => {
   const [showVideo, setShowVideo] = useState(false);
@@ -166,7 +168,7 @@ const styles = StyleSheet.create({
     // 不再需要 marginLeft
   },
   headTitleText: {
-    fontSize: 16,
+    fontSize: fontSize(16),
     fontWeight: "bold",
   },
   indexTopItemFirst: {
@@ -177,12 +179,12 @@ const styles = StyleSheet.create({
     marginTop: 20,
   },
   introworld: {
-    fontSize: 22,
+    fontSize: fontSize(22),
     fontWeight: "bold",
     color: "#242529",
   },
   offredes: {
-    fontSize: 16,
+    fontSize: fontSize(16),
     color: "#000",
     marginTop: 10,
   },
@@ -196,7 +198,7 @@ const styles = StyleSheet.create({
     alignItems: "center",
   },
   productItemTop: {
-    fontSize: 30,
+    fontSize: fontSize(30),
     fontWeight: "bold",
     color: "#002fa7",
   },
@@ -204,20 +206,20 @@ const styles = StyleSheet.create({
     marginTop: 10,
     backgroundColor: "rgba(186, 221, 255, 0.15)",
     borderRadius: 5,
-    fontSize: 14,
+    fontSize: fontSize(14),
     color: "#05A9C8",
     padding: 6,
     textAlign: "center",
   },
   faisons: {
-    fontSize: 30,
+    fontSize: fontSize(30),
     fontWeight: "bold",
     color: "#D4D8E0",
     opacity: 0.6,
     textAlign: "center",
   },
   faisons1: {
-    fontSize: 24,
+    fontSize: fontSize(24)  ,
     fontWeight: "bold",
     color: "#0035a3",
     textAlign: "center",

app/screens/MemberScreen/MemberIntroduction.tsx

@@ -18,6 +18,7 @@ import { useNavigation } from "@react-navigation/native";
 import { NativeStackNavigationProp } from "@react-navigation/native-stack";
 import useUserStore from "../../store/user";
 import BackIcon from "../../components/BackIcon";
+
 type RootStackParamList = {
   Balance: undefined;
 };
@@ -523,7 +524,7 @@ const styles = StyleSheet.create({
   },
   titleHeading: {
     fontWeight: "600",
-    fontSize: 20,
+    fontSize: fontSize(20),
     lineHeight: 16,
     fontFamily: "PingFang SC",
     color: "#fff",
@@ -629,7 +630,7 @@ const styles = StyleSheet.create({
     height: "50%",
   },
   lineTextText: {
-    fontSize: 12,
+    fontSize: fontSize(12),
     color: "#6b3611",
     fontWeight: "bold",
   },
@@ -684,7 +685,7 @@ const styles = StyleSheet.create({
     alignItems: "center",
   },
   membershipBenefitsTitle: {
-    fontSize: 22,
+    fontSize: fontSize(22),
     fontWeight: "900",
     color: "black",
   },
@@ -698,7 +699,7 @@ const styles = StyleSheet.create({
     alignItems: "center",
   },
   buttonText: {
-    fontSize: 14,
+    fontSize: fontSize(14),
     fontWeight: "700",
     color: "#7e522c",
   },
@@ -706,7 +707,7 @@ const styles = StyleSheet.create({
     marginTop: 20,
   },
   membershipBenefitsDescription: {
-    fontSize: 12,
+    fontSize: fontSize(12),
     lineHeight: 18,
     color: "black",
   },
@@ -748,12 +749,12 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   memberPriceDescription: {
-    fontSize: 14,
+    fontSize: fontSize(14),
     fontWeight: "bold",
     color: "#002fa7",
   },
   vipDiscountDetailsTextStyle: {
-    fontSize: 12,
+    fontSize: fontSize(12),
     lineHeight: 16,
     color: "#000",
     marginTop: 5,
@@ -794,14 +795,14 @@ const styles = StyleSheet.create({
     marginRight: 10,
   },
   dedicatedServiceTextStyle: {
-    fontSize: 14,
+    fontSize: fontSize(14),
     color: "#002fa7",
     fontWeight: "bold",
     width: "50%",
     textAlign: "right",
   },
   orderTrackingServiceDescriptionTextStyle: {
-    fontSize: 12,
+    fontSize: fontSize(12),
     lineHeight: 16,
     color: "#271f18",
     textAlign: "right",
@@ -876,12 +877,12 @@ const styles = StyleSheet.create({
     padding: 16,
   },
   inspectionTitle: {
-    fontSize: 14,
+    fontSize: fontSize(14),
     color: "#002fa7",
     marginRight: 10,
   },
   inspectionMessageStyle: {
-    fontSize: 12,
+    fontSize: fontSize(12),
     lineHeight: 15,
     color: "#271f18",
     textAlign: "right",
@@ -935,7 +936,7 @@ const styles = StyleSheet.create({
     padding: 16,
   },
   personalizedProductsAssistanceText: {
-    fontSize: 14,
+    fontSize: fontSize(14),
     lineHeight: 18,
     color: "#002fa7",
     textAlign: "right",
@@ -946,7 +947,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: 39,
   },
   customTextBlock: {
-    fontSize: 12,
+    fontSize: fontSize(12),
     lineHeight: 16,
     color: "#271f18",
     textAlign: "right",
@@ -976,7 +977,7 @@ const styles = StyleSheet.create({
     zIndex: 10,
   },
   memberPricingBadgeText: {
-    fontSize: 16,
+    fontSize: fontSize(16),
     color: "#fff",
     fontWeight: "bold",
     textAlign: "center",
@@ -996,7 +997,7 @@ const styles = StyleSheet.create({
     zIndex: 10,
   },
   dedicatedServiceBadgeText: {
-    fontSize: 16,
+    fontSize: fontSize(16),
     color: "#fff",
     fontWeight: "bold",
     textAlign: "center",
@@ -1016,7 +1017,7 @@ const styles = StyleSheet.create({
     zIndex: 10,
   },
   photoServiceBadgeText: {
-    fontSize: 16,
+    fontSize: fontSize(16),
     color: "#fff",
     fontWeight: "bold",
     textAlign: "center",
@@ -1047,12 +1048,12 @@ const styles = StyleSheet.create({
   },
   highlightedText: {
     fontWeight: "900",
-    fontSize: 15,
+    fontSize: fontSize(15),
     color: "#fdd08f",
   },
   totalStats: {
     fontWeight: "900",
-    fontSize: 16,
+    fontSize: fontSize(16),
     color: "#fdd08f",
   },
   cardSection: {

app/screens/address/AddAddress.tsx

@@ -28,6 +28,8 @@ import { useAddressStore } from "../../store/address";
 import { settingApi } from "../../services/api/setting";
 import flagMap from "../../utils/flagMap";
 import { useTranslation } from "react-i18next";
+import fontSize from "../../utils/fontsizeUtils";
+
 
 type RootStackParamList = {
   AddRess: { address?: AddressItem };
@@ -543,7 +545,7 @@ const styles = StyleSheet.create({
   },
   titleHeading: {
     fontWeight: "600",
-    fontSize: 20,
+    fontSize: fontSize(20),
     lineHeight: 22,
     fontFamily: "PingFang SC",
     color: "black",
@@ -560,7 +562,7 @@ const styles = StyleSheet.create({
     padding: 0,
     margin: 0,
     fontWeight: "500",
-    fontSize: 18,
+    fontSize: fontSize(18),
     lineHeight: 22,
     fontFamily: "PingFang SC",
     color: "black",
@@ -569,7 +571,7 @@ const styles = StyleSheet.create({
     padding: 0,
     margin: 0,
     fontWeight: "500",
-    fontSize: 18,
+    fontSize: fontSize(18),
     lineHeight: 22,
     fontFamily: "PingFang SC",
     color: "#ff731e",
@@ -598,7 +600,7 @@ const styles = StyleSheet.create({
     padding: 0,
     margin: 0,
     fontWeight: "500",
-    fontSize: 12,
+    fontSize: fontSize(12),
     fontFamily: "PingFang SC",
     color: "#646472",
   },
@@ -607,7 +609,7 @@ const styles = StyleSheet.create({
     margin: 0,
     marginLeft: 1,
     fontWeight: "500",
-    fontSize: 18,
+    fontSize: fontSize(18),
     lineHeight: 22,
     fontFamily: "PingFang SC",
     color: "#fe1e00",
@@ -617,7 +619,7 @@ const styles = StyleSheet.create({
     margin: 0,
     marginTop: -2,
     fontWeight: "400",
-    fontSize: 16,
+    fontSize: fontSize(16),
     lineHeight: 22,
     fontFamily: "PingFang SC",
     color: "#807e7e",
@@ -627,7 +629,7 @@ const styles = StyleSheet.create({
     margin: 0,
     marginTop: -2,
     fontWeight: "400",
-    fontSize: 16,
+    fontSize: fontSize(16),
     lineHeight: 22,
     fontFamily: "PingFang SC",
     color: "#807e7e",
@@ -657,10 +659,10 @@ const styles = StyleSheet.create({
   },
   checkmark: {
     color: "white",
-    fontSize: 12,
+    fontSize: fontSize(12),
   },
   checkboxLabel: {
-    fontSize: 14,
+    fontSize: fontSize(14),
     color: "#646472",
     fontFamily: "PingFang SC",
   },
@@ -690,7 +692,7 @@ const styles = StyleSheet.create({
     margin: 0,
     marginLeft: 1,
     fontWeight: "500",
-    fontSize: 18,
+    fontSize: fontSize(18),
     lineHeight: 22,
     fontFamily: "PingFang SC",
     color: "#fe1e00",
@@ -727,7 +729,7 @@ const styles = StyleSheet.create({
     padding: 0,
     margin: 0,
     fontWeight: "500",
-    fontSize: 14,
+    fontSize: fontSize(14),
     fontFamily: "PingFang SC",
     color: "#807e7e",
   },
@@ -735,7 +737,7 @@ const styles = StyleSheet.create({
     padding: 0,
     margin: 0,
     fontWeight: "500",
-    fontSize: 14,
+    fontSize: fontSize(14),
     fontFamily: "PingFang SC",
     color: "#807e7e",
   },
@@ -765,7 +767,7 @@ const styles = StyleSheet.create({
     padding: 0,
     margin: 0,
     fontWeight: "500",
-    fontSize: 16,
+    fontSize: fontSize(16),
     lineHeight: 22,
     fontFamily: "PingFang SC",
     color: "black",
@@ -781,7 +783,7 @@ const styles = StyleSheet.create({
     justifyContent: "center",
     alignItems: "center",
     fontWeight: "600",
-    fontSize: 16,
+    fontSize: fontSize(16),
     lineHeight: 22,
     fontFamily: "PingFang SC",
     color: "white",
@@ -792,7 +794,7 @@ const styles = StyleSheet.create({
   buttonText: {
     color: "white",
     fontWeight: "600",
-    fontSize: 16,
+    fontSize: fontSize(16),
     lineHeight: 22,
     fontFamily: "PingFang SC",
   },
@@ -813,11 +815,11 @@ const styles = StyleSheet.create({
     marginTop: 2,
   },
   dropdownText: {
-    fontSize: 16,
+    fontSize: fontSize(16),
     color: "#333",
   },
   dropdownLabel: {
-    fontSize: 16,
+    fontSize: fontSize(16),
     color: "#333",
   },
   arrowIcon: {
@@ -837,14 +839,14 @@ const styles = StyleSheet.create({
     borderColor: "#dbdce0",
     borderRadius: 5,
     padding: 8,
-    fontSize: 16,
+    fontSize: fontSize(16),
   },
   phoneNumberError: {
     borderColor: "#fe1e00",
   },
   errorText: {
     color: "#fe1e00",
-    fontSize: 12,
+    fontSize: fontSize(12),
     marginTop: 4,
     fontFamily: "PingFang SC",
   },
@@ -858,12 +860,12 @@ const styles = StyleSheet.create({
     borderRadius: 5,
   },
   selectedCountryText: {
-    fontSize: 16,
+    fontSize: fontSize(16),
     color: "#333",
     fontFamily: "PingFang SC",
   },
   dropdownArrow: {
-    fontSize: 12,
+    fontSize: fontSize(12),
     color: "#646472",
     fontFamily: "PingFang SC",
   },
@@ -890,11 +892,11 @@ const styles = StyleSheet.create({
     padding: 15,
   },
   modalTitle: {
-    fontSize: 18,
+    fontSize: fontSize(18),
     fontWeight: "bold",
   },
   closeButton: {
-    fontSize: 16,
+    fontSize: fontSize(16),
     fontWeight: "bold",
     color: "#002fa7",
   },
@@ -909,10 +911,10 @@ const styles = StyleSheet.create({
     marginRight: 10,
   },
   countryItemText: {
-    fontSize: 16,
+    fontSize: fontSize(16),
   },
   checkIcon: {
-    fontSize: 16,
+    fontSize: fontSize(16),
     fontWeight: "bold",
     color: "#002fa7",
   },

app/screens/address/EditAddress.tsx

@@ -27,6 +27,7 @@ import { useAddressStore } from "../../store/address";
 import { settingApi } from "../../services/api/setting";
 import flagMap from "../../utils/flagMap";
 import { useTranslation } from "react-i18next";
+import fontSize from "../../utils/fontsizeUtils";
 
 type RootStackParamList = {
   AddRess: { address?: AddressItem };
@@ -519,7 +520,7 @@ const styles = StyleSheet.create({
   },
   titleHeading: {
     fontWeight: "600",
-    fontSize: 20,
+    fontSize: fontSize(20),
     lineHeight: 22,
     fontFamily: "PingFang SC",
     color: "black",
@@ -536,7 +537,7 @@ const styles = StyleSheet.create({
     padding: 0,
     margin: 0,
     fontWeight: "500",
-    fontSize: 18,
+    fontSize: fontSize(18),
     lineHeight: 22,
     fontFamily: "PingFang SC",
     color: "black",
@@ -545,7 +546,7 @@ const styles = StyleSheet.create({
     padding: 0,
     margin: 0,
     fontWeight: "500",
-    fontSize: 18,
+    fontSize: fontSize(18),
     lineHeight: 22,
     fontFamily: "PingFang SC",
     color: "#ff731e",
@@ -574,7 +575,7 @@ const styles = StyleSheet.create({
     padding: 0,
     margin: 0,
     fontWeight: "500",
-    fontSize: 12,
+    fontSize: fontSize(12),
     fontFamily: "PingFang SC",
     color: "#646472",
   },
@@ -583,7 +584,7 @@ const styles = StyleSheet.create({
     margin: 0,
     marginLeft: 1,
     fontWeight: "500",
-    fontSize: 18,
+    fontSize: fontSize(18),
     lineHeight: 22,
     fontFamily: "PingFang SC",
     color: "#fe1e00",
@@ -593,7 +594,7 @@ const styles = StyleSheet.create({
     margin: 0,
     marginTop: -2,
     fontWeight: "400",
-    fontSize: 16,
+    fontSize: fontSize(16),
     lineHeight: 22,
     fontFamily: "PingFang SC",
     color: "#807e7e",
@@ -603,7 +604,7 @@ const styles = StyleSheet.create({
     margin: 0,
     marginTop: -2,
     fontWeight: "400",
-    fontSize: 16,
+    fontSize: fontSize(16),
     lineHeight: 22,
     fontFamily: "PingFang SC",
     color: "#807e7e",
@@ -633,10 +634,10 @@ const styles = StyleSheet.create({
   },
   checkmark: {
     color: "white",
-    fontSize: 12,
+    fontSize: fontSize(12),
   },
   checkboxLabel: {
-    fontSize: 14,
+    fontSize: fontSize(14),
     color: "#646472",
     fontFamily: "PingFang SC",
   },
@@ -666,7 +667,7 @@ const styles = StyleSheet.create({
     margin: 0,
     marginLeft: 1,
     fontWeight: "500",
-    fontSize: 18,
+    fontSize: fontSize(18),
     lineHeight: 22,
     fontFamily: "PingFang SC",
     color: "#fe1e00",
@@ -703,7 +704,7 @@ const styles = StyleSheet.create({
     padding: 0,
     margin: 0,
     fontWeight: "500",
-    fontSize: 14,
+    fontSize: fontSize(14),
     fontFamily: "PingFang SC",
     color: "#807e7e",
   },
@@ -711,7 +712,7 @@ const styles = StyleSheet.create({
     padding: 0,
     margin: 0,
     fontWeight: "500",
-    fontSize: 14,
+    fontSize: fontSize(14),
     fontFamily: "PingFang SC",
     color: "#807e7e",
   },
@@ -741,7 +742,7 @@ const styles = StyleSheet.create({
     padding: 0,
     margin: 0,
     fontWeight: "500",
-    fontSize: 16,
+    fontSize: fontSize(16),
     lineHeight: 22,
     fontFamily: "PingFang SC",
     color: "black",
@@ -757,7 +758,7 @@ const styles = StyleSheet.create({
     justifyContent: "center",
     alignItems: "center",
     fontWeight: "600",
-    fontSize: 16,
+    fontSize: fontSize(16),
     lineHeight: 22,
     fontFamily: "PingFang SC",
     color: "white",
@@ -768,7 +769,7 @@ const styles = StyleSheet.create({
   buttonText: {
     color: "white",
     fontWeight: "600",
-    fontSize: 16,
+    fontSize: fontSize(16),
     lineHeight: 22,
     fontFamily: "PingFang SC",
   },
@@ -789,11 +790,11 @@ const styles = StyleSheet.create({
     marginTop: 2,
   },
   dropdownText: {
-    fontSize: 16,
+    fontSize: fontSize(16),
     color: "#333",
   },
   dropdownLabel: {
-    fontSize: 16,
+    fontSize: fontSize(16),
     color: "#333",
   },
   arrowIcon: {
@@ -813,14 +814,14 @@ const styles = StyleSheet.create({
     borderColor: "#dbdce0",
     borderRadius: 5,
     padding: 8,
-    fontSize: 16,
+    fontSize: fontSize(16),
   },
   phoneNumberError: {
     borderColor: "#fe1e00",
   },
   errorText: {
     color: "#fe1e00",
-    fontSize: 12,
+    fontSize: fontSize(12),
     marginTop: 4,
     fontFamily: "PingFang SC",
   },
@@ -834,12 +835,12 @@ const styles = StyleSheet.create({
     borderRadius: 5,
   },
   selectedCountryText: {
-    fontSize: 16,
+    fontSize: fontSize(16),
     color: "#333",
     fontFamily: "PingFang SC",
   },
   dropdownArrow: {
-    fontSize: 12,
+    fontSize: fontSize(12),
     color: "#646472",
     fontFamily: "PingFang SC",
   },
@@ -866,11 +867,11 @@ const styles = StyleSheet.create({
     padding: 15,
   },
   modalTitle: {
-    fontSize: 18,
+    fontSize: fontSize(18),
     fontWeight: "bold",
   },
   closeButton: {
-    fontSize: 16,
+    fontSize: fontSize(16),
     fontWeight: "bold",
     color: "#002fa7",
   },
@@ -888,11 +889,11 @@ const styles = StyleSheet.create({
     marginRight: 10,
   },
   countryItemText: {
-    fontSize: 16,
+    fontSize: fontSize(16),
     fontWeight: "500",
   },
   checkIcon: {
-    fontSize: 16,
+    fontSize: fontSize(16),
     fontWeight: "bold",
     color: "#002fa7",
     marginLeft: "auto",

app/screens/banner/InquiryScreen.tsx

@@ -559,11 +559,11 @@ export const InquiryScreen = () => {
                       }}
                     >
                       <Text
-                        style={{ color: "#006fe1", fontWeight: "bold", fontSize: 16 }}
+                        style={{ color: "#006fe1", fontWeight: "bold", fontSize: fontSize(16) }}
                       >
                         Devis en cours
                       </Text>
-                      <Text style={{ color: "#006fe1", fontSize: 14 }}>
+                      <Text style={{ color: "#006fe1", fontSize: fontSize(14) }}>
                         {inquiry.create_time || new Date().toLocaleString()}
                       </Text>
                     </View>
@@ -595,7 +595,7 @@ export const InquiryScreen = () => {
                         <Text
                           style={{
                             fontWeight: "bold",
-                            fontSize: 18,
+                            fontSize: fontSize(18),
                             marginBottom: 8,
                           }}
                         >
@@ -603,18 +603,18 @@ export const InquiryScreen = () => {
                         </Text>
                         <View style={{ flexDirection: "row", marginBottom: 8 }}>
                           <View>
-                            <Text style={{ color: "#888", fontSize: 14 }}>
+                            <Text style={{ color: "#888", fontSize: fontSize(14) }}>
                               Quantité
                             </Text>
-                            <Text style={{ fontSize: 16, fontWeight: "bold" }}>
+                            <Text style={{ fontSize: fontSize(16), fontWeight: "bold" }}>
                               {inquiry.quantity || "--"}
                             </Text>
                           </View>
                           <View style={{ marginLeft: 32 }}>
-                            <Text style={{ color: "#888", fontSize: 14 }}>
+                            <Text style={{ color: "#888", fontSize: fontSize(14) }}>
                               Matière
                             </Text>
-                            <Text style={{ fontSize: 16, fontWeight: "bold" }}>
+                            <Text style={{ fontSize: fontSize(16), fontWeight: "bold" }}>
                               {inquiry.material || "--"}
                             </Text>
                           </View>
@@ -627,11 +627,11 @@ export const InquiryScreen = () => {
                           }}
                         >
                           <Text
-                            style={{ color: "#888", fontSize: 14, marginRight: 8 }}
+                            style={{ color: "#888", fontSize: fontSize(14), marginRight: 8 }}
                           >
                             Lien
                           </Text>
-                          <Text style={{ flex: 1, fontSize: 14 }} numberOfLines={1}>
+                          <Text style={{ flex: 1, fontSize: fontSize(14) }} numberOfLines={1}>
                             {inquiry.link || "无"}
                           </Text>
                           <View style={{ flexDirection: "row", alignItems: "center", marginLeft: 8 }}>
@@ -643,11 +643,11 @@ export const InquiryScreen = () => {
                         </View>
                         <View style={{ flexDirection: "row", alignItems: "center" }}>
                           <Text
-                            style={{ color: "#888", fontSize: 14, marginRight: 8 }}
+                            style={{ color: "#888", fontSize: fontSize(14), marginRight: 8 }}
                           >
                             Remarque
                           </Text>
-                          <Text style={{ flex: 1, fontSize: 14 }} numberOfLines={1}>
+                          <Text style={{ flex: 1, fontSize: fontSize(14) }} numberOfLines={1}>
                             {inquiry.remark || "无"}
                           </Text>
                           <View style={{ flexDirection: "row", alignItems: "center", marginLeft: 8 }}>
@@ -719,11 +719,11 @@ export const InquiryScreen = () => {
                       }}
                     >
                       <Text
-                        style={{ color: "#006fe1", fontWeight: "bold", fontSize: 16 }}
+                        style={{ color: "#006fe1", fontWeight: "bold", fontSize: fontSize(16) }}
                       >
                         Devis terminé
                       </Text>
-                      <Text style={{ color: "#006fe1", fontSize: 14 }}>
+                      <Text style={{ color: "#006fe1", fontSize: fontSize(14) }}>
                         {inquiry.create_time || new Date().toLocaleString()}
                       </Text>
                     </View>
@@ -755,7 +755,7 @@ export const InquiryScreen = () => {
                         <Text
                           style={{
                             fontWeight: "bold",
-                            fontSize: 18,
+                            fontSize: fontSize(18),
                             marginBottom: 8,
                           }}
                         >
@@ -763,18 +763,18 @@ export const InquiryScreen = () => {
                         </Text>
                         <View style={{ flexDirection: "row", marginBottom: 8 }}>
                           <View>
-                            <Text style={{ color: "#888", fontSize: 14 }}>
+                            <Text style={{ color: "#888", fontSize: fontSize(14) }}>
                               Quantité
                             </Text>
-                            <Text style={{ fontSize: 16, fontWeight: "bold" }}>
+                            <Text style={{ fontSize: fontSize(16), fontWeight: "bold" }}>
                               {inquiry.quantity || "--"}
                             </Text>
                           </View>
                           <View style={{ marginLeft: 32 }}>
-                            <Text style={{ color: "#888", fontSize: 14 }}>
+                            <Text style={{ color: "#888", fontSize: fontSize(14) }}>
                               Matière
                             </Text>
-                            <Text style={{ fontSize: 16, fontWeight: "bold" }}>
+                            <Text style={{ fontSize: fontSize(16), fontWeight: "bold" }}>
                               {inquiry.material || "--"}
                             </Text>
                           </View>
@@ -787,11 +787,11 @@ export const InquiryScreen = () => {
                           }}
                         >
                           <Text
-                            style={{ color: "#888", fontSize: 14, marginRight: 8 }}
+                            style={{ color: "#888", fontSize: fontSize(14), marginRight: 8 }}
                           >
                             Lien
                           </Text>
-                          <Text style={{ flex: 1, fontSize: 14 }} numberOfLines={1}>
+                          <Text style={{ flex: 1, fontSize: fontSize(14) }} numberOfLines={1}>
                             {inquiry.link || "无"}
                           </Text>
                           <View style={{ flexDirection: "row", alignItems: "center", marginLeft: 8 }}>
@@ -803,11 +803,11 @@ export const InquiryScreen = () => {
                         </View>
                         <View style={{ flexDirection: "row", alignItems: "center" }}>
                           <Text
-                            style={{ color: "#888", fontSize: 14, marginRight: 8 }}
+                            style={{ color: "#888", fontSize: fontSize(14), marginRight: 8 }}
                           >
                             Remarque
                           </Text>
-                          <Text style={{ flex: 1, fontSize: 14 }} numberOfLines={1}>
+                          <Text style={{ flex: 1, fontSize: fontSize(14) }} numberOfLines={1}>
                             {inquiry.remark || "无"}
                           </Text>
                           <View style={{ flexDirection: "row", alignItems: "center", marginLeft: 8 }}>

app/screens/function/BrowseHistoryScreen.tsx

@@ -157,7 +157,7 @@ const styles = StyleSheet.create({
     marginBottom: 16,
   },
   dateText: {
-    fontSize: 16,
+    fontSize: fontSize(16),
     color: "#333",
   },
   list: {
@@ -186,25 +186,25 @@ const styles = StyleSheet.create({
     justifyContent: "space-between",
   },
   name: {
-    fontSize: 16,
+    fontSize: fontSize(16),
     fontWeight: "500",
     flex: 1,
   },
   price: {
-    fontSize: 14,
+    fontSize: fontSize(14),
     fontWeight: "bold",
     color: "#e60012",
     marginLeft: 8,
   },
   time: {
-    fontSize: 12,
+    fontSize: fontSize(12),
     color: "#888",
     marginTop: 4,
   },
   empty: {
     textAlign: "center",
     color: "#aaa",
-    fontSize: 15,
+    fontSize: fontSize(15),
     marginTop: 40,
   },
 });

app/screens/loginList/EmailLoginModal.tsx

@@ -10,7 +10,10 @@ import {
   Alert,
   Platform,
   Modal,
-  ActivityIndicator
+  ActivityIndicator,
+  KeyboardAvoidingView,
+  TouchableWithoutFeedback,
+  Image
 } from "react-native";
 import { useTranslation } from "react-i18next";
 import { useNavigation } from "@react-navigation/native";
@@ -20,6 +23,8 @@ import { settingApi } from "../../services/api/setting";
 import useUserStore from "../../store/user";
 import type { NativeStackNavigationProp } from "@react-navigation/native-stack";
 import { ForgotEmailPassword } from "./ForgotEmailPassword";
+import BackIcon from "../../components/BackIcon";
+import fontSize from "../../utils/fontsizeUtils";
 
 // Common email domains list
 const EMAIL_DOMAINS = [
@@ -255,7 +260,7 @@ const EmailLoginModal = ({ visible, onClose }: EmailLoginModalProps) => {
                   onPress={focusEmailInput}
                   activeOpacity={0.7}
                 >
-                  <Text style={{fontSize: 16, color: '#0066FF'}}>⌨️</Text>
+                  <Text style={{fontSize: fontSize(16), color: '#0066FF'}}>⌨️</Text>
                 </TouchableOpacity>
               )}
             </View>
@@ -311,7 +316,7 @@ const EmailLoginModal = ({ visible, onClose }: EmailLoginModalProps) => {
                   onPress={focusPasswordInput}
                   activeOpacity={0.7}
                 >
-                  <Text style={{fontSize: 16, color: '#0066FF'}}>⌨️</Text>
+                  <Text style={{fontSize: fontSize(16), color: '#0066FF'}}>⌨️</Text>
                 </TouchableOpacity>
               )}
             </View>
@@ -402,12 +407,12 @@ const styles = StyleSheet.create({
     alignItems: "center",
   },
   emailLoginCloseButtonText: {
-    fontSize: 18,
+    fontSize: fontSize(18),
     color: "#000",
   },
   emailLoginTitle: {
     flex: 1,
-    fontSize: 18,
+    fontSize: fontSize(18),
     fontWeight: "600",
     color: "#000",
     textAlign: "center",
@@ -431,7 +436,7 @@ const styles = StyleSheet.create({
     flex: 1,
     height: "100%",
     paddingHorizontal: 16,
-    fontSize: 16,
+    fontSize: fontSize(16),
     paddingRight: 36,
   },
   emailClearButton: {
@@ -445,7 +450,7 @@ const styles = StyleSheet.create({
     alignItems: "center",
   },
   emailClearButtonText: {
-    fontSize: 16,
+    fontSize: fontSize(16),
     color: "#999",
     fontWeight: "500",
     textAlign: "center",
@@ -469,7 +474,7 @@ const styles = StyleSheet.create({
     borderBottomColor: "#F0F0F0",
   },
   suggestionText: {
-    fontSize: 16,
+    fontSize: fontSize(16),
     color: "#333",
   },
   passwordContainer: {
@@ -486,7 +491,7 @@ const styles = StyleSheet.create({
     flex: 1,
     height: "100%",
     paddingHorizontal: 16,
-    fontSize: 16,
+    fontSize: fontSize(16),
   },
   passwordErrorContainer: {
     borderColor: "#FF3B30",
@@ -506,12 +511,12 @@ const styles = StyleSheet.create({
   passwordErrorIconText: {
     color: "white",
     fontWeight: "bold",
-    fontSize: 16,
+    fontSize: fontSize(16),
   },
   passwordErrorText: {
     color: "#FF3B30",
-    fontSize: 14,
+    fontSize: fontSize(14), 
-    marginTop: -12,
+    marginTop: -12, 
     marginBottom: 16,
     paddingHorizontal: 5,
   },
@@ -521,7 +526,7 @@ const styles = StyleSheet.create({
   },
   forgotPasswordLinkText: {
     color: "#0066FF",
-    fontSize: 14,
+    fontSize: fontSize(14),
   },
   emailContinueButton: {
     height: 50,
@@ -536,7 +541,7 @@ const styles = StyleSheet.create({
   },
   emailContinueButtonText: {
     color: "#fff",
-    fontSize: 16,
+    fontSize: fontSize(16),
     fontWeight: "600",
   },
 });

app/screens/loginList/ForgotEmailPassword.tsx

@@ -8,10 +8,15 @@ import {
   Modal,
   ActivityIndicator,
   Platform,
+  KeyboardAvoidingView,
+  TouchableWithoutFeedback,
+  Keyboard,
+  Alert,
 } from "react-native";
 import { useTranslation } from "react-i18next";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import { VerificationCodeInput } from "./VerificationCodeInput";
+import fontSize from "../../utils/fontsizeUtils";
 
 type ForgotEmailPasswordProps = {
   visible?: boolean;
@@ -290,12 +295,12 @@ const styles = StyleSheet.create({
     alignItems: "center",
   },
   forgotPasswordCloseButtonText: {
-    fontSize: 18,
+    fontSize: fontSize(18),
     color: "#000",
   },
   forgotPasswordTitle: {
     flex: 1,
-    fontSize: 18,
+    fontSize: fontSize(18),
     fontWeight: "600",
     color: "#000",
     textAlign: "center",
@@ -306,7 +311,7 @@ const styles = StyleSheet.create({
     paddingBottom: Platform.OS === "ios" ? 50 : 30,
   },
   forgotPasswordDescription: {
-    fontSize: 14,
+    fontSize: fontSize(14),
     color: "#333",
     marginBottom: 20,
     lineHeight: 20,
@@ -325,7 +330,7 @@ const styles = StyleSheet.create({
     flex: 1,
     height: "100%",
     paddingHorizontal: 16,
-    fontSize: 16,
+    fontSize: fontSize(16),
     paddingRight: 36,
   },
   emailClearButton: {
@@ -339,21 +344,21 @@ const styles = StyleSheet.create({
     alignItems: "center",
   },
   emailClearButtonText: {
-    fontSize: 16,
+    fontSize: fontSize(16),
     color: "#999",
     fontWeight: "500",
     textAlign: "center",
   },
   emailErrorText: {
     color: "#FF3B30",
-    fontSize: 14,
+    fontSize: fontSize(14),
     marginTop: -12,
     marginBottom: 16,
     paddingHorizontal: 5,
   },
   errorText: {
     color: "#FF3B30",
-    fontSize: 14,
+    fontSize: fontSize(14),
     marginTop: -12,
     marginBottom: 16,
     paddingHorizontal: 5,
@@ -371,7 +376,7 @@ const styles = StyleSheet.create({
   },
   submitButtonText: {
     color: "#fff",
-    fontSize: 16,
+    fontSize: fontSize(16),
     fontWeight: "600",
   },
 }); 

app/screens/loginList/ForgotPhonePassword.tsx

@@ -9,12 +9,17 @@ import {
   ActivityIndicator,
   Platform,
   FlatList,
+  TouchableWithoutFeedback,
+  Keyboard,
+  KeyboardAvoidingView,
+  Image,
 } from "react-native";
 import { useTranslation } from "react-i18next";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import { CountryList } from "../../constants/countries";
 import { settingApi } from "../../services/api/setting";
 import { VerificationCodeInput } from "./VerificationCodeInput";
+import fontSize from "../../utils/fontsizeUtils";
 
 type ForgotPhonePasswordProps = {
   visible?: boolean;
@@ -513,12 +518,12 @@ const styles = StyleSheet.create({
     alignItems: "center",
   },
   forgotPasswordCloseButtonText: {
-    fontSize: 18,
+    fontSize: fontSize(18),
     color: "#000",
   },
   forgotPasswordTitle: {
     flex: 1,
-    fontSize: 18,
+    fontSize: fontSize(18),
     fontWeight: "600",
     color: "#000",
     textAlign: "center",
@@ -529,7 +534,7 @@ const styles = StyleSheet.create({
     paddingBottom: Platform.OS === "ios" ? 50 : 30,
   },
   forgotPasswordDescription: {
-    fontSize: 14,
+    fontSize: fontSize(14),
     color: "#333",
     marginBottom: 20,
     lineHeight: 20,
@@ -553,11 +558,11 @@ const styles = StyleSheet.create({
     justifyContent: "space-between",
   },
   countryCodeText: {
-    fontSize: 15,
+    fontSize: fontSize(15),
     color: "#333",
   },
   countryCodeArrow: {
-    fontSize: 10,
+    fontSize: fontSize(10),
     color: "#666",
     marginLeft: 4,
   },
@@ -571,7 +576,7 @@ const styles = StyleSheet.create({
     height: "100%",
     paddingLeft: 10,
     paddingRight: 36,
-    fontSize: 16,
+    fontSize: fontSize(16),
   },
   phoneClearButton: {
     position: "absolute",
@@ -584,21 +589,21 @@ const styles = StyleSheet.create({
     alignItems: "center",
   },
   phoneClearButtonText: {
-    fontSize: 16,
+    fontSize: fontSize(16),
     color: "#999",
     fontWeight: "500",
     textAlign: "center",
   },
   phoneNumberErrorText: {
     color: "#FF3B30",
-    fontSize: 14,
+    fontSize: fontSize(14),
     marginTop: -12,
     marginBottom: 16,
     paddingHorizontal: 5,
   },
   errorText: {
     color: "#FF3B30",
-    fontSize: 14,
+    fontSize: fontSize(14),
     marginTop: -12,
     marginBottom: 16,
     paddingHorizontal: 5,
@@ -616,7 +621,7 @@ const styles = StyleSheet.create({
   },
   submitButtonText: {
     color: "#fff",
-    fontSize: 16,
+    fontSize: fontSize(16),
     fontWeight: "600",
   },
   // Country modal styles
@@ -665,12 +670,12 @@ const styles = StyleSheet.create({
     padding: 4,
   },
   countryModalCloseButtonText: {
-    fontSize: 18,
+    fontSize: fontSize(18),
     color: "#999",
   },
   countryModalTitle: {
     flex: 1,
-    fontSize: 18,
+    fontSize: fontSize(18),
     fontWeight: "600",
     textAlign: "center",
     marginRight: 24,
@@ -691,18 +696,18 @@ const styles = StyleSheet.create({
     alignItems: "center",
   },
   countryName: {
-    fontSize: 16,
+    fontSize: fontSize(16),
     color: "#333",
     marginLeft: 10,
   },
   countryCode: {
-    fontSize: 15,
+    fontSize: fontSize(15),
     color: "#666",
     width: 40,
     textAlign: "center",
   },
   checkmark: {
-    fontSize: 20,
+    fontSize: fontSize(20),
     color: "#0066FF",
     fontWeight: "bold",
     marginRight: 10,
@@ -724,14 +729,14 @@ const styles = StyleSheet.create({
     position: "relative",
   },
   searchIcon: {
-    fontSize: 16,
+    fontSize: fontSize(16),
     marginRight: 8,
     color: "#999",
   },
   searchInput: {
     flex: 1,
     height: "100%",
-    fontSize: 15,
+    fontSize: fontSize(15),
     color: "#333",
     paddingRight: 30,
   },
@@ -744,7 +749,7 @@ const styles = StyleSheet.create({
     alignItems: "center",
   },
   searchClearButtonText: {
-    fontSize: 14,
+    fontSize: fontSize(14),
     color: "#999",
     fontWeight: "500",
   },
@@ -753,7 +758,7 @@ const styles = StyleSheet.create({
     alignItems: "center",
   },
   emptyResultText: {
-    fontSize: 16,
+    fontSize: fontSize(16),
     color: "#999",
     textAlign: "center",
   },

app/screens/loginList/PhoneLoginModal.tsx

@@ -28,6 +28,7 @@ import type { NativeStackNavigationProp } from "@react-navigation/native-stack";
 import {ForgotPhonePassword} from "./ForgotPhonePassword";
 import useBurialPointStore from "../../store/burialPoint";
 import {getBurialPointData} from "../../store/burialPoint";
+import fontSize from "../../utils/fontsizeUtils";
 
 type RootStackParamList = {
   Login: undefined;
@@ -343,7 +344,7 @@ const PhoneLoginModal = ({ visible, onClose }: PhoneLoginModalProps) => {
                   onPress={focusPhoneInput}
                   activeOpacity={0.7}
                 >
-                  <Text style={{fontSize: 16, color: '#0066FF'}}>⌨️</Text>
+                  <Text style={{fontSize: fontSize(16), color: '#0066FF'}}>⌨️</Text>
                 </TouchableOpacity>
               )}
             </View>
@@ -519,12 +520,12 @@ const styles = StyleSheet.create<Styles>({
     alignItems: "center",
   },
   phoneLoginCloseButtonText: {
-    fontSize: 18,
+    fontSize: fontSize(18),
     color: "#000",
   },
   phoneLoginTitle: {
     flex: 1,
-    fontSize: 18,
+    fontSize: fontSize(18),
     fontWeight: "600",
     color: "#000",
     textAlign: "center",
@@ -563,7 +564,7 @@ const styles = StyleSheet.create<Styles>({
     flex: 1,
   },
   countryFlag: {
-    fontSize: 22,
+    fontSize: fontSize(22),
     marginRight: 12,
   },
   flag: {
@@ -572,20 +573,20 @@ const styles = StyleSheet.create<Styles>({
     marginRight: 16,
   },
   countryName: {
-    fontSize: 16,
+    fontSize: fontSize(16),
     color: "#333",
     marginRight: 10,
     flex: 1,
   },
   countryCode: {
-    fontSize: 15,
+    fontSize: fontSize(15),
     color: "#666",
     marginRight: 10,
     width: 40,
     textAlign: "center",
   },
   downArrow: {
-    fontSize: 12,
+    fontSize: fontSize(12),
     color: "#666",
   },
   countryCodeButton: {
@@ -602,11 +603,11 @@ const styles = StyleSheet.create<Styles>({
     marginRight: 4,
   },
   countryCodeText: {
-    fontSize: 15,
+    fontSize: fontSize(15),
     color: "#333",
   },
   countryCodeArrow: {
-    fontSize: 10,
+    fontSize: fontSize(10),
     color: "#666",
     marginLeft: 2,
   },
@@ -620,7 +621,7 @@ const styles = StyleSheet.create<Styles>({
     height: "100%",
     paddingLeft: 10,
     paddingRight: 36,
-    fontSize: 16,
+    fontSize: fontSize(16),
   },
   phoneClearButton: {
     position: "absolute",
@@ -633,13 +634,13 @@ const styles = StyleSheet.create<Styles>({
     alignItems: "center",
   },
   phoneClearButtonText: {
-    fontSize: 16,
+    fontSize: fontSize(16),
     color: "#999",
     fontWeight: "500",
     textAlign: "center",
   },
   phoneInfoText: {
-    fontSize: 14,
+    fontSize: fontSize(14),
     color: "#666",
     marginBottom: 32,
     lineHeight: 20,
@@ -656,13 +657,13 @@ const styles = StyleSheet.create<Styles>({
   },
   phoneContinueButtonText: {
     color: "#fff",
-    fontSize: 16,
+    fontSize: fontSize(16),
     fontWeight: "600",
   },
   // Phone number error
   phoneNumberErrorText: {
     color: "#FF3B30",
-    fontSize: 14,
+    fontSize: fontSize(14),
     marginTop: -12,
     marginBottom: 16,
     paddingHorizontal: 5,
@@ -672,7 +673,7 @@ const styles = StyleSheet.create<Styles>({
     flex: 1,
     height: "100%",
     paddingHorizontal: 16,
-    fontSize: 16,
+    fontSize: fontSize(16),
   },
   passwordErrorContainer: {
     borderColor: "#FF3B30",
@@ -692,11 +693,11 @@ const styles = StyleSheet.create<Styles>({
   passwordErrorIconText: {
     color: "white",
     fontWeight: "bold",
-    fontSize: 16,
+    fontSize: fontSize(16),
   },
   passwordErrorText: {
     color: "#FF3B30",
-    fontSize: 14,
+    fontSize: fontSize(14),
     marginTop: -12,
     marginBottom: 16,
     paddingHorizontal: 5,
@@ -707,7 +708,7 @@ const styles = StyleSheet.create<Styles>({
   },
   forgotPasswordLinkText: {
     color: "#0066FF",
-    fontSize: 14,
+    fontSize: fontSize(14),
   },
   // Country modal styles
   countryModalContainer: {
@@ -755,12 +756,12 @@ const styles = StyleSheet.create<Styles>({
     padding: 4,
   },
   countryModalCloseButtonText: {
-    fontSize: 18,
+    fontSize: fontSize(18),
     color: "#999",
   },
   countryModalTitle: {
     flex: 1,
-    fontSize: 18,
+    fontSize: fontSize(18),
     fontWeight: "600",
     textAlign: "center",
     marginRight: 24,
@@ -776,7 +777,7 @@ const styles = StyleSheet.create<Styles>({
     borderBottomColor: "#F0F0F0",
   },
   countryItemFlag: {
-    fontSize: 24,
+    fontSize: fontSize(24),
     marginRight: 16,
   },
   countryItemContent: {
@@ -785,11 +786,11 @@ const styles = StyleSheet.create<Styles>({
     alignItems: "center",
   },
   countryItemName: {
-    fontSize: 16,
+    fontSize: fontSize(16),
     color: "#333",
   },
   countryItemCode: {
-    fontSize: 14,
+    fontSize: fontSize(14),
     color: "#666",
     marginTop: 4,
   },
@@ -800,7 +801,7 @@ const styles = StyleSheet.create<Styles>({
     zIndex: 999,
   },
   checkmark: {
-    fontSize: 20,
+    fontSize: fontSize(20),
     color: "#0066FF",
     fontWeight: "bold",
     marginRight: 10,

app/screens/loginList/ResetPasswordModal.tsx

@@ -8,8 +8,10 @@ import {
   Modal,
   ActivityIndicator,
   Platform,
+  KeyboardAvoidingView,
 } from "react-native";
 import { useTranslation } from "react-i18next";
+import fontSize from "../../utils/fontsizeUtils";
 
 type ResetPasswordModalProps = {
   visible: boolean;
@@ -196,12 +198,12 @@ const styles = StyleSheet.create({
     alignItems: "center",
   },
   closeButtonText: {
-    fontSize: 18,
+    fontSize: fontSize(18),
     color: "#000",
   },
   headerTitle: {
     flex: 1,
-    fontSize: 18,
+    fontSize: fontSize(18),
     fontWeight: "600",
     color: "#000",
     textAlign: "center",
@@ -221,14 +223,14 @@ const styles = StyleSheet.create({
     borderColor: "#E1E1E1",
     borderRadius: 25,
     paddingHorizontal: 16,
-    fontSize: 16,
+    fontSize: fontSize(16),
   },
   inputError: {
     borderColor: "#FF3B30",
   },
   errorText: {
     color: "#FF3B30",
-    fontSize: 14,
+    fontSize: fontSize(14),
     marginTop: 5,
     paddingHorizontal: 5,
   },
@@ -242,7 +244,7 @@ const styles = StyleSheet.create({
   },
   submitButtonText: {
     color: "#fff",
-    fontSize: 16,
+    fontSize: fontSize(16),
     fontWeight: "600",
   },
 }); 

app/screens/loginList/VerificationCodeInput.tsx

@@ -10,9 +10,12 @@ import {
   Platform,
   Keyboard,
   TouchableWithoutFeedback,
+  KeyboardAvoidingView,
+  SafeAreaView,
 } from "react-native";
 import { useTranslation } from "react-i18next";
 import { ResetPasswordModal } from "./ResetPasswordModal";
+import fontSize from "../../utils/fontsizeUtils";
 
 type VerificationCodeInputProps = {
   visible: boolean;
@@ -316,12 +319,12 @@ const styles = StyleSheet.create({
     alignItems: "center",
   },
   closeButtonText: {
-    fontSize: 18,
+    fontSize: fontSize(18),
     color: "#000",
   },
   headerTitle: {
     flex: 1,
-    fontSize: 18,
+    fontSize: fontSize(18),
     fontWeight: "600",
     color: "#000",
     textAlign: "center",
@@ -332,7 +335,7 @@ const styles = StyleSheet.create({
     paddingBottom: Platform.OS === "ios" ? 50 : 30,
   },
   description: {
-    fontSize: 14,
+    fontSize: fontSize(14),
     color: "#333",
     marginBottom: 20,
     lineHeight: 20,
@@ -359,7 +362,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   codeInputText: {
-    fontSize: 24,
+    fontSize: fontSize(24),
     fontWeight: "500",
   },
   codeInputError: {
@@ -384,12 +387,12 @@ const styles = StyleSheet.create({
   },
   errorIcon: {
     color: "white",
-    fontSize: 14,
+    fontSize: fontSize(14),
     fontWeight: "bold",
   },
   errorText: {
     color: "#FF3B30",
-    fontSize: 14,
+    fontSize: fontSize(14),
   },
   resendContainer: {
     alignItems: "flex-end",
@@ -403,7 +406,7 @@ const styles = StyleSheet.create({
   },
   resendText: {
     color: "#0066FF",
-    fontSize: 14,
+    fontSize: fontSize(14),
     fontWeight: "500",
   },
   resendTextDisabled: {
@@ -416,7 +419,7 @@ const styles = StyleSheet.create({
     marginTop: 20,
   },
   helpTitle: {
-    fontSize: 16,
+    fontSize: fontSize(16),
     fontWeight: "600",
     marginBottom: 10,
     color: "#333",
@@ -434,7 +437,7 @@ const styles = StyleSheet.create({
     marginRight: 10,
   },
   helpText: {
-    fontSize: 14,
+    fontSize: fontSize(14),
     color: "#333",
     flex: 1,
   },

app/screens/loginList/index.tsx

@@ -14,6 +14,7 @@ import {
 import { useTranslation } from "react-i18next";
 import { useNavigation } from "@react-navigation/native";
 import type { NativeStackNavigationProp } from "@react-navigation/native-stack";
+import fontSize from "../../utils/fontsizeUtils";
 
 import EmailLoginModal from "./EmailLoginModal";
 import PhoneLoginModal from "./PhoneLoginModal";
@@ -299,7 +300,7 @@ const styles = StyleSheet.create({
   },
   closeButtonText: {
     color: "#000",
-    fontSize: 24,
+    fontSize: fontSize(24),
     fontWeight: "300",
   },
   blueHeader: {
@@ -311,7 +312,7 @@ const styles = StyleSheet.create({
     borderBottomRightRadius: 24,
   },
   logo: {
-    fontSize: 28,
+    fontSize: fontSize(28),
     fontWeight: "bold",
     color: "#fff",
     marginBottom: 15,
@@ -334,10 +335,10 @@ const styles = StyleSheet.create({
     alignItems: "center",
   },
   featureIcon: {
-    fontSize: 12,
+    fontSize: fontSize(12),
   },
   featureText: {
-    fontSize: 14,
+    fontSize: fontSize(14),
     color: "#fff",
   },
   loginContainer: {
@@ -352,7 +353,7 @@ const styles = StyleSheet.create({
     position: "relative",
   },
   subtitle: {
-    fontSize: 14,
+    fontSize: fontSize(14),
     color: "#666",
     textAlign: "center",
   },
@@ -386,7 +387,7 @@ const styles = StyleSheet.create({
   },
   loginButtonText: {
     flex: 1,
-    fontSize: 16,
+    fontSize: fontSize(16),
     color: "#000",
     textAlign: "center",
     marginRight: 16,
@@ -397,14 +398,14 @@ const styles = StyleSheet.create({
   },
   forgotPasswordText: {
     color: "#0066FF",
-    fontSize: 14,
+    fontSize: fontSize(14),
   },
   termsContainer: {
     alignItems: "center",
     marginTop: 10,
   },
   terms: {
-    fontSize: 12,
+    fontSize: fontSize(12),
     color: "#666",
     textAlign: "center",
     lineHeight: 18,

app/screens/pay/PayError.tsx

@@ -11,6 +11,7 @@ import { Ionicons } from "@expo/vector-icons";
 import { useNavigation } from "@react-navigation/native";
 import type { NativeStackNavigationProp } from "@react-navigation/native-stack";
 import { RootStackParamList } from "../../navigation/types";
+import fontSize from "../../utils/fontsizeUtils"; 
 
 export const PayError = () => {
   const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
@@ -109,12 +110,12 @@ const styles = StyleSheet.create({
     marginBottom: 10,
   },
   headerErrorTextTitle: {
-    fontSize: 22,
+    fontSize: fontSize(22),
     color: "#E53935",
     fontWeight: "bold",
   },
   errorMessage: {
-    fontSize: 14,
+    fontSize: fontSize(14),
     color: "#666",
     textAlign: "center",
     marginBottom: 10,
@@ -136,12 +137,12 @@ const styles = StyleSheet.create({
     borderBottomColor: "#FECACA",
   },
   errorDetailItemLabel: {
-    fontSize: 14,
+    fontSize: fontSize(14),
     color: "#666",
     fontWeight: "500",
   },
   errorDetailItemValue: {
-    fontSize: 14,
+    fontSize: fontSize(14),
     color: "#333",
     fontWeight: "500",
   },
@@ -150,7 +151,7 @@ const styles = StyleSheet.create({
     alignItems: "center",
   },
   supportText: {
-    fontSize: 13,
+    fontSize: fontSize(13),
     color: "#666",
   },
   buttonContainer: {
@@ -171,7 +172,7 @@ const styles = StyleSheet.create({
     backgroundColor: "#666",
   },
   buttonText: {
-    fontSize: 16,
+    fontSize: fontSize(16),
     color: "white",
     fontWeight: "500",
   },

app/screens/pay/PaySuccess.tsx

@@ -7,6 +7,7 @@ import {
   StyleSheet,
   ScrollView,
 } from "react-native";
+import fontSize from "../../utils/fontsizeUtils";
 
 // import { useRoute, RouteProp } from "@react-navigation/native";
 // import { RootStackParamList } from "../../navigation/types";
@@ -179,23 +180,23 @@ const styles = StyleSheet.create({
     alignSelf: "center",
   },
   headerSuccessText: {
-    fontSize: 20,
+    fontSize: fontSize(20),
     color: "#000000",
     alignSelf: "center",
     marginTop: 10,
   },
   headerSuccessTextTitle: {
-    fontSize: 16,
+    fontSize: fontSize(16),
     color: "#000000",
     alignSelf: "center",
   },
   headerPriceText: {
-    fontSize: 20,
+    fontSize: fontSize(20),
     color: "#000000",
     alignSelf: "center",
   },
   headerPriceTextTitle: {
-    fontSize: 20,
+    fontSize: fontSize(20),
     color: "#000000",
     alignSelf: "center",
     marginTop: 10,
@@ -211,28 +212,28 @@ const styles = StyleSheet.create({
   },
   headerSuccessInfoItem: {
     flexDirection: "row",
-    fontSize: 16,
+    fontSize: fontSize(16),
     color: "#0046bf",
     fontWeight: "600",
     alignItems: "center",
   },
   headerSuccessInfoItem1: {
     flexDirection: "row",
-    fontSize: 16,
+    fontSize: fontSize(16),
     color: "#0046bf",
     fontWeight: "600",
     alignItems: "center",
     marginTop: 5,
   },
   headerSuccessInfoItemText: {
-    fontSize: 16,
+    fontSize: fontSize(16),
     color: "#0046bf",
     width: "20%",
     fontWeight: "600",
     alignItems: "center",
   },
   headerSuccessInfoItemText1: {
-    fontSize: 16,
+    fontSize: fontSize(16),
     color: "#0046bf",
     marginLeft: 10,
     fontWeight: "600",
@@ -259,14 +260,14 @@ const styles = StyleSheet.create({
     alignItems: "center",
   },
   buttonText: {
-    fontSize: 16,
+    fontSize: fontSize(16),
     color: "white",
   },
   recommend: {
     padding: 20,
   },
   footerItemText1: {
-    fontSize: 16,
+    fontSize: fontSize(16),
     color: "#000000",
     fontWeight: "600",
     marginBottom: 15,
@@ -297,13 +298,13 @@ const styles = StyleSheet.create({
     borderRadius: 4,
   },
   productName: {
-    fontSize: 14,
+    fontSize: fontSize(14),
     color: "#333",
     marginTop: 5,
     marginBottom: 5,
   },
   productPrice: {
-    fontSize: 16,
+    fontSize: fontSize(16),
     color: "#E53935",
     fontWeight: "bold",
   },

app/screens/previewOrder/PaymentMethod.tsx

@@ -542,7 +542,15 @@ export const PaymentMethod = () => {
     <SafeAreaView style={styles.safeArea}>
       <StatusBar barStyle="dark-content" backgroundColor="#fff" />
       <View style={styles.safeAreaContent}>
-      <View style={styles.container}>
+        <View style={styles.titleContainer}>
+          <View style={styles.backIconContainer}>
+            <TouchableOpacity onPress={() => navigation.goBack()}>
+              <BackIcon size={20} />
+            </TouchableOpacity>
+          </View>
+          <Text style={styles.titleHeading}>{t("payment.select_payment")}</Text>
+        </View>
+        <View style={styles.container}>
         {loading ? (
           <View style={styles.loadingContainer}>
             <ActivityIndicator size="large" color="#ff6000" />
@@ -828,8 +836,8 @@ export const PaymentMethod = () => {
           </TouchableOpacity>
         </View>
       </View>
-      </View>
+    </View>
-    </SafeAreaView>
+  </SafeAreaView>
   );
 };
 
@@ -969,7 +977,7 @@ const styles = StyleSheet.create({
   },
   titleHeading: {
     fontWeight: "600",
-    fontSize: 20,
+    fontSize: fontSize(18),
     lineHeight: 22,
     fontFamily: "PingFang SC",
     color: "black",
@@ -1128,7 +1136,7 @@ const styles = StyleSheet.create({
     justifyContent: "center",
     alignItems: "center",
     fontWeight: "600",
-    fontSize: 16,
+    fontSize: fontSize(16),
     lineHeight: 22,
     fontFamily: "PingFang SC",
     color: "white",
@@ -1139,7 +1147,7 @@ const styles = StyleSheet.create({
   buttonText: {
     color: "white",
     fontWeight: "600",
-    fontSize: 16,
+    fontSize: fontSize(16),
     lineHeight: 22,
     fontFamily: "PingFang SC",
   },
@@ -1147,7 +1155,7 @@ const styles = StyleSheet.create({
     padding: 0,
     margin: 0,
     fontWeight: "500",
-    fontSize: 16,
+    fontSize: fontSize(16),
     lineHeight: 22,
     fontFamily: "PingFang SC",
     color: "#646472",

app/screens/previewOrder/PreviewAddress.tsx

@@ -30,6 +30,7 @@ import useCreateOrderStore  from "../../store/createOrder";
 import useBurialPointStore from "../../store/burialPoint";
 import {getBurialPointData} from "../../store/burialPoint";
 import { useTranslation } from "react-i18next";
+import fontSize from "../../utils/fontsizeUtils";
 
 type RootStackParamList = {
   AddRess: { address?: AddressItem; cart_item_id?: number | string };
@@ -576,7 +577,7 @@ const styles = StyleSheet.create({
   },
   titleHeading: {
     fontWeight: "600",
-    fontSize: 20,
+    fontSize: fontSize(20),
     lineHeight: 22,
     fontFamily: "PingFang SC",
     color: "black",
@@ -593,7 +594,7 @@ const styles = StyleSheet.create({
     padding: 0,
     margin: 0,
     fontWeight: "500",
-    fontSize: 18,
+    fontSize: fontSize(18),
     lineHeight: 22,
     fontFamily: "PingFang SC",
     color: "black",
@@ -602,7 +603,7 @@ const styles = StyleSheet.create({
     padding: 0,
     margin: 0,
     fontWeight: "500",
-    fontSize: 18,
+    fontSize: fontSize(18),
     lineHeight: 22,
     fontFamily: "PingFang SC",
     color: "#ff731e",
@@ -631,7 +632,7 @@ const styles = StyleSheet.create({
     padding: 0,
     margin: 0,
     fontWeight: "500",
-    fontSize: 12,
+    fontSize: fontSize(12),
     fontFamily: "PingFang SC",
     color: "#646472",
   },
@@ -640,7 +641,7 @@ const styles = StyleSheet.create({
     margin: 0,
     marginLeft: 1,
     fontWeight: "500",
-    fontSize: 18,
+    fontSize: fontSize(18),
     lineHeight: 22,
     fontFamily: "PingFang SC",
     color: "#fe1e00",
@@ -650,7 +651,7 @@ const styles = StyleSheet.create({
     margin: 0,
     marginTop: -2,
     fontWeight: "400",
-    fontSize: 16,
+    fontSize: fontSize(16),
     lineHeight: 22,
     fontFamily: "PingFang SC",
     color: "#807e7e",
@@ -660,7 +661,7 @@ const styles = StyleSheet.create({
     margin: 0,
     marginTop: -2,
     fontWeight: "400",
-    fontSize: 16,
+    fontSize: fontSize(16),
     lineHeight: 22,
     fontFamily: "PingFang SC",
     color: "#807e7e",
@@ -693,7 +694,7 @@ const styles = StyleSheet.create({
     fontSize: 12,
   },
   checkboxLabel: {
-    fontSize: 14,
+    fontSize: fontSize(14),
     color: "#646472",
     fontFamily: "PingFang SC",
   },
@@ -723,7 +724,7 @@ const styles = StyleSheet.create({
     margin: 0,
     marginLeft: 1,
     fontWeight: "500",
-    fontSize: 18,
+    fontSize: fontSize(18),
     lineHeight: 22,
     fontFamily: "PingFang SC",
     color: "#fe1e00",
@@ -760,7 +761,7 @@ const styles = StyleSheet.create({
     padding: 0,
     margin: 0,
     fontWeight: "500",
-    fontSize: 14,
+    fontSize: fontSize(14),
     fontFamily: "PingFang SC",
     color: "#807e7e",
   },
@@ -768,7 +769,7 @@ const styles = StyleSheet.create({
     padding: 0,
     margin: 0,
     fontWeight: "500",
-    fontSize: 14,
+    fontSize: fontSize(14),
     fontFamily: "PingFang SC",
     color: "#807e7e",
   },
@@ -798,7 +799,7 @@ const styles = StyleSheet.create({
     padding: 0,
     margin: 0,
     fontWeight: "500",
-    fontSize: 16,
+    fontSize: fontSize(16),
     lineHeight: 22,
     fontFamily: "PingFang SC",
     color: "black",
@@ -814,7 +815,7 @@ const styles = StyleSheet.create({
     justifyContent: "center",
     alignItems: "center",
     fontWeight: "600",
-    fontSize: 16,
+    fontSize: fontSize(16),
     lineHeight: 22,
     fontFamily: "PingFang SC",
     color: "white",
@@ -825,7 +826,7 @@ const styles = StyleSheet.create({
   buttonText: {
     color: "white",
     fontWeight: "600",
-    fontSize: 16,
+    fontSize: fontSize(16),
     lineHeight: 22,
     fontFamily: "PingFang SC",
   },
@@ -833,7 +834,7 @@ const styles = StyleSheet.create({
     padding: 0,
     margin: 0,
     fontWeight: "500",
-    fontSize: 16,
+    fontSize: fontSize(16) ,
     lineHeight: 22,
     fontFamily: "PingFang SC",
     color: "#646472",
@@ -862,14 +863,14 @@ const styles = StyleSheet.create({
   },
   modalTitle: {
     fontWeight: "600",
-    fontSize: 18,
+    fontSize: fontSize(18),
     lineHeight: 22,
     fontFamily: "PingFang SC",
     color: "black",
   },
   closeButton: {
     fontWeight: "500",
-    fontSize: 16,
+    fontSize: fontSize(16),
     lineHeight: 22,
     fontFamily: "PingFang SC",
     color: "#ff731e",
@@ -883,13 +884,13 @@ const styles = StyleSheet.create({
     alignItems: "center",
   },
   countryItemText: {
-    fontSize: 16,
+    fontSize: fontSize(16),
     color: "#333",
     flex: 1,
   },
   errorText: {
     color: "#fe1e00",
-    fontSize: 12,
+    fontSize: fontSize(12),
     marginTop: 4,
     fontFamily: "PingFang SC",
   },
@@ -905,7 +906,7 @@ const styles = StyleSheet.create({
   },
   placeholderStyle: {
     color: "#807e7e",
-    fontSize: 16,
+    fontSize: fontSize(16),
   },
   flagImage: {
     width: 24,
@@ -913,7 +914,7 @@ const styles = StyleSheet.create({
     marginRight: 10,
   },
   dropdownArrow: {
-    fontSize: 12,
+    fontSize: fontSize(12),
     color: "#807e7e",
   },
   flatList: {
@@ -925,7 +926,7 @@ const styles = StyleSheet.create({
   },
   checkIcon: {
     color: "#002fa7",
-    fontSize: 18,
+    fontSize: fontSize(18),
     fontWeight: "bold",
   },
 });

app/screens/previewOrder/ShippingFee.tsx

@@ -712,7 +712,7 @@ const styles = StyleSheet.create({
   },
   titleHeading: {
     fontWeight: "600",
-    fontSize: 20,
+    fontSize: fontSize(20),
     lineHeight: 22,
     fontFamily: "PingFang SC",
     color: "black",
@@ -728,7 +728,7 @@ const styles = StyleSheet.create({
     justifyContent: "center",
     alignItems: "center",
     fontWeight: "600",
-    fontSize: 16,
+    fontSize: fontSize(16),
     lineHeight: 22,
     fontFamily: "PingFang SC",
     color: "white",
@@ -739,7 +739,7 @@ const styles = StyleSheet.create({
   buttonText: {
     color: "white",
     fontWeight: "600",
-    fontSize: 16,
+    fontSize: fontSize(16),
     lineHeight: 22,
     fontFamily: "PingFang SC",
   },
@@ -747,7 +747,7 @@ const styles = StyleSheet.create({
     padding: 0,
     margin: 0,
     fontWeight: "500",
-    fontSize: 16,
+    fontSize: fontSize(16),
     lineHeight: 22,
     fontFamily: "PingFang SC",
     color: "#646472",

app/screens/previewOrder/perviewOrder.tsx

@@ -21,6 +21,7 @@ import useUserStore from "../../store/user";
 import { Order } from "../../services/api/orders";
 import { payApi } from "../../services/api/payApi";
 import { useTranslation } from "react-i18next";
+import fontSize from "../../utils/fontsizeUtils";
 
 // Define the param list for navigation
 type RootStackParamList = {
@@ -253,7 +254,7 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   mainContent: {
-    padding: 16,
+    padding: 15,
   },
   submitButtonContainer: {
     paddingHorizontal: 16,
@@ -278,7 +279,7 @@ const styles = StyleSheet.create({
   buttonText: {
     color: "white",
     fontWeight: "600",
-    fontSize: 16,
+    fontSize: fontSize(16),
     fontFamily: "PingFang SC",
   },
   disabledButtonStyle: {
@@ -287,7 +288,7 @@ const styles = StyleSheet.create({
   },
   titleContainer: {
     width: "100%",
-    padding: 16,
+    padding: 15,
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "center",
@@ -298,80 +299,77 @@ const styles = StyleSheet.create({
   },
   backIconContainer: {
     position: "absolute",
-    left: 16,
+    left: 15,
+    backgroundColor: "#fff",
   },
   titleHeading: {
     fontWeight: "600",
-    fontSize: 18,
+    fontSize: fontSize(16),
-    color: "#333",
+    lineHeight: 22,
     fontFamily: "PingFang SC",
+    color: "black",
   },
   section: {
+    marginBottom: 20,
     backgroundColor: "#fff",
-    borderRadius: 12,
+    borderRadius: 8,
-    padding: 16,
+    padding: 15,
-    marginBottom: 16,
     shadowColor: "#000",
-    shadowOffset: { width: 0, height: 1 },
+    shadowOffset: {
-    shadowOpacity: 0.05,
+      width: 0,
-    shadowRadius: 2,
+      height: 1,
-    elevation: 2,
+    },
+    shadowOpacity: 0.22,
+    shadowRadius: 2.22,
+    elevation: 3,
   },
   sectionTitle: {
-    fontSize: 17,
+    fontSize: fontSize(18),
     fontWeight: "600",
-    color: "#333",
+    marginBottom: 15,
-    marginBottom: 16,
+    color: "#000",
-    fontFamily: "PingFang SC",
   },
   paymentMethodContainer: {
-    backgroundColor: "#f8f8f8",
+    marginTop: 5,
-    padding: 12,
-    borderRadius: 8,
-    borderLeftWidth: 4,
-    borderLeftColor: "#002fa7",
   },
   paymentMethodText: {
-    fontSize: 15,
+    fontSize: fontSize(17),
-    color: "#333",
+    color: "#FF6000",
-    fontFamily: "PingFang SC",
+    fontWeight: "500",
   },
   phoneInputContainer: {
-    marginTop: 16,
+    marginTop: 15,
   },
   phoneInputLabel: {
-    fontSize: 15,
+    fontSize: fontSize(15),
-    color: "#666",
+    marginBottom: 5,
-    marginBottom: 8,
+    color: "#333",
-    fontFamily: "PingFang SC",
   },
   phoneInput: {
     borderWidth: 1,
     borderColor: "#ddd",
-    borderRadius: 8,
+    borderRadius: 5,
-    padding: 12,
+    padding: 10,
-    fontSize: 15,
+    fontSize: fontSize(15),
-    backgroundColor: "#fff",
-    fontFamily: "PingFang SC",
   },
   infoRow: {
     flexDirection: "row",
     justifyContent: "space-between",
-    paddingVertical: 12,
+    marginBottom: 10,
+    paddingBottom: 10,
     borderBottomWidth: 1,
     borderBottomColor: "#f0f0f0",
   },
   infoLabel: {
-    fontSize: 15,
+    fontSize: fontSize(15),
     color: "#666",
-    fontFamily: "PingFang SC",
+    flex: 1,
   },
   infoValue: {
-    fontSize: 15,
+    fontSize: fontSize(15),
     color: "#333",
+    flex: 2,
     textAlign: "right",
-    maxWidth: "60%",
-    fontFamily: "PingFang SC",
   },
   totalRow: {
     flexDirection: "row",
@@ -380,13 +378,13 @@ const styles = StyleSheet.create({
     paddingVertical: 12,
   },
   totalLabel: {
-    fontSize: 16,
+    fontSize: fontSize(16),
     fontWeight: "600",
     color: "#333",
     fontFamily: "PingFang SC",
   },
   totalValue: {
-    fontSize: 20,
+    fontSize: fontSize(20),
     fontWeight: "700",
     color: "#002fa7",
     fontFamily: "PingFang SC",