From 5132f0f876d50643e7676c2d841d3118bd73797d Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Sun, 25 Dec 2022 14:06:29 +0100
Subject: [PATCH] web/admin: more consistent label usage, use compact labels

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
---
 web/src/admin/outposts/OutpostListPage.ts | 13 +++++++------
 web/src/admin/policies/PolicyListPage.ts  |  4 ++--
 web/src/admin/sources/SourceListPage.ts   | 13 +++++++++----
 web/src/elements/Label.ts                 |  7 +++++--
 4 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/web/src/admin/outposts/OutpostListPage.ts b/web/src/admin/outposts/OutpostListPage.ts
index 1df8225db..ea09016c5 100644
--- a/web/src/admin/outposts/OutpostListPage.ts
+++ b/web/src/admin/outposts/OutpostListPage.ts
@@ -5,6 +5,7 @@ import "@goauthentik/admin/outposts/OutpostHealth";
 import "@goauthentik/admin/outposts/OutpostHealthSimple";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { uiConfig } from "@goauthentik/common/ui/config";
+import { PFColor } from "@goauthentik/elements/Label";
 import { PFSize } from "@goauthentik/elements/Spinner";
 import "@goauthentik/elements/buttons/SpinnerButton";
 import "@goauthentik/elements/forms/DeleteBulkForm";
@@ -83,12 +84,12 @@ export class OutpostListPage extends TablePage<Outpost> {
         return [
             html`<div>${item.name}</div>
                 ${item.config.authentik_host === ""
-                    ? html`<i class="pf-icon pf-icon-warning-triangle"></i>
-                          <small
-                              >${t`Warning: authentik Domain is not configured, authentication will not work.`}</small
-                          >`
-                    : html`<i class="pf-icon pf-icon-ok"></i>
-                          <small> ${t`Logging in via ${item.config.authentik_host}.`} </small>`}`,
+                    ? html`<ak-label color=${PFColor.Orange} ?compact=${true}>
+                          ${t`Warning: authentik Domain is not configured, authentication will not work.`}
+                      </ak-label>`
+                    : html`<ak-label color=${PFColor.Green} ?compact=${true}>
+                          ${t`Logging in via ${item.config.authentik_host}.`}
+                      </ak-label>`}`,
             html`${TypeToLabel(item.type)}`,
             html`<ul>
                 ${item.providersObj?.map((p) => {
diff --git a/web/src/admin/policies/PolicyListPage.ts b/web/src/admin/policies/PolicyListPage.ts
index 5c7c772c8..defe70f30 100644
--- a/web/src/admin/policies/PolicyListPage.ts
+++ b/web/src/admin/policies/PolicyListPage.ts
@@ -72,10 +72,10 @@ export class PolicyListPage extends TablePage<Policy> {
         return [
             html`<div>${item.name}</div>
                 ${(item.boundTo || 0) > 0
-                    ? html`<ak-label color=${PFColor.Green}>
+                    ? html`<ak-label color=${PFColor.Green} ?compact=${true}>
                           ${t`Assigned to ${item.boundTo} object(s).`}
                       </ak-label>`
-                    : html`<ak-label color=${PFColor.Orange}>
+                    : html`<ak-label color=${PFColor.Orange} ?compact=${true}>
                           ${t`Warning: Policy is not assigned.`}
                       </ak-label>`}`,
             html`${item.verboseName}`,
diff --git a/web/src/admin/sources/SourceListPage.ts b/web/src/admin/sources/SourceListPage.ts
index 1e82b820e..6ab639d60 100644
--- a/web/src/admin/sources/SourceListPage.ts
+++ b/web/src/admin/sources/SourceListPage.ts
@@ -5,6 +5,7 @@ import "@goauthentik/admin/sources/plex/PlexSourceForm";
 import "@goauthentik/admin/sources/saml/SAMLSourceForm";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { uiConfig } from "@goauthentik/common/ui/config";
+import { PFColor } from "@goauthentik/elements/Label";
 import "@goauthentik/elements/forms/DeleteBulkForm";
 import "@goauthentik/elements/forms/ModalForm";
 import "@goauthentik/elements/forms/ProxyForm";
@@ -82,7 +83,11 @@ export class SourceListPage extends TablePage<Source> {
         return [
             html`<a href="#/core/sources/${item.slug}">
                 <div>${item.name}</div>
-                ${item.enabled ? html`` : html`<small>${t`Disabled`}</small>`}
+                ${item.enabled
+                    ? html``
+                    : html`<ak-label color=${PFColor.Orange} ?compact=${true}>
+                          ${t`Disabled`}</ak-label
+                      >`}
             </a>`,
             html`${item.verboseName}`,
             html` <ak-forms-modal>
@@ -105,10 +110,10 @@ export class SourceListPage extends TablePage<Source> {
 
     rowInbuilt(item: Source): TemplateResult[] {
         return [
-            html`<span>
+            html`<div>
                 <div>${item.name}</div>
-                <small>${t`Built-in`}</small>
-            </span>`,
+                <ak-label color=${PFColor.Grey} ?compact=${true}> ${t`Built-in`}</ak-label>
+            </div>`,
             html`${t`Built-in`}`,
             html``,
         ];
diff --git a/web/src/elements/Label.ts b/web/src/elements/Label.ts
index f0ece9bed..62562647e 100644
--- a/web/src/elements/Label.ts
+++ b/web/src/elements/Label.ts
@@ -22,6 +22,9 @@ export class Label extends AKElement {
     @property()
     icon?: string;
 
+    @property({ type: Boolean })
+    compact = false;
+
     static get styles(): CSSResult[] {
         return [PFBase, PFLabel, AKGlobal];
     }
@@ -35,14 +38,14 @@ export class Label extends AKElement {
             case PFColor.Red:
                 return "fa-times";
             case PFColor.Grey:
-                return "fa-question-circle";
+                return "fa-info-circle";
             default:
                 return "";
         }
     }
 
     render(): TemplateResult {
-        return html`<span class="pf-c-label ${this.color}">
+        return html`<span class="pf-c-label ${this.color} ${this.compact ? "pf-m-compact" : ""}">
             <span class="pf-c-label__content">
                 <span class="pf-c-label__icon">
                     <i