[FR-266] user profile hovering fix

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@widgetbot/message-renderer",
-  "version": "v2.2.0",
+  "version": "v2.3.1",
   "description": "",
   "module": "dist/message-renderer.mjs",
   "files": [

src/Content/Embed/EmbedVideo.tsx

@@ -57,11 +57,11 @@ interface EmbedVideoProps
   extends Required<Pick<APIEmbedVideo, "width" | "height">> {
   thumbnail?: APIEmbedThumbnail["url"];
   url: APIEmbedVideo["url"] | undefined;
-  proxyUrl: APIEmbedVideo["proxy_url"] | undefined;
+  proxyUrl: APIEmbedVideo["proxy_url"] | undefined | null;
 }
 
 function EmbedVideo(props: EmbedVideoProps) {
-  if (props.proxyUrl !== undefined)
+  if (props.proxyUrl)
     return (
       <ThumbnailWrapper
         thumbnail={props.thumbnail}

src/Message/MessageAuthor.tsx

@@ -1,14 +1,14 @@
+import type { APIRole, APIUser, Snowflake } from "discord-api-types/v10";
 import * as React from "react";
 import type { ComponentProps } from "react";
 import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
 import ChatTag from "../ChatTag";
-import RoleIcon from "./RoleIcon";
-import getAvatar from "../utils/getAvatar";
-import * as Styles from "./style/author";
-import type { APIRole, APIUser, Snowflake } from "discord-api-types/v10";
 import { useConfig } from "../core/ConfigContext";
+import getAvatar from "../utils/getAvatar";
 import getDisplayName from "../utils/getDisplayName";
-import { useTranslation } from "react-i18next";
+import RoleIcon from "./RoleIcon";
+import * as Styles from "./style/author";
 
 interface AutomodAuthorProps {
   isAvatarAnimated?: boolean;
@@ -96,14 +96,19 @@ function MessageAuthor({
     return color > 0 ? `#${color.toString(16).padStart(6, "0")}` : undefined;
   }, [isGuildMember, resolveRole, member]);
 
+  const clickable = userOnClick !== undefined;
+
   if (onlyShowUsername) {
     return (
       <Styles.MessageAuthor
-        clickable={userOnClick !== undefined}
+        clickable={clickable}
         {...props}
         onClick={() => userOnClick?.(author)}
       >
-        <Styles.Username style={{ color: dominantRoleColor }}>
+        <Styles.Username
+          clickable={clickable}
+          style={{ color: dominantRoleColor }}
+        >
           {displayName}
         </Styles.Username>
       </Styles.MessageAuthor>
@@ -112,7 +117,7 @@ function MessageAuthor({
 
   return (
     <Styles.MessageAuthor
-      clickable={userOnClick !== undefined}
+      clickable={clickable}
       {...props}
       onClick={() => userOnClick?.(author)}
     >
@@ -150,9 +155,13 @@ function MessageAuthor({
           </Styles.AnimatedAvatar>
         )}
       </Styles.AnimatedAvatarTrigger>
-      <Styles.Username style={{ color: dominantRoleColor }}>
+      <Styles.Username
+        clickable={clickable}
+        style={{ color: dominantRoleColor }}
+      >
         {displayName}
       </Styles.Username>
+
       {dominantRoleIconRole !== null && (
         <RoleIcon role={dominantRoleIconRole} />
       )}

src/Message/Reactions/style.ts

@@ -39,7 +39,7 @@ export const Reaction = styled.withConfig({
   display: "flex",
   flexDirection: "row",
   alignItems: "center",
-  padding: `${theme.space.small} ${theme.space.medium}`,
+  padding: `${theme.space.xs} ${theme.space.medium}`,
   borderRadius: 8,
   cursor: "not-allowed",
   backgroundColor: theme.colors.backgroundSecondary,

src/Message/style/author.ts

@@ -15,7 +15,6 @@ export const MessageAuthor = styled.withConfig({
       true: {
         "&:hover": {
           cursor: "pointer",
-          textDecoration: "underline",
         },
       },
     },
@@ -35,6 +34,13 @@ export const Username = styled.withConfig({
   lineHeight: `1.375rem`,
 
   variants: {
+    clickable: {
+      true: {
+        "&:hover": {
+          textDecoration: "underline",
+        },
+      },
+    },
     automod: {
       true: {
         color: theme.colors.automodUsername,