Merge remote-tracking branch 'origin/experimental' into dbkr/sas

res/css/views/auth/_AuthBody.scss

@@ -20,4 +20,19 @@ limitations under the License.
     border-radius: 0 4px 4px 0;
     padding: 25px 60px;
     box-sizing: border-box;
+    font-size: 12px;
+    color: $authpage-body-color;
+}
+
+.mx_AuthBody a:link,
+.mx_AuthBody a:hover,
+.mx_AuthBody a:visited {
+    color: $accent-color;
+    text-decoration: none;
+}
+
+.mx_Auth_changeFlow {
+    display: block;
+    text-align: center;
+    width: 100%;
 }

res/css/views/auth/_AuthHeader.scss

@@ -15,6 +15,8 @@ limitations under the License.
 */
 
 .mx_AuthHeader {
+    display: flex;
+    flex-direction: column;
     width: 206px;
     padding: 25px 50px;
     box-sizing: border-box;

res/css/views/auth/_AuthHeaderLogo.scss

@@ -16,6 +16,7 @@ limitations under the License.
 
 .mx_AuthHeaderLogo {
     margin-top: 15px;
+    flex: 1;
 }
 
 .mx_AuthHeaderLogo img {

res/css/views/auth/_AuthPage.scss

@@ -24,9 +24,9 @@ limitations under the License.
 }
 
 .mx_AuthPage h2 {
-    font-weight: 300;
-    margin-top: 32px;
-    margin-bottom: 20px;
+    font-size: 24px;
+    font-weight: 600;
+    margin-top: 8px;
 }
 
 .mx_AuthPage_modal {

res/css/views/auth/_LanguageSelector.scss

@@ -0,0 +1,46 @@
+/*
+Copyright 2019 New Vector Ltd
+
+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.
+*/
+
+.mx_Auth_language {
+    width: 100%;
+}
+
+.mx_Auth_language .mx_Dropdown_input {
+    border: none;
+    font-size: 14px;
+    font-weight: 600;
+    color: $authpage-lang-color;
+}
+
+/* TODO: Consider using this new arrow for all dropdowns */
+.mx_Auth_language .mx_Dropdown_arrow {
+    width: 10px;
+    height: 6px;
+    border: none;
+    right: 6px;
+}
+
+.mx_Auth_language .mx_Dropdown_arrow::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    mask: url('$(res)/img/feather-icons/dropdown-arrow.svg');
+    mask-repeat: no-repeat;
+    background: $authpage-lang-color;
+}

res/css/views/dialogs/_RoomSettingsDialog.scss

@@ -0,0 +1,34 @@
+/*
+Copyright 2019 New Vector Ltd.
+
+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.
+*/
+
+// ICONS
+// ==========================================================
+
+.mx_RoomSettingsDialog_settingsIcon:before {
+  mask-image: url('$(res)/img/feather-icons/settings.svg');
+}
+
+.mx_RoomSettingsDialog_securityIcon:before {
+  mask-image: url('$(res)/img/feather-icons/lock.svg');
+}
+
+.mx_RoomSettingsDialog_rolesIcon:before {
+  mask-image: url('$(res)/img/feather-icons/users-sm.svg');
+}
+
+.mx_RoomSettingsDialog_warningIcon:before {
+  mask-image: url('$(res)/img/feather-icons/warning-triangle.svg');
+}

res/css/views/dialogs/_SettingsDialog.scss

@@ -0,0 +1,70 @@
+/*
+Copyright 2019 New Vector Ltd.
+
+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.
+*/
+
+.mx_SettingsDialog {
+  .mx_Dialog {
+    max-width: 784px; // 900px - 58px (left padding) - 58px (right padding)
+    width: 80%;
+    height: 80%;
+    border-radius: 4px;
+
+    .mx_TabbedView_tabLabels {
+      // Force the sidebar to be always visible, letting the rest of the content scroll
+      position: fixed;
+    }
+
+    .mx_TabbedView_tabPanel {
+      max-width: 485px;
+      margin-left: 206px; // 70px margin + 136px for the sidebar
+    }
+
+    .mx_SettingsDialog_header {
+      font-size: 24px;
+      display: block;
+      text-align: center;
+      color: $dialog-title-fg-color;
+      margin-top: 16px;
+      margin-bottom: 24px;
+      padding: 0;
+    }
+
+    .mx_SettingsDialog_close {
+      position: absolute;
+      top: 16px;
+      right: 25px;
+    }
+
+    .mx_SettingsDialog_closeIcon {
+      width: 16px;
+      height: 16px;
+      display: inline-block;
+    }
+
+    .mx_SettingsDialog_closeIcon:before {
+      mask: url('$(res)/img/feather-icons/cancel.svg');
+      background-color: $dialog-close-fg-color;
+      mask-repeat: no-repeat;
+      mask-size: 16px;
+      mask-position: center;
+      content: '';
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+    }
+  }
+}

res/css/views/dialogs/_UserSettingsDialog.scss

@@ -1,39 +1,18 @@
-.mx_UserSettingsDialog_header {
-  font-size: 24px;
-  display: block;
-  text-align: center;
-  color: $dialog-title-fg-color;
-  margin-top: 16px;
-  margin-bottom: 24px;
-  padding: 0;
-}
+/*
+Copyright 2019 New Vector Ltd.
 
-.mx_UserSettingsDialog_close {
-  position: absolute;
-  top: 16px;
-  right: 25px;
-}
+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
 
-.mx_UserSettingsDialog_closeIcon {
-  width: 16px;
-  height: 16px;
-  display: inline-block;
-}
-
-.mx_UserSettingsDialog_closeIcon:before {
-  mask: url('$(res)/img/feather-icons/cancel.svg');
-  background-color: $dialog-close-fg-color;
-  mask-repeat: no-repeat;
-  mask-size: 16px;
-  mask-position: center;
-  content: '';
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-}
+    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.
+*/
 
 // ICONS
 // ==========================================================
@@ -60,4 +39,8 @@
 
 .mx_UserSettingsDialog_helpIcon:before {
   mask-image: url('$(res)/img/feather-icons/help-circle.svg');
-}
+}
+
+.mx_UserSettingsDialog_labsIcon:before {
+  mask-image: url('$(res)/img/feather-icons/flag.svg');
+}

