fix(suite-native): unify look & feel of screen headers

suite-native/accounts/src/components/SearchableAccountsListScreenHeader.tsx → suite-native/accounts/src/components/SearchableAccountsListHeader.tsx

@@ -7,14 +7,14 @@ import Animated, {
     withTiming,
 } from 'react-native-reanimated';
 
-import { Box, IconButton } from '@suite-native/atoms';
-import { AddCoinFlowType, ScreenSubHeader } from '@suite-native/navigation';
+import { Box, HStack, IconButton, Text } from '@suite-native/atoms';
+import { AddCoinFlowType } from '@suite-native/navigation';
 import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
 
 import { AccountsSearchForm, SEARCH_INPUT_ANIMATION_DURATION } from './AccountsSearchForm';
 import { AddAccountButton } from './AddAccountsButton';
 
-type SearchableAccountsListScreenHeaderProps = {
+type SearchableAccountsListHeaderProps = {
     title: string;
     onSearchInputChange: (value: string) => void;
     flowType: AddCoinFlowType;
@@ -27,11 +27,11 @@ const searchFormContainerStyle = prepareNativeStyle(({ spacings }) => ({
     marginBottom: spacings.sp16,
 }));
 
-export const SearchableAccountsListScreenHeader = ({
+export const SearchableAccountsListHeader = ({
     title,
     onSearchInputChange,
     flowType,
-}: SearchableAccountsListScreenHeaderProps) => {
+}: SearchableAccountsListHeaderProps) => {
     const isFirstRender = useSharedValue(true);
     const { applyStyle } = useNativeStyles();
 
@@ -76,23 +76,18 @@ export const SearchableAccountsListScreenHeader = ({
                     entering={enteringFadeInAnimation}
                     exiting={FadeOut.duration(HEADER_ANIMATION_DURATION)}
                 >
-                    <ScreenSubHeader
-                        content={title}
-                        rightIcon={
-                            <AddAccountButton
-                                flowType={flowType}
-                                testID="@myAssets/addAccountButton"
-                            />
-                        }
-                        leftIcon={
-                            <IconButton
-                                iconName="magnifyingGlass"
-                                onPress={() => setIsSearchActive(true)}
-                                colorScheme="tertiaryElevation1"
-                                size="medium"
-                            />
-                        }
-                    />
+                    <HStack justifyContent="space-between" alignItems="center">
+                        <IconButton
+                            iconName="magnifyingGlass"
+                            onPress={() => setIsSearchActive(true)}
+                            colorScheme="tertiaryElevation1"
+                            size="medium"
+                        />
+                        <Text variant="highlight" numberOfLines={1} adjustsFontSizeToFit>
+                            {title}
+                        </Text>
+                        <AddAccountButton flowType={flowType} testID="@myAssets/addAccountButton" />
+                    </HStack>
                 </Animated.View>
             )}
         </Box>

suite-native/accounts/src/index.ts

@@ -3,7 +3,7 @@ export * from './components/AccountsList/AccountsList';
 export * from './components/AccountsList/AccountsListItem';
 export * from './components/AccountsList/AccountsListItemBase';
 export * from './components/AccountsList/StakingBadge';
-export * from './components/SearchableAccountsListScreenHeader';
+export * from './components/SearchableAccountsListHeader';
 export * from './components/SelectableNetworkItem';
 export * from './components/AccountsList/AccountsListTokenItem';
 export * from './components/TokenSelectBottomSheet';

suite-native/atoms/src/ScreenHeaderWrapper.tsx

@@ -16,7 +16,8 @@ const screenHeaderWrapperStyle = prepareNativeStyle<{ insets: EdgeInsets }>(
         alignItems: 'center',
         paddingLeft: Math.max(insets.left, utils.spacings.sp16),
         paddingRight: Math.max(insets.right, utils.spacings.sp16),
-        paddingVertical: utils.spacings.sp8,
+        paddingTop: utils.spacings.sp8,
+        paddingBottom: utils.spacings.sp16,
     }),
 );
 

suite-native/device-manager/src/components/DeviceManagerScreenHeader.tsx

@@ -1,9 +1,9 @@
-import { ScreenHeader } from '@suite-native/navigation';
+import { ScreenHeaderWrapper } from '@suite-native/atoms';
 
 import { DeviceManager } from './DeviceManager';
 
 export const DeviceManagerScreenHeader = () => (
-    <ScreenHeader>
+    <ScreenHeaderWrapper>
         <DeviceManager />
-    </ScreenHeader>
+    </ScreenHeaderWrapper>
 );

suite-native/module-accounts-management/src/screens/AccountsScreen/AccountsScreen.tsx

@@ -5,7 +5,7 @@ import { useNavigation } from '@react-navigation/native';
 import {
     AccountsList,
     OnSelectAccount,
-    SearchableAccountsListScreenHeader,
+    SearchableAccountsListHeader,
 } from '@suite-native/accounts';
 import { DeviceManagerScreenHeader } from '@suite-native/device-manager';
 import {
@@ -41,16 +41,12 @@ export const AccountsScreen = () => {
     };
 
     return (
-        <Screen
-            screenHeader={<DeviceManagerScreenHeader />}
-            subheader={
-                <SearchableAccountsListScreenHeader
-                    title="My assets"
-                    onSearchInputChange={handleFilterChange}
-                    flowType="accounts"
-                />
-            }
-        >
+        <Screen screenHeader={<DeviceManagerScreenHeader />}>
+            <SearchableAccountsListHeader
+                title="My assets"
+                onSearchInputChange={handleFilterChange}
+                flowType="accounts"
+            />
             <AccountsList
                 onSelectAccount={handleSelectAccount}
                 filterValue={accountsFilterValue}

suite-native/module-authorize-device/src/components/connect/ConnectDeviceScreenView.tsx

@@ -30,6 +30,7 @@ export const ConnectDeviceScreenView = ({
             }
             noHorizontalPadding
             noBottomPadding
+            isScrollable={false}
             hasBottomInset={false}
         >
             <Box style={[applyStyle(contentStyle), style]}>{children}</Box>

suite-native/module-authorize-device/src/components/passphrase/PassphraseContentScreenWrapper.tsx

@@ -1,8 +1,9 @@
 import { ReactNode } from 'react';
 
 import { VStack, Text } from '@suite-native/atoms';
+import { Screen } from '@suite-native/navigation';
 
-import { PassphraseScreenWrapper } from './PassphraseScreenWrapper';
+import { PassphraseScreenHeader } from './PassphraseScreenHeader';
 
 type PassphraseContentScreenWrapperProps = {
     children: ReactNode;
@@ -15,13 +16,13 @@ export const PassphraseContentScreenWrapper = ({
     title,
     subtitle,
 }: PassphraseContentScreenWrapperProps) => (
-    <PassphraseScreenWrapper>
-        <VStack spacing="sp16">
+    <Screen screenHeader={<PassphraseScreenHeader />}>
+        <VStack marginTop="sp8" spacing="sp16">
             <VStack>
                 <Text variant="titleMedium">{title}</Text>
                 {subtitle && <Text>{subtitle}</Text>}
             </VStack>
             {children}
         </VStack>
-    </PassphraseScreenWrapper>
+    </Screen>
 );

suite-native/module-authorize-device/src/components/passphrase/PassphraseScreenHeader.tsx

@@ -93,7 +93,7 @@ export const PassphraseScreenHeader = () => {
             <IconButton
                 iconName="x"
                 size="medium"
-                colorScheme="tertiaryElevation1"
+                colorScheme="tertiaryElevation0"
                 accessibilityRole="button"
                 accessibilityLabel="close"
                 onPress={handleCancel}

suite-native/module-authorize-device/src/screens/passphrase/PassphraseConfirmOnTrezorScreen.tsx

@@ -7,6 +7,7 @@ import {
     AuthorizeDeviceStackParamList,
     AuthorizeDeviceStackRoutes,
     RootStackParamList,
+    Screen,
     StackToStackCompositeNavigationProps,
 } from '@suite-native/navigation';
 import { CenteredTitleHeader, VStack } from '@suite-native/atoms';
@@ -20,7 +21,7 @@ import {
 import { useHandlePassphraseMismatch } from '@suite-native/device-authorization';
 
 import { ConfirmOnTrezorAnimation } from '../../components/passphrase/ConfirmOnTrezorAnimation';
-import { PassphraseScreenWrapper } from '../../components/passphrase/PassphraseScreenWrapper';
+import { PassphraseScreenHeader } from '../../components/passphrase/PassphraseScreenHeader';
 import { useRedirectOnPassphraseCompletion } from '../../useRedirectOnPassphraseCompletion';
 
 type NavigationProp = StackToStackCompositeNavigationProps<
@@ -57,7 +58,7 @@ export const PassphraseConfirmOnTrezorScreen = () => {
     }, [device, dispatch, isDeviceConnectedAndAuthorized, hasDiscovery, navigation]);
 
     return (
-        <PassphraseScreenWrapper>
+        <Screen screenHeader={<PassphraseScreenHeader />}>
             <VStack
                 spacing="sp24"
                 alignItems="center"
@@ -71,6 +72,6 @@ export const PassphraseConfirmOnTrezorScreen = () => {
                     subtitle={<Translation id="modulePassphrase.confirmOnDevice.description" />}
                 />
             </VStack>
-        </PassphraseScreenWrapper>
+        </Screen>
     );
 };

suite-native/module-authorize-device/src/screens/passphrase/PassphraseEnableOnDeviceScreen.tsx

@@ -43,7 +43,7 @@ export const PassphraseEnableOnDeviceScreen = () => {
                 <ScreenHeaderWrapper>
                     <IconButton
                         size="medium"
-                        colorScheme="tertiaryElevation1"
+                        colorScheme="tertiaryElevation0"
                         accessibilityRole="button"
                         accessibilityLabel="close"
                         iconName="x"

suite-native/module-authorize-device/src/screens/passphrase/PassphraseFeatureUnlockFormScreen.tsx

@@ -1,5 +1,5 @@
-import { Screen, ScreenHeader, useNavigateToInitialScreen } from '@suite-native/navigation';
-import { IconButton, Text, VStack } from '@suite-native/atoms';
+import { Screen, useNavigateToInitialScreen } from '@suite-native/navigation';
+import { IconButton, ScreenHeaderWrapper, Text, VStack } from '@suite-native/atoms';
 import TrezorConnect from '@trezor/connect';
 import { Translation, useTranslate } from '@suite-native/intl';
 import { useIsConnectPopupOpened } from '@suite-native/module-connect-popup';
@@ -20,7 +20,7 @@ export const PassphraseFeatureUnlockFormScreen = () => {
     return (
         <Screen
             screenHeader={
-                <ScreenHeader>
+                <ScreenHeaderWrapper>
                     <IconButton
                         iconName="x"
                         onPress={handleClose}
@@ -29,7 +29,7 @@ export const PassphraseFeatureUnlockFormScreen = () => {
                         accessibilityRole="button"
                         accessibilityLabel="Close"
                     />
-                </ScreenHeader>
+                </ScreenHeaderWrapper>
             }
         >
             <VStack spacing="sp24">

suite-native/module-authorize-device/src/screens/passphrase/PassphraseLoadingScreen.tsx

@@ -9,14 +9,15 @@ import {
     AuthorizeDeviceStackRoutes,
     RootStackParamList,
     RootStackRoutes,
+    Screen,
     StackToStackCompositeNavigationProps,
 } from '@suite-native/navigation';
 import { selectIsDeviceNotEmpty } from '@suite-common/wallet-core';
 import { Translation } from '@suite-native/intl';
 import { finishPassphraseFlow } from '@suite-native/device-authorization';
 import { EventType, analytics } from '@suite-native/analytics';
 
-import { PassphraseScreenWrapper } from '../../components/passphrase/PassphraseScreenWrapper';
+import { PassphraseScreenHeader } from '../../components/passphrase/PassphraseScreenHeader';
 
 type NavigationProp = StackToStackCompositeNavigationProps<
     AuthorizeDeviceStackParamList,
@@ -54,7 +55,7 @@ export const PassphraseLoadingScreen = () => {
     };
 
     return (
-        <PassphraseScreenWrapper>
+        <Screen screenHeader={<PassphraseScreenHeader />}>
             <VStack flex={1} justifyContent="center" alignItems="center" spacing="sp32">
                 <Spinner loadingState={loadingResult} onComplete={handleSuccess} />
                 <VStack spacing="sp4">
@@ -66,6 +67,6 @@ export const PassphraseLoadingScreen = () => {
                     </Text>
                 </VStack>
             </VStack>
-        </PassphraseScreenWrapper>
+        </Screen>
     );
 };

suite-native/module-device-settings/src/screens/FirmwareUpdateScreen/FirmwareUpdateScreen.tsx

@@ -61,7 +61,7 @@ export const FirmwareUpdateScreen = () => {
 
     return (
         <Screen
-            subheader={<ScreenSubHeader closeActionType="close" />}
+            screenHeader={<ScreenSubHeader closeActionType="close" />}
             footer={
                 <Button
                     onPress={handleShowSeedBottomSheet}

suite-native/module-send/src/components/SendScreen.tsx

@@ -5,17 +5,11 @@ import { Screen } from '@suite-native/navigation';
 type SendScreenProps = {
     children: ReactNode;
     screenHeader: ReactNode;
-    subheader?: ReactNode;
     footer?: ReactNode;
 };
 
-export const SendScreen = ({ children, footer, screenHeader, subheader }: SendScreenProps) => (
-    <Screen
-        screenHeader={screenHeader}
-        subheader={subheader}
-        footer={footer}
-        keyboardDismissMode="on-drag"
-    >
+export const SendScreen = ({ children, footer, screenHeader }: SendScreenProps) => (
+    <Screen screenHeader={screenHeader} footer={footer} keyboardDismissMode="on-drag">
         {children}
     </Screen>
 );

suite-native/navigation/src/index.ts

@@ -6,7 +6,6 @@ export * from './useNavigateToInitialScreen';
 export * from './useScrollDivider';
 export * from './components/TabBar';
 export * from './components/Screen';
-export * from './components/ScreenHeader';
 export * from './components/ScreenSubHeader';
 export * from './components/NavigationContainerWithAnalytics';
 export * from './components/GoBackIcon';