restyle a little bit around the use of cardvariant, dimensions and background

src/screens/HomePageWithPaymentOptions.tsx

 import type { PaymentStackScreenComponentProps } from "@/navigations/Types";
 import getPaymentTypes from "@/utils/requests/getPaymentTypes";
+import BalanceContainer from "@components/BalanceContainer";
 import BarWithBeasyAndNotificationsIcon from "@components/BarWithBeasyAndNotificationsIcon";
 import PaymentOption from "@components/PaymentOption";
 import Box from "@components/bases/Box";
@@ -35,59 +36,62 @@ const HomePageWithPaymentOptions: PaymentStackScreenComponentProps<"homePageWith
 		);
 
 		return (
-			// <BeasyDefaultBackgroundWrapper>
 			<WrapperWithDefaultBeasyBackgroundAndSafeAreaTopLeftRight>
 				<Box style={{ height: "100%" }} flexDirection={"column"}>
 					<BarWithBeasyAndNotificationsIcon />
 					<Card
 						variant={"curvedTopContainer"}
 						height={Dimensions.get("window").height / 2 + 150}
-						// marginTop={"auto"}
 						style={{ marginTop: "auto" }}
 						padding={"l"}
 					>
-						<Box height={100}>
-							<Text fontSize={20} fontWeight={"bold"}>
-								Types de paiement
-							</Text>
-						</Box>
+						<Box position={"relative"} top={-120}>
+							<Box alignSelf={"center"}>
+								<BalanceContainer balance={78000} label="Total des ventes" />
+							</Box>
+
+							<Box marginVertical={"l"}>
+								<Text fontSize={20} fontWeight={"bold"}>
+									Types de paiement
+								</Text>
+							</Box>
 
-						<Box
-							flex={1}
-							flexDirection={"row"}
-							justifyContent={"space-between"}
-							flexWrap={"wrap"}
-							rowGap={"m"}
-						>
-							{isLoading && (
-								<Box flex={1}>
-									<Text textAlign={"center"}>
-										Chargement des méthodes de paiement...
-									</Text>
-								</Box>
-							)}
-							{!isLoading &&
-								!error &&
-								paymentTypesWithActiveStatus.map((paymentType) => (
-									<PaymentOptionContainer key={paymentType.id}>
-										<PaymentOption
-											onPress={() =>
-												navigation.navigate("paymentAmountInputScreen", {
-													paymentType: paymentType.code,
-												})
-											}
-											paymentMethod={paymentType.code}
-										/>
-									</PaymentOptionContainer>
-								))}
+							<Box
+								flex={1}
+								flexDirection={"row"}
+								justifyContent={"space-between"}
+								flexWrap={"wrap"}
+								rowGap={"m"}
+							>
+								{isLoading && (
+									<Box flex={1}>
+										<Text textAlign={"center"}>
+											Chargement des méthodes de paiement...
+										</Text>
+									</Box>
+								)}
+								{!isLoading &&
+									!error &&
+									paymentTypesWithActiveStatus.map((paymentType) => (
+										<PaymentOptionContainer key={paymentType.id}>
+											<PaymentOption
+												onPress={() =>
+													navigation.navigate(
+														"paymentAmountInputScreen",
+														{
+															paymentType: paymentType.code,
+														},
+													)
+												}
+												paymentMethod={paymentType.code}
+											/>
+										</PaymentOptionContainer>
+									))}
+							</Box>
 						</Box>
 					</Card>
-					{/* <Box height={150} alignItems={"center"} justifyContent={"center"}>
-							<BalanceContainer balance={78000} label="Total des ventes" />
-						</Box> */}
 				</Box>
 			</WrapperWithDefaultBeasyBackgroundAndSafeAreaTopLeftRight>
-			// </BeasyDefaultBackgroundWrapper>
 		);
 	};