update

src/screens/Studio/AddPhotoCover.js

@@ -0,0 +1,123 @@
+import { View, Text, Image } from "react-native";
+import React, { useState } from "react";
+import MusicLandHeader from "../../components/MusicLandHeader";
+import { background, icons, img } from "../../assets";
+import Page from "../../layouts/Page";
+import { goBack, navigate } from "../../navigation/NavigationService";
+import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
+import { gutters, Palette, Style } from "../../styles";
+import { FONT_FAMILY } from "../../styles/Fonts";
+import BorderGradientButton from "../../components/BorderGradientButton";
+import GradientButton from "../../components/GradientButton";
+import { launchImageLibraryAsync } from "expo-image-picker";
+import { Routes } from "../../navigation";
+
+const AddPhotoCover = () => {
+  const [image, setImage] = useState(null);
+
+  const onPressAddImage = async () => {
+    const result = await launchImageLibraryAsync({
+      mediaTypes: ["images"],
+      allowsEditing: true,
+      aspect: [4, 3],
+      quality: 1,
+    });
+
+    if (!result.canceled) {
+      setImage(result.assets[0]?.uri);
+    }
+  };
+
+  return (
+    <Page backgroundImg={background.studioBG2} headerType="NONE">
+      <MusicLandHeader onPressBack={goBack} progress={90} />
+      <View style={{ flex: 1, marginTop: 16 }}>
+        <CreateLyricsHeader
+          title="Ta pochette est prête!"
+          subTitle="Qu’en penses-tu ?"
+        />
+        <View style={{ flex: 1, ...Style.containerCenter }}>
+          <View style={{ width: "80%", position: "relative" }}>
+            <Image
+              source={img.placeholder}
+              style={{
+                width: "100%",
+                height: 300,
+                borderRadius: 20,
+                transform: [{ rotateY: "180deg" }],
+              }}
+            />
+            <View
+              style={{ position: "absolute", width: "100%", height: "100%" }}
+            >
+              <Image
+                source={{ uri: image }}
+                style={{ width: "100%", height: "100%", borderRadius: 20 }}
+              />
+            </View>
+            <View
+              style={{
+                position: "absolute",
+                alignSelf: "center",
+                alignItems: "center",
+                top: 10,
+              }}
+            >
+              <Text
+                style={{
+                  fontSize: 22,
+                  color: Palette.white,
+                  fontFamily: FONT_FAMILY.InterSemiBold,
+                }}
+              >
+                Lust for Life
+              </Text>
+              <Text
+                style={{
+                  fontSize: 14,
+                  color: Palette.gray,
+                  fontFamily: FONT_FAMILY.InterRegular,
+                }}
+              >
+                Lana del Rey
+              </Text>
+            </View>
+            <View
+              style={{
+                position: "absolute",
+                alignItems: "center",
+                bottom: 10,
+                width: "100%",
+              }}
+            >
+              <Image
+                source={icons.musicLandLogo}
+                style={{ width: "100%", height: 30 }}
+                resizeMode="contain"
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <View
+        style={{
+          paddingBottom: gutters * 2,
+          width: "80%",
+          alignSelf: "center",
+          gap: 12,
+        }}
+      >
+        <BorderGradientButton
+          title="Ajouter une autre photo"
+          onPress={onPressAddImage}
+        />
+        <GradientButton
+          title="Valider"
+          onPress={() => navigate(Routes.FinishCompose)}
+        />
+      </View>
+    </Page>
+  );
+};
+
+export default AddPhotoCover;

src/screens/Studio/ChooseGenre.js

