feat: change colour rendering

src/components/common/user/UserShort.tsx

@@ -26,7 +26,10 @@ const BotBadge = styled.div`
     border-radius: calc(var(--border-radius) / 2);
 `;
 
-type UsernameProps = JSX.HTMLAttributes<HTMLElement> & {
+type UsernameProps = Omit<
+    JSX.HTMLAttributes<HTMLElement>,
+    "children" | "as"
+> & {
     user?: User;
     prefixAt?: boolean;
     masquerade?: API.Masquerade;
@@ -35,6 +38,13 @@ type UsernameProps = JSX.HTMLAttributes<HTMLElement> & {
     innerRef?: Ref<any>;
 };
 
+const Name = styled.span<{ colour?: string | null }>`
+    background: ${(props) => props.colour ?? "var(--foreground)"};
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+`;
+
 export const Username = observer(
     ({
         user,
@@ -65,6 +75,11 @@ export const Username = observer(
                         }
                     }
 
+                    const role = member.hoistedRole;
+                    if (role) {
+                        color = role[1].colour;
+                    }
+
                     if (member.roles && member.roles.length > 0) {
                         const srv = client.servers.get(member._id.server);
                         if (srv?.roles) {
@@ -81,14 +96,19 @@ export const Username = observer(
             }
         }
 
+        const el = (
+            <Name {...otherProps} ref={innerRef} colour={color}>
+                {prefixAt ? "@" : undefined}
+                {masquerade?.name ?? username ?? (
+                    <Text id="app.main.channel.unknown_user" />
+                )}
+            </Name>
+        );
+
         if (user?.bot) {
             return (
                 <>
-                    <span {...otherProps} ref={innerRef} style={{ color }}>
+                    {el}
-                        {masquerade?.name ?? username ?? (
-                            <Text id="app.main.channel.unknown_user" />
-                        )}
-                    </span>
                     <BotBadge>
                         {masquerade ? (
                             <Text id="app.main.channel.bridge" />
@@ -100,14 +120,7 @@ export const Username = observer(
             );
         }
 
-        return (
+        return el;
-            <span {...otherProps} ref={innerRef} style={{ color }}>
-                {prefixAt ? "@" : undefined}
-                {masquerade?.name ?? username ?? (
-                    <Text id="app.main.channel.unknown_user" />
-                )}
-            </span>
-        );
     },
 );