Use semantic heading in user settings Sidebar & Voip (#10782)

* split SettingsSection out of SettingsTab, replace usage

* correct copyright

* use semantic headings in GeneralRoomSettingsTab

* use SettingsTab and SettingsSubsection in room settings

* fix VoipRoomSettingsTab

* use SettingsSection components in space settings

* settingssubsection text component

* use semantic headings in HelpUserSetttings tab

* use ExternalLink components for external links

* test

* strict

* lint

* semantic heading in labs settings

* semantic headings in keyboard settings tab

* semantic heading in preferencesusersettingstab

* tidying

* use new settings components in eventindexpanel

* findByTestId

* prettier

* semantic headings and style refresh for crypto settings

* e2e panel

* semantic headings and cleanup in Sidebar user settings

* semantic heading in voice user settings

* sonarcloud bug and test

Author: Kerry

res/css/_components.pcss

@@ -348,7 +348,6 @@
 @import "./views/settings/tabs/user/_MjolnirUserSettingsTab.pcss";
 @import "./views/settings/tabs/user/_SecurityUserSettingsTab.pcss";
 @import "./views/settings/tabs/user/_SidebarUserSettingsTab.pcss";
-@import "./views/settings/tabs/user/_VoiceUserSettingsTab.pcss";
 @import "./views/spaces/_SpaceBasicSettings.pcss";
 @import "./views/spaces/_SpaceChildrenPicker.pcss";
 @import "./views/spaces/_SpaceCreateMenu.pcss";

res/css/structures/_QuickSettingsButton.pcss

@@ -113,9 +113,11 @@ limitations under the License.
 }
 
 .mx_QuickSettingsButton_icon {
+    // TODO remove when all icons have fill=currentColor
     * {
         fill: $secondary-content;
     }
+    color: $secondary-content;
     width: 16px;
     height: 16px;
     position: absolute;

res/css/views/settings/tabs/user/_SidebarUserSettingsTab.pcss

@@ -14,67 +14,25 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_SidebarUserSettingsTab {
-    .mx_Checkbox {
-        margin-top: 12px;
-        font-size: $font-15px;
-        line-height: $font-24px;
-        color: $secondary-content;
-    }
-
-    .mx_SidebarUserSettingsTab_checkboxMicrocopy {
-        margin-bottom: 12px;
-        margin-left: 24px;
-        font-size: $font-15px;
-        line-height: $font-24px;
-        color: $secondary-content;
-    }
-
-    .mx_SidebarUserSettingsTab_homeAllRoomsCheckbox {
-        margin-left: 24px;
-
-        & + div {
-            margin-left: 48px;
-        }
-    }
+.mx_SidebarUserSettingsTab_homeAllRoomsCheckbox {
+    margin-left: 24px;
 
-    .mx_SidebarUserSettingsTab_homeCheckbox,
-    .mx_SidebarUserSettingsTab_favouritesCheckbox,
-    .mx_SidebarUserSettingsTab_peopleCheckbox,
-    .mx_SidebarUserSettingsTab_orphansCheckbox {
-        .mx_Checkbox_background + div {
-            padding-left: 20px;
-            position: relative;
-
-            &::before {
-                background-color: $secondary-content;
-                content: "";
-                mask-repeat: no-repeat;
-                mask-position: center;
-                mask-size: contain;
-                width: 16px;
-                height: 16px;
-                position: absolute;
-                left: 0;
-                top: 50%;
-                transform: translateY(-50%);
-            }
-        }
-    }
-
-    .mx_SidebarUserSettingsTab_homeCheckbox .mx_Checkbox_background + div::before {
-        mask-image: url("$(res)/img/element-icons/home.svg");
-    }
-
-    .mx_SidebarUserSettingsTab_favouritesCheckbox .mx_Checkbox_background + div::before {
-        mask-image: url("$(res)/img/element-icons/roomlist/favorite.svg");
+    & + div {
+        margin-left: 48px;
     }
+}
 
-    .mx_SidebarUserSettingsTab_peopleCheckbox .mx_Checkbox_background + div::before {
-        mask-image: url("$(res)/img/element-icons/room/members.svg");
+.mx_SidebarUserSettingsTab_checkbox {
+    margin-bottom: $spacing-8;
+    // override checkbox styles˚
+    label {
+        align-items: flex-start !important;
     }
 
-    .mx_SidebarUserSettingsTab_orphansCheckbox .mx_Checkbox_background + div::before {
-        mask-image: url("$(res)/img/element-icons/roomlist/hash-circle.svg");
+    svg {
+        height: 16px;
+        width: 16px;
+        margin-right: $spacing-8;
+        margin-bottom: -1px;
     }
 }