diff --git a/packages/theme/src/borders.ts b/packages/theme/src/borders.ts index 9e46fcd34f3..ba141ab6b3d 100644 --- a/packages/theme/src/borders.ts +++ b/packages/theme/src/borders.ts @@ -17,6 +17,8 @@ export const borders = { export type Borders = typeof borders; +type NativeRadiusValue = 4 | 8 | 12 | 16 | 20 | 24; + export const nativeBorders = { widths: { small: 1, @@ -24,12 +26,14 @@ export const nativeBorders = { large: 2, }, radii: { - extraSmall: 4, - small: 8, - medium: 16, - large: 24, + r4: 4, + r8: 8, + r12: 12, + r16: 16, + r20: 20, + r24: 24, round: 100, // Equivalent to 50% on the web - }, + } satisfies { [V in NativeRadiusValue as `r${V}`]: V } & { round: 100 }, } as const; export type NativeBorders = typeof nativeBorders; diff --git a/suite-native/accounts/src/components/AccountsList/AccountsListItemBase.tsx b/suite-native/accounts/src/components/AccountsList/AccountsListItemBase.tsx index 2aa951e614e..9fecf9fb354 100644 --- a/suite-native/accounts/src/components/AccountsList/AccountsListItemBase.tsx +++ b/suite-native/accounts/src/components/AccountsList/AccountsListItemBase.tsx @@ -44,16 +44,16 @@ const accountListItemStyle = prepareNativeStyle<{ { condition: isFirst, style: { - borderTopLeftRadius: utils.borders.radii.medium, - borderTopRightRadius: utils.borders.radii.medium, + borderTopLeftRadius: utils.borders.radii.r16, + borderTopRightRadius: utils.borders.radii.r16, ...utils.boxShadows.small, }, }, { condition: isLast, style: { - borderBottomLeftRadius: utils.borders.radii.medium, - borderBottomRightRadius: utils.borders.radii.medium, + borderBottomLeftRadius: utils.borders.radii.r16, + borderBottomRightRadius: utils.borders.radii.r16, marginBottom: utils.spacings.sp32, ...utils.boxShadows.small, }, diff --git a/suite-native/alerts/src/components/AlertSheet.tsx b/suite-native/alerts/src/components/AlertSheet.tsx index 493e4ae8646..3a987a8363a 100644 --- a/suite-native/alerts/src/components/AlertSheet.tsx +++ b/suite-native/alerts/src/components/AlertSheet.tsx @@ -29,7 +29,7 @@ const alertSheetContainerStyle = prepareNativeStyle(utils => ({ paddingVertical: utils.spacings.sp32, marginBottom: utils.spacings.sp32, marginHorizontal: utils.spacings.sp8, - borderRadius: utils.borders.radii.medium, + borderRadius: utils.borders.radii.r16, ...utils.boxShadows.small, })); diff --git a/suite-native/atoms/src/AlertBox.tsx b/suite-native/atoms/src/AlertBox.tsx index 43b3c4cf180..18d77c13409 100644 --- a/suite-native/atoms/src/AlertBox.tsx +++ b/suite-native/atoms/src/AlertBox.tsx @@ -94,7 +94,7 @@ const AlertSpinner = ({ color }: { color: Color }) => { export const AlertBox = ({ title, variant = 'info', - borderRadius = nativeBorders.radii.medium, + borderRadius = nativeBorders.radii.r16, }: AlertBoxProps) => { const { applyStyle } = useNativeStyles(); const { contentColor, backgroundColor, borderColor } = variantToColorMap[variant]; diff --git a/suite-native/atoms/src/Card/Card.tsx b/suite-native/atoms/src/Card/Card.tsx index e900973fe8e..6395fd0c17a 100644 --- a/suite-native/atoms/src/Card/Card.tsx +++ b/suite-native/atoms/src/Card/Card.tsx @@ -25,7 +25,7 @@ const cardContainerStyle = prepareNativeStyle<{ borderColor?: Color; }>((utils, { isAlertDisplayed, noPadding, borderColor }) => ({ backgroundColor: utils.colors.backgroundSurfaceElevation1, - borderRadius: utils.borders.radii.medium, + borderRadius: utils.borders.radii.r16, padding: noPadding ? 0 : utils.spacings.sp16, ...utils.boxShadows.small, @@ -49,8 +49,8 @@ const cardContainerStyle = prepareNativeStyle<{ const alertBoxWrapperStyle = prepareNativeStyle(utils => ({ backgroundColor: utils.colors.backgroundSurfaceElevation1, - borderTopLeftRadius: utils.borders.radii.medium, - borderTopRightRadius: utils.borders.radii.medium, + borderTopLeftRadius: utils.borders.radii.r16, + borderTopRightRadius: utils.borders.radii.r16, paddingHorizontal: utils.spacings.sp4, paddingTop: utils.spacings.sp4, })); diff --git a/suite-native/atoms/src/CheckBox.tsx b/suite-native/atoms/src/CheckBox.tsx index 11c1b6adc55..90b0343dc15 100644 --- a/suite-native/atoms/src/CheckBox.tsx +++ b/suite-native/atoms/src/CheckBox.tsx @@ -26,7 +26,7 @@ const checkBoxStyle = prepareNativeStyle( width: CHECKBOX_SIZE, alignItems: 'center', justifyContent: 'center', - borderRadius: 4, + borderRadius: utils.borders.radii.r4, borderWidth: utils.borders.widths.medium, borderColor: utils.colors.borderElevation2, backgroundColor: isDisabled diff --git a/suite-native/atoms/src/ErrorMessage.tsx b/suite-native/atoms/src/ErrorMessage.tsx index 8776104d9be..a5c48810587 100644 --- a/suite-native/atoms/src/ErrorMessage.tsx +++ b/suite-native/atoms/src/ErrorMessage.tsx @@ -18,7 +18,7 @@ const errorMessageStyle = prepareNativeStyle(utils => ({ margin: utils.spacings.sp8, borderColor: utils.colors.borderAlertRed, borderWidth: 1, - borderRadius: utils.borders.radii.medium, + borderRadius: utils.borders.radii.r16, padding: utils.spacings.sp24, })); diff --git a/suite-native/atoms/src/Input/Input.tsx b/suite-native/atoms/src/Input/Input.tsx index d7fee699b87..6d48d40231a 100644 --- a/suite-native/atoms/src/Input/Input.tsx +++ b/suite-native/atoms/src/Input/Input.tsx @@ -87,7 +87,7 @@ const inputWrapperStyle = prepareNativeStyle( ? utils.colors.backgroundNeutralSubtleOnElevation1 : utils.colors.borderInputDefault, borderWidth: utils.borders.widths.small, - borderRadius: 1.5 * utils.borders.radii.small, + borderRadius: utils.borders.radii.r12, margin: utils.borders.widths.small, paddingHorizontal: INPUT_WRAPPER_PADDING_HORIZONTAL, justifyContent: 'flex-end', diff --git a/suite-native/atoms/src/Input/SearchInput.tsx b/suite-native/atoms/src/Input/SearchInput.tsx index 4c3219d76fb..78aeada338c 100644 --- a/suite-native/atoms/src/Input/SearchInput.tsx +++ b/suite-native/atoms/src/Input/SearchInput.tsx @@ -34,7 +34,7 @@ const inputWrapperStyle = prepareNativeStyle( alignItems: 'center', height: 48, borderWidth: utils.borders.widths.small, - borderRadius: utils.borders.radii.small, + borderRadius: utils.borders.radii.r8, borderColor: utils.colors.backgroundNeutralSubtleOnElevation0, backgroundColor: utils.colors.backgroundNeutralSubtleOnElevation0, paddingLeft: 14, diff --git a/suite-native/atoms/src/OrderedListIcon.tsx b/suite-native/atoms/src/OrderedListIcon.tsx index 73fec6d13ec..fcfa61c4050 100644 --- a/suite-native/atoms/src/OrderedListIcon.tsx +++ b/suite-native/atoms/src/OrderedListIcon.tsx @@ -14,7 +14,7 @@ const iconBackgroundStyle = prepareNativeStyle<{ color: Color; borderColor: Colo justifyContent: 'center', width: utils.spacings.sp32, height: utils.spacings.sp32, - borderRadius: 12, + borderRadius: utils.borders.radii.r12, extend: [ { condition: G.isNotNullable(color), diff --git a/suite-native/atoms/src/Select/SelectTrigger.tsx b/suite-native/atoms/src/Select/SelectTrigger.tsx index 20a87210051..b3d1b84119f 100644 --- a/suite-native/atoms/src/Select/SelectTrigger.tsx +++ b/suite-native/atoms/src/Select/SelectTrigger.tsx @@ -22,7 +22,7 @@ const selectStyle = prepareNativeStyle(utils => ({ alignItems: 'center', backgroundColor: utils.colors.backgroundNeutralSubtleOnElevation1, borderWidth: utils.borders.widths.small, - borderRadius: utils.borders.radii.small, + borderRadius: utils.borders.radii.r8, borderColor: utils.colors.backgroundNeutralSubtleOnElevation1, color: utils.colors.textSubdued, paddingLeft: utils.spacings.sp12, diff --git a/suite-native/atoms/src/SelectableItem.tsx b/suite-native/atoms/src/SelectableItem.tsx index 930f1391bcf..d89f6e24d87 100644 --- a/suite-native/atoms/src/SelectableItem.tsx +++ b/suite-native/atoms/src/SelectableItem.tsx @@ -12,7 +12,7 @@ import { Radio } from './Radio'; const cardStyle = prepareNativeStyle((utils, { isSelected }: { isSelected: boolean }) => ({ backgroundColor: utils.colors.backgroundSurfaceElevation1, - borderRadius: utils.borders.radii.medium, + borderRadius: utils.borders.radii.r16, padding: utils.spacings.sp16, ...utils.boxShadows.small, extend: [ diff --git a/suite-native/atoms/src/Sheet/BottomSheet.tsx b/suite-native/atoms/src/Sheet/BottomSheet.tsx index 02f450cbb1c..94e42f1a5a9 100644 --- a/suite-native/atoms/src/Sheet/BottomSheet.tsx +++ b/suite-native/atoms/src/Sheet/BottomSheet.tsx @@ -29,8 +29,8 @@ const DEFAULT_INSET_BOTTOM = 50; const sheetWrapperStyle = prepareNativeStyle((utils, { insetBottom }) => ({ backgroundColor: utils.colors.backgroundSurfaceElevation0, - borderTopLeftRadius: utils.borders.radii.large, - borderTopRightRadius: utils.borders.radii.large, + borderTopLeftRadius: utils.borders.radii.r24, + borderTopRightRadius: utils.borders.radii.r24, paddingBottom: Math.max(insetBottom, utils.spacings.sp16), maxHeight: '90%', })); diff --git a/suite-native/atoms/src/Skeleton/BoxSkeleton.tsx b/suite-native/atoms/src/Skeleton/BoxSkeleton.tsx index 3c395577401..105cb0a194d 100644 --- a/suite-native/atoms/src/Skeleton/BoxSkeleton.tsx +++ b/suite-native/atoms/src/Skeleton/BoxSkeleton.tsx @@ -48,7 +48,7 @@ export const BoxSkeleton = ({ height, width, elevation = '1', - borderRadius = nativeBorders.radii.small, + borderRadius = nativeBorders.radii.r8, }: BoxSkeletonProps) => { const { utils: { colors }, diff --git a/suite-native/atoms/src/Skeleton/ListItemSkeleton.tsx b/suite-native/atoms/src/Skeleton/ListItemSkeleton.tsx index 03d0479273b..89e661d8a8d 100644 --- a/suite-native/atoms/src/Skeleton/ListItemSkeleton.tsx +++ b/suite-native/atoms/src/Skeleton/ListItemSkeleton.tsx @@ -36,12 +36,12 @@ export const ListItemSkeleton = () => { diff --git a/suite-native/atoms/src/StepsProgressBar.tsx b/suite-native/atoms/src/StepsProgressBar.tsx index b046ad53499..6925ec9aa6f 100644 --- a/suite-native/atoms/src/StepsProgressBar.tsx +++ b/suite-native/atoms/src/StepsProgressBar.tsx @@ -15,7 +15,7 @@ const progressBarWrapperStyle = prepareNativeStyle(utils => ({ paddingVertical: utils.spacings.sp8, paddingHorizontal: utils.spacings.sp8, gap: utils.spacings.sp4, - borderRadius: 10, + borderRadius: utils.borders.radii.round, borderWidth: utils.borders.widths.small, alignItems: 'center', height: 20, @@ -26,7 +26,7 @@ const progressBarWrapperStyle = prepareNativeStyle(utils => ({ const progressBarItemStyle = prepareNativeStyle<{ isActive: boolean }>((utils, { isActive }) => ({ width: isActive ? 8 : 4, height: 4, - borderRadius: utils.borders.radii.small / 4, + borderRadius: utils.borders.radii.round, backgroundColor: isActive ? utils.colors.backgroundSecondaryDefault : utils.colors.backgroundNeutralSubdued, diff --git a/suite-native/device-manager/src/components/DeviceAction.tsx b/suite-native/device-manager/src/components/DeviceAction.tsx index ee837ee4a4a..df2e172ec3d 100644 --- a/suite-native/device-manager/src/components/DeviceAction.tsx +++ b/suite-native/device-manager/src/components/DeviceAction.tsx @@ -20,7 +20,7 @@ const contentStyle = prepareNativeStyle(utils => ({ gap: utils.spacings.sp8, backgroundColor: utils.colors.backgroundSurfaceElevation1, borderWidth: utils.borders.widths.small, - borderRadius: 12, + borderRadius: utils.borders.radii.r12, borderColor: utils.colors.borderElevation1, })); diff --git a/suite-native/device-manager/src/components/DeviceManagerModal.tsx b/suite-native/device-manager/src/components/DeviceManagerModal.tsx index 140d9d2237f..8ac671be336 100644 --- a/suite-native/device-manager/src/components/DeviceManagerModal.tsx +++ b/suite-native/device-manager/src/components/DeviceManagerModal.tsx @@ -7,6 +7,7 @@ import { useSelector } from 'react-redux'; import { ScreenHeaderWrapper, Box, HStack } from '@suite-native/atoms'; import { prepareNativeStyle, useNativeStyles } from '@trezor/styles'; import { selectDeviceState } from '@suite-common/wallet-core'; +import { nativeBorders } from '@trezor/theme'; import { useDeviceManager } from '../hooks/useDeviceManager'; import { DeviceItemContent } from './DeviceItem/DeviceItemContent'; @@ -17,7 +18,7 @@ type DeviceManagerModalProps = { onClose?: () => void; }; -export const MANAGER_MODAL_BOTTOM_RADIUS = 12; +export const MANAGER_MODAL_BOTTOM_RADIUS = nativeBorders.radii.r12; const modalBackgroundOverlayStyle = prepareNativeStyle(utils => ({ flex: 1, diff --git a/suite-native/device-manager/src/components/WalletItem.tsx b/suite-native/device-manager/src/components/WalletItem.tsx index 4da09aea93d..de86856fdd4 100644 --- a/suite-native/device-manager/src/components/WalletItem.tsx +++ b/suite-native/device-manager/src/components/WalletItem.tsx @@ -24,7 +24,7 @@ const walletItemStyle = prepareNativeStyle( alignItems: 'center', height: 60, gap: utils.spacings.sp12, - borderRadius: 12, + borderRadius: utils.borders.radii.r12, borderColor: utils.colors.borderElevation1, flex: 1, extend: [ diff --git a/suite-native/graph/src/components/GraphError.tsx b/suite-native/graph/src/components/GraphError.tsx index 2b84c7fec06..570c4a1863a 100644 --- a/suite-native/graph/src/components/GraphError.tsx +++ b/suite-native/graph/src/components/GraphError.tsx @@ -11,10 +11,10 @@ type GraphErrorProps = { onTryAgain: () => void; }; -const errorIconStyle = prepareNativeStyle(({ colors }) => ({ +const errorIconStyle = prepareNativeStyle(({ borders, colors }) => ({ width: 48, height: 48, - borderRadius: 24, + borderRadius: borders.radii.r24, backgroundColor: colors.backgroundAlertYellowSubtleOnElevation1, borderColor: colors.backgroundAlertYellowSubtleOnElevation0, borderWidth: 3, diff --git a/suite-native/module-accounts-import/src/components/AccountImportOverviewCard.tsx b/suite-native/module-accounts-import/src/components/AccountImportOverviewCard.tsx index 1745e12864d..13d193076db 100644 --- a/suite-native/module-accounts-import/src/components/AccountImportOverviewCard.tsx +++ b/suite-native/module-accounts-import/src/components/AccountImportOverviewCard.tsx @@ -15,7 +15,7 @@ import { NetworkSymbol } from '@suite-common/wallet-config'; const assetCardStyle = prepareNativeStyle(utils => ({ padding: utils.spacings.sp24, - borderRadius: utils.borders.radii.large, + borderRadius: utils.borders.radii.r24, width: '100%', })); diff --git a/suite-native/module-accounts-management/src/components/CoinPriceCard.tsx b/suite-native/module-accounts-management/src/components/CoinPriceCard.tsx index ffcf015c298..db64e8102aa 100644 --- a/suite-native/module-accounts-management/src/components/CoinPriceCard.tsx +++ b/suite-native/module-accounts-management/src/components/CoinPriceCard.tsx @@ -23,7 +23,7 @@ const cardStyle = prepareNativeStyle(utils => ({ alignItem: 'center', padding: utils.spacings.sp16, backgroundColor: utils.colors.backgroundSurfaceElevation1, - borderRadius: utils.borders.radii.medium, + borderRadius: utils.borders.radii.r16, })); const cardContentStyle = prepareNativeStyle(_ => ({ diff --git a/suite-native/module-authorize-device/src/components/passphrase/PassphraseForm.tsx b/suite-native/module-authorize-device/src/components/passphrase/PassphraseForm.tsx index 9b9eb9e5669..cb81d0162c1 100644 --- a/suite-native/module-authorize-device/src/components/passphrase/PassphraseForm.tsx +++ b/suite-native/module-authorize-device/src/components/passphrase/PassphraseForm.tsx @@ -44,7 +44,7 @@ type PassphraseFormProps = { const formStyle = prepareNativeStyle(utils => ({ backgroundColor: utils.colors.backgroundSurfaceElevation1, - borderRadius: utils.borders.radii.large, + borderRadius: utils.borders.radii.r24, gap: utils.spacings.sp16, })); diff --git a/suite-native/module-authorize-device/src/screens/passphrase/PassphraseFormScreen.tsx b/suite-native/module-authorize-device/src/screens/passphrase/PassphraseFormScreen.tsx index 59545110e54..2170fa95768 100644 --- a/suite-native/module-authorize-device/src/screens/passphrase/PassphraseFormScreen.tsx +++ b/suite-native/module-authorize-device/src/screens/passphrase/PassphraseFormScreen.tsx @@ -15,7 +15,7 @@ const ANIMATION_DURATION = 300; const cardStyle = prepareNativeStyle(utils => ({ backgroundColor: utils.colors.backgroundAlertBlueSubtleOnElevation1, - borderRadius: utils.borders.radii.medium, + borderRadius: utils.borders.radii.r16, borderColor: utils.colors.backgroundAlertBlueSubtleOnElevationNegative, borderWidth: utils.borders.widths.small, padding: utils.spacings.sp16, diff --git a/suite-native/module-dev-utils/src/screens/DemoScreen.tsx b/suite-native/module-dev-utils/src/screens/DemoScreen.tsx index 3a76688d646..4acc7a91285 100644 --- a/suite-native/module-dev-utils/src/screens/DemoScreen.tsx +++ b/suite-native/module-dev-utils/src/screens/DemoScreen.tsx @@ -35,7 +35,7 @@ import { isDevelopOrDebugEnv } from '@suite-native/config'; import { TypographyStyle } from '@trezor/theme'; const inputStackStyle = prepareNativeStyle(utils => ({ - borderRadius: utils.borders.radii.medium, + borderRadius: utils.borders.radii.r16, padding: utils.spacings.sp8, })); diff --git a/suite-native/module-home/src/screens/HomeScreen/components/BiometricsBottomSheet.tsx b/suite-native/module-home/src/screens/HomeScreen/components/BiometricsBottomSheet.tsx index 05d1dcbeddc..774e7d1cda5 100644 --- a/suite-native/module-home/src/screens/HomeScreen/components/BiometricsBottomSheet.tsx +++ b/suite-native/module-home/src/screens/HomeScreen/components/BiometricsBottomSheet.tsx @@ -23,7 +23,7 @@ const SHOW_TIMEOUT = 1500; const cardStyle = prepareNativeStyle(utils => ({ alignItems: 'center', textAlign: 'center', - borderRadius: utils.borders.radii.medium, + borderRadius: utils.borders.radii.r16, backgroundColor: utils.colors.backgroundSurfaceElevation1, padding: utils.spacings.sp24, marginBottom: utils.spacings.sp24, diff --git a/suite-native/module-send/src/components/FeeOption.tsx b/suite-native/module-send/src/components/FeeOption.tsx index c48c0a3b231..8c065fd2fc9 100644 --- a/suite-native/module-send/src/components/FeeOption.tsx +++ b/suite-native/module-send/src/components/FeeOption.tsx @@ -37,7 +37,7 @@ const feeLabelsMap = { const wrapperStyle = prepareNativeStyle(utils => ({ overflow: 'hidden', - borderRadius: utils.borders.radii.medium, + borderRadius: utils.borders.radii.r16, borderWidth: utils.borders.widths.large, backgroundColor: utils.colors.backgroundSurfaceElevation1, borderColor: utils.colors.backgroundSurfaceElevation0, diff --git a/suite-native/module-send/src/components/ReviewOutputCard.tsx b/suite-native/module-send/src/components/ReviewOutputCard.tsx index fdcbfe81671..9ae06866ef7 100644 --- a/suite-native/module-send/src/components/ReviewOutputCard.tsx +++ b/suite-native/module-send/src/components/ReviewOutputCard.tsx @@ -18,7 +18,7 @@ const cardStyle = prepareNativeStyle<{ isConfirmed: boolean }>((utils, { isConfi marginHorizontal: utils.spacings.sp8, paddingHorizontal: utils.spacings.sp16, paddingVertical: utils.spacings.sp12, - borderRadius: 12, + borderRadius: utils.borders.radii.r12, extend: { condition: isConfirmed, style: { diff --git a/suite-native/module-settings/src/components/ColorSchemePickerItem.tsx b/suite-native/module-settings/src/components/ColorSchemePickerItem.tsx index e92ac227c3d..e863e924b69 100644 --- a/suite-native/module-settings/src/components/ColorSchemePickerItem.tsx +++ b/suite-native/module-settings/src/components/ColorSchemePickerItem.tsx @@ -12,7 +12,7 @@ type ColorSchemePickerItemProps = { const pickerItemWrapperStyle = prepareNativeStyle<{ isColorSchemeActive: boolean }>( (utils, { isColorSchemeActive }) => ({ backgroundColor: utils.colors.backgroundSurfaceElevationNegative, - borderRadius: utils.borders.radii.medium, + borderRadius: utils.borders.radii.r16, minHeight: 114, flex: 1, paddingTop: 33, diff --git a/suite-native/qr-code/src/components/QRCodeScanner.tsx b/suite-native/qr-code/src/components/QRCodeScanner.tsx index 105fd2f0490..46d80c70895 100644 --- a/suite-native/qr-code/src/components/QRCodeScanner.tsx +++ b/suite-native/qr-code/src/components/QRCodeScanner.tsx @@ -19,7 +19,7 @@ type QRCodeScannerProps = { const SCANNER_SIZE = Dimensions.get('screen').width - 2 * nativeSpacings.sp16; const cameraContainerStyle = prepareNativeStyle(utils => ({ - borderRadius: utils.borders.radii.medium, + borderRadius: utils.borders.radii.r16, overflow: 'hidden', })); diff --git a/suite-native/receive/src/components/DevicePaginationButton.tsx b/suite-native/receive/src/components/DevicePaginationButton.tsx index aeaf03e8100..e25d3c6dac3 100644 --- a/suite-native/receive/src/components/DevicePaginationButton.tsx +++ b/suite-native/receive/src/components/DevicePaginationButton.tsx @@ -29,18 +29,18 @@ type DeviceButtonStyleProps = { const safe3Styles = { backgroundColor: DEVICE_SCREEN_BACKGROUND_COLOR, borderColor: DEVICE_TEXT_COLOR, - borderRadius: nativeBorders.radii.large / 2, + borderRadius: nativeBorders.radii.r12, borderWidth: nativeBorders.widths.large, } as const; const modelToStyles = { [DeviceModelInternal.T2T1]: { backgroundColor: T2B1_BUTTON_COLOR, - borderRadius: nativeBorders.radii.small, + borderRadius: nativeBorders.radii.r8, }, [DeviceModelInternal.T3T1]: { backgroundColor: T2B1_BUTTON_COLOR, - borderRadius: nativeBorders.radii.small, + borderRadius: nativeBorders.radii.r8, }, [DeviceModelInternal.T2B1]: safe3Styles, [DeviceModelInternal.T3B1]: safe3Styles, diff --git a/suite-native/receive/src/components/UnverifiedAddressDevice.tsx b/suite-native/receive/src/components/UnverifiedAddressDevice.tsx index 75a7aa49af8..e4566757c8b 100644 --- a/suite-native/receive/src/components/UnverifiedAddressDevice.tsx +++ b/suite-native/receive/src/components/UnverifiedAddressDevice.tsx @@ -34,7 +34,7 @@ const deviceFrameStyle = prepareNativeStyle(utils => ({ width: DEVICE_SCREEN_WIDTH, padding: utils.spacings.sp4, borderWidth: utils.borders.widths.small, - borderRadius: utils.borders.radii.large / 2, + borderRadius: utils.borders.radii.r12, borderColor: utils.colors.borderElevation2, })); @@ -46,7 +46,7 @@ const deviceScreenStyle = prepareNativeStyle<{ isPaginationEnabled: boolean }>( paddingVertical: isPaginationEnabled ? utils.spacings.sp24 : 40, maxWidth: DEVICE_SCREEN_WIDTH, backgroundColor: DEVICE_SCREEN_BACKGROUND_COLOR, - borderRadius: utils.borders.radii.large / 2, + borderRadius: utils.borders.radii.r12, }), ); diff --git a/suite-native/transactions/src/components/TransactionsEmptyState.tsx b/suite-native/transactions/src/components/TransactionsEmptyState.tsx index f0b727a9f10..15939369522 100644 --- a/suite-native/transactions/src/components/TransactionsEmptyState.tsx +++ b/suite-native/transactions/src/components/TransactionsEmptyState.tsx @@ -19,7 +19,7 @@ const cardStyle = prepareNativeStyle(utils => ({ width: '100%', paddingHorizontal: utils.spacings.sp24, paddingVertical: utils.spacings.sp32, - borderRadius: utils.borders.radii.large, + borderRadius: utils.borders.radii.r24, })); const receiveButtonStyle = prepareNativeStyle(() => ({ diff --git a/suite-native/transactions/src/components/TransactionsList/TransactionListItemContainer.tsx b/suite-native/transactions/src/components/TransactionsList/TransactionListItemContainer.tsx index 5da81dc2fdb..b55c4fa94b3 100644 --- a/suite-native/transactions/src/components/TransactionsList/TransactionListItemContainer.tsx +++ b/suite-native/transactions/src/components/TransactionsList/TransactionListItemContainer.tsx @@ -73,8 +73,8 @@ export const transactionListItemContainerStyle = prepareNativeStyle ({ flex: 1, aspectRatio, - borderRadius: utils.borders.radii.large, + borderRadius: utils.borders.radii.r24, })); const activityIndicatorStyle = prepareNativeStyle(_ => ({