diff --git a/e2e/signedIn.e2e.js b/e2e/signedIn.e2e.js index a8aa8cded..cf90e39e0 100644 --- a/e2e/signedIn.e2e.js +++ b/e2e/signedIn.e2e.js @@ -172,7 +172,7 @@ describe( "Signed in user", () => { await element( by.id( `ObsDetails.${uuid}` ) ).scrollTo( "bottom" ); const comment = element( by.text( "This is a comment" ) ); await waitFor( comment ).toBeVisible().withTimeout( 10000 ); - await element( by.label( "Go back" ) ).tap( ); + await element( by.id( "ObsDetails.BackButton" ) ).tap( ); await waitFor( username ).toBeVisible( ).withTimeout( 10000 ); /* diff --git a/src/components/Explore/Explore.js b/src/components/Explore/Explore.js index af11ebe42..00c0cad47 100644 --- a/src/components/Explore/Explore.js +++ b/src/components/Explore/Explore.js @@ -25,7 +25,7 @@ import { import { getShadowForColor } from "styles/global"; import colors from "styles/tailwindColors"; -import Header from "./Header/Header"; +import ExploreHeader from "./Header/ExploreHeader"; import useCurrentExploreView from "./hooks/useCurrentExploreView"; import IdentifiersView from "./IdentifiersView"; import ObservationsView from "./ObservationsView"; @@ -104,7 +104,7 @@ const Explore = ( { const headerCount = count[currentExploreView]; const renderHeader = ( ) => ( -
{ @@ -84,8 +84,8 @@ const ExploreContainerWithContext = ( ): Node => { per_page: 20 }; - // need this hook to be top-level enough that HeaderCount rerenders - const { count, loadingStatus, updateCount } = useHeaderCount( ); + // need this hook to be top-level enough that ExploreHeaderCount rerenders + const { count, loadingStatus, updateCount } = useExploreHeaderCount( ); const closeFiltersModal = ( ) => setShowFiltersModal( false ); diff --git a/src/components/Explore/Header/Header.js b/src/components/Explore/Header/ExploreHeader.js similarity index 98% rename from src/components/Explore/Header/Header.js rename to src/components/Explore/Header/ExploreHeader.js index 52a807406..25443b46b 100644 --- a/src/components/Explore/Header/Header.js +++ b/src/components/Explore/Header/ExploreHeader.js @@ -20,7 +20,7 @@ import { useTranslation } from "sharedHooks"; import colors from "styles/tailwindColors"; import placeGuessText from "../helpers/placeGuessText"; -import HeaderCount from "./HeaderCount"; +import ExploreHeaderCount from "./ExploreHeaderCount"; type Props = { count: ?number, @@ -125,7 +125,7 @@ const Header = ( { )} - { const navigation = useNavigation( ); @@ -94,8 +94,8 @@ const RootExploreContainerWithContext = ( ): Node => { per_page: 20 }; - // need this hook to be top-level enough that HeaderCount rerenders - const { count, loadingStatus, updateCount } = useHeaderCount( ); + // need this hook to be top-level enough that ExploreHeaderCount rerenders + const { count, loadingStatus, updateCount } = useExploreHeaderCount( ); const closeFiltersModal = ( ) => setShowFiltersModal( false ); diff --git a/src/components/Explore/hooks/useHeaderCount.js b/src/components/Explore/hooks/useExploreHeaderCount.js similarity index 87% rename from src/components/Explore/hooks/useHeaderCount.js rename to src/components/Explore/hooks/useExploreHeaderCount.js index 2c28b9aca..1db54eadc 100644 --- a/src/components/Explore/hooks/useHeaderCount.js +++ b/src/components/Explore/hooks/useExploreHeaderCount.js @@ -4,7 +4,7 @@ import { useCallback, useMemo, useState } from "react"; -const useHeaderCount = ( ): Object => { +const useExploreHeaderCount = ( ): Object => { const [count, setCount] = useState( { observations: null, species: null, @@ -32,4 +32,4 @@ const useHeaderCount = ( ): Object => { }; }; -export default useHeaderCount; +export default useExploreHeaderCount; diff --git a/src/components/FullPageWebView/FullPageWebViewHeader.js b/src/components/FullPageWebView/FullPageWebViewHeader.js index 99f8810c8..536145e4d 100644 --- a/src/components/FullPageWebView/FullPageWebViewHeader.js +++ b/src/components/FullPageWebView/FullPageWebViewHeader.js @@ -8,10 +8,8 @@ import type { Node } from "react"; import React from "react"; import { useSafeAreaInsets } from "react-native-safe-area-context"; import { dropShadow } from "styles/global"; -import colors from "styles/tailwindColors"; type Props = { - navigation: Object, route: Object, options: Object }; @@ -26,7 +24,6 @@ const BACK_BUTTON_STYLE = { }; const FullPageWebViewHeader = ( { - navigation, route, options }: Props ): Node => { @@ -67,8 +64,6 @@ const FullPageWebViewHeader = ( { )} > diff --git a/src/components/MediaViewer/MediaViewerHeader.js b/src/components/MediaViewer/MediaViewerHeader.js index 4470ffe55..4705c3810 100644 --- a/src/components/MediaViewer/MediaViewerHeader.js +++ b/src/components/MediaViewer/MediaViewerHeader.js @@ -7,11 +7,8 @@ import { import { View } from "components/styledComponents"; import type { Node } from "react"; import React from "react"; -import { useTheme } from "react-native-paper"; import useTranslation from "sharedHooks/useTranslation"; -const BACK_BUTTON_STYLE = { position: "absolute", start: 0 }; - type Props = { onClose: Function, photoCount: number, @@ -23,7 +20,6 @@ const MediaViewerHeader = ( { onClose, soundCount = 0 }: Props ): Node => { - const theme = useTheme( ); const { t } = useTranslation( ); let headerText = t( "X-PHOTOS", { photoCount } ); @@ -36,16 +32,19 @@ const MediaViewerHeader = ( { } return ( - + - - {headerText} - + + + {headerText} + + + ); }; diff --git a/src/components/ObsDetails/ObsDetailsHeader.tsx b/src/components/ObsDetails/ObsDetailsHeader.tsx index 490cbee50..933dcd703 100644 --- a/src/components/ObsDetails/ObsDetailsHeader.tsx +++ b/src/components/ObsDetails/ObsDetailsHeader.tsx @@ -6,7 +6,7 @@ import { INatIconButton } from "components/SharedComponents"; import { - LinearGradient + LinearGradient, View } from "components/styledComponents"; import React from "react"; import DeviceInfo from "react-native-device-info"; @@ -56,25 +56,29 @@ const ObsDetailsHeader = ( { "transparent" ]} > - - { - belongsToCurrentUser - ? ( - { - prepareObsEdit( localObservation ); - navigateToObsEdit( navigation ); - }} - icon="pencil" - color={!rightIconBlack - ? colors.white - : colors.black} - accessibilityLabel={t( "Edit" )} - /> - ) - : - } + + + + + { + belongsToCurrentUser + ? ( + { + prepareObsEdit( localObservation ); + navigateToObsEdit( navigation ); + }} + icon="pencil" + color={!rightIconBlack + ? colors.white + : colors.black} + accessibilityLabel={t( "Edit" )} + /> + ) + : + } + ); }; diff --git a/src/components/ObsEdit/EvidenceSection.js b/src/components/ObsEdit/EvidenceSection.js index 3997e8e02..b4fb0bd06 100644 --- a/src/components/ObsEdit/EvidenceSection.js +++ b/src/components/ObsEdit/EvidenceSection.js @@ -86,7 +86,7 @@ const EvidenceSection = ( { }; return ( - + {showAddEvidenceSheet && ( { return ( <> -
diff --git a/src/components/ObsEdit/Header.js b/src/components/ObsEdit/ObsEditHeader.js similarity index 97% rename from src/components/ObsEdit/Header.js rename to src/components/ObsEdit/ObsEditHeader.js index 120765741..97de54c91 100644 --- a/src/components/ObsEdit/Header.js +++ b/src/components/ObsEdit/ObsEditHeader.js @@ -22,7 +22,7 @@ type Props = { currentObservation: Object } -const Header = ( { +const ObsEditHeader = ( { observations, currentObservation }: Props ): Node => { @@ -103,15 +103,13 @@ const Header = ( { ] ); const renderBackButton = useCallback( ( ) => { - const extraPadding = { - marginStart: 15, - paddingVertical: 18, - paddingEnd: 24 + const extraStart = { + marginStart: 15 }; return ( ); @@ -198,4 +196,4 @@ const Header = ( { ); }; -export default Header; +export default ObsEditHeader; diff --git a/src/components/PhotoSharing.js b/src/components/PhotoSharing.js index d70852796..ae09840df 100644 --- a/src/components/PhotoSharing.js +++ b/src/components/PhotoSharing.js @@ -80,6 +80,7 @@ const PhotoSharing = ( ): Node => { } ) ), firstObservationDefaults } ); + console.log( "photo sharing and landing group" ); navigation.navigate( "NoBottomTabStackNavigator", { screen: "GroupPhotos" } ); } }, [ diff --git a/src/components/SharedComponents/Buttons/BackButton.js b/src/components/SharedComponents/Buttons/BackButton.js index ad7b8e16e..02b264ed0 100644 --- a/src/components/SharedComponents/Buttons/BackButton.js +++ b/src/components/SharedComponents/Buttons/BackButton.js @@ -1,5 +1,6 @@ import { HeaderBackButton } from "@react-navigation/elements"; import { useNavigation } from "@react-navigation/native"; +import { Image } from "components/styledComponents"; import type { Node } from "react"; import React from "react"; import { Platform } from "react-native"; @@ -16,12 +17,27 @@ type Props = { testID?: string } -const REACT_NAVIGATION_BACK_BUTTON_STYLE = { - start: Platform.OS === "ios" - ? -15 - : 0, - minWidth: 44, - minHeight: 44 +// styling lifted from +// https://github.com/react-navigation/react-navigation/blob/395410a7a751492ad846c7723dd33b55891173e1/packages/elements/src/Header/HeaderBackButton.tsx +const REACT_NAVIGATION_BACK_BUTTON_STYLES = { + container: { + ...Platform.select( { + ios: { + paddingLeft: 8, + paddingRight: 22 + }, + default: { + paddingVertical: 3, + paddingHorizontal: 11 + } + } ) + }, + icon: Platform.select( { + ios: { + height: 21, + width: 13 + } + } ) }; const BackButton = ( { @@ -35,17 +51,31 @@ const BackButton = ( { const tintColor = color || colors.black; const { t } = useTranslation( ); + const imageStyles = [ + !inCustomHeader && REACT_NAVIGATION_BACK_BUTTON_STYLES.icon, + Boolean( tintColor ) && { tintColor }, + customStyles + ]; + + const backImage = ( ) => ( + + ); + if ( navigation?.canGoBack( ) ) { return ( diff --git a/src/components/TaxonDetails/TaxonDetails.js b/src/components/TaxonDetails/TaxonDetails.js index 09ad349d5..f51830cb3 100644 --- a/src/components/TaxonDetails/TaxonDetails.js +++ b/src/components/TaxonDetails/TaxonDetails.js @@ -190,20 +190,17 @@ const TaxonDetails = ( ): Node => { + + + - - navigation.goBack( )} - /> - {!hideNavButtons && ( - + ) ); @@ -83,7 +88,9 @@ const ContextHeader = ( { } )} > - {backButton} + + {backButton} + {customTitleComponent ? ( options.headerTitle() diff --git a/src/navigation/StackNavigators/NoBottomTabStackNavigator.js b/src/navigation/StackNavigators/NoBottomTabStackNavigator.js index 2a078375d..b3e4ee772 100644 --- a/src/navigation/StackNavigators/NoBottomTabStackNavigator.js +++ b/src/navigation/StackNavigators/NoBottomTabStackNavigator.js @@ -14,11 +14,10 @@ import PermissionGateContainer, { } from "components/SharedComponents/PermissionGateContainer.tsx"; import SoundRecorder from "components/SoundRecorder/SoundRecorder"; import { t } from "i18next"; +import ContextHeader from "navigation/ContextHeader"; import { hideHeader, - hideHeaderLeft, - showCustomHeader, - showHeader + hideHeaderLeft } from "navigation/navigationOptions"; import type { Node } from "react"; import React from "react"; @@ -40,10 +39,9 @@ const CAMERA_SCREEN_OPTIONS = { }; const GROUP_PHOTOS_OPTIONS = { - ...showHeader, - ...showCustomHeader, - lazy: true, - headerShadowVisible: false + header: ContextHeader, + alignStart: true, + lazy: true }; const SOUND_RECORDER_OPTIONS = { diff --git a/src/navigation/navigationOptions.js b/src/navigation/navigationOptions.js index 867e00f05..45da5249f 100644 --- a/src/navigation/navigationOptions.js +++ b/src/navigation/navigationOptions.js @@ -8,8 +8,6 @@ import React from "react"; import { View } from "react-native"; import colors from "styles/tailwindColors"; -import ContextHeader from "./ContextHeader"; - const baseHeaderOptions: Object = { headerShown: true, headerBackTitleVisible: false, @@ -52,14 +50,6 @@ const showSimpleCustomHeader: Object = { headerShadowVisible: true }; -const showCustomHeader: Object = { - ...baseHeaderOptions, - header: ContextHeader, - headerShadowVisible: true, - alignStart: true, - headerLeft: () => -}; - const hideHeader = { headerShown: false }; @@ -87,7 +77,6 @@ export { hideDrawerHeaderLeft, hideHeader, removeBottomBorder, - showCustomHeader, showHeader, showLongHeader, showSimpleCustomHeader diff --git a/tests/unit/components/ObsEdit/Header.test.js b/tests/unit/components/ObsEdit/ObsEditHeader.test.js similarity index 83% rename from tests/unit/components/ObsEdit/Header.test.js rename to tests/unit/components/ObsEdit/ObsEditHeader.test.js index f47ca1d0f..7623d0ef7 100644 --- a/tests/unit/components/ObsEdit/Header.test.js +++ b/tests/unit/components/ObsEdit/ObsEditHeader.test.js @@ -1,5 +1,5 @@ import { screen } from "@testing-library/react-native"; -import Header from "components/ObsEdit/Header"; +import ObsEditHeader from "components/ObsEdit/ObsEditHeader"; import React from "react"; import factory from "tests/factory"; import faker from "tests/helpers/faker"; @@ -10,10 +10,10 @@ const mockObservations = [ factory( "LocalObservation" ) ]; -describe( "Header", () => { +describe( "ObsEditHeader", () => { it( "has no accessibility errors", () => { const button = ( -
); @@ -23,7 +23,7 @@ describe( "Header", () => { it( "renders a header title with 1 observation", async () => { renderComponent( -
); @@ -35,7 +35,7 @@ describe( "Header", () => { it( "renders a header title with multiple observations", async () => { renderComponent( -
); @@ -50,7 +50,7 @@ describe( "Header", () => { _created_at: faker.date.past( ) } ); renderComponent( -
@@ -63,7 +63,7 @@ describe( "Header", () => { it( "renders a kebab menu", async () => { renderComponent( -
); @@ -73,18 +73,15 @@ describe( "Header", () => { expect( kebabLabel ).toBeVisible(); } ); - it( "renders a back button with extra padding for accessibility", () => { + it( "renders a back button", () => { renderComponent( -
); const backButtonId = screen.getByTestId( "ObsEdit.BackButton" ); - expect( backButtonId ).toBeVisible(); - expect( - backButtonId - ).toHaveStyle( { paddingVertical: 18, paddingEnd: 24 } ); + expect( backButtonId ).toBeVisible( ); } ); } );