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

assets/icons/earth_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M4.4 9.493C4.14 10.28 4 11.124 4 12a8 8 0 1 0 10.899-7.459l-.953 3.81a1 1 0 0 1-.726.727l-3.444.866-.772 1.533a1 1 0 0 1-1.493.35L4.4 9.493Zm.883-1.84L7.756 9.51l.44-.874a1 1 0 0 1 .649-.52l3.306-.832.807-3.227a7.993 7.993 0 0 0-7.676 3.597ZM2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm8.43.162a1 1 0 0 1 .77-.29l1.89.121a1 1 0 0 1 .494.168l2.869 1.928a1 1 0 0 1 .336 1.277l-.973 1.946a1 1 0 0 1-.894.553h-2.92a1 1 0 0 1-.831-.445L9.225 14.5a1 1 0 0 1 .126-1.262l1.08-1.076Zm.915 1.913.177-.177 1.171.074 1.914 1.286-.303.607h-1.766l-1.194-1.79Z" clip-rule="evenodd"/></svg>

src/components/icons/Globe.tsx

@@ -3,3 +3,7 @@ import {createSinglePathSVG} from './TEMPLATE'
 export const Globe_Stroke2_Corner0_Rounded = createSinglePathSVG({
   path: 'M4.062 11h2.961c.103-2.204.545-4.218 1.235-5.77.06-.136.123-.269.188-.399A8.007 8.007 0 0 0 4.062 11ZM12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2Zm0 2c-.227 0-.518.1-.868.432-.354.337-.719.872-1.047 1.61-.561 1.263-.958 2.991-1.06 4.958h5.95c-.102-1.967-.499-3.695-1.06-4.958-.328-.738-.693-1.273-1.047-1.61C12.518 4.099 12.227 4 12 4Zm4.977 7c-.103-2.204-.545-4.218-1.235-5.77a9.78 9.78 0 0 0-.188-.399A8.006 8.006 0 0 1 19.938 11h-2.961Zm-2.003 2H9.026c.101 1.966.498 3.695 1.06 4.958.327.738.692 1.273 1.046 1.61.35.333.641.432.868.432.227 0 .518-.1.868-.432.354-.337.719-.872 1.047-1.61.561-1.263.958-2.991 1.06-4.958Zm.58 6.169c.065-.13.128-.263.188-.399.69-1.552 1.132-3.566 1.235-5.77h2.961a8.006 8.006 0 0 1-4.384 6.169Zm-7.108 0a9.877 9.877 0 0 1-.188-.399c-.69-1.552-1.132-3.566-1.235-5.77H4.062a8.006 8.006 0 0 0 4.384 6.169Z',
 })
+
+export const Earth_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M4.4 9.493C4.14 10.28 4 11.124 4 12a8 8 0 1 0 10.899-7.459l-.953 3.81a1 1 0 0 1-.726.727l-3.444.866-.772 1.533a1 1 0 0 1-1.493.35L4.4 9.493Zm.883-1.84L7.756 9.51l.44-.874a1 1 0 0 1 .649-.52l3.306-.832.807-3.227a7.993 7.993 0 0 0-7.676 3.597ZM2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm8.43.162a1 1 0 0 1 .77-.29l1.89.121a1 1 0 0 1 .494.168l2.869 1.928a1 1 0 0 1 .336 1.277l-.973 1.946a1 1 0 0 1-.894.553h-2.92a1 1 0 0 1-.831-.445L9.225 14.5a1 1 0 0 1 .126-1.262l1.08-1.076Zm.915 1.913.177-.177 1.171.074 1.914 1.286-.303.607h-1.766l-1.194-1.79Z',
+})

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 {Keyboard, View} 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 {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
+    <View style={[a.flex_row, a.pb_sm, a.px_md]}>
-      testID="openReplyGateButton"
+      <Button
-      onPress={onPress}
+        variant="solid"
-      style={styles.button}
+        color="secondary"
-      hitSlop={HITSLOP_10}
+        size="small"
-      accessibilityRole="button"
+        testID="openReplyGateButton"
-      accessibilityLabel={_(msg`Who can reply`)}
+        onPress={onPress}
-      accessibilityHint="">
+        label={label}>
-      <FontAwesomeIcon
+        <ButtonIcon
-        icon={['far', 'comments']}
+          icon={isEverybody ? Earth : isNobody ? CircleBanSign : Group}
-        style={pal.link as FontAwesomeIconStyle}
-        size={24}
-      />
-      {threadgate.length ? (
-        <FontAwesomeIcon
-          icon="check"
-          size={16}
-          style={pal.link as FontAwesomeIconStyle}
         />
-      ) : null}
+        <ButtonText>{label}</ButtonText>
-    </TouchableOpacity>
+      </Button>
+    </View>
   )
 }
-
-const styles = StyleSheet.create({
-  button: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: 6,
-    gap: 4,
-  },
-})