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

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

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