diff --git a/native/navigation/root-navigator.react.js b/native/navigation/root-navigator.react.js --- a/native/navigation/root-navigator.react.js +++ b/native/navigation/root-navigator.react.js @@ -41,7 +41,9 @@ TermsAndPrivacyRouteName, RegistrationRouteName, InviteLinkModalRouteName, + ViewInviteLinksModalRouteName, } from './route-names.js'; +import ViewInviteLinksModal from './view-invite-links-modal.react.js'; import LoggedOutModal from '../account/logged-out-modal.react.js'; import RegistrationNavigator from '../account/registration/registration-navigator.react.js'; import TermsAndPrivacyModal from '../account/terms-and-privacy-modal.react.js'; @@ -210,6 +212,11 @@ component={InviteLinkModal} options={modalOverlayScreenOptions} /> + , + +route: NavigationRoute<'ViewInviteLinksModal'>, +}; + +const confirmCopy = () => displayActionResultModal('copied!'); + +function ViewInviteLinksModal(props: Props): React.Node { + const { community, inviteLink } = props.route.params; + const styles = useStyles(unboundStyles); + const { modalForegroundLabel } = useColors(); + const linkUrl = `https://comm.app/invite/${inviteLink.name}`; + const onPressCopy = React.useCallback(() => { + Clipboard.setString(linkUrl); + setTimeout(confirmCopy); + }, [linkUrl]); + const { uiName } = useResolvedThreadInfo(community); + return ( + + + {`Invite people to ${uiName}`} + + + PUBLIC LINK + + + {linkUrl} + + + Copy + + + + Use this public link to invite your friends into the community! + + + + + ); +} + +const unboundStyles = { + modal: { + padding: 0, + }, + header: { + paddingVertical: 16, + alignItems: 'center', + borderBottomColor: 'modalSeparator', + borderBottomWidth: 1, + flex: 0, + }, + headerText: { + fontSize: 16, + fontWeight: '500', + lineHeight: 24, + color: 'inviteLinkHeaderColor', + }, + content: { + flex: 1, + paddingTop: 24, + }, + sectionTitle: { + fontSize: 12, + fontWeight: '400', + lineHeight: 18, + color: 'modalBackgroundLabel', + paddingHorizontal: 16, + paddingBottom: 4, + }, + section: { + borderBottomColor: 'modalSeparator', + borderBottomWidth: 1, + borderTopColor: 'modalSeparator', + borderTopWidth: 1, + backgroundColor: 'modalForeground', + padding: 16, + }, + link: { + paddingHorizontal: 16, + paddingVertical: 9, + backgroundColor: 'inviteLinkButtonBackground', + borderRadius: 20, + flexDirection: 'row', + justifyContent: 'space-between', + }, + linkText: { + fontSize: 14, + fontWeight: '400', + lineHeight: 22, + color: 'inviteLinkHeaderColor', + }, + button: { + flexDirection: 'row', + alignItems: 'center', + }, + copy: { + fontSize: 12, + fontWeight: '400', + lineHeight: 18, + color: 'modalForegroundLabel', + paddingLeft: 8, + }, + details: { + fontSize: 12, + fontWeight: '400', + lineHeight: 18, + color: 'modalForegroundLabel', + paddingTop: 16, + }, +}; + +export default ViewInviteLinksModal; diff --git a/native/themes/colors.js b/native/themes/colors.js --- a/native/themes/colors.js +++ b/native/themes/colors.js @@ -95,6 +95,8 @@ messageLabel: '#0A0A0A', modalSeparator: '#CCCCCC', secondaryButtonBorder: '#FFFFFF', + inviteLinkHeaderColor: '#0A0A0A', + inviteLinkButtonBackground: '#CCCCCC', }); export type Colors = $Exact; @@ -186,6 +188,8 @@ messageLabel: '#CCCCCC', modalSeparator: '#404040', secondaryButtonBorder: '#FFFFFF', + inviteLinkHeaderColor: '#EBEBEB', + inviteLinkButtonBackground: '#404040', }); const colors = { light, dark };