diff --git a/res/css/views/right_panel/_UserInfo.scss b/res/css/views/right_panel/_UserInfo.scss index 3b7a51797f9..15cf0cdc1ec 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 c9685c24670..9d17c5237d1 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 = (
{ dis.dispatch({