diff --git a/res/css/_components.scss b/res/css/_components.scss index ffaec43b680..4ef95e8cd8d 100644 --- a/res/css/_components.scss +++ b/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"; diff --git a/res/css/views/settings/_JoinRuleSettings.scss b/res/css/views/settings/_JoinRuleSettings.scss new file mode 100644 index 00000000000..8b520b2ab1a --- /dev/null +++ b/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; +} diff --git a/res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.scss b/res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.scss index 8fd0f144188..a3b3b17899f 100644 --- a/res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.scss +++ b/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; - } -} diff --git a/src/components/views/settings/JoinRuleSettings.tsx b/src/components/views/settings/JoinRuleSettings.tsx index a32d147d3a6..76596103f57 100644 --- a/src/components/views/settings/JoinRuleSettings.tsx +++ b/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 = + upgradeRequiredPill = { _t("Upgrade required") } ; } @@ -159,13 +159,14 @@ const JoinRuleSettings = ({ room, promptUpgrade, onError, beforeChange, closeSet disabled={disabled} onClick={onEditRestrictedClick} kind="link" + className="mx_JoinRuleSettings_linkButton" > { sub } , }) } -
+

{ _t("Spaces with access") }

{ shownSpaces.map(room => { return @@ -286,6 +287,7 @@ const JoinRuleSettings = ({ room, promptUpgrade, onError, beforeChange, closeSet onChange={onChange} definitions={definitions} disabled={disabled} + className="mx_JoinRuleSettings_radioButton" /> ); };