fix(suite-native): use 16px padding as default for screen components

Author: yanascz

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

@@ -7,8 +7,8 @@ import Animated, {
     withTiming,
 } from 'react-native-reanimated';
 
-import { AddCoinFlowType, ScreenSubHeader } from '@suite-native/navigation';
 import { Box, IconButton } from '@suite-native/atoms';
+import { AddCoinFlowType, ScreenSubHeader } from '@suite-native/navigation';
 import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
 
 import { AccountsSearchForm, SEARCH_INPUT_ANIMATION_DURATION } from './AccountsSearchForm';
@@ -21,11 +21,9 @@ type SearchableAccountsListScreenHeaderProps = {
 };
 
 const HEADER_ANIMATION_DURATION = 100;
-export const SEARCH_FORM_CONTAINER_HEIGHT = 56;
 
-const searchFormContainerStyle = prepareNativeStyle(utils => ({
-    height: SEARCH_FORM_CONTAINER_HEIGHT,
-    marginBottom: utils.spacings.sp16,
+const searchFormContainerStyle = prepareNativeStyle(_ => ({
+    height: 48,
 }));
 
 export const SearchableAccountsListScreenHeader = ({
@@ -78,7 +76,6 @@ export const SearchableAccountsListScreenHeader = ({
                     exiting={FadeOut.duration(HEADER_ANIMATION_DURATION)}
                 >
                     <ScreenSubHeader
-                        customHorizontalPadding="sp16"
                         content={title}
                         rightIcon={
                             <AddAccountButton

suite-native/coin-enabling/src/components/DiscoveryCoinsFilter.tsx

@@ -47,7 +47,7 @@ export const DiscoveryCoinsFilter = ({
                     allowChangeAnalytics={allowChangeAnalytics}
                 />
             ))}
-            <VStack paddingTop="sp8" paddingBottom="sp32" alignItems="center">
+            <VStack paddingTop="sp8" paddingBottom="sp16" alignItems="center">
                 <Icon name="question" color="textSubdued" size="large" />
                 <Text color="textSubdued" textAlign="center">
                     <Translation id="moduleSettings.coinEnabling.bottomNote" />

suite-native/coin-enabling/src/screens/CoinEnablingInitScreen.tsx

@@ -98,10 +98,9 @@ export const CoinEnablingInitScreen = () => {
 
     return (
         <Screen
-            customHorizontalPadding={utils.spacings.sp16}
             screenHeader={
                 <View style={applyStyle(headerWrapperStyle)}>
-                    <VStack paddingBottom="sp32" paddingHorizontal="sp16">
+                    <VStack paddingBottom="sp16" paddingHorizontal="sp16">
                         <Text variant="titleSmall">
                             <Translation id="moduleSettings.coinEnabling.initialSetup.title" />
                         </Text>

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

@@ -2,12 +2,8 @@ import { ScreenHeader } from '@suite-native/navigation';
 
 import { DeviceManager } from './DeviceManager';
 
-type DeviceManagerScreenHeaderProps = {
-    hasBottomPadding?: boolean;
-};
-
-export const DeviceManagerScreenHeader = ({ hasBottomPadding }: DeviceManagerScreenHeaderProps) => (
-    <ScreenHeader hasBottomPadding={hasBottomPadding}>
+export const DeviceManagerScreenHeader = () => (
+    <ScreenHeader hasBottomPadding>
         <DeviceManager />
     </ScreenHeader>
 );

suite-native/module-accounts-import/src/components/AccountImportSubHeader.tsx

@@ -17,7 +17,6 @@ export const AccountImportSubHeader = ({
 
     return (
         <ScreenSubHeader
-            customHorizontalPadding="sp16"
             closeActionType={closeActionType}
             closeAction={closeActionType === 'close' ? navigateToInitialScreen : undefined}
             content={translate('moduleAccountImport.title')}

suite-native/module-accounts-import/src/components/AccountImportSummaryScreen.tsx

@@ -23,7 +23,6 @@ export const AccountImportSummaryScreen = ({
 }: AccountImportSummaryScreenProps) => {
     return (
         <Screen
-            customHorizontalPadding="sp16"
             screenHeader={<AccountImportSubHeader />}
             footer={
                 <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>

suite-native/module-accounts-import/src/screens/SelectNetworkScreen.tsx

@@ -19,7 +19,7 @@ export const SelectNetworkScreen = ({
     };
 
     return (
-        <Screen screenHeader={<AccountImportSubHeader />} customHorizontalPadding="sp16">
+        <Screen screenHeader={<AccountImportSubHeader />}>
             <SelectableNetworkList onSelectItem={handleSelectNetworkSymbol} />
         </Screen>
     );

suite-native/module-accounts-import/src/screens/XpubScanScreen.tsx

@@ -177,8 +177,6 @@ export const XpubScanScreen = ({
             screenHeader={<AccountImportSubHeader closeActionType="back" />}
             footer={<XpubHint networkType={networkType} handleOpen={handleOpenHint} />}
             extraKeyboardAvoidingViewHeight={EXTRA_KEYBOARD_AVOIDING_VIEW_HEIGHT}
-            customHorizontalPadding="sp16"
-            customVerticalPadding="sp16"
         >
             <Card>
                 <SelectableNetworkItem symbol={networkSymbol} />

suite-native/module-accounts-management/src/components/AccountDetailScreenHeader.tsx

@@ -37,7 +37,6 @@ export const AccountDetailScreenHeader = ({
 
     return (
         <ScreenSubHeader
-            customHorizontalPadding="sp16"
             content={accountLabel}
             rightIcon={
                 <IconButton

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

@@ -70,8 +70,8 @@ export const AccountDetailContentScreen = ({
                 )
             }
             // The padding is handled inside the TransactionList to prevent scrollbar glitches.
-            customVerticalPadding={0}
-            customHorizontalPadding={0}
+            noTopPadding
+            noHorizontalPadding
             isScrollable={false}
         >
             <TransactionList