From ffaf8a6246e896626d40eb98ca2dc07f94dcefb0 Mon Sep 17 00:00:00 2001
From: G <idouattara@ldfgroupe.com>
Date: Thu, 25 Apr 2024 20:06:19 +0000
Subject: [PATCH] fix the odd rounding, use square image and overflow hidden combine with gap from parent

---
 assets/operators/moov_money.png            | Bin 9433 -> 0 bytes
 assets/operators/mtn_money.png             | Bin 5926 -> 0 bytes
 assets/operators/orange_money.png          | Bin 2170 -> 0 bytes
 assets/operators/visa_card.png             | Bin 2574 -> 0 bytes
 assets/operators/wave_money.png            | Bin 4573 -> 0 bytes
 src/components/PaymentOption.tsx           | 33 ++++++++++++++++++++-------------
 src/screens/HomePageWithPaymentOptions.tsx |  7 ++++++-
 7 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/assets/operators/moov_money.png b/assets/operators/moov_money.png
index 90e4bd2..6b11bb9 100644
Binary files a/assets/operators/moov_money.png and b/assets/operators/moov_money.png differ
diff --git a/assets/operators/mtn_money.png b/assets/operators/mtn_money.png
index d499f03..e1f1d5e 100644
Binary files a/assets/operators/mtn_money.png and b/assets/operators/mtn_money.png differ
diff --git a/assets/operators/orange_money.png b/assets/operators/orange_money.png
index 9780791..2054852 100644
Binary files a/assets/operators/orange_money.png and b/assets/operators/orange_money.png differ
diff --git a/assets/operators/visa_card.png b/assets/operators/visa_card.png
index 8ff8978..e5fa54a 100644
Binary files a/assets/operators/visa_card.png and b/assets/operators/visa_card.png differ
diff --git a/assets/operators/wave_money.png b/assets/operators/wave_money.png
index 32908b3..4f2fc73 100644
Binary files a/assets/operators/wave_money.png and b/assets/operators/wave_money.png differ
diff --git a/src/components/PaymentOption.tsx b/src/components/PaymentOption.tsx
index 890e7d5..468ecc6 100644
--- a/src/components/PaymentOption.tsx
+++ b/src/components/PaymentOption.tsx
@@ -19,12 +19,30 @@ type Props = {
 
 const PaymentOptionContainer = ({ children }: { children: React.ReactNode }) => {
 	return (
-		<Box height={50} p={"s"} style={{ width: "100%", height: "100%" }} overflow={"hidden"}>
+		<Box
+			height={50}
+			// p={"s"}
+			style={{ width: "100%", height: "100%" }}
+			overflow={"hidden"}
+			backgroundColor={"yellow"}
+			borderRadius={30}
+		>
 			{children}
 		</Box>
 	);
 };
 
+const OrangeMoney = () => {
+	return (
+		<PaymentOptionContainer>
+			<Image
+				source={require("../../assets/operators/orange_money.png")}
+				style={images.cover}
+			/>
+		</PaymentOptionContainer>
+	);
+};
+
 const MtnMoney = () => {
 	return (
 		<PaymentOptionContainer>
@@ -59,7 +77,7 @@ const VisaCard = () => {
 
 const PaymentOption = ({ onPress, paymentMethod }: Props) => {
 	return (
-		<TouchableOpacity style={{ width: "50%", height: "26%" }} onPress={onPress}>
+		<TouchableOpacity style={{ width: "48%", height: "26%" }} onPress={onPress}>
 			{paymentMethod === "OrangeMoney" && <OrangeMoney />}
 			{paymentMethod === "MtnMoney" && <MtnMoney />}
 			{paymentMethod === "MoovMoney" && <MoovMoney />}
@@ -69,15 +87,4 @@ const PaymentOption = ({ onPress, paymentMethod }: Props) => {
 	);
 };
 
-const OrangeMoney = () => {
-	return (
-		<Box height={50} p={"s"} style={{ width: "100%", height: "100%" }} overflow={"hidden"}>
-			<Image
-				source={require("../../assets/operators/orange_money.png")}
-				style={images.cover}
-			/>
-		</Box>
-	);
-};
-
 export default PaymentOption;
diff --git a/src/screens/HomePageWithPaymentOptions.tsx b/src/screens/HomePageWithPaymentOptions.tsx
index 2d6bf6c..995f7e5 100644
--- a/src/screens/HomePageWithPaymentOptions.tsx
+++ b/src/screens/HomePageWithPaymentOptions.tsx
@@ -30,7 +30,12 @@ const HomePageWithPaymentOptions = () => {
 								Méthode de paiement
 							</Text>
 						</Box>
-						<Box flexDirection={"row"} style={{ flexWrap: "wrap" }}>
+						<Box
+							flexDirection={"row"}
+							style={{ flexWrap: "wrap" }}
+							gap={"s"}
+							justifyContent={"space-between"}
+						>
 							{/* Payment Modes */}
 							<PaymentOption onPress={() => {}} paymentMethod={"OrangeMoney"} />
 							<PaymentOption onPress={() => {}} paymentMethod={"MtnMoney"} />
--
libgit2 0.27.1