split SettingsSection out of SettingsTab, replace usage (#10735)

* split SettingsSection out of SettingsTab, replace usage

* correct copyright

* fix VoipRoomSettingsTab

res/css/views/settings/_SettingsFieldset.pcss

@@ -20,9 +20,11 @@ limitations under the License.
 }
 
 .mx_SettingsFieldset_legend {
-    font-size: $font-16px;
-    display: block;
+    // matches h3
+    font-size: $font-18px;
     font-weight: var(--font-semi-bold);
+    line-height: $font-22px;
+    display: block;
     color: $primary-content;
     margin-bottom: 10px;
     margin-top: 12px;

res/css/views/settings/tabs/_SettingsSection.pcss

@@ -0,0 +1,36 @@
+/*
+Copyright 2023 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_SettingsSection {
+    --SettingsTab_section-margin-bottom-preferences-labs: 30px;
+    --SettingsTab_heading_nth_child-margin-top: 30px; /* TODO: Use a spacing variable */
+    --SettingsTab_fullWidthField-margin-inline-end: 100px;
+    --SettingsTab_tooltip-max-width: 120px; /* So it fits in the space provided by the page */
+
+    color: $primary-content;
+
+    a {
+        color: $links;
+    }
+}
+
+.mx_SettingsSection_subSections {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-gap: $spacing-32;
+
+    padding: $spacing-16 0;
+}