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

trezor · Oct 4, 2024 · 49d390a · 49d390a
1 parent 51cd1ca
commit 49d390a
Show file tree

Hide file tree

Showing 7 changed files with 8 additions and 15 deletions.
diff --git a/packages/theme/src/borders.ts b/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 --git 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<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 --git a/suite-native/graph/src/components/GraphError.tsx b/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 --git 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.r24,
+    borderRadius: utils.borders.radii.r20,
     width: '100%',
 }));
 

diff --git a/suite-native/module-authorize-device/src/components/passphrase/PassphraseForm.tsx b/suite-native/module-authorize-device/src/components/passphrase/PassphraseForm.tsx
@@ -42,12 +42,6 @@ type PassphraseFormProps = {
     noPassphraseEnabled?: boolean;
 };
 
-const formStyle = prepareNativeStyle(utils => ({
-    backgroundColor: utils.colors.backgroundSurfaceElevation1,
-    borderRadius: utils.borders.radii.r24,
-    gap: utils.spacings.sp16,
-}));
-
 const cardStyle = prepareNativeStyle(_ => ({
     padding: FORM_CARD_PADDING,
 }));
@@ -126,7 +120,7 @@ export const PassphraseForm = ({
         <Form form={form}>
             <View ref={formWrapperView}>
                 <Card style={applyStyle(cardStyle)}>
-                    <VStack style={applyStyle(formStyle)}>
+                    <VStack spacing="sp16">
                         <SecureTextInputField
                             label={inputLabel}
                             name="passphrase"

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

diff --git a/suite-native/video-assets/src/components/Video.tsx b/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(_ => ({