cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-11-21 22:50:59 -05:00
Code Issues Projects Releases Packages Wiki Activity

feat: change colour rendering

Browse source
This commit is contained in:
Paul Makles 2022-07-15 16:17:15 +01:00
parent f3822b625d
commit 7e88e733d5
2 changed files with 28 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
external/lang vendored

@ -1 +1 @@
Subproject commit 5af7326c286f729ac6dd4cabff9dfdf7c480b631
Subproject commit 58408da6c4090dd3a7808a663eaa95b8b1da7603

41
src/components/common/user/UserShort.tsx
View file

@ -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 }}>
{masquerade?.name ?? username ?? (
<Text id="app.main.channel.unknown_user" />
)}
</span>
{el}
<BotBadge>
{masquerade ? (
<Text id="app.main.channel.bridge" />
@ -100,14 +120,7 @@ export const Username = observer(
);
}
return (
<span {...otherProps} ref={innerRef} style={{ color }}>
{prefixAt ? "@" : undefined}
{masquerade?.name ?? username ?? (
<Text id="app.main.channel.unknown_user" />
)}
</span>
);
return el;
},
);