ranking filter small fix

src/screens/InAppScreens/MapScreen/FilterModal/index.tsx

@@ -51,6 +51,7 @@ const FilterModal = ({
                 style={[ModalStyles.dropdown, { width: '100%' }]}
                 placeholderStyle={ModalStyles.placeholderStyle}
                 selectedTextStyle={ModalStyles.selectedTextStyle}
+                containerStyle={ModalStyles.dropdownContent}
                 data={tilesTypes}
                 labelField="label"
                 valueField="value"

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

@@ -44,49 +44,52 @@ export const FilterModal: FC<ModalProps> = ({
           </View>
           <View style={{ display: 'flex', alignItems: 'center' }}>
             <Text style={{ color: Colors.DARK_BLUE, fontSize: 20, fontWeight: '700' }}>Filter</Text>
+            <Dropdown
+              style={[ModalStyles.dropdown, { width: '100%', marginTop: 20 }]}
+              placeholderStyle={ModalStyles.placeholderStyle}
+              selectedTextStyle={ModalStyles.selectedTextStyle}
+              containerStyle={ModalStyles.dropdownContent}
+              data={countriesData}
+              disable={!netInfo?.isInternetReachable}
+              labelField="name"
+              valueField="two"
+              value={filterCountry?.two}
+              placeholder="Country"
+              onChange={(item) => {
+                setFilterCountry(item);
+              }}
+            />
             <View style={ModalStyles.ageAndRankingWrapper}>
               <Dropdown
                 style={ModalStyles.dropdown}
                 placeholderStyle={ModalStyles.placeholderStyle}
                 selectedTextStyle={ModalStyles.selectedTextStyle}
-                data={dataAge}
-                disable={!netInfo?.isInternetReachable}
+                containerStyle={ModalStyles.dropdownContent}
+                data={dataRanking}
                 labelField="label"
                 valueField="value"
-                value={filterAge?.value}
-                placeholder="Select age"
+                value={filterRanking?.value}
+                placeholder="Ranking"
                 onChange={(item) => {
-                  setFilterAge(item);
+                  setFilterRanking(item);
                 }}
               />
               <Dropdown
                 style={ModalStyles.dropdown}
                 placeholderStyle={ModalStyles.placeholderStyle}
                 selectedTextStyle={ModalStyles.selectedTextStyle}
-                data={dataRanking}
+                containerStyle={ModalStyles.dropdownContent}
+                data={dataAge}
+                disable={!netInfo?.isInternetReachable}
                 labelField="label"
                 valueField="value"
-                value={filterRanking?.value}
-                placeholder="Select ranking"
+                value={filterAge?.value}
+                placeholder="Age"
                 onChange={(item) => {
-                  setFilterRanking(item);
+                  setFilterAge(item);
                 }}
               />
             </View>
-            <Dropdown
-              style={[ModalStyles.dropdown, { width: '100%', marginTop: 15 }]}
-              placeholderStyle={ModalStyles.placeholderStyle}
-              selectedTextStyle={ModalStyles.selectedTextStyle}
-              data={countriesData}
-              disable={!netInfo?.isInternetReachable}
-              labelField="name"
-              valueField="two"
-              value={filterCountry?.two}
-              placeholder="Select country"
-              onChange={(item) => {
-                setFilterCountry(item);
-              }}
-            />
             <View style={ModalStyles.buttonsWrapper}>
               <Button
                 variant={ButtonVariants.OPACITY}
@@ -118,7 +121,7 @@ export const FilterModal: FC<ModalProps> = ({
                 onPress={() => {
                   applyFilter(filterAge, filterRanking, filterCountry);
                 }}
-                children={'Filter'}
+                children={'Show'}
               />
             </View>
           </View>

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

@@ -227,14 +227,17 @@ export const ModalStyles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
-    marginTop: 20
+    marginTop: 15
   },
   buttonsWrapper: {
     width: '100%',
     display: 'flex',
     justifyContent: 'space-between',
     flexDirection: 'row',
-    marginTop: 15
+    marginTop: 20
+  },
+  dropdownContent: {
+    borderRadius: 4
   }
 });