update

src/components/AppActionSheet.js

@@ -0,0 +1,37 @@
+import { View, Text } from "react-native";
+import React from "react";
+import ActionSheet from "react-native-actions-sheet";
+import { gutters, Palette } from "../styles";
+import { BlurView } from "expo-blur";
+
+const AppActionSheet = ({ children, props }) => {
+  return (
+    <ActionSheet
+      containerStyle={{ backgroundColor: Palette.tran }}
+      gestureEnabled
+      indicatorStyle={{
+        top: 20,
+        width: 50,
+        zIndex: 2,
+      }}
+      {...props}
+    >
+      <BlurView
+        intensity={20}
+        style={{
+          paddingTop: 36,
+          paddingHorizontal: 14,
+          paddingBottom: gutters,
+          backgroundColor: Palette.glass,
+          borderTopLeftRadius: 20,
+          borderTopRightRadius: 20,
+          overflow: "hidden",
+        }}
+      >
+        {children}
+      </BlurView>
+    </ActionSheet>
+  );
+};
+
+export default AppActionSheet;

src/components/BlurItemButton.js

@@ -0,0 +1,43 @@
+import { View, Text, Pressable, StyleSheet, Image } from "react-native";
+import React from "react";
+import { BlurView } from "expo-blur";
+import { Palette, Style } from "../styles";
+import { FONT_FAMILY } from "../styles/Fonts";
+import { icons } from "../assets";
+import { size } from "../styles/Style";
+
+const BlurItemButton = ({ onPress, title = "" }) => {
+  return (
+    <Pressable onPress={onPress}>
+      <BlurView intensity={20} style={styles.buttonContainer}>
+        <Text style={styles.buttonText}>{title}</Text>
+        <Image
+          source={icons.chevronDown}
+          style={{
+            ...size({ size: 15 }),
+            transform: [{ rotate: "-90deg" }],
+          }}
+          resizeMode="contain"
+        />
+      </BlurView>
+    </Pressable>
+  );
+};
+
+export default BlurItemButton;
+
+const styles = StyleSheet.create({
+  buttonContainer: {
+    ...Style.containerSpaceBetween,
+    paddingHorizontal: 12,
+    height: 56,
+    borderRadius: 14,
+    overflow: "hidden",
+    backgroundColor: Palette.glass,
+  },
+  buttonText: {
+    fontSize: 16,
+    color: Palette.white,
+    fontFamily: FONT_FAMILY.InterRegular,
+  },
+});

src/components/BorderGradientButton.js

