From f45e8ad486eaed3a5897bda7e96eba8415abcfbe Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Tue, 5 Jul 2022 14:24:26 +0000
Subject: [PATCH] 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>
---
 .../tabs/room/_SecurityRoomSettingsTab.scss   | 26 +++++--------------
 .../tabs/room/SecurityRoomSettingsTab.tsx     |  8 +++---
 2 files changed, 11 insertions(+), 23 deletions(-)

diff --git a/res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.scss b/res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.scss
index c142653490..cf3e16bc04 100644
--- a/res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.scss
+++ b/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: 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;
-}
diff --git a/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx b/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx
index abbd836e90..14a937c5f6 100644
--- a/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx
+++ b/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>
             );
         }