Improve security room settings tab style rules (#8844)

* Fix position of 'Show Advanced' on security room settings tab

Signed-off-by: Suguru Hirahara <[email protected]>

* Use flex to ensure alignment of the warning icon and message

Signed-off-by: Suguru Hirahara <[email protected]>

* Remove an obsolete style block

Signed-off-by: Suguru Hirahara <[email protected]>

* yarn run lint:style --fix

Signed-off-by: Suguru Hirahara <[email protected]>

Author: luixxiul

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

@@ -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;
+    .mx_SecurityRoomSettingsTab_warning {
+        display: flex;
+        align-items: center;
+        column-gap: $spacing-4;
     }
 }
-
-.mx_SecurityRoomSettingsTab_encryptionSection {
-    padding-bottom: 24px;
-    border-bottom: 1px solid $quinary-content;
-    margin-bottom: 32px;
-}

src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx

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