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 @@ -6,8 +6,13 @@ 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 TextInput from '../components/text-input.react.js'; import { type NavigationRoute } from '../navigation/route-names.js'; import { useColors, useStyles } from '../themes/colors.js'; @@ -28,6 +33,8 @@ /> ); + const [pendingCommunityName, setPendingCommunityName] = React.useState(''); + const containerPaddingOverride = React.useMemo(() => ({ padding: 0 }), []); return ( @@ -40,6 +47,19 @@ icon={cloudIcon} /> + + + Name + + + ); @@ -60,6 +80,28 @@ fontSize: 14, marginRight: 6, }, + 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 @@ -136,6 +136,7 @@ messageLabel: designSystemColors.shadesBlack100, modalSeparator: designSystemColors.shadesWhite60, secondaryButtonBorder: designSystemColors.shadesWhite100, + textInputPlaceholder: designSystemColors.shadesBlack60, }); export type Colors = $Exact; @@ -228,6 +229,7 @@ messageLabel: designSystemColors.shadesWhite60, modalSeparator: designSystemColors.shadesBlack80, secondaryButtonBorder: designSystemColors.shadesWhite100, + textInputPlaceholder: designSystemColors.shadesWhite60, }); const colors = { light, dark };