fixed some bugs

flightscore/src/components/ui-badge.ts

@@ -2,11 +2,11 @@
 import { LitElement, html, css } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
-export type BadgeVariant = 'accent' | 'success' | 'warning' | 'muted' | 'error';
+export type BadgeVariant = 'accent' | 'success' | 'warning' | 'error' | 'muted';
 
 @customElement('ui-badge')
 export class UiBadge extends LitElement {
-    static styles = css`
+  static styles = css`
     :host {
       display: inline-flex;
     }
@@ -25,14 +25,21 @@ export class UiBadge extends LitElement {
       white-space: nowrap;
     }
 
+    .icon {
+      display: inline-flex;
+      align-items: center;
+    }
+
+    .icon ::slotted(svg) {
+      width: 0.85rem;
+      height: 0.85rem;
+      flex-shrink: 0;
+    }
+
     .badge.accent {
       color: var(--color-accent);
       background: color-mix(in srgb, var(--color-accent) 10%, transparent);
-      border-color: color-mix(
-        in srgb,
-        var(--color-accent) 25%,
-        transparent
-      );
+      border-color: color-mix(in srgb, var(--color-accent) 25%, transparent);
     }
 
     .badge.success {
@@ -47,33 +54,27 @@ export class UiBadge extends LitElement {
       border-color: color-mix(in srgb, #e79d13 25%, transparent);
     }
 
-    .badge.muted {
-      color: color-mix(in srgb, var(--color-text) 45%, transparent);
-      background: color-mix(in srgb, var(--color-text) 6%, transparent);
-      border-color: var(--color-border);
-    }
-
     .badge.error {
         color: #e5484d;
         background: color-mix(in srgb, #e5484d 10%, transparent);
         border-color: color-mix(in srgb, #e5484d 25%, transparent);
     }
 
-
-    ::slotted(svg) {
-      width: 0.85rem;
-      height: 0.85rem;
-      flex-shrink: 0;
+    .badge.muted {
+      color: color-mix(in srgb, var(--color-text) 45%, transparent);
+      background: color-mix(in srgb, var(--color-text) 6%, transparent);
+      border-color: var(--color-border);
     }
   `;
 
-    @property() variant: BadgeVariant = 'accent';
+  @property() variant: BadgeVariant = 'accent';
 
-    render() {
-        return html`
-    <span class="badge ${this.variant}">
+  render() {
+    return html`
+      <span class="badge ${this.variant}">
+        <span class="icon"><slot name="icon"></slot></span>
         <slot></slot>
-    </span>
+      </span>
     `;
-    }
+  }
 }