diff --git a/native/invite-links/invite-links-navigator.react.js b/native/invite-links/invite-links-navigator.react.js --- a/native/invite-links/invite-links-navigator.react.js +++ b/native/invite-links/invite-links-navigator.react.js @@ -8,15 +8,18 @@ import * as React from 'react'; import { SafeAreaView } from 'react-native-safe-area-context'; +import ManagePublicLinkScreen from './manage-public-link-screen.react.js'; import ViewInviteLinksHeaderLeftButton from './view-invite-links-header-left-button.react.js'; import ViewInviteLinksHeaderTitle from './view-invite-links-header-title.react.js'; import ViewInviteLinksScreen from './view-invite-links-screen.react.js'; +import HeaderBackButton from '../navigation/header-back-button.react.js'; import { defaultStackScreenOptions } from '../navigation/options.js'; import type { RootNavigationProp } from '../navigation/root-navigator.react.js'; import { type InviteLinkParamList, ViewInviteLinksRouteName, type ScreenParamList, + ManagePublicLinkRouteName, } from '../navigation/route-names.js'; import { useColors, useStyles } from '../themes/colors.js'; @@ -42,6 +45,12 @@ headerBackTitleStyle: { marginLeft: 20 }, }); +const managePublicLinkOptions = { + headerTitle: 'Public Link', + headerBackTitleVisible: false, + headerLeft: HeaderBackButton, +}; + type Props = { +navigation: RootNavigationProp<'InviteLinkNavigator'>, ... @@ -68,6 +77,11 @@ component={ViewInviteLinksScreen} options={viewInviteLinksOptions} /> + ); diff --git a/native/invite-links/manage-public-link-screen.react.js b/native/invite-links/manage-public-link-screen.react.js new file mode 100644 --- /dev/null +++ b/native/invite-links/manage-public-link-screen.react.js @@ -0,0 +1,117 @@ +// @flow + +import * as React from 'react'; +import { Text, View } from 'react-native'; + +import type { ThreadInfo } from 'lib/types/thread-types.js'; + +import Button from '../components/button.react.js'; +import TextInput from '../components/text-input.react.js'; +import type { RootNavigationProp } from '../navigation/root-navigator.react.js'; +import type { NavigationRoute } from '../navigation/route-names.js'; +import { useStyles } from '../themes/colors.js'; + +export type ManagePublicLinkScreenParams = { + +community: ThreadInfo, +}; + +type Props = { + +navigation: RootNavigationProp<'ManagePublicLink'>, + +route: NavigationRoute<'ManagePublicLink'>, +}; + +// eslint-disable-next-line no-unused-vars +function ManagePublicLinkScreen(props: Props): React.Node { + const styles = useStyles(unboundStyles); + + return ( + + + + Let your community be more accessible with your own unique public + link. By enabling a public link, you are allowing anyone who has your + link to join your community.{'\n\n'} + Editing your community’s public link allows other communities to claim + your previous URL. + + + INVITE URL + + + https://comm.app/invite/ + + + + + + ); +} + +const unboundStyles = { + sectionTitle: { + fontSize: 14, + fontWeight: '400', + lineHeight: 20, + color: 'modalBackgroundLabel', + paddingHorizontal: 16, + paddingBottom: 4, + marginTop: 24, + }, + section: { + borderBottomColor: 'modalSeparator', + borderBottomWidth: 1, + borderTopColor: 'modalSeparator', + borderTopWidth: 1, + backgroundColor: 'modalForeground', + padding: 16, + }, + sectionText: { + fontSize: 14, + fontWeight: '400', + lineHeight: 22, + color: 'modalBackgroundLabel', + }, + inviteLink: { + flexDirection: 'row', + alignItems: 'center', + marginBottom: 16, + }, + inviteLinkPrefix: { + fontSize: 14, + fontWeight: '400', + lineHeight: 22, + color: 'disabledButtonText', + marginRight: 2, + }, + input: { + color: 'panelForegroundLabel', + borderColor: 'panelSecondaryForegroundBorder', + borderWidth: 1, + borderRadius: 8, + paddingVertical: 13, + paddingHorizontal: 16, + flex: 1, + }, + button: { + borderRadius: 8, + paddingVertical: 12, + paddingHorizontal: 24, + }, + buttonPrimary: { + backgroundColor: 'purpleButton', + }, + buttonText: { + color: 'whiteText', + textAlign: 'center', + fontWeight: '500', + fontSize: 16, + lineHeight: 24, + }, +}; + +export default ManagePublicLinkScreen; diff --git a/native/navigation/route-names.js b/native/navigation/route-names.js --- a/native/navigation/route-names.js +++ b/native/navigation/route-names.js @@ -27,6 +27,7 @@ import type { SubchannelListModalParams } from '../chat/subchannels-list-modal.react.js'; import type { TextMessageTooltipModalParams } from '../chat/text-message-tooltip-modal.react.js'; import type { TogglePinModalParams } from '../chat/toggle-pin-modal.react.js'; +import type { ManagePublicLinkScreenParams } from '../invite-links/manage-public-link-screen.react.js'; import type { ViewInviteLinksScreenParams } from '../invite-links/view-invite-links-screen.react.js'; import type { ChatCameraModalParams } from '../media/chat-camera-modal.react.js'; import type { ImageModalParams } from '../media/image-modal.react.js'; @@ -68,6 +69,7 @@ export const InviteLinkModalRouteName = 'InviteLinkModal'; export const InviteLinkNavigatorRouteName = 'InviteLinkNavigator'; export const LoggedOutModalRouteName = 'LoggedOutModal'; +export const ManagePublicLinkRouteName = 'ManagePublicLink'; export const MessageListRouteName = 'MessageList'; export const MessageReactionsModalRouteName = 'MessageReactionsModal'; export const MessageResultsScreenRouteName = 'MessageResultsScreen'; @@ -194,6 +196,7 @@ export type InviteLinkParamList = { +ViewInviteLinks: ViewInviteLinksScreenParams, + +ManagePublicLink: ManagePublicLinkScreenParams, }; export type ScreenParamList = {