From 125ac0f40f5ce51ee6ab66e204b9b35dd8b28559 Mon Sep 17 00:00:00 2001
From: Leon <leon.morival@gmail.com>
Date: Mon, 23 Feb 2026 14:37:25 +0100
Subject: [PATCH] exemples

---
 src/screens/Playbacks/Playbacks.web.js        | 25 +++++++++++++-----
 src/screens/Writing/CreateLyricsWithAi.web.js |  2 +-
 .../Writing/CustomizeSongStructure.web.js     | 12 +++++----
 src/screens/Writing/SongStyle.js              |  2 +-
 src/screens/Writing/SpecificityContext.js     | 26 ++++++++++++++++++-
 5 files changed, 52 insertions(+), 15 deletions(-)

diff --git a/src/screens/Playbacks/Playbacks.web.js b/src/screens/Playbacks/Playbacks.web.js
index 30c09af..c0b6d81 100644
--- a/src/screens/Playbacks/Playbacks.web.js
+++ b/src/screens/Playbacks/Playbacks.web.js
@@ -448,6 +448,7 @@ const Playbacks = () => {
         onPress={() => setViewMode('charts')}
         accessibilityLabel="Revenir au classement des playbacks"
       >
+        <Image source={icons.sort} resizeMode="contain" style={styles.backToChartsIcon} />
         <Text style={styles.backToChartsText}>Retour au classement</Text>
       </Pressable>
     </View>
@@ -561,17 +562,27 @@ const styles = StyleSheet.create({
   },
   backToCharts: {
     position: 'absolute',
-    top: 32,
+    top: 28,
     right: 24,
-    paddingVertical: 8,
-    paddingHorizontal: 12,
-    borderRadius: 12,
-    backgroundColor: 'rgba(0,0,0,0.55)',
+    paddingVertical: 10,
+    paddingHorizontal: 14,
+    borderRadius: 999,
+    backgroundColor: 'rgba(255,255,255,0.92)',
+    borderWidth: 1,
+    borderColor: 'rgba(0,0,0,0.12)',
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
     zIndex: 20,
   },
+  backToChartsIcon: {
+    width: 16,
+    height: 16,
+    tintColor: '#0F0C14',
+  },
   backToChartsText: {
-    color: Palette.white,
-    fontSize: 12,
+    color: '#0F0C14',
+    fontSize: 13,
     fontFamily: FONT_FAMILY.InterSemiBold,
   },
 })
diff --git a/src/screens/Writing/CreateLyricsWithAi.web.js b/src/screens/Writing/CreateLyricsWithAi.web.js
index 6fbc367..49a62ad 100644
--- a/src/screens/Writing/CreateLyricsWithAi.web.js
+++ b/src/screens/Writing/CreateLyricsWithAi.web.js
@@ -1,7 +1,7 @@
 import React, { useMemo, useState } from 'react'
 import { Platform, View } from 'react-native'
 import { responsiveHeight } from 'react-native-responsive-dimensions'
-import { background, icons } from '../../assets'
+import { background } from '../../assets'
 import GradientButton from '../../components/GradientButton'
 import MusicLandHeader from '../../components/MusicLandHeader'
 import { OTHER_OBJECTIVE_OPTION, OTHER_STYLE_OPTION } from '../../data/data'
diff --git a/src/screens/Writing/CustomizeSongStructure.web.js b/src/screens/Writing/CustomizeSongStructure.web.js
index 05912a0..b77a58b 100644
--- a/src/screens/Writing/CustomizeSongStructure.web.js
+++ b/src/screens/Writing/CustomizeSongStructure.web.js
@@ -1103,16 +1103,18 @@ const styles = StyleSheet.create({
   },
   sectionTag: {
     alignSelf: 'flex-start',
-    paddingHorizontal: 12,
+    paddingHorizontal: 14,
     paddingVertical: 6,
     borderRadius: 999,
-    backgroundColor: 'rgba(255,255,255,0.12)',
+    backgroundColor: 'rgba(255,255,255,0.92)',
+    borderWidth: 1,
+    borderColor: 'rgba(0,0,0,0.08)',
   },
   sectionTagText: {
-    fontSize: 12,
-    color: Palette.white,
+    fontSize: 13,
+    color: '#0F0C14',
     fontFamily: FONT_FAMILY.InterSemiBold,
-    letterSpacing: 1,
+    letterSpacing: 0.6,
     textTransform: 'uppercase',
   },
   blurSection: {
diff --git a/src/screens/Writing/SongStyle.js b/src/screens/Writing/SongStyle.js
index 6073dd8..03a0458 100644
--- a/src/screens/Writing/SongStyle.js
+++ b/src/screens/Writing/SongStyle.js
@@ -96,7 +96,7 @@ const SongStyle = ({
         <View style={{ flex: 1, gap: 10 }}>
           <CreateLyricsHeader
             title={`Quel est le style de ta chanson ?`}
-            subTitle="Choisis l'ambiance émotions que tu veux faire passer."
+            subTitle="Quelle ambiance veux-tu pour ta chanson?"
           />
           <View
             style={{ flex: 1 }}
diff --git a/src/screens/Writing/SpecificityContext.js b/src/screens/Writing/SpecificityContext.js
index 7f5a079..677f2b9 100644
--- a/src/screens/Writing/SpecificityContext.js
+++ b/src/screens/Writing/SpecificityContext.js
@@ -1,5 +1,7 @@
-import { View } from 'react-native'
+import { StyleSheet, Text, View } from 'react-native'
 import React from 'react'
+import { Palette } from '../../styles'
+import { FONT_FAMILY } from '../../styles/Fonts'
 import CreateLyricsHeader from './components/CreateLyricsHeader'
 import CustomInput from './components/CustomInput'
 
@@ -10,6 +12,11 @@ const SpecificityContext = ({ context, setContext }) => {
         title="Spécificité du contexte"
         subTitle="Dis-nous en un peu plus pour qu’on puisse mieux t’aider."
       />
+      <View style={styles.exampleCard}>
+        <Text style={styles.exampleText}>
+          Par ex. : précise des noms, des anecdotes, ton humeur...
+        </Text>
+      </View>
       <CustomInput
         placeholder="Décris le contexte de ta chanson"
         height={283}
@@ -21,3 +28,20 @@ const SpecificityContext = ({ context, setContext }) => {
 }
 
 export default SpecificityContext
+
+const styles = StyleSheet.create({
+  exampleCard: {
+    backgroundColor: Palette.white,
+    borderRadius: 12,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    borderWidth: 1,
+    borderColor: 'rgba(0,0,0,0.06)',
+  },
+  exampleText: {
+    fontSize: 14,
+    lineHeight: 20,
+    color: Palette.black,
+    fontFamily: FONT_FAMILY.InterRegular,
+  },
+})