Rename components to match prior convention

res/css/_components.scss

@@ -61,7 +61,9 @@
 @import "./views/dialogs/_BugReportDialog.scss";
 @import "./views/dialogs/_ChangelogDialog.scss";
 @import "./views/dialogs/_ChatCreateOrReuseChatDialog.scss";
+@import "./views/dialogs/_CommunityPrototypeInviteDialog.scss";
 @import "./views/dialogs/_ConfirmUserActionDialog.scss";
+@import "./views/dialogs/_CreateCommunityPrototypeDialog.scss";
 @import "./views/dialogs/_CreateGroupDialog.scss";
 @import "./views/dialogs/_CreateRoomDialog.scss";
 @import "./views/dialogs/_DeactivateAccountDialog.scss";
@@ -72,8 +74,6 @@
 @import "./views/dialogs/_KeyboardShortcutsDialog.scss";
 @import "./views/dialogs/_MessageEditHistoryDialog.scss";
 @import "./views/dialogs/_NewSessionReviewDialog.scss";
-@import "./views/dialogs/_PrototypeCommunityInviteDialog.scss";
-@import "./views/dialogs/_PrototypeCreateGroupDialog.scss";
 @import "./views/dialogs/_RoomSettingsDialog.scss";
 @import "./views/dialogs/_RoomSettingsDialogBridges.scss";
 @import "./views/dialogs/_RoomUpgradeDialog.scss";

