Make the Keyboard Shortcuts dialog into a settings tab (#7198)

res/css/_components.scss

@@ -95,7 +95,6 @@
 @import "./views/dialogs/_IncomingSasDialog.scss";
 @import "./views/dialogs/_InviteDialog.scss";
 @import "./views/dialogs/_JoinRuleDropdown.scss";
-@import "./views/dialogs/_KeyboardShortcutsDialog.scss";
 @import "./views/dialogs/_LeaveSpaceDialog.scss";
 @import "./views/dialogs/_LocationViewDialog.scss";
 @import "./views/dialogs/_ManageRestrictedJoinRuleDialog.scss";
@@ -286,6 +285,7 @@
 @import "./views/settings/tabs/user/_AppearanceUserSettingsTab.scss";
 @import "./views/settings/tabs/user/_GeneralUserSettingsTab.scss";
 @import "./views/settings/tabs/user/_HelpUserSettingsTab.scss";
+@import "./views/settings/tabs/user/_KeyboardUserSettingsTab.scss";
 @import "./views/settings/tabs/user/_LabsUserSettingsTab.scss";
 @import "./views/settings/tabs/user/_MjolnirUserSettingsTab.scss";
 @import "./views/settings/tabs/user/_NotificationUserSettingsTab.scss";

res/css/views/dialogs/_UserSettingsDialog.scss

@@ -37,6 +37,10 @@ limitations under the License.
     mask-image: url('$(res)/img/element-icons/settings/preference.svg');
 }
 
+.mx_UserSettingsDialog_keyboardIcon::before {
+    mask-image: url('$(res)/img/element-icons/settings/keyboard.svg');
+}
+
 .mx_UserSettingsDialog_sidebarIcon::before {
     mask-image: url('$(res)/img/element-icons/settings/sidebar.svg');
 }

res/css/views/settings/tabs/user/_KeyboardUserSettingsTab.scss

@@ -1,5 +1,6 @@
 /*
 Copyright 2020 The Matrix.org Foundation C.I.C.
+Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_KeyboardShortcutsDialog {
+.mx_KeyboardUserSettingsTab .mx_SettingsTab_section {
     display: flex;
     flex-wrap: wrap;
     -webkit-box-orient: vertical;