fix the odd rounding, use square image and overflow hidden combine with gap from parent

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;

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"} />