From 67a8fdb2e2f12cf9320c2915537c905f96afb547 Mon Sep 17 00:00:00 2001
From: Angie Ta <angie@inaturalist.org>
Date: Wed, 19 Apr 2023 17:36:33 -0700
Subject: [PATCH 01/27] PhotoScrool styling and header styling

---
 src/components/ObsDetails/ActivityHeader.js    |  8 ++++++--
 src/components/ObsDetails/ActivityItem.js      |  2 +-
 src/components/ObsDetails/ObsDetails.js        |  4 ++--
 src/components/ObsDetails/TaxonImage.js        |  6 +++++-
 src/components/SharedComponents/PhotoScroll.js | 10 ++++++----
 5 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/src/components/ObsDetails/ActivityHeader.js b/src/components/ObsDetails/ActivityHeader.js
index b14b9ebab..9050b4160 100644
--- a/src/components/ObsDetails/ActivityHeader.js
+++ b/src/components/ObsDetails/ActivityHeader.js
@@ -2,6 +2,7 @@
 
 import { useQueryClient } from "@tanstack/react-query";
 import { deleteComments } from "api/comments";
+import classnames from "classnames";
 import { isCurrentUser } from "components/LoginSignUp/AuthenticationService";
 import FlagItemModal from "components/ObsDetails/FlagItemModal";
 import { Body4, INatIcon, InlineUser } from "components/SharedComponents";
@@ -26,9 +27,12 @@ type Props = {
   item: Object,
   refetchRemoteObservation?: Function,
   toggleRefetch?: Function,
+  classNameMargin?: string
 }
 
