use SettingsTab and SettingsSubsection in room settings

Author: Kerry Archibald

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

@@ -103,5 +103,5 @@ limitations under the License.
     grid-template-columns: 1fr;
     grid-gap: $spacing-32;
 
-    padding: $spacing-16 0;
+    padding-bottom: $spacing-16;
 }

res/css/views/settings/tabs/room/_RolesRoomSettingsTab.pcss

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_RolesRoomSettingsTab ul {
+.mx_RolesRoomSettingsTab_bannedList {
     margin-bottom: 0;
 }
 

res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.pcss

@@ -14,14 +14,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_SecurityRoomSettingsTab {
-    .mx_SettingsTab_showAdvanced {
-        margin-bottom: $spacing-16;
-    }
+.mx_SecurityRoomSettingsTab_advancedSection {
+    margin-top: $spacing-16;
+}
 
-    .mx_SecurityRoomSettingsTab_warning {
-        display: flex;
-        align-items: center;
-        column-gap: $spacing-4;
-    }
+.mx_SecurityRoomSettingsTab_warning {
+    display: flex;
+    align-items: center;
+    column-gap: $spacing-4;
 }

src/components/views/settings/tabs/room/AdvancedRoomSettingsTab.tsx

@@ -27,6 +27,9 @@ import { Action } from "../../../../../dispatcher/actions";
 import CopyableText from "../../../elements/CopyableText";
 import { ViewRoomPayload } from "../../../../../dispatcher/payloads/ViewRoomPayload";
 import SettingsStore from "../../../../../settings/SettingsStore";
+import SettingsTab from "../SettingsTab";
+import { SettingsSection } from "../../shared/SettingsSection";
+import SettingsSubsection from "../../shared/SettingsSubsection";
 
 interface IProps {
     room: Room;
@@ -154,30 +157,27 @@ export default class AdvancedRoomSettingsTab extends React.Component<IProps, ISt
         }
 
         return (
-            <div className="mx_SettingsTab">
-                <div className="mx_SettingsTab_heading">{_t("Advanced")}</div>
-                <div className="mx_SettingsTab_section mx_SettingsTab_subsectionText">
-                    <span className="mx_SettingsTab_subheading">
-                        {room.isSpaceRoom() ? _t("Space information") : _t("Room information")}
-                    </span>
-                    <div>
-                        <span>{_t("Internal room ID")}</span>
-                        <CopyableText getTextToCopy={() => this.props.room.roomId}>
-                            {this.props.room.roomId}
-                        </CopyableText>
-                    </div>
-                    {unfederatableSection}
-                </div>
-                <div className="mx_SettingsTab_section mx_SettingsTab_subsectionText">
-                    <span className="mx_SettingsTab_subheading">{_t("Room version")}</span>
-                    <div>
-                        <span>{_t("Room version:")}</span>&nbsp;
-                        {room.getVersion()}
-                    </div>
-                    {oldRoomLink}
-                    {roomUpgradeButton}
-                </div>
-            </div>
+            <SettingsTab>
+                <SettingsSection heading={_t("Advanced")}>
+                    <SettingsSubsection heading={room.isSpaceRoom() ? _t("Space information") : _t("Room information")}>
+                        <div>
+                            <span>{_t("Internal room ID")}</span>
+                            <CopyableText getTextToCopy={() => this.props.room.roomId}>
+                                {this.props.room.roomId}
+                            </CopyableText>
+                        </div>
+                        {unfederatableSection}
+                    </SettingsSubsection>
+                    <SettingsSubsection heading={_t("Room version")}>
+                        <div>
+                            <span>{_t("Room version:")}</span>&nbsp;
+                            {room.getVersion()}
+                        </div>
+                        {oldRoomLink}
+                        {roomUpgradeButton}
+                    </SettingsSubsection>
+                </SettingsSection>
+            </SettingsTab>
         );
     }
 }

src/components/views/settings/tabs/room/BridgeSettingsTab.tsx

@@ -21,6 +21,8 @@ import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { _t } from "../../../../../languageHandler";
 import { MatrixClientPeg } from "../../../../../MatrixClientPeg";
 import BridgeTile from "../../BridgeTile";
+import SettingsTab from "../SettingsTab";
+import { SettingsSection } from "../../shared/SettingsSection";
 
 const BRIDGE_EVENT_TYPES = [
     "uk.half-shot.bridge",
@@ -99,10 +101,9 @@ export default class BridgeSettingsTab extends React.Component<IProps> {
         }
 
         return (
-            <div className="mx_SettingsTab">
-                <div className="mx_SettingsTab_heading">{_t("Bridges")}</div>
-                <div className="mx_SettingsTab_section mx_SettingsTab_subsectionText">{content}</div>
-            </div>
+            <SettingsTab>
+                <SettingsSection heading={_t("Bridges")}>{content}</SettingsSection>
+            </SettingsTab>
         );
     }
 }