Few minor match screen UI updates (#2661)

* On top suggestion change scroll top top

* Change top Divider to use a card look instead

* Show photo count in case of multiple photos

src/components/Match/Match.js

@@ -4,7 +4,7 @@ import LocationSection
 import MapSection
   from "components/ObsDetailsDefaultMode/MapSection/MapSection";
 import {
-  ActivityIndicator, Button, Divider, ScrollViewWrapper
+  ActivityIndicator, Button, ScrollViewWrapper
 } from "components/SharedComponents";
 import { View } from "components/styledComponents";
 import _ from "lodash";
@@ -18,6 +18,9 @@ import MatchHeader from "./MatchHeader";
 import PhotosSection from "./PhotosSection";
 import SaveDiscardButtons from "./SaveDiscardButtons";
 
+const cardClassTop = "rounded-t-2xl border-lightGray border-[2px] p-4 border-b-0 -mb-0.5";
+const cardClassBottom = "rounded-b-2xl border-lightGray border-[2px] pb-3 border-t-0 -mt-0.5 mb-4";
+
 type Props = {
   observation: Object,
   obsPhotos: Array<Object>,
@@ -27,7 +30,8 @@ type Props = {
   topSuggestion: Object,
   otherSuggestions: Array<Object>,
   suggestionsLoading: boolean,
-  onSuggestionChosen: ( ) => void
+  onSuggestionChosen: ( ) => void,
+  scrollRef: Object
 }
 
 const Match = ( {
@@ -39,7 +43,8 @@ const Match = ( {
   topSuggestion,
   otherSuggestions,
   suggestionsLoading,
-  onSuggestionChosen
+  onSuggestionChosen,
+  scrollRef
 }: Props ) => {
   const { t } = useTranslation( );
   const { isConnected } = useNetInfo( );
@@ -49,9 +54,8 @@ const Match = ( {
 
   return (
     <>
-      <ScrollViewWrapper>
-        <Divider />
-        <View className="p-5">
+      <ScrollViewWrapper scrollRef={scrollRef}>
+        <View className={cardClassTop}>
           {
             suggestionsLoading
               ? (
@@ -78,6 +82,7 @@ const Match = ( {
             ? handleLocationPickerPressed
             : null}
         />
+        <View className={cardClassBottom} />
         <View className="pt-2">
           {
             isConnected && (

src/components/Match/MatchContainer.js

@@ -72,6 +72,7 @@ const { useRealm } = RealmContext;
 
 const MatchContainer = ( ) => {
   const hasLoadedRef = useRef( false );
+  const scrollRef = useRef( null );
   const currentObservation = useStore( state => state.currentObservation );
   const getCurrentObservation = useStore( state => state.getCurrentObservation );
   const cameraRollUris = useStore( state => state.cameraRollUris );
@@ -152,6 +153,12 @@ const MatchContainer = ( ) => {
     onlineSuggestionsAttempted
   } );
 
+  const scrollToTop = useCallback( ( ) => {
+    if ( scrollRef.current ) {
+      scrollRef.current.scrollTo( { y: 0, animated: true } );
+    }
+  }, [] );
+
   const onSuggestionChosen = useCallback( selection => {
     const suggestionsList = [...orderedSuggestions];
 
@@ -177,9 +184,9 @@ const MatchContainer = ( ) => {
         orderedSuggestions: sortedList
       } );
     }
-    // TODO: scroll to top of screen
+    scrollToTop( );
     // TODO: should this set owners_identification_from_vision: false?
-  }, [orderedSuggestions] );
+  }, [orderedSuggestions, scrollToTop] );
 
   const createUploadParams = useCallback( async ( uri, showLocation ) => {
     const newImageParams = await flattenUploadParams( uri );
@@ -274,6 +281,7 @@ const MatchContainer = ( ) => {
         topSuggestion={topSuggestion}
         otherSuggestions={otherSuggestions}
         suggestionsLoading={suggestionsLoading}
+        scrollRef={scrollRef}
       />
       {renderPermissionsGate( { onPermissionGranted: openLocationPicker } )}
     </>

src/components/Match/PhotosSection.js

@@ -1,5 +1,8 @@
 import classnames from "classnames";
 import MediaViewerModal from "components/MediaViewer/MediaViewerModal";
+import {
+  PhotoCount
+} from "components/SharedComponents";
 import {
   Image, Pressable, View
 } from "components/styledComponents";
@@ -76,6 +79,12 @@ const PhotosSection = ( {
         className="w-full h-full"
         accessibilityIgnoresInvertColors
       />
+      {observationPhotos.length > 1 && (
+        <View className="absolute bottom-5 left-5">
+          <PhotoCount count={observationPhotos.length} />
+        </View>
+      )}
+
     </Pressable>
   );
 

src/components/ObsDetailsDefaultMode/LocationSection/LocationSection.tsx

@@ -1,4 +1,3 @@
-import classnames from "classnames";
 import {
   DateDisplay,
   Heading5,
@@ -28,10 +27,8 @@ const LocationSection = ( {
   const geoprivacy = observation?.geoprivacy;
   const taxonGeoprivacy = observation?.taxon_geoprivacy;
 
-  const cardClass = "rounded-b-2xl border-lightGray border-[2px] pb-3 border-t-0 -mx-0.5";
-
   return (
-    <View className="pt-1 pb-5">
+    <View className="py-1">
       <View className="m-4">
         <Heading5 className="mb-2">
           {t( "OBSERVED-IN--label" )}
@@ -67,7 +64,6 @@ const LocationSection = ( {
           />
         ) }
       </View>
-      <View className={classnames( cardClass )} />
     </View>
   );
 };

src/components/SharedComponents/ScrollViewWrapper.js

@@ -7,7 +7,8 @@ import { Keyboard, StatusBar } from "react-native";
 type Props = {
   children: React.Node,
   testID?: string,
-  style?: Object
+  style?: Object,
+  scrollRef?: Object,
 };
 
 const CONTENT_CONTAINER_STYLE = {
@@ -18,7 +19,8 @@ const CONTENT_CONTAINER_STYLE = {
 const ScrollViewWrapper = ( {
   children,
   testID,
-  style
+  style,
+  scrollRef
 }: Props ): React.Node => {
   const dismissKeyboard = () => Keyboard.dismiss();
 
@@ -26,6 +28,7 @@ const ScrollViewWrapper = ( {
     <SafeAreaView className="flex-1 bg-white" style={style} testID={testID}>
       <StatusBar barStyle="dark-content" backgroundColor="white" />
       <ScrollView
+        ref={scrollRef}
         keyboardDismissMode="on-drag"
         onScroll={dismissKeyboard}
         scrollEventThrottle={16}