Remove hover effect from user name on a DM creation UI (#10887)

cypress/e2e/invite/invite-dialog.spec.ts

@@ -164,6 +164,15 @@ describe("Invite dialog", function () {
         // Assert that the invite dialog disappears
         cy.get(".mx_InviteDialog_other").should("not.exist");
 
+        // Assert that the hovered user name on invitation UI does not have background color
+        // TODO: implement the test on room-header.spec.ts
+        cy.get(".mx_RoomHeader").within(() => {
+            cy.get(".mx_RoomHeader_name--textonly")
+                .realHover()
+                .get(".mx_RoomHeader_name--textonly:hover")
+                .should("have.css", "background-color", "rgba(0, 0, 0, 0)");
+        });
+
         // Send a message to invite the bots
         cy.getComposer().type("Hello{enter}");
 

res/css/views/rooms/_RoomHeader.pcss

@@ -80,6 +80,7 @@ limitations under the License.
     padding: 1px 4px;
     display: flex;
     user-select: none;
+    cursor: pointer;
 
     &:hover {
         background-color: $quinary-content;
@@ -102,6 +103,14 @@ limitations under the License.
         background-color: $tertiary-content;
     }
 
+    &.mx_RoomHeader_name--textonly {
+        cursor: unset;
+
+        &:hover {
+            background-color: unset;
+        }
+    }
+
     &[aria-expanded="true"] {
         background-color: $quinary-content;
 
@@ -120,11 +129,6 @@ limitations under the License.
     opacity: 0.6;
 }
 
-.mx_RoomHeader_name:not(.mx_RoomHeader_name--textonly),
-.mx_RoomHeader_avatar {
-    cursor: pointer;
-}
-
 .mx_RoomTopic {
     position: relative;
     cursor: pointer;
@@ -157,6 +161,7 @@ limitations under the License.
     flex: 0;
     margin: 0 7px;
     position: relative;
+    cursor: pointer;
 }
 
 .mx_RoomHeader_avatar .mx_BaseAvatar_image {