-const ActivityHeader = ( { item, refetchRemoteObservation, toggleRefetch }:Props ): Node => {
+const ActivityHeader = ( {
+  item, refetchRemoteObservation, toggleRefetch, classNameMargin
+}:Props ): Node => {
   const [currentUser, setCurrentUser] = useState( null );
   const [kebabMenuVisible, setKebabMenuVisible] = useState( false );
   const [flagModalVisible, setFlagModalVisible] = useState( false );
@@ -151,7 +155,7 @@ const ActivityHeader = ( { item, refetchRemoteObservation, toggleRefetch }:Props
   );
 
   return (
-    <View className="flex-row justify-between">
+    <View className={classnames( "flex-row justify-between", classNameMargin )}>
       <InlineUser user={user} />
       {( item._created_at )
         ? <DateDisplay dateString={item.created_at} />
diff --git a/src/components/ObsDetails/ActivityItem.js b/src/components/ObsDetails/ActivityItem.js
index 61be586bb..423ef94c8 100644
--- a/src/components/ObsDetails/ActivityItem.js
+++ b/src/components/ObsDetails/ActivityItem.js
@@ -56,7 +56,7 @@ const ActivityItem = ( {
       {taxon && (
         <View className="flex-row items-center justify-between mr-[23px]">
           <Pressable
-            className="flex-row my-[13.5px] items-center w-2/3"
+            className="flex-row mb-[13.5px] items-center w-2/3"
             onPress={navToTaxonDetails}
             accessibilityRole="link"
             accessibilityLabel={t( "Navigate-to-taxon-details" )}
diff --git a/src/components/ObsDetails/ObsDetails.js b/src/components/ObsDetails/ObsDetails.js
index ed1361ddc..8d7181b75 100644
--- a/src/components/ObsDetails/ObsDetails.js
+++ b/src/components/ObsDetails/ObsDetails.js
@@ -327,9 +327,9 @@ const ObsDetails = (): Node => {
   return (
     <>
       <ScrollViewWrapper testID={`ObsDetails.${uuid}`}>
-        <ActivityHeader item={observation} />
         {displayPhoto()}
-        <View className="flex-row my-5 justify-between mx-3">
+        <ActivityHeader item={observation} classNameMargin="mx-[15px] mt-[13px]" />
+        <View className="flex-row my-[11px] justify-between mx-3">
           {showTaxon()}
           <ObsStatus layout="vertical" observation={observation} />
         </View>
diff --git a/src/components/ObsDetails/TaxonImage.js b/src/components/ObsDetails/TaxonImage.js
index d8083014c..94af336d1 100644
--- a/src/components/ObsDetails/TaxonImage.js
+++ b/src/components/ObsDetails/TaxonImage.js
@@ -8,7 +8,11 @@ type Props = {
 }
 
 const TaxonImage = ( { uri }: Props ): React.Node => (
-  <Image source={uri} className="w-[62px] h-[62px] rounded-lg mr-3" />
+  <Image
+    source={uri}
+    className="w-[62px] h-[62px] rounded-lg mr-3"
+    accessibilityIgnoresInvertColors
+  />
 );
 
 export default TaxonImage;
diff --git a/src/components/SharedComponents/PhotoScroll.js b/src/components/SharedComponents/PhotoScroll.js
index 0d0c32948..822a86aac 100644
--- a/src/components/SharedComponents/PhotoScroll.js
+++ b/src/components/SharedComponents/PhotoScroll.js
@@ -1,6 +1,6 @@
 // @flow
 
-import { Image, Text } from "components/styledComponents";
+import { Image, Text, View } from "components/styledComponents";
 import * as React from "react";
 import { FlatList } from "react-native-gesture-handler";
 
@@ -20,16 +20,18 @@ const PhotoScroll = ( { photos }: Props ): React.Node => {
       : photo.localFilePath;
 
     return (
-      <>
+      <View>
         <Image
           testID="PhotoScroll.photo"
           source={{ uri: photoUrl }}
-          className="object-contain w-screen h-52"
+          className="h-56 w-screen"
+          resizeMode="contain"
+          accessibilityIgnoresInvertColors
         />
         <Text className="absolute bottom-5 right-5 text-white">
           {photo.licenseCode || photo.license_code}
         </Text>
-      </>
+      </View>
     );
   };
 

From 454be0edb1fe58a88d5f7dabb512766bb3882c04 Mon Sep 17 00:00:00 2001
From: Angie Ta <angie@inaturalist.org>
Date: Mon, 1 May 2023 19:04:59 -0700
Subject: [PATCH 02/27] Data Tab renamed to Details Tab, styling to match
 designs, changed text strings,

---
 src/components/ObsDetails/Attribution.js      |  13 +-
 src/components/ObsDetails/DataTab.js          |  80 ---------
 src/components/ObsDetails/DetailsTab.js       | 156 ++++++++++++++++++
 src/components/ObsDetails/ObsDetails.js       |  31 +++-
 src/components/SharedComponents/Geoprivacy.js |  35 ++++
 .../SharedComponents/ObservationLocation.js   |  56 +++++--
 src/i18n/l10n/en.ftl                          |  20 ++-
 src/i18n/l10n/en.ftl.json                     |  16 +-
 src/i18n/strings.ftl                          |  20 ++-
 src/navigation/BottomTabNavigator/index.js    |   1 +
 .../{DataTab.test.js => DetailsTab.test.js}   |   8 +-
 .../components/ObsDetails/ObsDetails.test.js  |   4 +-
 12 files changed, 298 insertions(+), 142 deletions(-)
 delete mode 100644 src/components/ObsDetails/DataTab.js
 create mode 100644 src/components/ObsDetails/DetailsTab.js
 create mode 100644 src/components/SharedComponents/Geoprivacy.js
 rename tests/unit/components/ObsDetails/{DataTab.test.js => DetailsTab.test.js} (86%)

diff --git a/src/components/ObsDetails/Attribution.js b/src/components/ObsDetails/Attribution.js
index d563edfe4..45cc0d461 100644
--- a/src/components/ObsDetails/Attribution.js
+++ b/src/components/ObsDetails/Attribution.js
@@ -1,7 +1,8 @@
 // @flow
 
-import { Text } from "components/styledComponents";
+import { Body4 } from "components/SharedComponents";
 import { t } from "i18next";
+import _ from "lodash";
 import type { Node } from "react";
 import React from "react";
 
@@ -13,25 +14,25 @@ type Props = {
 // https://github.com/inaturalist/inaturalist/blob/768b9263931ebeea229bbc47d8442ca6b0377d45/app/webpack/shared/components/observation_attribution.jsx
 const Attribution = ( { observation }: Props ): Node => {
   const { user } = observation;
-  const licenseCode = observation.license_code;
+  const licenseCode = _.upperCase( observation.license_code );
   const copyrightAttribution = user ? ( user.name || user.login ) : t( "unknown" );
 
   const renderLicenseCode = ( ) => {
     if ( !licenseCode ) {
       return t( "all-rights-reserved" );
     } if ( licenseCode === "cc0" ) {
-      return t( "no-rights-reserved" ) + licenseCode;
+      return `${t( "no-rights-reserved" )} ${licenseCode}`;
     }
-    return t( "some-rights-reserved" ) + licenseCode;
+    return `${t( "some-rights-reserved" )} ${licenseCode}`;
   };
 
   return (
-    <Text>
+    <Body4>
       {t( "Observation-Attribution", {
         attribution: copyrightAttribution,
         licenseCode: renderLicenseCode( )
       } )}
-    </Text>
+    </Body4>
   );
 };
 
diff --git a/src/components/ObsDetails/DataTab.js b/src/components/ObsDetails/DataTab.js
deleted file mode 100644
index cd687f3bd..000000000
--- a/src/components/ObsDetails/DataTab.js
+++ /dev/null
@@ -1,80 +0,0 @@
-// @flow
-
-import {
-  DateDisplay,
-  ObservationLocation
-} from "components/SharedComponents";
-import Map from "components/SharedComponents/Map";
-import { Text, View } from "components/styledComponents";
-import { t } from "i18next";
-import type { Node } from "react";
-import React from "react";
-import IconMaterial from "react-native-vector-icons/MaterialIcons";
-import useIsConnected from "sharedHooks/useIsConnected";
-
-import Attribution from "./Attribution";
-import checkCamelAndSnakeCase from "./helpers/checkCamelAndSnakeCase";
-
-type Props = {
-  observation: Object
-}
-
-const DataTab = ( { observation }: Props ): Node => {
-  const isOnline = useIsConnected( );
-  const application = observation?.application?.name;
-
-  return (
-    <>
-      <View className="px-5">
-        {observation.description && (
-          <>
-            <Text className="text-lg my-3">{t( "Notes" )}</Text>
-            <Text>{observation.description}</Text>
-          </>
-        )}
-        <Text className="text-lg my-3">{t( "Location" )}</Text>
-      </View>
-      {isOnline
-        ? (
-          <Map
-            obsLatitude={observation.latitude}
-            obsLongitude={observation.longitude}
-            mapHeight={150}
-          />
-        ) : (
-          <View className="h-16 items-center justify-center">
-            <IconMaterial
-              name="wifi-off"
-              size={30}
-              accessibilityRole="image"
-              accessibilityLabel={t( "Location-map-unavailable-without-internet" )}
-            />
-          </View>
-        )}
-      <View className="px-5">
-        <View className="my-3">
-          <ObservationLocation observation={observation} />
-        </View>
-        <Text className="text-lg my-3">{t( "Date" )}</Text>
-        <DateDisplay
-          label={t( "Date-observed-colon" )}
-          dateString={checkCamelAndSnakeCase( observation, "timeObservedAt" )}
-        />
-        <DateDisplay
-          label={t( "Date-uploaded-colon" )}
-          dateString={checkCamelAndSnakeCase( observation, "createdAt" )}
-        />
-        <Text className="text-lg my-3">{t( "Other-Data" )}</Text>
-        <Attribution observation={observation} />
-        {application && (
-          <>
-            <Text className="mt-5">{t( "This-observation-was-created-using" )}</Text>
-            <Text>{application}</Text>
-          </>
-        )}
-      </View>
-    </>
-  );
-};
-
-export default DataTab;
diff --git a/src/components/ObsDetails/DetailsTab.js b/src/components/ObsDetails/DetailsTab.js
new file mode 100644
index 000000000..1730b143a
--- /dev/null
+++ b/src/components/ObsDetails/DetailsTab.js
@@ -0,0 +1,156 @@
+// @flow
+
+import {
+  Body2,
+  Body4,
+  Button,
+  DateDisplay,
+  Heading4,
+  ObservationLocation,
+  QualityGradeStatus
+} from "components/SharedComponents";
+import KebabMenu from "components/SharedComponents/KebabMenu";
+import Map from "components/SharedComponents/Map";
+import { View } from "components/styledComponents";
+import { t } from "i18next";
+import _ from "lodash";
+import type { Node } from "react";
+import React, { useState } from "react";
+import { Divider, Menu } from "react-native-paper";
+import IconMaterial from "react-native-vector-icons/MaterialIcons";
+import useIsConnected from "sharedHooks/useIsConnected";
+
+import Attribution from "./Attribution";
+import checkCamelAndSnakeCase from "./helpers/checkCamelAndSnakeCase";
+
+type Props = {
+  observation: Object
+}
+
+const headingClass = "mt-[20px] mb-[11px] text-black";
+const sectionClass = "mx-[15px] mb-[20px]";
+
+const DetailsTab = ( { observation }: Props ): Node => {
+  const isOnline = useIsConnected( );
+  const application = observation?.application?.name;
+  const [locationKebabMenuVisible, setLocationKebabMenuVisible] = useState( false );
+
+  const displayQualityGradeOption = option => {
+    const qualityGrade = observation?.quality_grade;
+    const labelClassName = ( qualityGrade === option ) ? "font-bold" : "";
+
+    return (
+      <View className="flex-col space-y-[8px]">
+        <QualityGradeStatus qualityGrade={option} />
+        <Body4 className={labelClassName}>{_.startCase( _.camelCase( t( option ) ) )}</Body4>
+      </View>
+    );
+  };
+
+  return (
+    <>
+      {observation.description && (
+        <>
+          <View className={sectionClass}>
+            <Heading4 className={headingClass}>{t( "NOTES" )}</Heading4>
+            <Body2>{observation.description}</Body2>
+          </View>
+          <Divider bold />
+        </>
+      )}
+
+      <View className="flex-row justify-between items-center mt-[8px] mx-[15px]">
+        <Heading4>{t( "LOCATION" )}</Heading4>
+        <KebabMenu
+          visible={locationKebabMenuVisible}
+          setVisible={setLocationKebabMenuVisible}
+        >
+          <Menu.Item
+            onPress={async ( ) => {
+
+            }}
+            title={t( "Share-location" )}
+          />
+          <Menu.Item
+            onPress={async ( ) => {
+
+            }}
+            title={t( "Copy-coordinates" )}
+          />
+        </KebabMenu>
+      </View>
+      {isOnline
+        ? (
+          <Map
+            obsLatitude={observation.latitude}
+            obsLongitude={observation.longitude}
+            mapHeight={230}
+          />
+        ) : (
+          <View className="h-16 items-center justify-center">
+            <IconMaterial
+              name="wifi-off"
+              size={30}
+              accessibilityRole="image"
+              accessibilityLabel={t( "Location-map-unavailable-without-internet" )}
+            />
+          </View>
+        )}
+      <View className={`mt-[11px] ${sectionClass}`}>
+        <ObservationLocation observation={observation} details />
+      </View>
+      <Divider bold />
+
+      <View className={sectionClass}>
+        <Heading4 className={headingClass}>{t( "DATE" )}</Heading4>
+        <DateDisplay
+          classNameMargin="mb-[12px]"
+          label={t( "Observed" )}
+          dateString={checkCamelAndSnakeCase( observation, "timeObservedAt" )}
+        />
+        <DateDisplay
+          label={t( "Uploaded" )}
+          dateString={checkCamelAndSnakeCase( observation, "createdAt" )}
+        />
+      </View>
+      <Divider bold />
+
+      <View className={`${sectionClass} flex-col`}>
+        <Heading4 className={headingClass}>{t( "DATA-QUALITY" )}</Heading4>
+        <View className="space-y-[15px]">
+          <View className="flex-row justify-around">
+            {displayQualityGradeOption( "casual" )}
+            {displayQualityGradeOption( "needs_id" )}
+            {displayQualityGradeOption( "research" )}
+          </View>
+          <Body4>
+            {t( "This observation needs more identifications to reach research grade" )}
+          </Body4>
+          <Button text={t( "VIEW DATA QUALITY ASSESSEMENT" )} />
+        </View>
+      </View>
+      <Divider bold />
+
+      <View className={sectionClass}>
+        <Heading4 className={headingClass}>{t( "PROJECTS" )}</Heading4>
+        <Button text={t( "VIEW PROJECTS" )} />
+      </View>
+
+      <Divider bold />
+
+      <View className={`${sectionClass} space-y-[11px]`}>
+        <Heading4 className={headingClass}>{t( "OTHER-DATA" )}</Heading4>
+        <Attribution observation={observation} />
+        {application && (
+          <View className="flex-row">
+            <Body4>{t( "Uploaded-via" )}</Body4>
+            <Body4>{application}</Body4>
+          </View>
+        )}
+        <Body4>{t( "View in Browser" )}</Body4>
+      </View>
+    </>
+  );
+};
+
+export default DetailsTab;
diff --git a/src/components/ObsDetails/ObsDetails.js b/src/components/ObsDetails/ObsDetails.js
index 8d7181b75..99ac43871 100644
--- a/src/components/ObsDetails/ObsDetails.js
+++ b/src/components/ObsDetails/ObsDetails.js
@@ -43,7 +43,7 @@ import colors from "styles/tailwindColors";
 
 import ActivityTab from "./ActivityTab";
 import AddCommentModal from "./AddCommentModal";
-import DataTab from "./DataTab";
+import DetailsTab from "./DetailsTab";
 
 const { useRealm } = RealmContext;
 
@@ -55,7 +55,7 @@ LogBox.ignoreLogs( [
 ] );
 
 const ACTIVITY_TAB_ID = "ACTIVITY";
-const DATA_TAB_ID = "DATA";
+const DETAILS_TAB_ID = "DETAILS";
 
 const ObsDetails = (): Node => {
   const isOnline = useIsConnected();
@@ -265,10 +265,10 @@ const ObsDetails = (): Node => {
       text: t( "ACTIVITY" )
     },
     {
-      id: DATA_TAB_ID,
-      testID: "ObsDetails.DataTab",
-      onPress: () => setCurrentTabId( DATA_TAB_ID ),
-      text: t( "DATA" )
+      id: DETAILS_TAB_ID,
+      testID: "ObsDetails.DetailsTab",
+      onPress: () => setCurrentTabId( DETAILS_TAB_ID ),
+      text: t( "DETAILS" )
     }
   ];
 
@@ -306,6 +306,19 @@ const ObsDetails = (): Node => {
                 : t( "Fave-button-label-fave" )
             }
           />
+          <IconButton
+            icon="chevron-left"
+            onPress={faveOrUnfave}
+            textColor={colors.white}
+            className="absolute top-3 left-0"
+            accessible
+            accessibilityRole="button"
+            accessibilityLabel={
+              currentUserFaved
+                ? t( "Fave-button-label-unfave" )
+                : t( "Fave-button-label-fave" )
+            }
+          />
         </View>
       );
     }
@@ -323,7 +336,7 @@ const ObsDetails = (): Node => {
       </View>
     );
   };
-
+  console.log( "observation", observation );
   return (
     <>
       <ScrollViewWrapper testID={`ObsDetails.${uuid}`}>
@@ -347,8 +360,8 @@ const ObsDetails = (): Node => {
             showCommentBox={showCommentBox}
           />
         </HideView>
-        <HideView noInitialRender show={currentTabId === DATA_TAB_ID}>
-          <DataTab observation={observation} />
+        <HideView noInitialRender show={currentTabId === DETAILS_TAB_ID}>
+          <DetailsTab observation={observation} />
         </HideView>
         {addingComment && (
           <View className="flex-row items-center justify-center">
diff --git a/src/components/SharedComponents/Geoprivacy.js b/src/components/SharedComponents/Geoprivacy.js
new file mode 100644
index 000000000..ae547eded
--- /dev/null
+++ b/src/components/SharedComponents/Geoprivacy.js
@@ -0,0 +1,35 @@
+// @flow
+import checkCamelAndSnakeCase from "components/ObsDetails/helpers/checkCamelAndSnakeCase";
+import { Body4, INatIcon } from "components/SharedComponents";
+import { View } from "components/styledComponents";
+import * as React from "react";
+import useTranslation from "sharedHooks/useTranslation";
+
+type Props = {
+  observation: Object,
+};
+
+const Geoprivacy = ( { observation }: Props ): React.Node => {
+  const { t } = useTranslation( );
+
+  let geoprivacy = checkCamelAndSnakeCase( observation, "geoprivacy" );
+
+  if ( !geoprivacy ) {
+    geoprivacy = t( "No-Location" );
+  }
+
+  return (
+    <View className="flex-row mt-[11px]">
+      <INatIcon name="globe-outline" size={14} />
+      <Body4
+        className="text-darkGray ml-[5px]"
+        numberOfLines={1}
+        ellipsizeMode="tail"
+      >
+        {geoprivacy}
+      </Body4>
+    </View>
+  );
+};
+
+export default Geoprivacy;
diff --git a/src/components/SharedComponents/ObservationLocation.js b/src/components/SharedComponents/ObservationLocation.js
index f2ed7e477..8ab54efdf 100644
--- a/src/components/SharedComponents/ObservationLocation.js
+++ b/src/components/SharedComponents/ObservationLocation.js
@@ -1,47 +1,67 @@
 // @flow
 import classNames from "classnames";
 import checkCamelAndSnakeCase from "components/ObsDetails/helpers/checkCamelAndSnakeCase";
-import { Body4, INatIcon } from "components/SharedComponents";
+import Geoprivacy, { Body4, INatIcon } from "components/SharedComponents";
 import { View } from "components/styledComponents";
 import * as React from "react";
 import useTranslation from "sharedHooks/useTranslation";
 
 type Props = {
   observation: Object,
-  classNameMargin?: string
+  classNameMargin?: string,
+  details?:boolean
 };
 
-const ObservationLocation = ( { observation, classNameMargin }: Props ): React.Node => {
+const ObservationLocation = ( { observation, classNameMargin, details }: Props ): React.Node => {
   const { t } = useTranslation( );
 
   let displayLocation = checkCamelAndSnakeCase( observation, "placeGuess" );
-  if (
-    !displayLocation
-    && ( observation?.latitude !== null && observation?.latitude !== undefined )
+  let displayCoords = "";
+  const geoprivacy = checkCamelAndSnakeCase( observation, "geoprivacy" );
+
+  if ( !displayLocation ) {
+    displayLocation = t( "No-Location" );
+  }
+  if ( ( observation?.latitude !== null && observation?.latitude !== undefined )
     && ( observation?.longitude != null && observation?.longitude !== undefined )
   ) {
-    displayLocation = `${observation.latitude}, ${observation.longitude}`;
-  } else if ( !displayLocation ) {
-    displayLocation = t( "Missing-Location" );
+    displayCoords = `Lat: ${observation.latitude}, Lon: ${observation.longitude}`;
   }
 
   return (
     <View
-      className={classNames( "flex flex-row items-center", classNameMargin )}
+      className={classNames( "flex flex-col", classNameMargin )}
       accessible
       accessibilityLabel={t( "Location" )}
       accessibilityValue={{
         text: displayLocation
       }}
     >
-      <INatIcon name="location" size={13} />
-      <Body4
-        className="text-darkGray ml-[5px]"
-        numberOfLines={1}
-        ellipsizeMode="tail"
-      >
-        {displayLocation}
-      </Body4>
+      <View className="flex-row">
+        <INatIcon name="location" size={15} />
+        <Body4
+          className="text-darkGray ml-[8px]"
+          numberOfLines={1}
+          ellipsizeMode="tail"
+        >
+          {displayLocation}
+        </Body4>
+      </View>
+      {details
+        && (
+          <View className="flex-col">
+            {displayCoords && (
+              <Body4
+                className="text-darkGray ml-[23px] mt-[12px]"
+                numberOfLines={1}
+                ellipsizeMode="tail"
+              >
+                {displayCoords}
+              </Body4>
+            )}
+            {geoprivacy && <Geoprivacy observation={observation} />}
+          </View>
+        )}
     </View>
   );
 };
diff --git a/src/i18n/l10n/en.ftl b/src/i18n/l10n/en.ftl
index ecb6c3bf6..e0e5b2643 100644
--- a/src/i18n/l10n/en.ftl
+++ b/src/i18n/l10n/en.ftl
@@ -85,6 +85,8 @@ Connected-Accounts = Connected Accounts
 
 Content-Display = Content & Display
 
+Copy-coordinates = Copy Coordinates
+
 Couldnt-create-comment = Couldn't create comment
 
 Couldnt-create-identification = Couldn't create identification
@@ -99,10 +101,6 @@ Date-added-newest-to-oldest = Date added - newest to oldest
 
 Date-added-oldest-to-newest = Date added - oldest to newest
 
-Date-observed-colon = Date observed:
-
-Date-uploaded-colon = Date uploaded:
-
 Default-Search-Place = Default Search Place
 
 Delete = Delete
@@ -339,12 +337,14 @@ Obscured = Obscured
 
 Observation = Observation
 
-Observation-Attribution = Observation © {$attribution} · {$licenseCode}
+Observation-Attribution = Observation Copyright:© {$attribution} · {$licenseCode}
 
 Observations = Observations
 
 Observations-created-on-iNaturalist = Observations created on iNaturalist are used by scientists around the world.
 
+Observed = Observed
+
 Offensive-Inappropriate = Offensive/Inappropriate
 
 Offensive-Inappropriate-Examples = Misleading or illegal content, racial or ethnic slurs, etc. For more on our defintion of "appropriate," see the FAQ.
@@ -530,6 +530,8 @@ Settings = Settings
 
 SHARE-DEBUG-LOGS = SHARE DEBUG LOGS
 
+Share-location = Share Location
+
 Sign-out = Sign out
 
 Sign-Up = Sign Up
@@ -568,9 +570,6 @@ The-iNaturalist-Network-is-a-collection-of-localized-websites = The iNaturalist
 
 This-is-how-all-taxon-names-will-be-displayed-to-you-across-iNaturalist = This is how all taxon names will be displayed to you across iNaturalist
 
-# Describes whether a user made this observation from web, iOS, or Android
-This-observation-was-created-using = This observation was created using:
-
 This-sets-your-language-and-date-formatting-preferences-across-iNaturalist = This sets your language and date formatting preferences across iNaturalist based on your locale.
 
 This-will-be-your-default-place-for-all-searches-in-Explore-and-Identify = This will be your default place for all searches in Explore and Identify.
@@ -607,6 +606,11 @@ UPLOAD-X-OBSERVATIONS = UPLOAD {$count ->
     *[other] {$count} OBSERVATIONS
 }
 
+Uploaded = Uploaded
+
+# Describes whether a user made this observation from web, iOS, or Android
+Uploaded-via = Uploaded via:
+
 # Shows the number of observations a user is currently uploading on my observations page
 Uploading-X-Observations = Uploading {$count ->
     [one] 1 Observation
diff --git a/src/i18n/l10n/en.ftl.json b/src/i18n/l10n/en.ftl.json
index 44ba310d2..a020bd081 100644
--- a/src/i18n/l10n/en.ftl.json
+++ b/src/i18n/l10n/en.ftl.json
@@ -64,6 +64,7 @@
   "Community-Moderation-Settings": "Community Moderation Settings",
   "Connected-Accounts": "Connected Accounts",
   "Content-Display": "Content & Display",
+  "Copy-coordinates": "Copy Coordinates",
   "Couldnt-create-comment": "Couldn't create comment",
   "Couldnt-create-identification": "Couldn't create identification",
   "Create-an-iNaturalist-account-to-save-your-observations": "Create an iNaturalist account to save your observations and contribute them to science.",
@@ -71,8 +72,6 @@
   "Date": "Date",
   "Date-added-newest-to-oldest": "Date added - newest to oldest",
   "Date-added-oldest-to-newest": "Date added - oldest to newest",
-  "Date-observed-colon": "Date observed:",
-  "Date-uploaded-colon": "Date uploaded:",
   "Default-Search-Place": "Default Search Place",
   "Delete": "Delete",
   "Delete-comment": "Delete comment",
@@ -237,9 +236,10 @@
   "Notifications": "Notifications",
   "Obscured": "Obscured",
   "Observation": "Observation",
-  "Observation-Attribution": "Observation © { $attribution } · { $licenseCode }",
+  "Observation-Attribution": "Observation Copyright:© { $attribution } · { $licenseCode }",
   "Observations": "Observations",
   "Observations-created-on-iNaturalist": "Observations created on iNaturalist are used by scientists around the world.",
+  "Observed": "Observed",
   "Offensive-Inappropriate": "Offensive/Inappropriate",
   "Offensive-Inappropriate-Examples": "Misleading or illegal content, racial or ethnic slurs, etc. For more on our defintion of \"appropriate,\" see the FAQ.",
   "Open": "Open",
@@ -353,6 +353,7 @@
   "Separate-Photos": "Separate Photos",
   "Settings": "Settings",
   "SHARE-DEBUG-LOGS": "SHARE DEBUG LOGS",
+  "Share-location": "Share Location",
   "Sign-out": "Sign out",
   "Sign-Up": "Sign Up",
   "SIMILAR-SPECIES-header": {
@@ -382,10 +383,6 @@
   "Taxonomy-Settings": "Taxonomy Settings",
   "The-iNaturalist-Network-is-a-collection-of-localized-websites": "The iNaturalist Network is a collection of localized websites that are fully connected to the global iNaturalist community. Network sites are supported by local institutions that have signed an agreement with iNaturalist to promote local use and benefit local biodiversity. They have access to true coordinates from their countries that are automatically obscured from public view in order to protect threatened species. Your username and password works on all sites that are part of the iNaturalist Network. If you choose to affiliate with a Network site, the local institutions that operate each site will also have access to your email address (only to communicate with you about site activities) and access to the true coordinates for observations that are publicly obscured or private. Note: Please do not experimentally change your affiliation if you have more than 1000 observations.",
   "This-is-how-all-taxon-names-will-be-displayed-to-you-across-iNaturalist": "This is how all taxon names will be displayed to you across iNaturalist",
-  "This-observation-was-created-using": {
-    "comment": "Describes whether a user made this observation from web, iOS, or Android",
-    "val": "This observation was created using:"
-  },
   "This-sets-your-language-and-date-formatting-preferences-across-iNaturalist": "This sets your language and date formatting preferences across iNaturalist based on your locale.",
   "This-will-be-your-default-place-for-all-searches-in-Explore-and-Identify": "This will be your default place for all searches in Explore and Identify.",
   "Threatened": "Threatened",
@@ -406,6 +403,11 @@
     "comment": "Shows the number of observations a user can upload to iNat from my observations page",
     "val": "UPLOAD { $count ->\n  [one] 1 OBSERVATION\n *[other] { $count } OBSERVATIONS\n}"
   },
+  "Uploaded": "Uploaded",
+  "Uploaded-via": {
+    "comment": "Describes whether a user made this observation from web, iOS, or Android",
+    "val": "Uploaded via:"
+  },
   "Uploading-X-Observations": {
     "comment": "Shows the number of observations a user is currently uploading on my observations page",
     "val": "Uploading { $count ->\n  [one] 1 Observation\n *[other] { $count } Observations\n}"
diff --git a/src/i18n/strings.ftl b/src/i18n/strings.ftl
index ecb6c3bf6..e0e5b2643 100644
--- a/src/i18n/strings.ftl
+++ b/src/i18n/strings.ftl
@@ -85,6 +85,8 @@ Connected-Accounts = Connected Accounts
 
 Content-Display = Content & Display
 
+Copy-coordinates = Copy Coordinates
+
 Couldnt-create-comment = Couldn't create comment
 
 Couldnt-create-identification = Couldn't create identification
@@ -99,10 +101,6 @@ Date-added-newest-to-oldest = Date added - newest to oldest
 
 Date-added-oldest-to-newest = Date added - oldest to newest
 
-Date-observed-colon = Date observed:
-
-Date-uploaded-colon = Date uploaded:
-
 Default-Search-Place = Default Search Place
 
 Delete = Delete
@@ -339,12 +337,14 @@ Obscured = Obscured
 
 Observation = Observation
 
-Observation-Attribution = Observation © {$attribution} · {$licenseCode}
+Observation-Attribution = Observation Copyright:© {$attribution} · {$licenseCode}
 
 Observations = Observations
 
 Observations-created-on-iNaturalist = Observations created on iNaturalist are used by scientists around the world.
 
+Observed = Observed
+
 Offensive-Inappropriate = Offensive/Inappropriate
 
 Offensive-Inappropriate-Examples = Misleading or illegal content, racial or ethnic slurs, etc. For more on our defintion of "appropriate," see the FAQ.
@@ -530,6 +530,8 @@ Settings = Settings
 
 SHARE-DEBUG-LOGS = SHARE DEBUG LOGS
 
+Share-location = Share Location
+
 Sign-out = Sign out
 
 Sign-Up = Sign Up
@@ -568,9 +570,6 @@ The-iNaturalist-Network-is-a-collection-of-localized-websites = The iNaturalist
 
 This-is-how-all-taxon-names-will-be-displayed-to-you-across-iNaturalist = This is how all taxon names will be displayed to you across iNaturalist
 
-# Describes whether a user made this observation from web, iOS, or Android
-This-observation-was-created-using = This observation was created using:
-
 This-sets-your-language-and-date-formatting-preferences-across-iNaturalist = This sets your language and date formatting preferences across iNaturalist based on your locale.
 
 This-will-be-your-default-place-for-all-searches-in-Explore-and-Identify = This will be your default place for all searches in Explore and Identify.
@@ -607,6 +606,11 @@ UPLOAD-X-OBSERVATIONS = UPLOAD {$count ->
     *[other] {$count} OBSERVATIONS
 }
 
+Uploaded = Uploaded
+
+# Describes whether a user made this observation from web, iOS, or Android
+Uploaded-via = Uploaded via:
+
 # Shows the number of observations a user is currently uploading on my observations page
 Uploading-X-Observations = Uploading {$count ->
     [one] 1 Observation
diff --git a/src/navigation/BottomTabNavigator/index.js b/src/navigation/BottomTabNavigator/index.js
index 2b1594311..d46edd959 100644
--- a/src/navigation/BottomTabNavigator/index.js
+++ b/src/navigation/BottomTabNavigator/index.js
@@ -228,6 +228,7 @@ const BottomTabs = () => {
           component={ObsDetails}
           options={{
             headerTitle: t( "Observation" ),
+            headerShown: false,
             unmountOnBlur: true
           }}
         />
diff --git a/tests/unit/components/ObsDetails/DataTab.test.js b/tests/unit/components/ObsDetails/DetailsTab.test.js
similarity index 86%
rename from tests/unit/components/ObsDetails/DataTab.test.js
rename to tests/unit/components/ObsDetails/DetailsTab.test.js
index 5a554f07c..087170011 100644
--- a/tests/unit/components/ObsDetails/DataTab.test.js
+++ b/tests/unit/components/ObsDetails/DetailsTab.test.js
@@ -1,5 +1,5 @@
 import { screen } from "@testing-library/react-native";
-import DataTab from "components/ObsDetails/DataTab";
+import DetailsTab from "components/ObsDetails/DetailsTab";
 import React from "react";
 import { View } from "react-native";
 
@@ -41,16 +41,16 @@ jest.mock( "components/SharedComponents/Map", () => ( {
   default: () => mockMap
 } ) );
 
-describe( "DataTab", ( ) => {
+describe( "DetailsTab", ( ) => {
   test( "should show description of observation", async ( ) => {
-    renderComponent( <DataTab observation={mockObservation} /> );
+    renderComponent( <DetailsTab observation={mockObservation} /> );
 
     const description = await screen.findByText( mockObservation.description );
     expect( description ).toBeTruthy( );
   } );
 
   test( "should display map if user is online", ( ) => {
-    renderComponent( <DataTab observation={mockObservation} /> );
+    renderComponent( <DetailsTab observation={mockObservation} /> );
 
     const map = screen.queryByTestId( "mock-map" );
     expect( map ).toBeTruthy( );
diff --git a/tests/unit/components/ObsDetails/ObsDetails.test.js b/tests/unit/components/ObsDetails/ObsDetails.test.js
index 4081bad92..9fbb47bac 100644
--- a/tests/unit/components/ObsDetails/ObsDetails.test.js
+++ b/tests/unit/components/ObsDetails/ObsDetails.test.js
@@ -66,7 +66,7 @@ jest.mock( "components/ObsDetails/ActivityTab" );
 jest.mock( "components/SharedComponents/PhotoScroll" );
 
 const mockDataTab = <View testID="mock-data-tab" />;
-jest.mock( "components/ObsDetails/DataTab", () => ( {
+jest.mock( "components/ObsDetails/DetailsTab", () => ( {
   __esModule: true,
   default: () => mockDataTab
 } ) );
@@ -115,7 +115,7 @@ describe( "ObsDetails", () => {
 
   it( "renders data tab on button press", async () => {
     renderComponent( <ObsDetails /> );
-    const button = await screen.findByTestId( "ObsDetails.DataTab" );
+    const button = await screen.findByTestId( "ObsDetails.DetailsTab" );
     expect( screen.queryByTestId( "mock-data-tab" ) ).not.toBeTruthy();
 
     fireEvent.press( button );

From 580720f3c62a0d309c4bcb9f470b9e71097c7130 Mon Sep 17 00:00:00 2001
From: Angie Ta <angie@inaturalist.org>
Date: Tue, 2 May 2023 22:52:52 -0700
Subject: [PATCH 03/27] Fixed failing tests for ObservationLocation, dividers
 added for activity item

---
 ios/Podfile.lock                                       |  2 +-
 src/components/ObsDetails/ActivityItem.js              |  2 ++
 src/components/ObsDetails/DetailsTab.js                | 10 +++++-----
 .../SharedComponents/ObservationLocation.test.js       |  9 +++++----
 4 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/ios/Podfile.lock b/ios/Podfile.lock
index a049dceb5..8fbbc5a66 100644
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@@ -765,4 +765,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: 1e393412e8a65a884dff99189d809b73ea234bcd
 
-COCOAPODS: 1.12.1
+COCOAPODS: 1.11.3
diff --git a/src/components/ObsDetails/ActivityItem.js b/src/components/ObsDetails/ActivityItem.js
index 5777bd79f..c8eb5582f 100644
--- a/src/components/ObsDetails/ActivityItem.js
+++ b/src/components/ObsDetails/ActivityItem.js
@@ -11,6 +11,7 @@ import { t } from "i18next";
 import _ from "lodash";
 import type { Node } from "react";
 import React from "react";
+import { Divider } from "react-native-paper";
 import IconMaterial from "react-native-vector-icons/MaterialIcons";
 import Taxon from "realmModels/Taxon";
 import useIsConnected from "sharedHooks/useIsConnected";
@@ -81,6 +82,7 @@ const ActivityItem = ( {
           <UserText baseStyle={textStyles.activityItemBody} text={item.body} />
         </View>
       )}
+      <Divider />
     </View>
   );
 };
diff --git a/src/components/ObsDetails/DetailsTab.js b/src/components/ObsDetails/DetailsTab.js
index 1730b143a..3a684a10b 100644
--- a/src/components/ObsDetails/DetailsTab.js
+++ b/src/components/ObsDetails/DetailsTab.js
@@ -55,7 +55,7 @@ const DetailsTab = ( { observation }: Props ): Node => {
             <Heading4 className={headingClass}>{t( "NOTES" )}</Heading4>
             <Body2>{observation.description}</Body2>
           </View>
-          <Divider bold />
+          <Divider />
         </>
       )}
 
@@ -99,7 +99,7 @@ const DetailsTab = ( { observation }: Props ): Node => {
       <View className={`mt-[11px] ${sectionClass}`}>
         <ObservationLocation observation={observation} details />
       </View>
-      <Divider bold />
+      <Divider />
 
       <View className={sectionClass}>
         <Heading4 className={headingClass}>{t( "DATE" )}</Heading4>
@@ -113,7 +113,7 @@ const DetailsTab = ( { observation }: Props ): Node => {
           dateString={checkCamelAndSnakeCase( observation, "createdAt" )}
         />
       </View>
-      <Divider bold />
+      <Divider />
 
       <View className={`${sectionClass} flex-col`}>
         <Heading4 className={headingClass}>{t( "DATA-QUALITY" )}</Heading4>
@@ -129,14 +129,14 @@ const DetailsTab = ( { observation }: Props ): Node => {
           <Button text={t( "VIEW DATA QUALITY ASSESSEMENT" )} />
         </View>
       </View>
-      <Divider bold />
+      <Divider />
 
       <View className={sectionClass}>
         <Heading4 className={headingClass}>{t( "PROJECTS" )}</Heading4>
         <Button text={t( "VIEW PROJECTS" )} />
       </View>
 
-      <Divider bold />
+      <Divider />
 
       <View className={`${sectionClass} space-y-[11px]`}>
         <Heading4 className={headingClass}>{t( "OTHER-DATA" )}</Heading4>
diff --git a/tests/unit/components/SharedComponents/ObservationLocation.test.js b/tests/unit/components/SharedComponents/ObservationLocation.test.js
index 87b577ef1..79e641f3f 100644
--- a/tests/unit/components/SharedComponents/ObservationLocation.test.js
+++ b/tests/unit/components/SharedComponents/ObservationLocation.test.js
@@ -25,7 +25,7 @@ const testData = [
       longitude,
       place_guess: null
     },
-    `${latitude}, ${longitude}`
+    `Lat: ${latitude}, Lon: ${longitude}`
   ],
   [
     "should handle latitude/longitude w/ zero",
@@ -34,7 +34,7 @@ const testData = [
       longitude: 0,
       place_guess: null
     },
-    "0, 0"
+    "Lat: 0, Lon: 0"
   ],
   [
     "should show no location if unknown",
@@ -43,7 +43,7 @@ const testData = [
       longitude: null,
       place_guess: null
     },
-    "Missing Location"
+    "No Location"
   ]
 ];
 
@@ -63,8 +63,9 @@ describe( "ObservationLocation", () => {
     const mockObservation = factory( "RemoteObservation", obsData );
 
     render(
-      <ObservationLocation observation={mockObservation} />
+      <ObservationLocation observation={mockObservation} details />
     );
+
     expect( await screen.findByText( expectedResult ) ).toBeTruthy();
   } );
 } );

From d9b430576f3c1f4eddb27a1137b4349ba91b7cd5 Mon Sep 17 00:00:00 2001
From: Angie Ta <angie@inaturalist.org>
Date: Tue, 2 May 2023 23:20:08 -0700
Subject: [PATCH 04/27] Moved geoprivacy to ObservationLocation, removed
 console logs

---
 src/components/ObsDetails/ObsDetails.js         |  1 -
 .../SharedComponents/ObservationLocation.js     | 17 +++++++++++++++--
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/components/ObsDetails/ObsDetails.js b/src/components/ObsDetails/ObsDetails.js
index b149c48e0..897e8b0f5 100644
--- a/src/components/ObsDetails/ObsDetails.js
+++ b/src/components/ObsDetails/ObsDetails.js
@@ -335,7 +335,6 @@ const ObsDetails = (): Node => {
       </View>
     );
   };
-  console.log( "observation", observation );
   return (
     <>
       <ScrollViewWrapper testID={`ObsDetails.${uuid}`}>
diff --git a/src/components/SharedComponents/ObservationLocation.js b/src/components/SharedComponents/ObservationLocation.js
index 8ab54efdf..d11477b25 100644
--- a/src/components/SharedComponents/ObservationLocation.js
+++ b/src/components/SharedComponents/ObservationLocation.js
@@ -1,7 +1,7 @@
 // @flow
 import classNames from "classnames";
 import checkCamelAndSnakeCase from "components/ObsDetails/helpers/checkCamelAndSnakeCase";
-import Geoprivacy, { Body4, INatIcon } from "components/SharedComponents";
+import { Body4, INatIcon } from "components/SharedComponents";
 import { View } from "components/styledComponents";
 import * as React from "react";
 import useTranslation from "sharedHooks/useTranslation";
@@ -28,6 +28,19 @@ const ObservationLocation = ( { observation, classNameMargin, details }: Props )
     displayCoords = `Lat: ${observation.latitude}, Lon: ${observation.longitude}`;
   }
 
+  const displayGeoprivacy = ( ) => (
+    <View className="flex-row mt-[11px]">
+      <INatIcon name="globe-outline" size={14} />
+      <Body4
+        className="text-darkGray ml-[5px]"
+        numberOfLines={1}
+        ellipsizeMode="tail"
+      >
+        {geoprivacy}
+      </Body4>
+    </View>
+  );
+
   return (
     <View
       className={classNames( "flex flex-col", classNameMargin )}
@@ -59,7 +72,7 @@ const ObservationLocation = ( { observation, classNameMargin, details }: Props )
                 {displayCoords}
               </Body4>
             )}
-            {geoprivacy && <Geoprivacy observation={observation} />}
+            {geoprivacy && displayGeoprivacy()}
           </View>
         )}
     </View>

From 04e6ef734307dbfd38e6575618752d387dea31b0 Mon Sep 17 00:00:00 2001
From: Angie Ta <angie@inaturalist.org>
Date: Wed, 3 May 2023 23:19:02 -0700
Subject: [PATCH 05/27] Moved suggest id and add comment buttons out of
 activity tab, added stickybar, PhotoScroll buttons, back button

---
 src/components/ObsDetails/ActivityTab.js      |  92 +-----------
 src/components/ObsDetails/ObsDetails.js       | 133 +++++++++++++++---
 .../SharedComponents/PhotoScroll.js           |   7 +-
 .../BottomTabNavigator/CustomTabBar.js        |   4 +-
 4 files changed, 118 insertions(+), 118 deletions(-)

diff --git a/src/components/ObsDetails/ActivityTab.js b/src/components/ObsDetails/ActivityTab.js
index 8d514f6cd..b26d5ecfa 100644
--- a/src/components/ObsDetails/ActivityTab.js
+++ b/src/components/ObsDetails/ActivityTab.js
@@ -1,65 +1,27 @@
 // @flow
-import { useNavigation } from "@react-navigation/native";
-import createIdentification from "api/identifications";
-import { Button } from "components/SharedComponents";
 import { Text, View } from "components/styledComponents";
-import { formatISO } from "date-fns";
 import { t } from "i18next";
 import * as React from "react";
 import { useEffect, useState } from "react";
-import { Alert } from "react-native";
-import useAuthenticatedMutation from "sharedHooks/useAuthenticatedMutation";
 import useCurrentUser from "sharedHooks/useCurrentUser";
 
 import ActivityItem from "./ActivityItem";
 
 type Props = {
-  uuid:string,
   observation:Object,
   comments:Array<Object>,
   navToTaxonDetails: Function,
   toggleRefetch: Function,
   refetchRemoteObservation: Function,
-  openCommentBox: Function,
-  showCommentBox:boolean
 }
 
 const ActivityTab = ( {
-  uuid, observation, comments, navToTaxonDetails,
-  toggleRefetch, refetchRemoteObservation, openCommentBox, showCommentBox
+  observation, comments, navToTaxonDetails,
+  toggleRefetch, refetchRemoteObservation
 }: Props ): React.Node => {
   const currentUser = useCurrentUser( );
   const userId = currentUser?.id;
   const [ids, setIds] = useState<Array<Object>>( [] );
-  const navigation = useNavigation( );
-
-  const showErrorAlert = error => Alert.alert(
-    "Error",
-    error,
-    [{ text: t( "OK" ) }],
-    {
-      cancelable: true
-    }
-  );
-
-  const createIdentificationMutation = useAuthenticatedMutation(
-    ( idParams, optsWithAuth ) => createIdentification( idParams, optsWithAuth ),
-    {
-      onSuccess: data => setIds( [...ids, data[0]] ),
-      onError: e => {
-        let error = null;
-        if ( e ) {
-          error = t( "Couldnt-create-identification", { error: e.message } );
-        } else {
-          error = t( "Couldnt-create-identification", { error: t( "Unknown-error" ) } );
-        }
-
-        // Remove temporary ID and show error
-        setIds( [...ids] );
-        showErrorAlert( error );
-      }
-    }
-  );
 
   useEffect( ( ) => {
     // set initial ids for activity tab
@@ -75,38 +37,6 @@ const ActivityTab = ( {
     return <Text>{t( "No-comments-or-ids-to-display" )}</Text>;
   }
 
-  const onIDAdded = async identification => {
-    // Add temporary ID to observation.identifications ("ghosted" ID, while we're trying to add it)
-    const newId = {
-      body: identification.body,
-      taxon: identification.taxon,
-      user: {
-        id: userId,
-        login: currentUser?.login,
-        signedIn: true
-      },
-      created_at: formatISO( Date.now() ),
-      uuid: identification.uuid,
-      vision: false,
-      // This tells us to render is ghosted (since it's temporarily visible
-      // until getting a response from the server)
-      temporary: true
-    };
-    setIds( [...ids, newId] );
-
-    createIdentificationMutation.mutate( {
-      identification: {
-        observation_id: uuid,
-        taxon_id: newId.taxon.id,
-        body: newId.body
-      }
-    } );
-  };
-
-  const navToAddID = ( ) => {
-    navigation.navigate( "AddID", { onIDAdded, goBackOnSave: true } );
-  };
-
   const activityItems = ids.concat( [...comments] )
     .sort( ( a, b ) => ( new Date( a.created_at ) - new Date( b.created_at ) ) );
 
@@ -127,24 +57,6 @@ const ActivityTab = ( {
   return (
     <View>
       {activitytemsList}
-      <View className="flex-row my-10 justify-evenly">
-        <Button
-          text={t( "Suggest-an-ID" )}
-          onPress={navToAddID}
-          className="mx-3"
-          testID="ObsDetail.cvSuggestionsButton"
-          accessibilityRole="link"
-          accessibilityHint={t( "Navigates-to-suggest-identification" )}
-        />
-        <Button
-          text={t( "Add-Comment" )}
-          onPress={openCommentBox}
-          className="mx-3"
-          testID="ObsDetail.commentButton"
-          disabled={showCommentBox}
-          accessibilityHint={t( "Opens-add-comment-modal" )}
-        />
-      </View>
     </View>
   );
 };
diff --git a/src/components/ObsDetails/ObsDetails.js b/src/components/ObsDetails/ObsDetails.js
index 897e8b0f5..441e8443a 100644
--- a/src/components/ObsDetails/ObsDetails.js
+++ b/src/components/ObsDetails/ObsDetails.js
@@ -1,7 +1,9 @@
 // @flow
+import { HeaderBackButton } from "@react-navigation/elements";
 import { useNavigation, useRoute } from "@react-navigation/native";
 import { useQueryClient } from "@tanstack/react-query";
 import { createComment } from "api/comments";
+import createIdentification from "api/identifications";
 import {
   faveObservation,
   fetchRemoteObservation,
@@ -10,7 +12,9 @@ import {
 } from "api/observations";
 import ObsStatus from "components/MyObservations/ObsStatus";
 import ActivityHeader from "components/ObsDetails/ActivityHeader";
-import { DisplayTaxonName, ObservationLocation, Tabs } from "components/SharedComponents";
+import {
+  Button, DisplayTaxonName, ObservationLocation, PhotoCount, Tabs
+} from "components/SharedComponents";
 import HideView from "components/SharedComponents/HideView";
 import PhotoScroll from "components/SharedComponents/PhotoScroll";
 import ScrollViewWrapper from "components/SharedComponents/ScrollViewWrapper";
@@ -38,6 +42,7 @@ import useCurrentUser from "sharedHooks/useCurrentUser";
 import useIsConnected from "sharedHooks/useIsConnected";
 import useLocalObservation from "sharedHooks/useLocalObservation";
 import useTranslation from "sharedHooks/useTranslation";
+import { getShadowStyle } from "styles/global";
 import colors from "styles/tailwindColors";
 
 import ActivityTab from "./ActivityTab";
@@ -59,6 +64,7 @@ const DETAILS_TAB_ID = "DETAILS";
 const ObsDetails = (): Node => {
   const isOnline = useIsConnected();
   const currentUser = useCurrentUser();
+  const [ids, setIds] = useState<Array<Object>>( [] );
   const userId = currentUser?.id;
   const [refetch, setRefetch] = useState( false );
   const { params } = useRoute();
@@ -159,6 +165,25 @@ const ObsDetails = (): Node => {
     } );
   };
 
+  const createIdentificationMutation = useAuthenticatedMutation(
+    ( idParams, optsWithAuth ) => createIdentification( idParams, optsWithAuth ),
+    {
+      onSuccess: data => setIds( [...ids, data[0]] ),
+      onError: e => {
+        let error = null;
+        if ( e ) {
+          error = t( "Couldnt-create-identification", { error: e.message } );
+        } else {
+          error = t( "Couldnt-create-identification", { error: t( "Unknown-error" ) } );
+        }
+
+        // Remove temporary ID and show error
+        setIds( [...ids] );
+        showErrorAlert( error );
+      }
+    }
+  );
+
   // reload if change to observation
   useEffect( () => {
     if ( localObservation && remoteObservation ) {
@@ -256,6 +281,38 @@ const ObsDetails = (): Node => {
     }
   };
 
+  const onIDAdded = async identification => {
+    // Add temporary ID to observation.identifications ("ghosted" ID, while we're trying to add it)
+    const newId = {
+      body: identification.body,
+      taxon: identification.taxon,
+      user: {
+        id: userId,
+        login: currentUser?.login,
+        signedIn: true
+      },
+      created_at: formatISO( Date.now() ),
+      uuid: identification.uuid,
+      vision: false,
+      // This tells us to render is ghosted (since it's temporarily visible
+      // until getting a response from the server)
+      temporary: true
+    };
+    setIds( [...ids, newId] );
+
+    createIdentificationMutation.mutate( {
+      identification: {
+        observation_id: uuid,
+        taxon_id: newId.taxon.id,
+        body: newId.body
+      }
+    } );
+  };
+
+  const navToAddID = ( ) => {
+    navigation.navigate( "AddID", { onIDAdded, goBackOnSave: true } );
+  };
+
   const tabs = [
     {
       id: ACTIVITY_TAB_ID,
@@ -292,32 +349,33 @@ const ObsDetails = (): Node => {
         <View className="bg-black">
           <PhotoScroll photos={photos} />
           {/* TODO: a11y props are not passed down into this 3.party */}
+          <View className="absolute top-3 left-3">
+            <HeaderBackButton
+              tintColor={colors.white}
+              onPress={( ) => navigation.goBack( )}
+            />
+          </View>
           <IconButton
-            icon={currentUserFaved ? "star-bold-outline" : "pencil"}
-            onPress={faveOrUnfave}
+            icon="kebab-menu"
             textColor={colors.white}
-            className="absolute top-3 right-0"
+            className="absolute top-3 right-3"
             accessible
             accessibilityRole="button"
-            accessibilityLabel={
-              currentUserFaved
-                ? t( "Fave-button-label-unfave" )
-                : t( "Fave-button-label-fave" )
-            }
+            accessibilityLabel={t( "favorite" )}
           />
           <IconButton
-            icon="chevron-left"
-            onPress={faveOrUnfave}
+            icon="star-bold-outline"
+            size={25}
+            onPress={() => faveOrUnfave()}
             textColor={colors.white}
-            className="absolute top-3 left-0"
+            className="absolute bottom-3 right-3"
             accessible
             accessibilityRole="button"
-            accessibilityLabel={
-              currentUserFaved
-                ? t( "Fave-button-label-unfave" )
-                : t( "Fave-button-label-fave" )
-            }
+            accessibilityLabel={t( "favorite" )}
           />
+          <View className="absolute bottom-3 left-3">
+            <PhotoCount count={photos?.length} />
+          </View>
         </View>
       );
     }
@@ -335,10 +393,14 @@ const ObsDetails = (): Node => {
       </View>
     );
   };
+
   return (
     <>
       <ScrollViewWrapper testID={`ObsDetails.${uuid}`}>
-        {displayPhoto()}
+        <View className="relative">
+          {displayPhoto()}
+        </View>
+
         <ActivityHeader item={observation} classNameMargin="mx-[15px] mt-[13px]" />
         <View className="flex-row my-[11px] justify-between mx-3">
           {showTaxon()}
@@ -348,14 +410,11 @@ const ObsDetails = (): Node => {
         <Tabs tabs={tabs} activeId={currentTabId} />
         <HideView show={currentTabId === ACTIVITY_TAB_ID}>
           <ActivityTab
-            uuid={uuid}
             observation={observation}
             comments={comments}
             navToTaxonDetails={navToTaxonDetails}
             toggleRefetch={toggleRefetch}
             refetchRemoteObservation={refetchRemoteObservation}
-            openCommentBox={openCommentBox}
-            showCommentBox={showCommentBox}
           />
         </HideView>
         <HideView noInitialRender show={currentTabId === DETAILS_TAB_ID}>
@@ -367,6 +426,38 @@ const ObsDetails = (): Node => {
           </View>
         )}
       </ScrollViewWrapper>
+      { ( currentTabId === ACTIVITY_TAB_ID )
+      && (
+        <View
+          className="flex-row justify-evenly bottom-[90px] bg-white py-3"
+          style={getShadowStyle( {
+            shadowColor: colors.black,
+            offsetWidth: 0,
+            offsetHeight: -3,
+            shadowOpacity: 0.2,
+            shadowRadius: 2,
+            radius: 5,
+            elevation: 5
+          } )}
+        >
+          <Button
+            text={t( "Suggest-an-ID" )}
+            onPress={navToAddID}
+            className="mx-3"
+            testID="ObsDetail.cvSuggestionsButton"
+            accessibilityRole="link"
+            accessibilityHint={t( "Navigates-to-suggest-identification" )}
+          />
+          <Button
+            text={t( "Add-Comment" )}
+            onPress={openCommentBox}
+            className="mx-3"
+            testID="ObsDetail.commentButton"
+            disabled={showCommentBox}
+            accessibilityHint={t( "Opens-add-comment-modal" )}
+          />
+        </View>
+      ) }
       <AddCommentModal
         //  potential to move this modal to ActivityTab and have it handle comments
         //  and ids but there were issues with presenting the modal in a scrollview.
diff --git a/src/components/SharedComponents/PhotoScroll.js b/src/components/SharedComponents/PhotoScroll.js
index 822a86aac..fec0f1813 100644
--- a/src/components/SharedComponents/PhotoScroll.js
+++ b/src/components/SharedComponents/PhotoScroll.js
@@ -1,6 +1,6 @@
 // @flow
 
-import { Image, Text, View } from "components/styledComponents";
+import { Image, View } from "components/styledComponents";
 import * as React from "react";
 import { FlatList } from "react-native-gesture-handler";
 
@@ -24,13 +24,10 @@ const PhotoScroll = ( { photos }: Props ): React.Node => {
         <Image
           testID="PhotoScroll.photo"
           source={{ uri: photoUrl }}
-          className="h-56 w-screen"
+          className="h-72 w-screen"
           resizeMode="contain"
           accessibilityIgnoresInvertColors
         />
-        <Text className="absolute bottom-5 right-5 text-white">
-          {photo.licenseCode || photo.license_code}
-        </Text>
       </View>
     );
   };
diff --git a/src/navigation/BottomTabNavigator/CustomTabBar.js b/src/navigation/BottomTabNavigator/CustomTabBar.js
index 23ff8794b..166c01679 100644
--- a/src/navigation/BottomTabNavigator/CustomTabBar.js
+++ b/src/navigation/BottomTabNavigator/CustomTabBar.js
@@ -69,7 +69,7 @@ const CustomTabBar = ( { state, descriptors, navigation }: Props ): Node => {
     </View>
   );
 
-  const footerHeight = Platform.OS === "ios" ? "h-80px]" : "h-20";
+  const footerHeight = Platform.OS === "ios" ? "h-[80px]" : "h-20";
 
   // Hacky solution but is required to show ContextHeader shadow in PhotoGallery
   // when PhotoGallery is hoisted to stack navigator, the header is rendered first
@@ -91,7 +91,7 @@ const CustomTabBar = ( { state, descriptors, navigation }: Props ): Node => {
   return (
     <View
       className={classNames(
-        "flex flex-row absolute bottom-0 bg-white w-full justify-evenly items-center p-1",
+        "flex flex-row absolute bottom-0 bg-white w-full justify-evenly items-center p-1 m-0",
         { "pb-5": Platform.OS === "ios" },
         footerHeight
       )}

From 7ee98dc1382a85d70c0dd17412f9348045e21c57 Mon Sep 17 00:00:00 2001
From: Angie Ta <angie@inaturalist.org>
Date: Thu, 4 May 2023 00:16:48 -0700
Subject: [PATCH 06/27] Adjust margins

---
 src/components/ObsDetails/ObsDetails.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ObsDetails/ObsDetails.js b/src/components/ObsDetails/ObsDetails.js
index 441e8443a..2961e910e 100644
--- a/src/components/ObsDetails/ObsDetails.js
+++ b/src/components/ObsDetails/ObsDetails.js
@@ -429,7 +429,7 @@ const ObsDetails = (): Node => {
       { ( currentTabId === ACTIVITY_TAB_ID )
       && (
         <View
-          className="flex-row justify-evenly bottom-[90px] bg-white py-3"
+          className="flex-row justify-evenly bottom-[80px] bg-white py-3"
           style={getShadowStyle( {
             shadowColor: colors.black,
             offsetWidth: 0,

From cb911c73bdaebd74a6e4b21e97fa7ab859639953 Mon Sep 17 00:00:00 2001
From: Angie Ta <angie@inaturalist.org>
Date: Thu, 4 May 2023 15:45:49 -0700
Subject: [PATCH 07/27] Show headerbackbutton when no image

---
 src/components/ObsDetails/ObsDetails.js | 22 ++++++++++++++--------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/components/ObsDetails/ObsDetails.js b/src/components/ObsDetails/ObsDetails.js
index 2961e910e..71de34dc5 100644
--- a/src/components/ObsDetails/ObsDetails.js
+++ b/src/components/ObsDetails/ObsDetails.js
@@ -332,9 +332,10 @@ const ObsDetails = (): Node => {
     if ( !isOnline ) {
       // TODO show photos that are available offline
       return (
-        <View className="bg-white flex-row justify-center">
+        <View className="bg-black flex-row justify-center">
           <IconMaterial
             name="wifi-off"
+            color={colors.white}
             size={100}
             accessibilityRole="image"
             accessibilityLabel={t(
@@ -349,12 +350,12 @@ const ObsDetails = (): Node => {
         <View className="bg-black">
           <PhotoScroll photos={photos} />
           {/* TODO: a11y props are not passed down into this 3.party */}
-          <View className="absolute top-3 left-3">
+          {/* <View className="absolute top-3 left-3">
             <HeaderBackButton
               tintColor={colors.white}
               onPress={( ) => navigation.goBack( )}
             />
-          </View>
+          </View> */}
           <IconButton
             icon="kebab-menu"
             textColor={colors.white}
@@ -381,11 +382,12 @@ const ObsDetails = (): Node => {
     }
     return (
       <View
-        className="bg-white flex-row justify-center"
+        className="bg-black flex-row justify-center"
         accessible
         accessibilityLabel={t( "Observation-has-no-photos-and-no-sounds" )}
       >
         <IconMaterial
+          color={colors.white}
           testID="ObsDetails.noImage"
           name="image-not-supported"
           size={100}
@@ -397,8 +399,12 @@ const ObsDetails = (): Node => {
   return (
     <>
       <ScrollViewWrapper testID={`ObsDetails.${uuid}`}>
-        <View className="relative">
-          {displayPhoto()}
+        {displayPhoto()}
+        <View className="absolute top-3 left-3">
+          <HeaderBackButton
+            tintColor={colors.white}
+            onPress={( ) => navigation.goBack( )}
+          />
         </View>
 
         <ActivityHeader item={observation} classNameMargin="mx-[15px] mt-[13px]" />
@@ -443,7 +449,7 @@ const ObsDetails = (): Node => {
           <Button
             text={t( "Suggest-an-ID" )}
             onPress={navToAddID}
-            className="mx-3"
+            className="mx-3 grow"
             testID="ObsDetail.cvSuggestionsButton"
             accessibilityRole="link"
             accessibilityHint={t( "Navigates-to-suggest-identification" )}
@@ -451,7 +457,7 @@ const ObsDetails = (): Node => {
           <Button
             text={t( "Add-Comment" )}
             onPress={openCommentBox}
-            className="mx-3"
+            className="mx-3 grow"
             testID="ObsDetail.commentButton"
             disabled={showCommentBox}
             accessibilityHint={t( "Opens-add-comment-modal" )}

From 6f2c399572080001fa8b96d34507d94872c5606b Mon Sep 17 00:00:00 2001
From: Angie Ta <angie@inaturalist.org>
Date: Thu, 4 May 2023 16:50:21 -0700
Subject: [PATCH 08/27] Remove comment

---
 src/components/ObsDetails/ObsDetails.js | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/components/ObsDetails/ObsDetails.js b/src/components/ObsDetails/ObsDetails.js
index 71de34dc5..37cd8cb48 100644
--- a/src/components/ObsDetails/ObsDetails.js
+++ b/src/components/ObsDetails/ObsDetails.js
@@ -350,12 +350,6 @@ const ObsDetails = (): Node => {
         <View className="bg-black">
           <PhotoScroll photos={photos} />
           {/* TODO: a11y props are not passed down into this 3.party */}
-          {/* <View className="absolute top-3 left-3">
-            <HeaderBackButton
-              tintColor={colors.white}
-              onPress={( ) => navigation.goBack( )}
-            />
-          </View> */}
           <IconButton
             icon="kebab-menu"
             textColor={colors.white}

From ff9b86bc32b349f1aa6c628d581e14167b3b6379 Mon Sep 17 00:00:00 2001
From: Angie Ta <angie@inaturalist.org>
Date: Thu, 4 May 2023 17:05:33 -0700
Subject: [PATCH 09/27] Add new strings

---
 src/components/ObsDetails/DetailsTab.js |  4 ++--
 src/i18n/l10n/en.ftl                    | 19 ++++++++++++-------
 src/i18n/l10n/en.ftl.json               | 13 ++++++++-----
 src/i18n/strings.ftl                    | 19 ++++++++++++-------
 4 files changed, 34 insertions(+), 21 deletions(-)

diff --git a/src/components/ObsDetails/DetailsTab.js b/src/components/ObsDetails/DetailsTab.js
index 3a684a10b..59c289e3b 100644
--- a/src/components/ObsDetails/DetailsTab.js
+++ b/src/components/ObsDetails/DetailsTab.js
@@ -126,14 +126,14 @@ const DetailsTab = ( { observation }: Props ): Node => {
           <Body4>
             {t( "This observation needs more identifications to reach research grade" )}
           </Body4>
-          <Button text={t( "VIEW DATA QUALITY ASSESSEMENT" )} />
+          <Button text={t( "VIEW-DATA-QUALITY-ASSESSEMENT" )} />
         </View>
       </View>
       <Divider />
 
       <View className={sectionClass}>
         <Heading4 className={headingClass}>{t( "PROJECTS" )}</Heading4>
-        <Button text={t( "VIEW PROJECTS" )} />
+        <Button text={t( "VIEW-PROJECTS" )} />
       </View>
 
       <Divider />
diff --git a/src/i18n/l10n/en.ftl b/src/i18n/l10n/en.ftl
index c0edde73f..0fd449e02 100644
--- a/src/i18n/l10n/en.ftl
+++ b/src/i18n/l10n/en.ftl
@@ -102,8 +102,12 @@ Create-an-iNaturalist-account-to-save-your-observations = Create an iNaturalist
 
 CREATE-YOUR-FIRST-OBSERVATION = CREATE YOUR FIRST OBSERVATION
 
+DATA-QUALITY = DATA QUALITY
+
 Date = Date
 
+DATE = DATE
+
 Date-added-newest-to-oldest = Date added - newest to oldest
 
 Date-added-oldest-to-newest = Date added - oldest to newest
@@ -258,6 +262,8 @@ Licensing = Licensing
 
 Location = Location
 
+LOCATION = LOCATION
+
 Location-accuracy-is-too-imprecise = Location accuracy is too imprecise to help identifiers. Please zoom in.
 
 LOCATION-TOO-IMPRECISE = LOCATION TOO IMPRECISE
@@ -357,10 +363,8 @@ No-photos-found = No photos found. If this is your first time opening the app an
 # license code
 no-rights-reserved = no rights reserved
 
-NOTES = NOTES
-
 # Header for observation description on observation detail
-Notes = Notes
+NOTES = NOTES
 
 Notifications = Notifications
 
@@ -549,6 +553,8 @@ SAVE-ALL = SAVE ALL
 
 SAVE-CHANGES = SAVE CHANGES
 
+Saved-Observation = Saved observation, in queue to upload
+
 Search-for-a-location = Search for a location
 
 Search-for-a-project = Search for a project
@@ -671,9 +677,6 @@ Upload-Progress = Upload {$uploadProgress} percent complete
 
 Upload-Complete = Upload Complete
 
-Saved-Observation = Saved observation, in queue to upload
-
-
 User = User
 
 Username = Username
@@ -681,6 +684,8 @@ Username = Username
 # Appears above the text fields
 Username-or-Email = Username or Email
 
+VIEW-DATA-QUALITY-ASSESSEMENT = VIEW DATA QUALITY ASSESSEMENT
+
 Visually-search-iNaturalist-data = Visually search iNaturalist’s wealth of data. Search by a taxon in a location
 
 Welcome-to-iNaturalist = Welcome to iNaturalist!
@@ -803,7 +808,7 @@ ADD-EVIDENCE = ADD EVIDENCE
 You-can-add-up-to-20-media = You can add up to 20 photos and 20 sounds per observation.
 
 Add-Comment = Add Comment
-Suggest-an-ID = Suggest an ID
+Suggest-ID = Suggest ID
 # Hint text inside the 'Add a comment' Text Input
 Add-a-comment = Add a comment...
 
diff --git a/src/i18n/l10n/en.ftl.json b/src/i18n/l10n/en.ftl.json
index 997053888..1c15c04c1 100644
--- a/src/i18n/l10n/en.ftl.json
+++ b/src/i18n/l10n/en.ftl.json
@@ -71,7 +71,9 @@
   "Couldnt-create-identification": "Couldn't create identification",
   "Create-an-iNaturalist-account-to-save-your-observations": "Create an iNaturalist account to save your observations and contribute them to science.",
   "CREATE-YOUR-FIRST-OBSERVATION": "CREATE YOUR FIRST OBSERVATION",
+  "DATA-QUALITY": "DATA QUALITY",
   "Date": "Date",
+  "DATE": "DATE",
   "Date-added-newest-to-oldest": "Date added - newest to oldest",
   "Date-added-oldest-to-newest": "Date added - oldest to newest",
   "Default-Search-Place": "Default Search Place",
@@ -170,6 +172,7 @@
   },
   "Licensing": "Licensing",
   "Location": "Location",
+  "LOCATION": "LOCATION",
   "Location-accuracy-is-too-imprecise": "Location accuracy is too imprecise to help identifiers. Please zoom in.",
   "LOCATION-TOO-IMPRECISE": "LOCATION TOO IMPRECISE",
   "Log-in": "Log in",
@@ -242,10 +245,9 @@
     "comment": "license code",
     "val": "no rights reserved"
   },
-  "NOTES": "NOTES",
-  "Notes": {
+  "NOTES": {
     "comment": "Header for observation description on observation detail",
-    "val": "Notes"
+    "val": "NOTES"
   },
   "Notifications": "Notifications",
   "Obscured": "Obscured",
@@ -361,6 +363,7 @@
   "SAVE-LOCATION": "SAVE LOCATION",
   "SAVE-ALL": "SAVE ALL",
   "SAVE-CHANGES": "SAVE CHANGES",
+  "Saved-Observation": "Saved observation, in queue to upload",
   "Search-for-a-location": "Search for a location",
   "Search-for-a-project": "Search for a project",
   "Search-for-a-taxon": "Search for a taxon",
@@ -441,13 +444,13 @@
   },
   "Upload-Progress": "Upload { $uploadProgress } percent complete",
   "Upload-Complete": "Upload Complete",
-  "Saved-Observation": "Saved observation, in queue to upload",
   "User": "User { $userHandle }",
   "Username": "Username",
   "Username-or-Email": {
     "comment": "Appears above the text fields",
     "val": "Username or Email"
   },
+  "VIEW-DATA-QUALITY-ASSESSEMENT": "VIEW DATA QUALITY ASSESSEMENT",
   "Visually-search-iNaturalist-data": "Visually search iNaturalist’s wealth of data. Search by a taxon in a location",
   "Welcome-to-iNaturalist": "Welcome to iNaturalist!",
   "Whenever-you-get-internet-connection-you-can-upload": "Whenever you get internet connection, you can upload your observations to iNaturalist.",
@@ -547,7 +550,7 @@
   "ADD-EVIDENCE": "ADD EVIDENCE",
   "You-can-add-up-to-20-media": "You can add up to 20 photos and 20 sounds per observation.",
   "Add-Comment": "Add Comment",
-  "Suggest-an-ID": "Suggest an ID",
+  "Suggest-ID": "Suggest ID",
   "Add-a-comment": {
     "comment": "Hint text inside the 'Add a comment' Text Input",
     "val": "Add a comment..."
diff --git a/src/i18n/strings.ftl b/src/i18n/strings.ftl
index c0edde73f..0fd449e02 100644
--- a/src/i18n/strings.ftl
+++ b/src/i18n/strings.ftl
@@ -102,8 +102,12 @@ Create-an-iNaturalist-account-to-save-your-observations = Create an iNaturalist
 
 CREATE-YOUR-FIRST-OBSERVATION = CREATE YOUR FIRST OBSERVATION
 
+DATA-QUALITY = DATA QUALITY
+
 Date = Date
 
+DATE = DATE
+
 Date-added-newest-to-oldest = Date added - newest to oldest
 
 Date-added-oldest-to-newest = Date added - oldest to newest
@@ -258,6 +262,8 @@ Licensing = Licensing
 
 Location = Location
 
+LOCATION = LOCATION
+
 Location-accuracy-is-too-imprecise = Location accuracy is too imprecise to help identifiers. Please zoom in.
 
 LOCATION-TOO-IMPRECISE = LOCATION TOO IMPRECISE
@@ -357,10 +363,8 @@ No-photos-found = No photos found. If this is your first time opening the app an
 # license code
 no-rights-reserved = no rights reserved
 
-NOTES = NOTES
-
 # Header for observation description on observation detail
-Notes = Notes
+NOTES = NOTES
 
 Notifications = Notifications
 
@@ -549,6 +553,8 @@ SAVE-ALL = SAVE ALL
 
 SAVE-CHANGES = SAVE CHANGES
 
+Saved-Observation = Saved observation, in queue to upload
+
 Search-for-a-location = Search for a location
 
 Search-for-a-project = Search for a project
@@ -671,9 +677,6 @@ Upload-Progress = Upload {$uploadProgress} percent complete
 
 Upload-Complete = Upload Complete
 
-Saved-Observation = Saved observation, in queue to upload
-
-
 User = User
 
 Username = Username
@@ -681,6 +684,8 @@ Username = Username
 # Appears above the text fields
 Username-or-Email = Username or Email
 
+VIEW-DATA-QUALITY-ASSESSEMENT = VIEW DATA QUALITY ASSESSEMENT
+
 Visually-search-iNaturalist-data = Visually search iNaturalist’s wealth of data. Search by a taxon in a location
 
 Welcome-to-iNaturalist = Welcome to iNaturalist!
@@ -803,7 +808,7 @@ ADD-EVIDENCE = ADD EVIDENCE
 You-can-add-up-to-20-media = You can add up to 20 photos and 20 sounds per observation.
 
 Add-Comment = Add Comment
-Suggest-an-ID = Suggest an ID
+Suggest-ID = Suggest ID
 # Hint text inside the 'Add a comment' Text Input
 Add-a-comment = Add a comment...
 

From 7b4aa00549612e6cd0bbcd6148d9d29219edfe55 Mon Sep 17 00:00:00 2001
From: Angie Ta <angie@inaturalist.org>
Date: Thu, 4 May 2023 17:33:05 -0700
Subject: [PATCH 10/27] Edit strings, change icon

---
 src/components/ObsDetails/DetailsTab.js |  2 +-
 src/components/ObsDetails/ObsDetails.js | 22 +++++++++++-----------
 src/i18n/l10n/en.ftl                    |  4 ++--
 src/i18n/l10n/en.ftl.json               |  4 ++--
 src/i18n/strings.ftl                    |  4 ++--
 5 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/components/ObsDetails/DetailsTab.js b/src/components/ObsDetails/DetailsTab.js
index 59c289e3b..287bc6e21 100644
--- a/src/components/ObsDetails/DetailsTab.js
+++ b/src/components/ObsDetails/DetailsTab.js
@@ -144,7 +144,7 @@ const DetailsTab = ( { observation }: Props ): Node => {
         {application && (
           <View className="flex-row">
             <Body4>{t( "Uploaded-via" )}</Body4>
-            <Body4>{application}</Body4>
+            <Body4>{` ${application}`}</Body4>
           </View>
         )}
         <Body4>{t( "View in Browser" )}</Body4>
diff --git a/src/components/ObsDetails/ObsDetails.js b/src/components/ObsDetails/ObsDetails.js
index 37cd8cb48..24ded1dc5 100644
--- a/src/components/ObsDetails/ObsDetails.js
+++ b/src/components/ObsDetails/ObsDetails.js
@@ -351,12 +351,12 @@ const ObsDetails = (): Node => {
           <PhotoScroll photos={photos} />
           {/* TODO: a11y props are not passed down into this 3.party */}
           <IconButton
-            icon="kebab-menu"
+            icon="pencil"
             textColor={colors.white}
             className="absolute top-3 right-3"
             accessible
             accessibilityRole="button"
-            accessibilityLabel={t( "favorite" )}
+            accessibilityLabel={t( "edit" )}
           />
           <IconButton
             icon="star-bold-outline"
@@ -441,21 +441,21 @@ const ObsDetails = (): Node => {
           } )}
         >
           <Button
-            text={t( "Suggest-an-ID" )}
-            onPress={navToAddID}
-            className="mx-3 grow"
-            testID="ObsDetail.cvSuggestionsButton"
-            accessibilityRole="link"
-            accessibilityHint={t( "Navigates-to-suggest-identification" )}
-          />
-          <Button
-            text={t( "Add-Comment" )}
+            text={t( "COMMENT" )}
             onPress={openCommentBox}
             className="mx-3 grow"
             testID="ObsDetail.commentButton"
             disabled={showCommentBox}
             accessibilityHint={t( "Opens-add-comment-modal" )}
           />
+          <Button
+            text={t( "SUGGEST-ID" )}
+            onPress={navToAddID}
+            className="mx-3 grow"
+            testID="ObsDetail.cvSuggestionsButton"
+            accessibilityRole="link"
+            accessibilityHint={t( "Navigates-to-suggest-identification" )}
+          />
         </View>
       ) }
       <AddCommentModal
diff --git a/src/i18n/l10n/en.ftl b/src/i18n/l10n/en.ftl
index 0fd449e02..4e60cf7f2 100644
--- a/src/i18n/l10n/en.ftl
+++ b/src/i18n/l10n/en.ftl
@@ -807,8 +807,8 @@ Quality-Grade-casual = Quality Grade Casual
 ADD-EVIDENCE = ADD EVIDENCE
 You-can-add-up-to-20-media = You can add up to 20 photos and 20 sounds per observation.
 
-Add-Comment = Add Comment
-Suggest-ID = Suggest ID
+COMMENT = COMMENT
+SUGGEST-ID = SUGGEST ID
 # Hint text inside the 'Add a comment' Text Input
 Add-a-comment = Add a comment...
 
diff --git a/src/i18n/l10n/en.ftl.json b/src/i18n/l10n/en.ftl.json
index 1c15c04c1..8f5ec939b 100644
--- a/src/i18n/l10n/en.ftl.json
+++ b/src/i18n/l10n/en.ftl.json
@@ -549,8 +549,8 @@
   },
   "ADD-EVIDENCE": "ADD EVIDENCE",
   "You-can-add-up-to-20-media": "You can add up to 20 photos and 20 sounds per observation.",
-  "Add-Comment": "Add Comment",
-  "Suggest-ID": "Suggest ID",
+  "COMMENT": "COMMENT",
+  "SUGGEST-ID": "SUGGEST ID",
   "Add-a-comment": {
     "comment": "Hint text inside the 'Add a comment' Text Input",
     "val": "Add a comment..."
diff --git a/src/i18n/strings.ftl b/src/i18n/strings.ftl
index 0fd449e02..4e60cf7f2 100644
--- a/src/i18n/strings.ftl
+++ b/src/i18n/strings.ftl
@@ -807,8 +807,8 @@ Quality-Grade-casual = Quality Grade Casual
 ADD-EVIDENCE = ADD EVIDENCE
 You-can-add-up-to-20-media = You can add up to 20 photos and 20 sounds per observation.
 
-Add-Comment = Add Comment
-Suggest-ID = Suggest ID
+COMMENT = COMMENT
+SUGGEST-ID = SUGGEST ID
 # Hint text inside the 'Add a comment' Text Input
 Add-a-comment = Add a comment...
 

From cd9f1a313582aaa687fe36373c94941420550391 Mon Sep 17 00:00:00 2001
From: Angie Ta <angie@inaturalist.org>
Date: Mon, 8 May 2023 18:35:18 -0700
Subject: [PATCH 11/27] Change to use sharedComponent Divider

---
 src/components/ObsDetails/ActivityItem.js | 3 +--
 src/components/ObsDetails/DetailsTab.js   | 3 ++-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/ObsDetails/ActivityItem.js b/src/components/ObsDetails/ActivityItem.js
index c8eb5582f..65c5bde45 100644
--- a/src/components/ObsDetails/ActivityItem.js
+++ b/src/components/ObsDetails/ActivityItem.js
@@ -1,7 +1,7 @@
 // @flow
 
 import ActivityHeader from "components/ObsDetails/ActivityHeader";
-import { DisplayTaxonName } from "components/SharedComponents";
+import { DisplayTaxonName, Divider } from "components/SharedComponents";
 import INatIcon from "components/SharedComponents/INatIcon";
 import UserText from "components/SharedComponents/UserText";
 import {
@@ -11,7 +11,6 @@ import { t } from "i18next";
 import _ from "lodash";
 import type { Node } from "react";
 import React from "react";
-import { Divider } from "react-native-paper";
 import IconMaterial from "react-native-vector-icons/MaterialIcons";
 import Taxon from "realmModels/Taxon";
 import useIsConnected from "sharedHooks/useIsConnected";
diff --git a/src/components/ObsDetails/DetailsTab.js b/src/components/ObsDetails/DetailsTab.js
index 287bc6e21..679340772 100644
--- a/src/components/ObsDetails/DetailsTab.js
+++ b/src/components/ObsDetails/DetailsTab.js
@@ -5,6 +5,7 @@ import {
   Body4,
   Button,
   DateDisplay,
+  Divider,
   Heading4,
   ObservationLocation,
   QualityGradeStatus
@@ -16,7 +17,7 @@ import { t } from "i18next";
 import _ from "lodash";
 import type { Node } from "react";
 import React, { useState } from "react";
-import { Divider, Menu } from "react-native-paper";
+import { Menu } from "react-native-paper";
 import IconMaterial from "react-native-vector-icons/MaterialIcons";
 import useIsConnected from "sharedHooks/useIsConnected";
 

From 1d9aa46f4ef40bcf764ad6a736874d0940185e19 Mon Sep 17 00:00:00 2001
From: Angie Ta <angie@inaturalist.org>
Date: Wed, 10 May 2023 14:00:46 -0700
Subject: [PATCH 12/27] Changes requested. Mainly i18n related.

---
 src/components/ObsDetails/Attribution.js      |  9 ++-
 src/components/ObsDetails/DetailsTab.js       | 76 +++++++++----------
 src/components/ObsDetails/ObsDetails.js       |  6 +-
 .../ObsDetails/helpers/formatLicenseCode.js   | 13 ++++
 .../SharedComponents/ObservationLocation.js   |  6 +-
 src/i18n/l10n/en.ftl                          | 46 ++++++-----
 src/i18n/l10n/en.ftl.json                     | 43 +++++------
 src/i18n/strings.ftl                          | 46 ++++++-----
 8 files changed, 131 insertions(+), 114 deletions(-)
 create mode 100644 src/components/ObsDetails/helpers/formatLicenseCode.js

diff --git a/src/components/ObsDetails/Attribution.js b/src/components/ObsDetails/Attribution.js
index 45cc0d461..244d9620e 100644
--- a/src/components/ObsDetails/Attribution.js
+++ b/src/components/ObsDetails/Attribution.js
@@ -2,10 +2,11 @@
 
 import { Body4 } from "components/SharedComponents";
 import { t } from "i18next";
-import _ from "lodash";
 import type { Node } from "react";
 import React from "react";
 
+import formatLicenseCode from "./helpers/formatLicenseCode";
+
 type Props = {
   observation: Object
 }
@@ -14,16 +15,16 @@ type Props = {
 // https://github.com/inaturalist/inaturalist/blob/768b9263931ebeea229bbc47d8442ca6b0377d45/app/webpack/shared/components/observation_attribution.jsx
 const Attribution = ( { observation }: Props ): Node => {
   const { user } = observation;
-  const licenseCode = _.upperCase( observation.license_code );
+  const licenseCode = formatLicenseCode( observation.license_code );
   const copyrightAttribution = user ? ( user.name || user.login ) : t( "unknown" );
 
   const renderLicenseCode = ( ) => {
     if ( !licenseCode ) {
       return t( "all-rights-reserved" );
     } if ( licenseCode === "cc0" ) {
-      return `${t( "no-rights-reserved" )} ${licenseCode}`;
+      return t( "no-rights-reserved", { licenseCode } );
     }
-    return `${t( "some-rights-reserved" )} ${licenseCode}`;
+    return t( "attribution_cc_by_nc", { licenseCode } );
   };
 
   return (
diff --git a/src/components/ObsDetails/DetailsTab.js b/src/components/ObsDetails/DetailsTab.js
index 679340772..0c8bdf986 100644
--- a/src/components/ObsDetails/DetailsTab.js
+++ b/src/components/ObsDetails/DetailsTab.js
@@ -1,7 +1,6 @@
 // @flow
 
 import {
-  Body2,
   Body4,
   Button,
   DateDisplay,
@@ -12,14 +11,12 @@ import {
 } from "components/SharedComponents";
 import KebabMenu from "components/SharedComponents/KebabMenu";
 import Map from "components/SharedComponents/Map";
+import UserText from "components/SharedComponents/UserText";
 import { View } from "components/styledComponents";
 import { t } from "i18next";
-import _ from "lodash";
 import type { Node } from "react";
 import React, { useState } from "react";
 import { Menu } from "react-native-paper";
-import IconMaterial from "react-native-vector-icons/MaterialIcons";
-import useIsConnected from "sharedHooks/useIsConnected";
 
 import Attribution from "./Attribution";
 import checkCamelAndSnakeCase from "./helpers/checkCamelAndSnakeCase";
@@ -28,22 +25,43 @@ type Props = {
   observation: Object
 }
 
+const qualityGradeOption = option => {
+  switch ( option ) {
+  case "research":
+    return t( "quality-grade-research" );
+  case "needs_id":
+    return t( "quality-grade-needs-id" );
+  default:
+    return t( "quality-grade-casual" );
+  }
+};
+
+const qualityGradeDescription = option => {
+  switch ( option ) {
+  case "research":
+    return t( "Data-quality-research-description" );
+  case "needs_id":
+    return t( "Data-quality-needs-id-description" );
+  default:
+    return t( "Data-quality-casual-description" );
+  }
+};
+
 const headingClass = "mt-[20px] mb-[11px] text-black";
 const sectionClass = "mx-[15px] mb-[20px]";
 
 const DetailsTab = ( { observation }: Props ): Node => {
-  const isOnline = useIsConnected( );
   const application = observation?.application?.name;
   const [locationKebabMenuVisible, setLocationKebabMenuVisible] = useState( false );
+  const qualityGrade = observation?.quality_grade;
 
   const displayQualityGradeOption = option => {
-    const qualityGrade = observation?.quality_grade;
     const labelClassName = ( qualityGrade === option ) ? "font-bold" : "";
 
     return (
       <View className="flex-col space-y-[8px]">
         <QualityGradeStatus qualityGrade={option} />
-        <Body4 className={labelClassName}>{_.startCase( _.camelCase( t( option ) ) )}</Body4>
+        <Body4 className={labelClassName}>{ qualityGradeOption( option ) }</Body4>
       </View>
     );
   };
@@ -54,7 +72,7 @@ const DetailsTab = ( { observation }: Props ): Node => {
         <>
           <View className={sectionClass}>
             <Heading4 className={headingClass}>{t( "NOTES" )}</Heading4>
-            <Body2>{observation.description}</Body2>
+            <UserText>{observation.description}</UserText>
           </View>
           <Divider />
         </>
@@ -67,36 +85,19 @@ const DetailsTab = ( { observation }: Props ): Node => {
           setVisible={setLocationKebabMenuVisible}
         >
           <Menu.Item
-            onPress={async ( ) => {
-
-            }}
             title={t( "Share-location" )}
           />
           <Menu.Item
-            onPress={async ( ) => {
-
-            }}
             title={t( "Copy-coordinates" )}
           />
         </KebabMenu>
       </View>
-      {isOnline
-        ? (
-          <Map
-            obsLatitude={observation.latitude}
-            obsLongitude={observation.longitude}
-            mapHeight={230}
-          />
-        ) : (
-          <View className="h-16 items-center justify-center">
-            <IconMaterial
-              name="wifi-off"
-              size={30}
-              accessibilityRole="image"
-              accessibilityLabel={t( "Location-map-unavailable-without-internet" )}
-            />
-          </View>
-        )}
+      <Map
+        obsLatitude={observation.latitude}
+        obsLongitude={observation.longitude}
+        mapHeight={230}
+      />
+
       <View className={`mt-[11px] ${sectionClass}`}>
         <ObservationLocation observation={observation} details />
       </View>
@@ -106,11 +107,11 @@ const DetailsTab = ( { observation }: Props ): Node => {
         <Heading4 className={headingClass}>{t( "DATE" )}</Heading4>
         <DateDisplay
           classNameMargin="mb-[12px]"
-          label={t( "Observed" )}
+          label={t( "Date_observed_header_short" )}
           dateString={checkCamelAndSnakeCase( observation, "timeObservedAt" )}
         />
         <DateDisplay
-          label={t( "Uploaded" )}
+          label={t( "Date-uploaded-header-short" )}
           dateString={checkCamelAndSnakeCase( observation, "createdAt" )}
         />
       </View>
@@ -125,7 +126,7 @@ const DetailsTab = ( { observation }: Props ): Node => {
             {displayQualityGradeOption( "research" )}
           </View>
           <Body4>
-            {t( "This observation needs more identifications to reach research grade" )}
+            {qualityGradeDescription( qualityGrade )}
           </Body4>
           <Button text={t( "VIEW-DATA-QUALITY-ASSESSEMENT" )} />
         </View>
@@ -143,12 +144,9 @@ const DetailsTab = ( { observation }: Props ): Node => {
         <Heading4 className={headingClass}>{t( "OTHER-DATA" )}</Heading4>
         <Attribution observation={observation} />
         {application && (
-          <View className="flex-row">
-            <Body4>{t( "Uploaded-via" )}</Body4>
-            <Body4>{` ${application}`}</Body4>
-          </View>
+          <Body4>{t( "Uploaded-via-application", { application } )}</Body4>
         )}
-        <Body4>{t( "View in Browser" )}</Body4>
+        <Body4>{t( "View-in-browser" )}</Body4>
       </View>
     </>
   );
diff --git a/src/components/ObsDetails/ObsDetails.js b/src/components/ObsDetails/ObsDetails.js
index 24ded1dc5..c494eaba5 100644
--- a/src/components/ObsDetails/ObsDetails.js
+++ b/src/components/ObsDetails/ObsDetails.js
@@ -172,9 +172,9 @@ const ObsDetails = (): Node => {
       onError: e => {
         let error = null;
         if ( e ) {
-          error = t( "Couldnt-create-identification", { error: e.message } );
+          error = t( "Couldnt-create-identification-error", { error: e.message } );
         } else {
-          error = t( "Couldnt-create-identification", { error: t( "Unknown-error" ) } );
+          error = t( "Couldnt-create-identification-unknown-error" );
         }
 
         // Remove temporary ID and show error
@@ -369,7 +369,7 @@ const ObsDetails = (): Node => {
             accessibilityLabel={t( "favorite" )}
           />
           <View className="absolute bottom-3 left-3">
-            <PhotoCount count={photos?.length} />
+            <PhotoCount count={photos.length ? photos.length : 0} />
           </View>
         </View>
       );
diff --git a/src/components/ObsDetails/helpers/formatLicenseCode.js b/src/components/ObsDetails/helpers/formatLicenseCode.js
new file mode 100644
index 000000000..7fbad0bf2
--- /dev/null
+++ b/src/components/ObsDetails/helpers/formatLicenseCode.js
@@ -0,0 +1,13 @@
+import _ from "lodash";
+// format license code in Attribution.js
+// cc0, cc-by-nc to CC 0, CC BY-NC
+const formatLicenseCode = licenseCode => {
+  let formatted = _.upperCase( licenseCode );
+  if ( licenseCode === "cc-by-nc" ) {
+    formatted = formatted.replaceAll( " ", "-" );
+    formatted = formatted.replace( "-", " " );
+  }
+  return formatted;
+};
+
+export default formatLicenseCode;
diff --git a/src/components/SharedComponents/ObservationLocation.js b/src/components/SharedComponents/ObservationLocation.js
index d11477b25..306ab0b12 100644
--- a/src/components/SharedComponents/ObservationLocation.js
+++ b/src/components/SharedComponents/ObservationLocation.js
@@ -25,7 +25,11 @@ const ObservationLocation = ( { observation, classNameMargin, details }: Props )
   if ( ( observation?.latitude !== null && observation?.latitude !== undefined )
     && ( observation?.longitude != null && observation?.longitude !== undefined )
   ) {
-    displayCoords = `Lat: ${observation.latitude}, Lon: ${observation.longitude}`;
+    displayCoords = t( "Lat-Lon-Acc", {
+      latitude: observation.latitude,
+      longitude: observation.longitude,
+      accuracy: observation?.positional_accuracy?.toFixed( 0 ) || t( "none" )
+    } );
   }
 
   const displayGeoprivacy = ( ) => (
diff --git a/src/i18n/l10n/en.ftl b/src/i18n/l10n/en.ftl
index 4e60cf7f2..2682cde24 100644
--- a/src/i18n/l10n/en.ftl
+++ b/src/i18n/l10n/en.ftl
@@ -46,6 +46,8 @@ Are-you-sure = Are you sure?
 
 Are-you-sure-you-want-to-sign-out = Are you sure you want to sign out? This will delete all your observations on this device. It will not affect any observations you've uploaded to iNaturalist.
 
+attribution_cc_by_nc = some rights reserved { $licenseCode }
+
 app-authorized-on-date = { $appName } (authorized on: { $date })
 
 Applications = Applications
@@ -63,9 +65,6 @@ By-exiting-changes-not-saved = By exiting, changes to your observation will not
 
 By-exiting-your-observations-not-saved = By exiting, your observations will not be saved. You can save them to your device, or you can delete them.
 
-# Quality grade option: Casual (shortened for My Observations view)
-C = C
-
 Camera-Roll = Camera Roll
 
 CANCEL = CANCEL
@@ -74,9 +73,6 @@ Cancel = Cancel
 
 Captive-Cultivated = Captive/Cultivated
 
-# Quality grade option
-Casual = Casual
-
 # After pressing the reset password button
 Check-your-email = Check your email! We've sent password reset instructions.
 
@@ -98,12 +94,22 @@ Couldnt-create-comment = Couldn't create comment
 
 Couldnt-create-identification = Couldn't create identification
 
+Couldnt-create-identification-error = Couldn't create identification { $error }
+
+Couldnt-create-identification-unknown-error = Couldn't create identification, Unknown Error.
+
 Create-an-iNaturalist-account-to-save-your-observations = Create an iNaturalist account to save your observations and contribute them to science.
 
 CREATE-YOUR-FIRST-OBSERVATION = CREATE YOUR FIRST OBSERVATION
 
 DATA-QUALITY = DATA QUALITY
 
+Data-quality-research-description = This observation has enough identifications to be considered resarch grade
+
+Data-quality-needs-id-description = This observation needs more identifications to reach research grade
+
+Data-quality-casual-description = This observation needs more information verified to be considered verifiable
+
 Date = Date
 
 DATE = DATE
@@ -112,6 +118,10 @@ Date-added-newest-to-oldest = Date added - newest to oldest
 
 Date-added-oldest-to-newest = Date added - oldest to newest
 
+Date_observed_header_short = Observed
+
+Date-uploaded-header-short = Uploaded
+
 Default-Search-Place = Default Search Place
 
 DELETE = DELETE
@@ -337,16 +347,10 @@ Native = Native
 # Header for nearby projects
 Nearby = Nearby
 
-# Quality grade option
-Needs-ID = Needs ID
-
 New-Observation = New Observation
 
 Next = Next
 
-# Quality grade option: Needs ID (shortened for My Observations view)
-NI = NI
-
 No = No
 
 # When the user tries to reset password but enters a non-existent email
@@ -361,7 +365,7 @@ none = none
 No-photos-found = No photos found. If this is your first time opening the app and giving permissions, try restarting the app.
 
 # license code
-no-rights-reserved = no rights reserved
+no-rights-reserved = no rights reserved { $licenseCode }
 
 # Header for observation description on observation detail
 NOTES = NOTES
@@ -380,8 +384,6 @@ Observations = Observations
 
 Observations-created-on-iNaturalist = Observations created on iNaturalist are used by scientists around the world.
 
-Observed = Observed
-
 Offensive-Inappropriate = Offensive/Inappropriate
 
 Offensive-Inappropriate-Examples = Misleading or illegal content, racial or ethnic slurs, etc. For more on our defintion of "appropriate," see the FAQ.
@@ -430,6 +432,11 @@ Projects = Projects
 
 Quality-Grade = Quality Grade
 
+# Quality grade options
+quality-grade-research = Research
+quality-grade-needs-id = Needs Id
+quality-grade-casual = Casual
+
 Rank = Rank
 
 # The following Ranks- strings are taxonomic ranks (in taxonomic order, not alphabetical order)
@@ -542,9 +549,6 @@ Reviewed-only = Reviewed only
 
 Revoke = Revoke
 
-# Quality grade option: Research Grade (shortened for My Observations view)
-RG = RG
-
 Save = Save
 
 SAVE-LOCATION = SAVE LOCATION
@@ -653,10 +657,8 @@ UPLOAD-X-OBSERVATIONS = UPLOAD {$count ->
     *[other] {$count} OBSERVATIONS
 }
 
-Uploaded = Uploaded
-
 # Describes whether a user made this observation from web, iOS, or Android
-Uploaded-via = Uploaded via:
+Uploaded-via-application = Uploaded via: { $application }
 
 # Shows the number of observations a user is currently uploading on my observations page
 Uploading-X-Observations = Uploading {$count ->
@@ -686,6 +688,8 @@ Username-or-Email = Username or Email
 
 VIEW-DATA-QUALITY-ASSESSEMENT = VIEW DATA QUALITY ASSESSEMENT
 
+View-in-browser = View in Browser
+
 Visually-search-iNaturalist-data = Visually search iNaturalist’s wealth of data. Search by a taxon in a location
 
 Welcome-to-iNaturalist = Welcome to iNaturalist!
diff --git a/src/i18n/l10n/en.ftl.json b/src/i18n/l10n/en.ftl.json
index 8f5ec939b..ad6a84d8e 100644
--- a/src/i18n/l10n/en.ftl.json
+++ b/src/i18n/l10n/en.ftl.json
@@ -33,6 +33,7 @@
   "Arachnids": "Arachnids",
   "Are-you-sure": "Are you sure?",
   "Are-you-sure-you-want-to-sign-out": "Are you sure you want to sign out? This will delete all your observations on this device. It will not affect any observations you've uploaded to iNaturalist.",
+  "attribution_cc_by_nc": "some rights reserved { $licenseCode }",
   "app-authorized-on-date": "{ $appName } (authorized on: { $date })",
   "Applications": "Applications",
   "Automatically-update-my-content-for-taxon-changes": "Automatically update my content for taxon changes",
@@ -44,18 +45,10 @@
   "Blocked-Users": "Blocked Users",
   "By-exiting-changes-not-saved": "By exiting, changes to your observation will not be saved.",
   "By-exiting-your-observations-not-saved": "By exiting, your observations will not be saved. You can save them to your device, or you can delete them.",
-  "C": {
-    "comment": "Quality grade option: Casual (shortened for My Observations view)",
-    "val": "C"
-  },
   "Camera-Roll": "Camera Roll",
   "CANCEL": "CANCEL",
   "Cancel": "Cancel",
   "Captive-Cultivated": "Captive/Cultivated",
-  "Casual": {
-    "comment": "Quality grade option",
-    "val": "Casual"
-  },
   "Check-your-email": {
     "comment": "After pressing the reset password button",
     "val": "Check your email! We've sent password reset instructions."
@@ -69,13 +62,20 @@
   "Copy-coordinates": "Copy Coordinates",
   "Couldnt-create-comment": "Couldn't create comment",
   "Couldnt-create-identification": "Couldn't create identification",
+  "Couldnt-create-identification-error": "Couldn't create identification { $error }",
+  "Couldnt-create-identification-unknown-error": "Couldn't create identification, Unknown Error.",
   "Create-an-iNaturalist-account-to-save-your-observations": "Create an iNaturalist account to save your observations and contribute them to science.",
   "CREATE-YOUR-FIRST-OBSERVATION": "CREATE YOUR FIRST OBSERVATION",
   "DATA-QUALITY": "DATA QUALITY",
+  "Data-quality-research-description": "This observation has enough identifications to be considered resarch grade",
+  "Data-quality-needs-id-description": "This observation needs more identifications to reach research grade",
+  "Data-quality-casual-description": "This observation needs more information verified to be considered verifiable",
   "Date": "Date",
   "DATE": "DATE",
   "Date-added-newest-to-oldest": "Date added - newest to oldest",
   "Date-added-oldest-to-newest": "Date added - oldest to newest",
+  "Date_observed_header_short": "Observed",
+  "Date-uploaded-header-short": "Uploaded",
   "Default-Search-Place": "Default Search Place",
   "DELETE": "DELETE",
   "DELETE-ALL": "DELETE ALL",
@@ -222,16 +222,8 @@
     "comment": "Header for nearby projects",
     "val": "Nearby"
   },
-  "Needs-ID": {
-    "comment": "Quality grade option",
-    "val": "Needs ID"
-  },
   "New-Observation": "New Observation",
   "Next": "Next",
-  "NI": {
-    "comment": "Quality grade option: Needs ID (shortened for My Observations view)",
-    "val": "NI"
-  },
   "No": "No",
   "No-account-found": {
     "comment": "When the user tries to reset password but enters a non-existent email",
@@ -243,7 +235,7 @@
   "No-photos-found": "No photos found. If this is your first time opening the app and giving permissions, try restarting the app.",
   "no-rights-reserved": {
     "comment": "license code",
-    "val": "no rights reserved"
+    "val": "no rights reserved { $licenseCode }"
   },
   "NOTES": {
     "comment": "Header for observation description on observation detail",
@@ -256,7 +248,6 @@
   "OBSERVATIONS": "OBSERVATIONS",
   "Observations": "Observations",
   "Observations-created-on-iNaturalist": "Observations created on iNaturalist are used by scientists around the world.",
-  "Observed": "Observed",
   "Offensive-Inappropriate": "Offensive/Inappropriate",
   "Offensive-Inappropriate-Examples": "Misleading or illegal content, racial or ethnic slurs, etc. For more on our defintion of \"appropriate,\" see the FAQ.",
   "Open": "Open",
@@ -289,6 +280,12 @@
   "PROJECTS": "PROJECTS",
   "Projects": "Projects",
   "Quality-Grade": "Quality Grade",
+  "quality-grade-research": {
+    "comment": "Quality grade options",
+    "val": "Research"
+  },
+  "quality-grade-needs-id": "Needs Id",
+  "quality-grade-casual": "Casual",
   "Rank": "Rank",
   "Ranks-stateofmatter": {
     "comment": "The following Ranks- strings are taxonomic ranks (in taxonomic order, not alphabetical order)",
@@ -355,10 +352,6 @@
   "Reviewed": "Reviewed",
   "Reviewed-only": "Reviewed only",
   "Revoke": "Revoke",
-  "RG": {
-    "comment": "Quality grade option: Research Grade (shortened for My Observations view)",
-    "val": "RG"
-  },
   "Save": "Save",
   "SAVE-LOCATION": "SAVE LOCATION",
   "SAVE-ALL": "SAVE ALL",
@@ -425,10 +418,9 @@
     "comment": "Shows the number of observations a user can upload to iNat from my observations page",
     "val": "UPLOAD { $count ->\n  [one] 1 OBSERVATION\n *[other] { $count } OBSERVATIONS\n}"
   },
-  "Uploaded": "Uploaded",
-  "Uploaded-via": {
+  "Uploaded-via-application": {
     "comment": "Describes whether a user made this observation from web, iOS, or Android",
-    "val": "Uploaded via:"
+    "val": "Uploaded via: { $application }"
   },
   "Uploading-X-Observations": {
     "comment": "Shows the number of observations a user is currently uploading on my observations page",
@@ -451,6 +443,7 @@
     "val": "Username or Email"
   },
   "VIEW-DATA-QUALITY-ASSESSEMENT": "VIEW DATA QUALITY ASSESSEMENT",
+  "View-in-browser": "View in Browser",
   "Visually-search-iNaturalist-data": "Visually search iNaturalist’s wealth of data. Search by a taxon in a location",
   "Welcome-to-iNaturalist": "Welcome to iNaturalist!",
   "Whenever-you-get-internet-connection-you-can-upload": "Whenever you get internet connection, you can upload your observations to iNaturalist.",
diff --git a/src/i18n/strings.ftl b/src/i18n/strings.ftl
index 4e60cf7f2..2682cde24 100644
--- a/src/i18n/strings.ftl
+++ b/src/i18n/strings.ftl
@@ -46,6 +46,8 @@ Are-you-sure = Are you sure?
 
 Are-you-sure-you-want-to-sign-out = Are you sure you want to sign out? This will delete all your observations on this device. It will not affect any observations you've uploaded to iNaturalist.
 
+attribution_cc_by_nc = some rights reserved { $licenseCode }
+
 app-authorized-on-date = { $appName } (authorized on: { $date })
 
 Applications = Applications
@@ -63,9 +65,6 @@ By-exiting-changes-not-saved = By exiting, changes to your observation will not
 
 By-exiting-your-observations-not-saved = By exiting, your observations will not be saved. You can save them to your device, or you can delete them.
 
-# Quality grade option: Casual (shortened for My Observations view)
-C = C
-
 Camera-Roll = Camera Roll
 
 CANCEL = CANCEL
@@ -74,9 +73,6 @@ Cancel = Cancel
 
 Captive-Cultivated = Captive/Cultivated
 
-# Quality grade option
-Casual = Casual
-
 # After pressing the reset password button
 Check-your-email = Check your email! We've sent password reset instructions.
 
@@ -98,12 +94,22 @@ Couldnt-create-comment = Couldn't create comment
 
 Couldnt-create-identification = Couldn't create identification
 
+Couldnt-create-identification-error = Couldn't create identification { $error }
+
+Couldnt-create-identification-unknown-error = Couldn't create identification, Unknown Error.
+
 Create-an-iNaturalist-account-to-save-your-observations = Create an iNaturalist account to save your observations and contribute them to science.
 
 CREATE-YOUR-FIRST-OBSERVATION = CREATE YOUR FIRST OBSERVATION
 
 DATA-QUALITY = DATA QUALITY
 
+Data-quality-research-description = This observation has enough identifications to be considered resarch grade
+
+Data-quality-needs-id-description = This observation needs more identifications to reach research grade
+
+Data-quality-casual-description = This observation needs more information verified to be considered verifiable
+
 Date = Date
 
 DATE = DATE
@@ -112,6 +118,10 @@ Date-added-newest-to-oldest = Date added - newest to oldest
 
 Date-added-oldest-to-newest = Date added - oldest to newest
 
+Date_observed_header_short = Observed
+
+Date-uploaded-header-short = Uploaded
+
 Default-Search-Place = Default Search Place
 
 DELETE = DELETE
@@ -337,16 +347,10 @@ Native = Native
 # Header for nearby projects
 Nearby = Nearby
 
-# Quality grade option
-Needs-ID = Needs ID
-
 New-Observation = New Observation
 
 Next = Next
 
-# Quality grade option: Needs ID (shortened for My Observations view)
-NI = NI
-
 No = No
 
 # When the user tries to reset password but enters a non-existent email
@@ -361,7 +365,7 @@ none = none
 No-photos-found = No photos found. If this is your first time opening the app and giving permissions, try restarting the app.
 
 # license code
-no-rights-reserved = no rights reserved
+no-rights-reserved = no rights reserved { $licenseCode }
 
 # Header for observation description on observation detail
 NOTES = NOTES
@@ -380,8 +384,6 @@ Observations = Observations
 
 Observations-created-on-iNaturalist = Observations created on iNaturalist are used by scientists around the world.
 
-Observed = Observed
-
 Offensive-Inappropriate = Offensive/Inappropriate
 
 Offensive-Inappropriate-Examples = Misleading or illegal content, racial or ethnic slurs, etc. For more on our defintion of "appropriate," see the FAQ.
@@ -430,6 +432,11 @@ Projects = Projects
 
 Quality-Grade = Quality Grade
 
+# Quality grade options
+quality-grade-research = Research
+quality-grade-needs-id = Needs Id
+quality-grade-casual = Casual
+
 Rank = Rank
 
 # The following Ranks- strings are taxonomic ranks (in taxonomic order, not alphabetical order)
@@ -542,9 +549,6 @@ Reviewed-only = Reviewed only
 
 Revoke = Revoke
 
-# Quality grade option: Research Grade (shortened for My Observations view)
-RG = RG
-
 Save = Save
 
 SAVE-LOCATION = SAVE LOCATION
@@ -653,10 +657,8 @@ UPLOAD-X-OBSERVATIONS = UPLOAD {$count ->
     *[other] {$count} OBSERVATIONS
 }
 
-Uploaded = Uploaded
-
 # Describes whether a user made this observation from web, iOS, or Android
-Uploaded-via = Uploaded via:
+Uploaded-via-application = Uploaded via: { $application }
 
 # Shows the number of observations a user is currently uploading on my observations page
 Uploading-X-Observations = Uploading {$count ->
@@ -686,6 +688,8 @@ Username-or-Email = Username or Email
 
 VIEW-DATA-QUALITY-ASSESSEMENT = VIEW DATA QUALITY ASSESSEMENT
 
+View-in-browser = View in Browser
+
 Visually-search-iNaturalist-data = Visually search iNaturalist’s wealth of data. Search by a taxon in a location
 
 Welcome-to-iNaturalist = Welcome to iNaturalist!

From 29f3ee2934363201a840bf41ede6b8d91377c982 Mon Sep 17 00:00:00 2001
From: Angie Ta <angie@inaturalist.org>
Date: Wed, 10 May 2023 17:14:27 -0700
Subject: [PATCH 13/27] Attribution changes

---
 src/components/ObsDetails/Attribution.js      | 28 +++++++++++++------
 .../ObsDetails/helpers/formatLicenseCode.js   | 13 ---------
 src/i18n/l10n/en.ftl                          | 16 +++++++++--
 src/i18n/l10n/en.ftl.json                     | 13 ++++++---
 src/i18n/strings.ftl                          | 16 +++++++++--
 5 files changed, 54 insertions(+), 32 deletions(-)
 delete mode 100644 src/components/ObsDetails/helpers/formatLicenseCode.js

diff --git a/src/components/ObsDetails/Attribution.js b/src/components/ObsDetails/Attribution.js
index 244d9620e..a319baf1e 100644
--- a/src/components/ObsDetails/Attribution.js
+++ b/src/components/ObsDetails/Attribution.js
@@ -5,8 +5,6 @@ import { t } from "i18next";
 import type { Node } from "react";
 import React from "react";
 
-import formatLicenseCode from "./helpers/formatLicenseCode";
-
 type Props = {
   observation: Object
 }
@@ -15,23 +13,35 @@ type Props = {
 // https://github.com/inaturalist/inaturalist/blob/768b9263931ebeea229bbc47d8442ca6b0377d45/app/webpack/shared/components/observation_attribution.jsx
 const Attribution = ( { observation }: Props ): Node => {
   const { user } = observation;
-  const licenseCode = formatLicenseCode( observation.license_code );
+  const licenseCode = observation.license_code;
   const copyrightAttribution = user ? ( user.name || user.login ) : t( "unknown" );
 
-  const renderLicenseCode = ( ) => {
-    if ( !licenseCode ) {
+  const renderRestrictions = ( ) => {
+    switch ( licenseCode ) {
+    case "cc0":
+      return t( "no-rights-reserved-cc0" );
+    case "cc-by":
+      return t( "attribution-cc-by" );
+    case "cc-by-sa":
+      return t( "attribution-cc-by-sa" );
+    case "cc-by-nc":
+      return t( "attribution-cc-by-nc" );
+    case "cc-by-nd":
+      return t( "attribution-cc-by-nd" );
+    case "cc-by-nc-sa":
+      return t( "attribution-cc-by-nc-sa" );
+    case "cc-by-nc-nd":
+      return t( "attribution-cc-by-nc-nd" );
+    default:
       return t( "all-rights-reserved" );
-    } if ( licenseCode === "cc0" ) {
-      return t( "no-rights-reserved", { licenseCode } );
     }
-    return t( "attribution_cc_by_nc", { licenseCode } );
   };
 
   return (
     <Body4>
       {t( "Observation-Attribution", {
         attribution: copyrightAttribution,
-        licenseCode: renderLicenseCode( )
+        restrictions: renderRestrictions( )
       } )}
     </Body4>
   );
diff --git a/src/components/ObsDetails/helpers/formatLicenseCode.js b/src/components/ObsDetails/helpers/formatLicenseCode.js
deleted file mode 100644
index 7fbad0bf2..000000000
--- a/src/components/ObsDetails/helpers/formatLicenseCode.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import _ from "lodash";
-// format license code in Attribution.js
-// cc0, cc-by-nc to CC 0, CC BY-NC
-const formatLicenseCode = licenseCode => {
-  let formatted = _.upperCase( licenseCode );
-  if ( licenseCode === "cc-by-nc" ) {
-    formatted = formatted.replaceAll( " ", "-" );
-    formatted = formatted.replace( "-", " " );
-  }
-  return formatted;
-};
-
-export default formatLicenseCode;
diff --git a/src/i18n/l10n/en.ftl b/src/i18n/l10n/en.ftl
index 2682cde24..bda4ea4c2 100644
--- a/src/i18n/l10n/en.ftl
+++ b/src/i18n/l10n/en.ftl
@@ -46,7 +46,17 @@ Are-you-sure = Are you sure?
 
 Are-you-sure-you-want-to-sign-out = Are you sure you want to sign out? This will delete all your observations on this device. It will not affect any observations you've uploaded to iNaturalist.
 
-attribution_cc_by_nc = some rights reserved { $licenseCode }
+attribution-cc-by = some rights reserved (CC BY)
+
+attribution-cc-by-sa = some rights reserved (CC BY-SA)
+
+attribution-cc-by-nc = some rights reserved (CC BY-NC) 
+
+attribution-cc-by-nd = some rights reserved (CC BY-ND)
+
+attribution-cc-by-nc-sa = some rights reserved (CC BY-NC-SA)
+
+attribution-cc-by-nc-nd = some rights reserved (CC BY-NC-ND)
 
 app-authorized-on-date = { $appName } (authorized on: { $date })
 
@@ -365,7 +375,7 @@ none = none
 No-photos-found = No photos found. If this is your first time opening the app and giving permissions, try restarting the app.
 
 # license code
-no-rights-reserved = no rights reserved { $licenseCode }
+no-rights-reserved-cc0 = no rights reserved (CC0)
 
 # Header for observation description on observation detail
 NOTES = NOTES
@@ -376,7 +386,7 @@ Obscured = Obscured
 
 Observation = Observation
 
-Observation-Attribution = Observation Copyright:© {$attribution} · {$licenseCode}
+Observation-Attribution = Observation: © {$attribution} · {$restrictions}
 
 OBSERVATIONS = OBSERVATIONS
 
diff --git a/src/i18n/l10n/en.ftl.json b/src/i18n/l10n/en.ftl.json
index ad6a84d8e..624bda281 100644
--- a/src/i18n/l10n/en.ftl.json
+++ b/src/i18n/l10n/en.ftl.json
@@ -33,7 +33,12 @@
   "Arachnids": "Arachnids",
   "Are-you-sure": "Are you sure?",
   "Are-you-sure-you-want-to-sign-out": "Are you sure you want to sign out? This will delete all your observations on this device. It will not affect any observations you've uploaded to iNaturalist.",
-  "attribution_cc_by_nc": "some rights reserved { $licenseCode }",
+  "attribution-cc-by": "some rights reserved (CC BY)",
+  "attribution-cc-by-sa": "some rights reserved (CC BY-SA)",
+  "attribution-cc-by-nc": "some rights reserved (CC BY-NC)",
+  "attribution-cc-by-nd": "some rights reserved (CC BY-ND)",
+  "attribution-cc-by-nc-sa": "some rights reserved (CC BY-NC-SA)",
+  "attribution-cc-by-nc-nd": "some rights reserved (CC BY-NC-ND)",
   "app-authorized-on-date": "{ $appName } (authorized on: { $date })",
   "Applications": "Applications",
   "Automatically-update-my-content-for-taxon-changes": "Automatically update my content for taxon changes",
@@ -233,9 +238,9 @@
   "No-Location": "No Location",
   "none": "none",
   "No-photos-found": "No photos found. If this is your first time opening the app and giving permissions, try restarting the app.",
-  "no-rights-reserved": {
+  "no-rights-reserved-cc0": {
     "comment": "license code",
-    "val": "no rights reserved { $licenseCode }"
+    "val": "no rights reserved (CC0)"
   },
   "NOTES": {
     "comment": "Header for observation description on observation detail",
@@ -244,7 +249,7 @@
   "Notifications": "Notifications",
   "Obscured": "Obscured",
   "Observation": "Observation",
-  "Observation-Attribution": "Observation Copyright:© { $attribution } · { $licenseCode }",
+  "Observation-Attribution": "Observation: © { $attribution } · { $restrictions }",
   "OBSERVATIONS": "OBSERVATIONS",
   "Observations": "Observations",
   "Observations-created-on-iNaturalist": "Observations created on iNaturalist are used by scientists around the world.",
diff --git a/src/i18n/strings.ftl b/src/i18n/strings.ftl
index 2682cde24..bda4ea4c2 100644
--- a/src/i18n/strings.ftl
+++ b/src/i18n/strings.ftl
@@ -46,7 +46,17 @@ Are-you-sure = Are you sure?
 
 Are-you-sure-you-want-to-sign-out = Are you sure you want to sign out? This will delete all your observations on this device. It will not affect any observations you've uploaded to iNaturalist.
 
-attribution_cc_by_nc = some rights reserved { $licenseCode }
+attribution-cc-by = some rights reserved (CC BY)
+
+attribution-cc-by-sa = some rights reserved (CC BY-SA)
+
+attribution-cc-by-nc = some rights reserved (CC BY-NC) 
+
+attribution-cc-by-nd = some rights reserved (CC BY-ND)
+
+attribution-cc-by-nc-sa = some rights reserved (CC BY-NC-SA)
+
+attribution-cc-by-nc-nd = some rights reserved (CC BY-NC-ND)
 
 app-authorized-on-date = { $appName } (authorized on: { $date })
 
@@ -365,7 +375,7 @@ none = none
 No-photos-found = No photos found. If this is your first time opening the app and giving permissions, try restarting the app.
 
 # license code
-no-rights-reserved = no rights reserved { $licenseCode }
+no-rights-reserved-cc0 = no rights reserved (CC0)
 
 # Header for observation description on observation detail
 NOTES = NOTES
@@ -376,7 +386,7 @@ Obscured = Obscured
 
 Observation = Observation
 
-Observation-Attribution = Observation Copyright:© {$attribution} · {$licenseCode}
+Observation-Attribution = Observation: © {$attribution} · {$restrictions}
 
 OBSERVATIONS = OBSERVATIONS
 

From d3071f59e6d0cd9f49e57b15f14807bbbef02c6f Mon Sep 17 00:00:00 2001
From: Ken-ichi Ueda <kenichi.ueda@gmail.com>
Date: Thu, 11 May 2023 11:06:43 -0700
Subject: [PATCH 14/27] Bugfix: coordinates didn't have enough fractional
 digits

Specifies the number of digits in the translation text and not in code. ALso
fixed a few minor problems with FTL comments and allowed UserText to format
children as text, not just with a prop.
---
 src/components/ObsEdit/EvidenceSection.js     |  6 +--
 .../SharedComponents/ObservationLocation.js   |  2 +-
 src/components/SharedComponents/UserText.js   |  6 ++-
 src/i18n/l10n/en.ftl                          | 26 ++++++++-----
 src/i18n/l10n/en.ftl.json                     | 37 +++++++++++++------
 src/i18n/strings.ftl                          | 26 ++++++++-----
 .../ObservationLocation.test.js               |  3 +-
 7 files changed, 66 insertions(+), 40 deletions(-)

diff --git a/src/components/ObsEdit/EvidenceSection.js b/src/components/ObsEdit/EvidenceSection.js
index 7cb4a972c..5103e0278 100644
--- a/src/components/ObsEdit/EvidenceSection.js
+++ b/src/components/ObsEdit/EvidenceSection.js
@@ -56,8 +56,6 @@ const EvidenceSection = ( ): Node => {
   const [showAddEvidenceSheet, setShowAddEvidenceSheet] = useState( false );
   const handleAddEvidence = ( ) => setShowAddEvidenceSheet( true );
 
-  const formatDecimal = coordinate => coordinate && coordinate.toFixed( 6 );
-
   // Hook version of componentWillUnmount. We use a ref to track mounted
   // state (not useState, which might get frozen in a closure for other
   // useEffects), and set it to false in the cleanup cleanup function. The
@@ -99,8 +97,8 @@ const EvidenceSection = ( ): Node => {
       return t( "No-Location" );
     }
     return t( "Lat-Lon-Acc", {
-      latitude: formatDecimal( latitude ),
-      longitude: formatDecimal( longitude ),
+      latitude,
+      longitude,
       accuracy: currentObservation?.positional_accuracy?.toFixed( 0 ) || t( "none" )
     } );
   };
diff --git a/src/components/SharedComponents/ObservationLocation.js b/src/components/SharedComponents/ObservationLocation.js
index 306ab0b12..896a1dc22 100644
--- a/src/components/SharedComponents/ObservationLocation.js
+++ b/src/components/SharedComponents/ObservationLocation.js
@@ -16,7 +16,7 @@ const ObservationLocation = ( { observation, classNameMargin, details }: Props )
   const { t } = useTranslation( );
 
   let displayLocation = checkCamelAndSnakeCase( observation, "placeGuess" );
-  let displayCoords = "";
+  let displayCoords;
   const geoprivacy = checkCamelAndSnakeCase( observation, "geoprivacy" );
 
   if ( !displayLocation ) {
diff --git a/src/components/SharedComponents/UserText.js b/src/components/SharedComponents/UserText.js
index 648a1c2f5..a3c83f4a8 100644
--- a/src/components/SharedComponents/UserText.js
+++ b/src/components/SharedComponents/UserText.js
@@ -82,8 +82,12 @@ type Props = {
 }
 
 const UserText = ( {
-  text, htmlStyle
+  children,
+  htmlStyle,
+  text: textProp
 } : Props ): React.Node => {
+  // Allow stringified children to serve as text if no prop provided
+  const text = textProp || children.toString( );
   const { width } = useWindowDimensions( );
   let html = trim( text );
 
diff --git a/src/i18n/l10n/en.ftl b/src/i18n/l10n/en.ftl
index bda4ea4c2..79d805aa3 100644
--- a/src/i18n/l10n/en.ftl
+++ b/src/i18n/l10n/en.ftl
@@ -831,8 +831,9 @@ No = No
 Discard-Comment = Discard Comment
 Are-you-sure-discard-comment = Are you sure you want to discard this comment?
 
-## Accessibility labels: these are used by screen readers to label actionable elements iOS: https://developer.apple.com/documentation/uikit/uiaccessibilityelement/1619577-accessibilitylabel
-## iOS Guidelines "A string that succinctly identifies the accessibility element." Starts with capital letter, no ending punctuation.
+# Accessibility label for bulk import / photo import button
+# These are used by screen readers to label actionable elements iOS: https://developer.apple.com/documentation/uikit/uiaccessibilityelement/1619577-accessibilitylabel
+# iOS Guidelines "A string that succinctly identifies the accessibility element." Starts with capital letter, no ending punctuation.
 Bulk-importer = Bulk importer
 Camera = Camera
 Close = Close
@@ -925,15 +926,20 @@ Take-photo = Take photo
 # Date formatting using date-fns
 # See complete list of formatting styles: https://date-fns.org/v2.29.3/docs/format
 date-format-short = M/d/yy
+
+# Date formatting using date-fns
+# See complete list of formatting styles: https://date-fns.org/v2.29.3/docs/format
 datetime-format-short = M/d/yy h:mm a
+
+# Date formatting using date-fns
+# See complete list of formatting styles: https://date-fns.org/v2.29.3/docs/format
 date-format-long = PP
 
-# Onboarding text on MyObservations
-# 0-10 observations
+# Onboarding text on MyObservations: 0-10 observations
 As-you-upload-more-observations = As you upload more observations, others in our community may be able to help you identify them!
-# 11-50 observations
+# Onboarding text on MyObservations: 11-50 observations
 Observations-you-upload-to-iNaturalist = Observations you upload to iNaturalist can be used by scientists and researchers worldwide.
-# 51-100 observations
+# Onboarding text on MyObservations: 51-100 observations
 You-can-search-observations-of-any-plant-or-animal = You can search observations of any plant or animal anywhere in the world with Explore!
 
 DISCARD-PHOTOS = DISCARD PHOTOS?
@@ -951,17 +957,17 @@ Failed-to-log-in = Failed to log in
 # Generic error message
 Something-went-wrong = Something went wrong.
 
-#Geoprivacy sheet descriptions
+# Geoprivacy sheet descriptions
 Anyone-using-iNaturalist-can-see = Anyone using iNaturalist can see where this species was observed, and scientists can most easily use it for research.
 The-exact-location-will-be-hidden = The exact location will be hidden publicly, and instead generalized to a larger area. (Threatened and endangered species are automatically obscured).
 The-location-will-not-be-visible = The location will not be visible to others, which means it may be difficult to identify.
 
-#Wild status sheet descriptions
+# Wild status sheet descriptions
 This-is-a-wild-organism = This is a wild organism and wasn’t placed in this location by humans.
 This-organism-was-placed-by-humans = This organism was placed in this location by humans. This applies to things like garden plants, pets, and zoo animals.
 
-# Latitude, longitude, and accuracy
-Lat-Lon-Acc = Lat: { $latitude }, Lon: { $longitude }, Acc: { $accuracy }
+# Latitude, longitude, and accuracy on a single line
+Lat-Lon-Acc = Lat: { NUMBER($latitude, maximumFractionDigits: 6) }, Lon: { NUMBER($longitude, maximumFractionDigits: 6) }, Acc: { $accuracy }
 
 # Missing evidence sheet
 Every-observation-needs = Every observation needs a location, date, and time to be helpful to identifiers. You can edit geoprivacy if you’re concerned about location privacy.
diff --git a/src/i18n/l10n/en.ftl.json b/src/i18n/l10n/en.ftl.json
index 624bda281..2eb0b3383 100644
--- a/src/i18n/l10n/en.ftl.json
+++ b/src/i18n/l10n/en.ftl.json
@@ -555,7 +555,10 @@
   },
   "Discard-Comment": "Discard Comment",
   "Are-you-sure-discard-comment": "Are you sure you want to discard this comment?",
-  "Bulk-importer": "Bulk importer",
+  "Bulk-importer": {
+    "comment": "Accessibility label for bulk import / photo import button\nThese are used by screen readers to label actionable elements iOS: https://developer.apple.com/documentation/uikit/uiaccessibilityelement/1619577-accessibilitylabel\niOS Guidelines \"A string that succinctly identifies the accessibility element.\" Starts with capital letter, no ending punctuation.",
+    "val": "Bulk importer"
+  },
   "Camera": "Camera",
   "Close": "Close",
   "Flag-Item-Other": "Flagged as Other Description Box",
@@ -642,18 +645,24 @@
     "comment": "Date formatting using date-fns\nSee complete list of formatting styles: https://date-fns.org/v2.29.3/docs/format",
     "val": "M/d/yy"
   },
-  "datetime-format-short": "M/d/yy h:mm a",
-  "date-format-long": "PP",
+  "datetime-format-short": {
+    "comment": "Date formatting using date-fns\nSee complete list of formatting styles: https://date-fns.org/v2.29.3/docs/format",
+    "val": "M/d/yy h:mm a"
+  },
+  "date-format-long": {
+    "comment": "Date formatting using date-fns\nSee complete list of formatting styles: https://date-fns.org/v2.29.3/docs/format",
+    "val": "PP"
+  },
   "As-you-upload-more-observations": {
-    "comment": "Onboarding text on MyObservations\n0-10 observations",
+    "comment": "Onboarding text on MyObservations: 0-10 observations",
     "val": "As you upload more observations, others in our community may be able to help you identify them!"
   },
   "Observations-you-upload-to-iNaturalist": {
-    "comment": "11-50 observations",
+    "comment": "Onboarding text on MyObservations: 11-50 observations",
     "val": "Observations you upload to iNaturalist can be used by scientists and researchers worldwide."
   },
   "You-can-search-observations-of-any-plant-or-animal": {
-    "comment": "51-100 observations",
+    "comment": "Onboarding text on MyObservations: 51-100 observations",
     "val": "You can search observations of any plant or animal anywhere in the world with Explore!"
   },
   "DISCARD-PHOTOS": "DISCARD PHOTOS?",
@@ -671,16 +680,20 @@
     "comment": "Generic error message",
     "val": "Something went wrong."
   },
-  "#Geoprivacy sheet descriptions": "",
-  "Anyone-using-iNaturalist-can-see": "Anyone using iNaturalist can see where this species was observed, and scientists can most easily use it for research.",
+  "Anyone-using-iNaturalist-can-see": {
+    "comment": "Geoprivacy sheet descriptions",
+    "val": "Anyone using iNaturalist can see where this species was observed, and scientists can most easily use it for research."
+  },
   "The-exact-location-will-be-hidden": "The exact location will be hidden publicly, and instead generalized to a larger area. (Threatened and endangered species are automatically obscured).",
   "The-location-will-not-be-visible": "The location will not be visible to others, which means it may be difficult to identify.",
-  "#Wild status sheet descriptions": "",
-  "This-is-a-wild-organism": "This is a wild organism and wasn’t placed in this location by humans.",
+  "This-is-a-wild-organism": {
+    "comment": "Wild status sheet descriptions",
+    "val": "This is a wild organism and wasn’t placed in this location by humans."
+  },
   "This-organism-was-placed-by-humans": "This organism was placed in this location by humans. This applies to things like garden plants, pets, and zoo animals.",
   "Lat-Lon-Acc": {
-    "comment": "Latitude, longitude, and accuracy",
-    "val": "Lat: { $latitude }, Lon: { $longitude }, Acc: { $accuracy }"
+    "comment": "Latitude, longitude, and accuracy on a single line",
+    "val": "Lat: { NUMBER($latitude, maximumFractionDigits: \"6\") }, Lon: { NUMBER($longitude, maximumFractionDigits: \"6\") }, Acc: { $accuracy }"
   },
   "Every-observation-needs": {
     "comment": "Missing evidence sheet",
diff --git a/src/i18n/strings.ftl b/src/i18n/strings.ftl
index bda4ea4c2..79d805aa3 100644
--- a/src/i18n/strings.ftl
+++ b/src/i18n/strings.ftl
@@ -831,8 +831,9 @@ No = No
 Discard-Comment = Discard Comment
 Are-you-sure-discard-comment = Are you sure you want to discard this comment?
 
-## Accessibility labels: these are used by screen readers to label actionable elements iOS: https://developer.apple.com/documentation/uikit/uiaccessibilityelement/1619577-accessibilitylabel
-## iOS Guidelines "A string that succinctly identifies the accessibility element." Starts with capital letter, no ending punctuation.
+# Accessibility label for bulk import / photo import button
+# These are used by screen readers to label actionable elements iOS: https://developer.apple.com/documentation/uikit/uiaccessibilityelement/1619577-accessibilitylabel
+# iOS Guidelines "A string that succinctly identifies the accessibility element." Starts with capital letter, no ending punctuation.
 Bulk-importer = Bulk importer
 Camera = Camera
 Close = Close
@@ -925,15 +926,20 @@ Take-photo = Take photo
 # Date formatting using date-fns
 # See complete list of formatting styles: https://date-fns.org/v2.29.3/docs/format
 date-format-short = M/d/yy
+
+# Date formatting using date-fns
+# See complete list of formatting styles: https://date-fns.org/v2.29.3/docs/format
 datetime-format-short = M/d/yy h:mm a
+
+# Date formatting using date-fns
+# See complete list of formatting styles: https://date-fns.org/v2.29.3/docs/format
 date-format-long = PP
 
-# Onboarding text on MyObservations
-# 0-10 observations
+# Onboarding text on MyObservations: 0-10 observations
 As-you-upload-more-observations = As you upload more observations, others in our community may be able to help you identify them!
-# 11-50 observations
+# Onboarding text on MyObservations: 11-50 observations
 Observations-you-upload-to-iNaturalist = Observations you upload to iNaturalist can be used by scientists and researchers worldwide.
-# 51-100 observations
+# Onboarding text on MyObservations: 51-100 observations
 You-can-search-observations-of-any-plant-or-animal = You can search observations of any plant or animal anywhere in the world with Explore!
 
 DISCARD-PHOTOS = DISCARD PHOTOS?
@@ -951,17 +957,17 @@ Failed-to-log-in = Failed to log in
 # Generic error message
 Something-went-wrong = Something went wrong.
 
-#Geoprivacy sheet descriptions
+# Geoprivacy sheet descriptions
 Anyone-using-iNaturalist-can-see = Anyone using iNaturalist can see where this species was observed, and scientists can most easily use it for research.
 The-exact-location-will-be-hidden = The exact location will be hidden publicly, and instead generalized to a larger area. (Threatened and endangered species are automatically obscured).
 The-location-will-not-be-visible = The location will not be visible to others, which means it may be difficult to identify.
 
-#Wild status sheet descriptions
+# Wild status sheet descriptions
 This-is-a-wild-organism = This is a wild organism and wasn’t placed in this location by humans.
 This-organism-was-placed-by-humans = This organism was placed in this location by humans. This applies to things like garden plants, pets, and zoo animals.
 
-# Latitude, longitude, and accuracy
-Lat-Lon-Acc = Lat: { $latitude }, Lon: { $longitude }, Acc: { $accuracy }
+# Latitude, longitude, and accuracy on a single line
+Lat-Lon-Acc = Lat: { NUMBER($latitude, maximumFractionDigits: 6) }, Lon: { NUMBER($longitude, maximumFractionDigits: 6) }, Acc: { $accuracy }
 
 # Missing evidence sheet
 Every-observation-needs = Every observation needs a location, date, and time to be helpful to identifiers. You can edit geoprivacy if you’re concerned about location privacy.
diff --git a/tests/unit/components/SharedComponents/ObservationLocation.test.js b/tests/unit/components/SharedComponents/ObservationLocation.test.js
index 79e641f3f..a79a1bc02 100644
--- a/tests/unit/components/SharedComponents/ObservationLocation.test.js
+++ b/tests/unit/components/SharedComponents/ObservationLocation.test.js
@@ -65,7 +65,6 @@ describe( "ObservationLocation", () => {
     render(
       <ObservationLocation observation={mockObservation} details />
     );
-
-    expect( await screen.findByText( expectedResult ) ).toBeTruthy();
+    expect( await screen.findByText( new RegExp( expectedResult ) ) ).toBeTruthy();
   } );
 } );

From 05aa832171cf00a7523950f912cc4eb8ccee6c17 Mon Sep 17 00:00:00 2001
From: Ken-ichi Ueda <kenichi.ueda@gmail.com>
Date: Thu, 11 May 2023 11:45:09 -0700
Subject: [PATCH 15/27] Bugfix: edit button on ObsDetails wasn't working

For the record, I don't think we should abandon the react-navigation header
here. There's definitely a way to specify a transparent header, we just need
to figure out how to style it correctly.
---
 src/components/ObsDetails/ObsDetails.js | 34 +++++++++----------------
 1 file changed, 12 insertions(+), 22 deletions(-)

diff --git a/src/components/ObsDetails/ObsDetails.js b/src/components/ObsDetails/ObsDetails.js
index c494eaba5..c7cf23832 100644
--- a/src/components/ObsDetails/ObsDetails.js
+++ b/src/components/ObsDetails/ObsDetails.js
@@ -25,12 +25,11 @@ import { formatISO } from "date-fns";
 import _ from "lodash";
 import { RealmContext } from "providers/contexts";
 import type { Node } from "react";
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { Alert, LogBox } from "react-native";
 import {
   ActivityIndicator,
-  Button as IconButton,
-  useTheme
+  Button as IconButton
 } from "react-native-paper";
 import createUUID from "react-native-uuid";
 import IconMaterial from "react-native-vector-icons/MaterialIcons";
@@ -76,7 +75,6 @@ const ObsDetails = (): Node => {
   const [showCommentBox, setShowCommentBox] = useState( false );
   const [addingComment, setAddingComment] = useState( false );
   const [comments, setComments] = useState( [] );
-  const theme = useTheme();
 
   const queryClient = useQueryClient();
 
@@ -204,24 +202,10 @@ const ObsDetails = (): Node => {
     }
   }, [localObservation, markViewedMutation, uuid] );
 
-  useEffect( () => {
-    const obsCreatedLocally = observation?.id === null;
-    const obsOwnedByCurrentUser = observation?.user?.id === currentUser?.id;
-
-    const navToObsEdit = () => navigation.navigate( "ObsEdit", { uuid: observation?.uuid } );
-    const editIcon = () => ( obsCreatedLocally || obsOwnedByCurrentUser ) && (
-      <IconButton
-        icon="pencil"
-        onPress={navToObsEdit}
-        textColor={theme.colors.primary}
-        accessibilityLabel={t( "Navigate-to-edit-observation" )}
-      />
-    );
-
-    navigation.setOptions( {
-      headerRight: editIcon
-    } );
-  }, [navigation, observation, currentUser, t, theme] );
+  const navToObsEdit = useCallback(
+    ( ) => navigation.navigate( "ObsEdit", { uuid: observation?.uuid } ),
+    [navigation, observation]
+  );
 
   useEffect( () => {
     // set initial comments for activity currentTabId
@@ -349,8 +333,14 @@ const ObsDetails = (): Node => {
       return (
         <View className="bg-black">
           <PhotoScroll photos={photos} />
+          {/*
+            TODO: react-navigation supports a lot of styling options including
+            a transparent header, so this custom header probably is not
+            necessary ~~~kueda
+          */}
           {/* TODO: a11y props are not passed down into this 3.party */}
           <IconButton
+            onPress={navToObsEdit}
             icon="pencil"
             textColor={colors.white}
             className="absolute top-3 right-3"

From 0126210489b8346313ad4ca7b76749f331f1a6d5 Mon Sep 17 00:00:00 2001
From: Angie Ta <angie@inaturalist.org>
Date: Thu, 18 May 2023 10:54:30 -0700
Subject: [PATCH 16/27] DQA Styling, inital voting/checks functionality

---
 src/api/qualityMetrics.js                     |  47 +++
 .../ObsDetails/DataQualityAssessment.js       | 288 ++++++++++++++++++
 src/components/ObsDetails/DetailsTab.js       |  14 +-
 src/components/ObsDetails/ObsDetails.js       |   2 +-
 src/i18n/l10n/en.ftl                          |  47 +++
 src/i18n/l10n/en.ftl.json                     |  33 ++
 src/i18n/strings.ftl                          |  47 +++
 src/navigation/BottomTabNavigator/index.js    |  11 +-
 8 files changed, 485 insertions(+), 4 deletions(-)
 create mode 100644 src/api/qualityMetrics.js
 create mode 100644 src/components/ObsDetails/DataQualityAssessment.js

diff --git a/src/api/qualityMetrics.js b/src/api/qualityMetrics.js
new file mode 100644
index 000000000..d023e354a
--- /dev/null
+++ b/src/api/qualityMetrics.js
@@ -0,0 +1,47 @@
+// @flow
+
+import inatjs from "inaturalistjs";
+
+import handleError from "./error";
+
+const setQualityMetric = async (
+  params: Object = {},
+  opts: Object = {}
+): Promise<any> => {
+  try {
+    const response = await inatjs.observations.setQualityMetric( params, opts );
+    return response.results;
+  } catch ( e ) {
+    return handleError( e );
+  }
+};
+
+const deleteQualityMetric = async (
+  params: Object = {},
+  opts: Object = {}
+): Promise<any> => {
+  try {
+    const { results } = await inatjs.observations.setQualityMetric( params, opts );
+    return results;
+  } catch ( e ) {
+    return handleError( e );
+  }
+};
+
+const fetchQualityMetrics = async (
+  params: Object = {},
+  opts: Object = {}
+): Promise<any> => {
+  try {
+    const response = await inatjs.observations.qualityMetrics( params, opts );
+    return response.results;
+  } catch ( e ) {
+    return handleError( e );
+  }
+};
+
+export {
+  deleteQualityMetric,
+  fetchQualityMetrics,
+  setQualityMetric
+};
diff --git a/src/components/ObsDetails/DataQualityAssessment.js b/src/components/ObsDetails/DataQualityAssessment.js
new file mode 100644
index 000000000..00dec074c
--- /dev/null
+++ b/src/components/ObsDetails/DataQualityAssessment.js
@@ -0,0 +1,288 @@
+// @flow
+import { useRoute } from "@react-navigation/native";
+import {
+  Body3,
+  Divider,
+  Heading4,
+  INatIcon,
+  INatIconButton,
+  List1,
+  List2,
+  ScrollViewWrapper
+} from "components/SharedComponents";
+import QualityGradeStatus from "components/SharedComponents/QualityGradeStatus/QualityGradeStatus";
+import { View } from "components/styledComponents";
+import { t } from "i18next";
+import { useEffect, useState } from "react";
+import * as React from "react";
+import { useTheme } from "react-native-paper";
+import useAuthenticatedMutation from "sharedHooks/useAuthenticatedMutation";
+import {fetchQualityMetrics, setQualityMetric} from "api/qualityMetrics";
+
+
+const titleOption = option => {
+  switch ( option ) {
+  case "research":
+    return t( "Data-quality-assessment-title-research" );
+  case "needs_id":
+    return t( "Data-quality-assessment-title-needs-id" );
+  default:
+    return t( "Data-quality-assessment-title-casual" );
+  }
+};
+
+const titleDescription = option => {
+  switch ( option ) {
+  case "research":
+    return t( "Data-quality-assessment-description-research" );
+  case "needs_id":
+    return t( "Data-quality-assessment-description-needs-id" );
+  default:
+    return t( "Data-quality-assessment-description-casual" );
+  }
+};
+
+const DataQualityAssessment = ( ): React.Node => {
+  const { params } = useRoute( );
+  const { observationUUID } = params;
+  const { qualityGrade } = params;
+  const isResearchGrade = qualityGrade === "research";
+  const theme = useTheme( );
+  const sectionClass = "flex-row ml-[15px] my-[14px] space-x-[11px]";
+  const voteClass = "flex-row mx-[15px] my-[7px] justify-between items-center";
+  const listTextClass = "flex-row space-x-[11px]";
+  const [qualityMetrics, setQualityMetrics] = useState( [] );
+
+  const createFetchQualityMetricMutation = useAuthenticatedMutation(
+    ( PARAMS, optsWithAuth ) => fetchQualityMetrics( PARAMS, optsWithAuth ),
+    {
+      onSuccess: response => {
+        setQualityMetrics( response );
+      },
+      onError: error => {
+        console.log( "error", error );
+      }
+    }
+  );
+  useEffect( ( ) => {
+    if ( qualityMetrics.length === 0 ) {
+      createFetchQualityMetricMutation.mutate( { id: observationUUID, fields: "metric,agree" } );
+    }
+    // createFetchQualityMetricMutation.mutate( { id: observationUUID, fields: "metric,agree" } );
+  }, [createFetchQualityMetricMutation, qualityMetrics, observationUUID] );
+
+  const createQualityMetricMutation = useAuthenticatedMutation(
+    ( PARAMS, optsWithAuth ) => setQualityMetric( PARAMS, optsWithAuth ),
+    {
+      onSuccess: response => {
+        console.log( "success", response );
+      },
+      onError: error => {
+        console.log( "error", error );
+      }
+    }
+  );
+
+  const setMetricVote = ( metric, vote ) => {
+    const PARAMS = {
+      id: observationUUID,
+      metric,
+      agree: vote
+    };
+    createQualityMetricMutation.mutate( PARAMS );
+  };
+
+  const checkTest = metric => {
+    const match = qualityMetrics.find( element => element.metric === metric );
+    if ( match && match.agree === true ) { return true; }
+    if ( match && match.agree === false ) { return false; } 
+    return null;
+  };
+
+  const renderIndicator = metric => {
+    const ifAgree = checkTest( metric );
+    if ( ifAgree || ifAgree === null ) {
+      return (
+        <INatIcon name="checkmark-circle" size={19} color={theme.colors.secondary} /> );
+    }
+    return (
+      <INatIcon name="triangle-exclamation" size={19} color={theme.colors.error} />
+    );
+  };
+
+  const renderVoteButtons = metric => {
+    const ifAgree = checkTest( metric );
+    if ( ifAgree === null ) { // no vote made yet
+      return (
+        <View className="flex-row">
+          <INatIconButton
+            icon="arrow-up-bold-circle-outline"
+            size={33}
+            onPress={() => setMetricVote( metric, true )}
+          />
+          <INatIconButton
+            icon="arrow-down-bold-circle-outline"
+            size={33}
+            onPress={() => setMetricVote( metric, false )}
+          />
+        </View>
+      );
+    }
+
+    return (
+      <View className="flex-row">
+        {ifAgree // if vote true
+          ? (
+            <INatIconButton
+              icon="arrow-up-bold-circle"
+              size={33}
+              color={theme.colors.secondary}
+            />
+          )
+          : (
+            <INatIconButton
+              icon="arrow-up-bold-circle-outline"
+              size={33}
+              onPress={() => setMetricVote( metric, true )}
+            />
+          )}
+        {!ifAgree // if vote false
+          ? (
+            <INatIconButton
+              icon="arrow-down-bold-circle"
+              size={33}
+              color={theme.colors.error}
+            />
+          )
+          : (
+            <INatIconButton
+              icon="arrow-down-bold-circle-outline"
+              size={33}
+              onPress={() => setMetricVote( metric, false )}
+            />
+          )}
+      </View>
+    );
+  };
+
+  return (
+    <ScrollViewWrapper testID="DataQualityAssessment">
+      <View className="mx-[26px] my-[19px] space-y-[9px]">
+        <QualityGradeStatus
+          qualityGrade={qualityGrade}
+          color={( qualityGrade === "research" )
+            ? theme.colors.secondary : theme.colors.primary}
+        />
+        <View className="flex-row space-x-[7px]">
+          {isResearchGrade
+          && (
+            <INatIcon
+              name="checkmark-circle"
+              size={19}
+              color={theme.colors.secondary}
+            />
+          )}
+          <List1 className="text-black">
+            {titleOption( qualityGrade )}
+          </List1>
+        </View>
+        <List2 className="text-black">
+          {titleDescription( qualityGrade )}
+        </List2>
+      </View>
+      <Divider />
+
+      <View className={sectionClass}>
+        {renderIndicator( ) }
+        <Body3>{t( "Data-quality-assessment-date-specified" )}</Body3>
+      </View>
+      <Divider />
+
+      <View className={sectionClass}>
+        {renderIndicator( )}
+        <Body3>{t( "Data-quality-assessment-location-specified" )}</Body3>
+      </View>
+      <Divider />
+
+      <View className={sectionClass}>
+        {renderIndicator()}
+        <Body3>{t( "Data-quality-assessment-has-photos-or-sounds" )}</Body3>
+      </View>
+      <Divider />
+
+      <View className={sectionClass}>
+        {renderIndicator()}
+        <Body3>{t( "Data-quality-assessment-id-supported-by-two-or-more" )}</Body3>
+      </View>
+      <Divider />
+
+      <View className={sectionClass}>
+        {renderIndicator()}
+        <Body3>{t( "Data-quality-assessment-community-taxon-at-species-level-or-lower" )}</Body3>
+      </View>
+      <Divider />
+
+      <View className={voteClass}>
+        <View className={listTextClass}>
+          {renderIndicator( "date" )}
+          <Body3>{t( "Data-quality-assessment-date-is-accurate" )}</Body3>
+        </View>
+        {renderVoteButtons( "date" )}
+      </View>
+      <Divider />
+
+      <View className={voteClass}>
+        <View className={listTextClass}>
+          {renderIndicator( "location" )}
+          <Body3>{t( "Data-quality-assessment-location-is-accurate" )}</Body3>
+        </View>
+        {renderVoteButtons( "location" )}
+      </View>
+      <Divider />
+
+      <View className={voteClass}>
+        <View className={listTextClass}>
+          {renderIndicator( "wild" )}
+          <Body3>{t( "Data-quality-assessment-organism-is-wild" )}</Body3>
+        </View>
+        {renderVoteButtons( "wild" )}
+      </View>
+      <Divider />
+
+      <View className={voteClass}>
+        <View className={listTextClass}>
+          {renderIndicator( "evidence" )}
+          <Body3>{t( "Data-quality-assessment-evidence-of-organism" )}</Body3>
+        </View>
+        {renderVoteButtons( "evidence" )}
+      </View>
+      <Divider />
+
+      <View className={voteClass}>
+        <View className={listTextClass}>
+          {renderIndicator( "recent" )}
+          <Body3>{t( "Data-quality-assessment-recent-evidence-of-organism" )}</Body3>
+        </View>
+        {renderVoteButtons( "recent" )}
+      </View>
+      <Divider />
+
+      <View className="flex-row bg-lightGray px-[15px] py-[7px] mt-[20px]">
+        <Body3 className="shrink">
+          {t(
+            "Data-quality-assessment-can-taxon-still-be-confirmed-improved-based-on-the-evidence"
+          )}
+        </Body3>
+        {renderVoteButtons( "needs_id" )}
+      </View>
+
+      <View className="mt-[30px] mx-[15px] space-y-[11px]">
+        <Heading4>{t( "ABOUT-THE-DQA" )}</Heading4>
+        <List2>{t( "About-the-DQA-description" )}</List2>
+      </View>
+
+    </ScrollViewWrapper>
+  );
+};
+
+export default DataQualityAssessment;
diff --git a/src/components/ObsDetails/DetailsTab.js b/src/components/ObsDetails/DetailsTab.js
index 0c8bdf986..87912e5ad 100644
--- a/src/components/ObsDetails/DetailsTab.js
+++ b/src/components/ObsDetails/DetailsTab.js
@@ -1,5 +1,6 @@
 // @flow
 
+import { useNavigation } from "@react-navigation/native";
 import {
   Body4,
   Button,
@@ -22,7 +23,8 @@ import Attribution from "./Attribution";
 import checkCamelAndSnakeCase from "./helpers/checkCamelAndSnakeCase";
 
 type Props = {
-  observation: Object
+  observation: Object,
+  uuid:string
 }
 
 const qualityGradeOption = option => {
@@ -51,9 +53,11 @@ const headingClass = "mt-[20px] mb-[11px] text-black";
 const sectionClass = "mx-[15px] mb-[20px]";
 
 const DetailsTab = ( { observation }: Props ): Node => {
+  const navigation = useNavigation( );
   const application = observation?.application?.name;
   const [locationKebabMenuVisible, setLocationKebabMenuVisible] = useState( false );
   const qualityGrade = observation?.quality_grade;
+  const observationUUID = observation.uuid;
 
   const displayQualityGradeOption = option => {
     const labelClassName = ( qualityGrade === option ) ? "font-bold" : "";
@@ -128,7 +132,13 @@ const DetailsTab = ( { observation }: Props ): Node => {
           <Body4>
             {qualityGradeDescription( qualityGrade )}
           </Body4>
-          <Button text={t( "VIEW-DATA-QUALITY-ASSESSEMENT" )} />
+          <Button
+            text={t( "VIEW-DATA-QUALITY-ASSESSEMENT" )}
+            onPress={() => navigation.navigate( "DataQualityAssessment", {
+              qualityGrade,
+              observationUUID
+            } )}
+          />
         </View>
       </View>
       <Divider />
diff --git a/src/components/ObsDetails/ObsDetails.js b/src/components/ObsDetails/ObsDetails.js
index c7cf23832..07492a632 100644
--- a/src/components/ObsDetails/ObsDetails.js
+++ b/src/components/ObsDetails/ObsDetails.js
@@ -408,7 +408,7 @@ const ObsDetails = (): Node => {
           />
         </HideView>
         <HideView noInitialRender show={currentTabId === DETAILS_TAB_ID}>
-          <DetailsTab observation={observation} />
+          <DetailsTab observation={observation} uuid={uuid} />
         </HideView>
         {addingComment && (
           <View className="flex-row items-center justify-center">
diff --git a/src/i18n/l10n/en.ftl b/src/i18n/l10n/en.ftl
index 79d805aa3..b7dd8fd69 100644
--- a/src/i18n/l10n/en.ftl
+++ b/src/i18n/l10n/en.ftl
@@ -3,6 +3,11 @@ ABOUT = ABOUT
 
 About-iNaturalist = About iNaturalist
 
+# About the Data Quality Assement
+ABOUT-THE-DQA = ABOUT THE DQA
+
+About-the-DQA-description = The Quality Grade summarizes the accuracy, precision, completeness, relevance, and appropriateness of an iNaturalist observation as biodiversity data. Some attributes are automatically determined, while others are subject to a vote by iNat users. iNaturalist shares licensed "Research Grade" observations with a number of data partners for use in science and conservation.
+
 Accept-community-identifications = Accept community identifications
 
 Account = Account
@@ -114,12 +119,54 @@ CREATE-YOUR-FIRST-OBSERVATION = CREATE YOUR FIRST OBSERVATION
 
 DATA-QUALITY = DATA QUALITY
 
+DATA-QUALITY-ASSESSMENT = DATA QUALITY ASSESSMENT
+
+# declares the current data quality status of the observation 
+Data-quality-assessment-title-research = This observation is Research Grade!
+
+Data-quality-assessment-title-needs-id = This observation Needs ID
+
+Data-quality-assessment-title-casual = This observation is Casual Grade
+
+# description for different quality grades in the DQA
+Data-quality-assessment-description-research = It can now be used for research and featured on other websites.
+
+Data-quality-assessment-description-research-not-licensed = However, it is not licensed for re-use and will not be shared with data repositories that respect license choices.
+
+Data-quality-assessment-description-needs-id = This observation has not yet met the conditions required to meet research grade status:
+
+Data-quality-assessment-description-casual = This observation has not met the conditions required to meet research grade status.
+
+# checklist test for Data Quality Assessment of Observation Details 
+Data-quality-assessment-date-specified = Date specified
+
+Data-quality-assessment-location-specified = Location specified
+
+Data-quality-assessment-has-photos-or-sounds = Has Photos or Sounds
+
+Data-quality-assessment-id-supported-by-two-or-more = Has ID supported by two or more
+
+Data-quality-assessment-community-taxon-at-species-level-or-lower = Community taxon at species level or lower
+
+Data-quality-assessment-date-is-accurate = Date is accurate
+
+Data-quality-assessment-location-is-accurate = Location is accurate
+
+Data-quality-assessment-organism-is-wild = Organism is wild
+
+Data-quality-assessment-evidence-of-organism = Evidence of organism
+
+Data-quality-assessment-recent-evidence-of-organism = Recent evidence of an organism
+
+Data-quality-assessment-can-taxon-still-be-confirmed-improved-based-on-the-evidence = Based on the evidence, can the Community Taxon still be improved?
+
 Data-quality-research-description = This observation has enough identifications to be considered resarch grade
 
 Data-quality-needs-id-description = This observation needs more identifications to reach research grade
 
 Data-quality-casual-description = This observation needs more information verified to be considered verifiable
 
+
 Date = Date
 
 DATE = DATE
diff --git a/src/i18n/l10n/en.ftl.json b/src/i18n/l10n/en.ftl.json
index 2eb0b3383..18364be58 100644
--- a/src/i18n/l10n/en.ftl.json
+++ b/src/i18n/l10n/en.ftl.json
@@ -4,6 +4,11 @@
     "val": "ABOUT"
   },
   "About-iNaturalist": "About iNaturalist",
+  "ABOUT-THE-DQA": {
+    "comment": "About the Data Quality Assement",
+    "val": "ABOUT THE DQA"
+  },
+  "About-the-DQA-description": "The Quality Grade summarizes the accuracy, precision, completeness, relevance, and appropriateness of an iNaturalist observation as biodiversity data. Some attributes are automatically determined, while others are subject to a vote by iNat users. iNaturalist shares licensed \"Research Grade\" observations with a number of data partners for use in science and conservation.",
   "Accept-community-identifications": "Accept community identifications",
   "Account": "Account",
   "ADD-AN-ID": "ADD AN ID",
@@ -72,6 +77,34 @@
   "Create-an-iNaturalist-account-to-save-your-observations": "Create an iNaturalist account to save your observations and contribute them to science.",
   "CREATE-YOUR-FIRST-OBSERVATION": "CREATE YOUR FIRST OBSERVATION",
   "DATA-QUALITY": "DATA QUALITY",
+  "DATA-QUALITY-ASSESSMENT": "DATA QUALITY ASSESSMENT",
+  "Data-quality-assessment-title-research": {
+    "comment": "declares the current data quality status of the observation ",
+    "val": "This observation is Research Grade!"
+  },
+  "Data-quality-assessment-title-needs-id": "This observation Needs ID",
+  "Data-quality-assessment-title-casual": "This observation is Casual Grade",
+  "Data-quality-assessment-description-research": {
+    "comment": "description for different quality grades in the DQA",
+    "val": "It can now be used for research and featured on other websites."
+  },
+  "Data-quality-assessment-description-research-not-licensed": "However, it is not licensed for re-use and will not be shared with data repositories that respect license choices.",
+  "Data-quality-assessment-description-needs-id": "This observation has not yet met the conditions required to meet research grade status:",
+  "Data-quality-assessment-description-casual": "This observation has not met the conditions required to meet research grade status.",
+  "Data-quality-assessment-date-specified": {
+    "comment": "checklist test for Data Quality Assessment of Observation Details ",
+    "val": "Date specified"
+  },
+  "Data-quality-assessment-location-specified": "Location specified",
+  "Data-quality-assessment-has-photos-or-sounds": "Has Photos or Sounds",
+  "Data-quality-assessment-id-supported-by-two-or-more": "Has ID supported by two or more",
+  "Data-quality-assessment-community-taxon-at-species-level-or-lower": "Community taxon at species level or lower",
+  "Data-quality-assessment-date-is-accurate": "Date is accurate",
+  "Data-quality-assessment-location-is-accurate": "Location is accurate",
+  "Data-quality-assessment-organism-is-wild": "Organism is wild",
+  "Data-quality-assessment-evidence-of-organism": "Evidence of organism",
+  "Data-quality-assessment-recent-evidence-of-organism": "Recent evidence of an organism",
+  "Data-quality-assessment-can-taxon-still-be-confirmed-improved-based-on-the-evidence": "Based on the evidence, can the Community Taxon still be improved?",
   "Data-quality-research-description": "This observation has enough identifications to be considered resarch grade",
   "Data-quality-needs-id-description": "This observation needs more identifications to reach research grade",
   "Data-quality-casual-description": "This observation needs more information verified to be considered verifiable",
diff --git a/src/i18n/strings.ftl b/src/i18n/strings.ftl
index 79d805aa3..b7dd8fd69 100644
--- a/src/i18n/strings.ftl
+++ b/src/i18n/strings.ftl
@@ -3,6 +3,11 @@ ABOUT = ABOUT
 
 About-iNaturalist = About iNaturalist
 
+# About the Data Quality Assement
+ABOUT-THE-DQA = ABOUT THE DQA
+
+About-the-DQA-description = The Quality Grade summarizes the accuracy, precision, completeness, relevance, and appropriateness of an iNaturalist observation as biodiversity data. Some attributes are automatically determined, while others are subject to a vote by iNat users. iNaturalist shares licensed "Research Grade" observations with a number of data partners for use in science and conservation.
+
 Accept-community-identifications = Accept community identifications
 
 Account = Account
@@ -114,12 +119,54 @@ CREATE-YOUR-FIRST-OBSERVATION = CREATE YOUR FIRST OBSERVATION
 
 DATA-QUALITY = DATA QUALITY
 
+DATA-QUALITY-ASSESSMENT = DATA QUALITY ASSESSMENT
+
+# declares the current data quality status of the observation 
+Data-quality-assessment-title-research = This observation is Research Grade!
+
+Data-quality-assessment-title-needs-id = This observation Needs ID
+
+Data-quality-assessment-title-casual = This observation is Casual Grade
+
+# description for different quality grades in the DQA
+Data-quality-assessment-description-research = It can now be used for research and featured on other websites.
+
+Data-quality-assessment-description-research-not-licensed = However, it is not licensed for re-use and will not be shared with data repositories that respect license choices.
+
+Data-quality-assessment-description-needs-id = This observation has not yet met the conditions required to meet research grade status:
+
+Data-quality-assessment-description-casual = This observation has not met the conditions required to meet research grade status.
+
+# checklist test for Data Quality Assessment of Observation Details 
+Data-quality-assessment-date-specified = Date specified
+
+Data-quality-assessment-location-specified = Location specified
+
+Data-quality-assessment-has-photos-or-sounds = Has Photos or Sounds
+
+Data-quality-assessment-id-supported-by-two-or-more = Has ID supported by two or more
+
+Data-quality-assessment-community-taxon-at-species-level-or-lower = Community taxon at species level or lower
+
+Data-quality-assessment-date-is-accurate = Date is accurate
+
+Data-quality-assessment-location-is-accurate = Location is accurate
+
+Data-quality-assessment-organism-is-wild = Organism is wild
+
+Data-quality-assessment-evidence-of-organism = Evidence of organism
+
+Data-quality-assessment-recent-evidence-of-organism = Recent evidence of an organism
+
+Data-quality-assessment-can-taxon-still-be-confirmed-improved-based-on-the-evidence = Based on the evidence, can the Community Taxon still be improved?
+
 Data-quality-research-description = This observation has enough identifications to be considered resarch grade
 
 Data-quality-needs-id-description = This observation needs more identifications to reach research grade
 
 Data-quality-casual-description = This observation needs more information verified to be considered verifiable
 
+
 Date = Date
 
 DATE = DATE
diff --git a/src/navigation/BottomTabNavigator/index.js b/src/navigation/BottomTabNavigator/index.js
index ef0eca6a5..caf2bd8a4 100644
--- a/src/navigation/BottomTabNavigator/index.js
+++ b/src/navigation/BottomTabNavigator/index.js
@@ -9,6 +9,7 @@ import Login from "components/LoginSignUp/Login";
 import Messages from "components/Messages/Messages";
 import MyObservationsContainer from "components/MyObservations/MyObservationsContainer";
 import NetworkLogging from "components/NetworkLogging";
+import DataQualityAssessment from "components/ObsDetails/DataQualityAssessment";
 import ObsDetails from "components/ObsDetails/ObsDetails";
 import ObsEdit from "components/ObsEdit/ObsEdit";
 import GroupPhotos from "components/PhotoImporter/GroupPhotos";
@@ -226,7 +227,7 @@ const BottomTabs = () => {
           component={ObsDetails}
           options={{
             headerTitle: t( "Observation" ),
-            headerShown: false,
+            ...hideHeader,
             unmountOnBlur: true
           }}
         />
@@ -291,6 +292,14 @@ const BottomTabs = () => {
             // title: t( "EDIT-LOCATION" )
           }}
         />
+        <Tab.Screen
+          name="DataQualityAssessment"
+          component={DataQualityAssessment}
+          options={{
+            headerTitle: t( "DATA-QUALITY-ASSESSMENT" ),
+            unmountOnBlur: true
+          }}
+        />
         <Tab.Screen name="Login" component={MortalLogin} options={hideHeader} />
       </Tab.Navigator>
     </Mortal>

From 57e342bb39057282a0edb731f61600661189cd6e Mon Sep 17 00:00:00 2001
From: Angie Ta <angie@inaturalist.org>
Date: Thu, 18 May 2023 11:00:24 -0700
Subject: [PATCH 17/27] qualityMetrics import

---
 src/components/ObsDetails/DataQualityAssessment.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/ObsDetails/DataQualityAssessment.js b/src/components/ObsDetails/DataQualityAssessment.js
index 00dec074c..bec01c168 100644
--- a/src/components/ObsDetails/DataQualityAssessment.js
+++ b/src/components/ObsDetails/DataQualityAssessment.js
@@ -1,5 +1,6 @@
 // @flow
 import { useRoute } from "@react-navigation/native";
+import { fetchQualityMetrics, setQualityMetric } from "api/qualityMetrics";
 import {
   Body3,
   Divider,
@@ -17,8 +18,6 @@ import { useEffect, useState } from "react";
 import * as React from "react";
 import { useTheme } from "react-native-paper";
 import useAuthenticatedMutation from "sharedHooks/useAuthenticatedMutation";
-import {fetchQualityMetrics, setQualityMetric} from "api/qualityMetrics";
-
 
 const titleOption = option => {
   switch ( option ) {
@@ -95,7 +94,7 @@ const DataQualityAssessment = ( ): React.Node => {
   const checkTest = metric => {
     const match = qualityMetrics.find( element => element.metric === metric );
     if ( match && match.agree === true ) { return true; }
-    if ( match && match.agree === false ) { return false; } 
+    if ( match && match.agree === false ) { return false; }
     return null;
   };
 

From ad1b09715fc221f192d8b546703d24c0372bcf62 Mon Sep 17 00:00:00 2001
From: Angie Ta <angie@inaturalist.org>
Date: Tue, 30 May 2023 18:16:52 -0700
Subject: [PATCH 18/27] Refactor vote buttons, delete vote, vote button loading
 states

---
 src/api/qualityMetrics.js                     |   2 +-
 src/components/ObsDetails/DQAVoteButtons.js   | 123 ++++++++++++
 .../ObsDetails/DataQualityAssessment.js       | 178 ++++++++++--------
 3 files changed, 225 insertions(+), 78 deletions(-)
 create mode 100644 src/components/ObsDetails/DQAVoteButtons.js

diff --git a/src/api/qualityMetrics.js b/src/api/qualityMetrics.js
index d023e354a..7c279a4d7 100644
--- a/src/api/qualityMetrics.js
+++ b/src/api/qualityMetrics.js
@@ -21,7 +21,7 @@ const deleteQualityMetric = async (
   opts: Object = {}
 ): Promise<any> => {
   try {
-    const { results } = await inatjs.observations.setQualityMetric( params, opts );
+    const { results } = await inatjs.observations.deleteQualityMetric( params, opts );
     return results;
   } catch ( e ) {
     return handleError( e );
diff --git a/src/components/ObsDetails/DQAVoteButtons.js b/src/components/ObsDetails/DQAVoteButtons.js
new file mode 100644
index 000000000..1b51908c5
--- /dev/null
+++ b/src/components/ObsDetails/DQAVoteButtons.js
@@ -0,0 +1,123 @@
+// @flow
+
+import {
+  Body3,
+  INatIconButton
+} from "components/SharedComponents";
+import { View } from "components/styledComponents";
+import * as React from "react";
+import { ActivityIndicator, useTheme } from "react-native-paper";
+
+type Props = {
+  metric: string,
+  qualityMetrics: Object,
+  loadingAgree: boolean,
+  loadingDisagree: boolean,
+  loadingMetric: ?string,
+  setVote: Function,
+  removeVote: Function
+}
+
+// rename
+const checkTest = ( metric, qualityMetrics ) => {
+  if ( qualityMetrics ) {
+    const match = qualityMetrics.find( element => (
+      element.metric === metric && element.user_id ) );
+    if ( match && match.agree === true ) { return true; }
+    if ( match && match.agree === false ) { return false; }
+  }
+  return null;
+};
+
+const renderVoteCount = ( status, metric, qualityMetrics ) => {
+  if ( qualityMetrics ) {
+    const count = qualityMetrics.filter(
+      element => ( element.agree === status && element.metric === metric )
+    ).length;
+
+    return ( count > 0 ) && <Body3>{count}</Body3>;
+  }
+  return null;
+};
+
+const DQAVoteButtons = ( {
+  metric, qualityMetrics, loadingAgree, loadingDisagree, loadingMetric, setVote, removeVote
+}: Props ): React.Node => {
+  const theme = useTheme( );
+  const ifAgree = checkTest( metric, qualityMetrics );
+
+  const renderAgree = () => {
+    if ( ifAgree === null ) {
+      return (
+        <INatIconButton
+          icon="arrow-up-bold-circle-outline"
+          size={33}
+          onPress={() => setVote( metric, true )}
+        />
+      );
+    }
+    if ( loadingAgree && loadingMetric === metric ) {
+      return ( <ActivityIndicator /> );
+    }
+    if ( ifAgree ) {
+      return (
+        <INatIconButton
+          icon="arrow-up-bold-circle"
+          size={33}
+          color={theme.colors.secondary}
+          onPress={() => removeVote( metric, true )}
+        />
+      );
+    }
+    return (
+      <INatIconButton
+        icon="arrow-up-bold-circle-outline"
+        size={33}
+        onPress={() => setVote( metric, true )}
+      />
+    );
+  };
+
+  const renderDisagree = () => {
+    if ( ifAgree === null ) {
+      return (
+        <INatIconButton
+          icon="arrow-down-bold-circle-outline"
+          size={33}
+          onPress={() => setVote( metric, true )}
+        />
+      );
+    }
+    if ( loadingDisagree && loadingMetric === metric ) {
+      return ( <ActivityIndicator /> );
+    }
+    if ( !ifAgree ) {
+      return (
+        <INatIconButton
+          icon="arrow-down-bold-circle"
+          size={33}
+          color={theme.colors.error}
+          onPress={() => removeVote( metric, false )}
+        />
+      );
+    }
+    return (
+      <INatIconButton
+        icon="arrow-down-bold-circle-outline"
+        size={33}
+        onPress={() => setVote( metric, false )}
+      />
+    );
+  };
+
+  return (
+    <View className="flex-row items-center">
+      {renderAgree()}
+      {renderVoteCount( true, metric, qualityMetrics )}
+      {renderDisagree()}
+      {renderVoteCount( false, metric, qualityMetrics )}
+    </View>
+  );
+};
+
+export default DQAVoteButtons;
diff --git a/src/components/ObsDetails/DataQualityAssessment.js b/src/components/ObsDetails/DataQualityAssessment.js
index 22044167b..68f70cd3d 100644
--- a/src/components/ObsDetails/DataQualityAssessment.js
+++ b/src/components/ObsDetails/DataQualityAssessment.js
@@ -1,12 +1,12 @@
 // @flow
 import { useRoute } from "@react-navigation/native";
-import { fetchQualityMetrics, setQualityMetric } from "api/qualityMetrics";
+import { deleteQualityMetric, fetchQualityMetrics, setQualityMetric } from "api/qualityMetrics";
+import DQAVoteButtons from "components/ObsDetails/DQAVoteButtons";
 import {
   Body3,
   Divider,
   Heading4,
   INatIcon,
-  INatIconButton,
   List1,
   List2,
   ScrollViewWrapper
@@ -52,6 +52,9 @@ const DataQualityAssessment = ( ): React.Node => {
   const voteClass = "flex-row mx-[15px] my-[7px] justify-between items-center";
   const listTextClass = "flex-row space-x-[11px]";
   const [qualityMetrics, setQualityMetrics] = useState( null );
+  const [loadingAgree, setLoadingAgree] = useState( false );
+  const [loadingDisagree, setLoadingDisagree] = useState( false );
+  const [loadingMetric, setLoadingMetric] = useState( null );
 
   const fetchMetricsParams = {
     id: observationUUID,
@@ -64,6 +67,13 @@ const DataQualityAssessment = ( ): React.Node => {
     {
       onSuccess: response => {
         console.log( response );
+        setLoadingMetric( null );
+        if ( loadingAgree ) {
+          setLoadingAgree( false );
+        }
+        if ( loadingDisagree ) {
+          setLoadingDisagree( false );
+        }
         setQualityMetrics( response );
       },
       onError: error => {
@@ -103,9 +113,44 @@ const DataQualityAssessment = ( ): React.Node => {
       agree: vote,
       ttyl: -1
     };
+    setLoadingMetric( metric );
+    if ( vote ) {
+      setLoadingAgree( true );
+    } else {
+      setLoadingDisagree( true );
+    }
     createQualityMetricMutation.mutate( PARAMS );
   };
 
+  const createRemoveQualityMetricMutation = useAuthenticatedMutation(
+    ( PARAMS, optsWithAuth ) => deleteQualityMetric( PARAMS, optsWithAuth ),
+    {
+      onSuccess: response => {
+        console.log( "success", response );
+        // fetch updated quality metrics with new vote
+        createFetchQualityMetricsMutation.mutate( fetchMetricsParams );
+      },
+      onError: error => {
+        console.log( "error", error );
+      }
+    }
+  );
+
+  const removeMetricVote = ( metric, vote ) => {
+    const PARAMS = {
+      id: observationUUID,
+      metric,
+      ttyl: -1
+    };
+    setLoadingMetric( metric );
+    if ( vote ) {
+      setLoadingAgree( true );
+    } else {
+      setLoadingDisagree( true );
+    }
+    createRemoveQualityMetricMutation.mutate( PARAMS );
+  };
+
   const checkTest = metric => {
     if ( qualityMetrics ) {
       const match = qualityMetrics.find( element => (
@@ -127,75 +172,6 @@ const DataQualityAssessment = ( ): React.Node => {
     );
   };
 
-  const renderVoteCount = ( status, metric ) => {
-    if ( qualityMetrics ) {
-      const count = qualityMetrics.filter(
-        element => ( element.agree === status && element.metric === metric )
-      ).length;
-
-      return ( count > 0 ) && <Body3>{count}</Body3>;
-    }
-    return null;
-  };
-
-  // move to different component
-  const renderVoteButtons = metric => {
-    const ifAgree = checkTest( metric );
-    if ( ifAgree === null ) { // no votes made yet
-      return (
-        <View className="flex-row">
-          <INatIconButton
-            icon="arrow-up-bold-circle-outline"
-            size={33}
-            onPress={() => setMetricVote( metric, true )}
-          />
-          <INatIconButton
-            icon="arrow-down-bold-circle-outline"
-            size={33}
-            onPress={() => setMetricVote( metric, false )}
-          />
-        </View>
-      );
-    }
-
-    return (
-      <View className="flex-row items-center">
-        {ifAgree // if vote true
-          ? (
-            <INatIconButton
-              icon="arrow-up-bold-circle"
-              size={33}
-              color={theme.colors.secondary}
-            />
-          )
-          : (
-            <INatIconButton
-              icon="arrow-up-bold-circle-outline"
-              size={33}
-              onPress={() => setMetricVote( metric, true )}
-            />
-          )}
-        {renderVoteCount( true, metric )}
-        {!ifAgree // if vote false
-          ? (
-            <INatIconButton
-              icon="arrow-down-bold-circle"
-              size={33}
-              color={theme.colors.error}
-            />
-          )
-          : (
-            <INatIconButton
-              icon="arrow-down-bold-circle-outline"
-              size={33}
-              onPress={() => setMetricVote( metric, false )}
-            />
-          )}
-        {renderVoteCount( false, metric )}
-      </View>
-    );
-  };
-
   return (
     <ScrollViewWrapper testID="DataQualityAssessment">
       <View className="mx-[26px] my-[19px] space-y-[9px]">
@@ -259,7 +235,15 @@ const DataQualityAssessment = ( ): React.Node => {
           {renderIndicator( "date" )}
           <Body3>{t( "Data-quality-assessment-date-is-accurate" )}</Body3>
         </View>
-        {renderVoteButtons( "date" )}
+        <DQAVoteButtons
+          metric="date"
+          qualityMetrics={qualityMetrics}
+          setVote={setMetricVote}
+          loadingAgree={loadingAgree}
+          loadingDisagree={loadingDisagree}
+          loadingMetric={loadingMetric}
+          removeVote={removeMetricVote}
+        />
       </View>
       <Divider />
 
@@ -268,7 +252,15 @@ const DataQualityAssessment = ( ): React.Node => {
           {renderIndicator( "location" )}
           <Body3>{t( "Data-quality-assessment-location-is-accurate" )}</Body3>
         </View>
-        {renderVoteButtons( "location" )}
+        <DQAVoteButtons
+          metric="location"
+          qualityMetrics={qualityMetrics}
+          setVote={setMetricVote}
+          loadingAgree={loadingAgree}
+          loadingDisagree={loadingDisagree}
+          loadingMetric={loadingMetric}
+          removeVote={removeMetricVote}
+        />
       </View>
       <Divider />
 
@@ -277,7 +269,15 @@ const DataQualityAssessment = ( ): React.Node => {
           {renderIndicator( "wild" )}
           <Body3>{t( "Data-quality-assessment-organism-is-wild" )}</Body3>
         </View>
-        {renderVoteButtons( "wild" )}
+        <DQAVoteButtons
+          metric="wild"
+          qualityMetrics={qualityMetrics}
+          setVote={setMetricVote}
+          loadingAgree={loadingAgree}
+          loadingDisagree={loadingDisagree}
+          loadingMetric={loadingMetric}
+          removeVote={removeMetricVote}
+        />
       </View>
       <Divider />
 
@@ -286,7 +286,15 @@ const DataQualityAssessment = ( ): React.Node => {
           {renderIndicator( "evidence" )}
           <Body3>{t( "Data-quality-assessment-evidence-of-organism" )}</Body3>
         </View>
-        {renderVoteButtons( "evidence" )}
+        <DQAVoteButtons
+          metric="evidence"
+          qualityMetrics={qualityMetrics}
+          setVote={setMetricVote}
+          loadingAgree={loadingAgree}
+          loadingDisagree={loadingDisagree}
+          loadingMetric={loadingMetric}
+          removeVote={removeMetricVote}
+        />
       </View>
       <Divider />
 
@@ -295,7 +303,15 @@ const DataQualityAssessment = ( ): React.Node => {
           {renderIndicator( "recent" )}
           <Body3>{t( "Data-quality-assessment-recent-evidence-of-organism" )}</Body3>
         </View>
-        {renderVoteButtons( "recent" )}
+        <DQAVoteButtons
+          metric="recent"
+          qualityMetrics={qualityMetrics}
+          setVote={setMetricVote}
+          loadingAgree={loadingAgree}
+          loadingDisagree={loadingDisagree}
+          loadingMetric={loadingMetric}
+          removeVote={removeMetricVote}
+        />
       </View>
       <Divider />
 
@@ -305,7 +321,15 @@ const DataQualityAssessment = ( ): React.Node => {
             "Data-quality-assessment-can-taxon-still-be-confirmed-improved-based-on-the-evidence"
           )}
         </Body3>
-        {renderVoteButtons( "needs_id" )}
+        <DQAVoteButtons
+          metric="needs_id"
+          qualityMetrics={qualityMetrics}
+          setVote={setMetricVote}
+          loadingAgree={loadingAgree}
+          loadingDisagree={loadingDisagree}
+          loadingMetric={loadingMetric}
+          removeVote={removeMetricVote}
+        />
       </View>
 
       <View className="mt-[30px] mx-[15px] space-y-[11px]">

From df287a970577d2be1f6698eda4e5b3d280a65aa0 Mon Sep 17 00:00:00 2001
From: Angie Ta <angie@inaturalist.org>
Date: Wed, 31 May 2023 17:40:42 -0700
Subject: [PATCH 19/27] Loading vote button bug fix, test indicator checks

---
 src/components/ObsDetails/DQAVoteButtons.js   | 21 ++----
 .../ObsDetails/DataQualityAssessment.js       | 72 ++++++++++++++-----
 src/components/ObsDetails/DetailsTab.js       |  9 ++-
 3 files changed, 70 insertions(+), 32 deletions(-)

diff --git a/src/components/ObsDetails/DQAVoteButtons.js b/src/components/ObsDetails/DQAVoteButtons.js
index 1b51908c5..1cf6812d9 100644
--- a/src/components/ObsDetails/DQAVoteButtons.js
+++ b/src/components/ObsDetails/DQAVoteButtons.js
@@ -19,7 +19,7 @@ type Props = {
 }
 
 // rename
-const checkTest = ( metric, qualityMetrics ) => {
+const checkUserVote = ( metric, qualityMetrics ) => {
   if ( qualityMetrics ) {
     const match = qualityMetrics.find( element => (
       element.metric === metric && element.user_id ) );
@@ -44,18 +44,9 @@ const DQAVoteButtons = ( {
   metric, qualityMetrics, loadingAgree, loadingDisagree, loadingMetric, setVote, removeVote
 }: Props ): React.Node => {
   const theme = useTheme( );
-  const ifAgree = checkTest( metric, qualityMetrics );
+  const ifAgree = checkUserVote( metric, qualityMetrics );
 
   const renderAgree = () => {
-    if ( ifAgree === null ) {
-      return (
-        <INatIconButton
-          icon="arrow-up-bold-circle-outline"
-          size={33}
-          onPress={() => setVote( metric, true )}
-        />
-      );
-    }
     if ( loadingAgree && loadingMetric === metric ) {
       return ( <ActivityIndicator /> );
     }
@@ -79,18 +70,18 @@ const DQAVoteButtons = ( {
   };
 
   const renderDisagree = () => {
+    if ( loadingDisagree && loadingMetric === metric ) {
+      return ( <ActivityIndicator /> );
+    }
     if ( ifAgree === null ) {
       return (
         <INatIconButton
           icon="arrow-down-bold-circle-outline"
           size={33}
-          onPress={() => setVote( metric, true )}
+          onPress={() => setVote( metric, false )}
         />
       );
     }
-    if ( loadingDisagree && loadingMetric === metric ) {
-      return ( <ActivityIndicator /> );
-    }
     if ( !ifAgree ) {
       return (
         <INatIconButton
diff --git a/src/components/ObsDetails/DataQualityAssessment.js b/src/components/ObsDetails/DataQualityAssessment.js
index 68f70cd3d..ede575ba6 100644
--- a/src/components/ObsDetails/DataQualityAssessment.js
+++ b/src/components/ObsDetails/DataQualityAssessment.js
@@ -45,7 +45,7 @@ const titleDescription = option => {
 
 const DataQualityAssessment = ( ): React.Node => {
   const { params } = useRoute( );
-  const { observationUUID, qualityGrade } = params;
+  const { observationUUID, observation, qualityGrade } = params;
   const isResearchGrade = qualityGrade === "research";
   const theme = useTheme( );
   const sectionClass = "flex-row ml-[15px] my-[14px] space-x-[11px]";
@@ -56,6 +56,12 @@ const DataQualityAssessment = ( ): React.Node => {
   const [loadingDisagree, setLoadingDisagree] = useState( false );
   const [loadingMetric, setLoadingMetric] = useState( null );
 
+  // location : long lat
+  // observationPhotos observationSounds
+  // observed on
+  // taxon.rank
+  // time_observed_at
+
   const fetchMetricsParams = {
     id: observationUUID,
     fields: "metric,agree,user_id",
@@ -151,16 +157,50 @@ const DataQualityAssessment = ( ): React.Node => {
     createRemoveQualityMetricMutation.mutate( PARAMS );
   };
 
-  const checkTest = metric => {
+  const ifMajorityAgree = metric => {
     if ( qualityMetrics ) {
-      const match = qualityMetrics.find( element => (
-        element.metric === metric && element.user_id ) );
-      if ( match && match.agree === true ) { return true; }
-      if ( match && match.agree === false ) { return false; }
+      const agreeCount = qualityMetrics.filter(
+        element => ( element.agree && element.metric === metric )
+      ).length;
+      const disagreeCount = qualityMetrics.filter(
+        element => ( !element.agree && element.metric === metric )
+      ).length;
+
+      return agreeCount >= disagreeCount;
     }
     return null;
   };
 
+  const renderMetricIndicator = metric => {
+    const ifAgree = ifMajorityAgree( metric );
+    if ( ifAgree || ifAgree === null ) {
+      return (
+        <INatIcon name="checkmark-circle" size={19} color={theme.colors.secondary} /> );
+    }
+    return (
+      <INatIcon name="triangle-exclamation" size={19} color={theme.colors.error} />
+    );
+  };
+
+  const checkTest = metric => {
+    if ( observation ) {
+      if ( observation[metric] ) {
+        return true;
+      }
+      if ( metric === "id_supported" ) {
+        const taxonId = observation.taxon.id;
+        const supportedIDs = observation.identifications.filter(
+          identification => ( identification.taxon.id === taxonId )
+        ).length;
+        return supportedIDs >= 2;
+      }
+      if ( metric === "rank" && observation.taxon.rank_level <= 10 ) {
+        return true;
+      }
+    }
+    return false;
+  };
+
   const renderIndicator = metric => {
     const ifAgree = checkTest( metric );
     if ( ifAgree || ifAgree === null ) {
@@ -201,38 +241,38 @@ const DataQualityAssessment = ( ): React.Node => {
       <Divider />
 
       <View className={sectionClass}>
-        {renderIndicator( ) }
+        {renderIndicator( "date" ) }
         <Body3>{t( "Data-quality-assessment-date-specified" )}</Body3>
       </View>
       <Divider />
 
       <View className={sectionClass}>
-        {renderIndicator( )}
+        {renderIndicator( "location" )}
         <Body3>{t( "Data-quality-assessment-location-specified" )}</Body3>
       </View>
       <Divider />
 
       <View className={sectionClass}>
-        {renderIndicator()}
+        {renderIndicator( "evidence" )}
         <Body3>{t( "Data-quality-assessment-has-photos-or-sounds" )}</Body3>
       </View>
       <Divider />
 
       <View className={sectionClass}>
-        {renderIndicator()}
+        {renderIndicator( "id_supported" )}
         <Body3>{t( "Data-quality-assessment-id-supported-by-two-or-more" )}</Body3>
       </View>
       <Divider />
 
       <View className={sectionClass}>
-        {renderIndicator()}
+        {renderIndicator( "rank" )}
         <Body3>{t( "Data-quality-assessment-community-taxon-at-species-level-or-lower" )}</Body3>
       </View>
       <Divider />
 
       <View className={voteClass}>
         <View className={listTextClass}>
-          {renderIndicator( "date" )}
+          {renderMetricIndicator( "date" )}
           <Body3>{t( "Data-quality-assessment-date-is-accurate" )}</Body3>
         </View>
         <DQAVoteButtons
@@ -249,7 +289,7 @@ const DataQualityAssessment = ( ): React.Node => {
 
       <View className={voteClass}>
         <View className={listTextClass}>
-          {renderIndicator( "location" )}
+          {renderMetricIndicator( "location" )}
           <Body3>{t( "Data-quality-assessment-location-is-accurate" )}</Body3>
         </View>
         <DQAVoteButtons
@@ -266,7 +306,7 @@ const DataQualityAssessment = ( ): React.Node => {
 
       <View className={voteClass}>
         <View className={listTextClass}>
-          {renderIndicator( "wild" )}
+          {renderMetricIndicator( "wild" )}
           <Body3>{t( "Data-quality-assessment-organism-is-wild" )}</Body3>
         </View>
         <DQAVoteButtons
@@ -283,7 +323,7 @@ const DataQualityAssessment = ( ): React.Node => {
 
       <View className={voteClass}>
         <View className={listTextClass}>
-          {renderIndicator( "evidence" )}
+          {renderMetricIndicator( "evidence" )}
           <Body3>{t( "Data-quality-assessment-evidence-of-organism" )}</Body3>
         </View>
         <DQAVoteButtons
@@ -300,7 +340,7 @@ const DataQualityAssessment = ( ): React.Node => {
 
       <View className={voteClass}>
         <View className={listTextClass}>
-          {renderIndicator( "recent" )}
+          {renderMetricIndicator( "recent" )}
           <Body3>{t( "Data-quality-assessment-recent-evidence-of-organism" )}</Body3>
         </View>
         <DQAVoteButtons
diff --git a/src/components/ObsDetails/DetailsTab.js b/src/components/ObsDetails/DetailsTab.js
index 8f554e9cc..e34a35af3 100644
--- a/src/components/ObsDetails/DetailsTab.js
+++ b/src/components/ObsDetails/DetailsTab.js
@@ -138,7 +138,14 @@ const DetailsTab = ( { observation }: Props ): Node => {
             text={t( "VIEW-DATA-QUALITY-ASSESSEMENT" )}
             onPress={() => navigation.navigate( "DataQualityAssessment", {
               qualityGrade,
-              observationUUID
+              observationUUID,
+              observation: {
+                date: observation._created_at,
+                location: [observation.latitude, observation.longitude],
+                evidence: [observation.observationPhotos, observation.observationSounds],
+                taxon: observation.taxon,
+                identifications: observation.identifications
+              }
             } )}
           />
         </View>

From aaf0cee2de6662890adf87ea6ba0c25b6068d131 Mon Sep 17 00:00:00 2001
From: Angie Ta <angie@inaturalist.org>
Date: Mon, 5 Jun 2023 15:47:06 -0700
Subject: [PATCH 20/27] Error bottom sheet, Test Indicators, styling

---
 src/components/ObsDetails/DQAVoteButtons.js   |  23 +-
 .../ObsDetails/DataQualityAssessment.js       | 336 +++++++++---------
 src/i18n/l10n/en.ftl                          |   4 +
 src/i18n/l10n/en.ftl.json                     |   2 +
 src/i18n/strings.ftl                          |   4 +
 5 files changed, 196 insertions(+), 173 deletions(-)

diff --git a/src/components/ObsDetails/DQAVoteButtons.js b/src/components/ObsDetails/DQAVoteButtons.js
index 1cf6812d9..f84440669 100644
--- a/src/components/ObsDetails/DQAVoteButtons.js
+++ b/src/components/ObsDetails/DQAVoteButtons.js
@@ -18,8 +18,7 @@ type Props = {
   removeVote: Function
 }
 
-// rename
-const checkUserVote = ( metric, qualityMetrics ) => {
+const getUserVote = ( metric, qualityMetrics ) => {
   if ( qualityMetrics ) {
     const match = qualityMetrics.find( element => (
       element.metric === metric && element.user_id ) );
@@ -44,11 +43,11 @@ const DQAVoteButtons = ( {
   metric, qualityMetrics, loadingAgree, loadingDisagree, loadingMetric, setVote, removeVote
 }: Props ): React.Node => {
   const theme = useTheme( );
-  const ifAgree = checkUserVote( metric, qualityMetrics );
+  const ifAgree = getUserVote( metric, qualityMetrics );
 
   const renderAgree = () => {
     if ( loadingAgree && loadingMetric === metric ) {
-      return ( <ActivityIndicator /> );
+      return ( <ActivityIndicator size={33} /> );
     }
     if ( ifAgree ) {
       return (
@@ -71,7 +70,7 @@ const DQAVoteButtons = ( {
 
   const renderDisagree = () => {
     if ( loadingDisagree && loadingMetric === metric ) {
-      return ( <ActivityIndicator /> );
+      return ( <ActivityIndicator size={30} className="mx-[7px]" /> );
     }
     if ( ifAgree === null ) {
       return (
@@ -102,11 +101,15 @@ const DQAVoteButtons = ( {
   };
 
   return (
-    <View className="flex-row items-center">
-      {renderAgree()}
-      {renderVoteCount( true, metric, qualityMetrics )}
-      {renderDisagree()}
-      {renderVoteCount( false, metric, qualityMetrics )}
+    <View className="flex-row items-center space-x-[5px]">
+      <View className="flex-row items-center">
+        {renderAgree()}
+        {renderVoteCount( true, metric, qualityMetrics )}
+      </View>
+      <View className="flex-row items-center">
+        {renderDisagree()}
+        {renderVoteCount( false, metric, qualityMetrics )}
+      </View>
     </View>
   );
 };
diff --git a/src/components/ObsDetails/DataQualityAssessment.js b/src/components/ObsDetails/DataQualityAssessment.js
index ede575ba6..b81beb5e0 100644
--- a/src/components/ObsDetails/DataQualityAssessment.js
+++ b/src/components/ObsDetails/DataQualityAssessment.js
@@ -4,6 +4,8 @@ import { deleteQualityMetric, fetchQualityMetrics, setQualityMetric } from "api/
 import DQAVoteButtons from "components/ObsDetails/DQAVoteButtons";
 import {
   Body3,
+  BottomSheet,
+  Button,
   Divider,
   Heading4,
   INatIcon,
@@ -55,12 +57,7 @@ const DataQualityAssessment = ( ): React.Node => {
   const [loadingAgree, setLoadingAgree] = useState( false );
   const [loadingDisagree, setLoadingDisagree] = useState( false );
   const [loadingMetric, setLoadingMetric] = useState( null );
-
-  // location : long lat
-  // observationPhotos observationSounds
-  // observed on
-  // taxon.rank
-  // time_observed_at
+  const [hideErrorSheet, setHideErrorSheet] = useState( true );
 
   const fetchMetricsParams = {
     id: observationUUID,
@@ -72,7 +69,6 @@ const DataQualityAssessment = ( ): React.Node => {
     ( PARAMS, optsWithAuth ) => fetchQualityMetrics( PARAMS, optsWithAuth ),
     {
       onSuccess: response => {
-        console.log( response );
         setLoadingMetric( null );
         if ( loadingAgree ) {
           setLoadingAgree( false );
@@ -82,8 +78,8 @@ const DataQualityAssessment = ( ): React.Node => {
         }
         setQualityMetrics( response );
       },
-      onError: error => {
-        console.log( "error", error );
+      onError: () => {
+        setHideErrorSheet( false );
       }
     }
   );
@@ -101,13 +97,12 @@ const DataQualityAssessment = ( ): React.Node => {
   const createQualityMetricMutation = useAuthenticatedMutation(
     ( PARAMS, optsWithAuth ) => setQualityMetric( PARAMS, optsWithAuth ),
     {
-      onSuccess: response => {
-        console.log( "success", response );
-        // fetch updated quality metrics with new vote
+      onSuccess: () => {
+        // fetch updated quality metrics with updated votes
         createFetchQualityMetricsMutation.mutate( fetchMetricsParams );
       },
-      onError: error => {
-        console.log( "error", error );
+      onError: () => {
+        setHideErrorSheet( false );
       }
     }
   );
@@ -131,13 +126,12 @@ const DataQualityAssessment = ( ): React.Node => {
   const createRemoveQualityMetricMutation = useAuthenticatedMutation(
     ( PARAMS, optsWithAuth ) => deleteQualityMetric( PARAMS, optsWithAuth ),
     {
-      onSuccess: response => {
-        console.log( "success", response );
-        // fetch updated quality metrics with new vote
+      onSuccess: () => {
+        // fetch updated quality metrics with updated votes
         createFetchQualityMetricsMutation.mutate( fetchMetricsParams );
       },
-      onError: error => {
-        console.log( "error", error );
+      onError: () => {
+        setHideErrorSheet( false );
       }
     }
   );
@@ -213,16 +207,17 @@ const DataQualityAssessment = ( ): React.Node => {
   };
 
   return (
-    <ScrollViewWrapper testID="DataQualityAssessment">
-      <View className="mx-[26px] my-[19px] space-y-[9px]">
-        <QualityGradeStatus
-          qualityGrade={qualityGrade}
-          color={( qualityGrade === "research" )
-            ? theme.colors.secondary
-            : theme.colors.primary}
-        />
-        <View className="flex-row space-x-[7px]">
-          {isResearchGrade
+    <>
+      <ScrollViewWrapper testID="DataQualityAssessment">
+        <View className="mx-[26px] my-[19px] space-y-[9px]">
+          <QualityGradeStatus
+            qualityGrade={qualityGrade}
+            color={( qualityGrade === "research" )
+              ? theme.colors.secondary
+              : theme.colors.primary}
+          />
+          <View className="flex-row space-x-[7px]">
+            {isResearchGrade
           && (
             <INatIcon
               name="checkmark-circle"
@@ -230,154 +225,169 @@ const DataQualityAssessment = ( ): React.Node => {
               color={theme.colors.secondary}
             />
           )}
-          <List1 className="text-black">
-            {titleOption( qualityGrade )}
-          </List1>
+            <List1 className="text-black">
+              {titleOption( qualityGrade )}
+            </List1>
+          </View>
+          <List2 className="text-black">
+            {titleDescription( qualityGrade )}
+          </List2>
         </View>
-        <List2 className="text-black">
-          {titleDescription( qualityGrade )}
-        </List2>
-      </View>
-      <Divider />
+        <Divider />
 
-      <View className={sectionClass}>
-        {renderIndicator( "date" ) }
-        <Body3>{t( "Data-quality-assessment-date-specified" )}</Body3>
-      </View>
-      <Divider />
-
-      <View className={sectionClass}>
-        {renderIndicator( "location" )}
-        <Body3>{t( "Data-quality-assessment-location-specified" )}</Body3>
-      </View>
-      <Divider />
-
-      <View className={sectionClass}>
-        {renderIndicator( "evidence" )}
-        <Body3>{t( "Data-quality-assessment-has-photos-or-sounds" )}</Body3>
-      </View>
-      <Divider />
-
-      <View className={sectionClass}>
-        {renderIndicator( "id_supported" )}
-        <Body3>{t( "Data-quality-assessment-id-supported-by-two-or-more" )}</Body3>
-      </View>
-      <Divider />
-
-      <View className={sectionClass}>
-        {renderIndicator( "rank" )}
-        <Body3>{t( "Data-quality-assessment-community-taxon-at-species-level-or-lower" )}</Body3>
-      </View>
-      <Divider />
-
-      <View className={voteClass}>
-        <View className={listTextClass}>
-          {renderMetricIndicator( "date" )}
-          <Body3>{t( "Data-quality-assessment-date-is-accurate" )}</Body3>
+        <View className={sectionClass}>
+          {renderIndicator( "date" ) }
+          <Body3>{t( "Data-quality-assessment-date-specified" )}</Body3>
         </View>
-        <DQAVoteButtons
-          metric="date"
-          qualityMetrics={qualityMetrics}
-          setVote={setMetricVote}
-          loadingAgree={loadingAgree}
-          loadingDisagree={loadingDisagree}
-          loadingMetric={loadingMetric}
-          removeVote={removeMetricVote}
-        />
-      </View>
-      <Divider />
+        <Divider />
 
-      <View className={voteClass}>
-        <View className={listTextClass}>
-          {renderMetricIndicator( "location" )}
-          <Body3>{t( "Data-quality-assessment-location-is-accurate" )}</Body3>
+        <View className={sectionClass}>
+          {renderIndicator( "location" )}
+          <Body3>{t( "Data-quality-assessment-location-specified" )}</Body3>
         </View>
-        <DQAVoteButtons
-          metric="location"
-          qualityMetrics={qualityMetrics}
-          setVote={setMetricVote}
-          loadingAgree={loadingAgree}
-          loadingDisagree={loadingDisagree}
-          loadingMetric={loadingMetric}
-          removeVote={removeMetricVote}
-        />
-      </View>
-      <Divider />
+        <Divider />
 
-      <View className={voteClass}>
-        <View className={listTextClass}>
-          {renderMetricIndicator( "wild" )}
-          <Body3>{t( "Data-quality-assessment-organism-is-wild" )}</Body3>
+        <View className={sectionClass}>
+          {renderIndicator( "evidence" )}
+          <Body3>{t( "Data-quality-assessment-has-photos-or-sounds" )}</Body3>
         </View>
-        <DQAVoteButtons
-          metric="wild"
-          qualityMetrics={qualityMetrics}
-          setVote={setMetricVote}
-          loadingAgree={loadingAgree}
-          loadingDisagree={loadingDisagree}
-          loadingMetric={loadingMetric}
-          removeVote={removeMetricVote}
-        />
-      </View>
-      <Divider />
+        <Divider />
 
-      <View className={voteClass}>
-        <View className={listTextClass}>
-          {renderMetricIndicator( "evidence" )}
-          <Body3>{t( "Data-quality-assessment-evidence-of-organism" )}</Body3>
+        <View className={sectionClass}>
+          {renderIndicator( "id_supported" )}
+          <Body3>{t( "Data-quality-assessment-id-supported-by-two-or-more" )}</Body3>
         </View>
-        <DQAVoteButtons
-          metric="evidence"
-          qualityMetrics={qualityMetrics}
-          setVote={setMetricVote}
-          loadingAgree={loadingAgree}
-          loadingDisagree={loadingDisagree}
-          loadingMetric={loadingMetric}
-          removeVote={removeMetricVote}
-        />
-      </View>
-      <Divider />
+        <Divider />
 
-      <View className={voteClass}>
-        <View className={listTextClass}>
-          {renderMetricIndicator( "recent" )}
-          <Body3>{t( "Data-quality-assessment-recent-evidence-of-organism" )}</Body3>
+        <View className={sectionClass}>
+          {renderIndicator( "rank" )}
+          <Body3>{t( "Data-quality-assessment-community-taxon-at-species-level-or-lower" )}</Body3>
         </View>
-        <DQAVoteButtons
-          metric="recent"
-          qualityMetrics={qualityMetrics}
-          setVote={setMetricVote}
-          loadingAgree={loadingAgree}
-          loadingDisagree={loadingDisagree}
-          loadingMetric={loadingMetric}
-          removeVote={removeMetricVote}
-        />
-      </View>
-      <Divider />
+        <Divider />
 
-      <View className="flex-row bg-lightGray px-[15px] py-[7px] mt-[20px]">
-        <Body3 className="shrink">
-          {t(
-            "Data-quality-assessment-can-taxon-still-be-confirmed-improved-based-on-the-evidence"
-          )}
-        </Body3>
-        <DQAVoteButtons
-          metric="needs_id"
-          qualityMetrics={qualityMetrics}
-          setVote={setMetricVote}
-          loadingAgree={loadingAgree}
-          loadingDisagree={loadingDisagree}
-          loadingMetric={loadingMetric}
-          removeVote={removeMetricVote}
-        />
-      </View>
+        <View className={voteClass}>
+          <View className={listTextClass}>
+            {renderMetricIndicator( "date" )}
+            <Body3>{t( "Data-quality-assessment-date-is-accurate" )}</Body3>
+          </View>
+          <DQAVoteButtons
+            metric="date"
+            qualityMetrics={qualityMetrics}
+            setVote={setMetricVote}
+            loadingAgree={loadingAgree}
+            loadingDisagree={loadingDisagree}
+            loadingMetric={loadingMetric}
+            removeVote={removeMetricVote}
+          />
+        </View>
+        <Divider />
 
-      <View className="mt-[30px] mx-[15px] space-y-[11px]">
-        <Heading4>{t( "ABOUT-THE-DQA" )}</Heading4>
-        <List2>{t( "About-the-DQA-description" )}</List2>
-      </View>
+        <View className={voteClass}>
+          <View className={listTextClass}>
+            {renderMetricIndicator( "location" )}
+            <Body3>{t( "Data-quality-assessment-location-is-accurate" )}</Body3>
+          </View>
+          <DQAVoteButtons
+            metric="location"
+            qualityMetrics={qualityMetrics}
+            setVote={setMetricVote}
+            loadingAgree={loadingAgree}
+            loadingDisagree={loadingDisagree}
+            loadingMetric={loadingMetric}
+            removeVote={removeMetricVote}
+          />
+        </View>
+        <Divider />
 
-    </ScrollViewWrapper>
+        <View className={voteClass}>
+          <View className={listTextClass}>
+            {renderMetricIndicator( "wild" )}
+            <Body3>{t( "Data-quality-assessment-organism-is-wild" )}</Body3>
+          </View>
+          <DQAVoteButtons
+            metric="wild"
+            qualityMetrics={qualityMetrics}
+            setVote={setMetricVote}
+            loadingAgree={loadingAgree}
+            loadingDisagree={loadingDisagree}
+            loadingMetric={loadingMetric}
+            removeVote={removeMetricVote}
+          />
+        </View>
+        <Divider />
+
+        <View className={voteClass}>
+          <View className={listTextClass}>
+            {renderMetricIndicator( "evidence" )}
+            <Body3>{t( "Data-quality-assessment-evidence-of-organism" )}</Body3>
+          </View>
+          <DQAVoteButtons
+            metric="evidence"
+            qualityMetrics={qualityMetrics}
+            setVote={setMetricVote}
+            loadingAgree={loadingAgree}
+            loadingDisagree={loadingDisagree}
+            loadingMetric={loadingMetric}
+            removeVote={removeMetricVote}
+          />
+        </View>
+        <Divider />
+
+        <View className={voteClass}>
+          <View className={listTextClass}>
+            {renderMetricIndicator( "recent" )}
+            <Body3>{t( "Data-quality-assessment-recent-evidence-of-organism" )}</Body3>
+          </View>
+          <DQAVoteButtons
+            metric="recent"
+            qualityMetrics={qualityMetrics}
+            setVote={setMetricVote}
+            loadingAgree={loadingAgree}
+            loadingDisagree={loadingDisagree}
+            loadingMetric={loadingMetric}
+            removeVote={removeMetricVote}
+          />
+        </View>
+        <Divider />
+
+        <View className="flex-row bg-lightGray px-[15px] py-[7px] mt-[20px]">
+          <Body3 className="shrink">
+            {t(
+              "Data-quality-assessment-can-taxon-still-be-confirmed-improved-based-on-the-evidence"
+            )}
+          </Body3>
+          <DQAVoteButtons
+            metric="needs_id"
+            qualityMetrics={qualityMetrics}
+            setVote={setMetricVote}
+            loadingAgree={loadingAgree}
+            loadingDisagree={loadingDisagree}
+            loadingMetric={loadingMetric}
+            removeVote={removeMetricVote}
+          />
+        </View>
+
+        <View className="mt-[30px] mx-[15px] space-y-[11px]">
+          <Heading4>{t( "ABOUT-THE-DQA" )}</Heading4>
+          <List2>{t( "About-the-DQA-description" )}</List2>
+        </View>
+
+      </ScrollViewWrapper>
+      <BottomSheet
+        headerText={t( "ERROR-VOTING-IN-DQA" )}
+        hide={hideErrorSheet}
+        hideCloseButton
+        snapPoints={["25"]}
+      >
+        <View className="px-[26px] pt-[20px] flex-col space-y-[20px]">
+          <List2 className="text-black">{t( "Error-voting-in-DQA-description" )}</List2>
+          <Button
+            text={t( "OK" )}
+            onPress={() => setHideErrorSheet( true )}
+          />
+        </View>
+      </BottomSheet>
+    </>
   );
 };
 
diff --git a/src/i18n/l10n/en.ftl b/src/i18n/l10n/en.ftl
index 61ba97323..206edc8e9 100644
--- a/src/i18n/l10n/en.ftl
+++ b/src/i18n/l10n/en.ftl
@@ -271,6 +271,10 @@ Error-Couldnt-Upload-Photo = Error: Couldn't Upload Photo
 
 Error-Could-Not-Fetch-Taxon = Error: Could Not Fetch Taxon
 
+ERROR-VOTING-IN-DQA = ERROR VOTING IN DQA
+
+Error-voting-in-DQA-description = Your vote may not have been cast in the DQA. Check your internet connection and try again.
+
 EVIDENCE = EVIDENCE
 
 Explore = Explore
diff --git a/src/i18n/l10n/en.ftl.json b/src/i18n/l10n/en.ftl.json
index f79ca9bf4..b8692d7c9 100644
--- a/src/i18n/l10n/en.ftl.json
+++ b/src/i18n/l10n/en.ftl.json
@@ -148,6 +148,8 @@
   "Error-Couldnt-Complete-Upload": "Error: Couldn't Complete Upload",
   "Error-Couldnt-Upload-Photo": "Error: Couldn't Upload Photo",
   "Error-Could-Not-Fetch-Taxon": "Error: Could Not Fetch Taxon",
+  "ERROR-VOTING-IN-DQA": "ERROR VOTING IN DQA",
+  "Error-voting-in-DQA-description": "Your vote may not have been cast in the DQA. Check your internet connection and try again.",
   "EVIDENCE": "EVIDENCE",
   "Explore": "Explore",
   "EXPLORE-OBSERVATIONS": "EXPLORE OBSERVATIONS",
diff --git a/src/i18n/strings.ftl b/src/i18n/strings.ftl
index 61ba97323..206edc8e9 100644
--- a/src/i18n/strings.ftl
+++ b/src/i18n/strings.ftl
@@ -271,6 +271,10 @@ Error-Couldnt-Upload-Photo = Error: Couldn't Upload Photo
 
 Error-Could-Not-Fetch-Taxon = Error: Could Not Fetch Taxon
 
+ERROR-VOTING-IN-DQA = ERROR VOTING IN DQA
+
+Error-voting-in-DQA-description = Your vote may not have been cast in the DQA. Check your internet connection and try again.
+
 EVIDENCE = EVIDENCE
 
 Explore = Explore

From 7a5f3abf05900ad56e68ecbce57fa72f0173c3f9 Mon Sep 17 00:00:00 2001
From: Angie Ta <angie@inaturalist.org>
Date: Mon, 5 Jun 2023 16:28:01 -0700
Subject: [PATCH 21/27] bug fix location not showing

---
 src/i18n/l10n/en.ftl      | 2 +-
 src/i18n/l10n/en.ftl.json | 2 +-
 src/i18n/strings.ftl      | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/i18n/l10n/en.ftl b/src/i18n/l10n/en.ftl
index f50b524fd..53ff044d7 100644
--- a/src/i18n/l10n/en.ftl
+++ b/src/i18n/l10n/en.ftl
@@ -1094,7 +1094,7 @@ This-is-a-wild-organism = This is a wild organism and wasn’t placed in this lo
 This-organism-was-placed-by-humans = This organism was placed in this location by humans. This applies to things like garden plants, pets, and zoo animals.
 
 # Latitude, longitude, and accuracy on a single line on a single line
-Lat-Lon-Acc = Lat: { NUMBER(NUMBER($latitude, maximumFractionDigits: 6), maximumFractionDigits: 6) }, Lon: { NUMBER(NUMBER($longitude, maximumFractionDigits: 6), maximumFractionDigits: 6) }, Acc: { $accuracy }
+Lat-Lon-Acc = Lat: { NUMBER($latitude, maximumFractionDigits: 6) }, Lon: { NUMBER($longitude, maximumFractionDigits: 6) }, Acc: { $accuracy }
 
 # Missing evidence sheet
 Every-observation-needs = Every observation needs a location, date, and time to be helpful to identifiers. You can edit geoprivacy if you’re concerned about location privacy.
diff --git a/src/i18n/l10n/en.ftl.json b/src/i18n/l10n/en.ftl.json
index ca42333e7..3a4910e5a 100644
--- a/src/i18n/l10n/en.ftl.json
+++ b/src/i18n/l10n/en.ftl.json
@@ -741,7 +741,7 @@
   "This-organism-was-placed-by-humans": "This organism was placed in this location by humans. This applies to things like garden plants, pets, and zoo animals.",
   "Lat-Lon-Acc": {
     "comment": "Latitude, longitude, and accuracy on a single line on a single line",
-    "val": "Lat: { NUMBER($NUMBER, maximumFractionDigits: \"6\") }, Lon: { NUMBER($NUMBER, maximumFractionDigits: \"6\") }, Acc: { $accuracy }"
+    "val": "Lat: { NUMBER($latitude, maximumFractionDigits: \"6\") }, Lon: { NUMBER($longitude, maximumFractionDigits: \"6\") }, Acc: { $accuracy }"
   },
   "Every-observation-needs": {
     "comment": "Missing evidence sheet",
diff --git a/src/i18n/strings.ftl b/src/i18n/strings.ftl
index f50b524fd..53ff044d7 100644
--- a/src/i18n/strings.ftl
+++ b/src/i18n/strings.ftl
@@ -1094,7 +1094,7 @@ This-is-a-wild-organism = This is a wild organism and wasn’t placed in this lo
 This-organism-was-placed-by-humans = This organism was placed in this location by humans. This applies to things like garden plants, pets, and zoo animals.
 
 # Latitude, longitude, and accuracy on a single line on a single line
-Lat-Lon-Acc = Lat: { NUMBER(NUMBER($latitude, maximumFractionDigits: 6), maximumFractionDigits: 6) }, Lon: { NUMBER(NUMBER($longitude, maximumFractionDigits: 6), maximumFractionDigits: 6) }, Acc: { $accuracy }
+Lat-Lon-Acc = Lat: { NUMBER($latitude, maximumFractionDigits: 6) }, Lon: { NUMBER($longitude, maximumFractionDigits: 6) }, Acc: { $accuracy }
 
 # Missing evidence sheet
 Every-observation-needs = Every observation needs a location, date, and time to be helpful to identifiers. You can edit geoprivacy if you’re concerned about location privacy.

From e1b85cacd97f452d625b0f88b6f8352914547543 Mon Sep 17 00:00:00 2001
From: Angie Ta <angie@inaturalist.org>
Date: Mon, 5 Jun 2023 17:05:42 -0700
Subject: [PATCH 22/27] Destructured mutate

---
 .../ObsDetails/DataQualityAssessment.js       | 23 ++++++++++---------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/components/ObsDetails/DataQualityAssessment.js b/src/components/ObsDetails/DataQualityAssessment.js
index b81beb5e0..9cd3518c6 100644
--- a/src/components/ObsDetails/DataQualityAssessment.js
+++ b/src/components/ObsDetails/DataQualityAssessment.js
@@ -65,7 +65,9 @@ const DataQualityAssessment = ( ): React.Node => {
     ttl: -1
   };
 
-  const createFetchQualityMetricsMutation = useAuthenticatedMutation(
+  // destructured mutate to pass into useEffect to prevent infinite
+  // rerender and disabling eslint useEffect dependency rule
+  const { mutate } = useAuthenticatedMutation(
     ( PARAMS, optsWithAuth ) => fetchQualityMetrics( PARAMS, optsWithAuth ),
     {
       onSuccess: response => {
@@ -85,21 +87,20 @@ const DataQualityAssessment = ( ): React.Node => {
   );
 
   useEffect( ( ) => {
-    if ( qualityMetrics === null ) {
-      createFetchQualityMetricsMutation.mutate( fetchMetricsParams );
-    }
-    // render once on mount and reduces number of calls overall.
-    // Not sure what the better option is instead of disabling eslint
-    // since I cant use hooks in useEffect
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [] );
+    const PARAMS = {
+      id: params.observationUUID,
+      fields: "metric,agree,user_id",
+      ttl: -1
+    };
+    mutate( PARAMS );
+  }, [mutate, params] );
 
   const createQualityMetricMutation = useAuthenticatedMutation(
     ( PARAMS, optsWithAuth ) => setQualityMetric( PARAMS, optsWithAuth ),
     {
       onSuccess: () => {
         // fetch updated quality metrics with updated votes
-        createFetchQualityMetricsMutation.mutate( fetchMetricsParams );
+        mutate( fetchMetricsParams );
       },
       onError: () => {
         setHideErrorSheet( false );
@@ -128,7 +129,7 @@ const DataQualityAssessment = ( ): React.Node => {
     {
       onSuccess: () => {
         // fetch updated quality metrics with updated votes
-        createFetchQualityMetricsMutation.mutate( fetchMetricsParams );
+        mutate( fetchMetricsParams );
       },
       onError: () => {
         setHideErrorSheet( false );

From 5ff52c955ba23450b76221f28a909107b243fee5 Mon Sep 17 00:00:00 2001
From: Angie Ta <angie@inaturalist.org>
Date: Mon, 5 Jun 2023 17:28:15 -0700
Subject: [PATCH 23/27] Adjust DQA header title font size

---
 src/navigation/BottomTabNavigator/index.js |  4 +++-
 src/navigation/navigationOptions.js        | 17 ++++++++++++++++-
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/navigation/BottomTabNavigator/index.js b/src/navigation/BottomTabNavigator/index.js
index e13a9e80a..329cb4933 100644
--- a/src/navigation/BottomTabNavigator/index.js
+++ b/src/navigation/BottomTabNavigator/index.js
@@ -36,7 +36,8 @@ import {
   hideHeader,
   hideHeaderLeft,
   showCustomHeader,
-  showHeaderLeft
+  showHeaderLeft,
+  showLongHeader
 } from "navigation/navigationOptions";
 import React from "react";
 import { PermissionsAndroid, Platform } from "react-native";
@@ -356,6 +357,7 @@ const BottomTabs = ( ) => {
           name="DataQualityAssessment"
           component={DataQualityAssessment}
           options={{
+            ...showLongHeader,
             headerTitle: t( "DATA-QUALITY-ASSESSMENT" ),
             unmountOnBlur: true
           }}
diff --git a/src/navigation/navigationOptions.js b/src/navigation/navigationOptions.js
index afd0a47e6..80dd677ab 100644
--- a/src/navigation/navigationOptions.js
+++ b/src/navigation/navigationOptions.js
@@ -26,6 +26,20 @@ const showHeader: Object = {
   }
 };
 
+const showLongHeader: Object = {
+  ...baseHeaderOptions,
+  headerTintColor: colors.black,
+  // Note: left header is not supported on iOS
+  // so we would need to build a custom header for this:
+  // https://reactnavigation.org/docs/native-stack-navigator#headertitlealign
+  headerTitleStyle: {
+    fontSize: 16,
+    fontFamily: Platform.OS === "ios"
+      ? "Whitney-Medium"
+      : "Whitney-Medium-Pro"
+  }
+};
+
 export const showHeaderLeft: Object = {
   ...showHeader,
   headerLeft: ( ) => <BackButton />
@@ -53,5 +67,6 @@ export {
   blankHeaderTitle,
   hideHeader,
   showCustomHeader,
-  showHeader
+  showHeader,
+  showLongHeader
 };

From cd0468a4fb5010d7781a4181b996d09e8dd071e2 Mon Sep 17 00:00:00 2001
From: Ken-ichi Ueda <kenichi.ueda@gmail.com>
Date: Tue, 6 Jun 2023 16:31:09 -0700
Subject: [PATCH 24/27] Only show ObsDetail map if obs has coordinates; minor
 text updates

---
 package-lock.json                                  |  4 ++--
 src/components/ObsDetails/DataQualityAssessment.js |  3 +++
 src/components/ObsDetails/DetailsTab.js            | 14 ++++++++------
 src/i18n/l10n/en.ftl                               |  4 ++--
 src/i18n/l10n/en.ftl.json                          |  4 ++--
 src/i18n/strings.ftl                               |  4 ++--
 6 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1bf6859ff..86350aa47 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "inaturalistreactnative",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "inaturalistreactnative",
-      "version": "0.5.0",
+      "version": "0.5.1",
       "hasInstallScript": true,
       "dependencies": {
         "@babel/eslint-parser": "^7.21.3",
diff --git a/src/components/ObsDetails/DataQualityAssessment.js b/src/components/ObsDetails/DataQualityAssessment.js
index 9cd3518c6..bd06958a7 100644
--- a/src/components/ObsDetails/DataQualityAssessment.js
+++ b/src/components/ObsDetails/DataQualityAssessment.js
@@ -182,6 +182,9 @@ const DataQualityAssessment = ( ): React.Node => {
       if ( observation[metric] ) {
         return true;
       }
+      if ( !observation.taxon ) {
+        return false;
+      }
       if ( metric === "id_supported" ) {
         const taxonId = observation.taxon.id;
         const supportedIDs = observation.identifications.filter(
diff --git a/src/components/ObsDetails/DetailsTab.js b/src/components/ObsDetails/DetailsTab.js
index 9ecfe8e98..eb9b33e79 100644
--- a/src/components/ObsDetails/DetailsTab.js
+++ b/src/components/ObsDetails/DetailsTab.js
@@ -98,12 +98,14 @@ const DetailsTab = ( { observation }: Props ): Node => {
           />
         </KebabMenu>
       </View>
-      <Map
-        obsLatitude={observation.latitude}
-        obsLongitude={observation.longitude}
-        mapHeight={230}
-        showMarker
-      />
+      { ( observation.latitude || observation.private_latitude ) && (
+        <Map
+          obsLatitude={observation.latitude}
+          obsLongitude={observation.longitude}
+          mapHeight={230}
+          showMarker
+        />
+      ) }
 
       <View className={`mt-[11px] ${sectionClass}`}>
         <ObservationLocation observation={observation} details />
diff --git a/src/i18n/l10n/en.ftl b/src/i18n/l10n/en.ftl
index 53ff044d7..143033943 100644
--- a/src/i18n/l10n/en.ftl
+++ b/src/i18n/l10n/en.ftl
@@ -164,9 +164,9 @@ Data-quality-assessment-description-research = It can now be used for research a
 
 Data-quality-assessment-description-research-not-licensed = However, it is not licensed for re-use and will not be shared with data repositories that respect license choices.
 
-Data-quality-assessment-description-needs-id = This observation has not yet met the conditions required to meet research grade status:
+Data-quality-assessment-description-needs-id = This observation has not yet met the conditions for Research Grade status:
 
-Data-quality-assessment-description-casual = This observation has not met the conditions required to meet research grade status.
+Data-quality-assessment-description-casual = This observation has not met the conditions for Research Grade status.
 
 # checklist test for Data Quality Assessment of Observation Details 
 Data-quality-assessment-date-specified = Date specified
diff --git a/src/i18n/l10n/en.ftl.json b/src/i18n/l10n/en.ftl.json
index 3a4910e5a..aa805dca1 100644
--- a/src/i18n/l10n/en.ftl.json
+++ b/src/i18n/l10n/en.ftl.json
@@ -98,8 +98,8 @@
     "val": "It can now be used for research and featured on other websites."
   },
   "Data-quality-assessment-description-research-not-licensed": "However, it is not licensed for re-use and will not be shared with data repositories that respect license choices.",
-  "Data-quality-assessment-description-needs-id": "This observation has not yet met the conditions required to meet research grade status:",
-  "Data-quality-assessment-description-casual": "This observation has not met the conditions required to meet research grade status.",
+  "Data-quality-assessment-description-needs-id": "This observation has not yet met the conditions for Research Grade status:",
+  "Data-quality-assessment-description-casual": "This observation has not met the conditions for Research Grade status.",
   "Data-quality-assessment-date-specified": {
     "comment": "checklist test for Data Quality Assessment of Observation Details ",
     "val": "Date specified"
diff --git a/src/i18n/strings.ftl b/src/i18n/strings.ftl
index 53ff044d7..143033943 100644
--- a/src/i18n/strings.ftl
+++ b/src/i18n/strings.ftl
@@ -164,9 +164,9 @@ Data-quality-assessment-description-research = It can now be used for research a
 
 Data-quality-assessment-description-research-not-licensed = However, it is not licensed for re-use and will not be shared with data repositories that respect license choices.
 
-Data-quality-assessment-description-needs-id = This observation has not yet met the conditions required to meet research grade status:
+Data-quality-assessment-description-needs-id = This observation has not yet met the conditions for Research Grade status:
 
-Data-quality-assessment-description-casual = This observation has not met the conditions required to meet research grade status.
+Data-quality-assessment-description-casual = This observation has not met the conditions for Research Grade status.
 
 # checklist test for Data Quality Assessment of Observation Details 
 Data-quality-assessment-date-specified = Date specified

From 028fe718b47ad884d0aa0d293933d09b7ba54222 Mon Sep 17 00:00:00 2001
From: Angie Ta <angie@inaturalist.org>
Date: Tue, 13 Jun 2023 10:33:47 -0700
Subject: [PATCH 25/27] Added observed_on to realm observations, TODO
 placeholder, checks for date, location and evidence

---
 .../ObsDetails/DataQualityAssessment.js       | 34 +++++++++++++------
 src/components/ObsDetails/DetailsTab.js       | 16 +++++----
 src/realmModels/Observation.js                |  6 ++++
 src/realmModels/index.js                      | 11 +++++-
 4 files changed, 49 insertions(+), 18 deletions(-)

diff --git a/src/components/ObsDetails/DataQualityAssessment.js b/src/components/ObsDetails/DataQualityAssessment.js
index 9cd3518c6..cdd9ed127 100644
--- a/src/components/ObsDetails/DataQualityAssessment.js
+++ b/src/components/ObsDetails/DataQualityAssessment.js
@@ -2,6 +2,7 @@
 import { useRoute } from "@react-navigation/native";
 import { deleteQualityMetric, fetchQualityMetrics, setQualityMetric } from "api/qualityMetrics";
 import DQAVoteButtons from "components/ObsDetails/DQAVoteButtons";
+import PlaceholderText from "components/PlaceholderText";
 import {
   Body3,
   BottomSheet,
@@ -179,18 +180,30 @@ const DataQualityAssessment = ( ): React.Node => {
 
   const checkTest = metric => {
     if ( observation ) {
-      if ( observation[metric] ) {
-        return true;
+      if ( metric === "date" ) {
+        return observation[metric] !== null;
       }
-      if ( metric === "id_supported" ) {
-        const taxonId = observation.taxon.id;
-        const supportedIDs = observation.identifications.filter(
-          identification => ( identification.taxon.id === taxonId )
-        ).length;
-        return supportedIDs >= 2;
+      if ( metric === "location" ) {
+        const removedNull = observation[metric]
+          .filter( value => ( value !== null ) );
+        return removedNull.length !== 0;
       }
-      if ( metric === "rank" && observation.taxon.rank_level <= 10 ) {
-        return true;
+      if ( metric === "evidence" ) {
+        const removedNull = observation[metric]
+          .filter( value => ( Object.keys( value ).length !== 0 ) );
+        return removedNull.length !== 0;
+      }
+      if ( observation.taxon ) {
+        if ( metric === "id_supported" ) {
+          const taxonId = observation.taxon.id;
+          const supportedIDs = observation.identifications.filter(
+            identification => ( identification.taxon.id === taxonId )
+          ).length;
+          return supportedIDs >= 2;
+        }
+        if ( metric === "rank" && observation.taxon.rank_level <= 10 ) {
+          return true;
+        }
       }
     }
     return false;
@@ -352,6 +365,7 @@ const DataQualityAssessment = ( ): React.Node => {
         <Divider />
 
         <View className="flex-row bg-lightGray px-[15px] py-[7px] mt-[20px]">
+          <PlaceholderText text="TODO" />
           <Body3 className="shrink">
             {t(
               "Data-quality-assessment-can-taxon-still-be-confirmed-improved-based-on-the-evidence"
diff --git a/src/components/ObsDetails/DetailsTab.js b/src/components/ObsDetails/DetailsTab.js
index 9ecfe8e98..c890338ad 100644
--- a/src/components/ObsDetails/DetailsTab.js
+++ b/src/components/ObsDetails/DetailsTab.js
@@ -98,12 +98,14 @@ const DetailsTab = ( { observation }: Props ): Node => {
           />
         </KebabMenu>
       </View>
-      <Map
-        obsLatitude={observation.latitude}
-        obsLongitude={observation.longitude}
-        mapHeight={230}
-        showMarker
-      />
+      { ( observation.latitude || observation.private_latitude ) && (
+        <Map
+          obsLatitude={observation.latitude}
+          obsLongitude={observation.longitude}
+          mapHeight={230}
+          showMarker
+        />
+      ) }
 
       <View className={`mt-[11px] ${sectionClass}`}>
         <ObservationLocation observation={observation} details />
@@ -141,7 +143,7 @@ const DetailsTab = ( { observation }: Props ): Node => {
               qualityGrade,
               observationUUID,
               observation: {
-                date: observation._created_at,
+                date: observation.observed_on,
                 location: [observation.latitude, observation.longitude],
                 evidence: [observation.observationPhotos, observation.observationSounds],
                 taxon: observation.taxon,
diff --git a/src/realmModels/Observation.js b/src/realmModels/Observation.js
index fee2c87a3..3ec68d80d 100644
--- a/src/realmModels/Observation.js
+++ b/src/realmModels/Observation.js
@@ -33,6 +33,7 @@ class Observation extends Realm.Object {
     location: true,
     longitude: true,
     observation_photos: ObservationPhoto.OBSERVATION_PHOTOS_FIELDS,
+    observed_on: true,
     place_guess: true,
     quality_grade: true,
     taxon: Taxon.TAXON_FIELDS,
@@ -47,6 +48,9 @@ class Observation extends Realm.Object {
       captive_flag: false,
       geoprivacy: "open",
       owners_identification_from_vision: false,
+      observed_on: obs
+        ? obs?.observed_on
+        : createObservedOnStringForUpload( ),
       observed_on_string: obs
         ? obs?.observed_on_string
         : createObservedOnStringForUpload( ),
@@ -187,6 +191,7 @@ class Observation extends Realm.Object {
       species_guess: obs.species_guess,
       description: obs.description,
       observed_on_string: obs.observed_on_string,
+      observed_on: obs.observed_on,
       place_guess: obs.place_guess,
       latitude: obs.latitude,
       longitude: obs.longitude,
@@ -486,6 +491,7 @@ class Observation extends Realm.Object {
       observationSounds: "ObservationSound[]",
       // date and/or time submitted to the server when a new obs is uploaded
       observed_on_string: "string?",
+      observed_on: "string?",
       owners_identification_from_vision: "bool?",
       species_guess: "string?",
       place_guess: { type: "string?", mapTo: "placeGuess" },
diff --git a/src/realmModels/index.js b/src/realmModels/index.js
index 9b9dea866..657552cba 100644
--- a/src/realmModels/index.js
+++ b/src/realmModels/index.js
@@ -24,9 +24,18 @@ export default {
     Taxon,
     User
   ],
-  schemaVersion: 33,
+  schemaVersion: 34,
   path: `${RNFS.DocumentDirectoryPath}/db.realm`,
   migration: ( oldRealm, newRealm ) => {
+    if ( oldRealm.schemaVersion < 34 ) {
+      const oldObservations = oldRealm.objects( "Observation" );
+      const newObservations = newRealm.objects( "Observation" );
+      oldObservations.keys( ).forEach( objectIndex => {
+        const oldObservation = oldObservations[objectIndex];
+        const newObservation = newObservations[objectIndex];
+        newObservation.observed_on = oldObservation.time_observed_at;
+      } );
+    }
     if ( oldRealm.schemaVersion < 33 ) {
       const oldObservations = oldRealm.objects( "Observation" );
       const newObservations = newRealm.objects( "Observation" );

From baa2769049339977ad3cb7c25d71049995f41df1 Mon Sep 17 00:00:00 2001
From: Angie Ta <angie@inaturalist.org>
Date: Wed, 14 Jun 2023 01:17:44 -0700
Subject: [PATCH 26/27] DQAVoteButton spacing change

---
 src/components/ObsDetails/DQAVoteButtons.js   |  16 +-
 .../ObsDetails/DataQualityAssessment.js       | 215 +++++++++---------
 src/i18n/l10n/en.ftl                          |   2 +-
 src/i18n/l10n/en.ftl.json                     |   2 +-
 src/i18n/strings.ftl                          |   2 +-
 5 files changed, 120 insertions(+), 117 deletions(-)

diff --git a/src/components/ObsDetails/DQAVoteButtons.js b/src/components/ObsDetails/DQAVoteButtons.js
index f84440669..3619a84a9 100644
--- a/src/components/ObsDetails/DQAVoteButtons.js
+++ b/src/components/ObsDetails/DQAVoteButtons.js
@@ -29,12 +29,13 @@ const getUserVote = ( metric, qualityMetrics ) => {
 };
 
 const renderVoteCount = ( status, metric, qualityMetrics ) => {
+  let count = 0;
   if ( qualityMetrics ) {
-    const count = qualityMetrics.filter(
+    count = qualityMetrics.filter(
       element => ( element.agree === status && element.metric === metric )
     ).length;
 
-    return ( count > 0 ) && <Body3>{count}</Body3>;
+    return ( count > 0 ) && <Body3 classname="ml-[5px]">{count}</Body3>;
   }
   return null;
 };
@@ -44,10 +45,11 @@ const DQAVoteButtons = ( {
 }: Props ): React.Node => {
   const theme = useTheme( );
   const ifAgree = getUserVote( metric, qualityMetrics );
+  const activityIndicatorOffset = "mx-[7px]";
 
   const renderAgree = () => {
     if ( loadingAgree && loadingMetric === metric ) {
-      return ( <ActivityIndicator size={33} /> );
+      return ( <ActivityIndicator size={33} className={activityIndicatorOffset} /> );
     }
     if ( ifAgree ) {
       return (
@@ -70,7 +72,7 @@ const DQAVoteButtons = ( {
 
   const renderDisagree = () => {
     if ( loadingDisagree && loadingMetric === metric ) {
-      return ( <ActivityIndicator size={30} className="mx-[7px]" /> );
+      return ( <ActivityIndicator size={30} className={activityIndicatorOffset} /> );
     }
     if ( ifAgree === null ) {
       return (
@@ -101,12 +103,12 @@ const DQAVoteButtons = ( {
   };
 
   return (
-    <View className="flex-row items-center space-x-[5px]">
-      <View className="flex-row items-center">
+    <View className="flex-row items-center justify-between w-[97px] space-x-[11px]">
+      <View className="flex-row items-center w-1/2">
         {renderAgree()}
         {renderVoteCount( true, metric, qualityMetrics )}
       </View>
-      <View className="flex-row items-center">
+      <View className="flex-row items-center w-1/2">
         {renderDisagree()}
         {renderVoteCount( false, metric, qualityMetrics )}
       </View>
diff --git a/src/components/ObsDetails/DataQualityAssessment.js b/src/components/ObsDetails/DataQualityAssessment.js
index cdd9ed127..9a080a206 100644
--- a/src/components/ObsDetails/DataQualityAssessment.js
+++ b/src/components/ObsDetails/DataQualityAssessment.js
@@ -51,8 +51,8 @@ const DataQualityAssessment = ( ): React.Node => {
   const { observationUUID, observation, qualityGrade } = params;
   const isResearchGrade = qualityGrade === "research";
   const theme = useTheme( );
-  const sectionClass = "flex-row ml-[15px] my-[14px] space-x-[11px]";
-  const voteClass = "flex-row mx-[15px] my-[7px] justify-between items-center";
+  const sectionClass = "flex-row my-[14px] space-x-[11px]";
+  const voteClass = "flex-row mr-[15px] my-[7px] justify-between items-center";
   const listTextClass = "flex-row space-x-[11px]";
   const [qualityMetrics, setQualityMetrics] = useState( null );
   const [loadingAgree, setLoadingAgree] = useState( false );
@@ -248,121 +248,122 @@ const DataQualityAssessment = ( ): React.Node => {
           </List2>
         </View>
         <Divider />
-
-        <View className={sectionClass}>
-          {renderIndicator( "date" ) }
-          <Body3>{t( "Data-quality-assessment-date-specified" )}</Body3>
-        </View>
-        <Divider />
-
-        <View className={sectionClass}>
-          {renderIndicator( "location" )}
-          <Body3>{t( "Data-quality-assessment-location-specified" )}</Body3>
-        </View>
-        <Divider />
-
-        <View className={sectionClass}>
-          {renderIndicator( "evidence" )}
-          <Body3>{t( "Data-quality-assessment-has-photos-or-sounds" )}</Body3>
-        </View>
-        <Divider />
-
-        <View className={sectionClass}>
-          {renderIndicator( "id_supported" )}
-          <Body3>{t( "Data-quality-assessment-id-supported-by-two-or-more" )}</Body3>
-        </View>
-        <Divider />
-
-        <View className={sectionClass}>
-          {renderIndicator( "rank" )}
-          <Body3>{t( "Data-quality-assessment-community-taxon-at-species-level-or-lower" )}</Body3>
-        </View>
-        <Divider />
-
-        <View className={voteClass}>
-          <View className={listTextClass}>
-            {renderMetricIndicator( "date" )}
-            <Body3>{t( "Data-quality-assessment-date-is-accurate" )}</Body3>
+        <View className="mx-[15px]">
+          <View className={sectionClass}>
+            {renderIndicator( "date" ) }
+            <Body3>{t( "Data-quality-assessment-date-specified" )}</Body3>
           </View>
-          <DQAVoteButtons
-            metric="date"
-            qualityMetrics={qualityMetrics}
-            setVote={setMetricVote}
-            loadingAgree={loadingAgree}
-            loadingDisagree={loadingDisagree}
-            loadingMetric={loadingMetric}
-            removeVote={removeMetricVote}
-          />
-        </View>
-        <Divider />
+          <Divider />
 
-        <View className={voteClass}>
-          <View className={listTextClass}>
-            {renderMetricIndicator( "location" )}
-            <Body3>{t( "Data-quality-assessment-location-is-accurate" )}</Body3>
+          <View className={sectionClass}>
+            {renderIndicator( "location" )}
+            <Body3>{t( "Data-quality-assessment-location-specified" )}</Body3>
           </View>
-          <DQAVoteButtons
-            metric="location"
-            qualityMetrics={qualityMetrics}
-            setVote={setMetricVote}
-            loadingAgree={loadingAgree}
-            loadingDisagree={loadingDisagree}
-            loadingMetric={loadingMetric}
-            removeVote={removeMetricVote}
-          />
-        </View>
-        <Divider />
+          <Divider />
 
-        <View className={voteClass}>
-          <View className={listTextClass}>
-            {renderMetricIndicator( "wild" )}
-            <Body3>{t( "Data-quality-assessment-organism-is-wild" )}</Body3>
+          <View className={sectionClass}>
+            {renderIndicator( "evidence" )}
+            <Body3>{t( "Data-quality-assessment-has-photos-or-sounds" )}</Body3>
           </View>
-          <DQAVoteButtons
-            metric="wild"
-            qualityMetrics={qualityMetrics}
-            setVote={setMetricVote}
-            loadingAgree={loadingAgree}
-            loadingDisagree={loadingDisagree}
-            loadingMetric={loadingMetric}
-            removeVote={removeMetricVote}
-          />
-        </View>
-        <Divider />
+          <Divider />
 
-        <View className={voteClass}>
-          <View className={listTextClass}>
-            {renderMetricIndicator( "evidence" )}
-            <Body3>{t( "Data-quality-assessment-evidence-of-organism" )}</Body3>
+          <View className={sectionClass}>
+            {renderIndicator( "id_supported" )}
+            <Body3>{t( "Data-quality-assessment-id-supported-by-two-or-more" )}</Body3>
           </View>
-          <DQAVoteButtons
-            metric="evidence"
-            qualityMetrics={qualityMetrics}
-            setVote={setMetricVote}
-            loadingAgree={loadingAgree}
-            loadingDisagree={loadingDisagree}
-            loadingMetric={loadingMetric}
-            removeVote={removeMetricVote}
-          />
-        </View>
-        <Divider />
+          <Divider />
 
-        <View className={voteClass}>
-          <View className={listTextClass}>
-            {renderMetricIndicator( "recent" )}
-            <Body3>{t( "Data-quality-assessment-recent-evidence-of-organism" )}</Body3>
+          <View className={sectionClass}>
+            {renderIndicator( "rank" )}
+            <Body3>{t( "Data-quality-assessment-community-taxon-species-level-or-lower" )}</Body3>
           </View>
-          <DQAVoteButtons
-            metric="recent"
-            qualityMetrics={qualityMetrics}
-            setVote={setMetricVote}
-            loadingAgree={loadingAgree}
-            loadingDisagree={loadingDisagree}
-            loadingMetric={loadingMetric}
-            removeVote={removeMetricVote}
-          />
+          <Divider />
+
+          <View className={voteClass}>
+            <View className={listTextClass}>
+              {renderMetricIndicator( "date" )}
+              <Body3>{t( "Data-quality-assessment-date-is-accurate" )}</Body3>
+            </View>
+            <DQAVoteButtons
+              metric="date"
+              qualityMetrics={qualityMetrics}
+              setVote={setMetricVote}
+              loadingAgree={loadingAgree}
+              loadingDisagree={loadingDisagree}
+              loadingMetric={loadingMetric}
+              removeVote={removeMetricVote}
+            />
+          </View>
+          <Divider />
+
+          <View className={voteClass}>
+            <View className={listTextClass}>
+              {renderMetricIndicator( "location" )}
+              <Body3>{t( "Data-quality-assessment-location-is-accurate" )}</Body3>
+            </View>
+            <DQAVoteButtons
+              metric="location"
+              qualityMetrics={qualityMetrics}
+              setVote={setMetricVote}
+              loadingAgree={loadingAgree}
+              loadingDisagree={loadingDisagree}
+              loadingMetric={loadingMetric}
+              removeVote={removeMetricVote}
+            />
+          </View>
+          <Divider />
+
+          <View className={voteClass}>
+            <View className={listTextClass}>
+              {renderMetricIndicator( "wild" )}
+              <Body3>{t( "Data-quality-assessment-organism-is-wild" )}</Body3>
+            </View>
+            <DQAVoteButtons
+              metric="wild"
+              qualityMetrics={qualityMetrics}
+              setVote={setMetricVote}
+              loadingAgree={loadingAgree}
+              loadingDisagree={loadingDisagree}
+              loadingMetric={loadingMetric}
+              removeVote={removeMetricVote}
+            />
+          </View>
+          <Divider />
+
+          <View className={voteClass}>
+            <View className={listTextClass}>
+              {renderMetricIndicator( "evidence" )}
+              <Body3>{t( "Data-quality-assessment-evidence-of-organism" )}</Body3>
+            </View>
+            <DQAVoteButtons
+              metric="evidence"
+              qualityMetrics={qualityMetrics}
+              setVote={setMetricVote}
+              loadingAgree={loadingAgree}
+              loadingDisagree={loadingDisagree}
+              loadingMetric={loadingMetric}
+              removeVote={removeMetricVote}
+            />
+          </View>
+          <Divider />
+
+          <View className={voteClass}>
+            <View className={listTextClass}>
+              {renderMetricIndicator( "recent" )}
+              <Body3>{t( "Data-quality-assessment-recent-evidence-of-organism" )}</Body3>
+            </View>
+            <DQAVoteButtons
+              metric="recent"
+              qualityMetrics={qualityMetrics}
+              setVote={setMetricVote}
+              loadingAgree={loadingAgree}
+              loadingDisagree={loadingDisagree}
+              loadingMetric={loadingMetric}
+              removeVote={removeMetricVote}
+            />
+          </View>
+          <Divider />
         </View>
-        <Divider />
 
         <View className="flex-row bg-lightGray px-[15px] py-[7px] mt-[20px]">
           <PlaceholderText text="TODO" />
diff --git a/src/i18n/l10n/en.ftl b/src/i18n/l10n/en.ftl
index 143033943..dbd2890bf 100644
--- a/src/i18n/l10n/en.ftl
+++ b/src/i18n/l10n/en.ftl
@@ -177,7 +177,7 @@ Data-quality-assessment-has-photos-or-sounds = Has Photos or Sounds
 
 Data-quality-assessment-id-supported-by-two-or-more = Has ID supported by two or more
 
-Data-quality-assessment-community-taxon-at-species-level-or-lower = Community taxon at species level or lower
+Data-quality-assessment-community-taxon-species-level-or-lower = Community taxon at species level or lower
 
 Data-quality-assessment-date-is-accurate = Date is accurate
 
diff --git a/src/i18n/l10n/en.ftl.json b/src/i18n/l10n/en.ftl.json
index aa805dca1..d9655cd21 100644
--- a/src/i18n/l10n/en.ftl.json
+++ b/src/i18n/l10n/en.ftl.json
@@ -107,7 +107,7 @@
   "Data-quality-assessment-location-specified": "Location specified",
   "Data-quality-assessment-has-photos-or-sounds": "Has Photos or Sounds",
   "Data-quality-assessment-id-supported-by-two-or-more": "Has ID supported by two or more",
-  "Data-quality-assessment-community-taxon-at-species-level-or-lower": "Community taxon at species level or lower",
+  "Data-quality-assessment-community-taxon-species-level-or-lower": "Community taxon at species level or lower",
   "Data-quality-assessment-date-is-accurate": "Date is accurate",
   "Data-quality-assessment-location-is-accurate": "Location is accurate",
   "Data-quality-assessment-organism-is-wild": "Organism is wild",
diff --git a/src/i18n/strings.ftl b/src/i18n/strings.ftl
index 143033943..dbd2890bf 100644
--- a/src/i18n/strings.ftl
+++ b/src/i18n/strings.ftl
@@ -177,7 +177,7 @@ Data-quality-assessment-has-photos-or-sounds = Has Photos or Sounds
 
 Data-quality-assessment-id-supported-by-two-or-more = Has ID supported by two or more
 
-Data-quality-assessment-community-taxon-at-species-level-or-lower = Community taxon at species level or lower
+Data-quality-assessment-community-taxon-species-level-or-lower = Community taxon at species level or lower
 
 Data-quality-assessment-date-is-accurate = Date is accurate
 

From 3257268465b0a17c8b2a43c183eeb46e5c63eb6a Mon Sep 17 00:00:00 2001
From: Angie Ta <angie@inaturalist.org>
Date: Tue, 20 Jun 2023 01:05:11 -0700
Subject: [PATCH 27/27] Changes requested, code style

---
 src/components/ObsDetails/DQAVoteButtons.js   | 29 ++++++++++---------
 .../ObsDetails/DataQualityAssessment.js       | 29 +++++++++++--------
 src/components/ObsDetails/DetailsTab.js       |  5 +++-
 3 files changed, 36 insertions(+), 27 deletions(-)

diff --git a/src/components/ObsDetails/DQAVoteButtons.js b/src/components/ObsDetails/DQAVoteButtons.js
index 3619a84a9..fcd77daf6 100644
--- a/src/components/ObsDetails/DQAVoteButtons.js
+++ b/src/components/ObsDetails/DQAVoteButtons.js
@@ -22,36 +22,36 @@ const getUserVote = ( metric, qualityMetrics ) => {
   if ( qualityMetrics ) {
     const match = qualityMetrics.find( element => (
       element.metric === metric && element.user_id ) );
-    if ( match && match.agree === true ) { return true; }
-    if ( match && match.agree === false ) { return false; }
+    if ( match ) {
+      return match.agree === true;
+    }
   }
   return null;
 };
 
 const renderVoteCount = ( status, metric, qualityMetrics ) => {
-  let count = 0;
-  if ( qualityMetrics ) {
-    count = qualityMetrics.filter(
-      element => ( element.agree === status && element.metric === metric )
-    ).length;
+  if ( !qualityMetrics ) return null;
 
-    return ( count > 0 ) && <Body3 classname="ml-[5px]">{count}</Body3>;
-  }
-  return null;
+  const count = qualityMetrics
+    ?.filter( qualityMetric => qualityMetric.agree === status && qualityMetric.metric === metric )
+    ?.length;
+  if ( !count || count === 0 ) return null;
+
+  return <Body3 classname="ml-[5px]">{count}</Body3>;
 };
 
 const DQAVoteButtons = ( {
   metric, qualityMetrics, loadingAgree, loadingDisagree, loadingMetric, setVote, removeVote
 }: Props ): React.Node => {
   const theme = useTheme( );
-  const ifAgree = getUserVote( metric, qualityMetrics );
+  const userAgrees = getUserVote( metric, qualityMetrics );
   const activityIndicatorOffset = "mx-[7px]";
 
   const renderAgree = () => {
     if ( loadingAgree && loadingMetric === metric ) {
       return ( <ActivityIndicator size={33} className={activityIndicatorOffset} /> );
     }
-    if ( ifAgree ) {
+    if ( userAgrees ) {
       return (
         <INatIconButton
           icon="arrow-up-bold-circle"
@@ -74,7 +74,8 @@ const DQAVoteButtons = ( {
     if ( loadingDisagree && loadingMetric === metric ) {
       return ( <ActivityIndicator size={30} className={activityIndicatorOffset} /> );
     }
-    if ( ifAgree === null ) {
+
+    if ( userAgrees === null ) {
       return (
         <INatIconButton
           icon="arrow-down-bold-circle-outline"
@@ -83,7 +84,7 @@ const DQAVoteButtons = ( {
         />
       );
     }
-    if ( !ifAgree ) {
+    if ( !userAgrees ) {
       return (
         <INatIconButton
           icon="arrow-down-bold-circle"
diff --git a/src/components/ObsDetails/DataQualityAssessment.js b/src/components/ObsDetails/DataQualityAssessment.js
index 9a080a206..e2d9f035e 100644
--- a/src/components/ObsDetails/DataQualityAssessment.js
+++ b/src/components/ObsDetails/DataQualityAssessment.js
@@ -69,7 +69,10 @@ const DataQualityAssessment = ( ): React.Node => {
   // destructured mutate to pass into useEffect to prevent infinite
   // rerender and disabling eslint useEffect dependency rule
   const { mutate } = useAuthenticatedMutation(
-    ( PARAMS, optsWithAuth ) => fetchQualityMetrics( PARAMS, optsWithAuth ),
+    ( qualityMetricParams, optsWithAuth ) => fetchQualityMetrics(
+      qualityMetricParams,
+      optsWithAuth
+    ),
     {
       onSuccess: response => {
         setLoadingMetric( null );
@@ -88,16 +91,15 @@ const DataQualityAssessment = ( ): React.Node => {
   );
 
   useEffect( ( ) => {
-    const PARAMS = {
+    mutate( {
       id: params.observationUUID,
       fields: "metric,agree,user_id",
       ttl: -1
-    };
-    mutate( PARAMS );
+    } );
   }, [mutate, params] );
 
   const createQualityMetricMutation = useAuthenticatedMutation(
-    ( PARAMS, optsWithAuth ) => setQualityMetric( PARAMS, optsWithAuth ),
+    ( qualityMetricParams, optsWithAuth ) => setQualityMetric( qualityMetricParams, optsWithAuth ),
     {
       onSuccess: () => {
         // fetch updated quality metrics with updated votes
@@ -110,7 +112,7 @@ const DataQualityAssessment = ( ): React.Node => {
   );
 
   const setMetricVote = ( metric, vote ) => {
-    const PARAMS = {
+    const qualityMetricParams = {
       id: observationUUID,
       metric,
       agree: vote,
@@ -122,11 +124,14 @@ const DataQualityAssessment = ( ): React.Node => {
     } else {
       setLoadingDisagree( true );
     }
-    createQualityMetricMutation.mutate( PARAMS );
+    createQualityMetricMutation.mutate( qualityMetricParams );
   };
 
   const createRemoveQualityMetricMutation = useAuthenticatedMutation(
-    ( PARAMS, optsWithAuth ) => deleteQualityMetric( PARAMS, optsWithAuth ),
+    ( qualityMetricParams, optsWithAuth ) => deleteQualityMetric(
+      qualityMetricParams,
+      optsWithAuth
+    ),
     {
       onSuccess: () => {
         // fetch updated quality metrics with updated votes
@@ -139,7 +144,7 @@ const DataQualityAssessment = ( ): React.Node => {
   );
 
   const removeMetricVote = ( metric, vote ) => {
-    const PARAMS = {
+    const qualityMetricParams = {
       id: observationUUID,
       metric,
       ttyl: -1
@@ -150,7 +155,7 @@ const DataQualityAssessment = ( ): React.Node => {
     } else {
       setLoadingDisagree( true );
     }
-    createRemoveQualityMetricMutation.mutate( PARAMS );
+    createRemoveQualityMetricMutation.mutate( qualityMetricParams );
   };
 
   const ifMajorityAgree = metric => {
@@ -189,9 +194,9 @@ const DataQualityAssessment = ( ): React.Node => {
         return removedNull.length !== 0;
       }
       if ( metric === "evidence" ) {
-        const removedNull = observation[metric]
+        const removedEmpty = observation[metric]
           .filter( value => ( Object.keys( value ).length !== 0 ) );
-        return removedNull.length !== 0;
+        return removedEmpty.length !== 0;
       }
       if ( observation.taxon ) {
         if ( metric === "id_supported" ) {
diff --git a/src/components/ObsDetails/DetailsTab.js b/src/components/ObsDetails/DetailsTab.js
index c890338ad..c5074ac75 100644
--- a/src/components/ObsDetails/DetailsTab.js
+++ b/src/components/ObsDetails/DetailsTab.js
@@ -146,7 +146,10 @@ const DetailsTab = ( { observation }: Props ): Node => {
                 date: observation.observed_on,
                 location: [observation.latitude, observation.longitude],
                 evidence: [observation.observationPhotos, observation.observationSounds],
-                taxon: observation.taxon,
+                taxon: {
+                  id: observation.taxon.id,
+                  rank_level: observation.taxon.rank_level
+                },
                 identifications: observation.identifications
               }
             } )}