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>
This commit is contained in:
Suguru Hirahara 2022-07-05 14:24:26 +00:00 committed by GitHub
parent bdc05ec268
commit f45e8ad486
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 11 additions and 23 deletions

View file

@ -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: block;
img {
vertical-align: middle;
margin-right: 5px;
margin-left: 3px;
margin-bottom: 5px;
display: flex;
align-items: center;
column-gap: $spacing-4;
}
}
.mx_SecurityRoomSettingsTab_encryptionSection {
padding-bottom: 24px;
border-bottom: 1px solid $quinary-content;
margin-bottom: 32px;
}

View file

@ -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>
);
}