diff --git a/native/community-settings/tag-farcaster-channel/tag-farcaster-channel.react.js b/native/community-settings/tag-farcaster-channel/tag-farcaster-channel.react.js --- a/native/community-settings/tag-farcaster-channel/tag-farcaster-channel.react.js +++ b/native/community-settings/tag-farcaster-channel/tag-farcaster-channel.react.js @@ -18,7 +18,10 @@ import type { TagFarcasterChannelNavigationProp } from './tag-farcaster-channel-navigator.react.js'; import RegistrationButton from '../../account/registration/registration-button.react.js'; import SWMansionIcon from '../../components/swmansion-icon.react.js'; -import { type NavigationRoute } from '../../navigation/route-names.js'; +import { + TagFarcasterChannelByNameRouteName, + type NavigationRoute, +} from '../../navigation/route-names.js'; import { useSelector } from '../../redux/redux-utils.js'; import { useStyles, useColors } from '../../themes/colors.js'; @@ -36,8 +39,9 @@ }; function TagFarcasterChannel(props: Props): React.Node { - const { route } = props; + const { navigation, route } = props; + const { navigate } = navigation; const { communityID } = route.params; const styles = useStyles(unboundStyles); @@ -148,11 +152,6 @@ ); }, [createCreateOrUpdateActionPromise, dispatchActionPromise]); - const channelSelectionStyles = React.useMemo( - () => [styles.sectionContainer, styles.touchableSectionContainer], - [styles.sectionContainer, styles.touchableSectionContainer], - ); - const errorMessage = React.useMemo(() => { if (!error) { return null; @@ -171,46 +170,71 @@ const buttonVariant = selectedChannel ? 'enabled' : 'disabled'; + const onPressTagChannelByName = React.useCallback(() => { + navigate<'TagFarcasterChannelByName'>({ + name: TagFarcasterChannelByNameRouteName, + params: { communityID }, + }); + }, [communityID, navigate]); + const tagFarcasterChannel = React.useMemo( () => ( - + Tag a Farcaster channel so followers can find your Comm community! FARCASTER CHANNEL - - {channelSelectionTextContent} - + + + {channelSelectionTextContent} + + + + + + - + + Can’t find a channel? + + + Tag channel by name + + + + {errorMessage} - ), [ - styles.sectionContainer, + styles.panelSectionContainer, styles.sectionText, styles.sectionHeaderText, + styles.channelSelectionContainer, + styles.editButtonContainer, + styles.tagChannelByNameLinkContainer, + styles.tagChannelByNameLink, styles.errorContainer, - channelSelectionStyles, - onPressSelectChannel, channelSelectionTextContent, + onPressSelectChannel, colors.panelForegroundSecondaryLabel, - errorMessage, onPressTag, buttonVariant, + onPressTagChannelByName, + errorMessage, ], ); @@ -218,10 +242,13 @@ } const unboundStyles = { - sectionContainer: { + panelSectionContainer: { backgroundColor: 'panelForeground', - marginBottom: 24, padding: 16, + borderBottomColor: 'panelSeparator', + borderBottomWidth: 1, + borderTopColor: 'panelSeparator', + borderTopWidth: 1, }, sectionText: { color: 'panelForegroundLabel', @@ -234,11 +261,25 @@ color: 'panelForegroundLabel', paddingHorizontal: 16, paddingBottom: 4, + marginTop: 24, }, - touchableSectionContainer: { + channelSelectionContainer: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', + marginBottom: 16, + }, + editButtonContainer: { + paddingLeft: 16, + }, + tagChannelByNameLinkContainer: { + flexDirection: 'row', + marginTop: 24, + }, + tagChannelByNameLink: { + color: 'purpleLink', + fontSize: 14, + fontWeight: '600', }, errorContainer: { height: 18,