Spacebar/client
1
0
Fork 0
mirror of https://github.com/spacebarchat/client.git synced 2024-11-25 11:42:30 +01:00
Code Issues Releases Activity

mentions: hover effects only on clickable mentions

Browse Source
This commit is contained in:
Puyodead1 2023-12-09 16:22:15 -05:00
parent b0e7bb4111
commit fc7308d536
No known key found for this signature in database
GPG Key ID: A4FA4FEC0DD353FC
1 changed files with 11 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/markdown/Mention.tsx
View File

@ -9,15 +9,19 @@ import User from "../../stores/objects/User";
import { hexToRGB, rgbToHsl } from "../../utils/Utils";
import UserProfilePopout from "../UserProfilePopout";
const Container = styled.span<{ color?: string }>`
const Container = styled.span<{ color?: string; withHover?: boolean }>`
padding: 0 2px;
border-radius: 4px;
background-color: hsl(${(props) => props.color ?? "var(--primary-hsl)"} / 0.3);
${(props) =>
props.withHover &&
`
&:hover {
background-color: hsl(${(props) => props.color ?? "var(--primary-hsl)"} / 0.5);
background-color: hsl(${props.color ?? "var(--primary-hsl)"} / 0.5);
cursor: pointer;
}
`}
`;
interface MentionProps {
@ -56,7 +60,7 @@ function UserMention({ id }: MentionProps) {
);
return (
<Container onClick={click} ref={ref}>
<Container onClick={click} ref={ref} withHover>
<span>@{user.username}</span>
</Container>
);
@ -86,7 +90,7 @@ function ChannelMention({ id }: MentionProps) {
);
return (
<Container onClick={click}>
<Container onClick={click} withHover>
<span>#{channel.name}</span>
</Container>
);