Improve security room settings tab style rules (#8844)
* Fix position of 'Show Advanced' on security room settings tab Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use flex to ensure alignment of the warning icon and message Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove an obsolete style block Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * yarn run lint:style --fix Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>pull/28217/head
parent
bdc05ec268
commit
f45e8ad486
|
@ -16,24 +16,12 @@ limitations under the License.
|
|||
|
||||
.mx_SecurityRoomSettingsTab {
|
||||
.mx_SettingsTab_showAdvanced {
|
||||
padding: 0;
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: $spacing-16;
|
||||
}
|
||||
|
||||
.mx_SecurityRoomSettingsTab_warning {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
column-gap: $spacing-4;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_SecurityRoomSettingsTab_warning {
|
||||
display: block;
|
||||
|
||||
img {
|
||||
vertical-align: middle;
|
||||
margin-right: 5px;
|
||||
margin-left: 3px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_SecurityRoomSettingsTab_encryptionSection {
|
||||
padding-bottom: 24px;
|
||||
border-bottom: 1px solid $quinary-content;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
|
|
@ -355,7 +355,7 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
|
|||
const state = client.getRoom(this.props.roomId).currentState;
|
||||
const canSetGuestAccess = state.mayClientSendStateEvent(EventType.RoomGuestAccess, client);
|
||||
|
||||
return <div className="mx_SettingsTab_section">
|
||||
return <>
|
||||
<LabelledToggleSwitch
|
||||
value={guestAccess === GuestAccess.CanJoin}
|
||||
onChange={this.onGuestAccessChange}
|
||||
|
@ -366,7 +366,7 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
|
|||
{ _t("People with supported clients will be able to join " +
|
||||
"the room without having a registered account.") }
|
||||
</p>
|
||||
</div>;
|
||||
</>;
|
||||
}
|
||||
|
||||
render() {
|
||||
|
@ -391,7 +391,7 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
|
|||
let advanced;
|
||||
if (room.getJoinRule() === JoinRule.Public) {
|
||||
advanced = (
|
||||
<>
|
||||
<div className="mx_SettingsTab_section">
|
||||
<AccessibleButton
|
||||
onClick={this.toggleAdvancedSection}
|
||||
kind="link"
|
||||
|
@ -400,7 +400,7 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
|
|||
{ this.state.showAdvancedSection ? _t("Hide advanced") : _t("Show advanced") }
|
||||
</AccessibleButton>
|
||||
{ this.state.showAdvancedSection && this.renderAdvanced() }
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue