fix(suite-native): tweak button styles for optical balance

trezor · Jan 4, 2025 · bc02f32 · bc02f32
1 parent 32bbc5a
commit bc02f32
Show file tree

Hide file tree

Showing 2 changed files with 88 additions and 4 deletions.
diff --git a/suite-native/atoms/src/Button/Button.tsx b/suite-native/atoms/src/Button/Button.tsx
@@ -74,6 +74,12 @@ export type ButtonStyleProps = {
     hasTitle?: boolean;
 };
 
+export type ButtonTextStyleProps = {
+    additionalSpacing: number;
+    hasLeftView: boolean;
+    hasRightView: boolean;
+};
+
 const LOADER_FADE_IN_DURATION = 500;
 
 const baseDisabledScheme: BaseButtonColorScheme = {
@@ -186,20 +192,27 @@ const sizeToDimensionsMap = {
     small: {
         minHeight: 40,
         paddingVertical: 10,
-        paddingHorizontal: nativeSpacings.sp16,
+        paddingHorizontal: nativeSpacings.sp12,
     },
     medium: {
         minHeight: 48,
         paddingVertical: nativeSpacings.sp12,
-        paddingHorizontal: nativeSpacings.sp20,
+        paddingHorizontal: nativeSpacings.sp16,
     },
     large: {
         minHeight: 56,
         paddingVertical: nativeSpacings.sp16,
-        paddingHorizontal: nativeSpacings.sp24,
+        paddingHorizontal: nativeSpacings.sp20,
     },
 } as const satisfies Record<ButtonSize, NativeStyleObject>;
 
+const sizeToAdditionalSpacingMap = {
+    extraSmall: 0,
+    small: nativeSpacings.sp1,
+    medium: nativeSpacings.sp2,
+    large: nativeSpacings.sp4,
+} as const satisfies Record<ButtonSize, number>;
+
 export const buttonToTextSizeMap = {
     extraSmall: 'hint',
     small: 'hint',
@@ -237,6 +250,15 @@ export const buttonStyle = prepareNativeStyle<ButtonStyleProps>(
     },
 );
 
+const buttonTextStyle = prepareNativeStyle<ButtonTextStyleProps>(
+    (_, { additionalSpacing, hasLeftView, hasRightView }) => {
+        return {
+            marginLeft: !hasLeftView ? additionalSpacing : undefined,
+            marginRight: !hasRightView ? additionalSpacing : undefined,
+        };
+    },
+);
+
 export const ButtonIcon = ({
     iconName,
     color = 'iconDefault',
@@ -321,7 +343,16 @@ export const Button = ({
                             iconSize={size}
                         />
                     )}
-                    <Text textAlign="center" variant={buttonToTextSizeMap[size]} color={textColor}>
+                    <Text
+                        textAlign="center"
+                        variant={buttonToTextSizeMap[size]}
+                        color={textColor}
+                        style={applyStyle(buttonTextStyle, {
+                            additionalSpacing: sizeToAdditionalSpacingMap[size],
+                            hasLeftView: !!viewLeft,
+                            hasRightView: !!viewRight,
+                        })}
+                    >
                         {children}
                     </Text>
                     {viewRight && (

diff --git a/suite-native/module-dev-utils/src/screens/DemoScreen.tsx b/suite-native/module-dev-utils/src/screens/DemoScreen.tsx
@@ -147,6 +147,23 @@ export const DemoScreen = () => {
                                     </Button>
                                 ))}
                             </Box>
+                            <Box
+                                flexDirection="row"
+                                justifyContent="space-around"
+                                alignItems="center"
+                                style={applyStyle(flexWrapStyle)}
+                            >
+                                {buttonSizes.map(buttonSize => (
+                                    <Button
+                                        key={buttonSize}
+                                        colorScheme={buttonScheme}
+                                        viewRight="calendar"
+                                        size={buttonSize}
+                                    >
+                                        {buttonSize}
+                                    </Button>
+                                ))}
+                            </Box>
                         </VStack>
                     ))}
                     <VStack>
@@ -169,6 +186,42 @@ export const DemoScreen = () => {
                                 </Button>
                             ))}
                         </Box>
+                        <Box
+                            flexDirection="row"
+                            justifyContent="space-around"
+                            alignItems="center"
+                            style={applyStyle(flexWrapStyle)}
+                        >
+                            {buttonSizes.map(buttonSize => (
+                                <Button
+                                    key={buttonSize}
+                                    colorScheme="primary"
+                                    viewLeft="calendar"
+                                    size={buttonSize}
+                                    isDisabled
+                                >
+                                    {buttonSize}
+                                </Button>
+                            ))}
+                        </Box>
+                        <Box
+                            flexDirection="row"
+                            justifyContent="space-around"
+                            alignItems="center"
+                            style={applyStyle(flexWrapStyle)}
+                        >
+                            {buttonSizes.map(buttonSize => (
+                                <Button
+                                    key={buttonSize}
+                                    colorScheme="primary"
+                                    viewRight="calendar"
+                                    size={buttonSize}
+                                    isDisabled
+                                >
+                                    {buttonSize}
+                                </Button>
+                            ))}
+                        </Box>
                     </VStack>
                 </VStack>
                 <Divider />