1 files changed, 78 insertions, 70 deletions
diff --git a/src/view/com/util/forms/Button.tsx b/src/view/com/util/forms/Button.tsx
index b7c058d2d..a634b47a9 100644
--- a/src/view/com/util/forms/Button.tsx
+++ b/src/view/com/util/forms/Button.tsx
@@ -25,6 +25,7 @@ export function Button({
   type = 'primary',
   label,
   style,
+  labelStyle,
   onPress,
   children,
   testID,
@@ -32,87 +33,94 @@ export function Button({
   type?: ButtonType
   label?: string
   style?: StyleProp<ViewStyle>
+  labelStyle?: StyleProp<TextStyle>
   onPress?: () => void
   testID?: string
 }>) {
   const theme = useTheme()
-  const outerStyle = choose<ViewStyle, Record<ButtonType, ViewStyle>>(type, {
-    primary: {
-      backgroundColor: theme.palette.primary.background,
+  const typeOuterStyle = choose<ViewStyle, Record<ButtonType, ViewStyle>>(
+    type,
+    {
+      primary: {
+        backgroundColor: theme.palette.primary.background,
+      },
+      secondary: {
+        backgroundColor: theme.palette.secondary.background,
+      },
+      default: {
+        backgroundColor: theme.palette.default.backgroundLight,
+      },
+      inverted: {
+        backgroundColor: theme.palette.inverted.background,
+      },
+      'primary-outline': {
+        backgroundColor: theme.palette.default.background,
+        borderWidth: 1,
+        borderColor: theme.palette.primary.border,
+      },
+      'secondary-outline': {
+        backgroundColor: theme.palette.default.background,
+        borderWidth: 1,
+        borderColor: theme.palette.secondary.border,
+      },
+      'primary-light': {
+        backgroundColor: theme.palette.default.background,
+      },
+      'secondary-light': {
+        backgroundColor: theme.palette.default.background,
+      },
+      'default-light': {
+        backgroundColor: theme.palette.default.background,
+      },
     },
-    secondary: {
-      backgroundColor: theme.palette.secondary.background,
-    },
-    default: {
-      backgroundColor: theme.palette.default.backgroundLight,
-    },
-    inverted: {
-      backgroundColor: theme.palette.inverted.background,
-    },
-    'primary-outline': {
-      backgroundColor: theme.palette.default.background,
-      borderWidth: 1,
-      borderColor: theme.palette.primary.border,
-    },
-    'secondary-outline': {
-      backgroundColor: theme.palette.default.background,
-      borderWidth: 1,
-      borderColor: theme.palette.secondary.border,
-    },
-    'primary-light': {
-      backgroundColor: theme.palette.default.background,
-    },
-    'secondary-light': {
-      backgroundColor: theme.palette.default.background,
-    },
-    'default-light': {
-      backgroundColor: theme.palette.default.background,
-    },
-  })
-  const labelStyle = choose<TextStyle, Record<ButtonType, TextStyle>>(type, {
-    primary: {
-      color: theme.palette.primary.text,
-      fontWeight: '600',
-    },
-    secondary: {
-      color: theme.palette.secondary.text,
-      fontWeight: theme.palette.secondary.isLowContrast ? '500' : undefined,
-    },
-    default: {
-      color: theme.palette.default.text,
-    },
-    inverted: {
-      color: theme.palette.inverted.text,
-      fontWeight: '600',
-    },
-    'primary-outline': {
-      color: theme.palette.primary.textInverted,
-      fontWeight: theme.palette.primary.isLowContrast ? '500' : undefined,
-    },
-    'secondary-outline': {
-      color: theme.palette.secondary.textInverted,
-      fontWeight: theme.palette.secondary.isLowContrast ? '500' : undefined,
-    },
-    'primary-light': {
-      color: theme.palette.primary.textInverted,
-      fontWeight: theme.palette.primary.isLowContrast ? '500' : undefined,
-    },
-    'secondary-light': {
-      color: theme.palette.secondary.textInverted,
-      fontWeight: theme.palette.secondary.isLowContrast ? '500' : undefined,
-    },
-    'default-light': {
-      color: theme.palette.default.text,
-      fontWeight: theme.palette.default.isLowContrast ? '500' : undefined,
+  )
+  const typeLabelStyle = choose<TextStyle, Record<ButtonType, TextStyle>>(
+    type,
+    {
+      primary: {
+        color: theme.palette.primary.text,
+        fontWeight: '600',
+      },
+      secondary: {
+        color: theme.palette.secondary.text,
+        fontWeight: theme.palette.secondary.isLowContrast ? '500' : undefined,
+      },
+      default: {
+        color: theme.palette.default.text,
+      },
+      inverted: {
+        color: theme.palette.inverted.text,
+        fontWeight: '600',
+      },
+      'primary-outline': {
+        color: theme.palette.primary.textInverted,
+        fontWeight: theme.palette.primary.isLowContrast ? '500' : undefined,
+      },
+      'secondary-outline': {
+        color: theme.palette.secondary.textInverted,
+        fontWeight: theme.palette.secondary.isLowContrast ? '500' : undefined,
+      },
+      'primary-light': {
+        color: theme.palette.primary.textInverted,
+        fontWeight: theme.palette.primary.isLowContrast ? '500' : undefined,
+      },
+      'secondary-light': {
+        color: theme.palette.secondary.textInverted,
+        fontWeight: theme.palette.secondary.isLowContrast ? '500' : undefined,
+      },
+      'default-light': {
+        color: theme.palette.default.text,
+        fontWeight: theme.palette.default.isLowContrast ? '500' : undefined,
+      },
     },
-  })
+  )
   return (
     <TouchableOpacity
-      style={[outerStyle, styles.outer, style]}
+      style={[typeOuterStyle, styles.outer, style]}
       onPress={onPress}
       testID={testID}>
       {label ? (
-        <Text type="button" style={[labelStyle]}>
+        <Text type="button" style={[typeLabelStyle, labelStyle]}>
           {label}
         </Text>
       ) : (