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 };