From 26f62039852260912cbe99f4ff6712a0f55b12db Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Mon, 16 Mar 2020 17:27:06 +0100
Subject: [PATCH 01/10] move room publish toggle below canonical alias

also to own component to not contaminate alias settings too much
with this
---
 .../views/room_settings/AliasSettings.js      |  2 +
 .../views/room_settings/RoomPublishSetting.js | 60 +++++++++++++++++++
 .../tabs/room/GeneralRoomSettingsTab.js       | 31 ----------
 3 files changed, 62 insertions(+), 31 deletions(-)
 create mode 100644 src/components/views/room_settings/RoomPublishSetting.js

diff --git a/src/components/views/room_settings/AliasSettings.js b/src/components/views/room_settings/AliasSettings.js
index eab41c5ccd..57dfa16ada 100644
--- a/src/components/views/room_settings/AliasSettings.js
+++ b/src/components/views/room_settings/AliasSettings.js
@@ -25,6 +25,7 @@ import Field from "../elements/Field";
 import ErrorDialog from "../dialogs/ErrorDialog";
 import AccessibleButton from "../elements/AccessibleButton";
 import Modal from "../../../Modal";
+import RoomPublishSetting from "./RoomPublishSetting";
 
 class EditableAliasesList extends EditableItemList {
     constructor(props) {
@@ -356,6 +357,7 @@ export default class AliasSettings extends React.Component {
         return (
             <div className='mx_AliasSettings'>
                 {canonicalAliasSection}
+                <RoomPublishSetting roomId={this.props.roomId} canSetCanonicalAlias={this.props.canSetCanonicalAlias} />
                 <datalist id="mx_AliasSettings_altRecommendations">
                     {this._getLocalNonAltAliases().map(alias => {
                         return <option value={alias} key={alias} />;
diff --git a/src/components/views/room_settings/RoomPublishSetting.js b/src/components/views/room_settings/RoomPublishSetting.js
new file mode 100644
index 0000000000..bac2dfc656
--- /dev/null
+++ b/src/components/views/room_settings/RoomPublishSetting.js
@@ -0,0 +1,60 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import LabelledToggleSwitch from "../elements/LabelledToggleSwitch";
+import {_t} from "../../../languageHandler";
+import {MatrixClientPeg} from "../../../MatrixClientPeg";
+
+export default class RoomPublishSetting extends React.PureComponent {
+    constructor(props) {
+        super(props);
+        this.state = {isRoomPublished: false};
+    }
+
+    onRoomPublishChange = (e) => {
+        const valueBefore = this.state.isRoomPublished;
+        const newValue = !valueBefore;
+        this.setState({isRoomPublished: newValue});
+        const client = MatrixClientPeg.get();
+
+        client.setRoomDirectoryVisibility(
+            this.props.roomId,
+            newValue ? 'public' : 'private',
+        ).catch(() => {
+            // Roll back the local echo on the change
+            this.setState({isRoomPublished: valueBefore});
+        });
+    };
+
+    componentDidMount() {
+        const client = MatrixClientPeg.get();
+        client.getRoomDirectoryVisibility(this.props.roomId).then((result => {
+            this.setState({isRoomPublished: result.visibility === 'public'});
+        }));
+    }
+
+    render() {
+        const client = MatrixClientPeg.get();
+
+        return (<LabelledToggleSwitch value={this.state.isRoomPublished}
+            onChange={this.onRoomPublishChange}
+            disabled={!this.props.canSetCanonicalAlias}
+            label={_t("Publish this room to the public in %(domain)s's room directory?", {
+              domain: client.getDomain(),
+            })} />);
+    }
+}
diff --git a/src/components/views/settings/tabs/room/GeneralRoomSettingsTab.js b/src/components/views/settings/tabs/room/GeneralRoomSettingsTab.js
index b65f8d49a4..5aface4f3b 100644
--- a/src/components/views/settings/tabs/room/GeneralRoomSettingsTab.js
+++ b/src/components/views/settings/tabs/room/GeneralRoomSettingsTab.js
@@ -21,7 +21,6 @@ import RoomProfileSettings from "../../../room_settings/RoomProfileSettings";
 import * as sdk from "../../../../..";
 import AccessibleButton from "../../../elements/AccessibleButton";
 import dis from "../../../../../dispatcher";
-import LabelledToggleSwitch from "../../../elements/LabelledToggleSwitch";
 import MatrixClientContext from "../../../../../contexts/MatrixClientContext";
 
 export default class GeneralRoomSettingsTab extends React.Component {
@@ -39,26 +38,6 @@ export default class GeneralRoomSettingsTab extends React.Component {
         };
     }
 
-    componentWillMount() {
-        this.context.getRoomDirectoryVisibility(this.props.roomId).then((result => {
-            this.setState({isRoomPublished: result.visibility === 'public'});
-        }));
-    }
-
-    onRoomPublishChange = (e) => {
-        const valueBefore = this.state.isRoomPublished;
-        const newValue = !valueBefore;
-        this.setState({isRoomPublished: newValue});
-
-        this.context.setRoomDirectoryVisibility(
-            this.props.roomId,
-            newValue ? 'public' : 'private',
-        ).catch(() => {
-            // Roll back the local echo on the change
-            this.setState({isRoomPublished: valueBefore});
-        });
-    };
-
     _onLeaveClick = () => {
         dis.dispatch({
             action: 'leave_room',
@@ -75,7 +54,6 @@ export default class GeneralRoomSettingsTab extends React.Component {
         const room = client.getRoom(this.props.roomId);
 
         const canSetAliases = true; // Previously, we arbitrarily only allowed admins to do this
-        const canActuallySetAliases = room.currentState.mayClientSendStateEvent("m.room.aliases", client);
         const canSetCanonical = room.currentState.mayClientSendStateEvent("m.room.canonical_alias", client);
         const canonicalAliasEv = room.currentState.getStateEvents("m.room.canonical_alias", '');
         const aliasEvents = room.currentState.getStateEvents("m.room.aliases");
@@ -96,15 +74,6 @@ export default class GeneralRoomSettingsTab extends React.Component {
                                    canSetCanonicalAlias={canSetCanonical} canSetAliases={canSetAliases}
                                    canonicalAliasEvent={canonicalAliasEv} aliasEvents={aliasEvents} />
                 </div>
-                <div className='mx_SettingsTab_section'>
-                    <LabelledToggleSwitch value={this.state.isRoomPublished}
-                                          onChange={this.onRoomPublishChange}
-                                          disabled={!canActuallySetAliases}
-                                          label={_t("Publish this room to the public in %(domain)s's room directory?", {
-                                              domain: client.getDomain(),
-                                          })} />
-                </div>
-
                 <span className='mx_SettingsTab_subheading'>{_t("Flair")}</span>
                 <div className='mx_SettingsTab_section mx_SettingsTab_subsectionText'>
                     <RelatedGroupSettings roomId={room.roomId}

From 31cb257eb9e4f793dfd7cfec3f5e9f8523cbb88d Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Mon, 16 Mar 2020 17:28:45 +0100
Subject: [PATCH 02/10] add headers and copy to lessen confusion of new alias
 workings

---
 src/components/views/room_settings/AliasSettings.js    |  9 +++++++--
 .../views/settings/tabs/room/GeneralRoomSettingsTab.js |  3 ++-
 src/i18n/strings/en_EN.json                            | 10 +++++++---
 3 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/components/views/room_settings/AliasSettings.js b/src/components/views/room_settings/AliasSettings.js
index 57dfa16ada..34e07e31dc 100644
--- a/src/components/views/room_settings/AliasSettings.js
+++ b/src/components/views/room_settings/AliasSettings.js
@@ -356,6 +356,9 @@ export default class AliasSettings extends React.Component {
 
         return (
             <div className='mx_AliasSettings'>
+                <span className='mx_SettingsTab_subheading'>{_t("Published Addresses")}</span>
+                <p>{_t("Published addresses can be used by anyone on any server to join your room. " +
+                    "To publish an address it needs to be set as a local address first.")}</p>
                 {canonicalAliasSection}
                 <RoomPublishSetting roomId={this.props.roomId} canSetCanonicalAlias={this.props.canSetCanonicalAlias} />
                 <datalist id="mx_AliasSettings_altRecommendations">
@@ -374,12 +377,14 @@ export default class AliasSettings extends React.Component {
                     onItemAdded={this.onAltAliasAdded}
                     onItemRemoved={this.onAltAliasDeleted}
                     suggestionsListId="mx_AliasSettings_altRecommendations"
-                    itemsLabel={_t('Alternative addresses for this room:')}
-                    noItemsLabel={_t('This room has no alternative addresses')}
+                    itemsLabel={_t('Other published addresses:')}
+                    noItemsLabel={_t('No other published addresses yet, add one below')}
                     placeholder={_t(
                         'New address (e.g. #foo:domain)',
                     )}
                 />
+                <span className='mx_SettingsTab_subheading'>{_t("Local Addresses")}</span>
+                <p>{_t("Set addresses for this room so users can find this room through your homeserver (%(localDomain)s)", {localDomain})}</p>
                 <details onToggle={this.onLocalAliasesToggled}>
                     <summary>{_t('Local addresses (unmoderated content)')}</summary>
                     {localAliasesList}
diff --git a/src/components/views/settings/tabs/room/GeneralRoomSettingsTab.js b/src/components/views/settings/tabs/room/GeneralRoomSettingsTab.js
index 5aface4f3b..99882ae400 100644
--- a/src/components/views/settings/tabs/room/GeneralRoomSettingsTab.js
+++ b/src/components/views/settings/tabs/room/GeneralRoomSettingsTab.js
@@ -68,12 +68,13 @@ export default class GeneralRoomSettingsTab extends React.Component {
                     <RoomProfileSettings roomId={this.props.roomId} />
                 </div>
 
-                <span className='mx_SettingsTab_subheading'>{_t("Room Addresses")}</span>
+                <div className="mx_SettingsTab_heading">{_t("Room Addresses")}</div>
                 <div className='mx_SettingsTab_section mx_SettingsTab_subsectionText'>
                     <AliasSettings roomId={this.props.roomId}
                                    canSetCanonicalAlias={canSetCanonical} canSetAliases={canSetAliases}
                                    canonicalAliasEvent={canonicalAliasEv} aliasEvents={aliasEvents} />
                 </div>
+                <div className="mx_SettingsTab_heading">{_t("Other")}</div>
                 <span className='mx_SettingsTab_subheading'>{_t("Flair")}</span>
                 <div className='mx_SettingsTab_section mx_SettingsTab_subsectionText'>
                     <RelatedGroupSettings roomId={room.roomId}
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 5f3ead1490..547b7e64cf 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -840,7 +840,6 @@
     "This room isn’t bridging messages to any platforms. <a>Learn more.</a>": "This room isn’t bridging messages to any platforms. <a>Learn more.</a>",
     "Bridges": "Bridges",
     "Room Addresses": "Room Addresses",
-    "Publish this room to the public in %(domain)s's room directory?": "Publish this room to the public in %(domain)s's room directory?",
     "URL Previews": "URL Previews",
     "Uploaded sound": "Uploaded sound",
     "Sounds": "Sounds",
@@ -1164,9 +1163,13 @@
     "not specified": "not specified",
     "This room has no local addresses": "This room has no local addresses",
     "New address (e.g. #foo:%(localDomain)s)": "New address (e.g. #foo:%(localDomain)s)",
-    "Alternative addresses for this room:": "Alternative addresses for this room:",
-    "This room has no alternative addresses": "This room has no alternative addresses",
+    "Published Addresses": "Published Addresses",
+    "Published addresses can be used by anyone on any server to join your room. To publish an address it needs to be set as a local address first.": "Published addresses can be used by anyone on any server to join your room. To publish an address it needs to be set as a local address first.",
+    "Other published addresses:": "Other published addresses:",
+    "No other published addresses yet, add one below": "No other published addresses yet, add one below",
     "New address (e.g. #foo:domain)": "New address (e.g. #foo:domain)",
+    "Local Addresses": "Local Addresses",
+    "Set addresses for this room so users can find this room through your homeserver (%(localDomain)s)": "Set addresses for this room so users can find this room through your homeserver (%(localDomain)s)",
     "Local addresses (unmoderated content)": "Local addresses (unmoderated content)",
     "Error updating flair": "Error updating flair",
     "There was an error updating the flair for this room. The server may not allow it or a temporary error occurred.": "There was an error updating the flair for this room. The server may not allow it or a temporary error occurred.",
@@ -1178,6 +1181,7 @@
     "Room Name": "Room Name",
     "Room Topic": "Room Topic",
     "Room avatar": "Room avatar",
+    "Publish this room to the public in %(domain)s's room directory?": "Publish this room to the public in %(domain)s's room directory?",
     "You have <a>enabled</a> URL previews by default.": "You have <a>enabled</a> URL previews by default.",
     "You have <a>disabled</a> URL previews by default.": "You have <a>disabled</a> URL previews by default.",
     "URL previews are enabled by default for participants in this room.": "URL previews are enabled by default for participants in this room.",

From f7eecc09212d3b6550ce61983c4323665ee6fa14 Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Mon, 16 Mar 2020 17:29:15 +0100
Subject: [PATCH 03/10] avoid double margin-right for toggle

---
 res/css/views/settings/tabs/_SettingsTab.scss | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/res/css/views/settings/tabs/_SettingsTab.scss b/res/css/views/settings/tabs/_SettingsTab.scss
index 9727946893..64d6f04711 100644
--- a/res/css/views/settings/tabs/_SettingsTab.scss
+++ b/res/css/views/settings/tabs/_SettingsTab.scss
@@ -49,9 +49,15 @@ limitations under the License.
     margin-bottom: 24px;
 }
 
-.mx_SettingsTab_section .mx_SettingsFlag {
-    margin-right: 100px;
-    margin-bottom: 10px;
+.mx_SettingsTab_section {
+    .mx_SettingsFlag {
+        margin-right: 100px;
+        margin-bottom: 10px;
+    }
+
+    &.mx_SettingsTab_subsectionText .mx_SettingsFlag {
+        margin-right: 0px !important;
+    }
 }
 
 .mx_SettingsTab_section .mx_SettingsFlag .mx_SettingsFlag_label {

From db10fcd2b7e936c892f8c24d7fa37edc22d68b6f Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Mon, 16 Mar 2020 17:29:35 +0100
Subject: [PATCH 04/10] make editable list look like something closer to design

---
 res/css/views/elements/_EditableItemList.scss    | 16 +++++++++++++++-
 .../views/elements/EditableItemList.js           |  3 +--
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/res/css/views/elements/_EditableItemList.scss b/res/css/views/elements/_EditableItemList.scss
index 51fa4c4423..ef60f006cc 100644
--- a/res/css/views/elements/_EditableItemList.scss
+++ b/res/css/views/elements/_EditableItemList.scss
@@ -20,14 +20,21 @@ limitations under the License.
 }
 
 .mx_EditableItem {
+    display: flex;
     margin-bottom: 5px;
-    margin-left: 15px;
 }
 
 .mx_EditableItem_delete {
+    order: 3;
     margin-right: 5px;
     cursor: pointer;
     vertical-align: middle;
+    width: 14px;
+    height: 14px;
+    mask-image: url('$(res)/img/feather-customised/cancel.svg');
+    mask-repeat: no-repeat;
+    background-color: $warning-color;
+    mask-size: 100%;
 }
 
 .mx_EditableItem_email {
@@ -36,12 +43,19 @@ limitations under the License.
 
 .mx_EditableItem_promptText {
     margin-right: 10px;
+    order: 2;
 }
 
 .mx_EditableItem_confirmBtn {
     margin-right: 5px;
 }
 
+.mx_EditableItem_item {
+    flex: auto 1 0;
+    order: 1;
+}
+
 .mx_EditableItemList_label {
     margin-bottom: 5px;
 }
+
diff --git a/src/components/views/elements/EditableItemList.js b/src/components/views/elements/EditableItemList.js
index ae3473ef0d..6e649e777a 100644
--- a/src/components/views/elements/EditableItemList.js
+++ b/src/components/views/elements/EditableItemList.js
@@ -78,8 +78,7 @@ export class EditableItem extends React.Component {
 
         return (
             <div className="mx_EditableItem">
-                <img src={require("../../../../res/img/feather-customised/cancel.svg")} width={14} height={14}
-                     onClick={this._onRemove} className="mx_EditableItem_delete" alt={_t("Remove")} />
+                <div onClick={this._onRemove} className="mx_EditableItem_delete" title={_t("Remove")} role="button" />
                 <span className="mx_EditableItem_item">{this.props.value}</span>
             </div>
         );

From 78fb95aa9e1e88251a16a723e38ffadb07f82d76 Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Mon, 16 Mar 2020 18:24:49 +0100
Subject: [PATCH 05/10] change <details> appearance for local aliases

---
 res/css/views/room_settings/_AliasSettings.scss     | 8 ++++++++
 src/components/views/room_settings/AliasSettings.js | 4 +++-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/res/css/views/room_settings/_AliasSettings.scss b/res/css/views/room_settings/_AliasSettings.scss
index 294902a1f0..8ae3acbbd3 100644
--- a/res/css/views/room_settings/_AliasSettings.scss
+++ b/res/css/views/room_settings/_AliasSettings.scss
@@ -29,4 +29,12 @@ limitations under the License.
 
 .mx_AliasSettings summary {
     cursor: pointer;
+    color: $accent-color;
+    font-weight: 600;
+    list-style: none;
+
+    // list-style doesn't do it for webkit
+    &::-webkit-details-marker {
+        display: none;
+    }
 }
diff --git a/src/components/views/room_settings/AliasSettings.js b/src/components/views/room_settings/AliasSettings.js
index 34e07e31dc..e8fc700d50 100644
--- a/src/components/views/room_settings/AliasSettings.js
+++ b/src/components/views/room_settings/AliasSettings.js
@@ -98,6 +98,7 @@ export default class AliasSettings extends React.Component {
             canonicalAlias: null, // #canonical:domain.tld
             updatingCanonicalAlias: false,
             localAliasesLoading: false,
+            detailsOpen: false,
         };
 
         if (props.canonicalAliasEvent) {
@@ -268,6 +269,7 @@ export default class AliasSettings extends React.Component {
                 this.loadLocalAliases();
             }
         }
+        this.setState({detailsOpen: event.target.open});
     };
 
     onCanonicalAliasChange = (event) => {
@@ -386,7 +388,7 @@ export default class AliasSettings extends React.Component {
                 <span className='mx_SettingsTab_subheading'>{_t("Local Addresses")}</span>
                 <p>{_t("Set addresses for this room so users can find this room through your homeserver (%(localDomain)s)", {localDomain})}</p>
                 <details onToggle={this.onLocalAliasesToggled}>
-                    <summary>{_t('Local addresses (unmoderated content)')}</summary>
+                    <summary>{ this.state.detailsOpen ? _t('Show less') : _t("Show more")}</summary>
                     {localAliasesList}
                 </details>
             </div>

From d6ddc5096ff806dfa64022bb393e3c6ff80a34e0 Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Mon, 16 Mar 2020 18:25:13 +0100
Subject: [PATCH 06/10] tweak labels, etc

---
 src/components/views/room_settings/AliasSettings.js | 8 ++------
 src/i18n/strings/en_EN.json                         | 5 ++---
 2 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/src/components/views/room_settings/AliasSettings.js b/src/components/views/room_settings/AliasSettings.js
index e8fc700d50..84e2120e1a 100644
--- a/src/components/views/room_settings/AliasSettings.js
+++ b/src/components/views/room_settings/AliasSettings.js
@@ -349,9 +349,7 @@ export default class AliasSettings extends React.Component {
                 onItemAdded={this.onLocalAliasAdded}
                 onItemRemoved={this.onLocalAliasDeleted}
                 noItemsLabel={_t('This room has no local addresses')}
-                placeholder={_t(
-                    'New address (e.g. #foo:%(localDomain)s)', {localDomain: localDomain},
-                )}
+                placeholder={_t('Local address')}
                 domain={localDomain}
             />);
         }
@@ -381,9 +379,7 @@ export default class AliasSettings extends React.Component {
                     suggestionsListId="mx_AliasSettings_altRecommendations"
                     itemsLabel={_t('Other published addresses:')}
                     noItemsLabel={_t('No other published addresses yet, add one below')}
-                    placeholder={_t(
-                        'New address (e.g. #foo:domain)',
-                    )}
+                    placeholder={_t('New published address (e.g. #alias:server)')}
                 />
                 <span className='mx_SettingsTab_subheading'>{_t("Local Addresses")}</span>
                 <p>{_t("Set addresses for this room so users can find this room through your homeserver (%(localDomain)s)", {localDomain})}</p>
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 547b7e64cf..f2272b294a 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1162,15 +1162,14 @@
     "Main address": "Main address",
     "not specified": "not specified",
     "This room has no local addresses": "This room has no local addresses",
-    "New address (e.g. #foo:%(localDomain)s)": "New address (e.g. #foo:%(localDomain)s)",
+    "Local address": "Local address",
     "Published Addresses": "Published Addresses",
     "Published addresses can be used by anyone on any server to join your room. To publish an address it needs to be set as a local address first.": "Published addresses can be used by anyone on any server to join your room. To publish an address it needs to be set as a local address first.",
     "Other published addresses:": "Other published addresses:",
     "No other published addresses yet, add one below": "No other published addresses yet, add one below",
-    "New address (e.g. #foo:domain)": "New address (e.g. #foo:domain)",
+    "New published address (e.g. #alias:server)": "New published address (e.g. #alias:server)",
     "Local Addresses": "Local Addresses",
     "Set addresses for this room so users can find this room through your homeserver (%(localDomain)s)": "Set addresses for this room so users can find this room through your homeserver (%(localDomain)s)",
-    "Local addresses (unmoderated content)": "Local addresses (unmoderated content)",
     "Error updating flair": "Error updating flair",
     "There was an error updating the flair for this room. The server may not allow it or a temporary error occurred.": "There was an error updating the flair for this room. The server may not allow it or a temporary error occurred.",
     "Invalid community ID": "Invalid community ID",

From 3253d0b93dc8a61a9a1b230ae441dfa83aeda4ab Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Mon, 16 Mar 2020 18:30:40 +0100
Subject: [PATCH 07/10] more margin between published and local addresses

---
 .../views/room_settings/_AliasSettings.scss   | 22 ++++++++++++-------
 .../views/room_settings/AliasSettings.js      |  2 +-
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/res/css/views/room_settings/_AliasSettings.scss b/res/css/views/room_settings/_AliasSettings.scss
index 8ae3acbbd3..f8d92e7828 100644
--- a/res/css/views/room_settings/_AliasSettings.scss
+++ b/res/css/views/room_settings/_AliasSettings.scss
@@ -27,14 +27,20 @@ limitations under the License.
     box-shadow: none;
 }
 
-.mx_AliasSettings summary {
-    cursor: pointer;
-    color: $accent-color;
-    font-weight: 600;
-    list-style: none;
+.mx_AliasSettings {
+    summary {
+        cursor: pointer;
+        color: $accent-color;
+        font-weight: 600;
+        list-style: none;
 
-    // list-style doesn't do it for webkit
-    &::-webkit-details-marker {
-        display: none;
+        // list-style doesn't do it for webkit
+        &::-webkit-details-marker {
+            display: none;
+        }
+    }
+
+    .mx_AliasSettings_localAliasHeader {
+        margin-top: 35px;
     }
 }
diff --git a/src/components/views/room_settings/AliasSettings.js b/src/components/views/room_settings/AliasSettings.js
index 84e2120e1a..ae9b085375 100644
--- a/src/components/views/room_settings/AliasSettings.js
+++ b/src/components/views/room_settings/AliasSettings.js
@@ -381,7 +381,7 @@ export default class AliasSettings extends React.Component {
                     noItemsLabel={_t('No other published addresses yet, add one below')}
                     placeholder={_t('New published address (e.g. #alias:server)')}
                 />
-                <span className='mx_SettingsTab_subheading'>{_t("Local Addresses")}</span>
+                <span className='mx_SettingsTab_subheading mx_AliasSettings_localAliasHeader'>{_t("Local Addresses")}</span>
                 <p>{_t("Set addresses for this room so users can find this room through your homeserver (%(localDomain)s)", {localDomain})}</p>
                 <details onToggle={this.onLocalAliasesToggled}>
                     <summary>{ this.state.detailsOpen ? _t('Show less') : _t("Show more")}</summary>

From 351398ada98dab4f7fabdf27b2efee93c2cb6e55 Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Mon, 16 Mar 2020 18:34:09 +0100
Subject: [PATCH 08/10] fix style lint

---
 res/css/views/settings/tabs/_SettingsTab.scss | 2 --
 1 file changed, 2 deletions(-)

diff --git a/res/css/views/settings/tabs/_SettingsTab.scss b/res/css/views/settings/tabs/_SettingsTab.scss
index 64d6f04711..01a1d94956 100644
--- a/res/css/views/settings/tabs/_SettingsTab.scss
+++ b/res/css/views/settings/tabs/_SettingsTab.scss
@@ -47,9 +47,7 @@ limitations under the License.
 
 .mx_SettingsTab_section {
     margin-bottom: 24px;
-}
 
-.mx_SettingsTab_section {
     .mx_SettingsFlag {
         margin-right: 100px;
         margin-bottom: 10px;

From 1f4e92885bcb9ebb88589385e43d12d884058dd6 Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Tue, 17 Mar 2020 10:43:01 +0000
Subject: [PATCH 09/10] Update
 src/components/views/room_settings/AliasSettings.js

Co-Authored-By: J. Ryan Stinnett <jryans@gmail.com>
---
 src/components/views/room_settings/AliasSettings.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/room_settings/AliasSettings.js b/src/components/views/room_settings/AliasSettings.js
index ae9b085375..f8e2151c4f 100644
--- a/src/components/views/room_settings/AliasSettings.js
+++ b/src/components/views/room_settings/AliasSettings.js
@@ -358,7 +358,7 @@ export default class AliasSettings extends React.Component {
             <div className='mx_AliasSettings'>
                 <span className='mx_SettingsTab_subheading'>{_t("Published Addresses")}</span>
                 <p>{_t("Published addresses can be used by anyone on any server to join your room. " +
-                    "To publish an address it needs to be set as a local address first.")}</p>
+                    "To publish an address, it needs to be set as a local address first.")}</p>
                 {canonicalAliasSection}
                 <RoomPublishSetting roomId={this.props.roomId} canSetCanonicalAlias={this.props.canSetCanonicalAlias} />
                 <datalist id="mx_AliasSettings_altRecommendations">

From 010661249b355b2b8b85abec48fe147dcd9c1ddd Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Tue, 17 Mar 2020 11:47:56 +0100
Subject: [PATCH 10/10] run i18n

---
 src/i18n/strings/en_EN.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index f2272b294a..a7d0887c32 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1164,7 +1164,7 @@
     "This room has no local addresses": "This room has no local addresses",
     "Local address": "Local address",
     "Published Addresses": "Published Addresses",
-    "Published addresses can be used by anyone on any server to join your room. To publish an address it needs to be set as a local address first.": "Published addresses can be used by anyone on any server to join your room. To publish an address it needs to be set as a local address first.",
+    "Published addresses can be used by anyone on any server to join your room. To publish an address, it needs to be set as a local address first.": "Published addresses can be used by anyone on any server to join your room. To publish an address, it needs to be set as a local address first.",
     "Other published addresses:": "Other published addresses:",
     "No other published addresses yet, add one below": "No other published addresses yet, add one below",
     "New published address (e.g. #alias:server)": "New published address (e.g. #alias:server)",