style it a little better with shadow and amount wrapped by color

src/components/TransactionInformationsItem.tsx

@@ -16,37 +16,33 @@ interface Props {
 moment.locale("fr");
 
 const TransactionInformationsItem = ({ paymentType, reference, date, amount, status }: Props) => {
-	// date = new Date(date);
 	const dateObject = Date.parse(date);
 	return (
 		<Box
-			// height={60}
 			width={"100%"}
 			py={"s"}
-			pr={"m"}
-			pl={"s"}
+			px={"s"}
 			flexDirection={"row"}
-			// alignItems={"center"}
 			gap={"s"}
-			borderWidth={1}
 			borderRadius={10}
 			borderColor={"lightGray"}
+			shadowColor={"black"}
+			shadowOffset={{ width: 0, height: 0 }}
+			shadowOpacity={0.5}
+			backgroundColor={"white"}
+			justifyContent={"space-between"}
 		>
-			<Box width={50} height={50} borderRadius={10} overflow={"hidden"}>
-				{/* <Image
-					source={require("../../assets/operators/orange_money.png")}
-					style={images.cover}
-				/> */}
-				<PaymentOption paymentMethod={paymentType} onPress={() => {}} />
+			<Box flexDirection={"row"} flex={1} gap={"s"}>
+				<Box width={50} height={50} borderRadius={10} overflow={"hidden"}>
+					<PaymentOption paymentMethod={paymentType} onPress={() => {}} />
+				</Box>
+				<Box height={50} flex={1}>
+					<Text variant={"black"}>{reference}</Text>
+					<Text>{moment(dateObject).fromNow()}</Text>
+				</Box>
 			</Box>
-			<Box height={50} flex={1}>
-				<Text variant={"black"}>{reference}</Text>
-				<Text>{moment(dateObject).fromNow()}</Text>
-			</Box>
-			<Box style={{ marginLeft: "auto" }} height={50}>
-				{/* <Text variant={"softYellow"} fontWeight={"bold"}>
-					{amount}
-				</Text> */}
+
+			<Box height={50}>
 				<AmountColorRenderer status={status} amount={amount} />
 			</Box>
 		</Box>
@@ -56,22 +52,39 @@ const TransactionInformationsItem = ({ paymentType, reference, date, amount, sta
 const AmountColorRenderer = ({ status, amount }: { status: string; amount: number }) => {
 	if (status === "SUCCESS") {
 		return (
-			<Text variant={"secondary"} fontWeight={"bold"}>
-				{amount}
-			</Text>
+			<AmountWrapper color="secondary">
+				<Text variant={"white"} fontWeight={"bold"}>
+					{amount}
+				</Text>
+			</AmountWrapper>
 		);
 	}
 	if (status === "INITIATED") {
 		return (
-			<Text variant={"softYellow"} fontWeight={"bold"}>
-				{amount}
-			</Text>
+			<AmountWrapper color="softYellow">
+				<Text variant={"white"} fontWeight={"bold"}>
+					{amount}
+				</Text>
+			</AmountWrapper>
 		);
 	}
 	return (
-		<Text variant={"softRed"} fontWeight={"bold"}>
-			{amount}
-		</Text>
+		<AmountWrapper color="softRed">
+			<Text variant={"white"} fontWeight={"bold"}>
+				{amount}
+			</Text>
+		</AmountWrapper>
+	);
+};
+
+const AmountWrapper = ({
+	color,
+	children,
+}: { color: "secondary" | "softYellow" | "softRed"; children: React.ReactNode }) => {
+	return (
+		<Box backgroundColor={color} px={"m"} py={"xs"} borderRadius={10}>
+			{children}
+		</Box>
 	);
 };