Pluck out JoinRuleSettings styles so they apply in space settings too

res/css/_components.scss

@@ -1,8 +1,10 @@
 // autogenerated by rethemendex.sh
+@import "./_animations.scss";
 @import "./_common.scss";
 @import "./_font-sizes.scss";
 @import "./_font-weights.scss";
 @import "./structures/_AutoHideScrollbar.scss";
+@import "./structures/_BackdropPanel.scss";
 @import "./structures/_CompatibilityPage.scss";
 @import "./structures/_ContextualMenu.scss";
 @import "./structures/_CreateRoom.scss";
@@ -17,7 +19,6 @@
 @import "./structures/_LeftPanelWidget.scss";
 @import "./structures/_MainSplit.scss";
 @import "./structures/_MatrixChat.scss";
-@import "./structures/_BackdropPanel.scss";
 @import "./structures/_MyGroups.scss";
 @import "./structures/_NonUrgentToastContainer.scss";
 @import "./structures/_NotificationPanel.scss";
@@ -243,6 +244,7 @@
 @import "./views/settings/_E2eAdvancedPanel.scss";
 @import "./views/settings/_EmailAddresses.scss";
 @import "./views/settings/_IntegrationManager.scss";
+@import "./views/settings/_JoinRuleSettings.scss";
 @import "./views/settings/_LayoutSwitcher.scss";
 @import "./views/settings/_Notifications.scss";
 @import "./views/settings/_PhoneNumbers.scss";

res/css/views/settings/_JoinRuleSettings.scss

@@ -0,0 +1,88 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+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_JoinRuleSettings_upgradeRequired {
+    margin-left: 16px;
+    padding: 4px 16px;
+    border: 1px solid $accent-color;
+    border-radius: 8px;
+    color: $accent-color;
+    font-size: $font-12px;
+    line-height: $font-15px;
+}
+
+.mx_JoinRuleSettings_spacesWithAccess {
+    > h4 {
+        color: $secondary-content;
+        font-weight: $font-semi-bold;
+        font-size: $font-12px;
+        line-height: $font-15px;
+        text-transform: uppercase;
+    }
+
+    > span {
+        font-weight: 500;
+        font-size: $font-14px;
+        line-height: 32px; // matches height of avatar for v-align
+        color: $secondary-content;
+        display: inline-block;
+
+        img.mx_RoomAvatar_isSpaceRoom,
+        .mx_RoomAvatar_isSpaceRoom img {
+            border-radius: 8px;
+        }
+
+        .mx_BaseAvatar {
+            margin-right: 8px;
+        }
+
+        & + span {
+            margin-left: 16px;
+        }
+    }
+}
+
+.mx_JoinRuleSettings_radioButton {
+    padding-top: 16px;
+    margin-bottom: 8px;
+
+    .mx_RadioButton_content {
+        margin-left: 14px;
+        font-weight: $font-semi-bold;
+        font-size: $font-15px;
+        line-height: $font-24px;
+        color: $primary-content;
+        display: block;
+    }
+
+    & + span {
+        display: inline-block;
+        margin-left: 34px;
+        margin-bottom: 16px;
+        font-size: $font-15px;
+        line-height: $font-24px;
+        color: $secondary-content;
+
+        & + .mx_RadioButton {
+            border-top: 1px solid $menu-border-color;
+        }
+    }
+}
+
+.mx_JoinRuleSettings_linkButton {
+    padding: 0;
+    font-size: inherit;
+}

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

@@ -19,37 +19,6 @@ limitations under the License.
         padding: 0;
         margin-bottom: 16px;
     }
-
-    .mx_SecurityRoomSettingsTab_spacesWithAccess {
-        > h4 {
-            color: $secondary-content;
-            font-weight: $font-semi-bold;
-            font-size: $font-12px;
-            line-height: $font-15px;
-            text-transform: uppercase;
-        }
-
-        > span {
-            font-weight: 500;
-            font-size: $font-14px;
-            line-height: 32px; // matches height of avatar for v-align
-            color: $secondary-content;
-            display: inline-block;
-
-            img.mx_RoomAvatar_isSpaceRoom,
-            .mx_RoomAvatar_isSpaceRoom img {
-                border-radius: 8px;
-            }
-
-            .mx_BaseAvatar {
-                margin-right: 8px;
-            }
-
-            & + span {
-                margin-left: 16px;
-            }
-        }
-    }
 }
 
 .mx_SecurityRoomSettingsTab_warning {
@@ -68,47 +37,3 @@ limitations under the License.
     border-bottom: 1px solid $menu-border-color;
     margin-bottom: 32px;
 }
-
-.mx_SecurityRoomSettingsTab_upgradeRequired {
-    margin-left: 16px;
-    padding: 4px 16px;
-    border: 1px solid $accent-color;
-    border-radius: 8px;
-    color: $accent-color;
-    font-size: $font-12px;
-    line-height: $font-15px;
-}
-
-.mx_SecurityRoomSettingsTab_joinRule {
-    .mx_RadioButton {
-        padding-top: 16px;
-        margin-bottom: 8px;
-
-        .mx_RadioButton_content {
-            margin-left: 14px;
-            font-weight: $font-semi-bold;
-            font-size: $font-15px;
-            line-height: $font-24px;
-            color: $primary-content;
-            display: block;
-        }
-    }
-
-    > span {
-        display: inline-block;
-        margin-left: 34px;
-        margin-bottom: 16px;
-        font-size: $font-15px;
-        line-height: $font-24px;
-        color: $secondary-content;
-
-        & + .mx_RadioButton {
-            border-top: 1px solid $menu-border-color;
-        }
-    }
-
-    .mx_AccessibleButton_kind_link {
-        padding: 0;
-        font-size: inherit;
-    }
-}

src/components/views/settings/JoinRuleSettings.tsx

@@ -97,7 +97,7 @@ const JoinRuleSettings = ({ room, promptUpgrade, onError, beforeChange, closeSet
     if (roomSupportsRestricted || preferredRestrictionVersion || joinRule === JoinRule.Restricted) {
         let upgradeRequiredPill;
         if (preferredRestrictionVersion) {
-            upgradeRequiredPill = <span className="mx_SecurityRoomSettingsTab_upgradeRequired">
+            upgradeRequiredPill = <span className="mx_JoinRuleSettings_upgradeRequired">
                 { _t("Upgrade required") }
             </span>;
         }
@@ -159,13 +159,14 @@ const JoinRuleSettings = ({ room, promptUpgrade, onError, beforeChange, closeSet
                             disabled={disabled}
                             onClick={onEditRestrictedClick}
                             kind="link"
+                            className="mx_JoinRuleSettings_linkButton"
                         >
                             { sub }
                         </AccessibleButton>,
                     }) }
                 </span>
 
-                <div className="mx_SecurityRoomSettingsTab_spacesWithAccess">
+                <div className="mx_JoinRuleSettings_spacesWithAccess">
                     <h4>{ _t("Spaces with access") }</h4>
                     { shownSpaces.map(room => {
                         return <span key={room.roomId}>
@@ -286,6 +287,7 @@ const JoinRuleSettings = ({ room, promptUpgrade, onError, beforeChange, closeSet
             onChange={onChange}
             definitions={definitions}
             disabled={disabled}
+            className="mx_JoinRuleSettings_radioButton"
         />
     );
 };