update

src/screens/Writing/SongStructure.js

@@ -1,50 +1,40 @@
 import { View, Text, StyleSheet, FlatList, Pressable } from "react-native";
 import React from "react";
 import CreateLyricsHeader from "./components/CreateLyricsHeader";
-import BorderGradient from "../../components/BorderGradient/BorderGradient";
 import { BlurView } from "expo-blur";
 import { GOALS } from "../../data/data";
 import { Palette, Style } from "../../styles";
-import { responsiveHeight } from "react-native-responsive-dimensions";
 import { FONT_FAMILY } from "../../styles/Fonts";
+import ItemContainer from "../../components/ItemContainer/ItemContainer";
 
 const SongStructure = () => {
   return (
     <View style={{ flex: 1, gap: 10 }}>
       <CreateLyricsHeader
         title="Comment veux-tu structurer ta chanson ?"
-        subTitle="Sélectionne une structure.o"
+        subTitle="Sélectionne une structure."
       />
-      <BorderGradient
-        gradientProps={{
-          colors: ["#FFFFFF00", "#FFFFFF"],
-        }}
-        style={styles.borderGradientStyle}
-      >
-        <View style={styles.blurContainer}>
-          <BlurView intensity={40} style={{ flex: 1, padding: 6 }}>
-            <FlatList
-              data={GOALS}
-              showsVerticalScrollIndicator={false}
-              contentContainerStyle={styles.contentContainer}
-              renderItem={({ item }) => (
-                <Pressable style={styles.itemContainer}>
-                  <BlurView
-                    intensity={30}
-                    style={{
-                      flex: 1,
-                      backgroundColor: Palette.glass,
-                      ...Style.containerCenter,
-                    }}
-                  >
-                    <Text style={styles.itemText}>{item}</Text>
-                  </BlurView>
-                </Pressable>
-              )}
-            />
-          </BlurView>
-        </View>
-      </BorderGradient>
+      <ItemContainer>
+        <FlatList
+          data={GOALS}
+          showsVerticalScrollIndicator={false}
+          contentContainerStyle={styles.contentContainer}
+          renderItem={({ item }) => (
+            <Pressable style={styles.itemContainer}>
+              <BlurView
+                intensity={30}
+                style={{
+                  flex: 1,
+                  backgroundColor: Palette.glass,
+                  ...Style.containerCenter,
+                }}
+              >
+                <Text style={styles.itemText}>{item}</Text>
+              </BlurView>
+            </Pressable>
+          )}
+        />
+      </ItemContainer>
     </View>
   );
 };
@@ -52,31 +42,12 @@ const SongStructure = () => {
 export default SongStructure;
 
 const styles = StyleSheet.create({
-  borderGradientStyle: {
-    borderWidth: 1,
-    borderRadius: 20,
-    height: responsiveHeight(40),
-    shadowColor: "#000",
-    shadowOffset: {
-      width: 0,
-      height: 2,
-    },
-    shadowOpacity: 0.25,
-    shadowRadius: 3.84,
-    elevation: 100,
-  },
-  blurContainer: {
-    flex: 1,
-    borderRadius: 20,
-    overflow: "hidden",
-    zIndex: 1,
-  },
   contentContainer: {
     flexGrow: 1,
     padding: 8,
     gap: 10,
     backgroundColor: "#FFFFFF00",
-    paddingBottom: 100,
+    paddingBottom: 50,
   },
   itemContainer: {
     height: 54,