@@ -10,6 +10,7 @@ const BorderGradientButton = ({
   title = "J’ai déjà mes paroles",
   onPress,
   icon,
+  titleStyle,
 }) => {
   return (
     <Pressable onPress={onPress}>
@@ -54,6 +55,7 @@ const BorderGradientButton = ({
                 fontSize: 15,
                 color: Palette.white,
                 fontFamily: FONT_FAMILY.InterMedium,
+                ...titleStyle,
               }}
             >
               {title}

src/components/NavigateHeader.js

@@ -12,6 +12,7 @@ export default ({
   onBackPressed = null,
   containerStyle = {},
   headerTitleStyle = {},
+  hideBackButton = false,
 }) => {
   return (
     <View
@@ -26,17 +27,19 @@ export default ({
       ]}
     >
       <View style={{ flex: 1 }}>
-        <Pressable onPress={() => onBackPressed?.() || goBack()}>
-          <Image
-            source={icons.chevronDown}
-            style={[
-              Style.iconSmall,
-              Style.mirrorHorizontal,
-              { transform: [{ rotate: "90deg" }] },
-            ]}
-            resizeMode="contain"
-          />
-        </Pressable>
+        {!hideBackButton && (
+          <Pressable onPress={() => onBackPressed?.() || goBack()}>
+            <Image
+              source={icons.chevronDown}
+              style={[
+                Style.iconSmall,
+                Style.mirrorHorizontal,
+                { transform: [{ rotate: "90deg" }] },
+              ]}
+              resizeMode="contain"
+            />
+          </Pressable>
+        )}
       </View>
 
       <Motion.Text

src/components/Switch.js

@@ -3,48 +3,49 @@ import { Pressable, View } from "react-native";
 import { Easing } from "react-native-reanimated";
 
 import { Palette } from "../styles";
+import { LinearGradient } from "./LinearGradient/LinearGradient";
 
 export default ({ value, setValue, containerStyle = {} }) => {
-  const currentColor = value ? Palette.green : Palette.red;
+  const currentColor = value ? ["#F94697", "#7023F7"] : ["#8C8C8C", "#8C8C8C"];
 
   const switchHeight = 28;
-  const borderWidth = 2;
   const internalMargin = 2;
 
-  const itemSize = switchHeight - borderWidth * 2 - internalMargin * 2;
+  const itemSize = switchHeight - internalMargin * 2;
 
   return (
-    <Pressable
-      onPress={() => setValue(!value)}
-      style={{
-        flexDirection: "row",
-        width: switchHeight * 2,
-        height: switchHeight,
-        borderColor: currentColor,
-        borderWidth: borderWidth,
-        borderRadius: 25,
-        ...containerStyle,
-      }}
-    >
-      <Motion.View
-        animate={{
-          right: value ? 0 : switchHeight,
-          left: value ? switchHeight : 0,
-        }}
-        transition={{
-          type: "timing",
-          duration: 300,
-          easing: Easing.easing,
-        }}
+    <Pressable onPress={() => setValue(!value)}>
+      <LinearGradient
+        colors={currentColor}
         style={{
-          position: "absolute",
-          width: itemSize,
-          height: itemSize,
-          margin: internalMargin,
+          flexDirection: "row",
+          width: switchHeight * 2,
+          height: switchHeight,
           borderRadius: 25,
-          backgroundColor: currentColor,
+          backgroundColor: "red",
+          ...containerStyle,
         }}
-      />
+      >
+        <Motion.View
+          animate={{
+            right: value ? 0 : switchHeight,
+            left: value ? switchHeight : 0,
+          }}
+          transition={{
+            type: "timing",
+            duration: 300,
+            easing: Easing.easing,
+          }}
+          style={{
+            position: "absolute",
+            width: itemSize,
+            height: itemSize,
+            margin: internalMargin,
+            borderRadius: 25,
+            backgroundColor: Palette.white,
+          }}
+        />
+      </LinearGradient>
     </Pressable>
   );
 };

src/components/modal/DeleteAccountModal.js

@@ -0,0 +1,50 @@
+import { View, Text } from "react-native";
+import React from "react";
+import AppActionSheet from "../AppActionSheet";
+import BorderGradientButton from "../BorderGradientButton";
+import GradientButton from "../GradientButton";
+import { Palette } from "../../styles";
+import { FONT_FAMILY } from "../../styles/Fonts";
+import { SheetManager } from "react-native-actions-sheet";
+
+const DeleteAccountModal = () => {
+  const onClose = async () => {
+    await SheetManager.hide("DeleteAccount");
+  };
+
+  return (
+    <AppActionSheet id="DeleteAccount">
+      <View style={{ gap: 20 }}>
+        <View style={{ gap: 2 }}>
+          <Text
+            style={{
+              fontSize: 20,
+              color: Palette.white,
+              fontFamily: FONT_FAMILY.HelveticaNeueMedium,
+              textAlign: "center",
+            }}
+          >
+            Supprimer mon compte
+          </Text>
+          <Text
+            style={{
+              fontSize: 16,
+              color: Palette.white,
+              fontFamily: FONT_FAMILY.HelveticaNeueRegular,
+              textAlign: "center",
+            }}
+          >
+            Es-tu sur de vouloir supprimer ton compte?{"\n"}Attention, cette
+            action est irréversible!
+          </Text>
+        </View>
+        <View style={{ width: "80%", alignSelf: "center", gap: 12 }}>
+          <BorderGradientButton title="Oui, supprimer" onPress={onClose} />
+          <GradientButton title="Non, annuler" onPress={onClose} />
+        </View>
+      </View>
+    </AppActionSheet>
+  );
+};
+
+export default DeleteAccountModal;

src/components/modal/DeleteAudioModal.js

@@ -0,0 +1,50 @@
+import { View, Text } from "react-native";
+import React from "react";
+import AppActionSheet from "../AppActionSheet";
+import { Palette } from "../../styles";
+import { FONT_FAMILY } from "../../styles/Fonts";
+import BorderGradientButton from "../BorderGradientButton";
+import GradientButton from "../GradientButton";
+import { SheetManager } from "react-native-actions-sheet";
+
+const DeleteAudioModal = () => {
+  const onClose = () => {
+    SheetManager.hide("DeleteAudio");
+  };
+
+  return (
+    <AppActionSheet id="DeleteAudio">
+      <View style={{ gap: 20 }}>
+        <View style={{ gap: 2 }}>
+          <Text
+            style={{
+              fontSize: 20,
+              color: Palette.white,
+              fontFamily: FONT_FAMILY.HelveticaNeueMedium,
+              textAlign: "center",
+            }}
+          >
+            Supprimer mon audio
+          </Text>
+          <Text
+            style={{
+              fontSize: 16,
+              color: Palette.white,
+              fontFamily: FONT_FAMILY.HelveticaNeueRegular,
+              textAlign: "center",
+            }}
+          >
+            Es-tu sur de vouloir supprimer ton audio?{"\n"}
+            Attention, cette action est irréversible!
+          </Text>
+        </View>
+        <View style={{ width: "80%", alignSelf: "center", gap: 12 }}>
+          <BorderGradientButton title="Oui, supprimer" onPress={onClose} />
+          <GradientButton title="Non, annuler" onPress={onClose} />
+        </View>
+      </View>
+    </AppActionSheet>
+  );
+};
+
+export default DeleteAudioModal;

src/components/modal/DeleteModal.js

@@ -0,0 +1,50 @@
+import { View, Text } from "react-native";
+import React from "react";
+import ActionSheet, { SheetManager } from "react-native-actions-sheet";
+import { gutters, Palette } from "../../styles";
+import { BlurView } from "expo-blur";
+import BorderGradientButton from "../BorderGradientButton";
+import GradientButton from "../GradientButton";
+import { FONT_FAMILY } from "../../styles/Fonts";
+import AppActionSheet from "../AppActionSheet";
+
+const DeleteModal = () => {
+  const onClose = () => {
+    SheetManager.hide("Delete");
+  };
+
+  return (
+    <AppActionSheet id="Delete">
+      <View style={{ gap: 20 }}>
+        <View style={{ gap: 2 }}>
+          <Text
+            style={{
+              fontSize: 20,
+              color: Palette.white,
+              fontFamily: FONT_FAMILY.HelveticaNeueMedium,
+              textAlign: "center",
+            }}
+          >
+            Supprimer ma playlist
+          </Text>
+          <Text
+            style={{
+              fontSize: 16,
+              color: Palette.white,
+              fontFamily: FONT_FAMILY.HelveticaNeueRegular,
+              textAlign: "center",
+            }}
+          >
+            Es-tu sur de vouloir supprimer ta playlist?
+          </Text>
+        </View>
+        <View style={{ width: "80%", alignSelf: "center", gap: 12 }}>
+          <BorderGradientButton title="Oui, supprimer" onPress={onClose} />
+          <GradientButton title="Non, annuler" onPress={onClose} />
+        </View>
+      </View>
+    </AppActionSheet>
+  );
+};
+
+export default DeleteModal;

src/components/modal/DeletePlaybackModal.js

@@ -0,0 +1,50 @@
+import { View, Text } from "react-native";
+import React from "react";
+import AppActionSheet from "../AppActionSheet";
+import { Palette } from "../../styles";
+import { FONT_FAMILY } from "../../styles/Fonts";
+import BorderGradientButton from "../BorderGradientButton";
+import GradientButton from "../GradientButton";
+import { SheetManager } from "react-native-actions-sheet";
+
+const DeletePlaybackModal = () => {
+  const onClose = () => {
+    SheetManager.hide("DeletePlayback");
+  };
+
+  return (
+    <AppActionSheet id="DeletePlayback">
+      <View style={{ gap: 20 }}>
+        <View style={{ gap: 2 }}>
+          <Text
+            style={{
+              fontSize: 20,
+              color: Palette.white,
+              fontFamily: FONT_FAMILY.HelveticaNeueMedium,
+              textAlign: "center",
+            }}
+          >
+            Supprimer mon playback
+          </Text>
+          <Text
+            style={{
+              fontSize: 16,
+              color: Palette.white,
+              fontFamily: FONT_FAMILY.HelveticaNeueRegular,
+              textAlign: "center",
+            }}
+          >
+            Es-tu sur de vouloir supprimer ton playback?{"\n"}
+            Attention, cette action est irréversible!
+          </Text>
+        </View>
+        <View style={{ width: "80%", alignSelf: "center", gap: 12 }}>
+          <BorderGradientButton title="Oui, supprimer" onPress={onClose} />
+          <GradientButton title="Non, annuler" onPress={onClose} />
+        </View>
+      </View>
+    </AppActionSheet>
+  );
+};
+
+export default DeletePlaybackModal;

src/components/modal/ProfileSettingsModal.js

@@ -0,0 +1,50 @@
+import { View, Text } from "react-native";
+import React from "react";
+import AppActionSheet from "../AppActionSheet";
+import { Palette } from "../../styles";
+import { FONT_FAMILY } from "../../styles/Fonts";
+import BlurItemButton from "../BlurItemButton";
+import { SheetManager } from "react-native-actions-sheet";
+import { navigate } from "../../navigation/NavigationService";
+import { Routes } from "../../navigation";
+
+const ProfileSettingsModal = () => {
+  const onClose = async () => {
+    await SheetManager.hide("ProfileSettings");
+  };
+
+  return (
+    <AppActionSheet id="ProfileSettings">
+      <View style={{ paddingTop: 10, gap: 30 }}>
+        <Text
+          style={{
+            fontSize: 20,
+            color: Palette.white,
+            fontFamily: FONT_FAMILY.HelveticaNeueMedium,
+            textAlign: "center",
+          }}
+        >
+          Paramètres
+        </Text>
+        <View style={{ gap: 10 }}>
+          <BlurItemButton
+            title="Modifier mon profil"
+            onPress={() => {
+              onClose();
+              navigate(Routes.EditProfile);
+            }}
+          />
+          <BlurItemButton
+            title="Paramètres"
+            onPress={() => {
+              onClose();
+              navigate(Routes.Settings);
+            }}
+          />
+        </View>
+      </View>
+    </AppActionSheet>
+  );
+};
+
+export default ProfileSettingsModal;