update

src/screens/Writing/SongStyle.js

@@ -1,13 +1,12 @@
 import { View, Text, FlatList, Pressable, StyleSheet } 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 CustomInput from "./components/CustomInput";
-import { responsiveHeight } from "react-native-responsive-dimensions";
 import { FONT_FAMILY } from "../../styles/Fonts";
+import ItemContainer from "../../components/ItemContainer/ItemContainer";
 
 const SongStyle = () => {
   return (
@@ -17,36 +16,28 @@ const SongStyle = () => {
           title={`Quel est le style de ta chanson ?`}
           subTitle="Choisis l'ambiance émotions que tu veux faire passer."
         />
-        <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,
+                    paddingHorizontal: 14,
+                    ...Style.containerCenter,
+                  }}
+                >
+                  <Text style={styles.itemText}>{item}</Text>
+                </BlurView>
+              </Pressable>
+            )}
+          />
+        </ItemContainer>
       </View>
       <CustomInput
         label="Tu as un autre style de chanson ?"
@@ -59,31 +50,12 @@ const SongStyle = () => {
 export default SongStyle;
 
 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,
@@ -104,5 +76,6 @@ const styles = StyleSheet.create({
     fontSize: 16,
     color: Palette.white,
     fontFamily: FONT_FAMILY.InterRegular,
+    textAlign: "center",
   },
 });