diff --git a/native/community-creation/community-configuration.react.js b/native/community-creation/community-configuration.react.js --- a/native/community-creation/community-configuration.react.js +++ b/native/community-creation/community-configuration.react.js @@ -2,20 +2,19 @@ import * as React from 'react'; import { Text, View } from 'react-native'; -import { Text, View } from 'react-native'; import type { CommunityCreationNavigationProp } from './community-creation-navigator.react.js'; import RegistrationContainer from '../account/registration/registration-container.react.js'; import RegistrationContentContainer from '../account/registration/registration-content-container.react.js'; +import { + ThreadSettingsCategoryFooter, + ThreadSettingsCategoryHeader, +} from '../chat/settings/thread-settings-category.react.js'; import CommIcon from '../components/comm-icon.react.js'; import Pill from '../components/pill.react.js'; -import RegistrationContainer from '../account/registration/registration-container.react.js'; -import RegistrationContentContainer from '../account/registration/registration-content-container.react.js'; -import CommIcon from '../components/comm-icon.react.js'; -import Pill from '../components/pill.react.js'; +import TextInput from '../components/text-input.react.js'; import { type NavigationRoute } from '../navigation/route-names.js'; import { useColors, useStyles } from '../themes/colors.js'; -import { useColors, useStyles } from '../themes/colors.js'; type Props = { +navigation: CommunityCreationNavigationProp<'CommunityConfiguration'>, @@ -34,6 +33,8 @@ /> ); + const [pendingCommunityName, setPendingCommunityName] = React.useState(''); + return ( @@ -45,6 +46,19 @@ icon={cloudIcon} /> + + + Name + + + ); @@ -68,6 +82,28 @@ containerPaddingOverride: { padding: 0, }, + communityNameRow: { + backgroundColor: 'panelForeground', + flexDirection: 'row', + paddingHorizontal: 24, + paddingVertical: 8, + }, + communityNameLabel: { + color: 'panelForegroundTertiaryLabel', + fontSize: 16, + width: 96, + }, + communityNamePendingValue: { + color: 'panelForegroundSecondaryLabel', + flex: 1, + fontFamily: 'Arial', + fontSize: 16, + margin: 0, + paddingLeft: 4, + paddingRight: 0, + paddingVertical: 0, + borderBottomColor: 'transparent', + }, }; export default CommunityConfiguration; diff --git a/native/themes/colors.js b/native/themes/colors.js --- a/native/themes/colors.js +++ b/native/themes/colors.js @@ -141,6 +141,7 @@ secondaryButtonBorder: designSystemColors.shadesWhite100, inviteLinkLinkColor: designSystemColors.shadesBlack100, inviteLinkButtonBackground: designSystemColors.shadesWhite60, + textInputPlaceholder: designSystemColors.shadesBlack60, }); export type Colors = $Exact; @@ -238,6 +239,7 @@ secondaryButtonBorder: designSystemColors.shadesWhite100, inviteLinkLinkColor: designSystemColors.shadesWhite80, inviteLinkButtonBackground: designSystemColors.shadesBlack80, + textInputPlaceholder: designSystemColors.shadesWhite60, }); const colors = { light, dark };