From 628e2e03d26e02b8532bd1fb60f67d765aa8ef8c Mon Sep 17 00:00:00 2001
From: Ken-ichi Ueda <kenichi.ueda@gmail.com>
Date: Mon, 25 Mar 2024 18:18:38 -0700
Subject: [PATCH] Several minor fixes

* Show Explore view bottom sheet when HeaderCount tapped
* Fix ObsDetails crash when obs has no faves or obs POJO passed in
* End padding for description on ObsEdit
* Bottom padding for bottom sheets on devices w/ inset (e.g. no home button)
* Subheading1 is apparently supposed to be Whitney Book
* Second line of taxon name on TaxonDetail should be Subheading1
---
 src/components/Explore/Explore.js             |  1 +
 src/components/Explore/Header/Header.js       |  5 ++++-
 src/components/Explore/Header/HeaderCount.js  | 16 +++++++++-----
 src/components/ObsDetails/FaveButton.js       |  2 +-
 src/components/ObsEdit/DropdownItem.js        | 19 ++++++++++------
 src/components/ObsEdit/ObsEdit.js             |  5 +++--
 src/components/ObsEdit/OtherDataSection.js    |  2 +-
 .../SharedComponents/Sheets/BottomSheet.js    | 22 ++++++++++++++-----
 .../Typography/Subheading1.js                 |  2 +-
 .../TaxonDetails/TaxonDetailsTitle.js         |  6 ++---
 .../__snapshots__/Subheading1.test.js.snap    |  3 ---
 11 files changed, 53 insertions(+), 30 deletions(-)

