Nomchy/discord.js
1
0
Fork 0
mirror of https://github.com/discordjs/discord.js.git synced 2026-03-09 16:13:31 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): author and reply author spacing

Browse Source
This commit is contained in:
iCrawl
2023-04-29 17:44:02 +02:00
parent 496c4e2884
commit 51e8f02ef7
3 changed files with 36 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
packages/ui/src/lib/components/discord/DiscordMessages.stories.tsx
View File

@@ -126,6 +126,28 @@ export const Default = {
>
Interactions are supported! I definitely used a command.
</DiscordMessage>
<DiscordMessage
author={{
avatar: '/assets/discordjs.png',
bot: true,
verified: true,
color: 'text-red-500',
time: 'Today at 21:04',
username: 'Guide Bot',
}}
reply={{
author: {
avatar: '/assets/snek-bot.jpeg',
bot: true,
verified: true,
color: 'text-blue-500',
username: 'Snek Bot',
},
content: 'You can also have verified bots, like me!',
}}
>
Display colors are supported as well!
</DiscordMessage>
</DiscordMessages>
),
args: {

13
packages/ui/src/lib/components/discord/MessageAuthor.tsx
View File

@@ -17,14 +17,17 @@ export function DiscordMessageAuthor({ avatar, bot, verified, color, time, usern
className="absolute left-[16px] mt-0.5 h-10 w-10 cursor-pointer select-none rounded-full"
src={avatar}
/>
<h2 className="m-0 text-size-inherit font-medium leading-snug" id="user-info">
<span className="mr-1" id="username">
<span className={`cursor-pointer text-base font-medium hover:underline ${color ?? 'text-white'}`}>
<h2 className="m-0 flex place-items-center text-size-inherit font-medium leading-snug" id="user-info">
<span className="inline-flex place-items-center" id="username">
<span className={`mr-1.5 cursor-pointer text-base font-medium hover:underline ${color ?? 'text-white'}`}>
{username}
</span>
{bot ? (
<span className="relative top-1 ml-1 rounded bg-blurple px-1 vertical-top text-xs text-white" id="bot">
{verified ? <FiCheck className="mr-1 inline-block" /> : null}BOT
<span
className="mr-1 inline-flex place-items-center rounded bg-blurple px-1 vertical-top text-[0.7rem]/4 font-normal text-white"
id="bot"
>
{verified ? <FiCheck className="mr-0.5 inline-block stroke-3" /> : null} BOT
</span>
) : null}
</span>

9
packages/ui/src/lib/components/discord/MessageAuthorReply.tsx
View File

@@ -11,10 +11,13 @@ export interface IDiscordMessageAuthorReply {
export function DiscordMessageAuthorReply({ avatar, bot, verified, color, username }: IDiscordMessageAuthorReply) {
return (
<>
<img alt={`${username}'s avatar`} className="mr-1 h-4 w-4 select-none rounded-full" src={avatar} />
<img alt={`${username}'s avatar`} className="mr-1.5 h-4 w-4 select-none rounded-full" src={avatar} />
{bot ? (
<div className="mr-1 rounded bg-blurple px-1 vertical-top text-xs text-white" id="bot">
{verified ? <FiCheck className="mr-1 inline-block" /> : null}BOT
<div
className="mr-1 inline-flex place-items-center rounded bg-blurple px-1 vertical-top text-[0.7rem]/4 font-normal text-white"
id="bot"
>
{verified ? <FiCheck className="mr-0.5 inline-block stroke-3" /> : null} BOT
</div>
) : null}
<span className={`mr-1 cursor-pointer select-none text-sm font-medium leading-snug ${color ?? 'text-white'}`}>