update button spacing (#9383)

src/components/Button.tsx

@@ -442,20 +442,20 @@ export const Button = React.forwardRef<View, ButtonProps>(
         if (size === 'large') {
           baseStyles.push(a.rounded_full, {
             paddingVertical: 12,
-            paddingHorizontal: 25,
+            paddingHorizontal: 24,
-            gap: 3,
+            gap: 6,
           })
         } else if (size === 'small') {
           baseStyles.push(a.rounded_full, {
             paddingVertical: 8,
-            paddingHorizontal: 13,
+            paddingHorizontal: 14,
-            gap: 3,
+            gap: 5,
           })
         } else if (size === 'tiny') {
           baseStyles.push(a.rounded_full, {
             paddingVertical: 5,
-            paddingHorizontal: 9,
+            paddingHorizontal: 10,
-            gap: 2,
+            gap: 3,
           })
         }
       } else if (shape === 'rectangular') {
@@ -531,9 +531,10 @@ export const Button = React.forwardRef<View, ButtonProps>(
         variant,
         color,
         size,
+        shape,
         disabled: disabled || false,
       }),
-      [state, variant, color, size, disabled],
+      [state, variant, color, size, shape, disabled],
     )
 
     return (
@@ -774,9 +775,10 @@ export function ButtonIcon({
   position?: 'left' | 'right'
   size?: SVGIconProps['size']
 }) {
-  const {size: buttonSize} = useButtonContext()
+  const {size: buttonSize, shape: buttonShape} = useButtonContext()
   const textStyles = useSharedButtonTextStyles()
-  const {iconSize, iconContainerSize} = React.useMemo(() => {
+  const {iconSize, iconContainerSize, iconNegativeMargin} =
+    React.useMemo(() => {
       /**
        * Pre-set icon sizes for different button sizes
        */
@@ -814,11 +816,26 @@ export function ButtonIcon({
         tiny: 15,
       }[buttonSize || 'small']
 
+      /*
+       * The icon needs to be closer to the edge of the button than the text. Therefore
+       * we make the gap slightly too large, and then pull in the sides using negative margins.
+       */
+      let iconNegativeMargin = 0
+
+      if (buttonShape === 'default') {
+        iconNegativeMargin = {
+          large: -2,
+          small: -2,
+          tiny: -1,
+        }[buttonSize || 'small']
+      }
+
       return {
         iconSize,
         iconContainerSize,
+        iconNegativeMargin,
       }
-  }, [buttonSize, size])
+    }, [buttonSize, buttonShape, size])
 
   return (
     <View
@@ -827,6 +844,8 @@ export function ButtonIcon({
         {
           width: iconContainerSize,
           height: iconContainerSize,
+          marginLeft: iconNegativeMargin,
+          marginRight: iconNegativeMargin,
         },
       ]}>
       <View