From cdda1224ff6375d7b24014aaf1b40d57a1dff13f Mon Sep 17 00:00:00 2001
From: Nuckyz <61953774+Nuckyz@users.noreply.github.com>
Date: Wed, 16 Jul 2025 20:23:06 -0300
Subject: [PATCH] UserVoiceShow: Improve icon in User Profile Modal V2

---
 src/plugins/userVoiceShow/components.tsx | 10 +++++++---
 src/plugins/userVoiceShow/index.tsx      |  2 +-
 src/plugins/userVoiceShow/style.css      |  5 +++++
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/plugins/userVoiceShow/components.tsx b/src/plugins/userVoiceShow/components.tsx
index d4d554ce..9d1c7211 100644
--- a/src/plugins/userVoiceShow/components.tsx
+++ b/src/plugins/userVoiceShow/components.tsx
@@ -27,6 +27,7 @@ const ActionButtonClasses = findByPropsLazy("actionButton", "highlight");
 
 interface IconProps extends React.ComponentPropsWithoutRef<"div"> {
     size?: number;
+    iconClassName?: string;
 }
 
 function SpeakerIcon(props: IconProps) {
@@ -39,6 +40,7 @@ function SpeakerIcon(props: IconProps) {
             className={classes(cl("speaker"), props.onClick != null ? cl("clickable") : undefined, props.className)}
         >
             <svg
+                className={props.iconClassName}
                 width={props.size}
                 height={props.size}
                 viewBox="0 0 24 24"
@@ -129,13 +131,14 @@ function VoiceChannelTooltip({ channel, isLocked }: VoiceChannelTooltipProps) {
 
 export interface VoiceChannelIndicatorProps {
     userId: string;
+    isProfile?: boolean;
     isActionButton?: boolean;
     shouldHighlight?: boolean;
 }
 
 const clickTimers = {} as Record<string, any>;
 
-export const VoiceChannelIndicator = ErrorBoundary.wrap(({ userId, isActionButton, shouldHighlight }: VoiceChannelIndicatorProps) => {
+export const VoiceChannelIndicator = ErrorBoundary.wrap(({ userId, isProfile, isActionButton, shouldHighlight }: VoiceChannelIndicatorProps) => {
     const channelId = useStateFromStores([VoiceStateStore], () => VoiceStateStore.getVoiceStateForUser(userId)?.channelId as string | undefined);
 
     const channel = channelId == null ? undefined : ChannelStore.getChannel(channelId);
@@ -179,8 +182,9 @@ export const VoiceChannelIndicator = ErrorBoundary.wrap(({ userId, isActionButto
             {props => {
                 const iconProps: IconProps = {
                     ...props,
-                    className: classes(isActionButton && ActionButtonClasses.actionButton, shouldHighlight && ActionButtonClasses.highlight),
-                    size: isActionButton ? 20 : undefined,
+                    className: classes(isActionButton && ActionButtonClasses.actionButton, isActionButton && shouldHighlight && ActionButtonClasses.highlight),
+                    iconClassName: classes(isProfile && cl("profile-speaker")),
+                    size: isActionButton ? 20 : 16,
                     onClick
                 };
 
diff --git a/src/plugins/userVoiceShow/index.tsx b/src/plugins/userVoiceShow/index.tsx
index 0ee41414..bc1ce30b 100644
--- a/src/plugins/userVoiceShow/index.tsx
+++ b/src/plugins/userVoiceShow/index.tsx
@@ -60,7 +60,7 @@ export default definePlugin({
             find: "#{intl::USER_PROFILE_LOAD_ERROR}",
             replacement: {
                 match: /(\.fetchError.+?\?)null/,
-                replace: (_, rest) => `${rest}$self.VoiceChannelIndicator({userId:arguments[0]?.userId})`
+                replace: (_, rest) => `${rest}$self.VoiceChannelIndicator({userId:arguments[0]?.userId,isProfile:true})`
             },
             predicate: () => settings.store.showInUserProfileModal
         },
diff --git a/src/plugins/userVoiceShow/style.css b/src/plugins/userVoiceShow/style.css
index f9fd56fb..32b42208 100644
--- a/src/plugins/userVoiceShow/style.css
+++ b/src/plugins/userVoiceShow/style.css
@@ -13,6 +13,11 @@
     color: var(--interactive-hover);
 }
 
+.vc-uvs-profile-speaker {
+    width: var(--custom-nickname-icon-size);
+    height: var(--custom-nickname-icon-size);
+}
+
 .vc-uvs-tooltip-container {
     max-width: 300px;
 }