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

2 files changed, 80 insertions, 72 deletions

diff --git a/src/view/com/util/PostMeta.tsx b/src/view/com/util/PostMeta.tsx
index 870f503f2..cebab59c0 100644
--- a/src/view/com/util/PostMeta.tsx
+++ b/src/view/com/util/PostMeta.tsx
@@ -7,7 +7,7 @@ import {usePalette} from 'lib/hooks/usePalette'
 import {useStores} from 'state/index'
 import {UserAvatar} from './UserAvatar'
 import {observer} from 'mobx-react-lite'
-import FollowButton from '../profile/FollowButton'
+import {FollowButton} from '../profile/FollowButton'
 import {FollowState} from 'state/models/cache/my-follows'
 
 interface PostMetaOpts {
@@ -78,7 +78,7 @@ export const PostMeta = observer(function (opts: PostMetaOpts) {
 
         <View>
           <FollowButton
-            type="default"
+            unfollowedType="default"
             did={opts.did}
             onToggleFollow={onToggleFollow}
           />
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>
       ) : (