diff --git a/res/css/views/right_panel/_UserInfo.scss b/res/css/views/right_panel/_UserInfo.scss index e87fe06a94..d2d9d12c6d 100644 --- a/res/css/views/right_panel/_UserInfo.scss +++ b/res/css/views/right_panel/_UserInfo.scss @@ -23,15 +23,23 @@ limitations under the License. font-size: 12px; .mx_UserInfo_cancel { - height: 16px; - width: 16px; - padding: 10px 0 10px 10px; cursor: pointer; - mask-image: url('$(res)/img/minimise.svg'); - mask-repeat: no-repeat; - mask-position: 16px center; - background-color: $rightpanel-button-color; position: absolute; + top: 0; + border-radius: 4px; + background-color: $dark-panel-bg-color; + margin: 9px; + z-index: 1; // render on top of the right panel + + div { + height: 16px; + width: 16px; + padding: 4px; + mask-image: url('$(res)/img/minimise.svg'); + mask-repeat: no-repeat; + mask-position: 7px center; + background-color: $rightpanel-button-color; + } } h2 { diff --git a/src/components/views/right_panel/UserInfo.js b/src/components/views/right_panel/UserInfo.js index b08f07ace4..31431d56a4 100644 --- a/src/components/views/right_panel/UserInfo.js +++ b/src/components/views/right_panel/UserInfo.js @@ -1219,10 +1219,9 @@ const UserInfo = ({user, groupId, roomId, onClose}) => { let closeButton; if (onClose) { - closeButton = ; + closeButton = +
+ ; } const memberDetails = ( @@ -1338,32 +1337,32 @@ const UserInfo = ({user, groupId, roomId, onClose}) => { return (
- { closeButton } - { avatarElement } - -
-
-
-

- { e2eIcon } - { displayName } -

-
-
{ user.userId }
-
- {presenceLabel} - {statusLabel} -
-
-
- - { memberDetails &&
-
- { memberDetails } -
-
} - + { closeButton } + { avatarElement } + +
+
+
+

+ { e2eIcon } + { displayName } +

+
+
{ user.userId }
+
+ {presenceLabel} + {statusLabel} +
+
+
+ + { memberDetails &&
+
+ { memberDetails } +
+
} + { securitySection }