res/css/views/elements/_AccessibleButton.scss

@@ -27,10 +27,11 @@ limitations under the License.
 }
 
 .mx_AccessibleButton_hasKind {
-    padding: 10px 25px;
+    padding: 7px 18px;
     text-align: center;
     border-radius: 4px;
     display: inline-block;
+    font-size: 14px;
 }
 
 .mx_AccessibleButton_kind_primary {
@@ -42,3 +43,35 @@ limitations under the License.
     color: $button-primary-disabled-fg-color;
     background-color: $button-primary-disabled-bg-color;
 }
+
+.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_primary_sm {
+    padding: 5px 12px;
+    color: $button-primary-fg-color;
+    background-color: $button-primary-bg-color;
+}
+
+.mx_AccessibleButton_kind_primary_sm.mx_AccessibleButton_disabled {
+    color: $button-primary-disabled-fg-color;
+    background-color: $button-primary-disabled-bg-color;
+}
+
+.mx_AccessibleButton_kind_danger {
+    color: $button-danger-fg-color;
+    background-color: $button-danger-bg-color;
+}
+
+.mx_AccessibleButton_kind_danger.mx_AccessibleButton_disabled {
+    color: $button-danger-disabled-fg-color;
+    background-color: $button-danger-disabled-bg-color;
+}
+
+.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_danger_sm {
+    padding: 5px 12px;
+    color: $button-danger-fg-color;
+    background-color: $button-danger-bg-color;
+}
+
+.mx_AccessibleButton_kind_danger_sm.mx_AccessibleButton_disabled {
+    color: $button-danger-disabled-fg-color;
+    background-color: $button-danger-disabled-bg-color;
+}

res/css/views/elements/_Field.scss

