Merge pull request #4221 from matrix-org/bwindels/aliaslipstick

Fix: make alternative addresses UX less confusing

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;
 }
+

res/css/views/room_settings/_AliasSettings.scss

@@ -27,6 +27,20 @@ limitations under the License.
     box-shadow: none;
 }
 
-.mx_AliasSettings summary {
-    cursor: pointer;
+.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;
+        }
+    }
+
+    .mx_AliasSettings_localAliasHeader {
+        margin-top: 35px;
+    }
 }

res/css/views/settings/tabs/_SettingsTab.scss

@@ -47,11 +47,15 @@ limitations under the License.
 
 .mx_SettingsTab_section {
     margin-bottom: 24px;
-}
 
-.mx_SettingsTab_section .mx_SettingsFlag {
-    margin-right: 100px;
-    margin-bottom: 10px;
+    .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 {