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
This commit is contained in:
parent
7248878e7d
commit
0c30f0c838
3 changed files with 16 additions and 44 deletions
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -127,12 +127,10 @@ 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>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
@ -154,13 +152,9 @@ 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">
|
||||
<div className="mx_MemberInfo_container mx_MemberInfo_container--profile">
|
||||
{_t("Invited by %(sender)s", { sender: this.state.senderName })}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{adminTools}
|
||||
</div>
|
||||
);
|
||||
|
|
|
@ -20,19 +20,11 @@ exports[`<ThirdPartyMemberInfo /> should render invite 1`] = `
|
|||
</h2>
|
||||
</div>
|
||||
<div
|
||||
class="mx_MemberInfo_container"
|
||||
>
|
||||
<div
|
||||
class="mx_MemberInfo_profile"
|
||||
>
|
||||
<div
|
||||
class="mx_MemberInfo_profileField"
|
||||
class="mx_MemberInfo_container mx_MemberInfo_container--profile"
|
||||
>
|
||||
Invited by Alice DisplayName
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
|
@ -56,18 +48,10 @@ exports[`<ThirdPartyMemberInfo /> should render invite when room in not availabl
|
|||
</h2>
|
||||
</div>
|
||||
<div
|
||||
class="mx_MemberInfo_container"
|
||||
>
|
||||
<div
|
||||
class="mx_MemberInfo_profile"
|
||||
>
|
||||
<div
|
||||
class="mx_MemberInfo_profileField"
|
||||
class="mx_MemberInfo_container mx_MemberInfo_container--profile"
|
||||
>
|
||||
Invited by Alice DisplayName
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
|
Loading…
Reference in a new issue