res/css/views/dialogs/_CommunityPrototypeInviteDialog.scss

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_PrototypeCommunityInviteDialog {
+.mx_CommunityPrototypeInviteDialog {
     &.mx_Dialog_fixedWidth {
         width: 360px;
     }
@@ -22,7 +22,7 @@ limitations under the License.
     .mx_Dialog_content {
         margin-bottom: 0;
 
-        .mx_PrototypeCommunityInviteDialog_people {
+        .mx_CommunityPrototypeInviteDialog_people {
             position: relative;
             margin-bottom: 4px;
 
@@ -36,11 +36,11 @@ limitations under the License.
             }
         }
 
-        .mx_PrototypeCommunityInviteDialog_morePeople {
+        .mx_CommunityPrototypeInviteDialog_morePeople {
             margin-top: 8px;
         }
 
-        .mx_PrototypeCommunityInviteDialog_person {
+        .mx_CommunityPrototypeInviteDialog_person {
             position: relative;
             margin-top: 4px;
 
@@ -55,21 +55,21 @@ limitations under the License.
                 width: 16px; // to force a square
             }
 
-            .mx_PrototypeCommunityInviteDialog_personIdentifiers {
+            .mx_CommunityPrototypeInviteDialog_personIdentifiers {
                 display: inline-block;
 
                 & > * {
                     display: block;
                 }
 
-                .mx_PrototypeCommunityInviteDialog_personName {
+                .mx_CommunityPrototypeInviteDialog_personName {
                     font-weight: 600;
                     font-size: $font-14px;
                     color: $primary-fg-color;
                     margin-left: 7px;
                 }
 
-                .mx_PrototypeCommunityInviteDialog_personId {
+                .mx_CommunityPrototypeInviteDialog_personId {
                     font-size: $font-12px;
                     color: $muted-fg-color;
                     margin-left: 7px;
@@ -77,7 +77,7 @@ limitations under the License.
             }
         }
 
-        .mx_PrototypeCommunityInviteDialog_primaryButton {
+        .mx_CommunityPrototypeInviteDialog_primaryButton {
             display: block;
             font-size: $font-13px;
             line-height: 20px;

res/css/views/dialogs/_CreateCommunityPrototypeDialog.scss

@@ -14,13 +14,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_PrototypeCreateGroupDialog {
+.mx_CreateCommunityPrototypeDialog {
     .mx_Dialog_content {
         display: flex;
         flex-direction: row;
         margin-bottom: 12px;
 
-        .mx_PrototypeCreateGroupDialog_colName {
+        .mx_CreateCommunityPrototypeDialog_colName {
             flex-basis: 66.66%;
             padding-right: 100px;
 
@@ -29,7 +29,7 @@ limitations under the License.
                 line-height: $font-20px;
             }
 
-            .mx_PrototypeCreateGroupDialog_subtext {
+            .mx_CreateCommunityPrototypeDialog_subtext {
                 display: block;
                 color: $muted-fg-color;
                 margin-bottom: 16px;
@@ -38,12 +38,12 @@ limitations under the License.
                     margin-top: 16px;
                 }
 
-                &.mx_PrototypeCreateGroupDialog_subtext_error {
+                &.mx_CreateCommunityPrototypeDialog_subtext_error {
                     color: $warning-color;
                 }
             }
 
-            .mx_PrototypeCreateGroupDialog_communityId {
+            .mx_CreateCommunityPrototypeDialog_communityId {
                 position: relative;
 
                 .mx_InfoTooltip {
@@ -59,21 +59,21 @@ limitations under the License.
             }
         }
 
-        .mx_PrototypeCreateGroupDialog_colAvatar {
+        .mx_CreateCommunityPrototypeDialog_colAvatar {
             flex-basis: 33.33%;
 
-            .mx_PrototypeCreateGroupDialog_avatarContainer {
+            .mx_CreateCommunityPrototypeDialog_avatarContainer {
                 margin-top: 12px;
                 margin-bottom: 20px;
 
-                .mx_PrototypeCreateGroupDialog_avatar,
+                .mx_CreateCommunityPrototypeDialog_avatar,
-                .mx_PrototypeCreateGroupDialog_placeholderAvatar {
+                .mx_CreateCommunityPrototypeDialog_placeholderAvatar {
                     width: 96px;
                     height: 96px;
                     border-radius: 96px;
                 }
 
-                .mx_PrototypeCreateGroupDialog_placeholderAvatar {
+                .mx_CreateCommunityPrototypeDialog_placeholderAvatar {
                     background-color: #368bd6; // hardcoded for both themes
 
                     &::before {
@@ -91,7 +91,7 @@ limitations under the License.
                 }
             }
 
-            .mx_PrototypeCreateGroupDialog_tip {
+            .mx_CreateCommunityPrototypeDialog_tip {
                 & > b, & > span {
                     display: block;
                     color: $muted-fg-color;

src/RoomInvite.js

@@ -23,7 +23,7 @@ import Modal from './Modal';
 import * as sdk from './';
 import { _t } from './languageHandler';
 import {KIND_DM, KIND_INVITE} from "./components/views/dialogs/InviteDialog";
-import PrototypeCommunityInviteDialog from "./components/views/dialogs/PrototypeCommunityInviteDialog";
+import CommunityPrototypeInviteDialog from "./components/views/dialogs/CommunityPrototypeInviteDialog";
 
 /**
  * Invites multiple addresses to a room
@@ -59,7 +59,7 @@ export function showRoomInviteDialog(roomId) {
 
 export function showCommunityRoomInviteDialog(roomId, communityName) {
     Modal.createTrackedDialog(
-        'Invite Users to Community', '', PrototypeCommunityInviteDialog, {communityName, roomId},
+        'Invite Users to Community', '', CommunityPrototypeInviteDialog, {communityName, roomId},
         /*className=*/null, /*isPriority=*/false, /*isStatic=*/true,
     );
 }

src/components/structures/MatrixChat.tsx

@@ -77,7 +77,7 @@ import ErrorDialog from "../views/dialogs/ErrorDialog";
 import { RoomNotificationStateStore } from "../../stores/notifications/RoomNotificationStateStore";
 import { SettingLevel } from "../../settings/SettingLevel";
 import { leaveRoomBehaviour } from "../../utils/membership";
-import PrototypeCreateGroupDialog from "../views/dialogs/PrototypeCreateGroupDialog";
+import CreateCommunityPrototypeDialog from "../views/dialogs/CreateCommunityPrototypeDialog";
 
 /** constants for MatrixChat.state.view */
 export enum Views {
@@ -623,7 +623,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
             case 'view_create_group': {
                 let CreateGroupDialog = sdk.getComponent("dialogs.CreateGroupDialog")
                 if (SettingsStore.getValue("feature_communities_v2_prototypes")) {
-                    CreateGroupDialog = PrototypeCreateGroupDialog;
+                    CreateGroupDialog = CreateCommunityPrototypeDialog;
                 }
                 Modal.createTrackedDialog('Create Community', '', CreateGroupDialog);
                 break;

src/components/views/dialogs/CommunityPrototypeInviteDialog.tsx

@@ -56,7 +56,7 @@ interface IState {
     busy: boolean;
 }
 
-export default class PrototypeCommunityInviteDialog extends React.PureComponent<IProps, IState> {
+export default class CommunityPrototypeInviteDialog extends React.PureComponent<IProps, IState> {
     constructor(props: IProps) {
         super(props);
 
@@ -145,7 +145,7 @@ export default class PrototypeCommunityInviteDialog extends React.PureComponent<
     private renderPerson(person: IPerson, key: any) {
         const avatarSize = 36;
         return (
-            <div className="mx_PrototypeCommunityInviteDialog_person" key={key}>
+            <div className="mx_CommunityPrototypeInviteDialog_person" key={key}>
                 <BaseAvatar
                     url={getHttpUriForMxc(
                         MatrixClientPeg.get().getHomeserverUrl(), person.user.getMxcAvatarUrl(),
@@ -155,9 +155,9 @@ export default class PrototypeCommunityInviteDialog extends React.PureComponent<
                     width={avatarSize}
                     height={avatarSize}
                 />
-                <div className="mx_PrototypeCommunityInviteDialog_personIdentifiers">
+                <div className="mx_CommunityPrototypeInviteDialog_personIdentifiers">
-                    <span className="mx_PrototypeCommunityInviteDialog_personName">{person.user.name}</span>
+                    <span className="mx_CommunityPrototypeInviteDialog_personName">{person.user.name}</span>
-                    <span className="mx_PrototypeCommunityInviteDialog_personId">{person.userId}</span>
+                    <span className="mx_CommunityPrototypeInviteDialog_personId">{person.userId}</span>
                 </div>
                 <StyledCheckbox onChange={(e) => this.setPersonToggle(person, e.target.checked)} />
             </div>
@@ -206,14 +206,14 @@ export default class PrototypeCommunityInviteDialog extends React.PureComponent<
                     <AccessibleButton
                         onClick={this.onShowMorePeople}
                         kind="link" key="more"
-                        className="mx_PrototypeCommunityInviteDialog_morePeople"
+                        className="mx_CommunityPrototypeInviteDialog_morePeople"
                     >{_t("Show more")}</AccessibleButton>
                 );
             }
         }
         if (this.state.people.length > 0) {
             peopleIntro = (
-                <div className="mx_PrototypeCommunityInviteDialog_people">
+                <div className="mx_CommunityPrototypeInviteDialog_people">
                     <span>{_t("People you know on %(brand)s", {brand: SdkConfig.get().brand})}</span>
                     <AccessibleButton onClick={this.onShowPeopleClick}>
                         {this.state.showPeople ? _t("Hide") : _t("Show")}
@@ -230,7 +230,7 @@ export default class PrototypeCommunityInviteDialog extends React.PureComponent<
 
         return (
             <BaseDialog
-                className="mx_PrototypeCommunityInviteDialog"
+                className="mx_CommunityPrototypeInviteDialog"
                 onFinished={this.props.onFinished}
                 title={_t("Invite people to join %(communityName)s", {communityName: this.props.communityName})}
             >
@@ -242,7 +242,7 @@ export default class PrototypeCommunityInviteDialog extends React.PureComponent<
                         <AccessibleButton
                             kind="primary" onClick={this.onSubmit}
                             disabled={this.state.busy}
-                            className="mx_PrototypeCommunityInviteDialog_primaryButton"
+                            className="mx_CommunityPrototypeInviteDialog_primaryButton"
                         >{buttonText}</AccessibleButton>
                     </div>
                 </form>

src/components/views/dialogs/CreateCommunityPrototypeDialog.tsx

@@ -37,7 +37,7 @@ interface IState {
     avatarPreview: string;
 }
 
-export default class PrototypeCreateGroupDialog extends React.PureComponent<IProps, IState> {
+export default class CreateCommunityPrototypeDialog extends React.PureComponent<IProps, IState> {
     private avatarUploadRef: React.RefObject<HTMLInputElement> = React.createRef();
 
     constructor(props: IProps) {
@@ -138,7 +138,7 @@ export default class PrototypeCreateGroupDialog extends React.PureComponent<IPro
         let communityId = null;
         if (this.state.localpart) {
             communityId = (
-                <span className="mx_PrototypeCreateGroupDialog_communityId">
+                <span className="mx_CreateCommunityPrototypeDialog_communityId">
                     {_t("Community ID: +<localpart />:%(domain)s", {
                         domain: MatrixClientPeg.getHomeserverName(),
                     }, {
@@ -155,32 +155,32 @@ export default class PrototypeCreateGroupDialog extends React.PureComponent<IPro
         }
 
         let helpText = (
-            <span className="mx_PrototypeCreateGroupDialog_subtext">
+            <span className="mx_CreateCommunityPrototypeDialog_subtext">
                 {_t("You can change this later if needed.")}
             </span>
         );
         if (this.state.error) {
             helpText = (
-                <span className="mx_PrototypeCreateGroupDialog_subtext mx_PrototypeCreateGroupDialog_subtext_error">
+                <span className="mx_CreateCommunityPrototypeDialog_subtext mx_CreateCommunityPrototypeDialog_subtext_error">
                     {this.state.error}
                 </span>
             );
         }
 
-        let preview = <img src={this.state.avatarPreview} className="mx_PrototypeCreateGroupDialog_avatar" />;
+        let preview = <img src={this.state.avatarPreview} className="mx_CreateCommunityPrototypeDialog_avatar" />;
         if (!this.state.avatarPreview) {
-            preview = <div className="mx_PrototypeCreateGroupDialog_placeholderAvatar" />
+            preview = <div className="mx_CreateCommunityPrototypeDialog_placeholderAvatar" />
         }
 
         return (
             <BaseDialog
-                className="mx_PrototypeCreateGroupDialog"
+                className="mx_CreateCommunityPrototypeDialog"
                 onFinished={this.props.onFinished}
                 title={_t("What's the name of your community or team?")}
             >
                 <form onSubmit={this.onSubmit}>
                     <div className="mx_Dialog_content">
-                        <div className="mx_PrototypeCreateGroupDialog_colName">
+                        <div className="mx_CreateCommunityPrototypeDialog_colName">
                             <Field
                                 value={this.state.name}
                                 onChange={this.onNameChange}
@@ -188,7 +188,7 @@ export default class PrototypeCreateGroupDialog extends React.PureComponent<IPro
                                 label={_t("Enter name")}
                             />
                             {helpText}
-                            <span className="mx_PrototypeCreateGroupDialog_subtext">
+                            <span className="mx_CreateCommunityPrototypeDialog_subtext">
                                 {/*nbsp is to reserve the height of this element when there's nothing*/}
                                 &nbsp;{communityId}
                             </span>
@@ -196,16 +196,16 @@ export default class PrototypeCreateGroupDialog extends React.PureComponent<IPro
                                 {_t("Create")}
                             </AccessibleButton>
                         </div>
-                        <div className="mx_PrototypeCreateGroupDialog_colAvatar">
+                        <div className="mx_CreateCommunityPrototypeDialog_colAvatar">
                             <input
                                 type="file" style={{display: "none"}}
                                 ref={this.avatarUploadRef} accept="image/*"
                                 onChange={this.onAvatarChanged}
                             />
-                            <AccessibleButton onClick={this.onChangeAvatar} className="mx_PrototypeCreateGroupDialog_avatarContainer">
+                            <AccessibleButton onClick={this.onChangeAvatar} className="mx_CreateCommunityPrototypeDialog_avatarContainer">
                                 {preview}
                             </AccessibleButton>
-                            <div className="mx_PrototypeCreateGroupDialog_tip">
+                            <div className="mx_CreateCommunityPrototypeDialog_tip">
                                 <b>{_t("Add image (optional)")}</b>
                                 <span>
                                     {_t("An image will help people identify your community.")}

src/i18n/strings/en_EN.json

@@ -1598,6 +1598,15 @@
     "Unable to load commit detail: %(msg)s": "Unable to load commit detail: %(msg)s",
     "Unavailable": "Unavailable",
     "Changelog": "Changelog",
+    "Email address": "Email address",
+    "Add another email": "Add another email",
+    "People you know on %(brand)s": "People you know on %(brand)s",
+    "Hide": "Hide",
+    "Show": "Show",
+    "Skip": "Skip",
+    "Send %(count)s invites|other": "Send %(count)s invites",
+    "Send %(count)s invites|one": "Send %(count)s invite",
+    "Invite people to join %(communityName)s": "Invite people to join %(communityName)s",
     "You cannot delete this message. (%(code)s)": "You cannot delete this message. (%(code)s)",
     "Removing…": "Removing…",
     "Destroy cross-signing keys?": "Destroy cross-signing keys?",
@@ -1608,6 +1617,15 @@
     "Clear all data in this session?": "Clear all data in this session?",
     "Clearing all data from this session is permanent. Encrypted messages will be lost unless their keys have been backed up.": "Clearing all data from this session is permanent. Encrypted messages will be lost unless their keys have been backed up.",
     "Clear all data": "Clear all data",
+    "There was an error creating your community. The name may be taken or the server is unable to process your request.": "There was an error creating your community. The name may be taken or the server is unable to process your request.",
+    "Community ID: +<localpart />:%(domain)s": "Community ID: +<localpart />:%(domain)s",
+    "Use this when referencing your community to others. The community ID cannot be changed.": "Use this when referencing your community to others. The community ID cannot be changed.",
+    "You can change this later if needed.": "You can change this later if needed.",
+    "What's the name of your community or team?": "What's the name of your community or team?",
+    "Enter name": "Enter name",
+    "Create": "Create",
+    "Add image (optional)": "Add image (optional)",
+    "An image will help people identify your community.": "An image will help people identify your community.",
     "Community IDs cannot be empty.": "Community IDs cannot be empty.",
     "Community IDs may only contain characters a-z, 0-9, or '=_-./'": "Community IDs may only contain characters a-z, 0-9, or '=_-./'",
     "Something went wrong whilst creating your community": "Something went wrong whilst creating your community",
@@ -1616,7 +1634,6 @@
     "Example": "Example",
     "Community ID": "Community ID",
     "example": "example",
-    "Create": "Create",
     "Please enter a name for the room": "Please enter a name for the room",
     "Set a room address to easily share your room with other people.": "Set a room address to easily share your room with other people.",
     "This room is private, and can only be joined by invitation.": "This room is private, and can only be joined by invitation.",
@@ -1729,23 +1746,6 @@
     "Use this session to verify your new one, granting it access to encrypted messages:": "Use this session to verify your new one, granting it access to encrypted messages:",
     "If you didn’t sign in to this session, your account may be compromised.": "If you didn’t sign in to this session, your account may be compromised.",
     "This wasn't me": "This wasn't me",
-    "Email address": "Email address",
-    "Add another email": "Add another email",
-    "People you know on %(brand)s": "People you know on %(brand)s",
-    "Hide": "Hide",
-    "Show": "Show",
-    "Skip": "Skip",
-    "Send %(count)s invites|other": "Send %(count)s invites",
-    "Send %(count)s invites|one": "Send %(count)s invite",
-    "Invite people to join %(communityName)s": "Invite people to join %(communityName)s",
-    "There was an error creating your community. The name may be taken or the server is unable to process your request.": "There was an error creating your community. The name may be taken or the server is unable to process your request.",
-    "Community ID: +<localpart />:%(domain)s": "Community ID: +<localpart />:%(domain)s",
-    "Use this when referencing your community to others. The community ID cannot be changed.": "Use this when referencing your community to others. The community ID cannot be changed.",
-    "You can change this later if needed.": "You can change this later if needed.",
-    "What's the name of your community or team?": "What's the name of your community or team?",
-    "Enter name": "Enter name",
-    "Add image (optional)": "Add image (optional)",
-    "An image will help people identify your community.": "An image will help people identify your community.",
     "If you run into any bugs or have feedback you'd like to share, please let us know on GitHub.": "If you run into any bugs or have feedback you'd like to share, please let us know on GitHub.",
     "To help avoid duplicate issues, please <existingIssuesLink>view existing issues</existingIssuesLink> first (and add a +1) or <newIssueLink>create a new issue</newIssueLink> if you can't find it.": "To help avoid duplicate issues, please <existingIssuesLink>view existing issues</existingIssuesLink> first (and add a +1) or <newIssueLink>create a new issue</newIssueLink> if you can't find it.",
     "Report bugs & give feedback": "Report bugs & give feedback",