Merge branch 'dev' of https://git.nomadmania.travel/Viktoriia/nomadmania-app

.gitignore

@@ -10,7 +10,6 @@ web-build/
 
 # Native
 *.orig.*
-*.jks
 *.p8
 *.p12
 *.key
@@ -23,10 +22,10 @@ web-build/
 npm-debug.*
 yarn-debug.*
 yarn-error.*
+package-lock.json
 
 # macOS
 .DS_Store
-*.pem
 
 # local env files
 .env*.local
@@ -39,3 +38,4 @@ yarn-error.*
 .vscode
 temp
 android
+ios

App.tsx

@@ -1,17 +1,21 @@
 import 'react-native-gesture-handler';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { QueryClientProvider } from '@tanstack/react-query';
 import { NavigationContainer } from '@react-navigation/native';
+import { queryClient } from 'src/utils/queryClient';
 
 import Route from './Route';
+import { ConnectionProvider } from 'src/contexts/ConnectionContext';
+import ConnectionBanner from 'src/components/ConnectionBanner/ConnectionBanner';
 
 export default function App() {
-  const queryClient = new QueryClient();
-
   return (
     <QueryClientProvider client={queryClient}>
-      <NavigationContainer>
-        <Route />
-      </NavigationContainer>
+      <ConnectionProvider>
+        <NavigationContainer>
+          <ConnectionBanner />
+          <Route />
+        </NavigationContainer>
+      </ConnectionProvider>
     </QueryClientProvider>
   );
 }

Route.tsx

@@ -2,9 +2,11 @@ import React, { useEffect, useState } from 'react';
 import { useFonts } from 'expo-font';
 import * as SplashScreen from 'expo-splash-screen';
 import { Platform } from 'react-native';
+import * as Notifications from 'expo-notifications';
 
 import { createStackNavigator } from '@react-navigation/stack';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { createDrawerNavigator } from '@react-navigation/drawer';
 
 import WelcomeScreen from './src/screens/WelcomeScreen';
 import LoginScreen from './src/screens/LoginScreen';
@@ -21,12 +23,53 @@ import TravellersScreen from './src/screens/InAppScreens/TravellersScreen';
 import { EditPersonalInfo } from './src/screens/InAppScreens/ProfileScreen/Profile/edit-personal-info';
 import Settings from './src/screens/InAppScreens/ProfileScreen/Settings/';
 
+import MasterRankingScreen from './src/screens/InAppScreens/TravellersScreen/MasterRankingScreen';
+import LPIRanking from './src/screens/InAppScreens/TravellersScreen/LPIRankingScreen';
+import InMemoriamScreen from './src/screens/InAppScreens/TravellersScreen/InMemoriamScreen';
+import InHistoryScreen from './src/screens/InAppScreens/TravellersScreen/InHistoryScreen';
+import UNMastersScreen from './src/screens/InAppScreens/TravellersScreen/UNMasters';
+import StatisticsScreen from './src/screens/InAppScreens/TravellersScreen/StatisticsScreen';
+import StatisticsListScreen from './src/screens/InAppScreens/TravellersScreen/StatisticsListScreen';
+import TriumphsScreen from 'src/screens/InAppScreens/TravellersScreen/TriumphsScreen';
+import SeriesRankingScreen from 'src/screens/InAppScreens/TravellersScreen/SeriesRankingScreen';
+import SeriesRankingListScreen from 'src/screens/InAppScreens/TravellersScreen/SeriesRankingListScreen';
+import UsersMapScreen from 'src/screens/InAppScreens/ProfileScreen/UsersMap';
+
+import SeriesScreen from 'src/screens/InAppScreens/TravelsScreen/Series';
+import { SeriesItemScreen } from 'src/screens/InAppScreens/TravelsScreen/SeriesItemScreen';
+import EarthScreen from 'src/screens/InAppScreens/TravelsScreen/EarthScreen';
+import PhotosScreen from 'src/screens/InAppScreens/TravelsScreen/PhotosScreen';
+import MorePhotosScreen from 'src/screens/InAppScreens/TravelsScreen/MorePhotosScreen';
+import AddPhotoScreen from 'src/screens/InAppScreens/TravelsScreen/AddPhotoScreen';
+import TripsScreen from 'src/screens/InAppScreens/TravelsScreen/TripsScreen';
+import AddNewTripScreen from 'src/screens/InAppScreens/TravelsScreen/AddNewTripScreen';
+import AddRegionsScreen from 'src/screens/InAppScreens/TravelsScreen/AddRegionsScreen';
+import CountriesScreen from 'src/screens/InAppScreens/TravelsScreen/CountriesScreen';
+import RegionsScreen from 'src/screens/InAppScreens/TravelsScreen/RegionsScreen';
+import DareScreen from 'src/screens/InAppScreens/TravelsScreen/DareScreen';
+
 import { NAVIGATION_PAGES } from './src/types';
 import { storage, StoreType } from './src/storage';
 import { openDatabases } from './src/db';
 
 import TabBarButton from './src/components/TabBarButton';
 import { ParamListBase, RouteProp } from '@react-navigation/native';
+import setupDatabaseAndSync from 'src/database';
+import { MenuDrawer } from 'src/components';
+import { setFastestMapHost } from 'src/constants';
+import { determineFastestServer } from 'src/utils/determineServer';
+import {
+  InfoScreen,
+  PlanInfoScreen,
+  JoinInfoScreen,
+  DiscoverInfoScreen,
+  FirstStepsInfoScreen,
+  CountriesInfoScreen,
+  RegionsInfoScreen,
+  EarthInfoScreen,
+  DareInfoScreen,
+  TripsInfoScreen
+} from 'src/screens/InfoScreens';
 
 const ScreenStack = createStackNavigator();
 const BottomTab = createBottomTabNavigator();
@@ -39,14 +82,31 @@ const Route = () => {
   const [fontsLoaded] = useFonts({
     'redhat-900': require('./assets/fonts/RedHatDisplay-Black-900.ttf'),
     'redhat-700': require('./assets/fonts/RedHatDisplay-Bold-700.ttf'),
-    'redhat-600': require('./assets/fonts/RedHatDisplay-SemiBold-600.ttf')
+    'redhat-600': require('./assets/fonts/RedHatDisplay-SemiBold-600.ttf'),
+    'montserrat-700': require('./assets/fonts/Montserrat-Bold.ttf'),
+    'montserrat-600': require('./assets/fonts/Montserrat-SemiBold.ttf'),
+    'montserrat-400': require('./assets/fonts/Montserrat-Regular.ttf')
   });
   const [dbLoaded, setDbLoaded] = useState(false);
+  const [serverReady, setServerReady] = useState(false);
 
   useEffect(() => {
     const prepareApp = async () => {
+      // checkTokenAndUpdate();
+      await findFastestServer();
       await openDatabases();
       setDbLoaded(true);
+      setServerReady(true);
+      await setupDatabaseAndSync();
+    };
+
+    const findFastestServer = async () => {
+      try {
+        const fastest = await determineFastestServer();
+        setFastestMapHost(fastest);
+      } catch (error) {
+        console.error('Error finding fastest server:', error);
+      }
     };
 
     prepareApp();
@@ -54,13 +114,22 @@ const Route = () => {
 
   useEffect(() => {
     const hideSplashScreen = async () => {
-      if (fontsLoaded && dbLoaded) {
+      if (fontsLoaded && dbLoaded && serverReady) {
         await SplashScreen.hideAsync();
       }
     };
 
     hideSplashScreen();
-  }, [fontsLoaded, dbLoaded]);
+  }, [fontsLoaded, dbLoaded, serverReady]);
+
+  const checkTokenAndUpdate = async () => {
+    const storedToken = storage.get('deviceToken', StoreType.STRING);
+    const currentToken = await Notifications.getDevicePushTokenAsync();
+
+    if (storedToken && currentToken?.data !== storedToken) {
+      storage.set('deviceToken', currentToken.data);
+    }
+  };
 
   if (!fontsLoaded) {
     return null;
@@ -82,12 +151,28 @@ const Route = () => {
           height: 58
         }
       })
-    }
+    },
+    cardStyle: { backgroundColor: 'white' },
+    unmountOnBlur: true
   });
 
