exemples

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