diff --git a/src/components/Explore/Explore.js b/src/components/Explore/Explore.js
index 775508f3b..4a9b37c0e 100644
--- a/src/components/Explore/Explore.js
+++ b/src/components/Explore/Explore.js
@@ -83,6 +83,7 @@ const Explore = ( {
       exploreViewIcon={exploreViewIcon[exploreView]}
       loadingStatus={loadingStatus}
       openFiltersModal={openFiltersModal}
+      onPressCount={( ) => setShowExploreBottomSheet( true )}
     />
   );
 
diff --git a/src/components/Explore/Header/Header.js b/src/components/Explore/Header/Header.js
index fcbcfaaa1..4d91d8bc3 100644
--- a/src/components/Explore/Header/Header.js
+++ b/src/components/Explore/Header/Header.js
@@ -24,7 +24,8 @@ type Props = {
   exploreView: string,
   exploreViewIcon: string,
   loadingStatus: boolean,
-  openFiltersModal: Function,
+  onPressCount?: Function,
+  openFiltersModal: Function
 }
 
 const Header = ( {
@@ -32,6 +33,7 @@ const Header = ( {
   exploreView,
   exploreViewIcon,
   loadingStatus,
+  onPressCount,
   openFiltersModal
 }: Props ): Node => {
   const navigation = useNavigation( );
@@ -108,6 +110,7 @@ const Header = ( {
           exploreView={exploreView}
           exploreViewIcon={exploreViewIcon}
           loadingStatus={loadingStatus}
+          onPress={onPressCount}
         />
       </Surface>
     </View>
diff --git a/src/components/Explore/Header/HeaderCount.js b/src/components/Explore/Header/HeaderCount.js
index ac74c3a7a..d487098de 100644
--- a/src/components/Explore/Header/HeaderCount.js
+++ b/src/components/Explore/Header/HeaderCount.js
@@ -5,7 +5,7 @@ import {
   Body2,
   INatIcon
 } from "components/SharedComponents";
-import { View } from "components/styledComponents";
+import { Pressable } from "components/styledComponents";
 import type { Node } from "react";
 import React from "react";
 import { useTheme } from "react-native-paper";
@@ -15,14 +15,16 @@ type Props = {
   count: ?number,
   exploreView: string,
   exploreViewIcon: string,
-  loadingStatus: boolean
+  loadingStatus: boolean,
+  onPress: Function,
 }
 
 const HeaderCount = ( {
   count,
   exploreView,
   exploreViewIcon,
-  loadingStatus
+  loadingStatus,
+  onPress
 }: Props ): Node => {
   const { t } = useTranslation( );
   const theme = useTheme( );
@@ -41,7 +43,11 @@ const HeaderCount = ( {
   };
 
   return (
-    <View className="h-[40px] flex-row items-center justify-center">
+    <Pressable
+      className="h-[40px] flex-row items-center justify-center"
+      onPress={onPress}
+      accessibilityRole="summary"
+    >
       {( loadingStatus && count === null ) && <ActivityIndicator size={25} />}
       {count !== null && (
         <>
@@ -53,7 +59,7 @@ const HeaderCount = ( {
           <Body2 className="text-white ml-3">{renderText( )}</Body2>
         </>
       )}
-    </View>
+    </Pressable>
   );
 };
 
diff --git a/src/components/ObsDetails/FaveButton.js b/src/components/ObsDetails/FaveButton.js
index 67f115d0e..d6a048579 100644
--- a/src/components/ObsDetails/FaveButton.js
+++ b/src/components/ObsDetails/FaveButton.js
@@ -33,7 +33,7 @@ const FaveButton = ( {
   const uuid = observation?.uuid;
 
   const observationFaved = useMemo( ( ) => {
-    const faves = observation?.faves && observation.faves();
+    const faves = ( observation?.faves && observation.faves() ) || [];
     if ( currentUser && faves.length > 0 ) {
       const viewerFaved = faves.find( fave => fave.user_id === currentUser.id );
       return !!viewerFaved;
diff --git a/src/components/ObsEdit/DropdownItem.js b/src/components/ObsEdit/DropdownItem.js
index 856ba9587..1535cbbfd 100644
--- a/src/components/ObsEdit/DropdownItem.js
+++ b/src/components/ObsEdit/DropdownItem.js
@@ -3,7 +3,7 @@
 import {
   Body3, INatIcon
 } from "components/SharedComponents";
-import { Pressable } from "components/styledComponents";
+import { Pressable, View } from "components/styledComponents";
 import type { Node } from "react";
 import React from "react";
 
@@ -30,18 +30,23 @@ const DropdownItem = ( {
   return (
     <Pressable
       accessibilityRole="button"
-      className="flex-row flex-nowrap items-center ml-1 mt-5"
+      className="flex-row flex-nowrap items-center ml-1 mt-5 items-start"
       onPress={handlePress}
       accessibilityLabel={accessibilityLabel}
     >
-      <INatIcon
-        size={14}
-        name={iconName}
-      />
+      <View className="mt-[2px]">
+        <INatIcon
+          size={14}
+          name={iconName}
+
+        />
+      </View>
       <Body3 className="mx-3">
         {text}
       </Body3>
-      {caret}
+      <View className="mt-[4px]">
+        {caret}
+      </View>
     </Pressable>
   );
 };
diff --git a/src/components/ObsEdit/ObsEdit.js b/src/components/ObsEdit/ObsEdit.js
index 687fde5de..de1d33926 100644
--- a/src/components/ObsEdit/ObsEdit.js
+++ b/src/components/ObsEdit/ObsEdit.js
@@ -2,6 +2,7 @@
 
 import { useIsFocused } from "@react-navigation/native";
 import { ViewWrapper } from "components/SharedComponents";
+import { View } from "components/styledComponents";
 import type { Node } from "react";
 import React, { useState } from "react";
 import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
@@ -38,7 +39,7 @@ const ObsEdit = ( ): Node => {
           />
           <KeyboardAwareScrollView className="bg-white mb-[80px]">
             {currentObservation && (
-              <>
+              <View className="pb-5">
                 {observations.length > 1 && (
                   <MultipleObservationsArrows
                     currentObservationIndex={currentObservationIndex}
@@ -65,7 +66,7 @@ const ObsEdit = ( ): Node => {
                   currentObservation={currentObservation}
                   updateObservationKeys={updateObservationKeys}
                 />
-              </>
+              </View>
             )}
           </KeyboardAwareScrollView>
         </ViewWrapper>
diff --git a/src/components/ObsEdit/OtherDataSection.js b/src/components/ObsEdit/OtherDataSection.js
index 9a2211a6b..1f7f4930e 100644
--- a/src/components/ObsEdit/OtherDataSection.js
+++ b/src/components/ObsEdit/OtherDataSection.js
@@ -56,7 +56,7 @@ const OtherDataSection = ( {
     .find( e => e.value === currentObservation?.captive_flag );
 
   return (
-    <View className="ml-5 mt-6">
+    <View className="mx-5 mt-6">
       {showGeoprivacySheet && (
         <GeoprivacySheet
           selectedValue={currentObservation?.geoprivacy}
diff --git a/src/components/SharedComponents/Sheets/BottomSheet.js b/src/components/SharedComponents/Sheets/BottomSheet.js
index d591696cc..73d714ef8 100644
--- a/src/components/SharedComponents/Sheets/BottomSheet.js
+++ b/src/components/SharedComponents/Sheets/BottomSheet.js
@@ -5,8 +5,9 @@ import BottomSheet, {
   BottomSheetView,
   useBottomSheetDynamicSnapPoints
 } from "@gorhom/bottom-sheet";
+import classnames from "classnames";
 import { BottomSheetStandardBackdrop, Heading4, INatIconButton } from "components/SharedComponents";
-import { SafeAreaView, View } from "components/styledComponents";
+import { View } from "components/styledComponents";
 import type { Node } from "react";
 import React, {
   useCallback,
@@ -15,6 +16,7 @@ import React, {
   useRef
 } from "react";
 import { Dimensions } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useTranslation } from "sharedHooks";
 import { viewStyles } from "styles/sharedComponents/bottomSheet";
 
@@ -47,6 +49,7 @@ const StandardBottomSheet = ( {
 
   const { t } = useTranslation( );
   const sheetRef = useRef( null );
+  const insets = useSafeAreaInsets( );
 
   const initialSnapPoints = useMemo( () => ["CONTENT_HEIGHT"], [] );
 
@@ -116,10 +119,17 @@ const StandardBottomSheet = ( {
       backdropComponent={renderBackdrop}
       onChange={onChange || handleBackdropPress}
     >
-      <SafeAreaView>
-        <BottomSheetView onLayout={handleContentLayout}>
+      <BottomSheetView onLayout={handleContentLayout}>
+        <View
+          className={classnames(
+            "pt-7",
+            insets.bottom > 0
+              ? "pb-7"
+              : null
+          )}
+        >
           <View className="items-center">
-            <Heading4 className="pt-7">{headerText}</Heading4>
+            <Heading4>{headerText}</Heading4>
           </View>
           {children}
           {!hideCloseButton && (
@@ -132,8 +142,8 @@ const StandardBottomSheet = ( {
               accessibilityLabel={t( "Close" )}
             />
           )}
-        </BottomSheetView>
-      </SafeAreaView>
+        </View>
+      </BottomSheetView>
     </BottomSheetComponent>
   );
 };
diff --git a/src/components/SharedComponents/Typography/Subheading1.js b/src/components/SharedComponents/Typography/Subheading1.js
index 59931748f..8810ddf27 100644
--- a/src/components/SharedComponents/Typography/Subheading1.js
+++ b/src/components/SharedComponents/Typography/Subheading1.js
@@ -7,7 +7,7 @@ import INatTextLight from "./INatTextLight";
 
 const Subheading1 = ( props: any ): Node => (
   // eslint-disable-next-line react/jsx-props-no-spreading
-  <INatTextLight className="text-xl font-light text-darkGray" {...props} />
+  <INatTextLight className="text-xl text-darkGray" {...props} />
 );
 
 export default Subheading1;
diff --git a/src/components/TaxonDetails/TaxonDetailsTitle.js b/src/components/TaxonDetails/TaxonDetailsTitle.js
index 0ff207260..ff96cccd2 100644
--- a/src/components/TaxonDetails/TaxonDetailsTitle.js
+++ b/src/components/TaxonDetails/TaxonDetailsTitle.js
@@ -3,8 +3,8 @@
 import {
   DisplayTaxonName,
   Heading1,
-  Heading3,
-  Heading4
+  Heading4,
+  Subheading1
 } from "components/SharedComponents";
 import SpeciesSeenCheckmark from "components/SharedComponents/SpeciesSeenCheckmark";
 import {
@@ -47,7 +47,7 @@ const TaxonDetailsTitle = ( {
         taxon={taxon}
         color={optionalClasses}
         topTextComponent={Heading1}
-        bottomTextComponent={Heading3}
+        bottomTextComponent={Subheading1}
       />
     </View>
   );
diff --git a/tests/unit/components/SharedComponents/Typography/__snapshots__/Subheading1.test.js.snap b/tests/unit/components/SharedComponents/Typography/__snapshots__/Subheading1.test.js.snap
index 01e893563..bfe243d49 100644
--- a/tests/unit/components/SharedComponents/Typography/__snapshots__/Subheading1.test.js.snap
+++ b/tests/unit/components/SharedComponents/Typography/__snapshots__/Subheading1.test.js.snap
@@ -12,9 +12,6 @@ exports[`Subheading1 renders correctly 1`] = `
           "fontSize": 21,
           "lineHeight": 25,
         },
-        {
-          "fontWeight": "300",
-        },
         {
           "color": "#454545",
         },