+  const MapDrawer = createDrawerNavigator();
+
+  function MapDrawerNavigator() {
+    return (
+      <MapDrawer.Navigator drawerContent={(props) => <MenuDrawer {...props} />}>
+        <MapDrawer.Screen
+          options={{ headerShown: false }}
+          name="MapDrawerScreen"
+          component={MapScreen}
+        />
+      </MapDrawer.Navigator>
+    );
+  }
+
   return (
     <ScreenStack.Navigator
-      screenOptions={{ headerShown: false }}
+      screenOptions={{ headerShown: false, cardStyle: { backgroundColor: 'white' } }}
       initialRouteName={token ? NAVIGATION_PAGES.IN_APP : NAVIGATION_PAGES.WELCOME}
     >
       <ScreenStack.Screen name={NAVIGATION_PAGES.WELCOME} component={WelcomeScreen} />
@@ -99,12 +184,132 @@ const Route = () => {
         name={NAVIGATION_PAGES.RESET_PASSWORD_DEEP}
         component={ResetPasswordDeepScreen}
       />
+      <ScreenStack.Screen name={NAVIGATION_PAGES.INFO} component={InfoScreen} />
+      <ScreenStack.Screen name={NAVIGATION_PAGES.JOIN_INFO} component={JoinInfoScreen} />
+      <ScreenStack.Screen name={NAVIGATION_PAGES.DISCOVER_INFO} component={DiscoverInfoScreen} />
+      <ScreenStack.Screen name={NAVIGATION_PAGES.PLAN_INFO} component={PlanInfoScreen} />
+      <ScreenStack.Screen
+        name={NAVIGATION_PAGES.FIRST_STEPS_INFO}
+        component={FirstStepsInfoScreen}
+      />
+      <ScreenStack.Screen name={NAVIGATION_PAGES.COUNTRIES_INFO} component={CountriesInfoScreen} />
+      <ScreenStack.Screen name={NAVIGATION_PAGES.DARE_INFO} component={DareInfoScreen} />
+      <ScreenStack.Screen name={NAVIGATION_PAGES.REGIONS_INFO} component={RegionsInfoScreen} />
+      <ScreenStack.Screen name={NAVIGATION_PAGES.TRIPS_INFO} component={TripsInfoScreen} />
+      <ScreenStack.Screen name={NAVIGATION_PAGES.EARTH_INFO} component={EarthInfoScreen} />
       <ScreenStack.Screen name={NAVIGATION_PAGES.IN_APP}>
         {() => (
           <BottomTab.Navigator screenOptions={screenOptions}>
-            <BottomTab.Screen name={NAVIGATION_PAGES.MAP_TAB} component={MapScreen} />
-            <BottomTab.Screen name={NAVIGATION_PAGES.TRAVELLERS_TAB} component={TravellersScreen} />
-            <BottomTab.Screen name={NAVIGATION_PAGES.TRAVELS_TAB} component={TravelsScreen} />
+            <BottomTab.Screen name={NAVIGATION_PAGES.IN_APP_MAP_TAB}>
+              {() => (
+                <ScreenStack.Navigator screenOptions={screenOptions}>
+                  <ScreenStack.Screen
+                    name={NAVIGATION_PAGES.MAP_TAB}
+                    component={MapDrawerNavigator}
+                  />
+                  <ScreenStack.Screen
+                    name={NAVIGATION_PAGES.PUBLIC_PROFILE_VIEW}
+                    component={ProfileScreen}
+                  />
+                  <ScreenStack.Screen
+                    name={NAVIGATION_PAGES.USERS_MAP}
+                    component={UsersMapScreen}
+                  />
+                </ScreenStack.Navigator>
+              )}
+            </BottomTab.Screen>
+            <BottomTab.Screen name={NAVIGATION_PAGES.IN_APP_TRAVELLERS_TAB}>
+              {() => (
+                <ScreenStack.Navigator screenOptions={screenOptions}>
+                  <ScreenStack.Screen
+                    name={NAVIGATION_PAGES.TRAVELLERS_TAB}
+                    component={TravellersScreen}
+                  />
+                  <ScreenStack.Screen
+                    name={NAVIGATION_PAGES.MASTER_RANKING}
+                    component={MasterRankingScreen}
+                  />
+                  <ScreenStack.Screen name={NAVIGATION_PAGES.LPI_RANKING} component={LPIRanking} />
+                  <ScreenStack.Screen
+                    name={NAVIGATION_PAGES.IN_MEMORIAM}
+                    component={InMemoriamScreen}
+                  />
+                  <ScreenStack.Screen
+                    name={NAVIGATION_PAGES.IN_HISTORY}
+                    component={InHistoryScreen}
+                  />
+                  <ScreenStack.Screen
+                    name={NAVIGATION_PAGES.UN_MASTERS}
+                    component={UNMastersScreen}
+                  />
+                  <ScreenStack.Screen
+                    name={NAVIGATION_PAGES.STATISTICS}
+                    component={StatisticsScreen}
+                  />
+                  <ScreenStack.Screen
+                    name={NAVIGATION_PAGES.PUBLIC_PROFILE_VIEW}
+                    component={ProfileScreen}
+                  />
+                  <ScreenStack.Screen
+                    name={NAVIGATION_PAGES.STATISTICS_LIST_DATA}
+                    component={StatisticsListScreen}
+                  />
+                  <ScreenStack.Screen name={NAVIGATION_PAGES.TRIUMPHS} component={TriumphsScreen} />
+                  <ScreenStack.Screen
+                    name={NAVIGATION_PAGES.SERIES_RANKING}
+                    component={SeriesRankingScreen}
+                  />
+                  <ScreenStack.Screen
+                    name={NAVIGATION_PAGES.SERIES_RANKING_LIST}
+                    component={SeriesRankingListScreen}
+                  />
+                  <ScreenStack.Screen
+                    name={NAVIGATION_PAGES.USERS_MAP}
+                    component={UsersMapScreen}
+                  />
+                </ScreenStack.Navigator>
+              )}
+            </BottomTab.Screen>
+            <BottomTab.Screen name={NAVIGATION_PAGES.IN_APP_TRAVELS_TAB}>
+              {() => (
+                <ScreenStack.Navigator screenOptions={screenOptions}>
+                  <ScreenStack.Screen
+                    name={NAVIGATION_PAGES.TRAVELS_TAB}
+                    component={TravelsScreen}
+                  />
+                  <ScreenStack.Screen name={NAVIGATION_PAGES.SERIES} component={SeriesScreen} />
+                  <ScreenStack.Screen
+                    name={NAVIGATION_PAGES.SERIES_ITEM}
+                    component={SeriesItemScreen}
+                  />
+                  <ScreenStack.Screen name={NAVIGATION_PAGES.EARTH} component={EarthScreen} />
+                  <ScreenStack.Screen name={NAVIGATION_PAGES.PHOTOS} component={PhotosScreen} />
+                  <ScreenStack.Screen
+                    name={NAVIGATION_PAGES.MORE_PHOTOS}
+                    component={MorePhotosScreen}
+                  />
+                  <ScreenStack.Screen
+                    name={NAVIGATION_PAGES.ADD_PHOTO}
+                    component={AddPhotoScreen}
+                  />
+                  <ScreenStack.Screen name={NAVIGATION_PAGES.TRIPS} component={TripsScreen} />
+                  <ScreenStack.Screen
+                    name={NAVIGATION_PAGES.ADD_TRIP}
+                    component={AddNewTripScreen}
+                  />
+                  <ScreenStack.Screen
+                    name={NAVIGATION_PAGES.ADD_REGIONS}
+                    component={AddRegionsScreen}
+                  />
+                  <ScreenStack.Screen
+                    name={NAVIGATION_PAGES.COUNTRIES}
+                    component={CountriesScreen}
+                  />
+                  <ScreenStack.Screen name={NAVIGATION_PAGES.REGIONS} component={RegionsScreen} />
+                  <ScreenStack.Screen name={NAVIGATION_PAGES.DARE} component={DareScreen} />
+                </ScreenStack.Navigator>
+              )}
+            </BottomTab.Screen>
             <BottomTab.Screen name={NAVIGATION_PAGES.IN_APP_PROFILE}>
               {() => (
                 <ScreenStack.Navigator screenOptions={screenOptions}>

app.config.ts

@@ -6,6 +6,7 @@ import dotenv from 'dotenv';
 import type { ConfigContext, ExpoConfig } from 'expo/config';
 
 const API_HOST = env.ENV === 'production' ? env.PRODUCTION_API_HOST : env.DEVELOPMENT_API_HOST;
+const MAP_HOST = env.ENV === 'production' ? env.PRODUCTION_MAP_HOST : env.DEVELOPMENT_MAP_HOST;
 
 dotenv.config({
   path: path.resolve(process.cwd(), '.env')
@@ -15,18 +16,19 @@ export default ({ config }: ConfigContext): ExpoConfig => ({
   ...config,
   name: 'NomadMania',
   slug: 'nomadmania-app',
-  owner: 'nomadmania',
+  owner: 'nomadmaniaou',
   scheme: 'nm',
   // Should be updated after every production release (deploy to AppStore/PlayMarket)
-  version: '1.0.0',
+  version: '2.0.0',
   // Should be updated after every dependency change
-  runtimeVersion: '1.2',
+  runtimeVersion: '1.5',
   orientation: 'portrait',
   icon: './assets/icon.png',
   userInterfaceStyle: 'light',
   extra: {
     ENV: env.ENV,
     API_HOST: API_HOST,
+    MAP_HOST: MAP_HOST,
     eas: {
       projectId: env.EAS_PROJECT_ID
     }
@@ -35,7 +37,7 @@ export default ({ config }: ConfigContext): ExpoConfig => ({
     tsconfigPaths: true
   },
   splash: {
-    image: './assets/splash.png',
+    image: './assets/loading-screen.png',
     resizeMode: 'cover'
   },
   notification: {
@@ -47,8 +49,8 @@ export default ({ config }: ConfigContext): ExpoConfig => ({
   platforms: ['ios', 'android'],
   assetBundlePatterns: ['**/*'],
   ios: {
-    supportsTablet: true,
-    bundleIdentifier: env.PACKAGE_NAME,
+    supportsTablet: false,
+    bundleIdentifier: env.PACKAGE_NAME_IOS,
     config: {
       googleMapsApiKey: env.IOS_GOOGLE_MAP_APIKEY
     },
@@ -65,11 +67,11 @@ export default ({ config }: ConfigContext): ExpoConfig => ({
     }
   },
   android: {
-    package: env.PACKAGE_NAME,
+    package: env.PACKAGE_NAME_ANDROID, // com.nomadmania.presentation
     config: {
       googleMaps: {
         apiKey: env.ANDROID_GOOGLE_MAP_APIKEY
-      }
+      },
     },
     permissions: [
       'ACCESS_BACKGROUND_LOCATION',
@@ -81,7 +83,8 @@ export default ({ config }: ConfigContext): ExpoConfig => ({
       'USER_FACING_NOTIFICATIONS',
       'INTERNET',
       'CAMERA'
-    ]
+    ],
+    versionCode: 2
   },
   plugins: [
     [
@@ -90,6 +93,16 @@ export default ({ config }: ConfigContext): ExpoConfig => ({
         photosPermission: 'Allow NomadMania.com access to your photo library to upload photos.',
         cameraPermission: 'Allow NomadMania.com access to your camera to upload photos directly.'
       }
-    ]
+    ],
+    [
+      "expo-build-properties",
+      {
+        android: {
+          minSdkVersion: 24,
+          targetSdkVersion: 33,
+          // kotlinVersion: '1.7.1'
+        }
+      }
+    ],
   ]
 });

assets/icons/arrow-bold.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 4.79212L5.70707 1.49919C5.31818 1.1103 4.68182 1.1103 4.29293 1.49919L1 4.79212" stroke="#ED9334" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

assets/icons/arrow-up-wide-short.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="18" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.05645 1.36619C4.84167 1.1338 4.54237 1 4.22547 1C3.90858 1 3.60928 1.1338 3.39449 1.36619L0.295927 4.74645C-0.123084 5.20419 -0.0949151 5.91898 0.366349 6.33799C0.827613 6.757 1.53888 6.72883 1.95789 6.26757L3.09872 5.02462V15.6478C3.09872 16.271 3.60224 16.7745 4.22547 16.7745C4.84871 16.7745 5.35223 16.271 5.35223 15.6478V5.02462L6.49306 6.27109C6.91207 6.72883 7.62686 6.76052 8.0846 6.34151C8.54234 5.9225 8.57403 5.20771 8.15502 4.74997L5.05645 1.36972V1.36619ZM10.986 16.7745H12.1127C12.736 16.7745 13.2395 16.271 13.2395 15.6478C13.2395 15.0245 12.736 14.521 12.1127 14.521H10.986C10.3628 14.521 9.85923 15.0245 9.85923 15.6478C9.85923 16.271 10.3628 16.7745 10.986 16.7745ZM10.986 12.2675H14.3662C14.9895 12.2675 15.493 11.764 15.493 11.1408C15.493 10.5175 14.9895 10.014 14.3662 10.014H10.986C10.3628 10.014 9.85923 10.5175 9.85923 11.1408C9.85923 11.764 10.3628 12.2675 10.986 12.2675ZM10.986 7.76051H16.6197C17.243 7.76051 17.7465 7.25699 17.7465 6.63376C17.7465 6.01053 17.243 5.50701 16.6197 5.50701H10.986C10.3628 5.50701 9.85923 6.01053 9.85923 6.63376C9.85923 7.25699 10.3628 7.76051 10.986 7.76051ZM10.986 3.2535H18.8732C19.4965 3.2535 20 2.74999 20 2.12675C20 1.50352 19.4965 1 18.8732 1H10.986C10.3628 1 9.85923 1.50352 9.85923 2.12675C9.85923 2.74999 10.3628 3.2535 10.986 3.2535Z" fill="#0F3F4F"/>
+</svg>

assets/icons/bottom-navigation/globe-solid.svg

@@ -0,0 +1,10 @@
+<svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2817_21824)">
+<path d="M16 11.8574C16 12.8113 15.9484 13.7309 15.8582 14.6074H7.8918C7.79727 13.7309 7.75 12.8113 7.75 11.8574C7.75 10.9035 7.80156 9.98398 7.8918 9.10742H15.8582C15.9527 9.98398 16 10.9035 16 11.8574ZM17.2375 9.10742H22.527C22.7547 9.98828 22.875 10.9078 22.875 11.8574C22.875 12.807 22.7547 13.7266 22.527 14.6074H17.2375C17.3277 13.7223 17.375 12.8027 17.375 11.8574C17.375 10.9121 17.3277 9.99258 17.2375 9.10742ZM22.0758 7.73242H17.0613C16.6316 4.98672 15.7809 2.68789 14.6852 1.21836C18.0496 2.10781 20.7867 4.54844 22.0715 7.73242H22.0758ZM15.6691 7.73242H8.08086C8.34297 6.16836 8.74687 4.78477 9.24102 3.66328C9.69219 2.64922 10.1949 1.91445 10.6805 1.45039C11.1617 0.994922 11.5613 0.857422 11.875 0.857422C12.1887 0.857422 12.5883 0.994922 13.0695 1.45039C13.5551 1.91445 14.0578 2.64922 14.509 3.66328C15.0074 4.78047 15.407 6.16406 15.6691 7.73242ZM6.68867 7.73242H1.67422C2.96328 4.54844 5.69609 2.10781 9.06484 1.21836C7.96914 2.68789 7.11836 4.98672 6.68867 7.73242ZM1.22305 9.10742H6.5125C6.42227 9.99258 6.375 10.9121 6.375 11.8574C6.375 12.8027 6.42227 13.7223 6.5125 14.6074H1.22305C0.995313 13.7266 0.875 12.807 0.875 11.8574C0.875 10.9078 0.995313 9.98828 1.22305 9.10742ZM9.24102 20.0473C8.74258 18.9301 8.34297 17.5465 8.08086 15.9824H15.6691C15.407 17.5465 15.0031 18.9301 14.509 20.0473C14.0578 21.0613 13.5551 21.7961 13.0695 22.2602C12.5883 22.7199 12.1887 22.8574 11.875 22.8574C11.5613 22.8574 11.1617 22.7199 10.6805 22.2645C10.1949 21.8004 9.69219 21.0656 9.24102 20.0516V20.0473ZM6.68867 15.9824C7.11836 18.7281 7.96914 21.027 9.06484 22.4965C5.69609 21.607 2.96328 19.1664 1.67422 15.9824H6.68867ZM22.0758 15.9824C20.7867 19.1664 18.0539 21.607 14.6895 22.4965C15.7852 21.027 16.6316 18.7281 17.0656 15.9824H22.0758Z"/>
+</g>
+<defs>
+<clipPath id="clip0_2817_21824">
+<rect width="22" height="22" fill="white" transform="translate(0.875 0.857422)"/>
+</clipPath>
+</defs>
+</svg>

assets/icons/bottom-navigation/map.svg

@@ -1,4 +1,10 @@
-<svg width="19" height="22" viewBox="0 0 19 22" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M9.2093 4.86047C6.94879 4.86047 5.11628 6.69297 5.11628 8.95349C5.11628 11.214 6.94879 13.0465 9.2093 13.0465C11.4698 13.0465 13.3023 11.214 13.3023 8.95349C13.3023 6.69297 11.4698 4.86047 9.2093 4.86047ZM7.16279 8.95349C7.16279 7.82323 8.07905 6.90698 9.2093 6.90698C10.3396 6.90698 11.2558 7.82323 11.2558 8.95349C11.2558 10.0837 10.3396 11 9.2093 11C8.07905 11 7.16279 10.0837 7.16279 8.95349Z"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M18.4186 9.2093C18.4186 14.8372 11.2558 22 9.2093 22C7.16279 22 0 14.8372 0 9.2093C0 4.12315 4.12315 0 9.2093 0C14.2955 0 18.4186 4.12315 18.4186 9.2093ZM16.3721 9.2093C16.3721 11.2914 14.9657 14.0204 12.9993 16.417C12.0547 17.5682 11.0699 18.5324 10.2414 19.1883C9.82504 19.5179 9.48419 19.741 9.23696 19.8715L9.2093 19.886L9.18165 19.8715C8.93442 19.741 8.59357 19.5179 8.17725 19.1883C7.34867 18.5324 6.3639 17.5682 5.41931 16.417C3.45291 14.0204 2.04651 11.2914 2.04651 9.2093C2.04651 5.2534 5.2534 2.04651 9.2093 2.04651C13.1652 2.04651 16.3721 5.2534 16.3721 9.2093Z"/>
+<svg width="18" height="23" viewBox="0 0 18 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2817_21798)">
+<path d="M9.89336 22.3074C12.0977 19.5488 17.125 12.8629 17.125 9.10742C17.125 4.55273 13.4297 0.857422 8.875 0.857422C4.32031 0.857422 0.625 4.55273 0.625 9.10742C0.625 12.8629 5.65234 19.5488 7.85664 22.3074C8.38516 22.9648 9.36484 22.9648 9.89336 22.3074ZM8.875 6.35742C9.60435 6.35742 10.3038 6.64715 10.8195 7.16288C11.3353 7.6786 11.625 8.37808 11.625 9.10742C11.625 9.83677 11.3353 10.5362 10.8195 11.052C10.3038 11.5677 9.60435 11.8574 8.875 11.8574C8.14565 11.8574 7.44618 11.5677 6.93046 11.052C6.41473 10.5362 6.125 9.83677 6.125 9.10742C6.125 8.37808 6.41473 7.6786 6.93046 7.16288C7.44618 6.64715 8.14565 6.35742 8.875 6.35742Z"/>
+</g>
+<defs>
+<clipPath id="clip0_2817_21798">
+<rect width="16.5" height="22" fill="white" transform="translate(0.625 0.857422)"/>
+</clipPath>
+</defs>
 </svg>

assets/icons/bottom-navigation/messages.svg

@@ -0,0 +1,10 @@
+<svg width="28" height="23" viewBox="0 0 28 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2817_21832)">
+<path d="M9.0626 15.9824C13.9997 15.9824 18.0001 12.5965 18.0001 8.41992C18.0001 4.24336 13.9997 0.857422 9.0626 0.857422C4.12549 0.857422 0.125104 4.24336 0.125104 8.41992C0.125104 10.0785 0.756745 11.6125 1.82667 12.8629C1.67628 13.2668 1.45284 13.6234 1.21651 13.9242C1.01026 14.1906 0.799713 14.3969 0.645026 14.5387C0.567682 14.6074 0.503229 14.6633 0.46026 14.6977C0.438776 14.7148 0.421588 14.7277 0.412995 14.732L0.404401 14.7406C0.168073 14.9168 0.0649478 15.2262 0.159479 15.5055C0.25401 15.7848 0.51612 15.9824 0.812604 15.9824C1.74932 15.9824 2.69464 15.7418 3.48096 15.4453C3.87628 15.2949 4.24581 15.1273 4.56807 14.9555C5.88721 15.6086 7.4212 15.9824 9.0626 15.9824ZM19.3751 8.41992C19.3751 13.2453 15.1169 16.8805 10.0724 17.3145C11.1165 20.5113 14.5798 22.8574 18.6876 22.8574C20.329 22.8574 21.863 22.4836 23.1864 21.8305C23.5087 22.0023 23.8739 22.1699 24.2692 22.3203C25.0556 22.6168 26.0009 22.8574 26.9376 22.8574C27.2341 22.8574 27.5005 22.6641 27.5907 22.3805C27.681 22.0969 27.5821 21.7875 27.3415 21.6113L27.3329 21.6027C27.3243 21.5941 27.3071 21.5855 27.2856 21.5684C27.2427 21.534 27.1782 21.4824 27.1009 21.4094C26.9462 21.2676 26.7357 21.0613 26.5294 20.7949C26.2931 20.4941 26.0696 20.1332 25.9192 19.7336C26.9892 18.4875 27.6208 16.9535 27.6208 15.2906C27.6208 11.3031 23.9728 8.0332 19.345 7.74961C19.3622 7.96875 19.3708 8.19219 19.3708 8.41562L19.3751 8.41992Z"/>
+</g>
+<defs>
+<clipPath id="clip0_2817_21832">
+<rect width="27.5" height="22" fill="white" transform="translate(0.125 0.857422)"/>
+</clipPath>
+</defs>
+</svg>

assets/icons/bottom-navigation/profile.svg

@@ -1,4 +1,3 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M11.6449 2.54857C9.53402 2.54857 7.83543 4.25521 7.83543 6.35805C7.83543 8.40528 9.43467 10.0663 11.4538 10.156C11.5762 10.1475 11.7056 10.1471 11.8276 10.1559C13.8448 10.0653 15.445 8.40534 15.4544 6.35647C15.4535 4.25549 13.7461 2.54857 11.6449 2.54857ZM6.28687 6.35805C6.28687 3.40223 8.6765 1 11.6449 1C14.6019 1 17.003 3.40109 17.003 6.35805L17.003 6.36127C16.9909 9.25234 14.7121 11.6087 11.8361 11.7053C11.8017 11.7065 11.7673 11.7054 11.733 11.7019C11.6833 11.697 11.6089 11.6963 11.5395 11.7026C11.5076 11.7055 11.4755 11.7064 11.4434 11.7053C8.56801 11.6087 6.28687 9.25219 6.28687 6.35805Z"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M11.8229 12.5498C13.8135 12.5498 15.8434 13.0494 17.4122 14.0971C18.8223 15.0357 19.6302 16.3514 19.6302 17.7672C19.6302 19.1829 18.8224 20.5009 17.4129 21.4445L17.4127 21.4446C15.8392 22.4975 13.8067 23.0001 11.8151 23.0001C9.82395 23.0001 7.79184 22.4977 6.2184 21.4452C4.80805 20.5067 4 19.1909 4 17.7749C4 16.3592 4.80778 15.0412 6.21733 14.0976L6.22017 14.0957L6.22018 14.0957C7.7981 13.0495 9.83197 12.5498 11.8229 12.5498ZM7.07735 15.3854C5.98959 16.1141 5.54857 16.9946 5.54857 17.7749C5.54857 18.5551 5.9894 19.4329 7.07693 20.1564L7.07863 20.1576C8.3441 21.0043 10.0591 21.4515 11.8151 21.4515C13.571 21.4515 15.286 21.0043 16.5514 20.1577C17.6403 19.4288 18.0817 18.5479 18.0817 17.7672C18.0817 16.987 17.6408 16.1092 16.5533 15.3857L16.5521 15.3849C15.2922 14.5434 13.5798 14.0984 11.8229 14.0984C10.0669 14.0984 8.34866 14.543 7.07735 15.3854Z"/>
+<svg width="20" height="23" viewBox="0 0 20 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.875 11.8574C11.3337 11.8574 12.7326 11.278 13.7641 10.2465C14.7955 9.21506 15.375 7.81611 15.375 6.35742C15.375 4.89873 14.7955 3.49978 13.7641 2.46833C12.7326 1.43688 11.3337 0.857422 9.875 0.857422C8.41631 0.857422 7.01736 1.43688 5.98591 2.46833C4.95446 3.49978 4.375 4.89873 4.375 6.35742C4.375 7.81611 4.95446 9.21506 5.98591 10.2465C7.01736 11.278 8.41631 11.8574 9.875 11.8574ZM7.91133 13.9199C3.67891 13.9199 0.25 17.3488 0.25 21.5812C0.25 22.2859 0.821484 22.8574 1.52617 22.8574H18.2238C18.9285 22.8574 19.5 22.2859 19.5 21.5812C19.5 17.3488 16.0711 13.9199 11.8387 13.9199H7.91133Z"/>
 </svg>

assets/icons/bottom-navigation/travellers.svg

@@ -1,6 +1,10 @@
-<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M7.64491 1.54857C5.53402 1.54857 3.83543 3.25521 3.83543 5.35805C3.83543 7.40528 5.43467 9.06634 7.4538 9.15602C7.57625 9.1475 7.70561 9.14708 7.82765 9.15593C9.84479 9.0653 11.445 7.40534 11.4544 5.35647C11.4535 3.25549 9.74609 1.54857 7.64491 1.54857ZM2.28687 5.35805C2.28687 2.40223 4.6765 0 7.64491 0C10.6019 0 13.003 2.40109 13.003 5.35805L13.003 5.36127C12.9909 8.25234 10.7121 10.6087 7.83611 10.7053C7.80172 10.7065 7.76729 10.7054 7.73305 10.7019C7.68327 10.697 7.60887 10.6963 7.53951 10.7026C7.50756 10.7055 7.47546 10.7064 7.4434 10.7053C4.56801 10.6087 2.28687 8.25219 2.28687 5.35805Z"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M14.5203 2.83898C14.5203 2.41136 14.8669 2.0647 15.2945 2.0647C17.7264 2.0647 19.6822 4.03363 19.6822 6.45231C19.6822 8.82209 17.8021 10.7516 15.4577 10.8394C15.416 10.8409 15.3742 10.8391 15.3327 10.8339C15.3172 10.832 15.2857 10.8308 15.2458 10.8352C14.8208 10.8824 14.438 10.5762 14.3908 10.1511C14.3436 9.72613 14.6498 9.34331 15.0748 9.29609C15.1964 9.28258 15.3238 9.27945 15.4495 9.2896C16.943 9.20773 18.1336 7.96815 18.1336 6.45231C18.1336 4.886 16.8683 3.61327 15.2945 3.61327C14.8669 3.61327 14.5203 3.26661 14.5203 2.83898Z"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M7.82285 11.5498C9.81349 11.5498 11.8434 12.0494 13.4122 13.0971C14.8223 14.0357 15.6302 15.3514 15.6302 16.7672C15.6302 18.1829 14.8224 19.5009 13.4129 20.4445L13.4127 20.4446C11.8392 21.4975 9.80666 22.0001 7.81511 22.0001C5.82395 22.0001 3.79184 21.4977 2.2184 20.4452C0.808052 19.5067 0 18.1909 0 16.7749C0 15.3592 0.807777 14.0412 2.21733 13.0976L2.22017 13.0957L2.22018 13.0957C3.7981 12.0495 5.83197 11.5498 7.82285 11.5498ZM3.07735 14.3854C1.98959 15.1141 1.54857 15.9946 1.54857 16.7749C1.54857 17.5551 1.9894 18.4329 3.07693 19.1564L3.07863 19.1576C4.3441 20.0043 6.05912 20.4515 7.81511 20.4515C9.57103 20.4515 11.286 20.0043 12.5514 19.1577C13.6403 18.4288 14.0817 17.5479 14.0817 16.7672C14.0817 15.987 13.6408 15.1092 12.5533 14.3857L12.5521 14.3849C11.2922 13.5434 9.57976 13.0984 7.82285 13.0984C6.06685 13.0984 4.34866 13.543 3.07735 14.3854Z"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M16.5629 12.9924C16.6569 12.5753 17.0713 12.3133 17.4884 12.4073C18.3034 12.591 19.1033 12.9186 19.778 13.4331C20.7495 14.1628 21.2929 15.1799 21.2929 16.2546C21.2929 17.329 20.7498 18.3458 19.7788 19.0755C19.0959 19.5989 18.2838 19.9402 17.4452 20.1149C17.0265 20.2021 16.6165 19.9335 16.5292 19.5148C16.442 19.0962 16.7107 18.6861 17.1293 18.5989C17.7759 18.4642 18.3665 18.2076 18.8392 17.8446L18.8461 17.8393L18.8461 17.8393C19.4834 17.3613 19.7443 16.7791 19.7443 16.2546C19.7443 15.7301 19.4834 15.1479 18.8461 14.6699L18.8408 14.6659L18.8408 14.6659C18.3805 14.3143 17.7979 14.0644 17.148 13.918C16.7308 13.824 16.4689 13.4096 16.5629 12.9924Z"/>
+<svg width="28" height="23" viewBox="0 0 28 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2817_21804)">
+<path d="M6.3125 0.857422C7.22418 0.857422 8.09852 1.21959 8.74318 1.86424C9.38784 2.5089 9.75 3.38324 9.75 4.29492C9.75 5.2066 9.38784 6.08095 8.74318 6.7256C8.09852 7.37026 7.22418 7.73242 6.3125 7.73242C5.40082 7.73242 4.52648 7.37026 3.88182 6.7256C3.23716 6.08095 2.875 5.2066 2.875 4.29492C2.875 3.38324 3.23716 2.5089 3.88182 1.86424C4.52648 1.21959 5.40082 0.857422 6.3125 0.857422ZM22.125 0.857422C23.0367 0.857422 23.911 1.21959 24.5557 1.86424C25.2003 2.5089 25.5625 3.38324 25.5625 4.29492C25.5625 5.2066 25.2003 6.08095 24.5557 6.7256C23.911 7.37026 23.0367 7.73242 22.125 7.73242C21.2133 7.73242 20.339 7.37026 19.6943 6.7256C19.0497 6.08095 18.6875 5.2066 18.6875 4.29492C18.6875 3.38324 19.0497 2.5089 19.6943 1.86424C20.339 1.21959 21.2133 0.857422 22.125 0.857422ZM0.125 13.6922C0.125 11.1613 2.17891 9.10742 4.70977 9.10742H6.54453C7.22773 9.10742 7.87656 9.25781 8.46094 9.52422C8.40508 9.83359 8.3793 10.1559 8.3793 10.4824C8.3793 12.1238 9.10117 13.5977 10.2398 14.6074C10.2312 14.6074 10.2227 14.6074 10.2098 14.6074H1.04023C0.5375 14.6074 0.125 14.1949 0.125 13.6922ZM17.5402 14.6074C17.5316 14.6074 17.523 14.6074 17.5102 14.6074C18.6531 13.5977 19.3707 12.1238 19.3707 10.4824C19.3707 10.1559 19.3406 9.83789 19.2891 9.52422C19.8734 9.25352 20.5223 9.10742 21.2055 9.10742H23.0402C25.5711 9.10742 27.625 11.1613 27.625 13.6922C27.625 14.1992 27.2125 14.6074 26.7098 14.6074H17.5402ZM9.75 10.4824C9.75 9.3884 10.1846 8.33919 10.9582 7.56561C11.7318 6.79202 12.781 6.35742 13.875 6.35742C14.969 6.35742 16.0182 6.79202 16.7918 7.56561C17.5654 8.33919 18 9.3884 18 10.4824C18 11.5764 17.5654 12.6257 16.7918 13.3992C16.0182 14.1728 14.969 14.6074 13.875 14.6074C12.781 14.6074 11.7318 14.1728 10.9582 13.3992C10.1846 12.6257 9.75 11.5764 9.75 10.4824ZM5.625 21.7102C5.625 18.5477 8.19023 15.9824 11.3527 15.9824H16.3973C19.5598 15.9824 22.125 18.5477 22.125 21.7102C22.125 22.3418 21.6137 22.8574 20.9777 22.8574H6.77227C6.14062 22.8574 5.625 22.3461 5.625 21.7102Z"/>
+</g>
+<defs>
+<clipPath id="clip0_2817_21804">
+<rect width="27.5" height="22" fill="white" transform="translate(0.125 0.857422)"/>
+</clipPath>
+</defs>
 </svg>

assets/icons/calendar-check.svg

@@ -0,0 +1,3 @@
+<svg width="15" height="17" viewBox="0 0 15 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.5 0.5C4.91563 0.5 5.25 0.834375 5.25 1.25V2.5H9.75V1.25C9.75 0.834375 10.0844 0.5 10.5 0.5C10.9156 0.5 11.25 0.834375 11.25 1.25V2.5H12.5C13.6031 2.5 14.5 3.39687 14.5 4.5V5V6.5V14.5C14.5 15.6031 13.6031 16.5 12.5 16.5H2.5C1.39688 16.5 0.5 15.6031 0.5 14.5V6.5V5V4.5C0.5 3.39687 1.39688 2.5 2.5 2.5H3.75V1.25C3.75 0.834375 4.08437 0.5 4.5 0.5ZM13 6.5H2V14.5C2 14.775 2.225 15 2.5 15H12.5C12.775 15 13 14.775 13 14.5V6.5ZM10.7812 9.78125L7.28125 13.2812C6.9875 13.575 6.5125 13.575 6.22188 13.2812L4.22187 11.2812C3.92812 10.9875 3.92812 10.5125 4.22187 10.2219C4.51562 9.93125 4.99062 9.92813 5.28125 10.2219L6.75 11.6906L9.71875 8.72188C10.0125 8.42813 10.4875 8.42813 10.7781 8.72188C11.0687 9.01562 11.0719 9.49063 10.7781 9.78125H10.7812Z" fill="#0F3F4F"/>
+</svg>

assets/icons/chart-pie.svg

@@ -0,0 +1,10 @@
+<svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_693_3919)">
+<path d="M8.44423 6.66667V0.461111C8.44423 0.211111 8.63867 0 8.88867 0C12.3248 0 15.1109 2.78611 15.1109 6.22222C15.1109 6.47222 14.8998 6.66667 14.6498 6.66667H8.44423ZM0.888672 7.55556C0.888672 4.18611 3.39145 1.39722 6.63867 0.952778C6.89423 0.916667 7.11089 1.12222 7.11089 1.38056V8L11.4581 12.3472C11.6442 12.5333 11.6303 12.8389 11.4164 12.9889C10.3276 13.7667 8.99423 14.2222 7.55534 14.2222C3.87478 14.2222 0.888672 11.2389 0.888672 7.55556ZM15.5109 8C15.7692 8 15.972 8.21667 15.9387 8.47222C15.7248 10.025 14.9776 11.4056 13.8859 12.425C13.7192 12.5806 13.4581 12.5694 13.297 12.4056L8.88867 8H15.5109Z" />
+</g>
+<defs>
+<clipPath id="clip0_693_3919">
+<rect width="16" height="14.2222" fill="white"/>
+</clipPath>
+</defs>
+</svg>

assets/icons/crown.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.58333 2.94423C8.9 2.74978 9.11111 2.39701 9.11111 1.99978C9.11111 1.38589 8.61389 0.888672 8 0.888672C7.38611 0.888672 6.88889 1.38589 6.88889 1.99978C6.88889 2.39978 7.1 2.74978 7.41667 2.94423L5.825 6.12756C5.57222 6.63312 4.91667 6.77756 4.475 6.42478L2 4.44423C2.13889 4.25812 2.22222 4.02756 2.22222 3.77756C2.22222 3.16367 1.725 2.66645 1.11111 2.66645C0.497222 2.66645 0 3.16367 0 3.77756C0 4.39145 0.497222 4.88867 1.11111 4.88867C1.11667 4.88867 1.125 4.88867 1.13056 4.88867L2.4 11.872C2.55278 12.7164 3.28889 13.3331 4.15 13.3331H11.85C12.7083 13.3331 13.4444 12.7192 13.6 11.872L14.8694 4.88867C14.875 4.88867 14.8833 4.88867 14.8889 4.88867C15.5028 4.88867 16 4.39145 16 3.77756C16 3.16367 15.5028 2.66645 14.8889 2.66645C14.275 2.66645 13.7778 3.16367 13.7778 3.77756C13.7778 4.02756 13.8611 4.25812 14 4.44423L11.525 6.42478C11.0833 6.77756 10.4278 6.63312 10.175 6.12756L8.58333 2.94423Z" />
+</svg>

assets/icons/id-card.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.6667 4.44423V11.5553C14.6667 11.7998 14.4667 11.9998 14.2222 11.9998H8.88889C8.88889 10.772 7.89444 9.77756 6.66667 9.77756H4.88889C3.66111 9.77756 2.66667 10.772 2.66667 11.9998H1.77778C1.53333 11.9998 1.33333 11.7998 1.33333 11.5553V4.44423H14.6667ZM1.77778 0.888672C0.797222 0.888672 0 1.68589 0 2.66645V11.5553C0 12.5359 0.797222 13.3331 1.77778 13.3331H14.2222C15.2028 13.3331 16 12.5359 16 11.5553V2.66645C16 1.68589 15.2028 0.888672 14.2222 0.888672H1.77778ZM7.55556 7.11089C7.55556 6.6394 7.36825 6.18721 7.03486 5.85382C6.70146 5.52042 6.24927 5.33312 5.77778 5.33312C5.30628 5.33312 4.8541 5.52042 4.5207 5.85382C4.1873 6.18721 4 6.6394 4 7.11089C4 7.58239 4.1873 8.03457 4.5207 8.36797C4.8541 8.70137 5.30628 8.88867 5.77778 8.88867C6.24927 8.88867 6.70146 8.70137 7.03486 8.36797C7.36825 8.03457 7.55556 7.58239 7.55556 7.11089ZM10.4444 5.77756C10.075 5.77756 9.77778 6.07478 9.77778 6.44423C9.77778 6.81367 10.075 7.11089 10.4444 7.11089H12.6667C13.0361 7.11089 13.3333 6.81367 13.3333 6.44423C13.3333 6.07478 13.0361 5.77756 12.6667 5.77756H10.4444ZM10.4444 8.44423C10.075 8.44423 9.77778 8.74145 9.77778 9.11089C9.77778 9.48034 10.075 9.77756 10.4444 9.77756H12.6667C13.0361 9.77756 13.3333 9.48034 13.3333 9.11089C13.3333 8.74145 13.0361 8.44423 12.6667 8.44423H10.4444Z" />
+</svg>

assets/icons/info-solid.svg

@@ -0,0 +1,13 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3150_62387)">
+<path d="M12 24C5.38595 24 0 18.6141 0 12C0 5.38595 5.38595 0 12 0C18.6141 0 24 5.38596 24 12C24 18.6141 18.6141 24 12 24ZM12 21.7194C17.3816 21.7194 21.7194 17.3816 21.7194 12C21.7194 6.6185 17.3816 2.28062 12 2.28062C6.6185 2.28062 2.28062 6.6185 2.28062 12C2.28062 17.3816 6.6185 21.7194 12 21.7194Z" fill="#0F3F4F"/>
+<path d="M11.9998 7.86572C11.7067 7.86572 11.4255 7.74613 11.2183 7.53325C11.011 7.32037 10.8945 7.03164 10.8945 6.73059C10.8945 6.42953 11.011 6.14081 11.2183 5.92793C11.4255 5.71505 11.7067 5.59545 11.9998 5.59545H12.0121C12.3053 5.59545 12.5864 5.71505 12.7937 5.92793C13.0009 6.14081 13.1174 6.42953 13.1174 6.73059C13.1174 7.03164 13.0009 7.32037 12.7937 7.53325C12.5864 7.74613 12.3053 7.86572 12.0121 7.86572H11.9998Z" fill="#0F3F4F"/>
+<path d="M11.9998 16.5136C11.7067 16.5136 11.4255 16.394 11.2183 16.1811C11.011 15.9683 10.8945 15.6795 10.8945 15.3785V11.0546C10.8945 10.7535 11.011 10.4648 11.2183 10.2519C11.4255 10.039 11.7067 9.91943 11.9998 9.91943C12.2929 9.91943 12.5741 10.039 12.7813 10.2519C12.9886 10.4648 13.1051 10.7535 13.1051 11.0546V15.3785C13.1051 15.6795 12.9886 15.9683 12.7813 16.1811C12.5741 16.394 12.2929 16.5136 11.9998 16.5136Z" fill="#0F3F4F"/>
+<path d="M11.9998 18.5136C11.7067 18.5136 11.4255 18.394 11.2183 18.1811C11.011 17.9683 10.8945 17.6795 10.8945 17.3785V13.0546C10.8945 12.7535 11.011 12.4648 11.2183 12.2519C11.4255 12.039 11.7067 11.9194 11.9998 11.9194C12.2929 11.9194 12.5741 12.039 12.7813 12.2519C12.9886 12.4648 13.1051 12.7535 13.1051 13.0546V17.3785C13.1051 17.6795 12.9886 17.9683 12.7813 18.1811C12.5741 18.394 12.2929 18.5136 11.9998 18.5136Z" fill="#0F3F4F"/>
+</g>
+<defs>
+<clipPath id="clip0_3150_62387">
+<rect width="24" height="24" fill="white" transform="matrix(1 0 0 -1 0 24)"/>
+</clipPath>
+</defs>
+</svg>

assets/icons/info.svg

@@ -0,0 +1,5 @@
+<svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.63351 0C10.9396 0 13.1076 0.898028 14.7383 2.52868C16.369 4.15934 17.267 6.32739 17.267 8.63347C17.267 9.77707 17.0556 10.8804 16.6387 11.9128C16.2244 12.9388 15.6271 13.8462 14.8634 14.6098C12.9836 16.4897 9.13545 19.2278 8.97255 19.3435L8.04782 20V17.2475C5.96223 17.1087 4.02053 16.2301 2.52868 14.7383C0.898067 13.1076 0 10.9396 0 8.63347C0 6.32739 0.898028 4.15934 2.52868 2.52868C4.15934 0.898028 6.32743 0 8.63351 0ZM8.5 14.5C11.8137 14.5 14.5 11.8137 14.5 8.5C14.5 5.18629 11.8137 2.5 8.5 2.5C5.18629 2.5 2.5 5.18629 2.5 8.5C2.5 11.8137 5.18629 14.5 8.5 14.5Z" fill="#0F3F4F"/>
+<path d="M8.50001 8C7.94861 8 7.5 8.55766 7.5 9.2431V11.7569C7.5 12.4423 7.94861 13 8.50001 13C9.05141 13 9.5 12.4423 9.5 11.7569V9.2431C9.50002 8.55763 9.05141 8 8.50001 8Z" fill="#0F3F4F"/>
+<path d="M8.45021 4.5C7.76096 4.5 7.2002 5.06076 7.2002 5.74999C7.2002 6.43921 7.76096 7 8.45021 7C9.13946 7 9.7002 6.43924 9.7002 5.74999C9.7002 5.06073 9.13946 4.5 8.45021 4.5Z" fill="#0F3F4F"/>
+</svg>

assets/icons/mark-to-up.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="7" viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 1.7074L4.29293 5.00033C4.68182 5.38921 5.31818 5.38921 5.70707 5.00033L9 1.7074" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
+</svg>

assets/icons/monument.svg

@@ -0,0 +1,10 @@
+<svg width="12" height="16" viewBox="0 0 12 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_693_3921)">
+<path d="M5.64687 0.146777C5.84062 -0.0469727 6.15938 -0.0469727 6.35313 0.146777L8.85312 2.64678C8.93125 2.7249 8.98125 2.82803 8.99687 2.9374L10.2531 12.9999H1.74688L3.00312 2.9374C3.01562 2.82803 3.06562 2.7249 3.14687 2.64678L5.64687 0.146777ZM4.75 8.4999C4.33437 8.4999 4 8.83428 4 9.2499C4 9.66553 4.33437 9.9999 4.75 9.9999H7.25C7.66563 9.9999 8 9.66553 8 9.2499C8 8.83428 7.66563 8.4999 7.25 8.4999H4.75ZM1 13.9999H11C11.5531 13.9999 12 14.4468 12 14.9999C12 15.553 11.5531 15.9999 11 15.9999H1C0.446875 15.9999 0 15.553 0 14.9999C0 14.4468 0.446875 13.9999 1 13.9999Z" />
+</g>
+<defs>
+<clipPath id="clip0_693_3921">
+<rect width="12" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>

assets/icons/next.svg

@@ -0,0 +1,10 @@
+<svg width="23" height="10" viewBox="0 0 23 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2817_21758)">
+<path d="M1.5 1L9.73232 8.34907C10.7045 9.21698 12.2955 9.21698 13.2677 8.34907L21.5 1" stroke="#B7C6CB" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_2817_21758">
+<rect width="22" height="10" fill="white" transform="translate(0.5)"/>
+</clipPath>
+</defs>
+</svg>

assets/icons/scroll.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 2.22201V3.55534C0 4.04701 0.397222 4.44423 0.888889 4.44423H1.33333H2.66667V2.22201C2.66667 1.48589 2.06944 0.888672 1.33333 0.888672C0.597222 0.888672 0 1.48589 0 2.22201ZM3.11111 0.888672C3.38889 1.26089 3.55556 1.72201 3.55556 2.22201V10.6664C3.55556 11.647 4.35278 12.4442 5.33333 12.4442C6.31389 12.4442 7.11111 11.647 7.11111 10.6664V10.5192C7.11111 9.61923 7.84167 8.88867 8.74167 8.88867H13.3333V3.55534C13.3333 2.08312 12.1389 0.888672 10.6667 0.888672H3.11111ZM12.8889 13.3331C14.6083 13.3331 16 11.9415 16 10.222C16 9.97756 15.8 9.77756 15.5556 9.77756H8.74167C8.33333 9.77756 8 10.1081 8 10.5192V10.6664C8 12.1387 6.80556 13.3331 5.33333 13.3331H10.2222H12.8889Z" />
+</svg>

assets/icons/search.svg

@@ -1,3 +1,3 @@
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M9.00005 2.70005C5.52065 2.70005 2.70005 5.52065 2.70005 9.00005C2.70005 12.4794 5.52065 15.3 9.00005 15.3C10.6547 15.3 12.1581 14.6637 13.2831 13.6202C14.5253 12.4681 15.3 10.8254 15.3 9.00005C15.3 5.52065 12.4794 2.70005 9.00005 2.70005ZM0.300049 9.00005C0.300049 4.19517 4.19517 0.300049 9.00005 0.300049C13.8049 0.300049 17.7001 4.19517 17.7001 9.00005C17.7001 11.0721 16.9746 12.976 15.7659 14.4697L18.9476 17.6515C19.4163 18.1201 19.4163 18.8799 18.9476 19.3486C18.479 19.8172 17.7192 19.8172 17.2506 19.3486L14.0132 16.1112C12.5964 17.1115 10.866 17.7001 9.00005 17.7001C4.19517 17.7001 0.300049 13.8049 0.300049 9.00005Z" fill="#0F3F4F"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.00005 2.70005C5.52065 2.70005 2.70005 5.52065 2.70005 9.00005C2.70005 12.4794 5.52065 15.3 9.00005 15.3C10.6547 15.3 12.1581 14.6637 13.2831 13.6202C14.5253 12.4681 15.3 10.8254 15.3 9.00005C15.3 5.52065 12.4794 2.70005 9.00005 2.70005ZM0.300049 9.00005C0.300049 4.19517 4.19517 0.300049 9.00005 0.300049C13.8049 0.300049 17.7001 4.19517 17.7001 9.00005C17.7001 11.0721 16.9746 12.976 15.7659 14.4697L18.9476 17.6515C19.4163 18.1201 19.4163 18.8799 18.9476 19.3486C18.479 19.8172 17.7192 19.8172 17.2506 19.3486L14.0132 16.1112C12.5964 17.1115 10.866 17.7001 9.00005 17.7001C4.19517 17.7001 0.300049 13.8049 0.300049 9.00005Z"/>
 </svg>

assets/icons/street-view.svg

@@ -0,0 +1,10 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_706_3958)">
+<path d="M10 2C10 1.46957 9.78929 0.960859 9.41421 0.585786C9.03914 0.210714 8.53043 0 8 0C7.46957 0 6.96086 0.210714 6.58579 0.585786C6.21071 0.960859 6 1.46957 6 2C6 2.53043 6.21071 3.03914 6.58579 3.41421C6.96086 3.78929 7.46957 4 8 4C8.53043 4 9.03914 3.78929 9.41421 3.41421C9.78929 3.03914 10 2.53043 10 2ZM7 5C5.89687 5 5 5.89687 5 7V8.5C5 9.05313 5.44688 9.5 6 9.5H6.05625L6.40312 12.6094C6.45937 13.1156 6.8875 13.5 7.39687 13.5H8.60625C9.11562 13.5 9.54375 13.1156 9.6 12.6094L9.94375 9.5H10C10.5531 9.5 11 9.05313 11 8.5V7C11 5.89687 10.1031 5 9 5H7ZM4.13438 12.3188C4.54063 12.2438 4.8125 11.8531 4.7375 11.4469C4.6625 11.0406 4.27187 10.7688 3.86562 10.8438C2.85312 11.0281 1.9625 11.2875 1.30313 11.6187C0.975 11.7844 0.66875 11.9844 0.434375 12.2312C0.2 12.4844 0 12.8281 0 13.25C0 13.9187 0.484375 14.3781 0.909375 14.6562C1.36875 14.9563 1.98125 15.1969 2.67188 15.3875C4.06875 15.7719 5.95 16 8 16C10.05 16 11.9312 15.7719 13.325 15.3875C14.0156 15.1969 14.6312 14.9563 15.0875 14.6562C15.5156 14.3781 15.9969 13.9187 15.9969 13.25C15.9969 12.8281 15.7969 12.4844 15.5594 12.2312C15.325 11.9844 15.0188 11.7844 14.6906 11.6187C14.0344 11.2875 13.1438 11.0281 12.1281 10.8438C11.7219 10.7688 11.3313 11.0406 11.2563 11.4469C11.1813 11.8531 11.4531 12.2438 11.8594 12.3188C12.8031 12.4906 13.5375 12.7188 14.0156 12.9594C14.1156 13.0094 14.1969 13.0563 14.2625 13.1C14.375 13.175 14.375 13.325 14.2625 13.4C13.9875 13.5781 13.5406 13.7688 12.9187 13.9406C11.6969 14.2812 9.95312 14.5 8 14.5C6.04688 14.5 4.30313 14.2812 3.07188 13.9406C2.45 13.7688 2.00312 13.5781 1.72812 13.4C1.61563 13.325 1.61563 13.175 1.72812 13.1C1.79375 13.0563 1.87813 13.0094 1.975 12.9594C2.45312 12.7188 3.1875 12.4938 4.13125 12.3188H4.13438Z" />
+</g>
+<defs>
+<clipPath id="clip0_706_3958">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>

assets/icons/travels-screens/calendar.svg

@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2039_19282)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.5 2.00195C9.05228 2.00195 9.5 2.44967 9.5 3.00195V4.00195H14.5V3.00195C14.5 2.44967 14.9477 2.00195 15.5 2.00195C16.0523 2.00195 16.5 2.44967 16.5 3.00195V4.00195H18.5C20.1569 4.00195 21.5 5.3451 21.5 7.00195V18.002C21.5 19.6588 20.1569 21.002 18.5 21.002H5.5C3.84315 21.002 2.5 19.6588 2.5 18.002V7.00195C2.5 5.3451 3.84315 4.00195 5.5 4.00195H7.5V3.00195C7.5 2.44967 7.94772 2.00195 8.5 2.00195ZM7.5 6.00195H5.5C4.94772 6.00195 4.5 6.44967 4.5 7.00195V9.50195H19.5V7.00195C19.5 6.44967 19.0523 6.00195 18.5 6.00195H16.5V7.00195C16.5 7.55424 16.0523 8.00195 15.5 8.00195C14.9477 8.00195 14.5 7.55424 14.5 7.00195V6.00195H9.5V7.00195C9.5 7.55424 9.05228 8.00195 8.5 8.00195C7.94772 8.00195 7.5 7.55424 7.5 7.00195V6.00195ZM19.5 11.502H4.5V18.002C4.5 18.5542 4.94772 19.002 5.5 19.002H18.5C19.0523 19.002 19.5 18.5542 19.5 18.002V11.502Z"/>
+</g>
+<defs>
+<clipPath id="clip0_2039_19282">
+<rect width="24" height="24" fill="white" transform="translate(0 0.00195312)"/>
+</clipPath>
+</defs>
+</svg>

assets/icons/travels-screens/check.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.07 2.87008C10.2522 3.05233 10.2522 3.3478 10.07 3.53005L4.93662 8.66338C4.75438 8.84563 4.4589 8.84563 4.27666 8.66338L1.94332 6.33005C1.76108 6.1478 1.76108 5.85233 1.94332 5.67008C2.12557 5.48784 2.42105 5.48784 2.60329 5.67008L4.60664 7.67343L9.40999 2.87008C9.59224 2.68784 9.88771 2.68784 10.07 2.87008Z" fill="white"/>
+</svg>

assets/icons/travels-screens/chevron-bottom.svg

@@ -0,0 +1,3 @@
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.49805 7.50098L10.4985 12.5014L15.4989 7.50098" stroke="#C8C8C8" stroke-width="1.66678" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

assets/icons/travels-screens/chevron-right.svg

@@ -0,0 +1,10 @@
+<svg width="10" height="11" viewBox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1693_17594)">
+<path d="M3.4154 1.5L6.70833 4.79293C7.09722 5.18182 7.09722 5.81818 6.70833 6.20707L3.4154 9.5" stroke="#0F3F4F" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_1693_17594">
+<rect width="10" height="10" fill="white" transform="translate(0 0.501953)"/>
+</clipPath>
+</defs>
+</svg>

assets/icons/travels-screens/choose.svg

@@ -0,0 +1,10 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1730_17157)">
+<path d="M8 1.5C9.72391 1.5 11.3772 2.18482 12.5962 3.40381C13.8152 4.62279 14.5 6.27609 14.5 8C14.5 9.72391 13.8152 11.3772 12.5962 12.5962C11.3772 13.8152 9.72391 14.5 8 14.5C6.27609 14.5 4.62279 13.8152 3.40381 12.5962C2.18482 11.3772 1.5 9.72391 1.5 8C1.5 6.27609 2.18482 4.62279 3.40381 3.40381C4.62279 2.18482 6.27609 1.5 8 1.5ZM8 16C10.1217 16 12.1566 15.1571 13.6569 13.6569C15.1571 12.1566 16 10.1217 16 8C16 5.87827 15.1571 3.84344 13.6569 2.34315C12.1566 0.842855 10.1217 0 8 0C5.87827 0 3.84344 0.842855 2.34315 2.34315C0.842855 3.84344 0 5.87827 0 8C0 10.1217 0.842855 12.1566 2.34315 13.6569C3.84344 15.1571 5.87827 16 8 16ZM11.5312 6.53125C11.825 6.2375 11.825 5.7625 11.5312 5.47188C11.2375 5.18125 10.7625 5.17813 10.4719 5.47188L7.00313 8.94063L5.53438 7.47188C5.24063 7.17813 4.76562 7.17813 4.475 7.47188C4.18437 7.76562 4.18125 8.24063 4.475 8.53125L6.475 10.5312C6.76875 10.825 7.24375 10.825 7.53438 10.5312L11.5312 6.53125Z" fill="#0F3F4F"/>
+</g>
+<defs>
+<clipPath id="clip0_1730_17157">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>

assets/icons/travels-screens/circle-check-regular.svg

@@ -0,0 +1,10 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2202_20286)">
+<path d="M8 1.50195C9.72391 1.50195 11.3772 2.18677 12.5962 3.40576C13.8152 4.62475 14.5 6.27805 14.5 8.00195C14.5 9.72586 13.8152 11.3792 12.5962 12.5981C11.3772 13.8171 9.72391 14.502 8 14.502C6.27609 14.502 4.62279 13.8171 3.40381 12.5981C2.18482 11.3792 1.5 9.72586 1.5 8.00195C1.5 6.27805 2.18482 4.62475 3.40381 3.40576C4.62279 2.18677 6.27609 1.50195 8 1.50195ZM8 16.002C10.1217 16.002 12.1566 15.1591 13.6569 13.6588C15.1571 12.1585 16 10.1237 16 8.00195C16 5.88022 15.1571 3.84539 13.6569 2.3451C12.1566 0.844808 10.1217 0.00195313 8 0.00195312C5.87827 0.00195313 3.84344 0.844808 2.34315 2.3451C0.842855 3.84539 0 5.88022 0 8.00195C0 10.1237 0.842855 12.1585 2.34315 13.6588C3.84344 15.1591 5.87827 16.002 8 16.002ZM11.5312 6.5332C11.825 6.23945 11.825 5.76445 11.5312 5.47383C11.2375 5.1832 10.7625 5.18008 10.4719 5.47383L7.00313 8.94258L5.53438 7.47383C5.24063 7.18008 4.76562 7.18008 4.475 7.47383C4.18437 7.76758 4.18125 8.24258 4.475 8.5332L6.475 10.5332C6.76875 10.827 7.24375 10.827 7.53438 10.5332L11.5312 6.5332Z" fill="#C8C8C8"/>
+</g>
+<defs>
+<clipPath id="clip0_2202_20286">
+<rect width="16" height="16" fill="white" transform="translate(0 0.00195312)"/>
+</clipPath>
+</defs>
+</svg>

assets/icons/travels-screens/circle-check.svg

@@ -0,0 +1,10 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1740_17429)">
+<path d="M8 16C10.1217 16 12.1566 15.1571 13.6569 13.6569C15.1571 12.1566 16 10.1217 16 8C16 5.87827 15.1571 3.84344 13.6569 2.34315C12.1566 0.842855 10.1217 0 8 0C5.87827 0 3.84344 0.842855 2.34315 2.34315C0.842855 3.84344 0 5.87827 0 8C0 10.1217 0.842855 12.1566 2.34315 13.6569C3.84344 15.1571 5.87827 16 8 16ZM11.5312 6.53125L7.53125 10.5312C7.2375 10.825 6.7625 10.825 6.47188 10.5312L4.47188 8.53125C4.17813 8.2375 4.17813 7.7625 4.47188 7.47188C4.76562 7.18125 5.24062 7.17813 5.53125 7.47188L7 8.94063L10.4688 5.46875C10.7625 5.175 11.2375 5.175 11.5281 5.46875C11.8187 5.7625 11.8219 6.2375 11.5281 6.52812L11.5312 6.53125Z"/>
+</g>
+<defs>
+<clipPath id="clip0_1740_17429">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>

assets/icons/travels-screens/circle-plus.svg

@@ -0,0 +1,10 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1967_17639)">
+<path d="M8.25 16.001C10.3717 16.001 12.4066 15.1581 13.9069 13.6578C15.4071 12.1575 16.25 10.1227 16.25 8.00098C16.25 5.87924 15.4071 3.84441 13.9069 2.34412C12.4066 0.843831 10.3717 0.000976563 8.25 0.000976562C6.12827 0.000976563 4.09344 0.843831 2.59315 2.34412C1.09285 3.84441 0.25 5.87924 0.25 8.00098C0.25 10.1227 1.09285 12.1575 2.59315 13.6578C4.09344 15.1581 6.12827 16.001 8.25 16.001ZM7.5 10.751V8.75098H5.5C5.08437 8.75098 4.75 8.4166 4.75 8.00098C4.75 7.58535 5.08437 7.25098 5.5 7.25098H7.5V5.25098C7.5 4.83535 7.83437 4.50098 8.25 4.50098C8.66562 4.50098 9 4.83535 9 5.25098V7.25098H11C11.4156 7.25098 11.75 7.58535 11.75 8.00098C11.75 8.4166 11.4156 8.75098 11 8.75098H9V10.751C9 11.1666 8.66562 11.501 8.25 11.501C7.83437 11.501 7.5 11.1666 7.5 10.751Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_1967_17639">
+<rect width="16" height="16" fill="white" transform="translate(0.25 0.000976562)"/>
+</clipPath>
+</defs>
+</svg>

assets/icons/travels-screens/down-arrow.svg

@@ -0,0 +1,10 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2039_18224)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.1772 5.46104C14.4762 5.8348 14.4156 6.38019 14.0419 6.67919L9.04189 10.6792C8.72537 10.9324 8.27561 10.9324 7.95908 10.6792L2.95909 6.67919C2.58533 6.38019 2.52473 5.8348 2.82373 5.46104C3.12274 5.08728 3.66813 5.02668 4.04189 5.32569L8.50049 8.89257L12.9591 5.32569C13.3328 5.02668 13.8782 5.08728 14.1772 5.46104Z" fill="#0F3F4F"/>
+</g>
+<defs>
+<clipPath id="clip0_2039_18224">
+<rect width="16" height="16" fill="white" transform="translate(0.5 0.00195312)"/>
+</clipPath>
+</defs>
+</svg>

assets/icons/travels-screens/info.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 1.50195C11.5899 1.50195 14.5 4.4121 14.5 8.00195C14.5 11.5918 11.5899 14.502 8 14.502C4.41014 14.502 1.5 11.5918 1.5 8.00195C1.5 4.4121 4.41014 1.50195 8 1.50195ZM8 16.002C12.4183 16.002 16 12.4202 16 8.00195C16 3.58368 12.4183 0.00195312 8 0.00195312C3.58172 0.00195312 0 3.58368 0 8.00195C0 12.4202 3.58172 16.002 8 16.002Z" fill="#0F3F4F"/>
+<path d="M8.08319 3.94289C8.00661 3.93665 7.9281 3.9388 7.84875 3.95021C7.32804 4.02509 6.9375 4.47584 6.9375 5.00191C6.9375 5.58501 7.4169 6.06441 8 6.06441C8.5831 6.06441 9.0625 5.58501 9.0625 5.00191C9.06251 4.44076 8.61926 3.98652 8.08319 3.94289ZM7 6.43941C6.55512 6.43941 6.1875 6.80703 6.1875 7.25191C6.1875 7.69678 6.55512 8.06441 7 8.06441H7.1875V10.4394H7C6.55512 10.4394 6.1875 10.807 6.1875 11.2519C6.1875 11.6968 6.55512 12.0644 7 12.0644H9C9.44488 12.0644 9.8125 11.6968 9.8125 11.2519C9.8125 10.807 9.44488 10.4394 9 10.4394H8.8125V7.25191C8.8125 6.80703 8.44488 6.43941 8 6.43941H7Z" fill="#0F3F4F"/>
+</svg>

assets/icons/travels-screens/pen-to-square.svg

@@ -0,0 +1,10 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1699_18642)">
+<path d="M16.5797 0.762988C15.8098 -0.0069336 14.5652 -0.0069336 13.7953 0.762988L12.7371 1.81768L16.1789 5.25947L17.2371 4.20127C18.007 3.43135 18.007 2.18682 17.2371 1.41689L16.5797 0.762988ZM6.06094 8.49736C5.84648 8.71182 5.68125 8.97549 5.58633 9.26729L4.5457 12.3892C4.44375 12.6915 4.52461 13.0255 4.74961 13.254C4.97461 13.4825 5.30859 13.5599 5.61445 13.4579L8.73633 12.4173C9.02461 12.3224 9.28828 12.1571 9.50625 11.9427L15.3879 6.05752L11.9426 2.61221L6.06094 8.49736ZM3.375 2.2501C1.51172 2.2501 0 3.76182 0 5.6251V14.6251C0 16.4884 1.51172 18.0001 3.375 18.0001H12.375C14.2383 18.0001 15.75 16.4884 15.75 14.6251V11.2501C15.75 10.6278 15.2473 10.1251 14.625 10.1251C14.0027 10.1251 13.5 10.6278 13.5 11.2501V14.6251C13.5 15.2474 12.9973 15.7501 12.375 15.7501H3.375C2.75273 15.7501 2.25 15.2474 2.25 14.6251V5.6251C2.25 5.00283 2.75273 4.5001 3.375 4.5001H6.75C7.37227 4.5001 7.875 3.99736 7.875 3.3751C7.875 2.75283 7.37227 2.2501 6.75 2.2501H3.375Z" fill="#0F3F4F"/>
+</g>
+<defs>
+<clipPath id="clip0_1699_18642">
+<rect width="18" height="18" fill="white"/>
+</clipPath>
+</defs>
+</svg>

assets/icons/travels-screens/rotate.svg

@@ -0,0 +1,10 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2133_19451)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.73572 4.47246C5.59286 3.64964 6.74826 3.14612 8.02131 3.14612C10.506 3.14612 12.5232 5.16243 12.7715 7.5389L12.6166 7.41952C12.2816 7.16139 11.8036 7.22739 11.549 7.56693C11.2943 7.90647 11.3594 8.39097 11.6944 8.6491L13.004 9.65833L13.4441 9.99741L13.8986 9.67866L15.3378 8.66943C15.6839 8.42677 15.7703 7.9457 15.5309 7.59494C15.2916 7.24418 14.817 7.15654 14.4709 7.3992L14.3005 7.5187C14.0399 4.32281 11.3637 1.60156 8.02131 1.60156C6.34316 1.60156 4.81679 2.26735 3.68792 3.35101C3.3824 3.64429 3.36929 4.13309 3.65863 4.44277C3.94797 4.75245 4.4302 4.76575 4.73572 4.47246ZM11.2636 11.5084C10.4065 12.3313 9.25109 12.8348 7.97804 12.8348C5.49334 12.8348 3.47613 10.8185 3.22785 8.442L3.38277 8.56138C3.71774 8.81951 4.19574 8.75351 4.4504 8.41397C4.70506 8.07444 4.63995 7.58993 4.30498 7.3318L2.9953 6.32257L2.55529 5.98349L2.10073 6.30224L0.661508 7.31147C0.315461 7.55413 0.229003 8.0352 0.468402 8.38596C0.707799 8.73672 1.1824 8.82436 1.52844 8.5817L1.69886 8.4622C1.95941 11.6581 4.63569 14.3793 7.97804 14.3793C9.65619 14.3793 11.1826 13.7136 12.3114 12.6299C12.6169 12.3366 12.6301 11.8478 12.3407 11.5381C12.0514 11.2284 11.5692 11.2152 11.2636 11.5084Z" fill="#0F3F4F"/>
+</g>
+<defs>
+<clipPath id="clip0_2133_19451">
+<rect width="16" height="16" fill="white" transform="translate(0 0.00195312)"/>
+</clipPath>
+</defs>
+</svg>

assets/icons/travels-screens/save.svg

@@ -0,0 +1,10 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1937_23992)">
+<path d="M2.28571 0C1.025 0 0 1.025 0 2.28571V13.7143C0 14.975 1.025 16 2.28571 16H13.7143C14.975 16 16 14.975 16 13.7143V5.04643C16 4.43929 15.7607 3.85714 15.3321 3.42857L12.5714 0.667857C12.1429 0.239286 11.5607 0 10.9536 0H2.28571ZM2.28571 3.42857C2.28571 2.79643 2.79643 2.28571 3.42857 2.28571H10.2857C10.9179 2.28571 11.4286 2.79643 11.4286 3.42857V5.71429C11.4286 6.34643 10.9179 6.85714 10.2857 6.85714H3.42857C2.79643 6.85714 2.28571 6.34643 2.28571 5.71429V3.42857ZM8 9.14286C8.60621 9.14286 9.18759 9.38367 9.61624 9.81233C10.0449 10.241 10.2857 10.8224 10.2857 11.4286C10.2857 12.0348 10.0449 12.6162 9.61624 13.0448C9.18759 13.4735 8.60621 13.7143 8 13.7143C7.39379 13.7143 6.81241 13.4735 6.38376 13.0448C5.9551 12.6162 5.71429 12.0348 5.71429 11.4286C5.71429 10.8224 5.9551 10.241 6.38376 9.81233C6.81241 9.38367 7.39379 9.14286 8 9.14286Z"/>
+</g>
+<defs>
+<clipPath id="clip0_1937_23992">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>

