update

App.js

@@ -21,7 +21,7 @@ import { Palette } from "./src/styles";
 import { navigationRef, reset } from "./src/navigation/NavigationService";
 
 import initialGlobalState from "./src/config/initialGlobalState";
-import { MenuProvider } from 'react-native-popup-menu';
+import { MenuProvider } from "react-native-popup-menu";
 
 import firebase from "./src/config/firebase";
 import Providers from "./src/providers";
@@ -34,6 +34,8 @@ import {
   Inter_700Bold,
 } from "@expo-google-fonts/inter";
 
+import "./src/utils/Sheet";
+
 console.disableYellowBox = true;
 console.reportErrorsAsExceptions = false;
 

package.json

@@ -37,6 +37,7 @@
     "@react-navigation/stack": "^6.0.11",
     "@stripe/react-stripe-js": "^2.5.0",
     "@stripe/stripe-js": "^3.0.0",
+    "add": "^2.0.6",
     "deprecated-react-native-prop-types": "^3.0.1",
     "expo": "~52.0.17",
     "expo-av": "~15.0.1",
@@ -66,6 +67,7 @@
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-native": "0.76.5",
+    "react-native-actions-sheet": "^0.9.7",
     "react-native-compressor": "^1.8.24",
     "react-native-country-picker-modal": "^2.0.0",
     "react-native-dialog": "^9.3.0",
@@ -88,7 +90,8 @@
     "react-native-web-linear-gradient": "^1.1.2",
     "react-native-webview": "13.12.5",
     "reactn": "^2.2.7",
