diff --git a/src/components/Header/Left.tsx b/src/components/Header/Left.tsx index 4269383b..b89c8ead 100644 --- a/src/components/Header/Left.tsx +++ b/src/components/Header/Left.tsx @@ -8,6 +8,7 @@ export interface Props { type?: 'icon' | 'text' content?: string native?: boolean + background?: boolean onPress: () => void } @@ -16,6 +17,7 @@ const HeaderLeft: React.FC = ({ type = 'icon', content, native = true, + background = false, onPress }) => { const { theme } = useTheme() @@ -47,11 +49,19 @@ const HeaderLeft: React.FC = ({ style={[ styles.base, { - backgroundColor: theme.backgroundOverlayDefault, + backgroundColor: background + ? theme.backgroundOverlayDefault + : undefined, + minHeight: 44, + minWidth: 44, + marginLeft: native + ? -StyleConstants.Spacing.S + : StyleConstants.Spacing.S, ...(type === 'icon' && { - height: 44, - width: 44, - marginLeft: native ? -9 : 9 + borderRadius: 100 + }), + ...(type === 'text' && { + paddingHorizontal: StyleConstants.Spacing.S }) } ]} @@ -63,8 +73,7 @@ const styles = StyleSheet.create({ base: { flexDirection: 'row', justifyContent: 'center', - alignItems: 'center', - borderRadius: 100 + alignItems: 'center' }, text: { ...StyleConstants.FontStyle.M diff --git a/src/components/Header/Right.tsx b/src/components/Header/Right.tsx index 1e40f44a..d1e3c0f0 100644 --- a/src/components/Header/Right.tsx +++ b/src/components/Header/Right.tsx @@ -9,6 +9,7 @@ export interface Props { type?: 'icon' | 'text' content: string native?: boolean + background?: boolean loading?: boolean disabled?: boolean @@ -20,6 +21,7 @@ const HeaderRight: React.FC = ({ type = 'icon', content, native = true, + background = false, loading, disabled, onPress @@ -79,11 +81,19 @@ const HeaderRight: React.FC = ({ style={[ styles.base, { - backgroundColor: theme.backgroundOverlayDefault, + backgroundColor: background + ? theme.backgroundOverlayDefault + : undefined, + minHeight: 44, + minWidth: 44, + marginLeft: native + ? -StyleConstants.Spacing.S + : StyleConstants.Spacing.S, ...(type === 'icon' && { - height: 44, - width: 44, - marginRight: native ? -9 : 9 + borderRadius: 100 + }), + ...(type === 'text' && { + paddingHorizontal: StyleConstants.Spacing.S }) } ]} @@ -95,8 +105,7 @@ const styles = StyleSheet.create({ base: { flexDirection: 'row', justifyContent: 'center', - alignItems: 'center', - borderRadius: 100 + alignItems: 'center' }, text: { ...StyleConstants.FontStyle.M diff --git a/src/screens/Tabs/Shared/Account.tsx b/src/screens/Tabs/Shared/Account.tsx index 3db86fb3..a75d0954 100644 --- a/src/screens/Tabs/Shared/Account.tsx +++ b/src/screens/Tabs/Shared/Account.tsx @@ -49,6 +49,7 @@ const TabSharedAccount: React.FC = ({ account }) }} + background /> ) }) diff --git a/src/screens/Tabs/Shared/sharedScreens.tsx b/src/screens/Tabs/Shared/sharedScreens.tsx index b7172a2b..cb3426d0 100644 --- a/src/screens/Tabs/Shared/sharedScreens.tsx +++ b/src/screens/Tabs/Shared/sharedScreens.tsx @@ -74,7 +74,9 @@ const sharedScreens = ( backgroundColor: `rgba(255, 255, 255, 0)` }, headerCenter: () => null, - headerLeft: () => navigation.goBack()} /> + headerLeft: () => ( + navigation.goBack()} background /> + ) } }} />,