From 97206df011eb3c6969271b03400c7b31cb406000 Mon Sep 17 00:00:00 2001
From: Andreas Coroiu <andreas.coroiu@gmail.com>
Date: Thu, 24 Aug 2023 15:35:49 +0200
Subject: [PATCH] [PM-2014] fix: misaligned badge

---
 .../webauthn-login-settings.component.html     | 18 ++++++++++++++++--
 libs/components/src/badge/badge.directive.ts   |  5 +++--
 libs/components/src/badge/badge.stories.ts     |  1 +
 3 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/app/auth/settings/webauthn-login-settings/webauthn-login-settings.component.html b/apps/web/src/app/auth/settings/webauthn-login-settings/webauthn-login-settings.component.html
index 4c818a858f..81e68deaa0 100644
--- a/apps/web/src/app/auth/settings/webauthn-login-settings/webauthn-login-settings.component.html
+++ b/apps/web/src/app/auth/settings/webauthn-login-settings/webauthn-login-settings.component.html
@@ -1,8 +1,22 @@
 <h2 bitTypography="h2">
   {{ "loginWithPasskey" | i18n }}
   <ng-container *ngIf="hasData">
-    <span *ngIf="hasCredentials" bitBadge badgeType="success">{{ "on" | i18n }}</span>
-    <span *ngIf="!hasCredentials" bitBadge badgeType="secondary">{{ "off" | i18n }}</span>
+    <span
+      *ngIf="hasCredentials"
+      class="tw-align-middle"
+      bitBadge
+      badgeType="success"
+      align="middle"
+      >{{ "on" | i18n }}</span
+    >
+    <span
+      *ngIf="!hasCredentials"
+      class="tw-align-middle"
+      bitBadge
+      badgeType="secondary"
+      align="middle"
+      >{{ "off" | i18n }}</span
+    >
   </ng-container>
   <ng-container *ngIf="loading">
     <i class="bwi bwi-spinner bwi-spin tw-ml-1" aria-hidden="true"></i>
diff --git a/libs/components/src/badge/badge.directive.ts b/libs/components/src/badge/badge.directive.ts
index 14dc96edd5..640353161f 100644
--- a/libs/components/src/badge/badge.directive.ts
+++ b/libs/components/src/badge/badge.directive.ts
@@ -31,7 +31,6 @@ export class BadgeDirective {
       "tw-px-1.5",
       "tw-font-bold",
       "tw-text-center",
-      "tw-align-text-top",
       "!tw-text-contrast",
       "tw-rounded",
       "tw-border-none",
@@ -46,7 +45,8 @@ export class BadgeDirective {
     ]
       .concat(styles[this.badgeType])
       .concat(this.hasHoverEffects ? hoverStyles[this.badgeType] : [])
-      .concat(this.truncate ? ["tw-truncate", "tw-max-w-40"] : []);
+      .concat(this.truncate ? ["tw-truncate", "tw-max-w-40"] : [])
+      .concat([`tw-align-${this.align}`]);
   }
   @HostBinding("attr.title") get title() {
     return this.truncate ? this.el.nativeElement.textContent.trim() : null;
@@ -54,6 +54,7 @@ export class BadgeDirective {
 
   @Input() badgeType: BadgeTypes = "primary";
   @Input() truncate = true;
+  @Input() align = "text-top";
 
   private hasHoverEffects = false;
 
diff --git a/libs/components/src/badge/badge.stories.ts b/libs/components/src/badge/badge.stories.ts
index 5912250e0e..4cddf05ff4 100644
--- a/libs/components/src/badge/badge.stories.ts
+++ b/libs/components/src/badge/badge.stories.ts
@@ -15,6 +15,7 @@ export default {
   args: {
     badgeType: "primary",
     truncate: false,
+    align: "text-top",
   },
   parameters: {
     design: {