diff --git a/src/plugins/userVoiceShow/components.tsx b/src/plugins/userVoiceShow/components.tsx index 6eb258bd3..8edd1303a 100644 --- a/src/plugins/userVoiceShow/components.tsx +++ b/src/plugins/userVoiceShow/components.tsx @@ -26,6 +26,7 @@ const ActionButtonClasses = findByPropsLazy("actionButton", "highlight"); interface IconProps extends React.ComponentPropsWithoutRef<"div"> { size?: number; + iconClassName?: string; } function SpeakerIcon(props: IconProps) { @@ -38,6 +39,7 @@ function SpeakerIcon(props: IconProps) { className={classes(cl("speaker"), props.onClick != null ? cl("clickable") : undefined, props.className)} > ; -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); @@ -208,8 +210,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/style.css b/src/plugins/userVoiceShow/style.css index f9fd56fbf..32b422087 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; }