a common AmountWrapper component for all

src/components/TransactionInformationsItem.tsx

@@ -51,30 +51,12 @@ const TransactionInformationsItem = ({ paymentType, reference, date, amount, sta
 
 const AmountColorRenderer = ({ status, amount }: { status: string; amount: number }) => {
 	if (status === "SUCCESS") {
-		return (
-			<AmountWrapper color="secondary">
-				<Text variant={"white"} fontWeight={"bold"}>
-					{amount}
-				</Text>
-			</AmountWrapper>
-		);
+		return <AmountWrapper color="secondary">{amount}</AmountWrapper>;
 	}
 	if (status === "INITIATED") {
-		return (
-			<AmountWrapper color="softYellow">
-				<Text variant={"white"} fontWeight={"bold"}>
-					{amount}
-				</Text>
-			</AmountWrapper>
-		);
+		return <AmountWrapper color="softYellow">{amount}</AmountWrapper>;
 	}
-	return (
-		<AmountWrapper color="softRed">
-			<Text variant={"white"} fontWeight={"bold"}>
-				{amount}
-			</Text>
-		</AmountWrapper>
-	);
+	return <AmountWrapper color="softRed">{amount}</AmountWrapper>;
 };
 
 const AmountWrapper = ({
@@ -82,8 +64,10 @@ const AmountWrapper = ({
 	children,
 }: { color: "secondary" | "softYellow" | "softRed"; children: React.ReactNode }) => {
 	return (
-		<Box backgroundColor={color} px={"m"} py={"xs"} borderRadius={10}>
-			{children}
+		<Box backgroundColor={color} px={"m"} py={"xs"} borderRadius={7}>
+			<Text variant={"white"} fontWeight={"bold"}>
+				{children} F
+			</Text>
 		</Box>
 	);
 };