renamed again since i'll need a folder named wrapper

src/components/backgrounds/BackgroundWithBeasyIconAndWhiteContentArea.tsx

@@ -4,7 +4,7 @@ import WrapperTopEdgeCurved from "@components/WrapperTopEdgeCurved";
 import Box from "@components/bases/Box";
 import { useNavigation } from "@react-navigation/native";
 import type { ReactElement } from "react";
-import BackgroundDefault from "./BeasyDefaultBackgroundWrapper";
+import BackgroundDefault from "./BeasyDefaultBackground";
 
 const BackgroundWithBeasyIconAndWhiteContentArea = ({
 	children,

src/components/backgrounds/BeasyDefaultBackgroundWrapper.tsx → src/components/backgrounds/BeasyDefaultBackground.tsx

@@ -3,15 +3,12 @@ import { ImageBackground } from "react-native";
 
 type Props = { children: React.ReactNode };
 
-const BackgroundDefault = ({ children }: Props) => {
+const BeasyDefaultBackground = ({ children }: Props) => {
 	return (
-		<ImageBackground
-			source={require("../../../assets/background.png")}
-			style={images.background}
-		>
+		<ImageBackground source={require("../../../assets/background.png")} style={images.cover}>
 			{children}
 		</ImageBackground>
 	);
 };
 
-export default BackgroundDefault;
+export default BeasyDefaultBackground;

src/screens/HomePageWithPaymentOptions.tsx

 import type { PaymentStackScreenComponentProps } from "@/navigations/Types";
 import getPaymentTypes from "@/utils/requests/getPaymentTypes";
-import BalanceContainer from "@components/BalanceContainer";
-import BeasyLogoIcon from "@components/BeasyLogoIcon";
-import NotificationIconButton from "@components/NotificationIconButton";
-import PaymentOption from "@components/PaymentOption";
-import BackgroundGreenWhiteContentArea from "@components/backgrounds/BackgroundGreenWhiteContentArea";
+import BarWithBeasyAndNotificationsIcon from "@components/BarWithBeasyAndNotificationsIcon";
 import Box from "@components/bases/Box";
-import Text from "@components/bases/Text";
 import { LOG } from "@logger";
 import { useQuery } from "@tanstack/react-query";
 import { useMemo } from "react";
@@ -37,28 +32,21 @@ const HomePageWithPaymentOptions: PaymentStackScreenComponentProps<"homePageWith
 		);
 
 		return (
-			<BackgroundGreenWhiteContentArea>
-				<SafeAreaView>
-					<Box style={{ height: "100%" }}>
-						<Box
-							px={"l"}
-							flexDirection={"row"}
-							justifyContent={"space-between"}
-							alignItems={"center"}
-						>
-							<BeasyLogoIcon />
-							<NotificationIconButton />
-						</Box>
-						<Box height={150} alignItems={"center"} justifyContent={"center"}>
+			// <BeasyDefaultBackgroundWrapper>
+			<SafeAreaView>
+				<Box style={{ height: "100%" }}>
+					<BarWithBeasyAndNotificationsIcon />
+					{/* <Box height={150} alignItems={"center"} justifyContent={"center"}>
 							<BalanceContainer balance={78000} label="Total des ventes" />
-						</Box>
-						<Box flex={1} p={"l"}>
+						</Box> */}
+
+					{/* <Box flex={1} p={"l"}>
 							<Box height={100}>
 								<Text fontSize={20} fontWeight={"bold"}>
 									Types de paiement
 								</Text>
 							</Box>
-							{/* <Box flexDirection={"row"} justifyContent={"space-between"} mb={"s"}> */}
+
 							<Box
 								flex={1}
 								flexDirection={"row"}
@@ -91,10 +79,10 @@ const HomePageWithPaymentOptions: PaymentStackScreenComponentProps<"homePageWith
 										</PaymentOptionContainer>
 									))}
 							</Box>
-						</Box>
-					</Box>
-				</SafeAreaView>
-			</BackgroundGreenWhiteContentArea>
+						</Box> */}
+				</Box>
+			</SafeAreaView>
+			// </BeasyDefaultBackgroundWrapper>
 		);
 	};
 

src/screens/PaymentAmountInputScreen.tsx

@@ -5,7 +5,7 @@ import Button from "@components/Button";
 import GoBackIconButton from "@components/GoBackIconButton";
 import InputWithTopLabel from "@components/InputWithTopLabel";
 import PaymentOption from "@components/PaymentOption";
-import BeasyDefaultBackgroundWrapper from "@components/backgrounds/BeasyDefaultBackgroundWrapper";
+import BeasyDefaultBackgroundWrapper from "@components/backgrounds/BeasyDefaultBackground";
 import Box from "@components/bases/Box";
 import Text from "@components/bases/Text";
 import useOrangeMoney from "@hooks/useOrangeMoney";

src/screens/PaymentResultScreen.tsx

@@ -2,7 +2,7 @@ import type { MainStackScreenComponentProps } from "@/navigations/Types";
 import BeasyLogoIcon from "@components/BeasyLogoIcon";
 import Button from "@components/Button";
 import GoBackIconButton from "@components/GoBackIconButton";
-import BeasyDefaultBackgroundWrapper from "@components/backgrounds/BeasyDefaultBackgroundWrapper";
+import BeasyDefaultBackgroundWrapper from "@components/backgrounds/BeasyDefaultBackground";
 import Box from "@components/bases/Box";
 import Text from "@components/bases/Text";
 import CheckIcon from "@components/icons/CheckIcon";

src/screens/UserLoginScreen.tsx

@@ -3,7 +3,7 @@ import type { MainStackScreenComponentProps } from "@/navigations/Types";
 import Button from "@components/Button";
 import ContainerBorderTopCurved from "@components/ContainerBorderTopCurved";
 import InputWithTopLabel from "@components/InputWithTopLabel";
-import BeasyDefaultBackgroundWrapper from "@components/backgrounds/BeasyDefaultBackgroundWrapper";
+import BeasyDefaultBackgroundWrapper from "@components/backgrounds/BeasyDefaultBackground";
 import Box from "@components/bases/Box";
 import Text from "@components/bases/Text";
 import { Fontisto } from "@expo/vector-icons";