series small ui fix

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

@@ -60,6 +60,32 @@ const MarkerItem = ({
                   {marker.name}
                 </Text>
               </View>
+
+              <TouchableOpacity
+                style={[
+                  styles.calloutButton,
+                  (marker.visited === 1 &&
+                    token && {
+                      backgroundColor: Colors.WHITE,
+                      borderWidth: 1,
+                      borderColor: Colors.BORDER_LIGHT
+                    }) ||
+                    {}
+                ]}
+                onPress={() => toggleSeries(marker)}
+              >
+                {marker?.visited === 1 && token ? (
+                  <View style={styles.completedContainer}>
+                    <CheckSvg width={14} height={14} fill={Colors.DARK_BLUE} />
+                    <Text style={[styles.calloutButtonText, { color: Colors.DARK_BLUE }]}>
+                      Completed
+                    </Text>
+                  </View>
+                ) : (
+                  <Text style={styles.calloutButtonText}>Mark Completed</Text>
+                )}
+              </TouchableOpacity>
+
               {parsedAvatars && (
                 <TouchableOpacity
                   onPress={() => {
@@ -92,30 +118,6 @@ const MarkerItem = ({
                   </View>
                 </TouchableOpacity>
               )}
-              <TouchableOpacity
-                style={[
-                  styles.calloutButton,
-                  (marker.visited === 1 &&
-                    token && {
-                      backgroundColor: Colors.WHITE,
-                      borderWidth: 1,
-                      borderColor: Colors.BORDER_LIGHT
-                    }) ||
-                    {}
-                ]}
-                onPress={() => toggleSeries(marker)}
-              >
-                {marker?.visited === 1 && token ? (
-                  <View style={styles.completedContainer}>
-                    <CheckSvg width={14} height={14} fill={Colors.DARK_BLUE} />
-                    <Text style={[styles.calloutButtonText, { color: Colors.DARK_BLUE }]}>
-                      Completed
-                    </Text>
-                  </View>
-                ) : (
-                  <Text style={styles.calloutButtonText}>Mark Completed</Text>
-                )}
-              </TouchableOpacity>
             </View>
           </View>
         </MapLibreRN.PointAnnotation>
@@ -141,6 +143,32 @@ const MarkerItem = ({
                   {marker.name}
                 </Text>
               </View>
+
+              <TouchableOpacity
+                style={[
+                  styles.calloutButton,
+                  (marker.visited === 1 &&
+                    token && {
+                      backgroundColor: Colors.WHITE,
+                      borderWidth: 1,
+                      borderColor: Colors.BORDER_LIGHT
+                    }) ||
+                    {}
+                ]}
+                onPressIn={() => toggleSeries(marker)}
+              >
+                {marker?.visited === 1 && token ? (
+                  <View style={styles.completedContainer}>
+                    <CheckSvg width={14} height={14} fill={Colors.DARK_BLUE} />
+                    <Text style={[styles.calloutButtonText, { color: Colors.DARK_BLUE }]}>
+                      Completed
+                    </Text>
+                  </View>
+                ) : (
+                  <Text style={styles.calloutButtonText}>Mark Completed</Text>
+                )}
+              </TouchableOpacity>
+
               {parsedAvatars && (
                 <TouchableOpacity
                   onPressIn={() => {
@@ -173,30 +201,6 @@ const MarkerItem = ({
                   </View>
                 </TouchableOpacity>
               )}
-              <TouchableOpacity
-                style={[
-                  styles.calloutButton,
-                  (marker.visited === 1 &&
-                    token && {
-                      backgroundColor: Colors.WHITE,
-                      borderWidth: 1,
-                      borderColor: Colors.BORDER_LIGHT
-                    }) ||
-                    {}
-                ]}
-                onPressIn={() => toggleSeries(marker)}
-              >
-                {marker?.visited === 1 && token ? (
-                  <View style={styles.completedContainer}>
-                    <CheckSvg width={14} height={14} fill={Colors.DARK_BLUE} />
-                    <Text style={[styles.calloutButtonText, { color: Colors.DARK_BLUE }]}>
-                      Completed
-                    </Text>
-                  </View>
-                ) : (
-                  <Text style={styles.calloutButtonText}>Mark Completed</Text>
-                )}
-              </TouchableOpacity>
             </View>
           </View>
         </MapLibreRN.MarkerView>

src/screens/InAppScreens/MapScreen/MarkerItem/styles.tsx

@@ -84,7 +84,8 @@ export const styles = StyleSheet.create({
     borderRadius: 6,
     height: 30,
     alignItems: 'center',
-    justifyContent: 'center'
+    justifyContent: 'center',
+    marginBottom: 12
   },
   calloutButtonText: {
     color: 'white',
@@ -117,8 +118,7 @@ export const styles = StyleSheet.create({
   },
   userImageContainer: {
     flexDirection: 'row',
-    alignItems: 'center',
-    marginBottom: 12
+    alignItems: 'center'
   },
   userImageSmall: {
     width: 28,