project

f0c47c9f · Chaimae Mestari · 22313b4a · f0c47c9f · f0c47c9f · f0c47c9f
Commit f0c47c9f authored 2 years ago by Chaimae Mestari
--- a/App.js
+++ b/App.js
+import React from "react";
+import { NavigationContainer } from "@react-navigation/native";
+import { createNativeStackNavigator } from "@react-navigation/native-stack";
+import { useState, useEffect } from "react";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { Button, View } from "react-native";
+import axios from "axios";
+const Stack = createNativeStackNavigator();
+import HomeScreen from "./pages/HomeScreen";
+import LogInScreen from "./pages/LogInScreen";
+import RegisterScreen from "./pages/RegisterScreen";
+import CreateProfileScreen from "./pages/CreateProfileScreen";
+import ForgotPasswordScreen from "./pages/ForgotPasswordScreen";
+import EditProfileScreen from "./pages/EditProfileScreen";
+import EditActivityScreen from "./pages/EditActivityScreen";
+import ActivityScreen from "./pages/ActivityScreen";
+import MemberScreen from "./pages/MemberScreen";
+import CreateProfileScreenStepTwo from "./pages/CreateProfileScreenStepTwo";
+import CreateProfileScreenStepThree from "./pages/CreateProfileScreenStepThree";
+import CreateProfileScreenStepFour from "./pages/CreateProfileScreenStepFour";
+import VerificationScreen from "./pages/VerificationScreen";
+import NewPasswordScreen from "./pages/NewPasswordScreen";
+import BottomNav from "./Navigation/bottomTab";
+import TopNav from "./Navigation/topTab";
+import HeaderRight from "./components/HeaderRight";
+import navigationInfo from "./assets/navigationInfo";
+import navigationBis from "./assets/navInfoBis";
+import Burger from "./components/Burger";
+// IMPORT COMPONENTS
+// import LogButton from './components/LogButtons';
+// import Fields from './components/Fields';
+// import EditBigSquare from './components/EditBigSquare';
+// import TwinButton from './components/TwinButton';
+// import MultilineFields from './components/MultilineFields';
+// import EventButton from './components/EventButton';
+export default function App() {
+  const [userToken, setUserToken] = useState(null);
+  const [switch1, setSwitch1] = useState(false);
+  const [userProfile, setUserProfile] = useState(null);
+  //Create Profile State
+  const [gender, setGender] = useState(null);
+  const [accountType, setAccountType] = useState(null);
+  const [firstName, setFirstName] = useState(null);
+  const [lastName, setLastName] = useState(null);
+  const [nickName, setNickName] = useState(null);
+  const [city, setCity] = useState(null);
+  const [language, setLanguage] = useState(null);
+  const [flags, setFlags] = useState(null);
+  const profileState = {
+    gender,
+    setGender,
+    accountType,
+    setAccountType,
+    firstName,
+    setFirstName,
+    lastName,
+    setLastName,
+    nickName,
+    setNickName,
+    city,
+    setCity,
+    language,
+    setLanguage,
+  };
+  const switchBtn = () => {
+    if (switch1 === false) {
+      setSwitch1(true);
+    } else if (switch1 === true) {
+      setSwitch1(false);
+    }
+  };
+  const setToken = async (token) => {
+    console.log("App.setToken = ", token);
+    if (token) {
+      await AsyncStorage.setItem("userToken", token);
+    } else {
+      await AsyncStorage.removeItem("userToken");
+    }
+    setUserToken(token);
+  };
+  const setProfile = async (profile) => {
+    if (profile) {
+      await AsyncStorage.setItem("userProfile", profile);
+    } else {
+      await AsyncStorage.removeItem("userProfile");
+    }
+    setUserProfile(profile);
+  };
+  useEffect(() => {
+    const fetchToken = async () => {
+      const receivedUserToken = await AsyncStorage.getItem("userToken");
+      setUserToken(receivedUserToken);
+    };
+    fetchToken();
+  }, []);
+  useEffect(() => {
+    const fecthProfileStep = async () => {
+      const getProfileStep = await AsyncStorage.getItem("userProfile");
+      setUserProfile(getProfileStep);
+    };
+    fecthProfileStep();
+  }, []);
+  useEffect(() => {
+    const fecthFlags = async () => {
+      const response = await axios.get(
+        "https://backoffice.socializus.com/api/assets/langues"
+      );
+      setFlags(response.data);
+    };
+    fecthFlags();
+  }, []);
+  return (
+    <>
+      <NavigationContainer>
+        <Stack.Navigator initialRouteName="Home" headerShown="none" >
+          {userToken === null ? (
+            // sans token, l'utilisateur est invité a se connecter
+            <>
+              <Stack.Screen name="Home">
+                {(props) => <HomeScreen {...props} />}
+              </Stack.Screen>
+              <Stack.Screen name="LogIn">
+                {(props) => <LogInScreen {...props} setToken={setToken} />}
+              </Stack.Screen>
+              <Stack.Screen name="Register">
+                {(props) => (
+                  <RegisterScreen
+                    {...props}
+                    setToken={setToken}
+                    setProfile={setProfile}
+                    setUserProfile={setUserProfile}
+                  />
+                )}
+              </Stack.Screen>
+              <Stack.Screen name="createProfile">
+                {() => <CreateProfileScreen />}
+              </Stack.Screen>
+              <Stack.Screen name="ForgotPassword">
+                {() => <ForgotPasswordScreen />}
+              </Stack.Screen>
+              <Stack.Screen name="Verification">
+                {() => <VerificationScreen />}
+              </Stack.Screen>
+              <Stack.Screen name="NewPassword">
+                {() => <NewPasswordScreen />}
+              </Stack.Screen>
+            </>
+          ) : userProfile !== "done" ? (
+            <>
+              <Stack.Screen name="Step 1" options={{ title: "Create Profile" }}>
+                {(props) => (
+                  <CreateProfileScreen profileState={profileState} {...props} />
+                )}
+              </Stack.Screen>
+              <Stack.Screen name="Step 2" options={{ title: "Create Profile" }}>
+                {(props) => (
+                  <CreateProfileScreenStepTwo
+                    flags={flags}
+                    profileState={profileState}
+                    {...props}
+                  />
+                )}
+              </Stack.Screen>
+              <Stack.Screen name="Step 3" options={{ title: "Create Profile" }}>
+                {(props) => (
+                  <CreateProfileScreenStepThree
+                    profileState={profileState}
+                    {...props}
+                  />
+                )}
+              </Stack.Screen>
+              <Stack.Screen name="Step 4" options={{ title: "Create Profile" }}>
+                {(props) => (
+                  <CreateProfileScreenStepFour
+                    profileState={profileState}
+                    setProfile={setProfile}
+                    userToken={userToken}
+                    {...props}
+                  />
+                )}
+              </Stack.Screen>
+            </>
+          ) : (
+            // avec token, l'utilisateur peux acceder a la page des activitées et au reste de la navigation 🎉
+            <>
+              <Stack.Screen name="Tab" options={{ headerShown: false }}>
+                {() => (
+                  <BottomNav
+                    arg={navigationInfo}
+                    setToken={setToken}
+                    func={switchBtn}
+                  />
+                )}
+              </Stack.Screen>
+              <Stack.Screen
+                name="Edit Profile"
+                options={{
+                  tabBarLabel: "Edit profile",
+                  headerStyle: { backgroundColor: "#59C09B" },
+                  headerTitleStyle: {
+                    color: "white",
+                    fontWeight: "bold",
+                    fontSize: 30,
+                  },
+                }}
+              >
+                {() => <EditProfileScreen flags={flags} />}
+              </Stack.Screen>
+              <Stack.Screen
+                name="My Activities"
+                options={{
+                  tabBarLabel: "My Activities",
+                  headerStyle: { backgroundColor: "#59C09B" },
+                  headerTitleStyle: {
+                    color: "white",
+                    fontWeight: "bold",
+                    fontSize: 30,
+                  },
+                  headerRight: () => <HeaderRight />,
+                }}
+              >
+                {() => <TopNav arg={navigationBis} />}
+              </Stack.Screen>
+              <Stack.Screen
+                name="Edit Activity"
+                options={{
+                  tabBarLabel: "Edit Activity",
+                  headerStyle: { backgroundColor: "#59C09B" },
+                  headerTitleStyle: {
+                    color: "white",
+                    fontWeight: "bold",
+                    fontSize: 30,
+                  },
+                }}
+              >
+                {() => <EditActivityScreen userToken={userToken} />}
+              </Stack.Screen>
+              <Stack.Screen
+                name="Activity"
+                options={{
+                  tabBarLabel: "Activity",
+                  headerStyle: { backgroundColor: "#59C09B" },
+                  headerTitleStyle: {
+                    color: "white",
+                    fontWeight: "bold",
+                    fontSize: 30,
+                  },
+                }}
+              >
+                {(props) => <ActivityScreen {...props} />}
+              </Stack.Screen>
+              <Stack.Screen
+                name="Member"
+                options={{
+                  tabBarLabel: "Profile",
+                  headerStyle: { backgroundColor: "#59C09B" },
+                  headerTitleStyle: {
+                    color: "white",
+                    fontWeight: "bold",
+                    fontSize: 30,
+                  },
+                }}
+              >
+                {(props) => <MemberScreen {...props} />}
+              </Stack.Screen>
+            </>
+          )}
+        </Stack.Navigator>
+      </NavigationContainer>
+      {switch1 === true ? (
+        <Burger
+          func={() => {
+            setSwitch1(false);
+          }}
+        />
+      ) : (
+        ""
+      )}
+    </>
+    // <NavigationContainer>
+    //   <Stack.Navigator headerMode="none" >
+    //     <Stack.Screen name="Member" >
+    //       {()=> (
+    //          <MemberScreen route={{params: {member: {
+    //           avatar: "https://res.cloudinary.com/dvqxuwn70/image/upload/v1661498202/unjhzs7asic0ohwddgfc.png",
+    //           firstName: "dev2",
+    //           birthday: "01/01/2000"
+    //         }}}} />
+    //       )}
+    //     </Stack.Screen>
+    // </Stack.Navigator>
+    // </NavigationContainer>
+  );
+}
--- a/Navigation/bottomTab.js
+++ b/Navigation/bottomTab.js
+import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
+import { createNativeStackNavigator } from "@react-navigation/native-stack";
+import { useNavigation } from "@react-navigation/native";
+import { Ionicons } from "@expo/vector-icons";
+import { Button } from "react-native";
+const BottomTab = createBottomTabNavigator();
+const Stack = createNativeStackNavigator();
+import TopNav from "./topTab";
+import BurgerButton from "../components/BurgerButton";
+import Json from "../assets/json/en.json";
+const { bottomNav, menu } = Json;
+const BottomNav = ({ arg, setToken, func }) => {
+  const navigation = useNavigation();
+  return (
+    <BottomTab.Navigator
+      screenOptions={{
+        headerShown: false,
+        tabBarActiveTintColor: "white",
+        tabBarInactiveTintColor: "white",
+        tabBarIcon: { focused: true, color: "ff0000", size: 1 },
+        tabBarLabelStyle: {
+          fontWeight: "bold",
+        },
+        tabBarActiveBackgroundColor: "#F48225",
+        tabBarInactiveBackgroundColor: "#59C09B",
+      }}
+    >
+      {arg.map((elem, index) => {
+        return (
+          <BottomTab.Screen
+            key={index}
+            name={`BottomNav${elem.link}`}
+            options={{
+              headerShown: false,
+              tabBarLabel: elem.link,
+              tabBarIcon: ({ color, size }) => (
+                <Ionicons name={elem.icon} size={size} color={color} />
+              ),
+            }}
+          >
+            {() => (
+              <Stack.Navigator>
+                <Stack.Screen
+                  name={elem.link}
+                  options={{
+                    title: elem.link,
+                    headerStyle: { backgroundColor: "#59C09B" },
+                    headerTitleStyle: {
+                      color: "white",
+                      fontWeight: "bold",
+                      fontSize: 30,
+                      marginLeft: 20
+                    },
+                    headerLeft: () => (
+                      <>
+                        <BurgerButton onPress={func} />
+                      </>
+                    ),
+                    headerRight:
+                      elem.link === bottomNav.members.title
+                        ? () => (
+                          <Button
+                            onPress={() =>
+                              navigation.navigate("Edit Profile")
+                            }
+                            title={menu.editButton}
+                            color="#F48225"
+                          />
+                        )
+                        : elem.link === bottomNav.activities.title
+                          ? () => (
+                            // <Button
+                            //   onPress={() =>
+                            //     navigation.navigate("My Activities")
+                            //   }
+                            //   title={
+                            //     bottomNav.activities.topNav.myActivities.title
+                            //   }
+                            // />
+                            <Button
+                              onPress={() => setToken(null)}
+                              title="Logout"
+                              color="#F48225"
+                            />
+                          )
+                          : () => false,
+                  }}
+                >
+                  {() => <TopNav arg={elem.topNavArg} />}
+                </Stack.Screen>
+              </Stack.Navigator>
+            )}
+          </BottomTab.Screen>
+        );
+      })}
+    </BottomTab.Navigator>
+  );
+};
+export default BottomNav;
--- a/Navigation/topTab.js
+++ b/Navigation/topTab.js
+import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";
+import { createNativeStackNavigator } from "@react-navigation/native-stack";
+import { setStatusBarNetworkActivityIndicatorVisible } from "expo-status-bar";
+const TopTab = createMaterialTopTabNavigator();
+const Stack = createNativeStackNavigator();
+const TopNav = ({ arg }) => {
+  // console.log(arg);
+  return (
+    <TopTab.Navigator
+      screenOptions={{
+        headerShown: false,
+        tabBarScrollEnabled: arg.length > 3 ? true : false,
+        tabBarActiveTintColor: "white",
+        tabBarInactiveTintColor: "gray",
+        tabBarStyle: {
+          backgroundColor: "#59C09B",
+        },
+        tabBarLabelStyle: {
+          fontWeight: "bold",
+        },
+        tabBarActiveBackgroundColor: "#59C09B",
+        tabBarInactiveBackgroundColor: "gray",
+      }}
+    >
+      {arg.map((elem, index) => {
+        return (
+          <TopTab.Screen
+            key={index}
+            name={`topNav${elem.link}`}
+            options={{
+              tabBarLabel: elem.link,
+            }}
+          >
+            {() => (
+              <Stack.Navigator>
+                <Stack.Screen
+                  name={elem.link}
+                  options={{
+                    headerShown: false,
+                  }}
+                >
+                  {elem.link !== "My activities" || "Activities"
+                    ? elem.to
+                    : () => <TopNav arg={elem.topNavArg} />}
+                </Stack.Screen>
+              </Stack.Navigator>
+            )}
+          </TopTab.Screen>
+        );
+      })}
+    </TopTab.Navigator>
+  );
+};
+export default TopNav;
--- a/README.md
+++ b/README.md
-# ReactNativeChat
+# Socializus - Projet Front
+## Installation du projet
+Voici quelques lignes de commandes à rentrer dans votre terminal afin d'installer correctement le projet :
-## Getting started
+1. Ouvrez un terminal et placez vous dans le dossier de votre ordinateur dans lequel vous souhaitez stocker le projet, puis rentrez la ligne suivante `git clone https://github.com/SocializusProject/socializus-front.git`
+2. Une fois le projet cloné, entrez au sein de celui-ci, puis rentrez la commande: `npm i`. Si vous utilisez Yarn, vous pouvez utilisez la commande `yarn`
+3. Sur votre téléphone, installez l'application [Expo](https://expo.dev/). L'application est disponible sur [iOS](https://apps.apple.com/us/app/expo-go/id982107779) et [Android](https://play.google.com/store/apps/details?id=host.exp.exponent&hl=fr&gl=US)
-To make it easy for you to get started with GitLab, here's a list of recommended next steps.
+[![Expo sur Android](https://camo.githubusercontent.com/2a69200e8ba0b427945ba27b34df9657857d6a0681e498319d02b33bb3dcaa96/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f706c6174666f726d2d416e64726f69642d3364646338342e7376673f6c6f676f3d616e64726f6964267374796c653d666f722d7468652d6261646765)](https://play.google.com/store/apps/details?id=host.exp.exponent&hl=fr&gl=US) [![Expo sur iOS](https://camo.githubusercontent.com/097647ecd2e528c90c6d5c33cca8a1827493a15cac753004406cbc04a995c36f/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f706c6174666f726d2d694f532d3030302e7376673f6c6f676f3d6170706c65267374796c653d666f722d7468652d6261646765)](https://apps.apple.com/fr/app/expo-go/id982107779)
-Already a pro? Just edit this README.md and make it your own. Want to make it easy? [Use the template at the bottom](#editing-this-readme)!
+4. Lancez votre projet depuis votre logiciel de programmation avec la commande `expo start`. Un QR code doit s'afficher dans votre terminal. Scannez le avec l'application Expo sur votre appareil mobile.
-## Add your files
+   Il se peut que vous ayez un écran bleu qui vous renvoi une erreur. Si c'est le cas, il est possible que cela soit dû au pare-feu qu'il faut d'abord désactiver sur votre ordinateur
- [ ] [Create](https://docs.gitlab.com/ee/user/project/repository/web_editor.html#create-a-file) or [upload](https://docs.gitlab.com/ee/user/project/repository/web_editor.html#upload-a-file) files
- [ ] [Add files using the command line](https://docs.gitlab.com/ee/gitlab-basics/add-file.html#add-a-file-using-the-command-line) or push an existing Git repository with the following command:
-```
-cd existing_repo
-git remote add origin https://gitlab.univ-lille.fr/chaimae.mestari.etu/ReactNativeChat.git
-git branch -M main
-git push -uf origin main
-```
-## Integrate with your tools
- [ ] [Set up project integrations](https://gitlab.univ-lille.fr/chaimae.mestari.etu/ReactNativeChat/-/settings/integrations)
-## Collaborate with your team
- [ ] [Invite team members and collaborators](https://docs.gitlab.com/ee/user/project/members/)
- [ ] [Create a new merge request](https://docs.gitlab.com/ee/user/project/merge_requests/creating_merge_requests.html)
- [ ] [Automatically close issues from merge requests](https://docs.gitlab.com/ee/user/project/issues/managing_issues.html#closing-issues-automatically)
- [ ] [Enable merge request approvals](https://docs.gitlab.com/ee/user/project/merge_requests/approvals/)
- [ ] [Automatically merge when pipeline succeeds](https://docs.gitlab.com/ee/user/project/merge_requests/merge_when_pipeline_succeeds.html)
-## Test and Deploy
-Use the built-in continuous integration in GitLab.
- [ ] [Get started with GitLab CI/CD](https://docs.gitlab.com/ee/ci/quick_start/index.html)
- [ ] [Analyze your code for known vulnerabilities with Static Application Security Testing(SAST)](https://docs.gitlab.com/ee/user/application_security/sast/)
- [ ] [Deploy to Kubernetes, Amazon EC2, or Amazon ECS using Auto Deploy](https://docs.gitlab.com/ee/topics/autodevops/requirements.html)
- [ ] [Use pull-based deployments for improved Kubernetes management](https://docs.gitlab.com/ee/user/clusters/agent/)
- [ ] [Set up protected environments](https://docs.gitlab.com/ee/ci/environments/protected_environments.html)
-***
-# Editing this README
-When you're ready to make this README your own, just edit this file and use the handy template below (or feel free to structure it however you want - this is just a starting point!). Thank you to [makeareadme.com](https://www.makeareadme.com/) for this template.
-## Suggestions for a good README
-Every project is different, so consider which of these sections apply to yours. The sections used in the template are suggestions for most open source projects. Also keep in mind that while a README can be too long and detailed, too long is better than too short. If you think your README is too long, consider utilizing another form of documentation rather than cutting out information.
-## Name
-Choose a self-explaining name for your project.
-## Description
-Let people know what your project can do specifically. Provide context and add a link to any reference visitors might be unfamiliar with. A list of Features or a Background subsection can also be added here. If there are alternatives to your project, this is a good place to list differentiating factors.
-## Badges
-On some READMEs, you may see small images that convey metadata, such as whether or not all the tests are passing for the project. You can use Shields to add some to your README. Many services also have instructions for adding a badge.
-## Visuals
-Depending on what you are making, it can be a good idea to include screenshots or even a video (you'll frequently see GIFs rather than actual videos). Tools like ttygif can help, but check out Asciinema for a more sophisticated method.
-## Installation
-Within a particular ecosystem, there may be a common way of installing things, such as using Yarn, NuGet, or Homebrew. However, consider the possibility that whoever is reading your README is a novice and would like more guidance. Listing specific steps helps remove ambiguity and gets people to using your project as quickly as possible. If it only runs in a specific context like a particular programming language version or operating system or has dependencies that have to be installed manually, also add a Requirements subsection.
-## Usage
-Use examples liberally, and show the expected output if you can. It's helpful to have inline the smallest example of usage that you can demonstrate, while providing links to more sophisticated examples if they are too long to reasonably include in the README.
-## Support
-Tell people where they can go to for help. It can be any combination of an issue tracker, a chat room, an email address, etc.
-## Roadmap
-If you have ideas for releases in the future, it is a good idea to list them in the README.
-## Contributing
-State if you are open to contributions and what your requirements are for accepting them.
-For people who want to make changes to your project, it's helpful to have some documentation on how to get started. Perhaps there is a script that they should run or some environment variables that they need to set. Make these steps explicit. These instructions could also be useful to your future self.
-You can also document commands to lint the code or run tests. These steps help to ensure high code quality and reduce the likelihood that the changes inadvertently break something. Having instructions for running tests is especially helpful if it requires external setup, such as starting a Selenium server for testing in a browser.
-## Authors and acknowledgment
-Show your appreciation to those who have contributed to the project.
-## License
-For open source projects, say how it is licensed.
-## Project status
-If you have run out of energy or time for your project, put a note at the top of the README saying that development has slowed down or stopped completely. Someone may choose to fork your project or volunteer to step in as a maintainer or owner, allowing your project to keep going. You can also make an explicit request for maintainers.
--- a/app.json
+++ b/app.json
+{
+  "expo": {
+    "name": "social",
+    "slug": "social",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#FFFFFF"
+      }
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}
--- a/assets/adaptive-icon.png
+++ b/assets/adaptive-icon.png
--- a/assets/favicon.png
+++ b/assets/favicon.png
--- a/assets/icon.png
+++ b/assets/icon.png
--- a/assets/images/LogoSocializus.png
+++ b/assets/images/LogoSocializus.png
--- a/assets/images/Meetup.png
+++ b/assets/images/Meetup.png
--- a/assets/images/Telegram.png
+++ b/assets/images/Telegram.png
--- a/assets/images/arobase.png
+++ b/assets/images/arobase.png
--- a/assets/images/arobase.svg
+++ b/assets/images/arobase.svg
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.5295 14.6064C17.5295 15.6144 17.8163 16.0164 18.5663 16.0164C20.2379 16.0164 21.3023 13.8864 21.3023 10.344C21.3023 4.92956 17.3567 2.33756 12.4307 2.33756C7.36314 2.33756 2.75394 5.73596 2.75394 12.1584C2.75394 18.2928 6.78594 21.6336 12.9779 21.6336C15.0803 21.6336 16.4915 21.4032 18.6503 20.6832L19.1135 22.6116C16.9823 23.304 14.7047 23.5044 12.9491 23.5044C4.82754 23.5044 0.477539 19.0404 0.477539 12.1572C0.477539 5.21636 5.51874 0.493164 12.4595 0.493164C19.6883 0.493164 23.5175 4.81316 23.5175 10.1124C23.5175 14.6052 22.1075 18.0324 17.6723 18.0324C15.6551 18.0324 14.3315 17.226 14.1587 15.4392C13.6403 17.4264 12.2579 18.0324 10.3847 18.0324C7.87914 18.0324 5.77674 16.1016 5.77674 12.2148C5.77674 8.29796 7.62114 5.87876 10.9331 5.87876C12.6899 5.87876 13.7843 6.56996 14.2715 7.66436L15.1079 6.13796H17.5271V14.6064H17.5295ZM13.9883 10.8048C13.9883 9.22196 12.8063 8.55836 11.8271 8.55836C10.7615 8.55836 9.58194 9.42116 9.58194 11.9568C9.58194 13.9728 10.4747 15.096 11.8271 15.096C12.7775 15.096 13.9883 14.4912 13.9883 12.8208V10.8048Z" fill="#59C09B"/>
+</svg>
--- a/assets/images/avatar.png
+++ b/assets/images/avatar.png
--- a/assets/images/avatar.svg
+++ b/assets/images/avatar.svg
+<svg width="72" height="65" viewBox="0 0 72 65" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect x="0.328766" width="71.2329" height="64.5246" fill="url(#pattern0)"/>
+<defs>
+<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_117_45" transform="translate(0.0470867) scale(0.0141535 0.015625)"/>
+</pattern>
+<image id="image0_117_45" width="64" height="64" xlink:href="data:image/png;base64,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"/>
+</defs>
+</svg>
--- a/assets/images/avatar2.png
+++ b/assets/images/avatar2.png
--- a/assets/images/bell.png
+++ b/assets/images/bell.png
--- a/assets/images/bell.svg
+++ b/assets/images/bell.svg
+<svg height="512pt" viewBox="-21 0 512 512" width="512pt" xmlns="http://www.w3.org/2000/svg"><path d="m304.980469 426.667969c0 38.832031-31.480469 70.3125-70.3125 70.3125-38.835938 0-70.316407-31.480469-70.316407-70.3125 0-38.835938 31.480469-70.316407 70.316407-70.316407 38.832031 0 70.3125 31.480469 70.3125 70.316407zm0 0" fill="#ffa000"/><path d="m434.753906 382.121094c-32.257812-27.261719-50.753906-67.089844-50.753906-109.308594v-59.480469c0-82.34375-67.007812-149.332031-149.332031-149.332031-82.328125 0-149.335938 66.988281-149.335938 149.332031v59.480469c0 42.21875-18.496093 82.066406-50.941406 109.503906-8.300781 7.082032-13.058594 17.425782-13.058594 28.351563 0 20.585937 16.746094 37.332031 37.335938 37.332031h352c20.585937 0 37.332031-16.746094 37.332031-37.332031 0-10.925781-4.757812-21.269531-13.246094-28.546875zm0 0" fill="#ffc107"/><path d="m453.332031 229.332031c-8.832031 0-16-7.167969-16-16 0-61.269531-23.847656-118.847656-67.15625-162.175781-6.25-6.25-6.25-16.382812 0-22.632812s16.382813-6.25 22.636719 0c49.34375 49.363281 76.519531 115.007812 76.519531 184.808593 0 8.832031-7.167969 16-16 16zm0 0"/><path d="m16 229.332031c-8.832031 0-16-7.167969-16-16 0-69.800781 27.179688-135.445312 76.542969-184.789062 6.25-6.25 16.386719-6.25 22.636719 0s6.25 16.386719 0 22.636719c-43.328126 43.304687-67.179688 100.882812-67.179688 162.152343 0 8.832031-7.167969 16-16 16zm0 0"/><path d="m234.667969 512c-44.117188 0-80-35.882812-80-80 0-8.832031 7.167969-16 16-16s16 7.167969 16 16c0 26.476562 21.523437 48 48 48 26.472656 0 48-21.523438 48-48 0-8.832031 7.167969-16 16-16s16 7.167969 16 16c0 44.117188-35.882813 80-80 80zm0 0"/><path d="m410.667969 448h-352c-20.589844 0-37.335938-16.746094-37.335938-37.332031 0-10.925781 4.757813-21.269531 13.058594-28.375 32.445313-27.414063 50.941406-67.261719 50.941406-109.480469v-59.480469c0-82.34375 66.988281-149.332031 149.335938-149.332031 82.34375 0 149.332031 66.988281 149.332031 149.332031v59.480469c0 42.21875 18.496094 82.066406 50.730469 109.332031 8.511719 7.253907 13.269531 17.597657 13.269531 28.523438 0 20.585937-16.746094 37.332031-37.332031 37.332031zm-176-352c-64.707031 0-117.335938 52.628906-117.335938 117.332031v59.480469c0 51.644531-22.632812 100.414062-62.078125 133.757812-.746094.640626-1.921875 1.964844-1.921875 4.097657 0 2.898437 2.433594 5.332031 5.335938 5.332031h352c2.898437 0 5.332031-2.433594 5.332031-5.332031 0-2.132813-1.171875-3.457031-1.878906-4.054688-39.488282-33.386719-62.121094-82.15625-62.121094-133.800781v-59.480469c0-64.703125-52.628906-117.332031-117.332031-117.332031zm0 0"/><path d="m234.667969 96c-8.832031 0-16-7.167969-16-16v-64c0-8.832031 7.167969-16 16-16s16 7.167969 16 16v64c0 8.832031-7.167969 16-16 16zm0 0"/></svg>
\ No newline at end of file
--- a/assets/images/birthday.png
+++ b/assets/images/birthday.png
--- a/assets/images/birthday.svg
+++ b/assets/images/birthday.svg
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.49999 14C3.49999 13.3557 4.02232 12.8334 4.66666 12.8334H23.3333C23.9777 12.8334 24.5 13.3557 24.5 14V22.1667H25.6667C26.311 22.1667 26.8333 22.689 26.8333 23.3334C26.8333 23.9777 26.311 24.5 25.6667 24.5H2.33332C1.68899 24.5 1.16666 23.9777 1.16666 23.3334C1.16666 22.689 1.68899 22.1667 2.33332 22.1667H3.49999V14ZM5.83332 22.1667H22.1667V15.1667H5.83332V22.1667Z" fill="#59C09B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.47823 17.6232C6.80668 17.4589 7.19328 17.4589 7.52173 17.6232L9.33331 18.529L11.1449 17.6232C11.4733 17.4589 11.8599 17.4589 12.1884 17.6232L14 18.529L15.8116 17.6232C16.14 17.4589 16.5266 17.4589 16.8551 17.6232L18.6666 18.529L20.4782 17.6232C20.8067 17.4589 21.1933 17.4589 21.5217 17.6232L23.8551 18.7898C24.4314 19.078 24.665 19.7788 24.3768 20.3551C24.0887 20.9314 23.3879 21.165 22.8116 20.8768L21 19.971L19.1884 20.8768C18.8599 21.0411 18.4733 21.0411 18.1449 20.8768L16.3333 19.971L14.5217 20.8768C14.1933 21.0411 13.8067 21.0411 13.4782 20.8768L11.6666 19.971L9.85506 20.8768C9.52661 21.0411 9.14001 21.0411 8.81156 20.8768L6.99998 19.971L5.1884 20.8768C4.61209 21.165 3.9113 20.9314 3.62315 20.3551C3.335 19.7788 3.56859 19.078 4.1449 18.7898L6.47823 17.6232Z" fill="#59C09B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.6667 7.58337C19.311 7.58337 19.8333 8.10571 19.8333 8.75004V14C19.8333 14.6444 19.311 15.1667 18.6667 15.1667C18.0223 15.1667 17.5 14.6444 17.5 14V8.75004C17.5 8.10571 18.0223 7.58337 18.6667 7.58337Z" fill="#59C09B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14 7.58337C14.6443 7.58337 15.1666 8.10571 15.1666 8.75004V14C15.1666 14.6444 14.6443 15.1667 14 15.1667C13.3556 15.1667 12.8333 14.6444 12.8333 14V8.75004C12.8333 8.10571 13.3556 7.58337 14 7.58337Z" fill="#59C09B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.33332 7.58337C9.97766 7.58337 10.5 8.10571 10.5 8.75004V14C10.5 14.6444 9.97766 15.1667 9.33332 15.1667C8.68899 15.1667 8.16666 14.6444 8.16666 14V8.75004C8.16666 8.10571 8.68899 7.58337 9.33332 7.58337Z" fill="#59C09B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.6667 3.5C19.311 3.5 19.8333 4.02233 19.8333 4.66667V5.83333C19.8333 6.47767 19.311 7 18.6667 7C18.0223 7 17.5 6.47767 17.5 5.83333V4.66667C17.5 4.02233 18.0223 3.5 18.6667 3.5Z" fill="#59C09B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14 3.5C14.6443 3.5 15.1666 4.02233 15.1666 4.66667V5.83333C15.1666 6.47767 14.6443 7 14 7C13.3556 7 12.8333 6.47767 12.8333 5.83333V4.66667C12.8333 4.02233 13.3556 3.5 14 3.5Z" fill="#59C09B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.33332 3.5C9.97766 3.5 10.5 4.02233 10.5 4.66667V5.83333C10.5 6.47767 9.97766 7 9.33332 7C8.68899 7 8.16666 6.47767 8.16666 5.83333V4.66667C8.16666 4.02233 8.68899 3.5 9.33332 3.5Z" fill="#59C09B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.66667 12.8334C5.311 12.8334 5.83333 13.3557 5.83333 14V23.3334C5.83333 23.9777 5.311 24.5 4.66667 24.5C4.02233 24.5 3.5 23.9777 3.5 23.3334V14C3.5 13.3557 4.02233 12.8334 4.66667 12.8334Z" fill="#59C09B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.3333 12.8334C23.9777 12.8334 24.5 13.3557 24.5 14V23.3334C24.5 23.9777 23.9777 24.5 23.3333 24.5C22.689 24.5 22.1667 23.9777 22.1667 23.3334V14C22.1667 13.3557 22.689 12.8334 23.3333 12.8334Z" fill="#59C09B"/>
+</svg>