@@ -24,6 +24,7 @@ limitations under the License.
 .mx_Field input,
 .mx_Field select {
     font-weight: normal;
+    font-family: $font-family;
     border-radius: 4px;
     transition: border-color 0.25s;
     border: 1px solid $input-border-color;
@@ -64,7 +65,7 @@ limitations under the License.
 
 .mx_Field input:focus + label,
 .mx_Field input:not(:placeholder-shown) + label,
-.mx_Field select:focus + label {
+.mx_Field select + label /* Always show a select's label on top to not collide with the value */ {
     transition:
         font-size 0.25s ease-out 0s,
         color 0.25s ease-out 0s,

res/css/views/elements/_ToggleSwitch.scss

@@ -0,0 +1,51 @@
+/*
+Copyright 2019 New Vector Ltd
+
+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.
+*/
+
+.mx_ToggleSwitch {
+    transition: background-color 0.20s ease-out 0.1s;
+    width: 48px;
+    height: 24px;
+    border-radius: 14px;
+    background-color: $togglesw-off-color;
+    position: relative;
+}
+
+.mx_ToggleSwitch_enabled {
+    cursor: pointer;
+}
+
+.mx_ToggleSwitch.mx_ToggleSwitch_on {
+    background-color: $togglesw-on-color;
+}
+
+.mx_ToggleSwitch_ball {
+    transition: left 0.15s ease-out 0.1s;
+    margin: 2px;
+    width: 20px;
+    height: 20px;
+    border-radius: 20px;
+    background-color: $togglesw-ball-color;
+    position: absolute;
+    top: 0;
+}
+
+.mx_ToggleSwitch:not(.mx_ToggleSwitch_on) > .mx_ToggleSwitch_ball {
+    left: 2px;
+}
+
+.mx_ToggleSwitch_on > .mx_ToggleSwitch_ball {
+    left: 23px; // 48px switch - 20px ball - 5px padding = 23px
+}

res/css/views/groups/_GroupUserSettings.scss

@@ -18,6 +18,5 @@ limitations under the License.
     height: 200px;
     border: 1px solid $primary-hairline-color;
     border-radius: 3px;
-    margin-right: 32px;
     overflow: hidden;
 }

res/css/views/settings/_EmailAddresses.scss

@@ -0,0 +1,43 @@
+/*
+Copyright 2019 New Vector Ltd
+
+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.
+*/
+
+.mx_ExistingEmailAddress {
+  margin-bottom: 5px;
+}
+
+.mx_ExistingEmailAddress_delete {
+  margin-right: 5px;
+  cursor: pointer;
+  vertical-align: middle;
+}
+
+.mx_ExistingEmailAddress_email {
+  vertical-align: middle;
+}
+
+.mx_ExistingEmailAddress_promptText {
+  margin-right: 10px;
+}
+
+.mx_ExistingEmailAddress_confirmBtn {
+  margin-right: 5px;
+}
+
+.mx_EmailAddresses_new .mx_Field input {
+  // Use 100% of the space available for the input, but don't let the 10px
+  // padding on either side of the input to push it out of alignment.
+  width: calc(100% - 20px);
+}

res/css/views/settings/_PhoneNumbers.scss

@@ -0,0 +1,56 @@
+/*
+Copyright 2019 New Vector Ltd
+
+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.
+*/
+
+.mx_ExistingPhoneNumber {
+  margin-bottom: 5px;
+}
+
+.mx_ExistingPhoneNumber_delete {
+  margin-right: 5px;
+  cursor: pointer;
+  vertical-align: middle;
+}
+
+.mx_ExistingPhoneNumber_address {
+  vertical-align: middle;
+}
+
+.mx_ExistingPhoneNumber_promptText {
+  margin-right: 10px;
+}
+
+.mx_ExistingPhoneNumber_confirmBtn {
+  margin-right: 5px;
+}
+
+.mx_PhoneNumbers_new .mx_Field input {
+  // Use 100% of the space available for the input, but don't let the 10px
+  // padding on either side of the input to push it out of alignment.
+  width: calc(100% - 20px);
+}
+
+.mx_PhoneNumbers_input {
+  display: flex;
+  align-items: center;
+}
+
+.mx_PhoneNumbers_input > .mx_Field {
+  flex-grow: 1;
+}
+
+.mx_PhoneNumbers_country {
+  width: 80px;
+}

res/css/views/settings/_ProfileSettings.scss

@@ -0,0 +1,107 @@
+/*
+Copyright 2019 New Vector Ltd
+
+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.
+*/
+
+.mx_ProfileSettings_profile {
+  display: flex;
+}
+
+.mx_ProfileSettings_controls {
+  flex-grow: 1;
+}
+
+.mx_ProfileSettings_controls .mx_Field #profileDisplayName {
+  width: calc(100% - 20px); // subtract 10px padding on left and right
+}
+
+.mx_ProfileSettings_avatar {
+  width: 88px;
+  height: 88px;
+  margin-left: 13px;
+  position: relative;
+  cursor: pointer;
+}
+
+.mx_ProfileSettings_avatar > * {
+  display: block;
+  width: 88px;
+  height: 88px;
+  border-radius: 4px;
+}
+
+.mx_ProfileSettings_avatar .mx_ProfileSettings_avatarPlaceholder {
+  background-color: $settings-profile-placeholder-bg-color;
+}
+
+.mx_ProfileSettings_avatarOverlay {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: none;
+  text-align: center;
+  vertical-align: middle;
+  font-size: 10px;
+}
+
+.mx_ProfileSettings_avatar:hover .mx_ProfileSettings_avatarOverlay {
+  display: inline-block;
+  opacity: 0.5 !important;
+  color: $settings-profile-overlay-fg-color !important;
+  background-color: $settings-profile-overlay-bg-color !important;
+}
+
+.mx_ProfileSettings_avatarOverlay_show {
+  display: inline-block;
+  opacity: 1;
+  color: $settings-profile-overlay-placeholder-fg-color;
+  background-color: $settings-profile-overlay-placeholder-bg-color;
+}
+
+.mx_ProfileSettings_avatarOverlayText {
+  display: block;
+  margin-top: 17px;
+  margin-bottom: 8px;
+}
+
+.mx_ProfileSettings_avatarOverlayImgContainer {
+  position: relative;
+  width: 14px;
+  height: 14px;
+  margin: auto;
+}
+
+.mx_ProfileSettings_avatarOverlayImg:before {
+  background-color: $settings-profile-overlay-placeholder-fg-color;
+  mask: url("$(res)/img/feather-icons/upload.svg");
+  mask-repeat: no-repeat;
+  mask-size: 14px;
+  mask-position: center;
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.mx_ProfileSettings_avatar:hover .mx_ProfileSettings_avatarOverlayImg:before {
+  background-color: $settings-profile-overlay-fg-color !important;
+}
+
+.mx_ProfileSettings_avatarUpload {
+  display: none;
+}

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

@@ -1,25 +1,46 @@
-.mx_GeneralSettingsTab_profile {
-  display: flex;
+/*
+Copyright 2019 New Vector Ltd
+
+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.
+*/
+
+.mx_GeneralSettingsTab_changePassword,
+.mx_GeneralSettingsTab_themeSection {
+  display: block;
 }
 
-.mx_GeneralSettingsTab_profileControls {
-  flex-grow: 1;
+.mx_GeneralSettingsTab_changePassword .mx_Field,
+.mx_GeneralSettingsTab_themeSection .mx_Field {
+  display: block;
+  margin-right: 100px; // Align with the other fields on the page
 }
 
-.mx_GeneralSettingsTab_profileControls .mx_Field #profileDisplayName {
+.mx_GeneralSettingsTab_changePassword .mx_Field input {
+  display: block;
   width: calc(100% - 20px); // subtract 10px padding on left and right
 }
 
-.mx_GeneralSettingsTab_profileAvatar {
-  width: 88px;
-  height: 88px;
-  margin-left: 13px;
+.mx_GeneralSettingsTab_changePassword .mx_Field:first-child {
+  margin-top: 0;
 }
 
-.mx_GeneralSettingsTab_profileAvatar div {
+.mx_GeneralSettingsTab_themeSection .mx_Field select {
   display: block;
-  width: 88px;
-  height: 88px;
-  border-radius: 4px;
-  background-color: #ccc;
+  width: 100%;
+}
+
+.mx_GeneralSettingsTab_accountSection > .mx_EmailAddresses,
+.mx_GeneralSettingsTab_accountSection > .mx_PhoneNumbers,
+.mx_GeneralSettingsTab_languageInput {
+  margin-right: 100px; // Align with the other fields on the page
 }

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

@@ -0,0 +1,24 @@
+/*
+Copyright 2019 New Vector Ltd
+
+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.
+*/
+
+.mx_HelpSettingsTab_debugButton {
+  margin-bottom: 5px;
+  margin-top: 5px;
+}
+
+.mx_HelpSettingsTab span.mx_AccessibleButton {
+  word-break: break-word;
+}

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

@@ -0,0 +1,27 @@
+/*
+Copyright 2019 New Vector Ltd
+
+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.
+*/
+
+.mx_PreferencesSettingsTab .mx_Field {
+  margin-right: 100px; // Align with the rest of the controls
+}
+
+.mx_PreferencesSettingsTab .mx_Field input {
+  display: block;
+
+  // Subtract 10px padding on left and right
+  // This is to keep the input aligned with the rest of the tab's controls.
+  width: calc(100% - 20px);
+}

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

@@ -0,0 +1,53 @@
+/*
+Copyright 2019 New Vector Ltd
+
+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.
+*/
+
+.mx_SecuritySettingsTab .mx_DevicesPanel {
+  // Normally the panel is 880px, however this can easily overflow the container.
+  // TODO: Fix the table to not be squishy
+  width: auto;
+  max-width: 880px;
+}
+
+.mx_SecuritySettingsTab_deviceInfo {
+  display: table;
+  padding-left: 0;
+}
+
+.mx_SecuritySettingsTab_deviceInfo > li {
+  display: table-row;
+}
+
+.mx_SecuritySettingsTab_deviceInfo > li > label,
+.mx_SecuritySettingsTab_deviceInfo > li > span {
+  display: table-cell;
+  padding-right: 1em;
+}
+
+.mx_SecuritySettingsTab_importExportButtons .mx_AccessibleButton {
+  margin-right: 10px;
+}
+
+.mx_SecuritySettingsTab_importExportButtons {
+  margin-bottom: 15px;
+}
+
+.mx_SecuritySettingsTab_ignoredUser {
+  margin-bottom: 5px;
+}
+
+.mx_SecuritySettingsTab_ignoredUser .mx_AccessibleButton {
+  margin-right: 10px;
+}

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

@@ -1,3 +1,19 @@
+/*
+Copyright 2019 New Vector Ltd
+
+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.
+*/
+
 .mx_SettingsTab_heading {
   font-size: 20px;
   font-weight: 600;
@@ -10,8 +26,37 @@
   font-family: $font-family-semibold;
   color: $primary-fg-color;
   margin-bottom: 10px;
+  margin-top: 12px;
 }
 
-.mx_SettingsTab_section {
-  margin-top: 10px;
+.mx_SettingsTab_subsectionText {
+  color: $settings-subsection-fg-color;
+  font-size: 12px;
+  padding-bottom: 12px;
+  display: block;
+  margin: 0 100px 0 0; // Align with the rest of the view
 }
+
+.mx_SettingsTab_section .mx_SettingsFlag {
+  margin-right: 100px;
+  height: 25px;
+  margin-bottom: 10px;
+}
+
+.mx_SettingsTab_section .mx_SettingsFlag .mx_SettingsFlag_label {
+  vertical-align: bottom;
+  display: inline-block;
+  font-size: 12px;
+  color: $primary-fg-color;
+  max-width: calc(100% - 48px); // Force word wrap instead of colliding with the switch
+}
+
+.mx_SettingsTab_section .mx_SettingsFlag .mx_ToggleSwitch {
+  float: right;
+}
+
+.mx_SettingsTab_linkBtn {
+  cursor: pointer;
+  color: $accent-color;
+  word-break: break-all;
+}

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

@@ -0,0 +1,28 @@
+/*
+Copyright 2019 New Vector Ltd
+
+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.
+*/
+
+.mx_VoiceSettingsTab .mx_Field select {
+  width: 100%;
+  max-width: 100%;
+}
+
+.mx_VoiceSettingsTab .mx_Field {
+  margin-right: 100px; // align with the rest of the fields
+}
+
+.mx_VoiceSettingsTab_missingMediaPermissions {
+  margin-bottom: 15px;
+}