Fix text link buttons on UserInfo panel (#8247)

* Fix text link buttons on UserInfo (right) panel

- Fix link button styling
  - Replace className="mx_linkButton" with kind="link"
  - Remove style rules required for mx_linkButton
- Align E2E icon and devices on the device list
  - Replace margin with gap

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Spacing variables

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Replace link_inline with link

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Remove a redundant rule

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Wrap verifyButton

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

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;
+            column-gap: 5px; // cf: mx_UserInfo_device_name
-            margin-top: 11px;
+            margin-bottom: 11px;
         }
     }
-
-    .mx_AccessibleButton.mx_AccessibleButton_hasKind {
-        padding: 8px 18px;
-    }
 }
 
 .mx_UserInfo.mx_UserInfo_smallAvatar {

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 = (<AccessibleButton className="mx_UserInfo_expand mx_linkButton"
+            expandButton = (<AccessibleButton
+                kind="link"
+                className="mx_UserInfo_expand"
                 onClick={() => setExpanded(false)}
             >
                 <div>{ expandHideCaption }</div>
             </AccessibleButton>);
         } else {
-            expandButton = (<AccessibleButton className="mx_UserInfo_expand mx_linkButton"
+            expandButton = (<AccessibleButton
+                kind="link"
+                className="mx_UserInfo_expand"
                 onClick={() => setExpanded(true)}
             >
                 <div className={expandIconClasses} />
@@ -331,6 +335,7 @@ const MessageButton = ({ userId }: { userId: string }) => {
 
     return (
         <AccessibleButton
+            kind="link"
             onClick={async (ev) => {
                 if (busy) return;
                 setBusy(true);
@@ -383,6 +388,7 @@ const UserOptionsSection: React.FC<{
 
         ignoreButton = (
             <AccessibleButton
+                kind="link"
                 onClick={onIgnoreToggle}
                 className={classNames("mx_UserInfo_field", { mx_UserInfo_destructive: !isIgnored })}
             >
@@ -413,14 +419,22 @@ const UserOptionsSection: React.FC<{
             const room = cli.getRoom(member.roomId);
             if (room?.getEventReadUpTo(member.userId)) {
                 readReceiptButton = (
-                    <AccessibleButton onClick={onReadReceiptButton} className="mx_UserInfo_field">
+                    <AccessibleButton
+                        kind="link"
+                        onClick={onReadReceiptButton}
+                        className="mx_UserInfo_field"
+                    >
                         { _t('Jump to read receipt') }
                     </AccessibleButton>
                 );
             }
 
             insertPillButton = (
-                <AccessibleButton onClick={onInsertPillButton} className="mx_UserInfo_field">
+                <AccessibleButton
+                    kind="link"
+                    onClick={onInsertPillButton}
+                    className="mx_UserInfo_field"
+                >
                     { _t('Mention') }
                 </AccessibleButton>
             );
@@ -448,7 +462,11 @@ const UserOptionsSection: React.FC<{
             };
 
             inviteUserButton = (
-                <AccessibleButton onClick={onInviteUserButton} className="mx_UserInfo_field">
+                <AccessibleButton
+                    kind="link"
+                    onClick={onInviteUserButton}
+                    className="mx_UserInfo_field"
+                >
                     { _t('Invite') }
                 </AccessibleButton>
             );
@@ -456,7 +474,11 @@ const UserOptionsSection: React.FC<{
     }
 
     const shareUserButton = (
-        <AccessibleButton onClick={onShareUserClick} className="mx_UserInfo_field">
+        <AccessibleButton
+            kind="link"
+            onClick={onShareUserClick}
+            className="mx_UserInfo_field"
+        >
             { _t('Share Link to User') }
         </AccessibleButton>
     );
@@ -624,7 +646,11 @@ const RoomKickButton = ({ room, member, startUpdating, stopUpdating }: Omit<IBas
         member.membership === "invite" ? _t("Disinvite from space") : _t("Remove from space")
         : member.membership === "invite" ? _t("Disinvite from room") : _t("Remove from room");
 
-    return <AccessibleButton className="mx_UserInfo_field mx_UserInfo_destructive" onClick={onKick}>
+    return <AccessibleButton
+        kind="link"
+        className="mx_UserInfo_field mx_UserInfo_destructive"
+        onClick={onKick}
+    >
         { kickLabel }
     </AccessibleButton>;
 };
@@ -642,7 +668,11 @@ const RedactMessagesButton: React.FC<IBaseProps> = ({ member }) => {
         });
     };
 
-    return <AccessibleButton className="mx_UserInfo_field mx_UserInfo_destructive" onClick={onRedactAllMessages}>
+    return <AccessibleButton
+        kind="link"
+        className="mx_UserInfo_field mx_UserInfo_destructive"
+        onClick={onRedactAllMessages}
+    >
         { _t("Remove recent messages") }
     </AccessibleButton>;
 };
@@ -739,7 +769,11 @@ const BanToggleButton = ({ room, member, startUpdating, stopUpdating }: Omit<IBa
         mx_UserInfo_destructive: !isBanned,
     });
 
-    return <AccessibleButton className={classes} onClick={onBanOrUnban}>
+    return <AccessibleButton
+        kind="link"
+        className={classes}
+        onClick={onBanOrUnban}
+    >
         { label }
     </AccessibleButton>;
 };
@@ -809,7 +843,11 @@ const MuteToggleButton: React.FC<IBaseRoomProps> = ({ member, room, powerLevels,
     });
 
     const muteLabel = muted ? _t("Unmute") : _t("Mute");
-    return <AccessibleButton className={classes} onClick={onMuteToggle}>
+    return <AccessibleButton
+        kind="link"
+        className={classes}
+        onClick={onMuteToggle}
+    >
         { muteLabel }
     </AccessibleButton>;
 };
@@ -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 = (
-            <AccessibleButton onClick={onSynapseDeactivate} className="mx_UserInfo_field mx_UserInfo_destructive">
+            <AccessibleButton
+                kind="link"
+                className="mx_UserInfo_field mx_UserInfo_destructive"
+                onClick={onSynapseDeactivate}
+            >
                 { _t("Deactivate user") }
             </AccessibleButton>
         );
@@ -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 = (<div className="mx_UserInfo_container_verifyButton">
                 <AccessibleButton
+                    kind="link"
                     className="mx_UserInfo_field mx_UserInfo_verifyButton"
                     onClick={() => {
                         if (hasCrossSigningKeys) {
@@ -1303,7 +1346,7 @@ const BasicUserInfo: React.FC<{
                 >
                     { _t("Verify") }
                 </AccessibleButton>
-            );
+            </div>);
         } 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 = (<div>
             <AccessibleButton
+                kind="link"
                 className="mx_UserInfo_field"
                 onClick={() => {
                     dis.dispatch({