From b9a2323c51a9ff6b64aecc3ddbcfcae04e285319 Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens@goauthentik.io>
Date: Sun, 5 Feb 2023 00:58:30 +0100
Subject: [PATCH] web/elements: fix ak-expand not using correct font

Signed-off-by: Jens Langhammer <jens@goauthentik.io>
---
 web/src/common/styles/authentik.css |  3 +++
 web/src/elements/Expand.ts          | 14 +++++++++++---
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/web/src/common/styles/authentik.css b/web/src/common/styles/authentik.css
index 6346e8077..bf689443e 100644
--- a/web/src/common/styles/authentik.css
+++ b/web/src/common/styles/authentik.css
@@ -237,6 +237,9 @@ html > form > input {
     .pf-c-expandable-section__toggle-icon {
         color: var(--ak-dark-foreground);
     }
+    .pf-c-expandable-section.pf-m-display-lg {
+        background-color: var(--ak-dark-background-light-ish);
+    }
     /* header for form group */
     .pf-c-form__field-group-header-title-text {
         color: var(--ak-dark-foreground);
diff --git a/web/src/elements/Expand.ts b/web/src/elements/Expand.ts
index d3b1005b9..151e28699 100644
--- a/web/src/elements/Expand.ts
+++ b/web/src/elements/Expand.ts
@@ -5,7 +5,9 @@ import { t } from "@lingui/macro";
 import { CSSResult, TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
+import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFExpandableSection from "@patternfly/patternfly/components/ExpandableSection/expandable-section.css";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
 @customElement("ak-expand")
 export class Expand extends AKElement {
@@ -19,11 +21,15 @@ export class Expand extends AKElement {
     textClosed = t`Show more`;
 
     static get styles(): CSSResult[] {
-        return [PFExpandableSection];
+        return [PFBase, PFExpandableSection, AKGlobal];
     }
 
     render(): TemplateResult {
-        return html`<div class="pf-c-expandable-section ${this.expanded ? "pf-m-expanded" : ""}">
+        return html`<div
+            class="pf-c-expandable-section pf-m-display-lg pf-m-indented ${this.expanded
+                ? "pf-m-expanded"
+                : ""}"
+        >
             <button
                 type="button"
                 class="pf-c-expandable-section__toggle"
@@ -39,7 +45,9 @@ export class Expand extends AKElement {
                     >${this.expanded ? t`${this.textOpen}` : t`${this.textClosed}`}</span
                 >
             </button>
-            <slot ?hidden=${!this.expanded} class="pf-c-expandable-section__content"></slot>
+            <div class="pf-c-expandable-section__content" ?hidden=${!this.expanded}>
+                <slot></slot>
+            </div>
         </div>`;
     }
 }