From eec28ce38ad504c3b27555a256e578a2d527f12d Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 8 Apr 2020 13:47:15 +0100
Subject: [PATCH] Update styling and copy to match Figma

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 res/css/views/dialogs/_CreateRoomDialog.scss  | 22 +++++++++++++++++--
 .../views/dialogs/CreateRoomDialog.js         | 14 +++++-------
 src/i18n/strings/en_EN.json                   |  2 +-
 3 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/res/css/views/dialogs/_CreateRoomDialog.scss b/res/css/views/dialogs/_CreateRoomDialog.scss
index ac46b8e91a..6800722802 100644
--- a/res/css/views/dialogs/_CreateRoomDialog.scss
+++ b/res/css/views/dialogs/_CreateRoomDialog.scss
@@ -15,6 +15,8 @@ limitations under the License.
 */
 
 .mx_CreateRoomDialog_details {
+    margin-top: 15px;
+
     .mx_CreateRoomDialog_details_summary {
         outline: none;
         list-style: none;
@@ -71,14 +73,17 @@ limitations under the License.
 }
 
 .mx_CreateRoomDialog {
-
     &.mx_Dialog_fixedWidth {
         width: 450px;
     }
 
+    p,
+    .mx_Field_input label {
+        color: $muted-fg-color;
+    }
+
     .mx_SettingsFlag {
         display: flex;
-        margin-top: 4px;
     }
 
     .mx_SettingsFlag_label {
@@ -91,5 +96,18 @@ limitations under the License.
         flex: 0 0 auto;
         margin-left: 30px;
     }
+
+    .mx_CreateRoomDialog_topic {
+        margin-bottom: 36px;
+    }
+
+    .mx_Dialog_content > .mx_SettingsFlag {
+        margin-top: 20px;
+    }
+
+    p {
+        margin: 0 85px 0 0;
+        line-height: $font-24px;
+    }
 }
 
diff --git a/src/components/views/dialogs/CreateRoomDialog.js b/src/components/views/dialogs/CreateRoomDialog.js
index 2431a4d32f..5f723234b0 100644
--- a/src/components/views/dialogs/CreateRoomDialog.js
+++ b/src/components/views/dialogs/CreateRoomDialog.js
@@ -177,11 +177,10 @@ export default createReactClass({
         const LabelledToggleSwitch = sdk.getComponent('views.elements.LabelledToggleSwitch');
         const RoomAliasField = sdk.getComponent('views.elements.RoomAliasField');
 
-        let privateLabel;
-        let publicLabel;
+        let publicPrivateLabel;
         let aliasField;
         if (this.state.isPublic) {
-            publicLabel = (<p>{_t("Set a room alias to easily share your room with other people.")}</p>);
+            publicPrivateLabel = (<p>{_t("Set a room alias to easily share your room with other people.")}</p>);
             const domain = MatrixClientPeg.get().getDomain();
             aliasField = (
                 <div className="mx_CreateRoomDialog_aliasContainer">
@@ -189,14 +188,14 @@ export default createReactClass({
                 </div>
             );
         } else {
-            privateLabel = (<p>{_t("This room is private, and can only be joined by invitation.")}</p>);
+            publicPrivateLabel = (<p>{_t("This room is private, and can only be joined by invitation.")}</p>);
         }
 
         let e2eeSection;
         if (!this.state.isPublic && SettingsStore.isFeatureEnabled("feature_cross_signing")) {
             e2eeSection = <React.Fragment>
                 <LabelledToggleSwitch label={ _t("Enable end-to-end encryption")} onChange={this.onEncryptedChange} value={this.state.isEncrypted} />
-                { _t("Bridges and most bots will not function in end-to-end encrypted rooms.") }
+                <p>{ _t("You can’t disable this later. Bridges & most bots currently won’t work.") }</p>
             </React.Fragment>;
         }
 
@@ -208,11 +207,10 @@ export default createReactClass({
                 <form onSubmit={this.onOk} onKeyDown={this._onKeyDown}>
                     <div className="mx_Dialog_content">
                         <Field ref={ref => this._nameFieldRef = ref} label={ _t('Name') } onChange={this.onNameChange} onValidate={this.onNameValidate} value={this.state.name} className="mx_CreateRoomDialog_name" />
-                        <Field label={ _t('Topic (optional)') } onChange={this.onTopicChange} value={this.state.topic} />
+                        <Field label={ _t('Topic (optional)') } onChange={this.onTopicChange} value={this.state.topic} className="mx_CreateRoomDialog_topic" />
                         <LabelledToggleSwitch label={ _t("Make this room public")} onChange={this.onPublicChange} value={this.state.isPublic} />
+                        { publicPrivateLabel }
                         { e2eeSection }
-                        { privateLabel }
-                        { publicLabel }
                         { aliasField }
                         <details ref={this.collectDetailsRef} className="mx_CreateRoomDialog_details">
                             <summary className="mx_CreateRoomDialog_details_summary">{ this.state.detailsOpen ? _t('Hide advanced') : _t('Show advanced') }</summary>
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 2e33445821..4fbb32e241 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1556,7 +1556,7 @@
     "Set a room alias to easily share your room with other people.": "Set a room alias 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.",
     "Enable end-to-end encryption": "Enable end-to-end encryption",
-    "Bridges and most bots will not function in end-to-end encrypted rooms.": "Bridges and most bots will not function in end-to-end encrypted rooms.",
+    "You can’t disable this later. Bridges & most bots currently won’t work.": "You can’t disable this later. Bridges & most bots currently won’t work.",
     "Create a public room": "Create a public room",
     "Create a private room": "Create a private room",
     "Name": "Name",