Skip to content

Commit

Permalink
fix(command): updating style (#468)
Browse files Browse the repository at this point in the history
* fix(style-command): updating style

I changed the command tag style to new discord style

* Changing command tag

* Updating demo

I ended up uploading the old file I had here and changed things by mistake

* fix: updating padding

* fix: updating svg

I removed the duplicate svg tag and fixed the existing svg tag
  • Loading branch information
eumarciel404 authored Sep 5, 2024
1 parent 9b387bc commit d41e346
Show file tree
Hide file tree
Showing 3 changed files with 27 additions and 6 deletions.
4 changes: 2 additions & 2 deletions packages/core/demo/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -449,7 +449,7 @@ <h3 class="title">Replies in Compact Mode</h3>
<h3 class="title">Commands</h3>
<discord-messages>
<discord-message profile="skyra">
<discord-command slot="reply" profile="favna" command="/ping"></discord-command>
<discord-command slot="reply" profile="favna" command="ping"></discord-command>
Pong!
</discord-message>
<discord-message profile="skyra" ephemeral>
Expand All @@ -467,7 +467,7 @@ <h3 class="title">Commands with deleted message</h3>
<h3 class="title">Commands in Compact Mode</h3>
<discord-messages compact-mode>
<discord-message profile="skyra">
<discord-command slot="reply" profile="favna" command="/ping"></discord-command>
<discord-command slot="reply" profile="favna" command="ping"></discord-command>
Pong!
</discord-message>
<discord-message profile="skyra" ephemeral>
Expand Down
16 changes: 12 additions & 4 deletions packages/core/src/components/discord-command/DiscordCommand.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import type { LightTheme, Profile } from '../../types.js';
import { messagesCompactMode, messagesLightTheme } from '../discord-messages/DiscordMessages.js';
import { DiscordReply } from '../discord-reply/DiscordReply.js';
import CommandIcon from '../svgs/CommandIcon.js';
import CommandIconName from '../svgs/CommandIconName.js';

@customElement('discord-command')
export class DiscordCommand extends LitElement implements LightTheme {
Expand All @@ -19,13 +20,20 @@ export class DiscordCommand extends LitElement implements LightTheme {
DiscordReply.styles,
css`
:host .discord-command-name {
color: #00aff4;
color: color-mix(in oklab, hsl(200 calc(1 * 100%) 49.4% / 1) 100%, black 0%) !important;
font-weight: 500;
background-color: #3c4270;
border-radius: 3px;
display: flex;
padding: 0 5px;
align-items: center;
gap: 2px;
}
:host .discord-command-name:hover {
color: #00aff4;
text-decoration: underline;
color: #fffffd !important;
background-color: #5865f2;
cursor: default !important;
}
:host .discord-replied-message-username {
Expand Down Expand Up @@ -95,7 +103,7 @@ export class DiscordCommand extends LitElement implements LightTheme {
)}
<span class="discord-replied-message-username" style=${styleMap({ color: profile.roleColor ?? '' })}>${profile.author}</span>
<span> used </span>
<div class="discord-replied-message-content discord-command-name">${this.command}</div>
<div class="discord-replied-message-content discord-command-name">${CommandIconName()}<span>${this.command}</span></div>
`;
}
}
Expand Down
13 changes: 13 additions & 0 deletions packages/core/src/components/svgs/CommandIconName.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import { html, svg } from 'lit';
import { spread } from '../../spread.js';

const svgContent = svg`
<path fill="currentColor" d="M2.06 7.61c-.25.95.31 1.92 1.26 2.18l4.3 1.15c.94.25 1.91-.31 2.17-1.26l1.15-4.3c.25-.94-.31-1.91-1.26-2.17l-4.3-1.15c-.94-.25-1.91.31-2.17 1.26l-1.15 4.3ZM12.98 7.87a2 2 0 0 0 1.75 2.95H20a2 2 0 0 0 1.76-2.95l-2.63-4.83a2 2 0 0 0-3.51 0l-2.63 4.83ZM5.86 13.27a.89.89 0 0 1 1.28 0l.75.77a.9.9 0 0 0 .54.26l1.06.12c.5.06.85.52.8 1.02l-.13 1.08c-.02.2.03.42.14.6l.56.92c.27.43.14 1-.28 1.26l-.9.58a.92.92 0 0 0-.37.48l-.36 1.02a.9.9 0 0 1-1.15.57l-1-.36a.89.89 0 0 0-.6 0l-1 .36a.9.9 0 0 1-1.15-.57l-.36-1.02a.92.92 0 0 0-.37-.48l-.9-.58a.93.93 0 0 1-.28-1.26l.56-.93c.11-.17.16-.38.14-.59l-.12-1.08c-.06-.5.3-.96.8-1.02l1.05-.12a.9.9 0 0 0 .54-.26l.75-.77ZM18.52 13.71a1.1 1.1 0 0 0-2.04 0l-.46 1.24c-.19.5-.57.88-1.07 1.07l-1.24.46a1.1 1.1 0 0 0 0 2.04l1.24.46c.5.19.88.57 1.07 1.07l.46 1.24c.35.95 1.7.95 2.04 0l.46-1.24c.19-.5.57-.88 1.07-1.07l1.24-.46a1.1 1.1 0 0 0 0-2.04l-1.24-.46a1.8 1.8 0 0 1-1.07-1.07l-.46-1.24Z">
</path>
`;

export default function CommandIconName(props: Record<string, unknown> = {}) {
return html`<svg ${spread(props)} class="discord-command-icon-name" aria-hidden="false" width="10" height="10" viewBox="0 0 24 24" fill="none">
${svgContent}
</svg>`;
}

0 comments on commit d41e346

Please sign in to comment.