assets/icons/travels-screens/square.svg

@@ -0,0 +1,3 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1.25" y="0.5" width="15" height="15" rx="3.5" stroke="white"/>
+</svg>

assets/icons/travels-screens/three-dots.svg

@@ -0,0 +1,12 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1696_18021)">
+<path d="M11.5 5C11.5 5.82843 10.8284 6.5 10 6.5C9.17157 6.5 8.5 5.82843 8.5 5C8.5 4.17157 9.17157 3.5 10 3.5C10.8284 3.5 11.5 4.17157 11.5 5Z" fill="white"/>
+<path d="M11.5 10C11.5 10.8284 10.8284 11.5 10 11.5C9.17157 11.5 8.5 10.8284 8.5 10C8.5 9.17157 9.17157 8.5 10 8.5C10.8284 8.5 11.5 9.17157 11.5 10Z" fill="white"/>
+<path d="M10 16.5C10.8284 16.5 11.5 15.8284 11.5 15C11.5 14.1716 10.8284 13.5 10 13.5C9.17157 13.5 8.5 14.1716 8.5 15C8.5 15.8284 9.17157 16.5 10 16.5Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_1696_18021">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>

assets/icons/travels-screens/trash-solid.svg

@@ -0,0 +1,3 @@
+<svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.725 0.553125C4.89375 0.2125 5.24062 0 5.61875 0H9.38125C9.75938 0 10.1062 0.2125 10.275 0.553125L10.5 1H13.5C14.0531 1 14.5 1.44687 14.5 2C14.5 2.55312 14.0531 3 13.5 3H1.5C0.946875 3 0.5 2.55312 0.5 2C0.5 1.44687 0.946875 1 1.5 1H4.5L4.725 0.553125ZM1.5 4H13.5V14C13.5 15.1031 12.6031 16 11.5 16H3.5C2.39688 16 1.5 15.1031 1.5 14V4ZM4.5 6C4.225 6 4 6.225 4 6.5V13.5C4 13.775 4.225 14 4.5 14C4.775 14 5 13.775 5 13.5V6.5C5 6.225 4.775 6 4.5 6ZM7.5 6C7.225 6 7 6.225 7 6.5V13.5C7 13.775 7.225 14 7.5 14C7.775 14 8 13.775 8 13.5V6.5C8 6.225 7.775 6 7.5 6ZM10.5 6C10.225 6 10 6.225 10 6.5V13.5C10 13.775 10.225 14 10.5 14C10.775 14 11 13.775 11 13.5V6.5C11 6.225 10.775 6 10.5 6Z"/>
+</svg>

