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

src/view/com/composer/Composer.tsx

@@ -380,7 +380,7 @@ export const ComposePost = observer(function ComposePost({
         testID="composePostView"
         behavior="padding"
         style={s.flex1}
-        keyboardVerticalOffset={60}>
+        keyboardVerticalOffset={replyTo ? 60 : isAndroid ? 120 : 100}>
         <View style={[s.flex1, viewStyles]} aria-modal accessibilityViewIsModal>
           <View style={[styles.topbar, isDesktop && styles.topbarDesktop]}>
             <TouchableOpacity
@@ -411,12 +411,6 @@ export const ComposePost = observer(function ComposePost({
                   onChange={setLabels}
                   hasMedia={hasMedia}
                 />
-                {replyTo ? null : (
-                  <ThreadgateBtn
-                    threadgate={threadgate}
-                    onChange={setThreadgate}
-                  />
-                )}
                 {canPost ? (
                   <TouchableOpacity
                     testID="composerPublishBtn"
@@ -547,6 +541,9 @@ export const ComposePost = observer(function ComposePost({
       </KeyboardAvoidingView>
       <KeyboardStickyView
         offset={{closed: isIOS ? -insets.bottom : 0, opened: 0}}>
+        {replyTo ? null : (
+          <ThreadgateBtn threadgate={threadgate} onChange={setThreadgate} />
+        )}
         <View style={[pal.border, styles.bottomBar]}>
           <View style={[a.flex_row, a.align_center, a.gap_xs]}>
             <SelectPhotoBtn gallery={gallery} disabled={!canSelectImages} />

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,
-  },
-})