-    "rxjs": "^7.6.0"
+    "rxjs": "^7.6.0",
+    "yarn": "^1.22.22"
   },
   "devDependencies": {
     "@babel/core": "^7.20.5",

src/assets/index.js

@@ -81,6 +81,7 @@ import heartOutline from "./icons/heartOutline.png";
 import more from "./icons/more.png";
 import forward from "./icons/forward.png";
 import pause from "./icons/pause.png";
+import share from "./icons/share.png";
 
 export const icons = {
   bell,
@@ -139,6 +140,7 @@ export const icons = {
   more,
   forward,
   pause,
+  share,
 };
 
 import triangle from "./art/triangle.png";

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,6 +27,7 @@ export default ({
       ]}
     >
       <View style={{ flex: 1 }}>
+        {!hideBackButton && (
           <Pressable onPress={() => onBackPressed?.() || goBack()}>
             <Image
               source={icons.chevronDown}
@@ -37,6 +39,7 @@ export default ({
               resizeMode="contain"
             />
           </Pressable>
+        )}
       </View>
 
       <Motion.Text

src/components/Switch.js

@@ -3,26 +3,26 @@ 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
+    <Pressable onPress={() => setValue(!value)}>
-      onPress={() => setValue(!value)}
+      <LinearGradient
+        colors={currentColor}
         style={{
           flexDirection: "row",
           width: switchHeight * 2,
           height: switchHeight,
-        borderColor: currentColor,
-        borderWidth: borderWidth,
           borderRadius: 25,
+          backgroundColor: "red",
           ...containerStyle,
         }}
       >
@@ -42,9 +42,10 @@ export default ({ value, setValue, containerStyle = {} }) => {
             height: itemSize,
             margin: internalMargin,
             borderRadius: 25,
-          backgroundColor: currentColor,
+            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;

src/layouts/Page.js

@@ -36,6 +36,7 @@ export default ({
   onBackPressed = null,
   backgroundImg = background.writingBG,
   headerTitleStyle = {},
+  hideBackButton = false,
 }) => {
   const { currentUID } = useUserData();
 
@@ -81,6 +82,7 @@ export default ({
               rightComponent={rightComponent}
               onBackPressed={onBackPressed}
               headerTitleStyle={headerTitleStyle}
+              hideBackButton={hideBackButton}
             />
           )
         ) : null}

src/navigation/BottomTab.js

@@ -18,6 +18,7 @@ import HomeStack from "./HomeStack";
 import ChatStack from "./ChatStack";
 import SettingsStack from "./SettingsStack";
 import Library from "../screens/Library/Library.js";
+import Profile from "../screens/Profile/Profile.js";
 
 const bottomTabStyles = StyleSheet.create({
   icon: {
@@ -91,7 +92,7 @@ export const BottomTabScreen = () => {
       />
       <BottomTab.Screen
         name={Routes.Profile}
-        component={SettingsStack}
+        component={Profile}
         options={{
           tabBarLabel: "Profil",
           headerShown: false,

src/navigation/MainStack.js

@@ -11,7 +11,7 @@ import Onboarding from "../screens/Onboarding";
 import Login from "../screens/Login";
 import ForgotPassword from "../screens/ForgotPassword";
 
-import Notifications from "../screens/Notifications";
+import Notifications from "../screens/Profile/Notifications";
 
 import TermsOfUse from "../screens/TermsOfUse";
 import PrivacyPolicy from "../screens/PrivacyPolicy";
@@ -51,6 +51,12 @@ import AllMyLikedMusic from "../screens/Library/AllMyLikedMusic";
 import Research from "../screens/Library/Research";
 import MusicDetails from "../screens/Library/MusicDetails";
 import SingerProfile from "../screens/Profile/SingerProfile";
+import EditProfile from "../screens/Profile/EditProfile";
+import Settings from "../screens/Profile/Settings";
+import ChangeEmailAddress from "../screens/Profile/ChangeEmailAddress";
+import ChangePassword from "../screens/Profile/ChangePassword";
+import Language from "../screens/Profile/Language";
+import Reels from "../screens/Profile/Reels";
 
 const screenOptions = {
   headerShown: false,
@@ -79,11 +85,6 @@ const screens = [
     component: BottomTabScreen,
     options: { animationEnabled: false },
   },
-  {
-    name: Routes.Notifications,
-    component: Notifications,
-    title: "Notifications",
-  },
   {
     name: Routes.TermsOfUse,
     component: TermsOfUse,
@@ -238,6 +239,34 @@ const screens = [
     name: Routes.SingerProfile,
     component: SingerProfile,
   },
+  {
+    name: Routes.EditProfile,
+    component: EditProfile,
+  },
+  {
+    name: Routes.Settings,
+    component: Settings,
+  },
+  {
+    name: Routes.ChangeEmailAddress,
+    component: ChangeEmailAddress,
+  },
+  {
+    name: Routes.ChangePassword,
+    component: ChangePassword,
+  },
+  {
+    name: Routes.Notifications,
+    component: Notifications,
+  },
+  {
+    name: Routes.Language,
+    component: Language,
+  },
+  {
+    name: Routes.Reels,
+    component: Reels,
+  },
 ];
 
 export default function Main() {

src/navigation/Routes.js

@@ -6,7 +6,6 @@ export const Routes = {
 
   BottomTab: "BottomTab",
   Welcome: "Welcome",
-  Notifications: "Notifications",
 
   HomeStack: "HomeStack",
   Home: "Home",
@@ -16,7 +15,6 @@ export const Routes = {
   Chat: "Chat",
 
   SettingsStack: "SettingsStack",
-  Settings: "Settings",
   ProjectSettings: "ProjectSettings",
   AccountSettings: "AccountSettings",
 
@@ -70,4 +68,11 @@ export const Routes = {
 
   Profile: "Profile",
   SingerProfile: "SingerProfile",
+  EditProfile: "EditProfile",
+  Settings: "Settings",
+  ChangeEmailAddress: "ChangeEmailAddress",
+  ChangePassword: "ChangePassword",
+  Notifications: "Notifications",
+  Language: "Language",
+  Reels: "Reels",
 };

src/navigation/SettingsStack.js

@@ -4,9 +4,9 @@ import { createStackNavigator } from "@react-navigation/stack";
 import { Palette } from "../styles";
 import { Routes } from "./Routes";
 
-import Settings from "../screens/Settings";
 import ProjectSettings from "../screens/ProjectSettings";
 import AccountSettings from "../screens/AccountSettings";
+import Settings from "../screens/Profile/Settings";
 
 const screenOptions = {
   headerShown: false,

src/providers/SharedProviders.js

@@ -8,6 +8,7 @@ import SplashAnimationProvider from "./SplashAnimationProvider";
 import UniversalLinkProvider from "./UniversalLinkProvider";
 import PremiumProvider from "./PremiumProvider";
 import StripeEmbeddedProvider from "./StripeEmbeddedProvider";
+import { SheetProvider } from "react-native-actions-sheet";
 
 const SharedProviders = ({ children }) => {
   const providers = [
@@ -19,6 +20,7 @@ const SharedProviders = ({ children }) => {
     [StripeEmbeddedProvider, {}],
     [PremiumProvider, {}],
     [UniversalLinkProvider, {}],
+    [SheetProvider, {}],
   ];
 
   // Dynamically nest the providers using reduce

src/screens/Library/AllMyLikedMusic.js

@@ -1,11 +1,18 @@
-import { View, Text } from "react-native";
+import { View, Text, Pressable } from "react-native";
-import React from "react";
+import React, { useState } from "react";
 import Page from "../../layouts/Page";
 import { background } from "../../assets";
-import { gutters } from "../../styles";
+import { gutters, Palette } from "../../styles";
 import MusicCard from "./components/MusicCard";
+import Animated, { Easing, FadeIn, FadeOut } from "react-native-reanimated";
+import { BlurView } from "expo-blur";
+import { FONT_FAMILY } from "../../styles/Fonts";
+import { SheetManager } from "react-native-actions-sheet";
 
 const AllMyLikedMusic = () => {
+  const [top, setTop] = useState(0);
+  const [showMenu, setShowMenu] = useState(false);
+
   return (
     <Page
       headerType="NAVIGATION"
@@ -16,8 +23,65 @@ const AllMyLikedMusic = () => {
       <View style={{ flex: 1 }}>
         <View style={{ gap: 10 }}>
           {Array.from({ length: 3 }).map((_, index) => (
-            <MusicCard key={index} />
+            <MusicCard
+              key={index}
+              onPressMore={(posTop) => {
+                setTop(posTop);
+                if (showMenu) {
+                  if (posTop === top) {
+                    setShowMenu(false);
+                  } else {
+                    setShowMenu(false);
+                    setTimeout(() => {
+                      setShowMenu(true);
+                    }, 300);
+                  }
+                } else {
+                  setShowMenu(true);
+                }
+              }}
+            />
           ))}
+          {showMenu && (
+            <Animated.View
+              entering={FadeIn.duration(300).easing(Easing.ease)}
+              exiting={FadeOut.duration(300).easing(Easing.ease)}
+              style={{
+                position: "absolute",
+                right: 0,
+                top: top,
+                zIndex: 2,
+              }}
+            >
+              <Pressable
+                onPress={() => {
+                  setShowMenu(false);
+                  SheetManager.show("Delete");
+                }}
+              >
+                <BlurView
+                  intensity={20}
+                  style={{
+                    paddingHorizontal: 12,
+                    paddingVertical: 10,
+                    backgroundColor: Palette.glass,
+                    borderRadius: 12,
+                    overflow: "hidden",
+                  }}
+                >
+                  <Text
+                    style={{
+                      fontSize: 14,
+                      color: Palette.white,
+                      fontFamily: FONT_FAMILY.InterRegular,
+                    }}
+                  >
+                    Supprimer de la playlist
+                  </Text>
+                </BlurView>
+              </Pressable>
+            </Animated.View>
+          )}
         </View>
       </View>
     </Page>

src/screens/Library/MusicDetails.js

@@ -13,15 +13,31 @@ import { Palette } from "../../styles";
 import Style, { gutters, size } from "../../styles/Style";
 import { FONT_FAMILY } from "../../styles/Fonts";
 import Slider from "../../components/Slider";
+import { useRoute } from "@react-navigation/core";
+import { SheetManager } from "react-native-actions-sheet";
 
 const MusicDetails = () => {
+  const params = useRoute().params;
+  const action = params?.action;
   const [fav, setFav] = useState(false);
 
   return (
     <Page
       headerType="NAVIGATION"
-      title="Recherche"
+      title={action === "userProfile" ? "Mon profil" : "Recherche"}
-      backgroundImg={background.libraryBG2}
+      backgroundImg={
+        action === "userProfile" ? background.profileBG : background.libraryBG2
+      }
+      {...(action === "userProfile" && {
+        containerStyle: {
+          backgroundColor: "#0000004D",
+        },
+        rightComponent: () => (
+          <Pressable onPress={() => SheetManager.show("DeleteAudio")}>
+            <Image source={icons.trash} />
+          </Pressable>
+        ),
+      })}
     >
       <ScrollView
         contentContainerStyle={{

src/screens/Library/components/MusicCard.js

@@ -1,5 +1,5 @@
 import { View, Text, Image, Pressable, StyleSheet } from "react-native";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { Palette, Style } from "../../../styles";
 import { icons, img } from "../../../assets";
 import { size } from "../../../styles/Style";
@@ -8,14 +8,30 @@ import { FONT_FAMILY } from "../../../styles/Fonts";
 
 const MusicCard = ({ onPress, onPressMore }) => {
   const [selected, setSelected] = useState(false);
+  const [open, setOpen] = useState(false);
+  const [layout, setLayout] = useState(null);
+  const [menuPos, setMenuPos] = useState(0);
+
+  useEffect(() => {
+    if (layout) {
+      const top = layout?.y + 45;
+      setMenuPos(top);
+    }
+  }, [layout]);
+
+  const onPressMenu = () => {
+    onPressMore?.(menuPos);
+  };
 
   return (
+    <>
       <Pressable
         style={{
           ...Style.containerRow,
           gap: 6,
         }}
         onPress={onPress}
+        onLayout={(e) => setLayout(e.nativeEvent.layout)}
       >
         <Image
           source={img.placeholder2}
@@ -47,13 +63,27 @@ const MusicCard = ({ onPress, onPressMore }) => {
                   resizeMode="contain"
                 />
               </Pressable>
-            <Pressable onPress={onPressMore}>
+              <Pressable onPress={onPressMenu}>
                 <Image source={icons.more} />
               </Pressable>
             </View>
           </BlurView>
         </View>
       </Pressable>
+      {/* {open && (
+        <View
+          style={{
+            width: 100,
+            height: 50,
+            backgroundColor: "red",
+            position: "absolute",
+            right: 0,
+            top: menuPos,
+            zIndex: 2,
+          }}
+        />
+      )} */}
+    </>
   );
 };
 
@@ -76,4 +106,7 @@ const styles = StyleSheet.create({
     color: Palette.white,
     fontFamily: FONT_FAMILY.InterRegular,
   },
+  filterContainer: {
+    backgroundColor: Palette.tran,
+  },
 });

src/screens/Notifications.js

@@ -1,92 +0,0 @@
-import React, { useEffect } from "reactn";
-import { Text, View, FlatList } from "react-native";
-import { useDataFromRef } from "react-native-minuit/src/hooks";
-import moment from "moment";
-import { Motion } from "@legendapp/motion";
-
-import Page from "../layouts/Page";
-
-import { Fonts, Style } from "../styles";
-import { notificationsRef } from "../config/firebase";
-
-import { LoaderIndicator } from "../providers/LoadingProvider";
-
-export default (props) => {
-  const baseNotificationRef = notificationsRef;
-
-  useEffect(() => {
-    markAsRead();
-  }, []);
-
-  const markAsRead = async () => {
-    try {
-    } catch (error) {
-      console.error(error);
-    }
-  };
-
-  const {
-    data: notificationList,
-    loading,
-    loadMore,
-  } = useDataFromRef({
-    ref: baseNotificationRef.orderBy("timestamp", "desc"),
-    usePagination: true,
-    batchSize: 40,
-    documentID: "notificationID",
-  });
-
-  return (
-    <Page headerType="NAVIGATE" title="Notifications">
-      <FlatList
-        removeClippedSubviews={true}
-        estimatedItemSize={100}
-        showsVerticalScrollIndicator={false}
-        data={notificationList}
-        renderItem={({ item, index }) => {
-          const { title = "", timestamp } = item;
-
-          const randomDuration = Math.floor(Math.random() * 1000) + 500;
-
-          return (
-            <Motion.Pressable
-              key={index}
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              transition={{
-                opacity: {
-                  type: "tween",
-                  duration: randomDuration,
-                },
-              }}
-              style={Style.containerSpaceBetween}
-              onPress={() => {}}
-            >
-              <View style={Style.containerRow}>
-                <Text
-                  numberOfLines={2}
-                  style={Fonts({ style: { width: "100%" } })}
-                >
-                  {title}
-                </Text>
-              </View>
-
-              <Text style={Fonts({ style: { opacity: 0.5 } })}>
-                {moment(timestamp.toDate()).format("[Le] DD/MM [à] HH:mm")}
-              </Text>
-            </Motion.Pressable>
-          );
-        }}
-        keyExtractor={(item) =>
-          `Notifications_${item.notificationID}_${item.projectID}`
-        }
-        ItemSeparatorComponent={() => (
-          <View style={{ ...Style.separatorHorizontal }} />
-        )}
-        ListFooterComponent={loading ? <LoaderIndicator /> : null}
-        onEndReached={loadMore}
-        onEndReachedThreshold={0.5}
-      />
-    </Page>
-  );
-};

src/screens/Profile/ChangeEmailAddress.js

@@ -0,0 +1,49 @@
+import { View } from "react-native";
+import React from "react";
+import Page from "../../layouts/Page";
+import { background } from "../../assets";
+import { gutters, Palette } from "../../styles";
+import { responsiveHeight } from "react-native-responsive-dimensions";
+import { BlurView } from "expo-blur";
+import EditInput from "./components/EditInput";
+import GradientButton from "../../components/GradientButton";
+
+const ChangeEmailAddress = () => {
+  return (
+    <Page
+      headerType="NAVIGATE"
+      title="Paramètres"
+      backgroundImg={background.profileBG}
+      contentContainerStyle={{
+        paddingBottom: gutters * 4,
+      }}
+      containerStyle={{
+        backgroundColor: "#0000004D",
+      }}
+    >
+      <View style={{ flex: 1, marginTop: responsiveHeight(2) }}>
+        <BlurView
+          intensity={20}
+          style={{
+            paddingHorizontal: 20,
+            paddingVertical: 23,
+            borderRadius: 20,
+            overflow: "hidden",
+            backgroundColor: Palette.glass,
+          }}
+        >
+          <EditInput placeholder="Adresse mail" label="Adresse mail" />
+        </BlurView>
+      </View>
+      <GradientButton
+        title="Enregistrer les modifications"
+        containerStyle={{
+          width: "80%",
+          alignSelf: "center",
+        }}
+      />
+    </Page>
+  );
+};
+
+export default ChangeEmailAddress;

src/screens/Profile/ChangePassword.js

@@ -0,0 +1,66 @@
+import { View, Text, Pressable } from "react-native";
+import React from "react";
+import Page from "../../layouts/Page";
+import { background } from "../../assets";
+import { gutters, Palette } from "../../styles";
+import { responsiveHeight } from "react-native-responsive-dimensions";
+import { BlurView } from "expo-blur";
+import EditInput from "./components/EditInput";
+import GradientButton from "../../components/GradientButton";
+import { FONT_FAMILY } from "../../styles/Fonts";
+
+const ChangePassword = () => {
+  return (
+    <Page
+      headerType="NAVIGATE"
+      title="Paramètres"
+      backgroundImg={background.profileBG}
+      contentContainerStyle={{
+        paddingBottom: gutters * 4,
+      }}
+      containerStyle={{
+        backgroundColor: "#0000004D",
+      }}
+    >
+      <View style={{ flex: 1, marginTop: responsiveHeight(2) }}>
+        <BlurView
+          intensity={20}
+          style={{
+            paddingHorizontal: 20,
+            paddingVertical: 16,
+            borderRadius: 20,
+            overflow: "hidden",
+            backgroundColor: Palette.glass,
+            gap: 4,
+          }}
+        >
+          <EditInput
+            placeholder="Mot de passe"
+            label="Mot de passe"
+            type="password"
+          />
+          <Pressable>
+            <Text
+              style={{
+                fontSize: 12,
+                color: Palette.white,
+                fontFamily: FONT_FAMILY.HelveticaNeueRegular,
+              }}
+            >
+              Mot de passe oublié?
+            </Text>
+          </Pressable>
+        </BlurView>
+      </View>
+      <GradientButton
+        title="Enregistrer les modifications"
+        containerStyle={{
+          width: "80%",
+          alignSelf: "center",
+        }}
+      />
+    </Page>
+  );
+};
+
+export default ChangePassword;

src/screens/Profile/EditProfile.js

@@ -0,0 +1,72 @@
+import { View, Text, Image, TextInput } from "react-native";
+import React from "react";
+import Page from "../../layouts/Page";
+import { background, img } from "../../assets";
+import { gutters, Palette } from "../../styles";
+import { BlurView } from "expo-blur";
+import Style, { size } from "../../styles/Style";
+import { FONT_FAMILY } from "../../styles/Fonts";
+import GradientButton from "../../components/GradientButton";
+import { responsiveHeight } from "react-native-responsive-dimensions";
+import { goBack } from "../../navigation/NavigationService";
+import EditInput from "./components/EditInput";
+
+const EditProfile = () => {
+  return (
+    <Page
+      headerType="NAVIGATE"
+      backgroundImg={background.profileBG}
+      contentContainerStyle={{
+        paddingBottom: gutters * 2,
+      }}
+      containerStyle={{
+        backgroundColor: "#0000004D",
+      }}
+    >
+      <View style={{ flex: 1, marginTop: responsiveHeight(2) }}>
+        <BlurView
+          intensity={20}
+          style={{
+            paddingVertical: 14,
+            backgroundColor: Palette.glass,
+            paddingHorizontal: 20,
+            borderRadius: 20,
+            overflow: "hidden",
+            gap: 24,
+          }}
+        >
+          <View style={{ alignItems: "center" }}>
+            <Image
+              source={img.profile}
+              style={{
+                ...size({ size: 108 }),
+                borderRadius: 100,
+              }}
+            />
+            <Text
+              style={{
+                fontSize: 14,
+                color: Palette.white,
+                fontFamily: FONT_FAMILY.InterRegular,
+              }}
+            >
+              Modifier la photo
+            </Text>
+          </View>
+          <EditInput label="Pseudo" placeholder="Pseudo" />
+
+          <GradientButton
+            title="Enregistrer les modifications"
+            containerStyle={{
+              width: "80%",
+              alignSelf: "center",
+            }}
+            onPress={goBack}
+          />
+        </BlurView>
+      </View>
+    </Page>
+  );
+};
+
+export default EditProfile;

src/screens/Profile/Language.js

@@ -0,0 +1,96 @@
+import { View, Text, Pressable } from "react-native";
+import React, { useState } from "react";
+import Page from "../../layouts/Page";
+import { background } from "../../assets";
+import { gutters, Palette } from "../../styles";
+import { responsiveHeight } from "react-native-responsive-dimensions";
+import { BlurView } from "expo-blur";
+import { FONT_FAMILY } from "../../styles/Fonts";
+import Style, { size } from "../../styles/Style";
+
+const LANGUAGE = ["Anglais", "Français", "Chinois", "Japonais", "Coreen"];
+
+const Language = () => {
+  const [selected, setSelected] = useState("Français");
+
+  return (
+    <Page
+      headerType="NAVIGATE"
+      title="Paramètres"
+      backgroundImg={background.profileBG}
+      contentContainerStyle={{
+        paddingBottom: gutters * 4,
+      }}
+      containerStyle={{
+        backgroundColor: "#0000004D",
+      }}
+    >
+      <View style={{ flex: 1, marginTop: responsiveHeight(2) }}>
+        <BlurView
+          intensity={20}
+          style={{
+            paddingVertical: 10,
+            paddingHorizontal: 20,
+            backgroundColor: Palette.glass,
+            gap: 10,
+            borderRadius: 20,
+            overflow: "hidden",
+          }}
+        >
+          <Text
+            style={{
+              fontSize: 20,
+              color: Palette.white,
+              fontFamily: FONT_FAMILY.HelveticaNeueMedium,
+            }}
+          >
+            Langue
+          </Text>
+          <View style={{ gap: 12 }}>
+            {LANGUAGE.map((item, index) => (
+              <Pressable
+                key={index}
+                style={{
+                  ...Style.containerRow,
+                  gap: 6,
+                }}
+                onPress={() => setSelected(item)}
+              >
+                <View
+                  style={{
+                    ...size({ size: 17 }),
+                    ...Style.containerCenter,
+                    borderWidth: 1,
+                    borderRadius: 100,
+                    borderColor: Palette.white,
+                  }}
+                >
+                  {selected === item && (
+                    <View
+                      style={{
+                        ...size({ size: 9 }),
+                        borderRadius: 100,
+                        backgroundColor: Palette.white,
+                      }}
+                    />
+                  )}
+                </View>
+                <Text
+                  style={{
+                    fontSize: 16,
+                    color: Palette.white,
+                    fontFamily: FONT_FAMILY.HelveticaNeueRegular,
+                  }}
+                >
+                  {item}
+                </Text>
+              </Pressable>
+            ))}
+          </View>
+        </BlurView>
+      </View>
+    </Page>
+  );
+};
+
+export default Language;

src/screens/Profile/Notifications.js

@@ -0,0 +1,65 @@
+import React from "reactn";
+import Page from "../../layouts/Page";
+import { gutters, Palette, Style } from "../../styles";
+import { background } from "../../assets";
+import { Text, View } from "react-native";
+import { responsiveHeight } from "react-native-responsive-dimensions";
+import { BlurView } from "expo-blur";
+import Switch from "../../components/Switch";
+import { useState } from "react";
+import { FONT_FAMILY } from "../../styles/Fonts";
+
+export default (props) => {
+  const [isSwitch, setIsSwitch] = useState(false);
+
+  return (
+    <Page
+      headerType="NAVIGATE"
+      title="Paramètres"
+      backgroundImg={background.profileBG}
+      contentContainerStyle={{
+        paddingBottom: gutters * 4,
+      }}
+      containerStyle={{
+        backgroundColor: "#0000004D",
+      }}
+    >
+      <View style={{ flex: 1, marginTop: responsiveHeight(2) }}>
+        <BlurView
+          intensity={20}
+          style={{
+            gap: 12,
+            paddingVertical: 15,
+            paddingHorizontal: 20,
+            borderRadius: 20,
+            overflow: "hidden",
+            backgroundColor: Palette.glass,
+          }}
+        >
+          <View style={Style.containerSpaceBetween}>
+            <Text
+              style={{
+                fontSize: 20,
+                color: Palette.white,
+                fontFamily: FONT_FAMILY.HelveticaNeueMedium,
+              }}
+            >
+              Notifications
+            </Text>
+            <Switch value={isSwitch} setValue={setIsSwitch} />
+          </View>
+          <Text
+            style={{
+              fontSize: 12,
+              color: Palette.white,
+              fontFamily: FONT_FAMILY.InterRegular,
+            }}
+          >
+            Nous t’encourageons à activer les notifications pour découvrir les
+            derniers classements, les nouveaux sons et les meilleurs playbacks.
+          </Text>
+        </BlurView>
+      </View>
+    </Page>
+  );
+};

src/screens/Profile/Profile.js

@@ -1,12 +1,229 @@
-import { View, Text } from "react-native";
+import {
-import React from "react";
+  View,
+  Text,
+  Pressable,
+  Image,
+  FlatList,
+  StyleSheet,
+} from "react-native";
+import React, { useState } from "react";
+import Page from "../../layouts/Page";
+import { background, icons, img } from "../../assets";
+import { BlurView } from "expo-blur";
+import { responsiveHeight } from "react-native-responsive-dimensions";
+import Style, { gutters, size } from "../../styles/Style";
+import { Palette } from "../../styles";
+import { FONT_FAMILY } from "../../styles/Fonts";
+import GradientButton from "../../components/GradientButton";
+import BorderGradient from "../../components/BorderGradient/BorderGradient";
+import MusicCard from "../Library/components/MusicCard";
+import { SheetManager } from "react-native-actions-sheet";
+import { navigate } from "../../navigation/NavigationService";
+import { Routes } from "../../navigation";
 
 const Profile = () => {
+  const [selected, setSelected] = useState("Chansons");
+
+  const onPressMenu = (item) => {
+    setSelected(item);
+  };
+
   return (
-    <View>
+    <Page
-      <Text>Profile</Text>
+      backgroundImg={background.profileBG}
+      headerType="NAVIGATE"
+      hideBackButton
+      contentContainerStyle={{
+        paddingBottom: gutters * 2,
+      }}
+      containerStyle={{
+        backgroundColor: "#0000004D",
+      }}
+      rightComponent={() => (
+        <Pressable onPress={() => SheetManager.show("ProfileSettings")}>
+          <Image source={icons.more} />
+        </Pressable>
+      )}
+    >
+      <View style={{ flex: 1, marginTop: responsiveHeight(2), gap: 20 }}>
+        <View style={{ borderRadius: 20, overflow: "hidden" }}>
+          <BlurView
+            intensity={20}
+            style={{
+              paddingVertical: 14,
+              backgroundColor: Palette.glass,
+              paddingHorizontal: 20,
+            }}
+          >
+            <View style={{ alignItems: "center" }}>
+              <Image
+                source={img.profile}
+                style={{
+                  ...size({ size: 108 }),
+                  borderRadius: 100,
+                }}
+              />
+              <Text
+                style={{
+                  fontSize: 22,
+                  color: Palette.white,
+                  fontFamily: FONT_FAMILY.InterSemiBold,
+                }}
+              >
+                elia.mrn
+              </Text>
             </View>
+            <View style={{ ...Style.containerRow, gap: 10, marginTop: 10 }}>
+              <View style={{ flex: 1, alignItems: "center" }}>
+                <Text style={styles.value}>0</Text>
+                <Text style={styles.label}>playbacks</Text>
+              </View>
+              <View style={{ flex: 1, alignItems: "center" }}>
+                <Text style={styles.value}>880</Text>
+                <Text style={styles.label}>abonnés</Text>
+              </View>
+              <View style={{ flex: 1, alignItems: "center" }}>
+                <Text style={styles.value}>6</Text>
+                <Text style={styles.label}>abonnements</Text>
+              </View>
+            </View>
+            <GradientButton
+              title="Suivre"
+              containerStyle={{
+                width: "80%",
+                alignSelf: "center",
+                marginTop: 18,
+              }}
+            />
+          </BlurView>
+        </View>
+        <View
+          style={{
+            ...Style.containerRow,
+            gap: 6,
+          }}
+        >
+          {["Chansons", "Playbacks", "Clips"].map((item, index) => (
+            <Pressable
+              key={index}
+              onPress={() => onPressMenu(item)}
+              style={{ flex: 1 }}
+            >
+              <BorderGradient
+                gradientProps={{
+                  colors:
+                    selected === item
+                      ? ["#FFFFFF00", "#FFFFFF"]
+                      : [Palette.tran, Palette.tran],
+                  locations: [0, 1],
+                  start: { x: 0, y: 0 },
+                  end: { x: 1, y: 0 },
+                }}
+                style={styles.borderGradient}
+              />
+              <View style={styles.blurContainer}>
+                <BlurView intensity={20} style={styles.blurView}>
+                  <Text style={styles.menu}>{item}</Text>
+                </BlurView>
+              </View>
+            </Pressable>
+          ))}
+        </View>
+        {selected === "Playbacks" && (
+          <View style={{ flex: 1 }}>
+            <FlatList
+              data={Array.from({ length: 6 })}
+              numColumns={3}
+              contentContainerStyle={{ gap: 14 }}
+              columnWrapperStyle={{ gap: 10 }}
+              renderItem={() => (
+                <Pressable
+                  style={{ flex: 1, gap: 6 }}
+                  onPress={() => navigate(Routes.Reels)}
+                >
+                  <Image
+                    source={img.placeholder3}
+                    style={{
+                      width: "100%",
+                      height: 147,
+                      borderRadius: 10,
+                    }}
+                  />
+                  <Text
+                    style={{
+                      fontSize: 12,
+                      color: Palette.white,
+                      fontFamily: FONT_FAMILY.InterRegular,
+                    }}
+                  >
+                    Pour Lili
+                  </Text>
+                </Pressable>
+              )}
+            />
+          </View>
+        )}
+        {selected === "Chansons" && (
+          <View style={{ flex: 1 }}>
+            <FlatList
+              data={Array.from({ length: 3 })}
+              contentContainerStyle={{
+                gap: 10,
+              }}
+              renderItem={() => (
+                <MusicCard
+                  onPress={() =>
+                    navigate(Routes.MusicDetails, {
+                      action: "userProfile",
+                    })
+                  }
+                />
+              )}
+            />
+          </View>
+        )}
+      </View>
+    </Page>
   );
 };
 
 export default Profile;
+
+const styles = StyleSheet.create({
+  value: {
+    fontSize: 16,
+    color: Palette.white,
+    fontFamily: FONT_FAMILY.InterRegular,
+  },
+  label: {
+    fontSize: 12,
+    color: Palette.white,
+    fontFamily: FONT_FAMILY.InterRegular,
+  },
+  menu: {
+    fontSize: 12,
+    color: Palette.white,
+    fontFamily: FONT_FAMILY.InterRegular,
+  },
+  borderGradient: {
+    borderWidth: 1,
+    borderRadius: 10,
+    height: 33,
+    position: "absolute",
+    zIndex: 1,
+    width: "100%",
+  },
+  blurContainer: {
+    height: 33,
+    zIndex: -1,
+    borderRadius: 10,
+    overflow: "hidden",
+    backgroundColor: Palette.glass,
+  },
+  blurView: {
+    width: "100%",
+    height: "100%",
+    paddingHorizontal: 10,
+    ...Style.containerCenter,
+  },
+});

src/screens/Profile/Reels.js

@@ -0,0 +1,85 @@
+import { View, Text, Pressable, Image } from "react-native";
+import React, { useState } from "react";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { icons, img } from "../../assets";
+import Style, { gutters, size } from "../../styles/Style";
+import { Palette } from "../../styles";
+import { FONT_FAMILY } from "../../styles/Fonts";
+import { goBack } from "../../navigation/NavigationService";
+import { SheetManager } from "react-native-actions-sheet";
+
+const Reels = () => {
+  const { top } = useSafeAreaInsets();
+  const [isFav, setIsFav] = useState(false);
+
+  return (
+    <View style={{ flex: 1 }}>
+      <View
+        style={{
+          ...Style.containerRow,
+          position: "absolute",
+          top: top + 10,
+          zIndex: 1,
+          paddingHorizontal: gutters,
+        }}
+      >
+        <View style={{ flex: 1 }}>
+          <Pressable onPress={goBack}>
+            <Image
+              source={icons.chevronDown}
+              style={{
+                ...size({ size: 15 }),
+                transform: [{ rotate: "90deg" }],
+              }}
+              resizeMode="contain"
+            />
+          </Pressable>
+        </View>
+        <Text
+          style={{
+            fontSize: 16,
+            color: Palette.white,
+            fontFamily: FONT_FAMILY.InterRegular,
+          }}
+        >
+          Mon Profile
+        </Text>
+        <View style={{ flex: 1, alignItems: "flex-end" }}>
+          <Pressable onPress={() => SheetManager.show("DeletePlayback")}>
+            <Image source={icons.trash} />
+          </Pressable>
+        </View>
+      </View>
+      <Image
+        source={img.placeholder3}
+        style={{ width: "100%", height: "100%" }}
+      />
+      <View
+        style={{
+          position: "absolute",
+          zIndex: 1,
+          bottom: gutters * 2,
+          right: 33,
+          gap: 20,
+        }}
+      >
+        <Pressable onPress={() => setIsFav(!isFav)}>
+          <Image
+            source={isFav ? icons.heart : icons.heartOutline}
+            style={size({ size: 26 })}
+            resizeMode="contain"
+          />
+        </Pressable>
+        <Pressable>
+          <Image
+            source={icons.share}
+            style={size({ size: 26 })}
+            resizeMode="contain"
+          />
+        </Pressable>
+      </View>
+    </View>
+  );
+};
+
+export default Reels;

src/screens/Profile/Settings.js

@@ -0,0 +1,82 @@
+import { View, Text } from "react-native";
+import React from "react";
+import Page from "../../layouts/Page";
+import { background } from "../../assets";
+import { gutters, Palette } from "../../styles";
+import { responsiveHeight } from "react-native-responsive-dimensions";
+import BlurItemButton from "../../components/BlurItemButton";
+import BorderGradientButton from "../../components/BorderGradientButton";
+import { SheetManager } from "react-native-actions-sheet";
+import { navigate } from "../../navigation/NavigationService";
+import { Routes } from "../../navigation";
+
+const SETTINGS = [
+  {
+    title: "Adresse mail",
+    action: () => {
+      navigate(Routes.ChangeEmailAddress);
+    },
+  },
+  {
+    title: "Modifier mon mot de passe",
+    action: () => {
+      navigate(Routes.ChangePassword);
+    },
+  },
+  {
+    title: "Notifications",
+    action: () => {
+      navigate(Routes.Notifications);
+    },
+  },
+  {
+    title: "Langue",
+    action: () => {
+      navigate(Routes.Language);
+    },
+  },
+  {
+    title: "Gérer mon abonnement",
+    action: () => {},
+  },
+];
+
+const Settings = () => {
+  return (
+    <Page
+      headerType="NAVIGATION"
+      title="Paramètres"
+      backgroundImg={background.profileBG}
+      contentContainerStyle={{
+        paddingBottom: gutters * 2,
+      }}
+      containerStyle={{
+        backgroundColor: "#0000004D",
+      }}
+    >
+      <View style={{ flex: 1, marginTop: responsiveHeight(2) }}>
+        <View style={{ flex: 1, gap: 10 }}>
+          {SETTINGS.map((item, index) => (
+            <BlurItemButton
+              key={index}
+              title={item.title}
+              onPress={item.action}
+            />
+          ))}
+        </View>
+        <View style={{ width: "80%", gap: 5, alignSelf: "center" }}>
+          <BorderGradientButton title="Déconnexion" />
+          <BorderGradientButton
+            title="Supprimer mon profil"
+            titleStyle={{
+              color: Palette.red,
+            }}
+            onPress={() => SheetManager.show("DeleteAccount")}
+          />
+        </View>
+      </View>
+    </Page>
+  );
+};
+
+export default Settings;

src/screens/Profile/components/EditInput.js

@@ -0,0 +1,72 @@
+import { View, Text, TextInput, Image, Pressable } from "react-native";
+import React, { useState } from "react";
+import { Palette, Style } from "../../../styles";
+import { FONT_FAMILY } from "../../../styles/Fonts";
+import { BlurView } from "expo-blur";
+import { icons } from "../../../assets";
+
+const EditInput = ({ label = "", placeholder = "", type = "default" }) => {
+  const [showPassword, setShowPassword] = useState(false);
+
+  return (
+    <View style={{ gap: 4 }}>
+      <View
+        style={{
+          ...Style.containerSpaceBetween,
+        }}
+      >
+        <Text
+          style={{
+            fontSize: 16,
+            color: Palette.white,
+            fontFamily: FONT_FAMILY.InterRegular,
+          }}
+        >
+          {label}
+        </Text>
+        <Text
+          style={{
+            fontSize: 12,
+            color: Palette.white,
+            fontFamily: FONT_FAMILY.InterRegular,
+          }}
+        >
+          Modifier
+        </Text>
+      </View>
+      <BlurView
+        intensity={20}
+        style={{
+          paddingHorizontal: 12,
+          borderRadius: 12,
+          backgroundColor: Palette.glass,
+          overflow: "hidden",
+          height: 52,
+          ...Style.containerRow,
+        }}
+      >
+        <TextInput
+          placeholder={placeholder}
+          placeholderTextColor={Palette.gray}
+          style={{
+            fontSize: 16,
+            color: Palette.white,
+            fontFamily: FONT_FAMILY.InterRegular,
+            flex: 1,
+          }}
+          keyboardType={type}
+          {...(type === "password" && {
+            secureTextEntry: !showPassword,
+          })}
+        />
+        {type === "password" && (
+          <Pressable onPress={() => setShowPassword(!showPassword)}>
+            <Image source={icons.eye} />
+          </Pressable>
+        )}
+      </BlurView>
+    </View>
+  );
+};
+
+export default EditInput;

src/screens/Settings.js

@@ -1,191 +0,0 @@
-import React, { useRef, useContext, useGlobal } from "reactn";
-import { Text, View } from "react-native";
-
-import { WebViewContext } from "../providers/WebViewProvider";
-import { useUserData } from "../providers/UserDataProvider";
-
-import Page from "../layouts/Page";
-
-import { Routes } from "../navigation";
-import { responsiveHeight } from "../actions/responsiveSizes.js";
-
-import ItemRowList from "../components/ItemRowList";
-import BottomSheetContainer from "../components/BottomSheetContainer.js";
-import IconSelector from "../components/IconSelector.js";
-
-import useLayoutType from "../hooks/useLayoutType";
-
-import { Fonts, Palette, Style, gutters } from "../styles";
-import { icons } from "../assets";
-
-import { onStoreReview, openLinkInBrowser } from "../helpers";
-import {
-  agencyWhatsAppNumber,
-  calendlyUrl,
-  instagramUrl,
-  termsOfSalesUrl,
-} from "../data";
-import IconContainer from "../components/IconContainer.js";
-
-export default ({ navigation }) => {
-  const { isDesktop, isWeb, isNative } = useLayoutType();
-  const { onSignOut } = useUserData();
-
-  const [currentProjectID] = useGlobal("currentProjectID");
-
-  const { setWebViewUrl } = useContext(WebViewContext);
-
-  const appIconBottomSheetRef = useRef(null);
-
-  const settingsList = [
-    {
-      sectionTitle: "Projet",
-      icon: icons.tools,
-      optionList: [
-        {
-          title: "Paramètres",
-          action: () => navigation.navigate(Routes.ProjectSettings),
-        },
-      ],
-      condition: currentProjectID,
-    },
-    {
-      sectionTitle: "Compte",
-      icon: icons.user,
-      optionList: [
-        {
-          title: "Paramètres du compte",
-          action: () => navigation.navigate(Routes.AccountSettings),
-        },
-      ],
-    },
-    {
-      sectionTitle: "Support",
-      icon: icons.support,
-      optionList: [
-        {
-          title: "Prendre rendez-vous",
-          action: () => setWebViewUrl(calendlyUrl),
-        },
-        {
-          title: "Nous suivre sur Instagram",
-          action: () => setWebViewUrl(instagramUrl),
-        },
-        {
-          title: "Nous contacter sur WhatsApp",
-          action: () => {
-            openLinkInBrowser({
-              url: `http://api.whatsapp.com/send/?phone=${agencyWhatsAppNumber}&text&type=phone_number`,
-            });
-          },
-        },
-        {
-          title: "Changer l'icône de l'application",
-          action: () => {
-            appIconBottomSheetRef.current?.expand();
-          },
-          condition: isNative,
-        },
-        {
-          title: "Noter l'application",
-          action: () => {
-            onStoreReview();
-          },
-          condition: !isWeb,
-        },
-      ],
-    },
-    {
-      sectionTitle: "Légal",
-      icon: icons.law,
-      optionList: [
-        {
-          title: "Conditions générales d'utilisation",
-          action: () => navigation.navigate(Routes.TermsOfUse),
-        },
-        {
-          title: "Conditions générales de vente",
-          action: () => setWebViewUrl(termsOfSalesUrl),
-        },
-        {
-          title: "Politique de confidentialité",
-          action: () => navigation.navigate(Routes.PrivacyPolicy),
-        },
-        {
-          title: "Se déconnecter",
-          action: async () => {
-            await onSignOut();
-          },
-          textStyle: { color: Palette.red },
-          addMarginTopFromPrevious: true,
-        },
-      ],
-    },
-  ]
-    .filter(({ condition = true }) => condition)
-    .filter(
-      ({ optionList }) =>
-        optionList.filter(({ condition }) => !condition || condition).length > 0
-    );
-
-  return (
-    <>
-      <Page
-        headerType={isDesktop ? "NONE" : "BASE"}
-        scrollEnabled
-        pageTitle="Paramètres"
-        contentContainerStyle={{
-          paddingTop: gutters / 2,
-          paddingBottom: responsiveHeight(50),
-        }}
-      >
-        {settingsList.map(
-          ({ icon, sectionTitle = "", optionList = [] }, index) => (
-            <View
-              key={index}
-              style={{ ...Style.containerItem, marginBottom: gutters / 2 }}
-            >
-              <View
-                style={{
-                  ...Style.containerRow,
-                }}
-              >
-                <IconContainer icon={icon} />
-
-                <Text
-                  style={Fonts({
-                    type: "title",
-                    color: Palette.white,
-                    style: {},
-                  })}
-                >
-                  {sectionTitle}
-                </Text>
-              </View>
-
-              {optionList
-                .filter(({ condition = true }) => condition)
-                .map((item, index) => (
-                  <ItemRowList
-                    key={index}
-                    {...item}
-                    containerStyle={{}}
-                    separatorPosition="top"
-                  />
-                ))}
-            </View>
-          )
-        )}
-      </Page>
-
-      <BottomSheetContainer
-        bottomSheetRef={appIconBottomSheetRef}
-        index={-1}
-        enablePanDownToClose
-        snapPoints={["80%"]}
-      >
-        <IconSelector onClose={() => appIconBottomSheetRef.current?.close()} />
-      </BottomSheetContainer>
-    </>
-  );
-};

src/styles/Palette.js

@@ -19,7 +19,7 @@ const Palette = {
   firebaseYellow: "#FFCA28",
   transparentFirebaseYellow: "rgba(255, 202, 40, 0.1)",
 
-  red: "#E31A1A",
+  red: "#FF5558",
   transparentRed: "rgba(227, 26, 26, 0.1)",
 
   white: "#ffffff",

src/utils/Sheet.js

@@ -0,0 +1,14 @@
+import { registerSheet } from "react-native-actions-sheet";
+import DeleteModal from "../components/modal/DeleteModal";
+import ProfileSettingsModal from "../components/modal/ProfileSettingsModal";
+import DeleteAccountModal from "../components/modal/DeleteAccountModal";
+import DeletePlaybackModal from "../components/modal/DeletePlaybackModal";
+import DeleteAudioModal from "../components/modal/DeleteAudioModal";
+
+registerSheet("Delete", DeleteModal);
+registerSheet("ProfileSettings", ProfileSettingsModal);
+registerSheet("DeleteAccount", DeleteAccountModal);
+registerSheet("DeletePlayback", DeletePlaybackModal);
+registerSheet("DeleteAudio", DeleteAudioModal);
+
+export {};

yarn.lock

@@ -2621,6 +2621,11 @@ acorn@^8.8.2:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.14.0.tgz#063e2c70cac5fb4f6467f0b11152e04c682795b0"
   integrity sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==
 
+add@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/add/-/add-2.0.6.tgz#248f0a9f6e5a528ef2295dbeec30532130ae2235"
+  integrity sha512-j5QzrmsokwWWp6kUcJQySpbG+xfOBqqKnup3OIk1pz+kB/80SLorZ9V8zHFLO92Lcd+hbvq8bT+zOGoPkmBV0Q==
+
 aggregate-error@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/aggregate-error/-/aggregate-error-3.1.0.tgz#92670ff50f5359bdb7a3e0d40d0ec30c5737687a"
@@ -7297,6 +7302,11 @@ react-is@^18.0.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e"
   integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==
 
+react-native-actions-sheet@^0.9.7:
+  version "0.9.7"
+  resolved "https://registry.yarnpkg.com/react-native-actions-sheet/-/react-native-actions-sheet-0.9.7.tgz#43ff2d9252f7af2da6dc051be5a5c375a844cdfb"
+  integrity sha512-rjUwxUr5dxbdSLDtLDUFAdSlFxpNSpJsbXLhHkBzEBMxEMPUhRT3zqbvKqsPj0JUkjwuRligxrhbIJZkg/6ZDw==
+
 react-native-calendars@^1.1300.0:
   version "1.1307.0"
   resolved "https://registry.yarnpkg.com/react-native-calendars/-/react-native-calendars-1.1307.0.tgz#2cb8c5abd322037e9b3ef5605afa86f25347068f"
@@ -9118,6 +9128,11 @@ yargs@^17.6.2, yargs@^17.7.2:
     y18n "^5.0.5"
     yargs-parser "^21.1.1"
 
+yarn@^1.22.22:
+  version "1.22.22"
+  resolved "https://registry.yarnpkg.com/yarn/-/yarn-1.22.22.tgz#ac34549e6aa8e7ead463a7407e1c7390f61a6610"
+  integrity sha512-prL3kGtyG7o9Z9Sv8IPfBNrWTDmXB4Qbes8A9rEzt6wkJV8mUvoirjU0Mp3GGAU06Y0XQyA3/2/RQFVuK7MTfg==
+
 yauzl@^2.4.2:
   version "2.10.0"
   resolved "https://registry.yarnpkg.com/yauzl/-/yauzl-2.10.0.tgz#c7eb17c93e112cb1086fa6d8e51fb0667b79a5f9"