last fixes, home and videos

src/components/modal/CoinPackModal.js

@@ -1,7 +1,6 @@
 import React from "react";
 import {
   ActivityIndicator,
-  Image,
   Linking,
   Modal,
   Pressable,
@@ -11,7 +10,6 @@ import {
   View,
 } from "react-native";
 import { BlurView } from "expo-blur";
-import { icons } from "../../assets";
 import BorderGradientButton from "../BorderGradientButton";
 import GradientButton from "../GradientButton";
 import CreateLyricsHeader from "../../screens/Writing/components/CreateLyricsHeader";
@@ -19,6 +17,7 @@ import { Palette, gutters } from "../../styles";
 import { FONT_FAMILY } from "../../styles/Fonts";
 import { getFunctionsClient } from "../../config/firebase";
 import { isWeb } from "../../hooks/useLayoutType";
+import CreditAmount from "../CreditAmount";
 
 const WEB_MODAL_MAX_WIDTH = 1000;
 const FUNCTIONS_REGION = "europe-west1";
@@ -73,10 +72,12 @@ function CoinPackCard({ pack, selected, onSelect }) {
     >
       <BlurView intensity={20} tint="dark" style={styles.cardBlur}>
         <View style={styles.cardHeader}>
-          <View style={styles.coinRow}>
-            <Image source={icons.coin} style={styles.coinIcon} />
-            <Text style={styles.coinAmount}>{pack?.coinAmount} pièces</Text>
-          </View>
+          <CreditAmount
+            value={pack?.coinAmount}
+            style={styles.coinRow}
+            textStyle={styles.coinAmount}
+            iconSize={26}
+          />
           {pack?.name ? <Text style={styles.packName}>{pack.name}</Text> : null}
         </View>
         {pack?.description ? (
@@ -395,11 +396,6 @@ const styles = StyleSheet.create({
     alignItems: "center",
     gap: 10,
   },
-  coinIcon: {
-    width: 26,
-    height: 26,
-    resizeMode: "contain",
-  },
   coinAmount: {
     fontFamily: FONT_FAMILY.InterBold,
     fontSize: 20,