refactor(suite-native): replace spacing literals with corresponding c…

…onstants
trezor · Oct 3, 2024 · b549c1a · b549c1a
1 parent 6727657
commit b549c1a
Show file tree

Hide file tree

Showing 52 changed files with 88 additions and 91 deletions.
diff --git a/packages/theme/src/spacings.ts b/packages/theme/src/spacings.ts
@@ -27,14 +27,15 @@ export type Spacings = typeof spacings;
 export type Spacing = keyof typeof spacings;
 export type SpacingValues = Spacings[Spacing];
 
-type NativeSpacingValue = 2 | 4 | 8 | 12 | 16 | 24 | 32 | 40 | 52 | 64;
+type NativeSpacingValue = 2 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 52 | 64;
 
 export const nativeSpacings = {
     sp2: 2,
     sp4: 4,
     sp8: 8,
     sp12: 12,
     sp16: 16,
+    sp20: 20,
     sp24: 24,
     sp32: 32,
     sp40: 40,

diff --git a/suite-native/accounts/src/components/AccountsList/AccountsListItemBase.tsx b/suite-native/accounts/src/components/AccountsList/AccountsListItemBase.tsx
@@ -30,7 +30,7 @@ const accountListItemStyle = prepareNativeStyle<{
     justifyContent: 'space-between',
     alignItem: 'center',
 
-    paddingVertical: 12,
+    paddingVertical: utils.spacings.sp12,
     paddingHorizontal: utils.spacings.sp16,
 
     extend: {

diff --git a/suite-native/accounts/src/components/SelectableNetworkItem.tsx b/suite-native/accounts/src/components/SelectableNetworkItem.tsx
@@ -19,11 +19,11 @@ const selectableAssetContentStyle = prepareNativeStyle(utils => ({
     alignItems: 'center',
     justifyContent: 'space-between',
     flex: 1,
-    marginLeft: utils.spacings.sp8 + utils.spacings.sp4,
+    marginLeft: utils.spacings.sp12,
 }));
 
 const tokensBadgeStyle = prepareNativeStyle(utils => ({
-    paddingBottom: utils.spacings.sp4 / 2,
+    paddingBottom: utils.spacings.sp2,
 }));
 
 export const SelectableNetworkItem = ({ symbol, onPress, rightIcon }: SelectableAssetItemProps) => {

diff --git a/suite-native/atoms/src/AlertBox.tsx b/suite-native/atoms/src/AlertBox.tsx
@@ -32,13 +32,13 @@ const alertWrapperStyle = prepareNativeStyle<AlertWrapperStyleType>(
         backgroundColor: utils.colors[backgroundColor],
         paddingVertical: utils.spacings.sp8,
         paddingHorizontal: utils.spacings.sp16,
-        gap: 12,
+        gap: utils.spacings.sp12,
     }),
 );
 
-const textStyle = prepareNativeStyle(_ => ({
+const textStyle = prepareNativeStyle(utils => ({
     flex: 1,
-    paddingTop: 2,
+    paddingTop: utils.spacings.sp2,
 }));
 
 const variantToColorMap = {

diff --git a/suite-native/atoms/src/Badge.tsx b/suite-native/atoms/src/Badge.tsx
@@ -52,7 +52,7 @@ const badgeStyle = prepareNativeStyle<BadgeStyleProps>(
         justifyContent: 'center',
         backgroundColor: utils.colors[backgroundColor],
         paddingHorizontal: utils.spacings.sp8 - (size === 'medium' ? 0 : 2),
-        paddingVertical: utils.spacings.sp8 / 4,
+        paddingVertical: utils.spacings.sp2,
         borderRadius: utils.borders.radii.round,
         extend: [
             {

diff --git a/suite-native/atoms/src/BottomSheetListItem.tsx b/suite-native/atoms/src/BottomSheetListItem.tsx
@@ -17,7 +17,7 @@ export const BottomSheetListItem = ({ translationKey, ...props }: BottomSheetLis
     const { applyStyle } = useNativeStyles();
 
     return (
-        <HStack spacing={12} alignItems="center">
+        <HStack spacing="sp12" alignItems="center">
             <OrderedListIcon {...props} />
             <Text style={applyStyle(listItemStyle)}>
                 <Translation id={translationKey} />

diff --git a/suite-native/atoms/src/Button/Button.tsx b/suite-native/atoms/src/Button/Button.tsx
@@ -181,7 +181,7 @@ const sizeToDimensionsMap = {
     extraSmall: {
         minHeight: 36,
         paddingVertical: nativeSpacings.sp8,
-        paddingHorizontal: 12,
+        paddingHorizontal: nativeSpacings.sp12,
     },
     small: {
         minHeight: 40,
@@ -190,8 +190,8 @@ const sizeToDimensionsMap = {
     },
     medium: {
         minHeight: 48,
-        paddingVertical: 12,
-        paddingHorizontal: 20,
+        paddingVertical: nativeSpacings.sp12,
+        paddingHorizontal: nativeSpacings.sp20,
     },
     large: {
         minHeight: 56,

diff --git a/suite-native/atoms/src/ScreenHeaderWrapper.tsx b/suite-native/atoms/src/ScreenHeaderWrapper.tsx
@@ -17,7 +17,7 @@ const screenHeaderWrapperStyle = prepareNativeStyle<{ insets: EdgeInsets }>(
         paddingLeft: Math.max(insets.left, utils.spacings.sp16),
         paddingRight: Math.max(insets.right, utils.spacings.sp16),
         paddingVertical: utils.spacings.sp16,
-        paddingBottom: utils.spacings.sp4 * 3,
+        paddingBottom: utils.spacings.sp12,
     }),
 );
 

diff --git a/suite-native/atoms/src/Select/SelectTrigger.tsx b/suite-native/atoms/src/Select/SelectTrigger.tsx
@@ -25,7 +25,7 @@ const selectStyle = prepareNativeStyle(utils => ({
     borderRadius: utils.borders.radii.small,
     borderColor: utils.colors.backgroundNeutralSubtleOnElevation1,
     color: utils.colors.textSubdued,
-    paddingLeft: 12,
+    paddingLeft: utils.spacings.sp12,
     paddingRight: 23.25,
     height: SELECT_HEIGHT,
 }));

diff --git a/suite-native/atoms/src/SelectableItem.tsx b/suite-native/atoms/src/SelectableItem.tsx
@@ -33,10 +33,10 @@ const titleWrapperStyle = prepareNativeStyle(_ => ({
     justifyContent: 'space-between',
 }));
 
-const radioWrapperStyle = prepareNativeStyle(_ => ({
+const radioWrapperStyle = prepareNativeStyle(utils => ({
     width: '100%',
     alignItems: 'flex-end',
-    paddingTop: 12,
+    paddingTop: utils.spacings.sp12,
 }));
 
 const subtitleWrapperStyle = prepareNativeStyle(utils => ({

diff --git a/suite-native/atoms/src/Skeleton/ListItemSkeleton.tsx b/suite-native/atoms/src/Skeleton/ListItemSkeleton.tsx
@@ -10,7 +10,7 @@ import { VStack } from '../Stack';
 const skeletonContainer = prepareNativeStyle(utils => ({
     flexDirection: 'row',
     justifyContent: 'space-between',
-    paddingVertical: 12,
+    paddingVertical: utils.spacings.sp12,
     paddingHorizontal: utils.spacings.sp16,
 }));
 

diff --git a/suite-native/atoms/src/TextDivider.tsx b/suite-native/atoms/src/TextDivider.tsx
@@ -24,7 +24,7 @@ const separatorStyle = prepareNativeStyle<{ horizontalMargin?: number; color: Co
 );
 
 const separatorTitleStyle = prepareNativeStyle(utils => ({
-    paddingHorizontal: 12,
+    paddingHorizontal: utils.spacings.sp12,
     paddingVertical: utils.spacings.sp4,
 }));
 

diff --git a/suite-native/biometrics/src/components/BiometricsIcon.tsx b/suite-native/biometrics/src/components/BiometricsIcon.tsx
@@ -1,20 +1,17 @@
 import { Platform } from 'react-native';
 
-import { IconName, Icon } from '@suite-common/icons-deprecated';
+import { Icon, IconName } from '@suite-common/icons-deprecated';
 import { Box } from '@suite-native/atoms';
 import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
 
-const ICON_SIZE_DEFAULT = 64;
-const ICON_WRAPPER_PADDING = 12;
-
 const iconWrapperStyle = prepareNativeStyle(
-    (utils, { wrapperSize, showShadow }: { wrapperSize: number; showShadow: boolean }) => ({
-        padding: ICON_WRAPPER_PADDING,
+    (utils, { iconSize, showShadow }: { iconSize: number; showShadow: boolean }) => ({
+        padding: utils.spacings.sp12,
         borderRadius: utils.borders.radii.round,
         backgroundColor: utils.colors.backgroundSurfaceElevation2,
         color: utils.colors.iconPrimaryDefault,
-        width: wrapperSize,
-        height: wrapperSize,
+        width: iconSize + 2 * utils.spacings.sp12,
+        height: iconSize + 2 * utils.spacings.sp12,
 
         extend: {
             condition: showShadow,
@@ -28,18 +25,14 @@ type BiometricsIconProps = {
     showShadow?: boolean;
 };
 
-export const BiometricsIcon = ({
-    iconSize = ICON_SIZE_DEFAULT,
-    showShadow = false,
-}: BiometricsIconProps) => {
+export const BiometricsIcon = ({ iconSize = 64, showShadow = false }: BiometricsIconProps) => {
     const { applyStyle } = useNativeStyles();
     const icon: IconName = Platform.OS === 'ios' ? 'touchId' : 'fingerprint';
-    const iconWrapperSize = iconSize + 2 * ICON_WRAPPER_PADDING;
 
     return (
         <Box
             style={applyStyle(iconWrapperStyle, {
-                wrapperSize: iconWrapperSize,
+                iconSize,
                 showShadow,
             })}
         >

diff --git a/suite-native/coin-enabling/src/components/DiscoveryCoinsFilter.tsx b/suite-native/coin-enabling/src/components/DiscoveryCoinsFilter.tsx
@@ -38,7 +38,7 @@ export const DiscoveryCoinsFilter = ({
     const uniqueNetworkSymbols = [...new Set(availableNetworks.map(n => n.symbol))];
 
     return (
-        <VStack spacing={12}>
+        <VStack spacing="sp12">
             {uniqueNetworkSymbols.map((networkSymbol: NetworkSymbol) => (
                 <NetworkSymbolSwitchItem
                     key={networkSymbol}

diff --git a/suite-native/coin-enabling/src/components/NetworkSymbolSwitchItem.tsx b/suite-native/coin-enabling/src/components/NetworkSymbolSwitchItem.tsx
@@ -37,10 +37,10 @@ const cardStyle = prepareNativeStyle<{ isEnabled: boolean }>((utils, { isEnabled
     ],
 }));
 
-const wrapperStyle = prepareNativeStyle(_ => ({
+const wrapperStyle = prepareNativeStyle(utils => ({
     paddingVertical: 6,
     paddingHorizontal: 14,
-    gap: 12,
+    gap: utils.spacings.sp12,
     alignItems: 'center',
     flex: 1,
 }));
@@ -128,7 +128,7 @@ export const NetworkSymbolSwitchItem = ({
                     </View>
                     <HStack
                         justifyContent="space-between"
-                        spacing={12}
+                        spacing="sp12"
                         flex={1}
                         alignItems="center"
                     >

diff --git a/suite-native/connection-status/src/OfflineBanner.tsx b/suite-native/connection-status/src/OfflineBanner.tsx
@@ -17,7 +17,7 @@ const contentStyle = prepareNativeStyle<{ topSafeAreaInset: number }>(
     (utils, { topSafeAreaInset }) => ({
         marginTop: topSafeAreaInset,
         paddingTop: utils.spacings.sp8,
-        paddingBottom: 12,
+        paddingBottom: utils.spacings.sp12,
         alignItems: 'center',
     }),
 );

diff --git a/suite-native/device-manager/src/components/DeviceAction.tsx b/suite-native/device-manager/src/components/DeviceAction.tsx
@@ -14,7 +14,7 @@ type DeviceActionProps = {
 
 const contentStyle = prepareNativeStyle(utils => ({
     paddingHorizontal: utils.spacings.sp16,
-    paddingVertical: 12,
+    paddingVertical: utils.spacings.sp12,
     alignItems: 'center',
     height: 44 * ACCESSIBILITY_FONTSIZE_MULTIPLIER,
     gap: utils.spacings.sp8,

diff --git a/suite-native/device-manager/src/components/DeviceManagerContent.tsx b/suite-native/device-manager/src/components/DeviceManagerContent.tsx
@@ -104,7 +104,7 @@ export const DeviceManagerContent = () => {
                 />
 
                 {!isPortfolioTrackerDevice && (
-                    <VStack spacing={12} paddingTop="sp24">
+                    <VStack spacing="sp12" paddingTop="sp24">
                         <WalletList onSelectDevice={handleSelectDevice} />
                         <Stack
                             orientation={

diff --git a/suite-native/device-manager/src/components/WalletItem.tsx b/suite-native/device-manager/src/components/WalletItem.tsx
@@ -92,7 +92,7 @@ export const WalletItem = ({ deviceState, onPress, isSelectable = true }: Wallet
                         {walletNameLabel}
                     </Text>
                 </HStack>
-                <HStack alignItems="center" spacing={12}>
+                <HStack alignItems="center" spacing="sp12">
                     <FiatAmountFormatter
                         value={String(fiatBalance)}
                         variant="hint"

diff --git a/suite-native/device-manager/src/components/WalletList.tsx b/suite-native/device-manager/src/components/WalletList.tsx
@@ -14,7 +14,7 @@ export const WalletList = ({ onSelectDevice }: WalletListProps) => {
     const devices = useSelector(selectDeviceInstances);
 
     return (
-        <VStack spacing={12} paddingHorizontal="sp16">
+        <VStack spacing="sp12" paddingHorizontal="sp16">
             {devices.map(device => {
                 if (!device.state) {
                     return null;

diff --git a/suite-native/graph/src/components/PriceChangeIndicator.tsx b/suite-native/graph/src/components/PriceChangeIndicator.tsx
@@ -62,7 +62,7 @@ const priceIncreaseWrapperStyle = prepareNativeStyle<{ hasPriceIncreased: boolea
         flexDirection: 'row',
         alignItems: 'center',
         paddingHorizontal: utils.spacings.sp8,
-        paddingVertical: utils.spacings.sp4 / 2,
+        paddingVertical: utils.spacings.sp2,
         borderRadius: utils.borders.radii.round,
     }),
 );

diff --git a/suite-native/graph/src/components/TransactionEventTooltip.tsx b/suite-native/graph/src/components/TransactionEventTooltip.tsx
@@ -51,7 +51,7 @@ const TooltipContainerStyle = prepareNativeStyle<{ x: number; y: number }>((_, {
 }));
 
 const TooltipCardStyle = prepareNativeStyle(utils => ({
-    paddingVertical: 1.5 * utils.spacings.sp8,
+    paddingVertical: utils.spacings.sp12,
     // fade in/out animation doesn't work for elevation (shadow) on Android
     elevation: 0,
 }));

diff --git a/suite-native/message-system/src/components/MessageBanner.tsx b/suite-native/message-system/src/components/MessageBanner.tsx
@@ -132,15 +132,15 @@ export const MessageBanner = ({ message }: MessageBannerProps) => {
             style={applyStyle(messageContainerStyle, { backgroundColor })}
         >
             <HStack
-                spacing={12}
+                spacing="sp12"
                 alignItems="center"
                 justifyContent="space-between"
                 style={{ maxWidth: '100%' }}
             >
                 <Box style={applyStyle(IconContainerStyle)}>
                     <Icon name={icon} color={iconColor} size="mediumLarge" />
                 </Box>
-                <VStack spacing={4} style={applyStyle(messageTextContainerStyle)}>
+                <VStack spacing="sp4" style={applyStyle(messageTextContainerStyle)}>
                     <Text color="textSubdued" variant="hint">
                         {messageContent}
                     </Text>

diff --git a/suite-native/message-system/src/components/MessageSystemBannerRenderer.tsx b/suite-native/message-system/src/components/MessageSystemBannerRenderer.tsx
@@ -24,7 +24,7 @@ export const MessageSystemBannerRenderer = () => {
 
     return (
         <VStack
-            spacing={4}
+            spacing="sp4"
             style={applyStyle(messageBannerContainerStyle, {
                 topSafeAreaInset: topInset,
             })}

diff --git a/suite-native/module-accounts-management/src/components/CoinPriceCard.tsx b/suite-native/module-accounts-management/src/components/CoinPriceCard.tsx
@@ -36,7 +36,7 @@ const indicatorContainer = prepareNativeStyle(utils => ({
     maxWidth: '40%',
     alignItems: 'center',
     justifyContent: 'flex-start',
-    marginTop: utils.spacings.sp8 / 4,
+    marginTop: utils.spacings.sp2,
 }));
 
 const PriceChangeIndicator = ({ valuePercentageChange }: PriceChangeIndicatorProps) => {

diff --git a/suite-native/module-authorize-device/src/screens/connect/ConnectAndUnlockDeviceScreen.tsx b/suite-native/module-authorize-device/src/screens/connect/ConnectAndUnlockDeviceScreen.tsx
@@ -25,11 +25,11 @@ import { ConnectDeviceScreenHeader } from '../../components/connect/ConnectDevic
 
 const ANIMATION_HEIGHT = Dimensions.get('screen').height * 0.6;
 
-const screenContentStyle = prepareNativeStyle(() => ({
+const screenContentStyle = prepareNativeStyle(utils => ({
     flex: 1,
     justifyContent: 'space-between',
     alignItems: 'center',
-    paddingTop: 40,
+    paddingTop: utils.spacings.sp40,
 }));
 
 const animationStyle = prepareNativeStyle(() => ({

diff --git a/suite-native/module-authorize-device/src/screens/passphrase/PassphraseEmptyWalletScreen.tsx b/suite-native/module-authorize-device/src/screens/passphrase/PassphraseEmptyWalletScreen.tsx
@@ -93,7 +93,7 @@ export const PassphraseEmptyWalletScreen = () => {
                 lineColor="borderElevation0"
                 textColor="textSubdued"
             />
-            <VStack spacing={20}>
+            <VStack spacing="sp20">
                 <VStack alignItems="center" spacing="sp4">
                     <Text
                         textAlign="center"

diff --git a/suite-native/module-authorize-device/src/screens/passphrase/PassphraseFormScreen.tsx b/suite-native/module-authorize-device/src/screens/passphrase/PassphraseFormScreen.tsx
@@ -27,8 +27,8 @@ const cardTextStyle = prepareNativeStyle(_ => ({
     width: '90%',
 }));
 
-const warningIconWrapperStyle = prepareNativeStyle(_ => ({
-    paddingTop: 2,
+const warningIconWrapperStyle = prepareNativeStyle(utils => ({
+    paddingTop: utils.spacings.sp2,
 }));
 
 const animationWrapperStyle = prepareNativeStyle(() => ({
@@ -91,7 +91,7 @@ export const PassphraseFormScreen = () => {
                     <Animated.View style={animationStyle}>
                         <Box style={applyStyle(cardStyle)}>
                             <VStack spacing="sp16">
-                                <VStack spacing={12}>
+                                <VStack spacing="sp12">
                                     <HStack>
                                         <View style={applyStyle(warningIconWrapperStyle)}>
                                             <Icon

diff --git a/suite-native/module-onboarding/src/components/AnalyticsInfoRow.tsx b/suite-native/module-onboarding/src/components/AnalyticsInfoRow.tsx
@@ -19,8 +19,8 @@ const iconWrapper = prepareNativeStyle(utils => ({
     borderRadius: utils.borders.radii.round,
 }));
 
-const rowContentStyle = prepareNativeStyle(_ => ({
-    marginLeft: 12,
+const rowContentStyle = prepareNativeStyle(utils => ({
+    marginLeft: utils.spacings.sp12,
     marginRight: 48,
 }));
 

diff --git a/suite-native/module-onboarding/src/components/OnboardingScreenHeader.tsx b/suite-native/module-onboarding/src/components/OnboardingScreenHeader.tsx
@@ -10,14 +10,14 @@ type OnboardingScreenHeaderProps = {
     activeStep: number;
 };
 
-const titleStyle = prepareNativeStyle(() => ({
+const titleStyle = prepareNativeStyle(utils => ({
     textAlign: 'center',
-    marginBottom: 12,
+    marginBottom: utils.spacings.sp12,
 }));
 
-const wrapperStyle = prepareNativeStyle(() => ({
-    paddingHorizontal: 16,
-    paddingTop: 32,
+const wrapperStyle = prepareNativeStyle(utils => ({
+    paddingHorizontal: utils.spacings.sp16,
+    paddingTop: utils.spacings.sp32,
 }));
 
 const subtitleStyle = prepareNativeStyle(() => ({