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

feat(GuildItem): hover animations

Browse Source
This commit is contained in:
Puyodead1 2023-04-28 17:33:46 -04:00
parent f1742dde86
commit 2db6962485
No known key found for this signature in database
GPG Key ID: A4FA4FEC0DD353FC
1 changed files with 13 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/GuildItem.tsx
View File

@ -15,15 +15,25 @@ const Wrapper = styled(Container)`
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
transition: border-radius 0.2s ease, background-color 0.2s ease;
&:hover {
border-radius: 30%;
background-color: var(--primary);
}
`; `;
interface Props { interface Props {
guildId: string; guildId: string;
} }
/**
* List item for use in the guild sidebar
*/
function GuildItem(props: Props) { function GuildItem(props: Props) {
const app = useAppStore(); const app = useAppStore();
const guild = app.guilds.get(props.guildId); const guild = app.guilds.get(props.guildId);
if (!guild) return null; if (!guild) return null;
return ( return (
@ -42,7 +52,9 @@ function GuildItem(props: Props) {
height={48} height={48}
/> />
) : ( ) : (
<span>{guild?.acronym}</span> <span style={{ fontSize: "18px", fontWeight: "bold" }}>
{guild?.acronym}
</span>
)} )}
</Wrapper> </Wrapper>
</Tooltip> </Tooltip>