Merge remote-tracking branch 'origin/main' into starter-packs

* origin/main:
  Convert button to use forwardRef (#4576)
  use 1000x1000 for image height in avatar cropper (#4453)
  fix for autofill covering border (#4573)

src/components/Button.tsx

@@ -88,7 +88,9 @@ export function useButtonContext() {
   return React.useContext(Context)
 }
 
-export function Button({
+export const Button = React.forwardRef<View, ButtonProps>(
+  (
+    {
       children,
       variant,
       color,
@@ -99,7 +101,9 @@ export function Button({
       style,
       hoverStyle: hoverStyleProp,
       ...rest
-}: ButtonProps) {
+    },
+    ref,
+  ) => {
     const t = useTheme()
     const [state, setState] = React.useState({
       pressed: false,
@@ -179,7 +183,9 @@ export function Button({
             })
           } else {
             baseStyles.push(a.border, {
-            borderColor: light ? t.palette.primary_200 : t.palette.primary_900,
+              borderColor: light
+                ? t.palette.primary_200
+                : t.palette.primary_900,
             })
           }
         } else if (variant === 'ghost') {
@@ -278,9 +284,19 @@ export function Button({
 
       if (shape === 'default') {
         if (size === 'large') {
-        baseStyles.push({paddingVertical: 15}, a.px_2xl, a.rounded_sm, a.gap_md)
+          baseStyles.push(
+            {paddingVertical: 15},
+            a.px_2xl,
+            a.rounded_sm,
+            a.gap_md,
+          )
         } else if (size === 'medium') {
-        baseStyles.push({paddingVertical: 12}, a.px_2xl, a.rounded_sm, a.gap_md)
+          baseStyles.push(
+            {paddingVertical: 12},
+            a.px_2xl,
+            a.rounded_sm,
+            a.gap_md,
+          )
         } else if (size === 'small') {
           baseStyles.push({paddingVertical: 9}, a.px_lg, a.rounded_sm, a.gap_sm)
         } else if (size === 'xsmall') {
@@ -368,6 +384,7 @@ export function Button({
         role="button"
         accessibilityHint={undefined} // optional
         {...rest}
+        ref={ref}
         aria-label={label}
         aria-pressed={state.pressed}
         accessibilityLabel={label}
@@ -417,7 +434,9 @@ export function Button({
         </Context.Provider>
       </Pressable>
     )
-}
+  },
+)
+Button.displayName = 'Button'
 
 export function useSharedButtonTextStyles() {
   const t = useTheme()

src/components/forms/TextField.tsx

@@ -197,6 +197,13 @@ export function createInput(Component: typeof TextInput) {
               textAlignVertical: rest.multiline ? 'top' : undefined,
               minHeight: rest.multiline ? 80 : undefined,
             },
+            // fix for autofill styles covering border
+            web({
+              paddingTop: 12,
+              paddingBottom: 12,
+              marginTop: 2,
+              marginBottom: 2,
+            }),
             android({
               paddingBottom: 16,
             }),

src/screens/Onboarding/StepProfile/index.tsx

@@ -181,8 +181,8 @@ export function StepProfile() {
       image = await openCropper({
         mediaType: 'photo',
         cropperCircleOverlay: true,
-        height: image.height,
-        width: image.width,
+        height: 1000,
+        width: 1000,
         path: image.path,
       })
     }

src/view/com/util/UserAvatar.tsx

@@ -303,8 +303,8 @@ let EditableUserAvatar = ({
       const croppedImage = await openCropper({
         mediaType: 'photo',
         cropperCircleOverlay: true,
-        height: item.height,
-        width: item.width,
+        height: 1000,
+        width: 1000,
         path: item.path,
       })