Switch to a more visually obvious button for the threadgate (#4139)

* Switch to a more visually obvious button for the threadgate

* Move threadgate button into the keyboard-sticky area

* Fix keyboard offset

1 files changed, 31 insertions, 40 deletions

diff --git a/src/view/com/composer/threadgate/ThreadgateBtn.tsx b/src/view/com/composer/threadgate/ThreadgateBtn.tsx
index ebbc613ff..c43f00676 100644
--- a/src/view/com/composer/threadgate/ThreadgateBtn.tsx
+++ b/src/view/com/composer/threadgate/ThreadgateBtn.tsx
@@ -1,17 +1,17 @@
 import React from 'react'
-import {TouchableOpacity, StyleSheet, Keyboard} from 'react-native'
-import {
-  FontAwesomeIcon,
-  FontAwesomeIconStyle,
-} from '@fortawesome/react-native-fontawesome'
-import {usePalette} from 'lib/hooks/usePalette'
-import {useAnalytics} from 'lib/analytics/analytics'
-import {HITSLOP_10} from 'lib/constants'
-import {useLingui} from '@lingui/react'
+import {Keyboard, View} from 'react-native'
 import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {isNative} from '#/platform/detection'
 import {useModalControls} from '#/state/modals'
 import {ThreadgateSetting} from '#/state/queries/threadgate'
-import {isNative} from '#/platform/detection'
+import {useAnalytics} from 'lib/analytics/analytics'
+import {atoms as a} from '#/alf'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
+import {CircleBanSign_Stroke2_Corner0_Rounded as CircleBanSign} from '#/components/icons/CircleBanSign'
+import {Earth_Stroke2_Corner0_Rounded as Earth} from '#/components/icons/Globe'
+import {Group3_Stroke2_Corner0_Rounded as Group} from '#/components/icons/Group'
 
 export function ThreadgateBtn({
   threadgate,
@@ -20,7 +20,6 @@ export function ThreadgateBtn({
   threadgate: ThreadgateSetting[]
   onChange: (v: ThreadgateSetting[]) => void
 }) {
-  const pal = usePalette('default')
   const {track} = useAnalytics()
   const {_} = useLingui()
   const {openModal} = useModalControls()
@@ -37,36 +36,28 @@ export function ThreadgateBtn({
     })
   }
 
+  const isEverybody = threadgate.length === 0
+  const isNobody = !!threadgate.find(gate => gate.type === 'nobody')
+  const label = isEverybody
+    ? _(msg`Everybody can reply`)
+    : isNobody
+    ? _(msg`Nobody can reply`)
+    : _(msg`Some people can reply`)
+
   return (
-    <TouchableOpacity
-      testID="openReplyGateButton"
-      onPress={onPress}
-      style={styles.button}
-      hitSlop={HITSLOP_10}
-      accessibilityRole="button"
-      accessibilityLabel={_(msg`Who can reply`)}
-      accessibilityHint="">
-      <FontAwesomeIcon
-        icon={['far', 'comments']}
-        style={pal.link as FontAwesomeIconStyle}
-        size={24}
-      />
-      {threadgate.length ? (
-        <FontAwesomeIcon
-          icon="check"
-          size={16}
-          style={pal.link as FontAwesomeIconStyle}
+    <View style={[a.flex_row, a.pb_sm, a.px_md]}>
+      <Button
+        variant="solid"
+        color="secondary"
+        size="small"
+        testID="openReplyGateButton"
+        onPress={onPress}
+        label={label}>
+        <ButtonIcon
+          icon={isEverybody ? Earth : isNobody ? CircleBanSign : Group}
         />
-      ) : null}
-    </TouchableOpacity>
+        <ButtonText>{label}</ButtonText>
+      </Button>
+    </View>
   )
 }
-
-const styles = StyleSheet.create({
-  button: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: 6,
-    gap: 4,
-  },
-})