help texts

src/components/FeatureCarousel/FeatureCarousel.web.js

@@ -490,8 +490,9 @@ const styles = StyleSheet.create({
   },
   cardWrapper: {
     flex: 1,
-    width: "100%",
-    justifyContent: "flex-start",
+    width: "60%",
+    justifyContent: "center",
+    alignSelf: "center",
     zIndex: 1,
   },
   dotsWrapperBase: {

src/screens/Writing/CreateLyricsWithAi.js

@@ -6,7 +6,7 @@ import { background } from "../../assets";
 import GradientButton from "../../components/GradientButton";
 import MusicLandHeader from "../../components/MusicLandHeader";
 import { OTHER_OBJECTIVE_OPTION, OTHER_STYLE_OPTION } from "../../data/data";
-import useLayoutType, { isWeb } from "../../hooks/useLayoutType";
+import useLayoutType from "../../hooks/useLayoutType";
 import Page from "../../layouts/Page";
 import { Routes } from "../../navigation";
 import { goBack, navigate } from "../../navigation/NavigationService";

src/screens/Writing/CreatingLyrics.js

@@ -3,9 +3,9 @@ import React, { useEffect, useRef, useState } from "react";
 import { Image, Platform, Text, View } from "react-native";
 import useMinuit from "react-native-minuit/src/hooks/useMinuit.js";
 import { ai } from "../../assets";
+import alert from "../../components/Alert";
 import GradientButton from "../../components/GradientButton";
 import ProgressBar from "../../components/ProgressBar";
-import alert from "../../components/Alert";
 import firebase from "../../config/firebase";
 import { Routes } from "../../navigation";
 import { navigate } from "../../navigation/NavigationService";
@@ -55,7 +55,6 @@ const CreatingLyrics = ({ active, config, selections }) => {
     const run = async () => {
       try {
         setCalled(true);
-        await setIsLoading(true);
         console.log("🚀 [CreatingLyrics] Lancement de la génération", {
           platform: Platform.OS,
         });

src/screens/Writing/Lyrics.js

@@ -1,5 +1,5 @@
 import React, { useCallback, useMemo, useRef, useState } from "react";
-import { ScrollView, View } from "react-native";
+import { ScrollView, StyleSheet, Text, View } from "react-native";
 import useMinuit from "react-native-minuit/src/hooks/useMinuit.js";
 import { background } from "../../assets";
 import BorderGradientButton from "../../components/BorderGradientButton";
@@ -13,7 +13,8 @@ import Page from "../../layouts/Page";
 import { Routes } from "../../navigation";
 import { navigate } from "../../navigation/NavigationService";
 import { useUser } from "../../providers/UserDataProvider";
-import { gutters } from "../../styles";
+import { Palette, gutters } from "../../styles";
+import { FONT_FAMILY } from "../../styles/Fonts";
 import CustomInput from "./components/CustomInput";
 
 const Lyrics = ({ navigation }) => {
@@ -287,6 +288,26 @@ const Lyrics = ({ navigation }) => {
               flexGrow: 1,
             }}
           >
+            <View style={styles.headerContainer}>
+              <Text style={styles.headerTitle}>Proposition de paroles</Text>
+              <Text style={styles.instructions}>
+                Relis attentivement la proposition générée avant de valider.
+              </Text>
+              <Text style={styles.instructions}>
+                <Text style={styles.instructionsHighlight}>
+                  Personnalisation :
+                </Text>{" "}
+                modifie le titre et chaque section pour que les paroles te
+                ressemblent.
+              </Text>
+              <Text style={styles.instructions}>
+                <Text style={styles.instructionsHighlight}>
+                  Nouvelle génération :
+                </Text>{" "}
+                appuie sur "Générer d'autres paroles" si tu souhaites une
+                autre suggestion.
+              </Text>
+            </View>
             <CustomInput
               label="Titre"
               placeholder="Titre"
@@ -359,3 +380,24 @@ const Lyrics = ({ navigation }) => {
 };
 
 export default Lyrics;
+
+const styles = StyleSheet.create({
+  headerContainer: {
+    gap: 8,
+    paddingHorizontal: 2,
+  },
+  headerTitle: {
+    color: Palette.white,
+    fontFamily: FONT_FAMILY.InterSemiBold,
+    fontSize: 20,
+  },
+  instructions: {
+    color: Palette.white,
+    fontFamily: FONT_FAMILY.InterRegular,
+    fontSize: 14,
+    lineHeight: 20,
+  },
+  instructionsHighlight: {
+    fontFamily: FONT_FAMILY.InterSemiBold,
+  },
+});