Merge branch 'background-fix' of SashaGoncharov19/nomadmania-app into dev

Route.tsx

@@ -119,13 +119,13 @@ const Route = () => {
           height: 58
         }
       }),
-      backgroundColor: '#FAFAFA',
-    }
+    },
+    cardStyle: { backgroundColor: 'white' }
   });
 
   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} />

app.config.ts

@@ -37,7 +37,7 @@ export default ({ config }: ConfigContext): ExpoConfig => ({
     tsconfigPaths: true
   },
   splash: {
-    image: './assets/splash.png',
+    image: './assets/splash-new.png',
     resizeMode: 'cover'
   },
   notification: {

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;
@@ -24,6 +25,7 @@ type Props = {
   multiline?: boolean;
   editable?: boolean;
   height?: number;
+  backgroundColor?: string;
 };
 
 export const Input: FC<Props> = ({
@@ -39,7 +41,8 @@ export const Input: FC<Props> = ({
   icon,
   multiline,
   editable,
-  height
+  height,
+  backgroundColor = Colors.FILL_LIGHT
 }) => {
   const [focused, setFocused] = useState(false);
 
@@ -50,7 +53,7 @@ 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: height ?? 100 } : { height: height ?? 44 }
         ]}

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: {

src/screens/InAppScreens/MapScreen/index.tsx

@@ -254,9 +254,9 @@ const MapScreen: React.FC<MapScreenProps> = ({ navigation }) => {
   };
 
   const getLocation = async () => {
-    let currentLocation = await Location.getCurrentPositionAsync(
-      Platform.OS === 'ios' ? { accuracy: Location.Accuracy.Balanced } : {}
-    );
+    let currentLocation = await Location.getCurrentPositionAsync({
+      accuracy: Location.Accuracy.Balanced
+    });
     setLocation(currentLocation.coords);
 
     mapRef.current?.animateToRegion(

src/screens/InAppScreens/TravellersScreen/Components/Profile.tsx

@@ -11,7 +11,7 @@ import { AvatarWithInitials, WarningModal } from 'src/components';
 
 import { API_HOST } from '../../../../constants';
 import { getFontSize } from '../../../../utils';
-import { adaptiveStyle } from '../../../../theme';
+import { adaptiveStyle, Colors } from '../../../../theme';
 
 import TickIcon from '../../../../../assets/icons/tick.svg';
 import UNIcon from '../../../../../assets/icons/un_icon.svg';
@@ -118,7 +118,9 @@ export const Profile: FC<Props> = ({
   };
 
   return (
-    <View>
+    <View
+      style={{ backgroundColor: Colors.FILL_LIGHT, borderRadius: 8, padding: 6, marginBottom: 12 }}
+    >
       <TouchableOpacity onPress={() => handlePress()}>
         <View style={adaptiveStyle(ProfileStyles.profileRoot, {})}>
           <View style={{ paddingLeft: 20 }}>
@@ -206,11 +208,7 @@ export const Profile: FC<Props> = ({
         </View>
       </View>
       {modalType && (
-        <WarningModal
-          type={modalType}
-          isVisible={true}
-          onClose={() => setModalType(null)}
-        />
+        <WarningModal type={modalType} isVisible={true} onClose={() => setModalType(null)} />
       )}
     </View>
   );

src/screens/InAppScreens/TravellersScreen/Components/SeriesItem.tsx

@@ -25,7 +25,7 @@ export const SeriesItem: FC<Props> = (data) => {
         {data.index + 1}
       </Text>
       <View style={ItemStyles.contentWrapper}>
-        <View style={{ width: '85%', gap: 4 }}>
+        <View style={{ width: '85%' }}>
           {flags && (
             <View style={ItemStyles.withFlagWrapper}>
               {flags.map((flag, index) => (

src/screens/InAppScreens/TravellersScreen/Components/SeriesRankingItem.tsx

@@ -40,9 +40,12 @@ const SeriesRankingItem = React.memo(
     return (
       <TouchableOpacity
         onPress={() => onPress(item.user_id)}
-        style={ProfileStyles.profileContainer}
+        style={[
+          ProfileStyles.profileContainer,
+          { backgroundColor: Colors.FILL_LIGHT, padding: 6, borderRadius: 8, marginBottom: 12 }
+        ]}
       >
-        <View style={ProfileStyles.profileRoot}>
+        <View style={[ProfileStyles.profileRoot, {marginBottom: 0}]}>
           <View style={{ paddingLeft: 20 }}>
             <View>
               <Text style={ScoreStyles.rankText}>{index + 1}</Text>

src/screens/InAppScreens/TravellersScreen/Components/styles.ts

@@ -99,11 +99,9 @@ export const ScoreStyles = StyleSheet.create({
     fontWeight: '700',
     position: 'absolute',
     left: -20,
-    top: 10
+    top: 14
   },
   nmWrapper: {
-    paddingTop: 17,
-    paddingBottom: 17,
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
@@ -114,8 +112,8 @@ export const ScoreStyles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
-    marginBottom: 15,
-    flex: 1
+    paddingTop: 8,
+    flex: 1,
   },
   rankingScoresWrapper: {
     display: 'flex',
@@ -218,7 +216,10 @@ export const ItemStyles = StyleSheet.create({
     alignItems: 'center',
     flexDirection: 'row',
     flex: 1,
-    gap: 8
+    gap: 8,
+    backgroundColor: Colors.FILL_LIGHT,
+    padding: 6,
+    borderRadius: 8
   },
   contentWrapper: {
     flex: 1,
@@ -260,7 +261,7 @@ export const ItemStyles = StyleSheet.create({
   },
   nameAndCnt: {
     color: Colors.DARK_BLUE,
-    fontWeight: '700'
+    fontWeight: '700',
   },
   headerWrapper: {
     fontSize: getFontSize(14),
@@ -288,7 +289,10 @@ export const TriumphsStyles = StyleSheet.create({
   itemContainer: {
     flexDirection: 'row',
     alignItems: 'center',
-    gap: 8
+    gap: 8,
+    backgroundColor: Colors.FILL_LIGHT,
+    padding: 6,
+    borderRadius: 8,
   },
   avatar: {
     width: 48,

src/screens/InAppScreens/TravellersScreen/StatisticsListScreen/index.tsx

@@ -75,7 +75,7 @@ const StatisticsListScreen = ({ route }: { route: any }) => {
       <Header label={title} />
       {statistic.ranking ? (
         <FlatList
-          contentContainerStyle={{ gap: 20, paddingBottom: 16 }}
+          contentContainerStyle={{ gap: 12, paddingBottom: 16 }}
           style={{ flex: 1 }}
           horizontal={false}
           data={statistic.ranking as any}

src/screens/InAppScreens/TravellersScreen/TriumphsScreen/styles.tsx

@@ -22,6 +22,6 @@ export const styles = StyleSheet.create({
   },
   listContainer: {
     paddingVertical: 16,
-    gap: 16
+    gap: 12
   }
 });

src/screens/InAppScreens/TravellersScreen/UNMasters/index.tsx

@@ -87,7 +87,12 @@ const UNMastersList = React.memo(({ type }: { type: string }) => {
   const renderItem = ({ item }: { item: any }) => {
     const UserItem = ({ user }: { user: Master }) => {
       return (
-        <View style={[UNMastersListStyles.wrapper, {}]}>
+        <View
+          style={[
+            UNMastersListStyles.wrapper,
+            { backgroundColor: Colors.FILL_LIGHT, borderRadius: 8, padding: 6 }
+          ]}
+        >
           <View style={{ gap: 3, marginLeft: 5 }}>
             <Text style={UNMastersListStyles.firstAndLastName}>{user.full_name}</Text>
             <View style={[UNMastersListStyles.wrapper, { marginBottom: 0 }]}>

src/screens/InAppScreens/TravellersScreen/UNMasters/styles.ts

@@ -7,7 +7,6 @@ export const UNMastersListStyles = StyleSheet.create({
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',
-    marginBottom: 5
   },
   countryAndYearItemWrapper: {
     display: 'flex',

src/screens/InAppScreens/TravellersScreen/index.tsx

@@ -73,7 +73,7 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     paddingVertical: 16,
     paddingHorizontal: 8,
-    backgroundColor: Colors.WHITE,
+    backgroundColor: Colors.FILL_LIGHT,
     borderRadius: 16,
     gap: 12
   },

src/screens/InAppScreens/TravelsScreen/AddNewTripScreen/styles.tsx

@@ -37,7 +37,7 @@ export const styles = StyleSheet.create({
     paddingHorizontal: 16,
     borderRadius: 4,
     height: 36,
-    backgroundColor: 'rgba(250, 250, 250, 1)',
+    backgroundColor: Colors.FILL_LIGHT,
     justifyContent: 'flex-start',
     gap: 10
   },

src/screens/InAppScreens/TravelsScreen/AddPhotoScreen/styles.tsx

@@ -15,7 +15,7 @@ export const styles = StyleSheet.create({
     paddingHorizontal: 16,
     borderRadius: 4,
     height: 36,
-    backgroundColor: 'rgba(250, 250, 250, 1)',
+    backgroundColor: Colors.FILL_LIGHT,
     justifyContent: 'flex-start',
     gap: 10
   },

src/screens/InAppScreens/TravelsScreen/AddRegionsScreen/styles.tsx

@@ -26,7 +26,7 @@ export const styles = StyleSheet.create({
     paddingHorizontal: 16,
     borderRadius: 4,
     height: 36,
-    backgroundColor: 'rgba(250, 250, 250, 1)',
+    backgroundColor: Colors.FILL_LIGHT,
     justifyContent: 'flex-start',
     gap: 10,
     flex: 1

src/screens/InAppScreens/TravelsScreen/Components/AccordionListItem.tsx

@@ -15,6 +15,7 @@ import { API_HOST } from 'src/constants';
 import InfoIcon from '../../../../../assets/icons/info.svg';
 
 import { styles } from './styles';
+import { Colors } from 'src/theme';
 
 interface SeriesItem {
   series_id: number;
@@ -81,7 +82,7 @@ export const AccordionListItem = React.memo(
         </TouchableOpacity>
 
         {isExpanded && (
-          <View style={[styles.content, { backgroundColor: '#FAFAFA' }]}>
+          <View style={[styles.content, { backgroundColor: Colors.FILL_LIGHT }]}>
             {item.items.map((subItem, index) => (
               <View key={index} style={styles.itemContainer}>
                 <TouchableOpacity

src/screens/InAppScreens/TravelsScreen/Components/CountryItem/styles.tsx

@@ -4,9 +4,9 @@ import { getFontSize } from 'src/utils';
 
 export const styles = StyleSheet.create({
   countryItem: {
-    backgroundColor: '#FAFAFA',
+    backgroundColor: Colors.FILL_LIGHT,
     padding: 12,
-    marginBottom: 16,
+    marginBottom: 12,
     borderRadius: 8
   },
   headerContainer: { flexDirection: 'row', alignItems: 'center', gap: 12 },

src/screens/InAppScreens/TravelsScreen/Components/MyRegionsItems/styles.tsx

@@ -3,11 +3,11 @@ import { Colors } from 'src/theme';
 
 export const styles = StyleSheet.create({
   regionItem: {
-    backgroundColor: '#FAFAFA',
+    backgroundColor: Colors.FILL_LIGHT,
     padding: 12,
     borderRadius: 8,
     gap: 12,
-    marginVertical: 8
+    marginVertical: 6
   },
   regionItemHeader: {
     flexDirection: 'row',

src/screens/InAppScreens/TravelsScreen/Components/RegionItem/styles.tsx

@@ -6,7 +6,7 @@ export const styles = StyleSheet.create({
     paddingVertical: 12,
     paddingHorizontal: 16,
     borderRadius: 8,
-    backgroundColor: '#FAFAFA'
+    backgroundColor: Colors.FILL_LIGHT,
   },
   regionItemTop: {
     flexDirection: 'row',

src/screens/InAppScreens/TravelsScreen/Components/TripItem/styles.tsx

@@ -8,7 +8,7 @@ export const styles = StyleSheet.create({
     paddingTop: 16,
     paddingBottom: 4,
     marginVertical: 8,
-    backgroundColor: '#FAFAFA',
+    backgroundColor: Colors.FILL_LIGHT,
     borderRadius: 8
   },
   tripHeaderContainer: {

src/screens/InAppScreens/TravelsScreen/Components/styles.tsx

@@ -62,8 +62,8 @@ export const styles = StyleSheet.create({
     borderColor: '#E5E5E5'
   },
   sectionContainer: {
-    marginBottom: 5,
-    backgroundColor: '#FAFAFA',
+    marginBottom: 12,
+    backgroundColor: Colors.FILL_LIGHT,
     borderRadius: 8
   },
   headerContainer: {
@@ -199,7 +199,7 @@ export const styles = StyleSheet.create({
     paddingHorizontal: 16,
     borderRadius: 4,
     height: 36,
-    backgroundColor: 'rgba(250, 250, 250, 1)',
+    backgroundColor: Colors.FILL_LIGHT,
     justifyContent: 'flex-start',
     gap: 10
   },

src/screens/InAppScreens/TravelsScreen/CountriesScreen/index.tsx

@@ -173,7 +173,7 @@ const CountriesScreen = () => {
         color={Colors.DARK_BLUE}
         borderWidth={0}
         borderRadius={5}
-        unfilledColor={Colors.DARK_LIGHT}
+        unfilledColor={Colors.FILL_LIGHT}
       />
 
       <View style={styles.slowScoreSection}>

src/screens/InAppScreens/TravelsScreen/CountriesScreen/styles.tsx

@@ -27,7 +27,7 @@ export const styles = StyleSheet.create({
     paddingHorizontal: 12,
     paddingVertical: 8,
     borderRadius: 6,
-    backgroundColor: Colors.DARK_LIGHT,
+    backgroundColor: Colors.FILL_LIGHT,
     justifyContent: 'space-between',
     marginBottom: 8
   },

src/screens/InAppScreens/TravelsScreen/DareScreen/index.tsx

@@ -159,7 +159,7 @@ const DareScreen = () => {
         color={Colors.DARK_BLUE}
         borderWidth={0}
         borderRadius={5}
-        unfilledColor={Colors.DARK_LIGHT}
+        unfilledColor={Colors.FILL_LIGHT}
       />
 
       {filteredDareRegions && (filteredDareRegions?.length || filteredDareRegions?.length) ? (
@@ -168,7 +168,8 @@ const DareScreen = () => {
           renderItem={renderItem}
           keyExtractor={(item) => item.id.toString()}
           showsVerticalScrollIndicator={false}
-          style={{ paddingTop: 8, marginBottom: 16 }}
+          style={{ paddingTop: 8 }}
+          contentContainerStyle={{ paddingBottom: 16 }}
         />
       ) : null}
 

src/screens/InAppScreens/TravelsScreen/PhotosScreen/styles.tsx

@@ -12,7 +12,7 @@ export const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'space-between',
     paddingHorizontal: 16,
-    backgroundColor: 'rgba(250, 250, 250, 1)',
+    backgroundColor: Colors.FILL_LIGHT,
     borderRadius: 4,
     marginTop: 16,
     height: 34

src/screens/InAppScreens/TravelsScreen/RegionsScreen/index.tsx

@@ -227,7 +227,7 @@ const RegionsScreen = () => {
         color={Colors.DARK_BLUE}
         borderWidth={0}
         borderRadius={5}
-        unfilledColor={Colors.DARK_LIGHT}
+        unfilledColor={Colors.FILL_LIGHT}
       />
 
       {filteredNmRegions && (filteredNmRegions?.length || filteredTccRegions?.length) ? (
@@ -236,10 +236,10 @@ const RegionsScreen = () => {
           renderItem={renderItem}
           keyExtractor={(item) => item.id.toString()}
           showsVerticalScrollIndicator={false}
-          style={{ paddingTop: 8, marginBottom: 16 }}
+          style={{ paddingVertical: 8 }}
           ListFooterComponent={
             filteredTccRegions && filteredTccRegions.length ? (
-              <View style={{ marginTop: 8 }}>
+              <View style={{ marginVertical: 8 }}>
                 <Text style={[styles.textMedium, { textAlign: 'center' }]}>TCC regions</Text>
                 {filteredTccRegions?.map((item) => (
                   <RegionItem item={item} updateRegion={handleUpdateTCC} key={item.id} />

src/screens/InAppScreens/TravelsScreen/RegionsScreen/styles.tsx

@@ -8,7 +8,7 @@ export const styles = StyleSheet.create({
     paddingHorizontal: 12,
     paddingVertical: 8,
     borderRadius: 6,
-    backgroundColor: Colors.DARK_LIGHT,
+    backgroundColor: Colors.FILL_LIGHT,
     justifyContent: 'space-between',
     marginBottom: 16
   },

src/screens/InAppScreens/TravelsScreen/SeriesItemScreen/index.tsx

@@ -139,6 +139,7 @@ export const SeriesItemScreen = ({ route }: { route: any }) => {
         showsVerticalScrollIndicator={false}
         initialNumToRender={15}
         style={{ paddingTop: 10 }}
+        contentContainerStyle={{ paddingBottom: 16 }}
         data={activeFilteredData}
         renderItem={({ item }) => (
           <AccordionListItem

src/screens/InAppScreens/TravelsScreen/TripsScreen/index.tsx

@@ -14,6 +14,7 @@ import { styles } from './styles';
 import ChevronIcon from '../../../../../assets/icons/travels-screens/chevron-bottom.svg';
 import AddIcon from '../../../../../assets/icons/travels-screens/circle-plus.svg';
 import TripSvg from '../../../../../assets/icons/travels-screens/trip.svg';
+import { Colors } from 'src/theme';
 
 const TripsScreen = ({ route }: { route: any }) => {
   const token = storage.get('token', StoreType.STRING) as string;
@@ -88,7 +89,7 @@ const TripsScreen = ({ route }: { route: any }) => {
       {trips.length === 0 ? (
         <View style={styles.noTripsContainer}>
           <View style={styles.noTripsIcon}>
-            <TripSvg fill="#F2F2F2" />
+            <TripSvg fill={Colors.WHITE} />
           </View>
           <Text style={styles.noTripsText}>No trips at the moment</Text>
         </View>

src/screens/InAppScreens/TravelsScreen/TripsScreen/styles.tsx

@@ -8,7 +8,7 @@ export const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
-    backgroundColor: 'rgba(250, 250, 250, 1)',
+    backgroundColor: Colors.FILL_LIGHT,
     borderRadius: 4,
     height: 34,
     flex: 1,
@@ -35,7 +35,7 @@ export const styles = StyleSheet.create({
     height: 256,
     width: 256,
     borderRadius: 128,
-    backgroundColor: '#FAFAFA',
+    backgroundColor: Colors.FILL_LIGHT,
     alignItems: 'center',
     justifyContent: 'center'
   },

src/screens/InAppScreens/TravelsScreen/index.tsx

@@ -84,7 +84,7 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     paddingVertical: 16,
     paddingHorizontal: 8,
-    backgroundColor: Colors.WHITE,
+    backgroundColor: Colors.FILL_LIGHT,
     borderRadius: 16,
     gap: 12
   },

src/theme.ts

@@ -10,7 +10,8 @@ export enum Colors {
   RED = '#EF5B5B',
   LIGHT_GRAY = '#C8C8C8',
   TEXT_GRAY = '#3E6471',
-  BORDER_LIGHT = '#B7C6CB'
+  BORDER_LIGHT = '#B7C6CB',
+  FILL_LIGHT = '#F4F4F4',
 }
 
 export function adaptiveStyle(