From e84e4ed5f5804639493d04ddb695ebd9adcca18c Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Fri, 3 Nov 2017 15:38:12 +0000
Subject: [PATCH 1/2] Add CSS classes to group ID input in CreateGroupDialog

---
 src/components/views/dialogs/CreateGroupDialog.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/views/dialogs/CreateGroupDialog.js b/src/components/views/dialogs/CreateGroupDialog.js
index 12f419ddd6..38d61cfc11 100644
--- a/src/components/views/dialogs/CreateGroupDialog.js
+++ b/src/components/views/dialogs/CreateGroupDialog.js
@@ -137,16 +137,18 @@ export default React.createClass({
                             <div className="mx_CreateGroupDialog_label">
                                 <label htmlFor="groupid">{ _t('Community ID') }</label>
                             </div>
-                            <div>
-                                <span>+</span>
-                                <input id="groupid" className="mx_CreateGroupDialog_input"
+                            <div className="mx_CreateGroupDialog_input_group">
+                                <span className="mx_CreateGroupDialog_input_prefix">+</span>
+                                <input id="groupid" className="mx_CreateGroupDialog_input has_prefix has_suffix"
                                     size="32"
                                     placeholder={_t('example')}
                                     onChange={this._onGroupIdChange}
                                     onBlur={this._onGroupIdBlur}
                                     value={this.state.groupId}
                                 />
-                                <span>:{ MatrixClientPeg.get().getDomain() }</span>
+                                <span className="mx_CreateGroupDialog_input_suffix">
+                                    :{ MatrixClientPeg.get().getDomain() }
+                                </span>
                             </div>
                         </div>
                         <div className="error">

From b88c13d5274b878db07a9177f6a6bba5d9fda29c Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Fri, 3 Nov 2017 16:02:41 +0000
Subject: [PATCH 2/2] Use prefixed class names to avoid collisions with other
 libraries

---
 src/components/views/dialogs/CreateGroupDialog.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/views/dialogs/CreateGroupDialog.js b/src/components/views/dialogs/CreateGroupDialog.js
index 38d61cfc11..e1dfe388d6 100644
--- a/src/components/views/dialogs/CreateGroupDialog.js
+++ b/src/components/views/dialogs/CreateGroupDialog.js
@@ -138,15 +138,16 @@ export default React.createClass({
                                 <label htmlFor="groupid">{ _t('Community ID') }</label>
                             </div>
                             <div className="mx_CreateGroupDialog_input_group">
-                                <span className="mx_CreateGroupDialog_input_prefix">+</span>
-                                <input id="groupid" className="mx_CreateGroupDialog_input has_prefix has_suffix"
+                                <span className="mx_CreateGroupDialog_prefix">+</span>
+                                <input id="groupid"
+                                    className="mx_CreateGroupDialog_input mx_CreateGroupDialog_input_hasPrefixAndSuffix"
                                     size="32"
                                     placeholder={_t('example')}
                                     onChange={this._onGroupIdChange}
                                     onBlur={this._onGroupIdBlur}
                                     value={this.state.groupId}
                                 />
-                                <span className="mx_CreateGroupDialog_input_suffix">
+                                <span className="mx_CreateGroupDialog_suffix">
                                     :{ MatrixClientPeg.get().getDomain() }
                                 </span>
                             </div>