update

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