decoupled the card variants stuffs. specific file to check and write all…

src/themes/Theme.tsx

 import { createTheme } from "@shopify/restyle";
-import { Dimensions } from "react-native";
+import { cardVariants } from "./variants/cardVariants";
 
 const palette = {
 	purpleLight: "#8C6FF7",
@@ -106,47 +106,7 @@ const theme = createTheme({
 			color: "softYellow",
 		},
 	},
-	cardVariants: {
-		defaults: {
-			// We can define defaults for the variant here.
-			// This will be applied after the defaults passed to createVariant and before the variant defined below.
-		},
-		regular: {
-			// We can refer to other values in the theme here, and use responsive props
-			padding: {
-				phone: "s",
-				tablet: "m",
-			},
-		},
-		elevated: {
-			padding: {
-				phone: "s",
-				tablet: "m",
-			},
-			shadowColor: "black",
-			shadowOpacity: 0.5,
-			shadowOffset: { width: 10, height: 10 },
-			shadowRadius: 10,
-			elevation: 5,
-		},
-		modal: {
-			width: 300,
-			// height: 200,
-			backgroundColor: "white",
-			alignItems: "center",
-			justifyContent: "center",
-			alignSelf: "center",
-			top: Dimensions.get("window").height / 2 - 150,
-			position: "absolute",
-			zIndex: 10,
-			borderRadius: 15,
-			gap: "m",
-			shadowColor: "black",
-			shadowOffset: { width: 0, height: 0 },
-			shadowOpacity: 0.5,
-			p: "m",
-		},
-	},
+	cardVariants,
 	buttonVariants: {
 		defaults: {
 			// We can define defaults for the variant here.

src/themes/Variants.tsx

@@ -3,13 +3,6 @@ import type { Theme } from "@themes/Theme";
 
 export const cardVariants = createVariant<Theme, "cardVariants">({
 	themeKey: "cardVariants",
-	defaults: {
-		margin: {
-			phone: "s",
-			tablet: "m",
-		},
-		backgroundColor: "white",
-	},
 });
 
 export const buttonVariants = createVariant<Theme, "buttonVariants">({

src/themes/variants/cardVariants.ts

+import { Dimensions } from "react-native";
+
+export const cardVariants = {
+	defaults: {
+		// margin: {
+		// 	phone: "s",
+		// 	tablet: "m",
+		// },
+		// backgroundColor: "red",
+	},
+	regular: {
+		padding: {
+			phone: "s",
+			tablet: "m",
+		},
+	},
+	elevated: {
+		padding: {
+			phone: "s",
+			tablet: "m",
+		},
+		shadowColor: "black",
+		shadowOpacity: 0.5,
+		shadowOffset: { width: 10, height: 10 },
+		shadowRadius: 10,
+		elevation: 5,
+	},
+
+	modal: {
+		width: 300,
+		// height: 200,
+		backgroundColor: "white",
+		alignItems: "center",
+		justifyContent: "center",
+		alignSelf: "center",
+		top: Dimensions.get("window").height / 2 - 150,
+		position: "absolute",
+		zIndex: 10,
+		borderRadius: 15,
+		gap: "m",
+		shadowColor: "black",
+		shadowOffset: { width: 0, height: 0 },
+		shadowOpacity: 0.5,
+		p: "m",
+	},
+	curvedTopContainer: {
+		width: "100%",
+		height: Dimensions.get("window").height / 2,
+		backgroundColor: "white",
+		borderTopLeftRadius: 20,
+		borderTopRightRadius: 20,
+		margin: 0,
+	},
+};