From 0c30f0c8387eb7a08bd1e5bf95f74c517ad88658 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Wed, 24 May 2023 08:28:15 +0000
Subject: [PATCH] Simplify nodes on `ThirdPartyMemberInfo` (#10889)

* Remove mx_MemberInfo_profileField

* Merge mx_MemberInfo_profile with mx_MemberInfo_container

* Remove redundant div elements

* Update a Jest snapshot
---
 res/css/views/rooms/_MemberInfo.pcss          | 20 ++++++----------
 .../views/rooms/ThirdPartyMemberInfo.tsx      | 16 ++++---------
 .../ThirdPartyMemberInfo-test.tsx.snap        | 24 ++++---------------
 3 files changed, 16 insertions(+), 44 deletions(-)

diff --git a/res/css/views/rooms/_MemberInfo.pcss b/res/css/views/rooms/_MemberInfo.pcss
index cc5ea79f83..a1fc656598 100644
--- a/res/css/views/rooms/_MemberInfo.pcss
+++ b/res/css/views/rooms/_MemberInfo.pcss
@@ -76,6 +76,12 @@ limitations under the License.
 
 .mx_MemberInfo_container {
     margin: 0 16px 16px 16px;
+
+    &.mx_MemberInfo_container--profile {
+        margin-bottom: 16px;
+        font-size: $font-15px;
+        position: relative;
+    }
 }
 
 .mx_MemberInfo_avatar {
@@ -95,23 +101,11 @@ limitations under the License.
     }
 }
 
-.mx_MemberInfo_profile {
-    margin-bottom: 16px;
-}
-
-.mx_MemberInfo_profileField {
-    font-size: $font-15px;
-    position: relative;
-}
-
-.mx_MemberInfo_buttons {
-    margin-bottom: 16px;
-}
-
 .mx_MemberInfo_field {
     cursor: pointer;
     font-size: $font-15px;
     color: $primary-content;
     margin-left: 8px;
+    margin-bottom: 16px;
     line-height: $font-23px;
 }
diff --git a/src/components/views/rooms/ThirdPartyMemberInfo.tsx b/src/components/views/rooms/ThirdPartyMemberInfo.tsx
index 1564549257..3a17f62eee 100644
--- a/src/components/views/rooms/ThirdPartyMemberInfo.tsx
+++ b/src/components/views/rooms/ThirdPartyMemberInfo.tsx
@@ -127,11 +127,9 @@ export default class ThirdPartyMemberInfo extends React.Component<IProps, IState
             adminTools = (
                 <div className="mx_MemberInfo_container">
                     <h3>{_t("Admin Tools")}</h3>
-                    <div className="mx_MemberInfo_buttons">
-                        <AccessibleButton className="mx_MemberInfo_field" onClick={this.onKickClick}>
-                            {_t("Revoke invite")}
-                        </AccessibleButton>
-                    </div>
+                    <AccessibleButton className="mx_MemberInfo_field" onClick={this.onKickClick}>
+                        {_t("Revoke invite")}
+                    </AccessibleButton>
                 </div>
             );
         }
@@ -154,12 +152,8 @@ export default class ThirdPartyMemberInfo extends React.Component<IProps, IState
                     <AccessibleButton className="mx_MemberInfo_cancel" onClick={this.onCancel} title={_t("Close")} />
                     <h2>{this.state.displayName}</h2>
                 </div>
-                <div className="mx_MemberInfo_container">
-                    <div className="mx_MemberInfo_profile">
-                        <div className="mx_MemberInfo_profileField">
-                            {_t("Invited by %(sender)s", { sender: this.state.senderName })}
-                        </div>
-                    </div>
+                <div className="mx_MemberInfo_container mx_MemberInfo_container--profile">
+                    {_t("Invited by %(sender)s", { sender: this.state.senderName })}
                 </div>
                 {adminTools}
             </div>
diff --git a/test/components/views/rooms/__snapshots__/ThirdPartyMemberInfo-test.tsx.snap b/test/components/views/rooms/__snapshots__/ThirdPartyMemberInfo-test.tsx.snap
index 993fe5c958..35fd6b6356 100644
--- a/test/components/views/rooms/__snapshots__/ThirdPartyMemberInfo-test.tsx.snap
+++ b/test/components/views/rooms/__snapshots__/ThirdPartyMemberInfo-test.tsx.snap
@@ -20,17 +20,9 @@ exports[`<ThirdPartyMemberInfo /> should render invite 1`] = `
       </h2>
     </div>
     <div
-      class="mx_MemberInfo_container"
+      class="mx_MemberInfo_container mx_MemberInfo_container--profile"
     >
-      <div
-        class="mx_MemberInfo_profile"
-      >
-        <div
-          class="mx_MemberInfo_profileField"
-        >
-          Invited by Alice DisplayName
-        </div>
-      </div>
+      Invited by Alice DisplayName
     </div>
   </div>
 </div>
@@ -56,17 +48,9 @@ exports[`<ThirdPartyMemberInfo /> should render invite when room in not availabl
       </h2>
     </div>
     <div
-      class="mx_MemberInfo_container"
+      class="mx_MemberInfo_container mx_MemberInfo_container--profile"
     >
-      <div
-        class="mx_MemberInfo_profile"
-      >
-        <div
-          class="mx_MemberInfo_profileField"
-        >
-          Invited by Alice DisplayName
-        </div>
-      </div>
+      Invited by Alice DisplayName
     </div>
   </div>
 </div>