assets/icons/travels-screens/trip.svg

@@ -0,0 +1,5 @@
+<svg width="129" height="129" viewBox="0 0 129 129" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.6707 54.1246C29.1815 47.2282 41.7497 30.5135 41.7497 21.1249C41.7497 9.73822 32.5115 0.5 21.1249 0.5C9.73822 0.5 0.5 9.73822 0.5 21.1249C0.5 30.5135 13.0683 47.2282 18.579 54.1246C19.9003 55.7682 22.3495 55.7682 23.6707 54.1246ZM21.1249 14.2499C22.028 14.2495 22.9223 14.427 23.7568 14.7722C24.5914 15.1175 25.3496 15.6239 25.9884 16.2623C26.6272 16.9008 27.1339 17.6588 27.4796 18.4931C27.8253 19.3275 28.0033 20.2217 28.0033 21.1249C28.0033 22.028 27.8253 22.9223 27.4796 23.7566C27.1339 24.5909 26.6272 25.349 25.9884 25.9874C25.3496 26.6258 24.5914 27.1322 23.7568 27.4775C22.9223 27.8228 22.028 28.0003 21.1249 27.9998C20.2217 28.0003 19.3274 27.8228 18.4929 27.4775C17.6584 27.1322 16.9001 26.6258 16.2613 25.9874C15.6226 25.349 15.1158 24.5909 14.7701 23.7566C14.4244 22.9223 14.2465 22.028 14.2465 21.1249C14.2465 20.2217 14.4244 19.3275 14.7701 18.4931C15.1158 17.6588 15.6226 16.9008 16.2613 16.2623C16.9001 15.6239 17.6584 15.1175 18.4929 14.7722C19.3274 14.427 20.2217 14.2495 21.1249 14.2499Z"/>
+<path d="M24.4278 128.187C13.6643 126.381 4.76975 118.39 1.4784 107.57C0.738501 105.138 0.659679 104.421 0.637477 99.9223C0.616417 95.6403 0.707153 94.6138 1.29868 92.4503C3.82765 83.2006 10.8336 75.5715 19.5906 72.5314C24.2527 70.9129 23.4075 70.9601 51.1551 70.7685L77.0278 70.5898L78.32 69.8999C80.3116 68.8365 81.8917 67.2435 82.8101 65.3733C83.938 63.0765 83.9886 59.6558 82.9296 57.2883C82.0975 55.4282 79.8473 53.2171 77.8453 52.2922C76.4361 51.6412 76.2784 51.6359 55.437 51.5516L34.448 51.4666L36.0717 49.4457C37.9505 47.1073 41.1108 42.3535 42.1653 40.2796L42.8919 38.8506H59.987C76.1394 38.8506 77.2132 38.884 79.4617 39.4571C85.9809 41.1185 90.9628 45.0459 94.0387 50.9486C95.7663 54.2637 96.4932 57.2619 96.5031 61.1132C96.5134 65.118 95.9177 67.664 94.1094 71.3419C92.9261 73.7487 92.2741 74.6294 89.9804 76.9196C87.0381 79.8575 84.4318 81.4503 80.3371 82.8133L78.2312 83.5143L52.0576 83.6707C25.9976 83.8264 25.8764 83.8299 24.1293 84.4899C19.1357 86.3763 15.7761 89.7577 14.0579 94.6268C13.0889 97.3728 12.9851 101.607 13.825 104.134C14.7299 106.857 16.0671 109.104 17.8543 110.905C19.7664 112.833 21.3202 113.822 24.1934 114.941L26.1849 115.717L54.5409 115.802L82.897 115.888L83.9856 118.049C85.3366 120.732 87.0447 123.482 89.1237 126.322L90.7206 128.503L58.3023 128.467C40.4722 128.448 25.2287 128.322 24.4278 128.187Z"/>
+<path d="M110.421 127.269C115.931 120.373 128.5 103.658 128.5 94.2694C128.5 82.8828 119.262 73.6445 107.875 73.6445C96.4882 73.6445 87.25 82.8828 87.25 94.2694C87.25 103.658 99.8183 120.373 105.329 127.269C106.65 128.913 109.099 128.913 110.421 127.269ZM107.875 87.3944C108.778 87.3942 109.672 87.5718 110.506 87.9172C111.341 88.2626 112.099 88.7689 112.737 89.4074C113.376 90.0458 113.883 90.8038 114.228 91.638C114.574 92.4722 114.752 93.3664 114.752 94.2694C114.752 95.1724 114.574 96.0665 114.228 96.9008C113.883 97.735 113.376 98.493 112.737 99.1314C112.099 99.7698 111.341 100.276 110.506 100.622C109.672 100.967 108.778 101.145 107.875 101.144C106.972 101.145 106.078 100.967 105.243 100.622C104.409 100.276 103.651 99.7698 103.012 99.1314C102.374 98.493 101.867 97.735 101.521 96.9008C101.176 96.0665 100.998 95.1724 100.998 94.2694C100.998 93.3664 101.176 92.4722 101.521 91.638C101.867 90.8038 102.374 90.0458 103.012 89.4074C103.651 88.7689 104.409 88.2626 105.243 87.9172C106.078 87.5718 106.972 87.3942 107.875 87.3944Z"/>
+</svg>

