feat: fixes

src/screens/cover/ChooseCoverType.js

@@ -1,12 +1,13 @@
 import { BlurView } from 'expo-blur'
 import * as ImagePicker from 'expo-image-picker'
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
-import { Modal, Platform, Pressable, StyleSheet, Text, View } from 'react-native'
+import { Modal, Platform, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native'
 import useMinuit from 'react-native-minuit/src/hooks/useMinuit'
 import BorderGradientButton from '../../components/BorderGradientButton'
 import GradientButton from '../../components/GradientButton'
 import { Input } from '../../components/Input'
 import MusicLandHeader from '../../components/MusicLandHeader'
+import MusiclandPlaybackCover from '../../components/MusiclandPlaybackCover'
 import firebase, { projectsRef, usersRef } from '../../config/firebase'
 import { uploadFileToFirebase } from '../../helpers/uploadToFirebase'
 import Page from '../../layouts/Page'
@@ -319,35 +320,39 @@ export const ChooseCoverType = () => {
   return (
     <Page backgroundImg={background.studioBG2} backgroundColor={'#2A2E33'} headerType="NONE">
       <MusicLandHeader onPressBack={goBack} progress={9} />
-      <View style={{ flex: 1, position: 'relative', justifyContent: 'flex-end' }}>
+      <ScrollView contentContainerStyle={styles.content}>
-        <View
-          style={{
-            paddingBottom: gutters * 2,
-            paddingHorizontal: gutters,
-            gap: 12,
-          }}
-        >
           <View style={styles.coverInstructions}>
             <Text style={styles.coverTitle}>Personnalise ta pochette</Text>
             <Text style={styles.coverDescription}>
-              Choisis une photo ou une image de ta galerie pour illustrer ta chanson au centre de
+              Ton morceau est choisi ! Crée maintenant la pochette qui l’accompagnera dans
-              la pochette MusicLand.
+              MusicLand. Ta photo ou l’image de ton choix apparaîtra au centre du modèle ci-dessous.
             </Text>
+          </View>
+          <View style={styles.previewContainer}>
+            <MusiclandPlaybackCover
+              artistName={selectedProject?.userName || currentUserData?.userName || 'MusicLand'}
+              profilePictureURL={
+                selectedProject?.coverCenterImageURL || currentUserData?.profilePictureURL || null
+              }
+              style={styles.coverPreview}
+            />
+            <Text style={styles.previewCaption}>Aperçu de ta pochette</Text>
+          </View>
+          <View style={styles.coverInstructions}>
             <Text style={styles.coverDescription}>
-              Tu peux aussi appuyer sur « Voir ma pochette » pour découvrir le modèle proposé.
+              Choisis une image dans ta galerie pour la personnaliser, ou conserve le visuel
-              Tu pourras ensuite valider ta pochette à l’étape suivante.
+              proposé. Tu pourras vérifier puis valider ta pochette à l’étape suivante.
             </Text>
           </View>
           <BorderGradientButton
-            title="Choisir l’image centrale"
+            title="Choisir une image pour ma pochette"
             onPress={handlePickCenterImage}
           />
           <GradientButton
-            title="Voir ma pochette"
+            title="Continuer avec cette pochette"
             onPress={handleShowCover}
           />
-        </View>
+      </ScrollView>
-      </View>
       <Modal
         visible={choiceVisible}
         transparent
@@ -435,6 +440,28 @@ export const ChooseCoverType = () => {
 }
 
 const styles = StyleSheet.create({
+  content: {
+    flexGrow: 1,
+    width: '100%',
+    maxWidth: 620,
+    alignSelf: 'center',
+    paddingVertical: gutters,
+    paddingHorizontal: gutters,
+    gap: 16,
+  },
+  previewContainer: {
+    alignItems: 'center',
+    gap: 8,
+  },
+  coverPreview: {
+    width: '100%',
+    maxWidth: 280,
+  },
+  previewCaption: {
+    fontFamily: FONT_FAMILY.InterRegular,
+    fontSize: 13,
+    color: Palette.white,
+  },
   coverInstructions: {
     padding: 20,
     gap: 12,