diff --git a/res/css/views/right_panel/_UserInfo.scss b/res/css/views/right_panel/_UserInfo.scss
index 3b7a51797f..15cf0cdc1e 100644
--- a/res/css/views/right_panel/_UserInfo.scss
+++ b/res/css/views/right_panel/_UserInfo.scss
@@ -52,6 +52,10 @@ limitations under the License.
.mx_UserInfo_container {
padding: 8px 16px;
+
+ .mx_UserInfo_container_verifyButton {
+ margin-top: $spacing-8;
+ }
}
.mx_UserInfo_separator {
@@ -193,10 +197,7 @@ limitations under the License.
}
.mx_UserInfo_field {
- cursor: pointer;
- color: $accent;
line-height: $font-16px;
- margin: 8px 0;
&.mx_UserInfo_destructive {
color: $alert;
@@ -228,14 +229,18 @@ limitations under the License.
padding-bottom: 0;
> :not(h3) {
- margin-left: 8px;
+ margin-inline-start: $spacing-8;
+ display: flex;
+ flex-flow: column;
+ align-items: flex-start;
+ row-gap: $spacing-8;
}
}
.mx_UserInfo_devices {
.mx_UserInfo_device {
display: flex;
- margin: 8px 0;
+ margin: $spacing-8 0;
&.mx_UserInfo_device_verified {
.mx_UserInfo_device_trusted {
@@ -250,7 +255,7 @@ limitations under the License.
.mx_UserInfo_device_name {
flex: 1;
- margin-right: 5px;
+ margin: 0 5px;
word-break: break-word;
}
}
@@ -259,20 +264,16 @@ limitations under the License.
.mx_E2EIcon {
// don't squeeze
flex: 0 0 auto;
- margin: 2px 5px 0 0;
+ margin: 0;
width: 12px;
height: 12px;
}
.mx_UserInfo_expand {
- display: flex;
- margin-top: 11px;
+ column-gap: 5px; // cf: mx_UserInfo_device_name
+ margin-bottom: 11px;
}
}
-
- .mx_AccessibleButton.mx_AccessibleButton_hasKind {
- padding: 8px 18px;
- }
}
.mx_UserInfo.mx_UserInfo_smallAvatar {
diff --git a/src/components/views/right_panel/UserInfo.tsx b/src/components/views/right_panel/UserInfo.tsx
index c9685c2467..9d17c5237d 100644
--- a/src/components/views/right_panel/UserInfo.tsx
+++ b/src/components/views/right_panel/UserInfo.tsx
@@ -292,13 +292,17 @@ function DevicesSection({ devices, userId, loading }: { devices: IDevice[], user
let expandButton;
if (expandSectionDevices.length) {
if (isExpanded) {
- expandButton = ( setExpanded(false)}
>
{ expandHideCaption }
);
} else {
- expandButton = ( setExpanded(true)}
>
@@ -331,6 +335,7 @@ const MessageButton = ({ userId }: { userId: string }) => {
return (
{
if (busy) return;
setBusy(true);
@@ -383,6 +388,7 @@ const UserOptionsSection: React.FC<{
ignoreButton = (
@@ -413,14 +419,22 @@ const UserOptionsSection: React.FC<{
const room = cli.getRoom(member.roomId);
if (room?.getEventReadUpTo(member.userId)) {
readReceiptButton = (
-
+
{ _t('Jump to read receipt') }
);
}
insertPillButton = (
-
+
{ _t('Mention') }
);
@@ -448,7 +462,11 @@ const UserOptionsSection: React.FC<{
};
inviteUserButton = (
-
+
{ _t('Invite') }
);
@@ -456,7 +474,11 @@ const UserOptionsSection: React.FC<{
}
const shareUserButton = (
-
+
{ _t('Share Link to User') }
);
@@ -624,7 +646,11 @@ const RoomKickButton = ({ room, member, startUpdating, stopUpdating }: Omit
+ return
{ kickLabel }
;
};
@@ -642,7 +668,11 @@ const RedactMessagesButton: React.FC = ({ member }) => {
});
};
- return
+ return
{ _t("Remove recent messages") }
;
};
@@ -739,7 +769,11 @@ const BanToggleButton = ({ room, member, startUpdating, stopUpdating }: Omit
+ return
{ label }
;
};
@@ -809,7 +843,11 @@ const MuteToggleButton: React.FC = ({ member, room, powerLevels,
});
const muteLabel = muted ? _t("Unmute") : _t("Mute");
- return
+ return
{ muteLabel }
;
};
@@ -1212,7 +1250,11 @@ const BasicUserInfo: React.FC<{
// FIXME this should be using cli instead of MatrixClientPeg.matrixClient
if (isSynapseAdmin && member.userId.endsWith(`:${MatrixClientPeg.getHomeserverName()}`)) {
synapseDeactivateButton = (
-
+
{ _t("Deactivate user") }
);
@@ -1290,8 +1332,9 @@ const BasicUserInfo: React.FC<{
if (canVerify) {
if (hasCrossSigningKeys !== undefined) {
// Note: mx_UserInfo_verifyButton is for the end-to-end tests
- verifyButton = (
+ verifyButton = (
{
if (hasCrossSigningKeys) {
@@ -1303,7 +1346,7 @@ const BasicUserInfo: React.FC<{
>
{ _t("Verify") }
- );
+
);
} else if (!showDeviceListSpinner) {
// HACK: only show a spinner if the device section spinner is not shown,
// to avoid showing a double spinner
@@ -1316,6 +1359,7 @@ const BasicUserInfo: React.FC<{
if (member.userId == cli.getUserId()) {
editDevices = (