assets/icons/travels-screens/x-circle.svg

@@ -0,0 +1,12 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1937_24043)">
+<rect y="0.00195312" width="24" height="24" rx="12" fill="white"/>
+<path d="M12 24.002C15.1826 24.002 18.2348 22.7377 20.4853 20.4872C22.7357 18.2368 24 15.1846 24 12.002C24 8.81936 22.7357 5.76711 20.4853 3.51667C18.2348 1.26624 15.1826 0.00195313 12 0.00195312C8.8174 0.00195313 5.76516 1.26624 3.51472 3.51667C1.26428 5.76711 0 8.81936 0 12.002C0 15.1846 1.26428 18.2368 3.51472 20.4872C5.76516 22.7377 8.8174 24.002 12 24.002ZM8.20312 8.20508C8.64375 7.76445 9.35625 7.76445 9.79219 8.20508L11.9953 10.4082L14.1984 8.20508C14.6391 7.76445 15.3516 7.76445 15.7875 8.20508C16.2234 8.6457 16.2281 9.3582 15.7875 9.79414L13.5844 11.9973L15.7875 14.2004C16.2281 14.641 16.2281 15.3535 15.7875 15.7895C15.3469 16.2254 14.6344 16.2301 14.1984 15.7895L11.9953 13.5863L9.79219 15.7895C9.35156 16.2301 8.63906 16.2301 8.20312 15.7895C7.76719 15.3488 7.7625 14.6363 8.20312 14.2004L10.4062 11.9973L8.20312 9.79414C7.7625 9.35352 7.7625 8.64102 8.20312 8.20508Z" fill="#0F3F4F"/>
+</g>
+<rect x="0.5" y="0.501953" width="23" height="23" rx="11.5" stroke="white"/>
+<defs>
+<clipPath id="clip0_1937_24043">
+<rect y="0.00195312" width="24" height="24" rx="12" fill="white"/>
+</clipPath>
+</defs>
+</svg>

assets/icons/travels-section/earth.svg

@@ -0,0 +1,10 @@
+<svg width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2651_21785)">
+<path d="M4.35625 12.0625L4.94375 13.0875C5.4625 13.9937 6.3125 14.6625 7.31875 14.95L10.9375 15.9812C12.0125 16.2875 12.75 17.2688 12.75 18.3875V20.8813C12.75 21.5688 13.1375 22.1938 13.75 22.5C14.3625 22.8062 14.75 23.4312 14.75 24.1187V26.5562C14.75 27.5312 15.6812 28.2375 16.6187 27.9688C17.625 27.6812 18.4062 26.875 18.6625 25.8563L18.8375 25.1562C19.1 24.1 19.7875 23.1938 20.7313 22.6562L21.2375 22.3687C22.175 21.8375 22.75 20.8375 22.75 19.7625V19.2437C22.75 18.45 22.4312 17.6875 21.8687 17.125L21.625 16.8813C21.0625 16.3188 20.3 16 19.5063 16H16.8125C16.1187 16 15.4312 15.8188 14.825 15.475L12.6687 14.2437C12.4 14.0875 12.1938 13.8375 12.0938 13.5437C11.8938 12.9437 12.1625 12.2937 12.7312 12.0125L13.1 11.825C13.5125 11.6187 13.9937 11.5813 14.4312 11.7312L15.8813 12.2125C16.3938 12.3812 16.9562 12.1875 17.25 11.7437C17.5438 11.3062 17.5125 10.725 17.175 10.3188L16.325 9.3C15.7 8.55 15.7063 7.45625 16.3438 6.71875L17.325 5.575C17.875 4.93125 17.9625 4.0125 17.5438 3.28125L17.3937 3.01875C17.175 3.00625 16.9625 3 16.7437 3C10.9437 3 6.025 6.80625 4.35625 12.0625ZM29.75 16C29.75 13.7 29.15 11.5375 28.1 9.65625L26.5 10.3C25.5187 10.6938 25.0125 11.7875 25.3438 12.7875L26.4 15.9563C26.6187 16.6063 27.15 17.1 27.8125 17.2625L29.6313 17.7188C29.7063 17.1562 29.7437 16.5812 29.7437 16H29.75ZM0.75 16C0.75 11.7565 2.43571 7.68687 5.43629 4.68629C8.43687 1.68571 12.5065 0 16.75 0C20.9935 0 25.0631 1.68571 28.0637 4.68629C31.0643 7.68687 32.75 11.7565 32.75 16C32.75 20.2435 31.0643 24.3131 28.0637 27.3137C25.0631 30.3143 20.9935 32 16.75 32C12.5065 32 8.43687 30.3143 5.43629 27.3137C2.43571 24.3131 0.75 20.2435 0.75 16Z" fill="#ED9334"/>
+</g>
+<defs>
+<clipPath id="clip0_2651_21785">
+<rect width="32" height="32" fill="white" transform="translate(0.75)"/>
+</clipPath>
+</defs>
+</svg>

assets/icons/travels-section/flags.svg

@@ -0,0 +1,11 @@
+<svg width="30" height="32" viewBox="0 0 30 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2651_21759)">
+<path d="M6.80395 0C5.84719 0 5.07422 0.772975 5.07422 1.72973V3.45946V4.15066C5.20769 4.39611 5.29044 4.67341 5.29044 4.97298V5.83785L9.02017 4.90267C11.0796 4.38915 13.258 4.62699 15.1553 5.57834C17.658 6.8324 20.6039 6.8324 23.1067 5.57834L23.6256 5.31884C24.7391 4.76208 26.0472 5.57296 26.0472 6.8162V19.3655C26.1283 19.3374 26.2099 19.3114 26.2905 19.2811L28.1661 18.5784C28.8418 18.3243 29.2905 17.6811 29.2905 16.9567V3.57296C29.2905 2.32971 27.9823 1.51884 26.8688 2.07559L26.3499 2.3351C23.8472 3.58915 20.9013 3.58915 18.3986 2.3351C16.5013 1.38374 14.3229 1.14591 12.2634 1.65942L8.53368 2.5946V1.72973C8.53368 0.772975 7.76071 0 6.80395 0ZM8.53368 21.4581L5.29044 22.2703V26.7684C5.58328 27.3067 6.14685 27.6757 6.80395 27.6757C7.76071 27.6757 8.53368 26.9027 8.53368 25.946V21.4581Z" fill="#ED9334"/>
+<path d="M4.20946 6.05395C4.20946 5.09719 3.43649 4.32422 2.47973 4.32422C1.52297 4.32422 0.75 5.09719 0.75 6.05395V7.78368V24.2161V30.2702C0.75 31.227 1.52297 31.9999 2.47973 31.9999C3.43649 31.9999 4.20946 31.227 4.20946 30.2702V23.3513L7.68515 22.481C9.90677 21.9242 12.2581 22.1837 14.3068 23.2053C16.696 24.3999 19.4689 24.5459 21.9662 23.6053L23.8419 22.9026C24.5176 22.6486 24.9662 22.0053 24.9662 21.281V7.8972C24.9662 6.65395 23.6581 5.84314 22.5446 6.3999L22.0257 6.65936C19.523 7.91341 16.577 7.91341 14.0743 6.65936C12.177 5.708 9.99866 5.47017 7.9392 5.98368L4.20946 6.91882V6.05395Z" fill="#ED9334"/>
+</g>
+<defs>
+<clipPath id="clip0_2651_21759">
+<rect width="28.5406" height="32" fill="white" transform="translate(0.75)"/>
+</clipPath>
+</defs>
+</svg>

assets/icons/travels-section/images.svg

@@ -0,0 +1,11 @@
+<svg width="37" height="32" viewBox="0 0 37 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2651_21800)">
+<path d="M33.75 24.5C33.75 25.3312 34.4187 26 35.25 26C36.0812 26 36.75 25.3312 36.75 24.5V10.5C36.75 5.80625 32.9437 2 28.25 2H8.25C7.41875 2 6.75 2.66875 6.75 3.5C6.75 4.33125 7.41875 5 8.25 5H28.25C31.2875 5 33.75 7.4625 33.75 10.5V24.5Z" fill="#ED9334"/>
+<path d="M4.75 8C2.54375 8 0.75 9.79375 0.75 12V26C0.75 28.2062 2.54375 30 4.75 30H26.75C28.9562 30 30.75 28.2062 30.75 26V12C30.75 9.79375 28.9562 8 26.75 8H4.75ZM19.5 14.6688L25.5 23.6688C25.8062 24.1313 25.8375 24.7188 25.575 25.2062C25.3125 25.6937 24.8062 26 24.25 26H15.25H12.25H7.25C6.675 26 6.15 25.6687 5.9 25.15C5.65 24.6313 5.71875 24.0125 6.08125 23.5625L10.0813 18.5625C10.3688 18.2063 10.7938 18 11.25 18C11.7063 18 12.1375 18.2063 12.4188 18.5625L13.5 19.9125L17 14.6625C17.2812 14.25 17.75 14 18.25 14C18.75 14 19.2188 14.25 19.5 14.6688ZM6.75 14C6.75 12.8954 7.64543 12 8.75 12C9.85457 12 10.75 12.8954 10.75 14C10.75 15.1046 9.85457 16 8.75 16C7.64543 16 6.75 15.1046 6.75 14Z" fill="#ED9334"/>
+</g>
+<defs>
+<clipPath id="clip0_2651_21800">
+<rect width="36" height="32" fill="white" transform="translate(0.75)"/>
+</clipPath>
+</defs>
+</svg>

assets/icons/travels-section/series.svg

@@ -0,0 +1,12 @@
+<svg width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2651_21776)">
+<path d="M24.4673 21.6846C23.8809 22.4799 23.3483 23.1757 22.8733 23.7799C23.0703 24.2118 23.4677 24.5452 23.9688 24.6377C25.8562 24.9814 27.325 25.4377 28.2812 25.9189C28.4813 26.0189 28.6438 26.1127 28.775 26.2002C29 26.3502 29 26.6503 28.775 26.8003C28.225 27.1565 27.3313 27.5377 26.0875 27.8815C23.6438 28.5627 20.1562 29.0002 16.25 29.0002C12.3438 29.0002 8.85629 28.5627 6.3938 27.8815C5.15005 27.5377 4.2563 27.1565 3.7063 26.8003C3.4813 26.6503 3.4813 26.3502 3.7063 26.2002C3.83755 26.1127 4.0062 26.0189 4.19995 25.9189C5.1562 25.4377 6.62496 24.9877 8.51245 24.6377H8.5188C8.74266 24.5964 8.94302 24.5038 9.11719 24.3792C8.54201 23.6325 7.90046 22.7744 7.23206 21.8334C5.51721 22.1887 4.00972 22.6583 2.8562 23.2378C2.19995 23.569 1.58752 23.969 1.11877 24.4628C0.650025 24.969 0.25 25.6565 0.25 26.5002C0.25 27.8377 1.21873 28.7565 2.06873 29.3127C2.98747 29.9127 4.2125 30.394 5.59375 30.7753C8.3875 31.544 12.15 32.0002 16.25 32.0002C20.35 32.0002 24.1125 31.544 26.9 30.7753C28.2813 30.394 29.5126 29.9127 30.425 29.3127C31.2813 28.7565 32.2438 27.8377 32.2438 26.5002C32.2438 25.6565 31.8438 24.969 31.3688 24.4628C30.9 23.969 30.2875 23.569 29.6312 23.2378C28.3187 22.5753 26.5375 22.0565 24.5062 21.6877C24.4931 21.6853 24.4804 21.6866 24.4673 21.6846Z" fill="#ED9334"/>
+<path d="M21.1572 24.375C23.6621 21.2402 29.375 13.6426 29.375 9.375C29.375 4.19922 25.1758 0 20 0C14.8242 0 10.625 4.19922 10.625 9.375C10.625 13.6426 16.3379 21.2402 18.8428 24.375C19.4434 25.1221 20.5566 25.1221 21.1572 24.375ZM20 6.25C20.4104 6.24988 20.8169 6.33063 21.1962 6.48762C21.5754 6.64462 21.92 6.87478 22.2103 7.16498C22.5006 7.45517 22.7308 7.79971 22.8879 8.17891C23.045 8.55811 23.1259 8.96454 23.1259 9.375C23.1259 9.78546 23.045 10.1919 22.8879 10.5711C22.7308 10.9503 22.5006 11.2948 22.2103 11.585C21.92 11.8752 21.5754 12.1054 21.1962 12.2624C20.8169 12.4194 20.4104 12.5001 20 12.5C19.5895 12.5001 19.1831 12.4194 18.8038 12.2624C18.4246 12.1054 18.08 11.8752 17.7897 11.585C17.4994 11.2948 17.2692 10.9503 17.1121 10.5711C16.955 10.1919 16.8741 9.78546 16.8741 9.375C16.8741 8.96454 16.955 8.55811 17.1121 8.17891C17.2692 7.79971 17.4994 7.45517 17.7897 7.16498C18.08 6.87478 18.4246 6.64462 18.8038 6.48762C19.1831 6.33063 19.5895 6.24988 20 6.25Z" fill="#ED9334"/>
+<path d="M12.5 1.25C7.32422 1.25 3.125 5.44922 3.125 10.625C3.125 14.8926 8.83789 22.4902 11.3428 25.625C11.9434 26.3721 13.0566 26.3721 13.6572 25.625C14.3048 24.8145 15.168 23.7026 16.0903 22.4302C14.0543 19.7326 11.3943 15.8857 10.1165 12.6082C9.55547 11.9279 9.30799 11.0422 9.43506 10.1697C9.39663 9.89438 9.375 9.62844 9.375 9.375C9.375 5.97578 11.1864 2.99788 13.896 1.354C13.4405 1.28593 12.9744 1.25 12.5 1.25Z" fill="#ED9334"/>
+</g>
+<defs>
+<clipPath id="clip0_2651_21776">
+<rect width="32" height="32" fill="white" transform="translate(0.25)"/>
+</clipPath>
+</defs>
+</svg>

assets/icons/travels-section/trip.svg

@@ -0,0 +1,12 @@
+<svg width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2651_21790)">
+<path d="M6.04267 13.4061C7.42034 11.682 10.5624 7.50335 10.5624 5.1562C10.5624 2.30955 8.25285 0 5.4062 0C2.55955 0 0.25 2.30955 0.25 5.1562C0.25 7.50335 3.39206 11.682 4.76973 13.4061C5.10005 13.817 5.71235 13.817 6.04267 13.4061ZM5.4062 3.43747C5.63198 3.43735 5.85557 3.48173 6.06419 3.56805C6.27282 3.65438 6.46239 3.78096 6.62208 3.94057C6.78177 4.10018 6.90845 4.28969 6.99488 4.49827C7.08131 4.70685 7.12579 4.93042 7.12579 5.1562C7.12579 5.38198 7.08131 5.60555 6.99488 5.81413C6.90845 6.02271 6.78177 6.21222 6.62208 6.37183C6.46239 6.53144 6.27282 6.65803 6.06419 6.74435C5.85557 6.83067 5.63198 6.87505 5.4062 6.87493C5.18042 6.87505 4.95683 6.83067 4.74821 6.74435C4.53958 6.65803 4.35001 6.53144 4.19032 6.37183C4.03063 6.21222 3.90395 6.02271 3.81752 5.81413C3.73109 5.60555 3.68661 5.38198 3.68661 5.1562C3.68661 4.93042 3.73109 4.70685 3.81752 4.49827C3.90395 4.28969 4.03063 4.10018 4.19032 3.94057C4.35001 3.78096 4.53958 3.65438 4.74821 3.56805C4.95683 3.48173 5.18042 3.43735 5.4062 3.43747Z" fill="#ED9334"/>
+<path d="M6.23145 31.9211C3.54057 31.4694 1.31694 29.4718 0.494111 26.7667C0.309137 26.1587 0.289431 25.9795 0.283881 24.8548C0.278616 23.7843 0.3013 23.5277 0.44918 22.9868C1.08142 20.6744 2.8329 18.7671 5.02215 18.0071C6.18768 17.6025 5.97638 17.6143 12.9132 17.5664L19.3814 17.5217L19.7044 17.3492C20.2023 17.0834 20.5974 16.6851 20.827 16.2176C21.109 15.6434 21.1216 14.7882 20.8568 14.1963C20.6488 13.7313 20.0863 13.1785 19.5858 12.9473C19.2335 12.7845 19.194 12.7832 13.9837 12.7622L8.73647 12.7409L9.14241 12.2357C9.6121 11.6511 10.4022 10.4626 10.6658 9.94417L10.8475 9.58691H15.1212C19.1593 9.58691 19.4278 9.59527 19.9899 9.73853C21.6197 10.1539 22.8651 11.1357 23.6341 12.6114C24.066 13.4402 24.2477 14.1897 24.2502 15.1525C24.2528 16.1537 24.1039 16.7902 23.6518 17.7097C23.356 18.3114 23.193 18.5316 22.6195 19.1041C21.884 19.8386 21.2324 20.2368 20.2087 20.5776L19.6823 20.7528L13.1389 20.7919C6.6239 20.8308 6.59359 20.8317 6.15683 20.9967C4.90841 21.4683 4.06853 22.3136 3.63897 23.5309C3.39672 24.2174 3.37078 25.2761 3.58075 25.9078C3.80697 26.5883 4.14128 27.1501 4.58809 27.6005C5.0661 28.0823 5.45454 28.3296 6.17284 28.6094L6.67071 28.8034L13.7597 28.8247L20.8487 28.8461L21.1209 29.3865C21.4586 30.0572 21.8856 30.7447 22.4054 31.4546L22.8046 31.9999L14.7 31.991C10.2425 31.9862 6.43168 31.9547 6.23145 31.9211Z" fill="#ED9334"/>
+<path d="M27.7302 31.6923C29.1078 29.9682 32.2499 25.7895 32.2499 23.4423C32.2499 20.5957 29.9404 18.2861 27.0937 18.2861C24.247 18.2861 21.9375 20.5957 21.9375 23.4423C21.9375 25.7895 25.0796 29.9682 26.4572 31.6923C26.7876 32.1031 27.3998 32.1031 27.7302 31.6923ZM27.0937 21.7236C27.3194 21.7235 27.543 21.7679 27.7516 21.8543C27.9602 21.9406 28.1497 22.0672 28.3093 22.2268C28.469 22.3864 28.5956 22.5759 28.682 22.7845C28.7685 22.993 28.8129 23.2166 28.8129 23.4423C28.8129 23.6681 28.7685 23.8916 28.682 24.1002C28.5956 24.3087 28.469 24.4982 28.3093 24.6578C28.1497 24.8174 27.9602 24.944 27.7516 25.0304C27.543 25.1167 27.3194 25.1611 27.0937 25.1611C26.8679 25.1611 26.6444 25.1167 26.4358 25.0304C26.2272 24.944 26.0377 24.8174 25.878 24.6578C25.7184 24.4982 25.5918 24.3087 25.5053 24.1002C25.4189 23.8916 25.3745 23.6681 25.3745 23.4423C25.3745 23.2166 25.4189 22.993 25.5053 22.7845C25.5918 22.5759 25.7184 22.3864 25.878 22.2268C26.0377 22.0672 26.2272 21.9406 26.4358 21.8543C26.6444 21.7679 26.8679 21.7235 27.0937 21.7236Z" fill="#ED9334"/>
+</g>
+<defs>
+<clipPath id="clip0_2651_21790">
+<rect width="32" height="32" fill="white" transform="translate(0.25)"/>
+</clipPath>
+</defs>
+</svg>

assets/icons/trophy.svg

