fix: style message (#496)

* fix: add component path * fix: style of some tags Some styles were wrong * fix; margin in compact-mode The margin in comapct moder was wrong * Update package.json I made the branch worng * Update DiscordVerifiedAuthorTag.ts * Update DiscordAuthorInfo.ts * fix: margin message "text-indent" was making some parts of messages buggy * removeing "gap"
skyra-project · Nov 2, 2024 · c796dbc · c796dbc
1 parent 1b206b1
commit c796dbc
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 3 deletions.
diff --git a/packages/core/src/components/discord-author-info/DiscordAuthorInfo.ts b/packages/core/src/components/discord-author-info/DiscordAuthorInfo.ts
@@ -90,7 +90,6 @@ export class DiscordAuthorInfo extends LitElement {
 			background-color: #5865f2;
 			color: #fff;
 			font-size: 0.625em;
-			margin-left: 4px;
 			border-radius: 3px;
 			line-height: 100%;
 			text-transform: uppercase;
@@ -106,6 +105,31 @@ export class DiscordAuthorInfo extends LitElement {
 			border-radius: 0.1875rem;
 		}
 
+		:host .discord-official-application {
+			background-color: #5865f2;
+			color: #fff;
+			font-size: 0.625em;
+			margin-left: 4px;
+			border-radius: 3px;
+			line-height: 100%;
+			text-transform: uppercase;
+
+			/* Use flex layout to ensure both verified icon and "BOT" text are aligned to center */
+			display: flex;
+			align-items: center;
+
+			/* Styling taken through Inspect Element on Discord client for Windows */
+			height: 0.9375rem;
+			padding: 0 0.275rem;
+			margin-top: 0.075em;
+			border-radius: 0.1875rem;
+		}
+
+		:host([compact-mode]) .discord-official-application {
+			margin-right: 5px;
+			margin-left: 0px !important;
+		}
+
 		:host .discord-application-tag.discord-application-tag-op {
 			background-color: #c9cdfb;
 			color: #4752c4;
@@ -233,7 +257,10 @@ export class DiscordAuthorInfo extends LitElement {
 			() => html`<discord-verified-author-tag .verified=${this.verified}></discord-verified-author-tag>`
 		)}
 		${when(this.server && !this.bot && !this.officialApp, () => html`<span class="discord-application-tag">Server</span>`)}
-		${when(this.officialApp && !this.server && !this.bot, () => html`<span class="discord-application-tag">${VerifiedTick()}OFFICIAL</span>`)}
+		${when(
+			this.officialApp && !this.server && !this.bot,
+			() => html`<span class="discord-official-application">${VerifiedTick()}OFFICIAL</span>`
+		)}
 		${when(this.op, () => html`<span class="discord-application-tag discord-application-tag-op">OP</span>`)}
 		${when(
 			this.compactMode,

diff --git a/packages/core/src/components/discord-message/DiscordMessage.ts b/packages/core/src/components/discord-message/DiscordMessage.ts
@@ -190,7 +190,7 @@ export class DiscordMessage extends LitElement implements LightTheme {
 		:host([compact-mode]) .discord-message-body {
 			line-height: 1.375rem;
 			padding-left: 10px;
-			text-indent: -6px;
+			margin-left: -6px;
 		}
 
 		:host([compact-mode]) .discord-message-compact-indent {

diff --git a/packages/core/src/components/discord-verified-author-tag/DiscordVerifiedAuthorTag.ts b/packages/core/src/components/discord-verified-author-tag/DiscordVerifiedAuthorTag.ts
@@ -35,6 +35,8 @@ export class DiscordVerifiedAuthorTag extends LitElement {
 			padding-left: 10px;
 			padding-right: 4px;
 			margin-right: 0.25rem;
+			margin-left: 0px !important;
+			margin-top: 0px !important;
 		}
 
 		:host([compact-mode]) .discord-application-tag-verified {