diff --git a/web/modals/threads/create/steps/subchannel-settings.react.js b/web/modals/threads/create/steps/subchannel-settings.react.js --- a/web/modals/threads/create/steps/subchannel-settings.react.js +++ b/web/modals/threads/create/steps/subchannel-settings.react.js @@ -31,7 +31,9 @@ const announcementStatements = [ { - statement: 'Admins can create Announcement channels.', + statement: + 'Only admins and other admin-appointed roles can send ' + + 'messages in an announcement channel.', isStatementValid: true, styleStatementBasedOnValidity: false, }, diff --git a/web/sidebar/community-creation/community-creation-modal.css b/web/sidebar/community-creation/community-creation-modal.css --- a/web/sidebar/community-creation/community-creation-modal.css +++ b/web/sidebar/community-creation/community-creation-modal.css @@ -1,7 +1,86 @@ -div.modal_body { +div.modalBody { display: flex; flex-direction: column; - width: 383px; - height: 560px; overflow: hidden; } + +div.ancestryContainer { + display: flex; + justify-content: center; + align-items: center; + height: 40px; + background-color: var(--community-creation-ancestry-bg); + margin-top: 20px; +} + +div.ancestryContainer p { + color: var(--community-creation-ancestry-text); +} + +div.avatarContainer { + display: flex; + justify-content: center; + padding-top: 20px; +} + +.formContainer { + display: flex; + flex-direction: column; + padding: 20px; +} + +div.formTitle { + padding-top: 6px; + font-size: 14px; + font-weight: 600; + vertical-align: top; + color: var(--fg); +} + +div.formContent { + display: flex; + font-family: var(--font-stack); + color: var(--fg); + margin-top: 8px; + margin-bottom: 12px; +} + +div.formContent textarea { + padding: 12px; + background: var(--modal-bg); + color: var(--fg); + border: 1px solid var(--border-color); + font-size: var(--m-font-16); + border-radius: 4px; + width: 100%; + resize: vertical; + min-height: 20px; +} + +div.formNotice { + color: var(--community-creation-form-notice); + font-size: 10px; + text-align: center; +} + +hr { + margin: 20px 0; + height: 0; + border: none; + border-top: #ffffff33 solid 1px; +} + +div.optionalSettingsContainer { + color: var(--enum-option-icon-color); +} + +div.optionalSettingsLabel { + color: var(--compose-subchannel-label-color); + padding-bottom: 20px; +} + +div.createCommunityButtonContainer { + display: flex; + flex-direction: column; + margin-top: 20px; +} diff --git a/web/sidebar/community-creation/community-creation-modal.react.js b/web/sidebar/community-creation/community-creation-modal.react.js --- a/web/sidebar/community-creation/community-creation-modal.react.js +++ b/web/sidebar/community-creation/community-creation-modal.react.js @@ -5,18 +5,100 @@ import { useModalContext } from 'lib/components/modal-provider.react.js'; import css from './community-creation-modal.css'; +import CommIcon from '../../CommIcon.react.js'; +import Button from '../../components/button.react.js'; +import EnumSettingsOption from '../../components/enum-settings-option.react.js'; +import UserAvatar from '../../components/user-avatar.react.js'; +import Input from '../../modals/input.react.js'; import Modal from '../../modals/modal.react.js'; +const announcementStatements = [ + { + statement: + `This option sets the community's root channel to an ` + + `announcement channel. Only admins and other admin-appointed ` + + `roles can send messages in an announcement channel.`, + isStatementValid: true, + styleStatementBasedOnValidity: false, + }, +]; + function CommunityCreationModal(): React.Node { const modalContext = useModalContext(); + const [pendingCommunityName, setPendingCommunityName] = + React.useState(''); + + const onChangePendingCommunityName = React.useCallback( + (event: SyntheticEvent) => + setPendingCommunityName(event.currentTarget.value), + [], + ); + + const [announcementSetting, setAnnouncementSetting] = React.useState(false); + const onAnnouncementSelected = React.useCallback(() => { + setAnnouncementSetting(!announcementSetting); + }, [announcementSetting]); + + const megaphoneIcon = React.useMemo( + () => , + [], + ); + + const avatarNodeEnabled = false; + let avatarNode; + if (avatarNodeEnabled) { + avatarNode = ( +
+ +
+ ); + } + return ( -
+
+
+

within

+
+ {avatarNode} +
+
+
Community Name
+
+ +
+
+
+ You may edit your community's image and name later. +
+
+
+
Optional settings
+ +
+
+ +
+
+
); } diff --git a/web/theme.css b/web/theme.css --- a/web/theme.css +++ b/web/theme.css @@ -89,6 +89,9 @@ --unread-bg: var(--error-primary); --settings-btn-bg: var(--violet-dark-100); --community-creation-btn-bg: var(--shades-black-80); + --community-creation-ancestry-bg: var(--shades-black-80); + --community-creation-ancestry-text: var(--shades-black-60); + --community-creation-form-notice: var(--shades-white-60); --modal-bg: var(--shades-black-90); --modal-fg: var(--shades-white-60); --join-bg: var(--shades-black-90);