@@ -10,7 +10,7 @@ import ItemContainer from "../../components/ItemContainer/ItemContainer";
 
 const ChooseGenre = () => {
   return (
-    <View style={{ flex: 1, gap: 10 }}>
+    <View style={{ flex: 1, gap: 10, paddingTop: 16 }}>
       <CreateLyricsHeader
         title="Choisis un genre"
         subTitle="Tu peux choisir jusqu’à 2 genres différents"

src/screens/Studio/ChooseInstruments.js

@@ -5,12 +5,13 @@ import ItemContainer from "../../components/ItemContainer/ItemContainer";
 import { Palette } from "../../styles";
 import { FONT_FAMILY } from "../../styles/Fonts";
 import { BlurView } from "expo-blur";
+import { INSTRUMENTS } from "../../data/data";
 
 const ChooseInstruments = () => {
   const [containerLayout, setContainerLayout] = useState(null);
 
   return (
-    <View style={{ flex: 1, gap: 10 }}>
+    <View style={{ flex: 1, gap: 10, paddingTop: 16 }}>
       <CreateLyricsHeader
         title="Choisis des instruments"
         subTitle="Tu peux choisir jusqu’à 5 instruments différents"
@@ -21,10 +22,10 @@ const ChooseInstruments = () => {
       >
         <ItemContainer height={containerLayout?.height}>
           <FlatList
-            data={Array.from({ length: 10 })}
+            data={INSTRUMENTS}
             showsVerticalScrollIndicator={false}
             contentContainerStyle={styles.contentContainer}
-            renderItem={() => (
+            renderItem={({ item }) => (
               <View style={styles.itemContainer}>
                 <BlurView
                   intensity={30}
@@ -35,7 +36,7 @@ const ChooseInstruments = () => {
                     justifyContent: "center",
                   }}
                 >
-                  <Text style={styles.itemText}>Piano classique</Text>
+                  <Text style={styles.itemText}>{item}</Text>
                 </BlurView>
               </View>
             )}

src/screens/Studio/ChooseRhythm.js

@@ -5,18 +5,19 @@ import ItemContainer from "../../components/ItemContainer/ItemContainer";
 import { BlurView } from "expo-blur";
 import { Palette } from "../../styles";
 import { FONT_FAMILY } from "../../styles/Fonts";
+import { RHYTHM } from "../../data/data";
 
 const ChooseRhythm = () => {
   return (
-    <View style={{ flex: 1, gap: 10 }}>
+    <View style={{ flex: 1, gap: 10, paddingTop: 16 }}>
       <CreateLyricsHeader title="Choisis un rythme" />
       <View style={{ flex: 1 }}>
         <ItemContainer height={340}>
           <FlatList
-            data={Array.from({ length: 5 })}
+            data={RHYTHM}
             showsVerticalScrollIndicator={false}
             contentContainerStyle={styles.contentContainer}
-            renderItem={() => (
+            renderItem={({ item }) => (
               <View style={styles.itemContainer}>
                 <BlurView
                   intensity={30}
@@ -27,7 +28,7 @@ const ChooseRhythm = () => {
                     justifyContent: "center",
                   }}
                 >
-                  <Text style={styles.itemText}>Très rapide</Text>
+                  <Text style={styles.itemText}>{item}</Text>
                 </BlurView>
               </View>
             )}

src/screens/Studio/Compose.js

@@ -12,7 +12,7 @@ const Compose = () => {
   return (
     <Page backgroundImg={background.studioBG2} headerType="NONE">
       <Image source={ai.theo} style={styles.img} resizeMode="contain" />
-      <MusicLandHeader showSkip onPressBack={goBack} progress={7.1} />
+      <MusicLandHeader showSkip onPressBack={goBack} progress={9} />
       <View
         style={{ flex: 1, position: "relative", justifyContent: "flex-end" }}
       >

src/screens/Studio/ComposeSong.js

@@ -19,13 +19,12 @@ const { width } = Dimensions.get("window");
 const ComposeSong = () => {
   const scrollRef = useRef(null);
   const [selectedIndex, setSelectedIndex] = useState(0);
-  const [progress, setProgress] = useState(14.2);
+  const [progress, setProgress] = useState(18);
   const [containerLayout, setContainerLayout] = useState(null);
-  console.log("progress: ", progress);
 
   const onPressNext = () => {
     setSelectedIndex(selectedIndex + 1);
-    setProgress(progress + 7.1);
+    setProgress(progress + 9);
     scrollRef.current.scrollToIndex({
       index: selectedIndex + 1,
       animated: true,
@@ -35,7 +34,7 @@ const ComposeSong = () => {
   const onPressBack = () => {
     if (selectedIndex > 0) {
       setSelectedIndex(selectedIndex - 1);
-      setProgress(progress - 7.1);
+      setProgress(progress - 9);
       scrollRef.current.scrollToIndex({
         index: selectedIndex - 1,
         animated: true,
@@ -47,9 +46,8 @@ const ComposeSong = () => {
 
   return (
     <Page backgroundImg={background.studioBG2} headerType="NONE">
-      <Image source={ai.theo} style={styles.img} resizeMode="contain" />
       <MusicLandHeader onPressBack={onPressBack} progress={progress} />
-      <View style={{ flex: 1, marginTop: 16, paddingBottom: gutters, gap: 48 }}>
+      <View style={{ flex: 1, paddingBottom: gutters, gap: 48 }}>
         <View
           style={{ flex: 1 }}
           onLayout={(event) => setContainerLayout(event.nativeEvent.layout)}

src/screens/Studio/CreatingSong.js

@@ -6,7 +6,7 @@ import Style, { size } from "../../styles/Style";
 import { Palette } from "../../styles";
 import { FONT_FAMILY } from "../../styles/Fonts";
 import ProgressBar from "../../components/ProgressBar";
-import { navigate } from "../../navigation/NavigationService";
+import { goBack, navigate } from "../../navigation/NavigationService";
 import { Routes } from "../../navigation";
 import GradientButton from "../../components/GradientButton";
 
@@ -19,7 +19,7 @@ const CreatingSong = ({ active }) => {
         setProgress((prevProgress) => {
           if (prevProgress >= 100) {
             clearInterval(interval);
-            navigate(Routes.SongReady)
+
             return 100;
           }
           return prevProgress + 1;
@@ -34,6 +34,7 @@ const CreatingSong = ({ active }) => {
     <View
       style={{
         flex: 1,
+        paddingTop: 16,
         ...Style.containerCenter,
       }}
     >
@@ -69,6 +70,7 @@ const CreatingSong = ({ active }) => {
         >
           <BlurView
             intensity={40}
+            tint="dark"
             style={{ flex: 1, padding: 10, paddingBottom: 20 }}
           >
             <Pressable
@@ -80,7 +82,7 @@ const CreatingSong = ({ active }) => {
                 left: 10,
                 zIndex: 3,
               }}
-              onPress={() => console.log("Pressed")}
+              onPress={goBack}
             >
               <Image source={icons.close} style={size({ size: 11 })} />
             </Pressable>

src/screens/Studio/CustomizeVoice.js

@@ -5,12 +5,13 @@ import ItemContainer from "../../components/ItemContainer/ItemContainer";
 import { Palette, Style } from "../../styles";
 import { FONT_FAMILY } from "../../styles/Fonts";
 import { BlurView } from "expo-blur";
+import { VOICE } from "../../data/data";
 
 const CustomizeVoice = () => {
   const [containerLayout, setContainerLayout] = useState(null);
 
   return (
-    <View style={{ flex: 1, gap: 10 }}>
+    <View style={{ flex: 1, gap: 10, paddingTop: 16 }}>
       <CreateLyricsHeader
         title="Personnalise la voix que tu veux pour ta chanson"
         subTitle="Choisis maximum 1 option par catégorie."
@@ -33,10 +34,10 @@ const CustomizeVoice = () => {
               Base
             </Text>
             <FlatList
-              data={Array.from({ length: 10 })}
+              data={VOICE}
               showsVerticalScrollIndicator={false}
               contentContainerStyle={styles.contentContainer}
-              renderItem={() => (
+              renderItem={({ item }) => (
                 <View style={styles.itemContainer}>
                   <BlurView
                     intensity={30}
@@ -44,10 +45,10 @@ const CustomizeVoice = () => {
                       flex: 1,
                       backgroundColor: Palette.glass,
                       paddingHorizontal: 12,
-                      justifyContent: "center",
+                      paddingVertical: 14,
                     }}
                   >
-                    <Text style={styles.itemText}>Une voix féminine interpretra ta chanson.</Text>
+                    <Text style={styles.itemText}>{item}</Text>
                   </BlurView>
                 </View>
               )}
@@ -70,7 +71,6 @@ const styles = StyleSheet.create({
     paddingBottom: 50,
   },
   itemContainer: {
-    height: 54,
     backgroundColor: Palette.glass,
     borderRadius: 14,
     overflow: "hidden",

src/screens/Studio/FinishCompose.js

@@ -0,0 +1,52 @@
+import { View, Text, Image, StyleSheet } from "react-native";
+import React from "react";
+import { ai, background } from "../../assets";
+import Page from "../../layouts/Page";
+import { goBack, navigate } from "../../navigation/NavigationService";
+import MusicLandHeader from "../../components/MusicLandHeader";
+import { gutters } from "../../styles";
+import { Routes } from "../../navigation";
+import GradientButton from "../../components/GradientButton";
+import BorderGradientButton from "../../components/BorderGradientButton";
+
+const FinishCompose = () => {
+  return (
+    <Page backgroundImg={background.studioBG2} headerType="NONE">
+      <Image source={ai.theo} style={styles.img} resizeMode="contain" />
+      <MusicLandHeader onPressBack={goBack} progress={100} />
+      <View
+        style={{ flex: 1, position: "relative", justifyContent: "flex-end" }}
+      >
+        <View
+          style={{
+            paddingBottom: gutters * 2,
+            width: "70%",
+            alignSelf: "center",
+            gap: 12,
+          }}
+        >
+          <BorderGradientButton
+            title="Continuer plus tard"
+            onPress={() => navigate(Routes.Onboarding)}
+          />
+          <GradientButton
+            title="Continuer la création"
+            onPress={() => navigate(Routes.Onboarding)}
+          />
+        </View>
+      </View>
+    </Page>
+  );
+};
+
+export default FinishCompose;
+
+const styles = StyleSheet.create({
+  img: {
+    width: "100%",
+    height: "70%",
+    position: "absolute",
+    bottom: -40,
+    right: -30,
+  },
+});

src/screens/Studio/PhotoCover.js

@@ -0,0 +1,93 @@
+import { View, Text, Image } from "react-native";
+import React from "react";
+import MusicLandHeader from "../../components/MusicLandHeader";
+import { background, icons, img } from "../../assets";
+import Page from "../../layouts/Page";
+import { goBack, navigate } from "../../navigation/NavigationService";
+import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
+import { gutters, Palette, Style } from "../../styles";
+import { FONT_FAMILY } from "../../styles/Fonts";
+import BorderGradientButton from "../../components/BorderGradientButton";
+import { Routes } from "../../navigation";
+import GradientButton from "../../components/GradientButton";
+
+const PhotoCover = () => {
+  return (
+    <Page backgroundImg={background.studioBG2} headerType="NONE">
+      <MusicLandHeader onPressBack={goBack} progress={81} />
+      <View style={{ flex: 1, marginTop: 16 }}>
+        <CreateLyricsHeader title="Souhaites-tu rajouter une photo de toi sur la pochette?" />
+        <View style={{ flex: 1, ...Style.containerCenter }}>
+          <View style={{ width: "80%", position: "relative" }}>
+            <Image
+              source={img.placeholder}
+              style={{
+                width: "100%",
+                height: 300,
+                borderRadius: 20,
+                transform: [{ rotateY: "180deg" }],
+              }}
+            />
+            <View
+              style={{
+                position: "absolute",
+                alignSelf: "center",
+                alignItems: "center",
+                top: 10,
+              }}
+            >
+              <Text
+                style={{
+                  fontSize: 22,
+                  color: Palette.white,
+                  fontFamily: FONT_FAMILY.InterSemiBold,
+                }}
+              >
+                Lust for Life
+              </Text>
+              <Text
+                style={{
+                  fontSize: 14,
+                  color: Palette.gray,
+                  fontFamily: FONT_FAMILY.InterRegular,
+                }}
+              >
+                Lana del Rey
+              </Text>
+            </View>
+            <View
+              style={{
+                position: "absolute",
+                alignItems: "center",
+                bottom: 10,
+                width: "100%",
+              }}
+            >
+              <Image
+                source={icons.musicLandLogo}
+                style={{ width: "100%", height: 30 }}
+                resizeMode="contain"
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <View
+        style={{
+          paddingBottom: gutters * 2,
+          width: "80%",
+          alignSelf: "center",
+          gap: 12,
+        }}
+      >
+        <BorderGradientButton title="Non, laisser la pochette telle quelle" />
+        <GradientButton
+          title="Oui"
+          onPress={() => navigate(Routes.AddPhotoCover)}
+        />
+      </View>
+    </Page>
+  );
+};
+
+export default PhotoCover;

src/screens/Studio/PouchReady.js

@@ -0,0 +1,104 @@
+import { View, Text, Image } from "react-native";
+import React from "react";
+import Page from "../../layouts/Page";
+import { background, icons, img } from "../../assets";
+import MusicLandHeader from "../../components/MusicLandHeader";
+import { goBack, navigate } from "../../navigation/NavigationService";
+import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
+import { gutters, Palette, Style } from "../../styles";
+import BorderGradientButton from "../../components/BorderGradientButton";
+import GradientButton from "../../components/GradientButton";
+import { Routes } from "../../navigation";
+import { FONT_FAMILY } from "../../styles/Fonts";
+
+const PouchReady = () => {
+  return (
+    <Page backgroundImg={background.studioBG2} headerType="NONE">
+      <MusicLandHeader onPressBack={goBack} progress={72} />
+      <View style={{ flex: 1, marginTop: 16 }}>
+        <CreateLyricsHeader
+          title="Ta pochette est prête!"
+          subTitle="Qu’en penses-tu ?"
+        />
+        <View style={{ flex: 1, ...Style.containerCenter }}>
+          <View style={{ width: "80%", position: "relative" }}>
+            <Image
+              source={img.placeholder}
+              style={{
+                width: "100%",
+                height: 300,
+                borderRadius: 20,
+                transform: [{ rotateY: "180deg" }],
+              }}
+            />
+            <View
+              style={{
+                position: "absolute",
+                alignSelf: "center",
+                alignItems: "center",
+                top: 10,
+              }}
+            >
+              <Text
+                style={{
+                  fontSize: 22,
+                  color: Palette.white,
+                  fontFamily: FONT_FAMILY.InterSemiBold,
+                }}
+              >
+                Lust for Life
+              </Text>
+              <Text
+                style={{
+                  fontSize: 14,
+                  color: Palette.gray,
+                  fontFamily: FONT_FAMILY.InterRegular,
+                }}
+              >
+                Lana del Rey
+              </Text>
+            </View>
+            <View
+              style={{
+                position: "absolute",
+                alignItems: "center",
+                bottom: 10,
+                width: "100%",
+              }}
+            >
+              <Image
+                source={icons.musicLandLogo}
+                style={{ width: "100%", height: 30 }}
+                resizeMode="contain"
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <View
+        style={{
+          paddingBottom: gutters * 2,
+          width: "80%",
+          alignSelf: "center",
+          gap: 12,
+        }}
+      >
+        <BorderGradientButton
+          title="Regénérer"
+          icon={icons.stars}
+          onPress={() =>
+            navigate(Routes.Regenerate, {
+              progress: 72,
+            })
+          }
+        />
+        <GradientButton
+          title="Valider"
+          onPress={() => navigate(Routes.PhotoCover)}
+        />
+      </View>
+    </Page>
+  );
+};
+
+export default PouchReady;

src/screens/Studio/Regenerate.js

@@ -0,0 +1,74 @@
+import { View, Text } from "react-native";
+import React from "react";
+import Page from "../../layouts/Page";
+import { background, icons } from "../../assets";
+import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
+import MusicLandHeader from "../../components/MusicLandHeader";
+import { goBack } from "../../navigation/NavigationService";
+import { gutters, Palette } from "../../styles";
+import { FONT_FAMILY } from "../../styles/Fonts";
+import GradientButton from "../../components/GradientButton";
+import { useRoute } from "@react-navigation/core";
+
+const Regenerate = () => {
+  const params = useRoute().params;
+
+  return (
+    <Page
+      backgroundImg={background.studioBG2}
+      headerType="NONE"
+      containerStyle={{ paddingBottom: gutters * 2 }}
+    >
+      <MusicLandHeader onPressBack={goBack} progress={params?.progress} />
+      <View style={{ flex: 1, marginTop: 16 }}>
+        <CreateLyricsHeader
+          title="Regénérer"
+          subTitle="Veux-tu changer tes choix ?"
+        />
+        <View style={{ gap: 27, marginTop: 30 }}>
+          <CreateLyricsHeader title="Genre">
+            <Text
+              style={{
+                fontSize: 16,
+                color: Palette.white,
+                fontFamily: FONT_FAMILY.InterRegular,
+              }}
+            >
+              <Text style={{ fontFamily: FONT_FAMILY.InterBold }}>
+                Hip Hop/Rap
+              </Text>{" "}
+              : Musique commerciale destinée au grand public, accrocheuse et
+              mélodique. Domine les charts internationaux avec des artistes
+              ultra-médiatisés.
+            </Text>
+          </CreateLyricsHeader>
+          <CreateLyricsHeader
+            title="Voix"
+            subTitle="Une voix masculine interpretera ta chanson."
+          />
+          <CreateLyricsHeader title="Instruments">
+            <Text
+              style={{
+                fontSize: 16,
+                color: Palette.gray,
+                fontFamily: FONT_FAMILY.InterRegular,
+              }}
+            >
+              Banjo{"\n"}Violon{"\n"}
+              Saxophone{"\n"}
+              Piano classique{"\n"}
+            </Text>
+          </CreateLyricsHeader>
+        </View>
+      </View>
+      <GradientButton
+        title="Regénérer"
+        containerStyle={{ width: "80%", alignSelf: "center" }}
+        icon={icons.stars}
+        onPress={goBack}
+      />
+    </Page>
+  );
+};
+
+export default Regenerate;

src/screens/Studio/SongReady.js

@@ -1,45 +1,88 @@
-import { View, Text } from "react-native";
-import React from "react";
+import React, { useState } from "react";
 import Page from "../../layouts/Page";
-import { background } from "../../assets";
+import { background, icons } from "../../assets";
 import MusicLandHeader from "../../components/MusicLandHeader";
-import { goBack } from "../../navigation/NavigationService";
-import { LinearGradient } from "../../components/LinearGradient/LinearGradient";
+import { goBack, navigate } from "../../navigation/NavigationService";
 import Slider from "../../components/Slider";
+import { Image, Pressable, View } from "react-native";
+import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
+import { BlurView } from "expo-blur";
+import { Style } from "../../styles";
+import { responsiveWidth } from "react-native-responsive-dimensions";
+import { gutters, size } from "../../styles/Style";
+import BorderGradientButton from "../../components/BorderGradientButton";
+import GradientButton from "../../components/GradientButton";
+import { Routes } from "../../navigation";
+import ValidateModal from "../../components/modal/ValidateModal";
 
 const SongReady = () => {
+  const [showValidateModal, setShowValidateModal] = useState(false);
+
   return (
     <Page headerType="NONE" backgroundImg={background.studioBG2}>
-      <MusicLandHeader onPressBack={goBack} progress={49.7} />
-
-      <View>
-        <LinearGradient
-          colors={["#FF0000", "#FFFF00", "#0000FF"]} // Red to Yellow to Blue gradient
-          start={{ x: 0, y: 0.5 }}
-          end={{ x: 1, y: 0.5 }}
+      <MusicLandHeader onPressBack={goBack} progress={63} />
+      <View style={{ flex: 1, marginTop: 16 }}>
+        <CreateLyricsHeader
+          title="Ta chanson est prête !"
+          subTitle="Qu’en penses-tu ?"
+        />
+        <View
           style={{
-            width: "100%",
-            height: 40,
-            borderRadius: 20, // Optional: for rounded corners
+            ...size({ size: responsiveWidth(80) }),
+            alignSelf: "center",
+            borderRadius: 1000,
+            overflow: "hidden",
+            marginTop: 16,
           }}
         >
-          <Slider
-            style={{ height: 40, width: "100%" }}
-            minimumValue={0}
-            maximumValue={100}
-            minimumTrackTintColor="transparent"
-            maximumTrackTintColor="red"
-            thumbTintColor="#FFFFFF"
-          />
-        </LinearGradient>
-        <Slider
-          minimumValue={0}
-          maximumValue={100}
-          minimumTrackTintColor="transparent"
-          maximumTrackTintColor="red"
-          thumbTintColor="#FFFFFF"
+          <BlurView
+            intensity={40}
+            tint="dark"
+            style={{ ...Style.containerCenter, flex: 1 }}
+          >
+            <Image source={icons.disk} />
+          </BlurView>
+        </View>
+        <View style={{ marginTop: 49 }}>
+          <Slider value="0" maxValue="2:11" />
+          <Pressable
+            style={{
+              alignSelf: "center",
+              ...size({ size: 48 }),
+              ...Style.containerCenter,
+            }}
+          >
+            <Image source={icons.play} />
+          </Pressable>
+        </View>
+      </View>
+      <View
+        style={{
+          paddingBottom: gutters * 2,
+          width: "80%",
+          alignSelf: "center",
+          gap: 12,
+        }}
+      >
+        <BorderGradientButton
+          title="Regénérer"
+          icon={icons.stars}
+          onPress={() =>
+            navigate(Routes.Regenerate, {
+              progress: 63,
+            })
+          }
+        />
+        <GradientButton
+          title="Valider"
+          onPress={() => setShowValidateModal(true)}
         />
       </View>
+      <ValidateModal
+        visible={showValidateModal}
+        onClose={() => setShowValidateModal(false)}
+        onPressValidate={() => navigate(Routes.PouchReady)}
+      />
     </Page>
   );
 };

src/screens/Writing/CreateLyricsWithAi.js

@@ -57,7 +57,6 @@ const CreateLyricsWithAi = () => {
       <View
         style={{
           flex: 1,
-          marginTop: 16,
           paddingBottom: gutters,
           gap: responsiveHeight(5),
         }}

src/screens/Writing/CreatingLyrics.js

@@ -7,7 +7,7 @@ import { size } from "../../styles/Style";
 import ProgressBar from "../../components/ProgressBar";
 import { FONT_FAMILY } from "../../styles/Fonts";
 import GradientButton from "../../components/GradientButton";
-import { navigate } from "../../navigation/NavigationService";
+import { goBack, navigate } from "../../navigation/NavigationService";
 import { Routes } from "../../navigation";
 
 const CreatingLyrics = ({ active }) => {
@@ -19,7 +19,6 @@ const CreatingLyrics = ({ active }) => {
         setProgress((prevProgress) => {
           if (prevProgress >= 100) {
             clearInterval(interval);
-            navigate(Routes.Lyrics)
             return 100;
           }
           return prevProgress + 1;
@@ -80,7 +79,7 @@ const CreatingLyrics = ({ active }) => {
                 left: 10,
                 zIndex: 3,
               }}
-              onPress={() => console.log("Pressed")}
+              onPress={goBack}
             >
               <Image source={icons.close} style={size({ size: 11 })} />
             </Pressable>

src/screens/Writing/CustomizeSongStructure.js

@@ -10,7 +10,7 @@ const CustomizeSongStructure = () => {
   const [containerLayout, setContainerLayout] = useState(null);
 
   return (
-    <View style={{ flex: 1, gap: 10 }}>
+    <View style={{ flex: 1, gap: 10, marginTop: 16 }}>
       <CreateLyricsHeader
         title="Personnalise la structure de ta chanson"
         subTitle="Intègre en Drag and drop"

src/screens/Writing/EmotionConvey.js

@@ -1,19 +1,15 @@
 import { View, Text, FlatList } from "react-native";
-import React, { useState } from "react";
+import React from "react";
 import CreateLyricsHeader from "./components/CreateLyricsHeader";
-import BorderGradient from "../../components/BorderGradient/BorderGradient";
 import { responsiveHeight } from "react-native-responsive-dimensions";
-import { BlurView } from "expo-blur";
 import { Palette } from "../../styles";
 import { FONT_FAMILY } from "../../styles/Fonts";
 import { EMOTION_CONVEY } from "../../data/data";
 import ItemContainer from "../../components/ItemContainer/ItemContainer";
 
 const EmotionConvey = () => {
-  const [itemLayout, setItemLayout] = useState([]);
-
   return (
-    <View style={{ flex: 1, gap: 10 }}>
+    <View style={{ flex: 1, gap: 10, marginTop: 16 }}>
       <CreateLyricsHeader
         title={`Quel émotion veux-tu\ntransmettre ?`}
         subTitle="Sélectionne tes intentions émotionnelles. (2 max)"
@@ -26,46 +22,24 @@ const EmotionConvey = () => {
             gap: 16,
             flexGrow: 1,
             zIndex: 2,
+            paddingTop: 5,
           }}
           renderItem={({ item, index }) => (
-            <View>
-              <BorderGradient
-                gradientProps={{
-                  colors: item.color,
-                }}
-                style={{
-                  borderWidth: 1,
-                  height: itemLayout[index]?.height,
-                  borderRadius: 14,
-                  position: "absolute",
-                  width: "100%",
-                }}
-              />
-              <View
-                style={{ borderRadius: 14, overflow: "hidden" }}
-                onLayout={(e) => {
-                  e.persist();
-                  setItemLayout((prev) => [...prev, e.nativeEvent.layout]);
-                }}
-              >
-                <BlurView
-                  intensity={30}
-                  style={{ paddingVertical: 14, paddingHorizontal: 12 }}
+            <View style={{ paddingHorizontal: 5 }}>
+              <CreateLyricsHeader colors={item.color} intensity={30} >
+                <Text
+                  style={{
+                    fontSize: 16,
+                    color: Palette.white,
+                    fontFamily: FONT_FAMILY.InterRegular,
+                  }}
                 >
-                  <Text
-                    style={{
-                      fontSize: 16,
-                      color: Palette.white,
-                      fontFamily: FONT_FAMILY.InterRegular,
-                    }}
-                  >
-                    <Text style={{ fontFamily: FONT_FAMILY.InterBold }}>
-                      {item.title}
-                    </Text>{" "}
-                    : {item.description}
-                  </Text>
-                </BlurView>
-              </View>
+                  <Text style={{ fontFamily: FONT_FAMILY.InterBold }}>
+                    {item.title}
+                  </Text>{" "}
+                  : {item.description}
+                </Text>
+              </CreateLyricsHeader>
             </View>
           )}
         />

src/screens/Writing/Goals.js

@@ -10,7 +10,7 @@ import ItemContainer from "../../components/ItemContainer/ItemContainer";
 
 const Goals = () => {
   return (
-    <View style={{ flex: 1, gap: 16 }}>
+    <View style={{ flex: 1, gap: 16, marginTop: 16 }}>
       <View style={{ gap: 10 }}>
         <CreateLyricsHeader title="Quels sont tes objectifs ?" />
         <ItemContainer>

src/screens/Writing/Rhymes.js

@@ -8,7 +8,7 @@ import ItemContainer from "../../components/ItemContainer/ItemContainer";
 
 const Rhymes = () => {
   return (
-    <View style={{ flex: 1, gap: 10 }}>
+    <View style={{ flex: 1, gap: 10, marginTop: 16 }}>
       <CreateLyricsHeader title="Avec ou sans rimes" />
       <ItemContainer height={200}>
         <View style={{ gap: 10 }}>

src/screens/Writing/SongStructure.js

@@ -9,7 +9,7 @@ import ItemContainer from "../../components/ItemContainer/ItemContainer";
 
 const SongStructure = () => {
   return (
-    <View style={{ flex: 1, gap: 10 }}>
+    <View style={{ flex: 1, gap: 10, marginTop: 16 }}>
       <CreateLyricsHeader
         title="Comment veux-tu structurer ta chanson ?"
         subTitle="Sélectionne une structure."

src/screens/Writing/SongStyle.js

@@ -10,7 +10,7 @@ import ItemContainer from "../../components/ItemContainer/ItemContainer";
 
 const SongStyle = () => {
   return (
-    <View style={{ flex: 1, gap: 16 }}>
+    <View style={{ flex: 1, gap: 16, marginTop: 16 }}>
       <View style={{ gap: 10 }}>
         <CreateLyricsHeader
           title={`Quel est le style de ta chanson ?`}

src/screens/Writing/SongTo.js

@@ -5,7 +5,7 @@ import CustomInput from "./components/CustomInput";
 
 const SongTo = () => {
   return (
-    <View style={{ flex: 1, gap: 10 }}>
+    <View style={{ flex: 1, gap: 10, marginTop: 16 }}>
       <CreateLyricsHeader title="À qui s’adresse ta chanson ?" />
       <CustomInput placeholder="Ecrire mon contexte" height={283} />
     </View>

src/screens/Writing/SpecificityContext.js

@@ -5,7 +5,7 @@ import CustomInput from "./components/CustomInput";
 
 const SpecificityContext = () => {
   return (
-    <View style={{ flex: 1, gap: 10 }}>
+    <View style={{ flex: 1, gap: 10, marginTop: 16 }}>
       <CreateLyricsHeader
         title="Spécificité du contexte"
         subTitle="Dis-nous en un peu plus pour qu’on puisse mieux t’aider."

src/screens/Writing/components/CreateLyricsHeader.js

@@ -6,18 +6,27 @@ import { Palette } from "../../../styles";
 import { FONT_FAMILY } from "../../../styles/Fonts";
 import useLayoutType from "../../../hooks/useLayoutType";
 
-const CreateLyricsHeader = ({ title = "", subTitle = "", height = 45 }) => {
+const CreateLyricsHeader = ({
+  title = "",
+  subTitle = "",
+  children,
+  colors = ["#FFFFFF00", "#FFFFFF"],
+  gradientProps,
+  intensity = 40,
+  tint = "dark",
+}) => {
   const [onLayout, setOnLayout] = useState(null);
   const { isWeb } = useLayoutType();
 
   return (
-    <View style={{ paddingTop: isWeb ? 10 : 0 }}>
+    <View>
       <BorderGradient
         gradientProps={{
-          colors: ["#FFFFFF00", "#FFFFFF"],
+          colors: colors,
           locations: [0.2, 1],
           start: { x: 0, y: 0 },
           end: { x: 1, y: 0 },
+          ...{ gradientProps },
         }}
         style={{
           height: isWeb ? onLayout?.height + 2 : onLayout?.height,
@@ -41,22 +50,25 @@ const CreateLyricsHeader = ({ title = "", subTitle = "", height = 45 }) => {
         onPress={() => console.log("PRESSED")}
       >
         <BlurView
-          intensity={20}
+          intensity={intensity}
+          tint={tint}
           style={{
             paddingHorizontal: 12,
             paddingVertical: 8,
             gap: 4,
           }}
         >
-          <Text
-            style={{
-              fontSize: 22,
-              color: Palette.white,
-              fontFamily: FONT_FAMILY.InterSemiBold,
-            }}
-          >
-            {title}
-          </Text>
+          {title && (
+            <Text
+              style={{
+                fontSize: 22,
+                color: Palette.white,
+                fontFamily: FONT_FAMILY.InterSemiBold,
+              }}
+            >
+              {title}
+            </Text>
+          )}
           {subTitle && (
             <Text
               style={{
@@ -68,6 +80,7 @@ const CreateLyricsHeader = ({ title = "", subTitle = "", height = 45 }) => {
               {subTitle}
             </Text>
           )}
+          {children}
         </BlurView>
       </Pressable>
     </View>