Replace checkboxes with Compound checkboxes, and appropriately label each checkbox. (#29363)

* Fix labelling of avatar menu

* Make the integration manager toggle more clear.

* fix label

* lint

* Update snapshots.

* Refactor many cases of checkbox to use the new compound component.

* Remove non-checkbox related changes

* Reset some things

* Remove usages of mx_checkbox* styling.

* Use label locators for apperance tests.

* small linter tweaks

* lint

* update screenshot

* Test updates

* lint

* Realign checkboxes for device selection.

* Fixup QuickSettings styling

* remove comment

* lint

* flex comment

* remove unused label

* remove redundant classes

* add test for spaces

* lint

* Copyright

* fixup spaces test

* spaces lint

* Replace pin with compound pin.

* Realign icons

* Remove hack for colouring icons

* Adjust existing rooms component to correctly label room.

* Add test for adding an existing room to an existing space.

* Set deterministic sort order for rooms

* lint

res/css/structures/_QuickSettingsButton.pcss

@@ -1,5 +1,5 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2024,2025 New Vector Ltd.
 Copyright 2021 The Matrix.org Foundation C.I.C.
 
 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
@@ -70,38 +70,26 @@ Please see LICENSE files in the repository root for full details.
         text-transform: uppercase;
         color: var(--cpd-color-text-secondary);
         margin: 20px 0 12px;
-    }
-
-    .mx_QuickSettingsButton_pinToSidebarHeading {
-        padding-left: 24px;
         position: relative;
-    }
-
-    .mx_Checkbox {
-        margin-bottom: 8px;
-    }
-
-    .mx_QuickSettingsButton_favouritesCheckbox,
-    .mx_QuickSettingsButton_peopleCheckbox {
-        .mx_Checkbox_background + div {
-            padding-left: 22px;
-            position: relative;
-            margin-left: 6px;
-            font-size: $font-15px;
-            line-height: $font-24px;
-            color: var(--cpd-color-text-primary);
-        }
+        display: flex;
     }
 
     .mx_QuickSettingsButton_moreOptionsButton {
-        padding-left: 22px;
-        margin-left: 22px;
+        margin-left: var(--cpd-space-7x);
         font-size: $font-15px;
         line-height: $font-24px;
         color: var(--cpd-color-text-primary);
         position: relative;
         margin-bottom: 16px;
     }
+
+    .mx_QuickSettingsButton_option {
+        margin-bottom: var(--cpd-space-3x);
+        label {
+            /* Correctly line up icons and text. */
+            display: flex;
+        }
+    }
 }
 
 .mx_QuickSettingsButton_ContextMenuWrapper_new_room_list {
@@ -111,15 +99,10 @@ Please see LICENSE files in the repository root for full details.
 }
 
 .mx_QuickSettingsButton_icon {
-    // TODO remove when all icons have fill=currentColor
-    * {
-        fill: $secondary-content;
-    }
+    margin-right: var(--cpd-space-1x);
     color: $secondary-content;
-    width: 16px;
-    height: 16px;
-    position: absolute;
-    left: 0;
-    top: 50%;
-    transform: translateY(-50%);
+    width: 18px;
+    height: 18px;
+    margin-top: auto;
+    margin-bottom: auto;
 }