@@ -0,0 +1,10 @@
+<svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_697_3925)">
+<path d="M11.1111 0H4.88889C4.15278 0 3.55278 0.605556 3.58056 1.33889C3.58611 1.48611 3.59167 1.63333 3.6 1.77778H0.666667C0.297222 1.77778 0 2.075 0 2.44444C0 5.01667 0.930556 6.80556 2.18056 8.01944C3.41111 9.21667 4.91111 9.81944 6.01667 10.125C6.66667 10.3056 7.11111 10.8472 7.11111 11.3917C7.11111 11.9722 6.63889 12.4444 6.05833 12.4444H5.33333C4.84167 12.4444 4.44444 12.8417 4.44444 13.3333C4.44444 13.825 4.84167 14.2222 5.33333 14.2222H10.6667C11.1583 14.2222 11.5556 13.825 11.5556 13.3333C11.5556 12.8417 11.1583 12.4444 10.6667 12.4444H9.94167C9.36111 12.4444 8.88889 11.9722 8.88889 11.3917C8.88889 10.8472 9.33056 10.3028 9.98333 10.125C11.0917 9.81944 12.5917 9.21667 13.8222 8.01944C15.0694 6.80556 16 5.01667 16 2.44444C16 2.075 15.7028 1.77778 15.3333 1.77778H12.4C12.4083 1.63333 12.4139 1.48889 12.4194 1.33889C12.4472 0.605556 11.8472 0 11.1111 0ZM1.35833 3.11111H3.70278C3.95556 5.61389 4.51389 7.28611 5.14444 8.40556C4.45278 8.1 3.73333 7.66944 3.11111 7.06389C2.22222 6.2 1.5 4.95278 1.36111 3.11111H1.35833ZM12.8917 7.06389C12.2694 7.66944 11.55 8.1 10.8583 8.40556C11.4889 7.28611 12.0472 5.61389 12.3 3.11111H14.6444C14.5028 4.95278 13.7806 6.2 12.8944 7.06389H12.8917Z" />
+</g>
+<defs>
+<clipPath id="clip0_697_3925">
+<rect width="16" height="14.2222" fill="white"/>
+</clipPath>
+</defs>
+</svg>

assets/icons/user-group.svg

@@ -0,0 +1,10 @@
+<svg width="16" height="13" viewBox="0 0 16 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_706_3956)">
+<path d="M2.4 3.2C2.4 2.35131 2.73714 1.53737 3.33726 0.937258C3.93737 0.337142 4.75131 0 5.6 0C6.44869 0 7.26263 0.337142 7.86274 0.937258C8.46286 1.53737 8.8 2.35131 8.8 3.2C8.8 4.04869 8.46286 4.86263 7.86274 5.46274C7.26263 6.06286 6.44869 6.4 5.6 6.4C4.75131 6.4 3.93737 6.06286 3.33726 5.46274C2.73714 4.86263 2.4 4.04869 2.4 3.2ZM0 12.0575C0 9.595 1.995 7.6 4.4575 7.6H6.7425C9.205 7.6 11.2 9.595 11.2 12.0575C11.2 12.4675 10.8675 12.8 10.4575 12.8H0.7425C0.3325 12.8 0 12.4675 0 12.0575ZM15.2325 12.8H11.785C11.92 12.565 12 12.2925 12 12V11.8C12 10.2825 11.3225 8.92 10.255 8.005C10.315 8.0025 10.3725 8 10.4325 8H11.9675C14.195 8 16 9.805 16 12.0325C16 12.4575 15.655 12.8 15.2325 12.8ZM10.8 6.4C10.025 6.4 9.325 6.085 8.8175 5.5775C9.31 4.9125 9.6 4.09 9.6 3.2C9.6 2.53 9.435 1.8975 9.1425 1.3425C9.6075 1.0025 10.18 0.8 10.8 0.8C12.3475 0.8 13.6 2.0525 13.6 3.6C13.6 5.1475 12.3475 6.4 10.8 6.4Z" />
+</g>
+<defs>
+<clipPath id="clip0_706_3956">
+<rect width="16" height="12.8" fill="white"/>
+</clipPath>
+</defs>
+</svg>

babel.config.js

@@ -2,5 +2,8 @@ module.exports = function(api) {
   api.cache(true);
   return {
     presets: ['babel-preset-expo'],
+    plugins: [
+      'react-native-reanimated/plugin',
+    ],
   };
 };

credentials.json

@@ -0,0 +1,10 @@
+{
+  "android": {
+    "keystore": {
+      "keystorePath": "deployment/upload-keystore.jks",
+      "keystorePassword": "NomadMania",
+      "keyAlias": "upload",
+      "keyPassword": "NomadMania"
+    }
+  }
+}

deployment/passwords.txt

@@ -0,0 +1,8 @@
+keystore pass:
+NomadMania
+
+key alias:
+upload
+
+key pass:
+NomadMania

deployment/upload_certificate.pem

@@ -0,0 +1,19 @@
+-----BEGIN CERTIFICATE-----
+MIIDJjCCAg4CAQEwDQYJKoZIhvcNAQELBQAwWTETMBEGA1UEAwwKTm9tYWRNYW5p
+YTELMAkGA1UECwwCSVQxFjAUBgNVBAoMDU5vbWFkTWFuaWEgT1UxEDAOBgNVBAcM
+B1RhbGxpbm4xCzAJBgNVBAYTAkVFMB4XDTI0MDYwMzA2MDIyM1oXDTQ5MDUyODA2
+MDIyM1owWTETMBEGA1UEAwwKTm9tYWRNYW5pYTELMAkGA1UECwwCSVQxFjAUBgNV
+BAoMDU5vbWFkTWFuaWEgT1UxEDAOBgNVBAcMB1RhbGxpbm4xCzAJBgNVBAYTAkVF
+MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAotfRWD+Ob7Dh37mOpnUy
+ecr/WctRJfYDPtvYfMt2nzLA3uNi5gjsHATvcyBV+ama6/VgNXhe50RViSBv0AAo
+GKWiyASyn6o31zddktwsFB6L0qpGTe4WhwOFMsRXVVG+YQ88Gmt8TWmc/Czqf21m
+7NS7ndlDGCoAEZ3UqeAzvdFGYvZ3z70jMwP/U16ir2k171n1Jub6zxAmk8yJSkXm
+EgAQ8TmNmoXpZiF1ougJLwmXcYk2R8ugQTMYg5K3qGLPdE4MgNzsGM0Bk2jP0KSm
+qWxswkGOrruqxcbjvNnpRxJtgGudL0L76B1m0Hw04gzG5tqBBu9tci5LZ/TTlgiN
+CQIDAQABMA0GCSqGSIb3DQEBCwUAA4IBAQBN0s+4GTYJ6TP9RsRfnMXbuhPQrVA6
+sKEgb9V/ExGYIBFUJki3XweJfXpJfqsuj1OlSIlcVhH/CIL1WUNCmBN9hqFm0HKe
+W87alpgnu4fvSdyC4esddn2nswgs+PhHLIGYhHRPFJgcvFuTEFYxYNYurfxXNCvp
+iNMV2k3IO1A4J8apSRgYEw1vKRlSwYcB1lrJ8iMEmJ+iOMyQNNm8IigndIlVyPAK
+P9//qOu6/3GO2n4y2DLsjG02AcolAJypm2WeYd8p1h7r40p2bpaP8Q2Jnuj2rq5X
+Vt9e9Cc4CraGjZpvyGWyQOmC+qCRbOeHlGpEgnbqnHdvNbh2Vgn6bUGw
+-----END CERTIFICATE-----

eas.json

@@ -3,6 +3,26 @@
     "version": ">= 5.6.0"
   },
   "build": {
+    "preview": {
+      "channel": "development",
+      "android": {
+        "buildType": "apk"
+      },
+      "env": {
+        "ENV": "development"
+      }
+    },
+    "preview2": {
+      "android": {
+        "gradleCommand": ":app:assembleRelease"
+      }
+    },
+    "preview3": {
+      "developmentClient": true
+    },
+    "preview4": {
+      "distribution": "internal"
+    },
     "development": {
       "developmentClient": true,
       "distribution": "internal",
@@ -13,13 +33,21 @@
     },
     "production": {
       "channel": "production",
-      "autoIncrement": true,
       "android": {
         "buildType": "app-bundle"
       },
       "env": {
         "ENV": "production"
       }
+    },
+    "production-apk": {
+      "channel": "production",
+      "android": {
+        "buildType": "apk"
+      },
+      "env": {
+        "ENV": "production"
+      }
     }
   },
   "submit": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nomadmania-app",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "main": "node_modules/expo/AppEntry.js",
   "scripts": {
     "start": "expo start --dev-client",
@@ -8,56 +8,68 @@
     "ios": "expo start --ios",
     "build:dev": "eas build --profile development",
     "build:prod": "ENV=production eas build --platform all --profile production",
-    "publish:prod": "ENV=production eas update --branch production"
+    "publish:prod": "ENV=production eas update --branch production",
+    "postinstall": "patch-package"
   },
   "dependencies": {
     "@react-native-community/datetimepicker": "7.2.0",
     "@react-native-community/masked-view": "^0.1.11",
     "@react-native-community/netinfo": "9.3.10",
     "@react-navigation/bottom-tabs": "^6.5.11",
+    "@react-navigation/drawer": "^6.6.15",
     "@react-navigation/material-top-tabs": "^6.6.5",
     "@react-navigation/native": "^6.1.9",
     "@react-navigation/native-stack": "^6.9.17",
     "@react-navigation/stack": "^6.3.20",
-    "@tanstack/react-query": "^5.8.3",
+    "@shopify/flash-list": "1.4.3",
+    "@tanstack/react-query": "latest",
     "@turf/turf": "^6.5.0",
     "axios": "^1.6.1",
     "dotenv": "^16.3.1",
     "expo": "~49.0.15",
+    "expo-asset": "8.10.1",
     "expo-checkbox": "~2.4.0",
+    "expo-constants": "14.4.2",
     "expo-dev-client": "~2.4.12",
+    "expo-file-system": "15.4.5",
+    "expo-font": "11.4.0",
     "expo-image": "~1.3.5",
     "expo-image-picker": "~14.3.2",
     "expo-location": "~16.1.0",
+    "expo-notifications": "~0.20.1",
     "expo-splash-screen": "~0.20.5",
     "expo-sqlite": "~11.3.3",
-    "expo-status-bar": "~1.6.0",
     "expo-updates": "~0.18.19",
     "formik": "^2.4.5",
     "moment": "^2.29.4",
     "patch-package": "^8.0.0",
-    "postinstall-postinstall": "^2.1.0",
     "react": "18.2.0",
-    "react-native": "0.72.6",
-    "react-native-calendar-picker": "^7.1.4",
+    "react-native": "0.72.10",
+    "react-native-calendars": "^1.1304.1",
+    "react-native-device-detection": "^0.2.1",
     "react-native-gesture-handler": "~2.12.0",
+    "react-native-image-viewing": "^0.2.2",
     "react-native-keyboard-aware-scroll-view": "^0.9.5",
+    "react-native-map-clustering": "^3.4.2",
     "react-native-maps": "1.7.1",
     "react-native-mmkv": "^2.11.0",
+    "react-native-modal": "^13.0.1",
     "react-native-pager-view": "6.2.0",
+    "react-native-progress": "^5.0.1",
     "react-native-reanimated": "~3.3.0",
-    "react-native-render-html": "^6.3.4",
     "react-native-safe-area-context": "4.6.3",
     "react-native-screens": "~3.22.0",
+    "react-native-searchable-dropdown-kj": "^1.9.1",
     "react-native-svg": "13.9.0",
     "react-native-tab-view": "^3.5.2",
+    "react-native-walkthrough-tooltip": "^1.6.0",
     "yup": "^1.3.3",
-    "zustand": "^4.4.7"
+    "zustand": "^4.4.7",
+    "expo-build-properties": "~0.8.3"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
     "@types/react": "~18.2.14",
-    "@types/react-native-calendar-picker": "^7.0.6",
     "prettier": "^3.1.0",
     "react-native-svg-transformer": "^1.1.0",
     "typescript": "^5.1.3"

patches/react-native-calendar-picker+7.1.4.patch

@@ -1,57 +0,0 @@
-diff --git a/node_modules/react-native-calendar-picker/CalendarPicker/Day.js b/node_modules/react-native-calendar-picker/CalendarPicker/Day.js
-index f79b618..e163c31 100644
---- a/node_modules/react-native-calendar-picker/CalendarPicker/Day.js
-+++ b/node_modules/react-native-calendar-picker/CalendarPicker/Day.js
-@@ -197,15 +197,43 @@ export default function Day(props) {
-       );
-     } else {
-       return (
--        <View style={[styles.dayWrapper, custom.containerStyle]}>
--          <TouchableOpacity
--            disabled={!enableDateChange}
--            style={[custom.style, computedSelectedDayStyle, selectedDayStyle ]}
--            onPress={() => onPressDay({year, month, day}) }>
--            <Text style={[styles.dayLabel, textStyle, custom.textStyle, selectedDayTextStyle]}>
--              { day }
--            </Text>
--          </TouchableOpacity>
-+        <View style={[styles.dayWrapper, custom.containerStyle, {position: 'relative'}]}>
-+          {!(selectedStartDate && !selectedEndDate && isThisDaySameAsSelectedStart) && (
-+            <TouchableOpacity
-+              disabled={!enableDateChange}
-+              style={[custom.style, computedSelectedDayStyle, selectedDayStyle]}
-+              onPress={() => onPressDay({year, month, day}) }>
-+              <Text style={[
-+                styles.dayLabel,
-+                textStyle,
-+                custom.textStyle,
-+                selectedDayTextStyle,
-+                { color: '#0F3F4F' },
-+                (thisDay.isSame(today, 'day') && (isThisDaySameAsSelectedStart || isThisDaySameAsSelectedEnd)) && { borderWidth: 0 }
-+              ]}>
-+                { day }
-+              </Text>
-+            </TouchableOpacity>
-+          )}
-+
-+          {(thisDay.isSame(selectedStartDate, 'day') || thisDay.isSame(selectedEndDate, 'day')) && (
-+            <TouchableOpacity
-+              disabled={!enableDateChange}
-+              style={[{position: 'absolute'}]}
-+              onPress={() => onPressDay({year, month, day}) }>
-+              <Text style={[styles.dayLabel, textStyle, custom.textStyle, selectedDayTextStyle, {
-+                backgroundColor: '#0F3F4F',
-+                borderRadius: 17,
-+                height: 34,
-+                width: 34,
-+                textAlign: 'center',
-+                verticalAlign: 'middle',
-+                overflow: 'hidden',
-+              }]}>
-+                { day }
-+              </Text>
-+            </TouchableOpacity>
-+          )}
-         </View>
-       );
-     }

patches/react-native-calendars+1.1304.1.patch

