fix(suite-native): use 20px border radius instead of 24px

Author: yanascz

Diff for: packages/theme/src/borders.ts

@@ -17,7 +17,7 @@ export const borders = {
 
 export type Borders = typeof borders;
 
-type NativeRadiusValue = 4 | 8 | 12 | 16 | 20 | 24;
+type NativeRadiusValue = 4 | 8 | 12 | 16 | 20;
 
 export const nativeBorders = {
     widths: {
@@ -31,7 +31,6 @@ export const nativeBorders = {
         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;

Diff for: suite-native/atoms/src/Sheet/BottomSheet.tsx

@@ -29,8 +29,8 @@ const DEFAULT_INSET_BOTTOM = 50;
 
 const sheetWrapperStyle = prepareNativeStyle<WrapperStyleProps>((utils, { insetBottom }) => ({
     backgroundColor: utils.colors.backgroundSurfaceElevation0,
-    borderTopLeftRadius: utils.borders.radii.r24,
-    borderTopRightRadius: utils.borders.radii.r24,
+    borderTopLeftRadius: utils.borders.radii.r20,
+    borderTopRightRadius: utils.borders.radii.r20,
     paddingBottom: Math.max(insetBottom, utils.spacings.sp16),
     maxHeight: '90%',
 }));

Diff for: suite-native/graph/src/components/GraphError.tsx

@@ -14,7 +14,7 @@ type GraphErrorProps = {
 const errorIconStyle = prepareNativeStyle(({ borders, colors }) => ({
     width: 48,
     height: 48,
-    borderRadius: borders.radii.r24,
+    borderRadius: borders.radii.round,
     backgroundColor: colors.backgroundAlertYellowSubtleOnElevation1,
     borderColor: colors.backgroundAlertYellowSubtleOnElevation0,
     borderWidth: 3,

Diff for: 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.r24,
+    borderRadius: utils.borders.radii.r20,
     width: '100%',
 }));
 

Diff for: suite-native/module-authorize-device/src/components/passphrase/PassphraseForm.tsx

@@ -44,7 +44,6 @@ type PassphraseFormProps = {
 
 const formStyle = prepareNativeStyle(utils => ({
     backgroundColor: utils.colors.backgroundSurfaceElevation1,
-    borderRadius: utils.borders.radii.r24,
     gap: utils.spacings.sp16,
 }));
 

Diff for: 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.r24,
+    borderRadius: utils.borders.radii.r20,
 }));
 
 const receiveButtonStyle = prepareNativeStyle(() => ({

Diff for: suite-native/video-assets/src/components/Video.tsx

@@ -25,7 +25,7 @@ const videoContainer = prepareNativeStyle((_, { aspectRatio }: VideoStyleProps)
 const videoStyle = prepareNativeStyle((utils, { aspectRatio }: VideoStyleProps) => ({
     flex: 1,
     aspectRatio,
-    borderRadius: utils.borders.radii.r24,
+    borderRadius: utils.borders.radii.r20,
 }));
 
 const activityIndicatorStyle = prepareNativeStyle(_ => ({