clear more ticket, sub and design

src/components/modal/CoinPackModal.js

@@ -18,7 +18,7 @@ import { isWeb } from "../../hooks/useLayoutType";
 import CreditAmount from "../CreditAmount";
 import { useStripe } from "../../providers/StripeProvider";
 
-const WEB_MODAL_MAX_WIDTH = 1000;
+const WEB_MODAL_MAX_WIDTH = 820;
 const formatCurrency = (amount, currency = "eur") => {
   if (typeof amount !== "number") {
     return null;
@@ -229,14 +229,6 @@ function CoinPackCard({
           ) : null}
           {pack?.name ? <Text style={styles.packName}>{pack.name}</Text> : null}
         </View>
-        <View style={styles.perksList}>
-          <Text style={styles.perkItem}>
-            - Diffusion sur mes plates formes de streaming
-          </Text>
-          <Text style={styles.perkItem}>
-            *Eligible au Hit parade Chanson/Video
-          </Text>
-        </View>
         <View style={styles.priceBlock}>
           {formattedPrice ? (
             <Text style={styles.packPrice}>{formattedPrice}</Text>
@@ -388,6 +380,9 @@ const CoinPackModal = ({ visible, onClose }) => {
             width: "100%",
             maxWidth: modalMaxWidth,
             alignSelf: "center",
+            borderWidth: isWeb ? 1 : 0,
+            borderColor: "rgba(255,255,255,0.16)",
+            backgroundColor: isWeb ? "rgba(12, 10, 18, 0.85)" : undefined,
           }}
         >
           <View style={styles.container}>
@@ -452,6 +447,7 @@ const styles = StyleSheet.create({
     gap: 24,
     alignItems: "center",
     paddingBottom: gutters,
+    paddingHorizontal: isWeb ? gutters * 1.5 : 0,
     width: "100%",
     maxWidth: isWeb ? WEB_MODAL_MAX_WIDTH : undefined,
   },
@@ -503,7 +499,7 @@ const styles = StyleSheet.create({
     maxWidth: isWeb ? WEB_MODAL_MAX_WIDTH : "100%",
     alignSelf: "center",
     gap: gutters,
-    paddingHorizontal: isWeb ? 8 : 0,
+    paddingHorizontal: isWeb ? gutters * 1.5 : 0,
   },
   packListWeb: {
     flexDirection: "row",
@@ -567,16 +563,6 @@ const styles = StyleSheet.create({
     color: "rgba(255, 255, 255, 0.72)",
     textAlign: "center",
   },
-  perksList: {
-    gap: 6,
-    alignItems: "center",
-  },
-  perkItem: {
-    fontFamily: FONT_FAMILY.InterRegular,
-    fontSize: 13,
-    color: "rgba(255, 255, 255, 0.72)",
-    textAlign: "center",
-  },
   priceBlock: {
     gap: 2,
     alignItems: "center",