help texts

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,
+  },
+});