From ea04c2bd330dc5b46d6f9df0d7d4619bbd8f56d0 Mon Sep 17 00:00:00 2001
From: Paul Frazee <pfrazee@gmail.com>
Date: Wed, 5 Apr 2023 18:56:02 -0500
Subject: Add user invite codes (#393)

* Add mobile UIs for invite codes

* Update invite code UIs for web

* Finish implementing invite code behaviors (including notifications of invited users)

* Bump deps

* Update web right nav to use real data; also fix lint
---
 src/view/com/util/forms/Button.tsx | 148 +++++++++++++++++++------------------
 1 file changed, 78 insertions(+), 70 deletions(-)

(limited to 'src/view/com/util/forms/Button.tsx')

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>
       ) : (
-- 
cgit 1.4.1