@@ -0,0 +1,93 @@
+diff --git a/node_modules/react-native-calendars/src/calendar/day/period/index.js b/node_modules/react-native-calendars/src/calendar/day/period/index.js
+index f27db0e..434f414 100644
+--- a/node_modules/react-native-calendars/src/calendar/day/period/index.js
++++ b/node_modules/react-native-calendars/src/calendar/day/period/index.js
+@@ -87,21 +87,19 @@ const PeriodDay = (props) => {
+         return textStyle;
+     }, [marking, state]);
+     const fillerStyles = useMemo(() => {
+-        const leftFillerStyle = { backgroundColor: undefined };
+-        const rightFillerStyle = { backgroundColor: undefined };
++        const leftFillerStyle = { backgroundColor: marking?.disabled ? 'transparent' : 'rgb(250, 223, 194)' };
++        const rightFillerStyle = { backgroundColor: marking?.disabled ? 'transparent' : 'rgb(250, 223, 194)' };
+         let fillerStyle = {};
+         const start = markingStyle.startingDay;
+         const end = markingStyle.endingDay;
+-        if (start && !end) {
+-            rightFillerStyle.backgroundColor = markingStyle.startingDay?.backgroundColor;
++        if (start) {
++          leftFillerStyle.backgroundColor = markingStyle.day?.backgroundColor;
+         }
+-        else if (end && !start) {
+-            leftFillerStyle.backgroundColor = markingStyle.endingDay?.backgroundColor;
++        if (end) {
++          rightFillerStyle.backgroundColor = markingStyle.day?.backgroundColor;
+         }
+-        else if (markingStyle.day) {
+-            leftFillerStyle.backgroundColor = markingStyle.day?.backgroundColor;
+-            rightFillerStyle.backgroundColor = markingStyle.day?.backgroundColor;
+-            fillerStyle = { backgroundColor: markingStyle.day?.backgroundColor };
++        if (!start && !end && markingStyle.day) {
++          fillerStyle = { backgroundColor: markingStyle.day?.backgroundColor };
+         }
+         return { leftFillerStyle, rightFillerStyle, fillerStyle };
+     }, [marking]);
+diff --git a/node_modules/react-native-calendars/src/calendar/day/period/style.js b/node_modules/react-native-calendars/src/calendar/day/period/style.js
+index 51e2082..d82f5eb 100644
+--- a/node_modules/react-native-calendars/src/calendar/day/period/style.js
++++ b/node_modules/react-native-calendars/src/calendar/day/period/style.js
+@@ -10,7 +10,7 @@ export default function styleConstructor(theme = {}) {
+             marginLeft: -1
+         },
+         base: {
+-            width: 38,
++            width: FILLER_HEIGHT,
+             height: FILLER_HEIGHT,
+             alignItems: 'center',
+             justifyContent: 'center'
+@@ -44,7 +44,10 @@ export default function styleConstructor(theme = {}) {
+             bottom: 3
+         },
+         today: {
+-            backgroundColor: appStyle.todayBackgroundColor
++            backgroundColor: appStyle.todayBackgroundColor,
++            borderColor: '#ED9334',
++            borderWidth: 1,
++            borderRadius: 17
+         },
+         todayText: {
+             fontWeight: '500',
+diff --git a/node_modules/react-native-calendars/src/calendar/index.js b/node_modules/react-native-calendars/src/calendar/index.js
+index 6f46e8a..de8ce86 100644
+--- a/node_modules/react-native-calendars/src/calendar/index.js
++++ b/node_modules/react-native-calendars/src/calendar/index.js
+@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
+ import XDate from 'xdate';
+ import isEmpty from 'lodash/isEmpty';
+ import React, { useRef, useState, useEffect, useCallback, useMemo } from 'react';
+-import { View } from 'react-native';
++import { View, PanResponder } from 'react-native';
+ // @ts-expect-error
+ import GestureRecognizer, { swipeDirections } from 'react-native-swipe-gestures';
+ import constants from '../commons/constants';
+@@ -137,6 +137,11 @@ const Calendar = (props) => {
+         }
+         return false;
+     }, [currentMonth, displayLoadingIndicator, markedDates]);
++    const panResponder = useRef(
++      PanResponder.create({
++        onStartShouldSetPanResponder: () => true,
++      })
++    ).current;
+     const renderHeader = () => {
+         const headerProps = extractHeaderProps(props);
+         const ref = customHeader ? undefined : header;
+@@ -150,7 +155,7 @@ const Calendar = (props) => {
+     };
+     const gestureProps = enableSwipeMonths ? swipeProps : undefined;
+     return (<GestureComponent {...gestureProps}>
+-      <View style={[style.current.container, propsStyle]} testID={testID} accessibilityElementsHidden={accessibilityElementsHidden} // iOS
++      <View {...panResponder.panHandlers} style={[style.current.container, propsStyle]} testID={testID} accessibilityElementsHidden={accessibilityElementsHidden} // iOS
+      importantForAccessibility={importantForAccessibility} // Android
+     >
+         {renderHeader()}

patches/react-native-tab-view+3.5.2.patch

@@ -0,0 +1,13 @@
+diff --git a/node_modules/react-native-tab-view/src/TabBar.tsx b/node_modules/react-native-tab-view/src/TabBar.tsx
+index e8d0b4c..cd5a424 100644
+--- a/node_modules/react-native-tab-view/src/TabBar.tsx
++++ b/node_modules/react-native-tab-view/src/TabBar.tsx
+@@ -405,6 +405,8 @@ export function TabBar<T extends Route>({
+                 // When we have measured widths for all of the tabs, we should updates the state
+                 // We avoid doing separate setState for each layout since it triggers multiple renders and slows down app
+                 setTabWidths({ ...measuredTabWidths.current });
++              } else {
++                setTabWidths({ ...measuredTabWidths?.current });
+               }
+             }
+           : undefined,

src/components/AvatarWithInitials/index.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { View, Text, Image } from 'react-native';
+
+import { styles } from './styles';
+import { Colors } from 'src/theme';
+
+export const AvatarWithInitials = ({
+  text,
+  flag,
+  size,
+  borderColor = Colors.FILL_LIGHT
+}: {
+  text: string;
+  flag: string;
+  size: number;
+  borderColor?: string;
+}) => {
+  const shadowProps = [
+    { textShadowOffset: { width: -0.5, height: -0.5 } },
+    { textShadowOffset: { width: 0, height: -0.5 } },
+    { textShadowOffset: { width: 0.5, height: -0.5 } },
+    { textShadowOffset: { width: -0.5, height: 0 } },
+    { textShadowOffset: { width: 0.5, height: 0 } },
+    { textShadowOffset: { width: -0.5, height: 0.5 } },
+    { textShadowOffset: { width: 0, height: 0.5 } },
+    { textShadowOffset: { width: 0.5, height: 0.5 } }
+  ].map((shadow) => ({
+    ...shadow,
+    textShadowRadius: 1,
+    textShadowColor: 'white'
+  }));
+
+  return (
+    <View style={[styles.container, { width: size, height: size, borderRadius: size / 2, borderColor }]}>
+      <Image style={styles.avatar} source={{ uri: flag }} />
+      <View style={styles.initialsContainer}>
+        {shadowProps.map((props, index) => (
+          <Text key={index} style={[styles.initials, props]}>
+            {text}
+          </Text>
+        ))}
+      </View>
+    </View>
+  );
+};

src/components/AvatarWithInitials/styles.tsx

@@ -0,0 +1,29 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from 'src/theme';
+
+export const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'hidden',
+    borderWidth: 2
+  },
+  avatar: {
+    width: '100%',
+    height: '100%'
+  },
+  initialsContainer: {
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  initials: {
+    position: 'absolute',
+    color: Colors.DARK_BLUE,
+    fontWeight: 'bold',
+    fontSize: 22,
+    textAlign: 'center'
+  }
+});

src/components/Button/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, ReactNode } from 'react';
+import React, { CSSProperties, FC, ReactNode } from 'react';
 import { Text, TouchableOpacity } from 'react-native';
 
 import { styles } from './styles';
@@ -8,15 +8,29 @@ type Props = {
   children?: ReactNode;
   variant?: ButtonVariants;
   onPress?: () => void;
+  containerStyles?: CSSProperties;
+  textStyles?: CSSProperties;
+  disabled?: boolean;
 };
 
-export const Button: FC<Props> = ({ children, variant, onPress }) => {
+export const Button: FC<Props> = ({ children, variant, onPress, containerStyles, textStyles, disabled }) => {
   return (
     <>
       {variant === ButtonVariants.OPACITY ? (
-        <OpacityButton onPress={onPress} children={children} />
+        <OpacityButton
+          onPress={onPress}
+          children={children}
+          containerStyles={containerStyles}
+          textStyles={textStyles}
+          disabled={disabled}
+        />
       ) : variant === ButtonVariants.FILL ? (
-        <FillButton onPress={onPress} children={children} />
+        <FillButton
+          onPress={onPress}
+          children={children}
+          containerStyles={containerStyles}
+          textStyles={textStyles}
+        />
       ) : variant == ButtonVariants.TEXT ? (
         <TextButton children={children} onPress={onPress} />
       ) : (
@@ -29,17 +43,35 @@ export const Button: FC<Props> = ({ children, variant, onPress }) => {
 type VariantProps = {
   children?: ReactNode;
   onPress?: () => void;
+  containerStyles?: CSSProperties | {};
+  textStyles?: CSSProperties | {};
+  disabled?: boolean;
 };
 
-const OpacityButton: FC<VariantProps> = ({ onPress, children }) => (
-  <TouchableOpacity style={[styles.button, styles.opacityButton]} onPress={onPress}>
-    <Text style={[styles.text, styles.opacityText]}>{children}</Text>
+const OpacityButton: FC<VariantProps> = ({
+  onPress,
+  children,
+  containerStyles = {},
+  textStyles = {},
+  disabled = false
+}) => (
+  <TouchableOpacity
+    style={[styles.button, styles.opacityButton, containerStyles]}
+    onPress={onPress}
+    disabled={disabled}
+  >
+    <Text style={[styles.text, styles.opacityText, textStyles]}>{children}</Text>
   </TouchableOpacity>
 );
 
-const FillButton: FC<VariantProps> = ({ onPress, children }) => (
-  <TouchableOpacity style={[styles.button, styles.fillButton]} onPress={onPress}>
-    <Text style={[styles.text, styles.fillText]}>{children}</Text>
+const FillButton: FC<VariantProps> = ({
+  onPress,
+  children,
+  containerStyles = {},
+  textStyles = {}
+}) => (
+  <TouchableOpacity style={[styles.button, styles.fillButton, containerStyles]} onPress={onPress}>
+    <Text style={[styles.text, styles.fillText, textStyles]}>{children}</Text>
   </TouchableOpacity>
 );
 

src/components/Calendar/SpinnerDatePicker.tsx

@@ -23,6 +23,8 @@ const SpinnerDatePicker: FC<Props> = ({ selectedDate }) => {
       mode={'date'}
       display={'spinner'}
       onChange={onChange}
+      minimumDate={new Date(1930, 0, 1)}
+      maximumDate={new Date()}
     />
   );
 };

src/components/Calendars/RangeCalendar/Navigation/index.tsx

@@ -4,11 +4,12 @@ import { View } from 'react-native';
 import { styles } from './style';
 import LeftArrow from '../../../../../assets/icons/left-arrow.svg';
 import RightArrow from '../../../../../assets/icons/right-arrow.svg';
+import { Colors } from 'src/theme';
 
 const Navigation = React.memo(({ direction }: { direction: 'prev' | 'next' }) => {
   return (
     <View style={[styles.navigationBtn, direction === 'prev' ? styles.prevComponent : styles.nextComponent]}>
-      {direction === 'prev' ? <LeftArrow /> : <RightArrow />}
+      {direction === 'prev' ? <LeftArrow fill={Colors.DARK_BLUE} /> : <RightArrow fill={Colors.DARK_BLUE} />}
     </View>
   );
 });

src/components/Calendars/RangeCalendar/index.tsx

@@ -1,59 +1,137 @@
-import React, { useMemo, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { View } from 'react-native';
-import CalendarPicker, { CustomDatesStylesFunc, CustomDayHeaderStylesFunc } from 'react-native-calendar-picker';
 import moment from 'moment';
 import { Modal } from '../../Modal';
-import Navigation from './Navigation';
 
 import { styles } from './style';
 import { Colors } from '../../../theme';
+import { Calendar } from 'react-native-calendars';
+import { Button } from 'src/components/Button';
+import { ButtonVariants } from 'src/types/components';
 
-export default function RangeCalendar(
-  { isModalVisible, closeModal }: { isModalVisible: boolean, closeModal: () => void }
-) {
-  const [selectedStartDate, setSelectedStartDate] = useState<Date | null>(null);
-  const [selectedEndDate, setSelectedEndDate] = useState<Date | null>(null);
+export default function RangeCalendar({
+  isModalVisible,
+  closeModal,
+  allowRangeSelection = true,
+  disableFutureDates = false,
+  highlightedDates,
+  selectedDate
+}: {
+  isModalVisible: boolean;
+  closeModal: (startDate?: string | null, endDate?: string | null) => void;
+  allowRangeSelection?: boolean;
+  disableFutureDates?: boolean;
+  highlightedDates?: string[];
+  selectedDate?: string;
+}) {
+  const [selectedStartDate, setSelectedStartDate] = useState<string | null>(null);
+  const [selectedEndDate, setSelectedEndDate] = useState<string | null>(null);
 
-  const handleOnDateChange = (date: Date, type: string) => {
-    if (type === 'END_DATE') {
-      setSelectedEndDate(date);
-    } else {
-      setSelectedStartDate(date);
-      setSelectedEndDate(null);
+  useEffect(() => {
+    if (selectedDate) {
+      setSelectedStartDate(selectedDate);
     }
+  }, [selectedDate]);
+
+  const customThemeStyles = {
+    textSectionTitleColor: Colors.ORANGE,
+    todayTextColor: Colors.DARK_BLUE,
+    dayTextColor: Colors.DARK_BLUE,
+    textDisabledColor: Colors.LIGHT_GRAY,
+    dotColor: Colors.DARK_BLUE,
+    arrowColor: Colors.DARK_BLUE,
+    monthTextColor: Colors.DARK_BLUE,
+    indicatorColor: Colors.DARK_BLUE,
+    textDayFontWeight: 'normal',
+    textMonthFontWeight: 'bold',
+    textDayHeaderFontWeight: 'bold',
+    textDayFontSize: 14,
+    textMonthFontSize: 14,
+    textDayHeaderFontSize: 12,
+    selectedDayBackgroundColor: Colors.ORANGE,
+    'stylesheet.calendar.header': {
+      header: styles.calendarHeader
+    },
   };
 
-  const customDayHeaderStyles: CustomDayHeaderStylesFunc = () => {
-    return {
-      textStyle: styles.dayHeader,
-    };
+  const onDayPress = (day: any) => {
+    if (!allowRangeSelection) {
+      setSelectedStartDate(day.dateString);
+      return;
+    } 
+    if (!selectedStartDate || (selectedStartDate && selectedEndDate)) {
+      setSelectedStartDate(day.dateString);
+      setSelectedEndDate(null);
+    } else if (!selectedEndDate) {
+      if (day.dateString < selectedStartDate) {
+        setSelectedEndDate(selectedStartDate);
+        setSelectedStartDate(day.dateString);
+      } else {
+        setSelectedEndDate(day.dateString);
+      }
+    }
   };
 
-  const customSelectedDatesStyles: CustomDatesStylesFunc = useMemo(() => {
-    return (date: moment.Moment) => {
-      if (date.isSame(moment(), 'day')) {
-        return {
-          containerStyle: {},
-          textStyle: {
-            borderWidth: 1,
-            borderColor: Colors.DARK_BLUE,
-            borderRadius: 17,
-            height: 34,
-            width: 34,
-            textAlign: 'center',
-            verticalAlign: 'middle',
-          },
-          style: {
-            backgroundColor: Colors.WHITE,
-          }
-        };
+  const markedDates = (() => {
+    const marked: { [key: string]: any } = {};
+    let start = selectedStartDate as unknown as string;
+    let end = selectedEndDate as unknown as string;
+    if (selectedDate && !selectedStartDate) {
+      marked[selectedDate] = {
+        selected: true,
+        startingDay: true,
+        endingDay: true,
+        color: Colors.ORANGE,
+        textColor: 'white',
+      };
+    }
+    if (disableFutureDates) {
+      const today = moment().add(1, 'day');
+      const lastDay = moment().add(2, 'years');
+      while (today.isBefore(lastDay, 'day')) {
+        const dateString = today.format('YYYY-MM-DD');
+        if (!marked[dateString]) {
+          marked[dateString] = {  disableTouchEvent: true, disabled: true };
+        }
+        today.add(1, 'day');
+      }
+    }
+    if (highlightedDates) {
+      const datesSet = new Set(highlightedDates);
+
+      const startDateMoment = moment(highlightedDates[0]);
+      const endDateMoment = moment(highlightedDates[highlightedDates.length - 1]);
+    
+      for (let m = moment(startDateMoment); m.diff(endDateMoment, 'days') <= 0; m.add(1, 'days')) {
+        const dateString = m.format('YYYY-MM-DD');
+        if (!datesSet.has(dateString)) {
+          marked[dateString] = { disableTouchEvent: true, disabled: true };
+        }
       }
-      return {
-        containerStyle: {},
-        textStyle: {},
+
+    }
+    if (start && end) {
+      marked[start] = { startingDay: true, color: Colors.ORANGE, textColor: 'white' };
+      let day = start;
+      while (day < end) {
+        day = moment(day).add(1, 'days').format('YYYY-MM-DD');
+        if (day === end) {
+          marked[day] = { endingDay: true, color: Colors.ORANGE, textColor: 'white' };
+        } else {
+          marked[day] = { color: 'transparent', textColor: Colors.DARK_BLUE };
+        }
+      }
+    } else if (start) {
+      marked[start] = {
+        selected: true,
+        startingDay: true,
+        endingDay: true,
+        color: Colors.ORANGE,
+        textColor: 'white',
       };
-    };
-  }, []);
+    }
+    return marked;
+  })();
 
   const resetSelections = () => {
     closeModal();
@@ -61,43 +139,43 @@ export default function RangeCalendar(
     setSelectedEndDate(null);
   };
 
-  const prevNavigationComponent = useMemo(() => <Navigation direction="prev" />, []);
-  const nextNavigationComponent = useMemo(() => <Navigation direction="next" />, []);
+  const handleClose = () => {
+    closeModal(selectedStartDate, selectedEndDate);
+    setSelectedStartDate(null);
+    setSelectedEndDate(null);
+  };
 
   return (
     <Modal
-      visibleInPercent={'70%'}
+      visibleInPercent={'auto'}
       visible={isModalVisible}
       onRequestClose={resetSelections}
-      headerTitle='Select Date'
+      headerTitle={allowRangeSelection ? "Select Dates" : "Select Date" }
     >
       <View style={styles.modalContent}>
-        <CalendarPicker
-          scaleFactor={400}
-          allowRangeSelection
-          allowBackwardRangeSelect
-          onDateChange={handleOnDateChange as any}
-          selectedStartDate={selectedStartDate as Date}
-          selectedEndDate={selectedEndDate as Date}
-          scrollable
-          showDayStragglers
-          previousComponent={prevNavigationComponent}
-          nextComponent={nextNavigationComponent}
-          dayLabelsWrapper={styles.labelsWrapper}
-          selectedRangeStyle={styles.rangeStyle}
-          selectedRangeEndTextStyle={styles.rangeStartEndTextStyle}
-          selectedRangeStartTextStyle={styles.rangeStartEndTextStyle}
-          selectedRangeEndStyle={[styles.rangeStartEndStyle, styles.rangeEndStyle]}
-          selectedRangeStartStyle={[styles.rangeStartEndStyle, styles.rangeStartStyle]}
-          customDayHeaderStyles={customDayHeaderStyles}
-          customDatesStyles={customSelectedDatesStyles}
-          disabledDatesTextStyle={styles.disabledDates}
-          textStyle={styles.textStyle}
-          monthTitleStyle={styles.dateTitle}
-          yearTitleStyle={styles.dateTitle}
-          headerWrapperStyle={styles.headerWrapper}
+        <Calendar
+          onDayPress={onDayPress}
+          markingType={'period'}
+          markedDates={markedDates}
+          enableSwipeMonths={true}
+          firstDay={1}
+          theme={{
+            ...customThemeStyles,
+          }}
+          minDate={highlightedDates ? highlightedDates[0] : undefined}
+          maxDate={highlightedDates ? highlightedDates[highlightedDates.length - 1] : undefined}
+          current={selectedDate}
         />
       </View>
+      <View style={styles.modalFooter}>
+        <Button
+          children="Done"
+          onPress={handleClose}
+          disabled={!selectedStartDate}
+          variant={!selectedStartDate ? ButtonVariants.OPACITY : ButtonVariants.FILL}
+          containerStyles={{ borderWidth: 0 }}
+         />
+      </View>
     </Modal>
   );
 }

src/components/Calendars/RangeCalendar/style.ts

@@ -4,63 +4,17 @@ import { Colors } from '../../../theme';
 export const styles = StyleSheet.create({
   modalContent: {
     backgroundColor: Colors.WHITE,
-    padding: 22,
-    justifyContent: 'center',
-    alignItems: 'center',
+    paddingVertical: 22,
   },
-  rangeStartEndTextStyle: {
-    color: Colors.WHITE,
+  calendarHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginBottom: 16,
+    alignItems: 'center'
   },
-  rangeStartEndStyle: {
-    width: 40,
-  },
-  rangeEndStyle: {
-    alignSelf: 'flex-start',
-    justifyContent: 'flex-start',
-    borderTopRightRadius: 20,
-    borderBottomRightRadius: 20,
-  },
-  rangeStartStyle: {
-    alignSelf: 'flex-end',
+  modalFooter: {
     justifyContent: 'flex-end',
-    borderTopLeftRadius: 20,
-    borderBottomLeftRadius: 20,
-  },
-  rangeStyle: {
-    backgroundColor: Colors.DARK_LIGHT,
-    height: 34,
-  },
-  labelsWrapper: {
-    borderTopWidth: 0,
-    borderBottomWidth: 0,
-    marginBottom: 5,
-  },
-  disabledDates: {
-    width: "100%",
-    height: "100%",
-    backgroundColor: Colors.WHITE,
-    textAlign: "center",
-    textAlignVertical: "center",
-  },
-  dateTitle: {
-    color: Colors.DARK_BLUE,
-    fontSize: 16,
-    lineHeight: 24,
-    fontWeight: '700'
-  },
-  headerWrapper: {
-    marginBottom: 15
-  },
-  textStyle: {
-    color: Colors.DARK_BLUE,
-    fontSize: 14,
-    lineHeight: 20
-  },
-  dayHeader: {
-    color: Colors.ORANGE,
-    fontSize: 12,
-    lineHeight: 16,
-    letterSpacing: 1,
-    fontWeight: '700'
+    width: '100%',
+    marginBottom: 24,
   }
 });

src/components/CheckBox/index.tsx

@@ -9,16 +9,19 @@ type Props = {
   onChange?: (value: boolean) => void;
   value?: boolean;
   label?: string;
+  color?: string;
+  disabled?: boolean;
 };
 
-export const CheckBox: FC<Props> = ({ value, onChange, label }) => {
+export const CheckBox: FC<Props> = ({ value, onChange, label, color, disabled }) => {
   return (
     <View style={styles.wrapper}>
       <Checkbox
         style={{ backgroundColor: Colors.WHITE }}
-        color={Colors.ORANGE}
+        color={color || Colors.ORANGE}
         value={value}
         onValueChange={onChange}
+        disabled={disabled}
       />
       {label ? <Text style={styles.text}>{label}</Text> : null}
     </View>

src/components/ConnectionBanner/ConnectionBanner.tsx

@@ -0,0 +1,41 @@
+import React, { useEffect, useState } from 'react';
+import { View, Text } from 'react-native';
+import { useConnection } from 'src/contexts/ConnectionContext';
+import { styles } from './styles';
+
+const ConnectionBanner = () => {
+  const netInfo = useConnection();
+  const [visible, setVisible] = useState(false);
+  const [bannerMessage, setBannerMessage] = useState('');
+  const [hadConnection, setHadConnection] = useState(netInfo?.isInternetReachable);
+
+  useEffect(() => {
+    if (netInfo?.isInternetReachable !== null) {
+      if (hadConnection === false && netInfo?.isInternetReachable) {
+        setBannerMessage('Internet connection restored!');
+        showBanner();
+      } else if (netInfo?.isInternetReachable === false) {
+        setBannerMessage('No internet connection!');
+        showBanner();
+      }
+      setHadConnection(netInfo?.isInternetReachable);
+    }
+  }, [netInfo?.isInternetReachable]);
+
+  const showBanner = () => {
+    setVisible(true);
+    setTimeout(() => {
+      setVisible(false);
+    }, 3000);
+  };
+
+  if (!visible) return null;
+
+  return (
+    <View style={styles.banner}>
+      <Text style={styles.text}>{bannerMessage}</Text>
+    </View>
+  );
+};
+
+export default ConnectionBanner;

src/components/ConnectionBanner/styles.tsx

@@ -0,0 +1,20 @@
+import { StyleSheet, Dimensions } from 'react-native';
+import { statusBarHeight } from 'src/constants/constants';
+
+export const styles = StyleSheet.create({
+  banner: {
+    position: 'absolute',
+    top: statusBarHeight,
+    left: 0,
+    width: Dimensions.get('window').width,
+    backgroundColor: 'rgba(15, 63, 79, 0.7)',
+    padding: 10,
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 1
+  },
+  text: {
+    color: 'white',
+    fontWeight: '500'
+  }
+});

src/components/EditNmModal/index.tsx

@@ -0,0 +1,159 @@
+import React from 'react';
+import ReactModal from 'react-native-modal';
+import { View, Text } from 'react-native';
+import { Dropdown } from 'react-native-searchable-dropdown-kj';
+import { Button } from '../Button';
+import { Colors } from 'src/theme';
+import { styles } from './styles';
+import { ButtonVariants } from 'src/types/components';
+import { noOfVisits, qualityOptions } from 'src/screens/InAppScreens/TravelsScreen/utils/constants';
+
+export const EditNmModal = ({
+  isVisible,
+  onClose,
+  modalState,
+  updateModalState,
+  updateNM
+}: {
+  isVisible: boolean;
+  onClose: () => void;
+  modalState: any;
+  updateModalState: (updates: any) => void;
+  updateNM: (region: number, first: number, last: number, visits: number, quality: number) => void;
+}) => {
+  const { years, selectedFirstYear, selectedLastYear, selectedQuality, selectedNoOfVisits, id } =
+    modalState;
+
+  const handleFirstYearChange = (item: { value: number; label: string }) => {
+    updateModalState({
+      selectedFirstYear: item.value,
+      selectedLastYear: item.value
+    });
+  };
+
+  const handleLastYearChange = (item: { value: number; label: string }) => {
+    updateModalState({ selectedLastYear: item.value });
+  };
+
+  const handleQualityChange = (item: { value: number; label: string }) => {
+    updateModalState({ selectedQuality: item });
+  };
+
+  const handleVisitsChange = (item: { value: number; label: string }) => {
+    updateModalState({ selectedNoOfVisits: item.value });
+  };
+
+  const renderOption = (name: string) => (
+    <View style={styles.dropdownOption}>
+      <Text style={styles.placeholderStyle}>{name}</Text>
+    </View>
+  );
+
+  return (
+    <ReactModal
+      isVisible={isVisible}
+      onBackdropPress={onClose}
+      style={styles.modal}
+      statusBarTranslucent={true}
+      presentationStyle="overFullScreen"
+    >
+      <View style={styles.modalContent}>
+        <View style={styles.optionsContainer}>
+          <View style={styles.rowWrapper}>
+            <View style={styles.dropdownWrapper}>
+              <Text style={styles.textSmall}>First visit</Text>
+              <Dropdown
+                style={styles.dropdown}
+                placeholderStyle={styles.placeholderStyle}
+                selectedTextStyle={styles.placeholderStyle}
+                data={years}
+                labelField="label"
+                valueField="value"
+                value={selectedFirstYear}
+                placeholder="First visit"
+                onChange={handleFirstYearChange}
+                containerStyle={{ borderRadius: 4 }}
+                renderItem={(item) => renderOption(item.label)}
+              />
+            </View>
+            <View style={styles.dropdownWrapper}>
+              <Text style={styles.textSmall}>Last visit</Text>
+              <Dropdown
+                style={styles.dropdown}
+                placeholderStyle={styles.placeholderStyle}
+                selectedTextStyle={styles.placeholderStyle}
+                data={years.filter(
+                  (year: { value: number; label: string }) =>
+                    year.value >= selectedFirstYear || year.value === 1
+                )}
+                labelField="label"
+                valueField="value"
+                value={selectedLastYear}
+                placeholder="Last visit"
+                onChange={handleLastYearChange}
+                containerStyle={{ borderRadius: 4 }}
+                renderItem={(item) => renderOption(item.label)}
+              />
+            </View>
+          </View>
+
+          <View style={styles.rowWrapper}>
+            <View style={styles.dropdownWrapper}>
+              <Text style={styles.textSmall}>Best visit quality</Text>
+              <Dropdown
+                style={styles.dropdown}
+                placeholderStyle={styles.placeholderStyle}
+                containerStyle={{ borderRadius: 4 }}
+                selectedTextStyle={styles.placeholderStyle}
+                data={qualityOptions}
+                labelField="name"
+                valueField="id"
+                value={selectedQuality.id}
+                placeholder="Best visit quality"
+                onChange={handleQualityChange}
+                renderItem={(item) => renderOption(item.name)}
+              />
+            </View>
+            <View style={styles.dropdownWrapper}>
+              <Text style={styles.textSmall}>No of visits</Text>
+              <Dropdown
+                style={styles.dropdown}
+                placeholderStyle={styles.placeholderStyle}
+                selectedTextStyle={styles.placeholderStyle}
+                data={noOfVisits}
+                labelField="label"
+                valueField="value"
+                value={selectedNoOfVisits}
+                placeholder="No of visits"
+                onChange={handleVisitsChange}
+                containerStyle={{ borderRadius: 4 }}
+                renderItem={(item) => renderOption(item.label)}
+              />
+            </View>
+          </View>
+        </View>
+
+        <Button
+          children="Done"
+          onPress={() => {
+            updateNM(
+              id,
+              selectedFirstYear,
+              selectedLastYear,
+              selectedNoOfVisits,
+              selectedQuality.id
+            );
+            onClose();
+          }}
+        />
+        <Button
+          children="Close"
+          onPress={onClose}
+          variant={ButtonVariants.OPACITY}
+          containerStyles={styles.closeBtn}
+          textStyles={{ color: Colors.DARK_BLUE }}
+        />
+      </View>
+    </ReactModal>
+  );
+};

src/components/EditNmModal/styles.tsx

@@ -0,0 +1,53 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from 'src/theme';
+
+export const styles = StyleSheet.create({
+  modal: {
+    justifyContent: 'flex-end',
+    margin: 0
+  },
+  textSmall: {
+    color: Colors.DARK_BLUE,
+    fontWeight: '600',
+    fontSize: 12
+  },
+  buttonContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 16
+  },
+  modalContent: {
+    backgroundColor: 'white',
+    borderRadius: 15,
+    paddingHorizontal: 16,
+    gap: 16,
+    paddingVertical: 24
+  },
+  optionsContainer: {
+    gap: 16,
+    marginBottom: 8
+  },
+  closeBtn: { backgroundColor: Colors.WHITE, borderColor: '#B7C6CB' },
+  rowWrapper: {
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: 16
+  },
+  dropdownWrapper: { gap: 4, flex: 1 },
+  dropdown: {
+    height: 36,
+    backgroundColor: '#F4F4F4',
+    borderRadius: 4,
+    paddingHorizontal: 8
+  },
+  dropdownOption: { paddingVertical: 12, paddingHorizontal: 16 },
+  placeholderStyle: {
+    fontSize: 14,
+    color: Colors.DARK_BLUE,
+    fontWeight: '500'
+  }
+});

src/components/FlatList/index.tsx

@@ -1,44 +1,57 @@
-import React, { FC, useEffect, useState } from 'react';
+import React, { FC, useCallback, useEffect, useState } from 'react';
 import { FlatList as List, SafeAreaView, View } from 'react-native';
 import { Input } from '../Input';
 import { styles } from './styles';
 import { Item, ItemData } from './item';
 import { useGetRegionsWithFlagQuery } from '@api/regions';
+import { useFocusEffect } from '@react-navigation/native';
+import { Loading } from '../Loading';
+import { FlashList } from '@shopify/flash-list';
 
 type Props = {
   itemObject: (object: any) => void;
+  initialData?: ItemData[] | string[];
+  date?: boolean;
 };
 
 //TODO: rework to generic types + custom props
 
-export const FlatList: FC<Props> = ({ itemObject }) => {
-  const [selectedObject, setSelectedObject] = useState<{ name: string; id: number }>();
+export const FlatList: FC<Props> = ({ itemObject, initialData, date }) => {
+  const [selectedObject, setSelectedObject] = useState<{ name: string; id: number } | string>();
   const [search, setSearch] = useState('');
-  const [filteredData, setFilteredData] = useState<ItemData[]>([]);
-  const [masterData, setMasterData] = useState<ItemData[]>([]);
+  const [filteredData, setFilteredData] = useState<ItemData[] | string[]>([]);
+  const [masterData, setMasterData] = useState<ItemData[] | string[]>([]);
+  const [loading, setLoading] = useState<boolean>(true);
 
   const { data } = useGetRegionsWithFlagQuery(true);
 
-  useEffect(() => {
-    if (data) {
-      setFilteredData(data.data);
-      setMasterData(data.data);
-    }
-  }, [data]);
+  useFocusEffect(
+    useCallback(() => {
+      const dataToUse = initialData || data?.data;
+      if (dataToUse) {
+        setFilteredData(dataToUse);
+        setMasterData(dataToUse);
+      }
+      setLoading(false);
+    }, [data, initialData])
+  );
 
-  const selectItem = (object: { name: string; id: number }) => {
+  if (loading) return <Loading />;
+
+  const selectItem = (object: { name: string; id: number } | string) => {
     itemObject(object);
     setSelectedObject(object);
   };
 
   const searchFilter = (text: string) => {
     if (text) {
-      const newData = masterData.filter((item) => {
+      const newData = masterData.filter((item: any) => {
         const itemData = item.name ? item.name.toLowerCase() : ''.toLowerCase();
+        const initialData = item.country ? item.country.toLowerCase() : ''.toLowerCase();
         const textData = text.toLowerCase();
-        return itemData.indexOf(textData) > -1;
+        return itemData.indexOf(textData) > -1 || initialData.indexOf(textData) > -1;
       });
-      setFilteredData(newData);
+      setFilteredData(newData as string[] | ItemData[]);
       setSearch(text);
     } else {
       setFilteredData(masterData);
@@ -47,35 +60,47 @@ export const FlatList: FC<Props> = ({ itemObject }) => {
   };
 
   const renderItem = ({ item }: { item: ItemData }) => {
-    const selected = item.id === selectedObject?.id;
-
+    const selected = date
+      ? item === selectedObject
+      : item?.id === (selectedObject as { name: string; id: number })?.id;
     const backgroundColor = selected ? '#FAFAFA' : 'white';
 
     return (
       <Item
         selected={selected}
         item={item}
-        onPress={() => selectItem(item)}
+        onPress={() => selectItem(item as string | { name: string; id: number })}
         backgroundColor={backgroundColor}
+        initial={initialData ? true : false}
+        date={date}
       />
     );
   };
 
   return (
     <SafeAreaView style={styles.container}>
-      <View style={{ marginTop: 10 }}>
-        <Input
-          inputMode={'search'}
-          placeholder={'Search'}
-          onChange={(text) => searchFilter(text)}
-          value={search}
-        />
-      </View>
-      <List
-        data={filteredData}
+      {!date && (
+        <View style={{ marginTop: 12 }}>
+          <Input
+            inputMode={'search'}
+            placeholder={'Search'}
+            onChange={(text) => searchFilter(text)}
+            value={search}
+          />
+        </View>
+      )}
+      <FlashList
+        viewabilityConfig={{
+          waitForInteraction: true,
+          itemVisiblePercentThreshold: 50,
+          minimumViewTime: 1000
+        }}
+        estimatedItemSize={50}
+        data={filteredData as ItemData[]}
         renderItem={renderItem}
-        keyExtractor={(item) => item.id.toString()}
+        keyExtractor={(item) => (date ? item.toString() : item.id.toString())}
         extraData={selectedObject}
+        showsVerticalScrollIndicator={false}
       />
     </SafeAreaView>
   );

src/components/FlatList/item.tsx

@@ -6,34 +6,54 @@ import { styles } from './styles';
 import MarkSVG from '../../../assets/icons/mark.svg';
 import { API_HOST } from '../../constants';
 
-export const Item = ({ item, onPress, backgroundColor, selected }: ItemProps) => {
-  const name = item.name.split('–');
+export const Item = ({ item, onPress, backgroundColor, selected, initial, date }: ItemProps) => {
+  const name = initial && date ? item : initial ? item.country : item.name?.split('–') || '';
 
   return (
     <TouchableOpacity onPress={onPress} style={[styles.item, { backgroundColor }]}>
+      {item?.country === 'All Regions' && <View style={{ width: 20 }}></View>}
       <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 10 }}>
-        <Image
-          width={48}
-          height={48}
-          style={{ borderRadius: 48 / 2 }}
-          source={{
-            uri: `${API_HOST}/img/flags_new/${item.flag}`
-          }}
-        />
-        <View>
-          <Text style={[styles.title, { color: Colors.DARK_BLUE }]}>{name[0]}</Text>
-          <Text style={[styles.text, { color: Colors.DARK_BLUE }]}>{name[1]}</Text>
+        {item.flag && (
+          <Image
+            width={48}
+            height={48}
+            style={{ borderRadius: 48 / 2, borderWidth: 1, borderColor: Colors.LIGHT_GRAY }}
+            source={{
+              uri: initial ? `${API_HOST}${item.flag}` : `${API_HOST}/img/flags_new/${item.flag}`
+            }}
+          />
+        )}
+        <View style={{ flexShrink: 1 }}>
+          <View style={{ flexDirection: 'row' }}>
+            <Text style={[styles.title, { color: Colors.DARK_BLUE, flexShrink: 1 }]}>
+              {initial ? (name as string) : (name as string[])[0]}
+            </Text>
+            {initial && !date && item.country !== 'All Regions' && (
+              <View style={styles.regionIndicator}>
+                <Text style={[styles.text, { color: Colors.WHITE, fontWeight: 'bold' }]}>
+                  {item.dare ? 'DARE' : 'NM'}
+                </Text>
+              </View>
+            )}
+          </View>
+          {item.name && (
+            <Text style={[styles.text, { color: Colors.DARK_BLUE }]}>
+              {initial ? item.name : (name as string[])[1]}
+            </Text>
+          )}
         </View>
       </View>
-      <View style={{ marginRight: 10 }}>{selected && <MarkSVG />}</View>
+      <View style={{ marginRight: 10, width: 20 }}>{selected && <MarkSVG />}</View>
     </TouchableOpacity>
   );
 };
 
 export type ItemData = {
   id: number;
-  name: string;
-  flag: string;
+  name?: string;
+  flag?: string;
+  country?: string;
+  dare?: boolean;
 };
 
 type ItemProps = {
@@ -41,4 +61,6 @@ type ItemProps = {
   onPress: () => void;
   backgroundColor: string;
   selected: boolean;
+  initial?: boolean;
+  date?: boolean;
 };

src/components/FlatList/styles.ts

@@ -1,10 +1,12 @@
 import { StatusBar, StyleSheet } from 'react-native';
 import { getFontSize } from '../../utils';
+import { Colors } from 'src/theme';
 
 export const styles = StyleSheet.create({
   container: {
     flex: 1,
-    gap: 15
+    gap: 15,
+    paddingVertical: 10
   },
   item: {
     width: '100%',
@@ -20,5 +22,15 @@ export const styles = StyleSheet.create({
   },
   text: {
     fontSize: getFontSize(12)
+  },
+  regionIndicator: {
+    height: 18,
+    overflow: 'hidden',
+    backgroundColor: Colors.DARK_BLUE,
+    borderRadius: 9,
+    paddingHorizontal: 6,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginLeft: 4
   }
 });

src/components/Header/index.tsx

@@ -1,31 +1,44 @@
-import React, { FC } from 'react';
+import React, { FC, ReactNode } from 'react';
 import { Text, TouchableOpacity, View } from 'react-native';
-import { useNavigation } from '@react-navigation/native';
+import { CommonActions, useNavigation } from '@react-navigation/native';
 
 import { styles } from './style';
 
 import ChevronLeft from '../../../assets/icons/chevron-left.svg';
+import CloseSvg from '../../../assets/icons/close.svg';
+import { NAVIGATION_PAGES } from 'src/types';
 
 type Props = {
   label: string;
+  rightElement?: ReactNode;
+  shouldClose?: boolean;
 };
 
-export const Header: FC<Props> = ({ label }) => {
+export const Header: FC<Props> = ({ label, rightElement, shouldClose }) => {
   const navigation = useNavigation();
 
+  const handlePress = () => {
+    if (shouldClose) {
+      navigation.dispatch(
+        CommonActions.reset({
+          index: 1,
+          routes: [{ name: NAVIGATION_PAGES.IN_APP }]
+        })
+      );
+    } else {
+      navigation.goBack();
+    }
+  };
+
   // navigation.setOptions() TODO
 
   return (
     <View style={styles.wrapper}>
-      <TouchableOpacity onPress={() => navigation.goBack()}>
-        <View style={styles.chevronWrapper}>
-          <ChevronLeft />
-        </View>
+      <TouchableOpacity onPress={handlePress}>
+        <View style={styles.chevronWrapper}>{shouldClose ? <CloseSvg /> : <ChevronLeft />}</View>
       </TouchableOpacity>
       <Text style={styles.label}>{label}</Text>
-      <View>
-        <Text>Text</Text>
-      </View>
+      {rightElement ? <View>{rightElement}</View> : <View style={styles.placeholder} />}
     </View>
   );
 };

src/components/Header/style.ts

@@ -23,5 +23,9 @@ export const styles = StyleSheet.create({
     fontFamily: 'redhat-700',
     fontSize: getFontSize(14),
     color: Colors.DARK_BLUE
-  }
+  },
+  placeholder: {
+    width: 25,
+    height: 25,
+  },
 });

src/components/HorizontalTabView/index.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { Text, TouchableOpacity, View } from 'react-native';
+import { Route, TabBar, TabView } from 'react-native-tab-view';
+
+import { styles } from './styles';
+import { Colors } from 'src/theme';
+
+import MarkToUpIcon from '../../../assets/icons/mark-to-up.svg';
+
+export const HorizontalTabView = ({
+  index,
+  setIndex,
+  routes,
+  renderScene,
+  withMark,
+  onDoubleClick,
+  lazy = false
+}: {
+  index: number;
+  setIndex: React.Dispatch<React.SetStateAction<number>>;
+  routes: Route[];
+  renderScene: (props: any) => React.ReactNode;
+  withMark?: boolean;
+  onDoubleClick?: () => void;
+  lazy?: boolean;
+}) => {
+  const renderTabBar = (props: any) => (
+    <TabBar
+      {...props}
+      renderLabel={({ route, focused }) => (
+        <View style={[styles.tabLabelContainer, focused ? styles.tabLabelFocused : null]}>
+          <Text style={[styles.label, focused ? styles.labelFocused : null]}>{route.title}</Text>
+          {withMark ? (
+            <MarkToUpIcon
+              height={16}
+              width={16}
+              style={styles.icon}
+              stroke={focused ? Colors.WHITE : Colors.DARK_BLUE}
+            />
+          ) : null}
+        </View>
+      )}
+      scrollEnabled={true}
+      indicatorStyle={styles.indicator}
+      style={styles.tabBar}
+      activeColor={Colors.ORANGE}
+      inactiveColor={Colors.DARK_BLUE}
+      tabStyle={styles.tabStyle}
+      pressColor={'transparent'}
+    />
+  );
+
+  return (
+    <TabView
+      navigationState={{ index, routes }}
+      renderScene={renderScene}
+      onIndexChange={setIndex}
+      animationEnabled={true}
+      swipeEnabled={true}
+      style={styles.tabView}
+      renderTabBar={renderTabBar}
+      lazy={lazy}
+    />
+  );
+};

src/components/HorizontalTabView/styles.tsx

@@ -0,0 +1,51 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from 'src/theme';
+
+export const styles = StyleSheet.create({
+  tabBar: {
+    backgroundColor: 'transparent',
+    elevation: 0,
+    shadowOpacity: 0,
+    marginTop: 0
+  },
+  tabView: {
+    marginTop: -5
+  },
+  tabStyle: {
+    width: 'auto',
+    padding: 0,
+    marginHorizontal: 2,
+    backgroundColor: 'transparent'
+  },
+  tabLabelContainer: {
+    borderRadius: 20,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    backgroundColor: 'transparent',
+    borderColor: 'rgba(15, 63, 79, 0.3)',
+    borderWidth: 1,
+    display: 'flex',
+    flexDirection: 'row',
+    gap: 5
+  },
+  tabLabelFocused: {
+    backgroundColor: Colors.ORANGE,
+    borderColor: Colors.ORANGE
+  },
+  label: {
+    fontSize: 12,
+    textTransform: 'none',
+    color: Colors.DARK_BLUE,
+    fontWeight: '600'
+  },
+  labelFocused: {
+    color: 'white'
+  },
+  indicator: {
+    height: 0
+  },
+  icon: {
+    display: 'flex',
+    alignSelf: 'center'
+  }
+});

src/components/Input/index.tsx

@@ -8,6 +8,7 @@ import {
   TextInputFocusEventData
 } from 'react-native';
 import { styling } from './style';
+import { Colors } from 'src/theme';
 
 type Props = {
   placeholder?: string;
@@ -23,6 +24,8 @@ type Props = {
   icon?: ReactNode;
   multiline?: boolean;
   editable?: boolean;
+  height?: number;
+  backgroundColor?: string;
 };
 
 export const Input: FC<Props> = ({
@@ -37,7 +40,9 @@ export const Input: FC<Props> = ({
   formikError,
   icon,
   multiline,
-  editable
+  editable,
+  height,
+  backgroundColor = Colors.FILL_LIGHT
 }) => {
   const [focused, setFocused] = useState(false);
 
@@ -48,9 +53,9 @@ export const Input: FC<Props> = ({
       {header ? <Text style={styles.text}>{header}</Text> : null}
       <View
         style={[
-          [styles.wrapper, formikError ? styles.inputError : null],
+          [styles.wrapper, formikError ? styles.inputError : null, { backgroundColor }],
           { flexDirection: 'row', alignItems: 'center' },
-          multiline ? { height: 100 } : { height: 44 }
+          multiline ? { height: height ?? 100 } : { height: height ?? 44 }
         ]}
       >
         {icon ? (

src/components/Input/style.ts

@@ -16,7 +16,7 @@ export const styling = (focused: boolean) =>
       borderWidth: 1,
       borderColor: focused ? Colors.DARK_BLUE : 'rgba(250, 250, 250, 1)',
       borderRadius: 6,
-      backgroundColor: 'rgba(250, 250, 250, 1)',
+      backgroundColor: Colors.FILL_LIGHT,
       fontSize: 15
     },
     text: {