From a113778ca7dae7fb131cf2b9ea9ba76a43513101 Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Wed, 2 Jun 2021 20:42:31 +0200
Subject: [PATCH] web/admin: fix css for dropdown toggles which are secondary

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
---
 web/src/authentik.css                       |  3 +++
 web/src/pages/flows/BoundStagesList.ts      | 28 ++++++++++-----------
 web/src/pages/policies/BoundPoliciesList.ts |  2 +-
 3 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/web/src/authentik.css b/web/src/authentik.css
index bf5b7649e..113ab0fd7 100644
--- a/web/src/authentik.css
+++ b/web/src/authentik.css
@@ -251,6 +251,9 @@ body {
     .form-help-text {
         color: var(--ak-dark-foreground);
     }
+    .pf-c-dropdown__toggle::before {
+        border-color: transparent;
+    }
     /* inputs help text */
     .pf-c-form__helper-text:not(.pf-m-error) {
         color: var(--ak-dark-foreground);
diff --git a/web/src/pages/flows/BoundStagesList.ts b/web/src/pages/flows/BoundStagesList.ts
index 551af9ad7..11b846a2f 100644
--- a/web/src/pages/flows/BoundStagesList.ts
+++ b/web/src/pages/flows/BoundStagesList.ts
@@ -135,8 +135,21 @@ export class BoundStagesList extends Table<FlowStageBinding> {
 
     renderToolbar(): TemplateResult {
         return html`
+        <ak-forms-modal>
+            <span slot="submit">
+                ${t`Create`}
+            </span>
+            <span slot="header">
+                ${t`Create Stage binding`}
+            </span>
+            <ak-stage-binding-form slot="form" targetPk=${ifDefined(this.target)}>
+            </ak-stage-binding-form>
+            <button slot="trigger" class="pf-c-button pf-m-primary">
+                ${t`Bind stage`}
+            </button>
+        </ak-forms-modal>
         <ak-dropdown class="pf-c-dropdown">
-            <button class="pf-m-primary pf-c-dropdown__toggle" type="button">
+            <button class="pf-m-secondary pf-c-button pf-c-dropdown__toggle" type="button">
                 <span class="pf-c-dropdown__toggle-text">${t`Create Stage`}</span>
                 <i class="fas fa-caret-down pf-c-dropdown__toggle-icon" aria-hidden="true"></i>
             </button>
@@ -165,19 +178,6 @@ export class BoundStagesList extends Table<FlowStageBinding> {
                 }), html`<ak-spinner></ak-spinner>`)}
             </ul>
         </ak-dropdown>
-        <ak-forms-modal>
-            <span slot="submit">
-                ${t`Create`}
-            </span>
-            <span slot="header">
-                ${t`Create Stage binding`}
-            </span>
-            <ak-stage-binding-form slot="form" targetPk=${ifDefined(this.target)}>
-            </ak-stage-binding-form>
-            <button slot="trigger" class="pf-c-button pf-m-secondary">
-                ${t`Bind stage`}
-            </button>
-        </ak-forms-modal>
         ${super.renderToolbar()}
         `;
     }
diff --git a/web/src/pages/policies/BoundPoliciesList.ts b/web/src/pages/policies/BoundPoliciesList.ts
index 5b8a72701..685a1f14b 100644
--- a/web/src/pages/policies/BoundPoliciesList.ts
+++ b/web/src/pages/policies/BoundPoliciesList.ts
@@ -188,7 +188,7 @@ export class BoundPoliciesList extends Table<PolicyBinding> {
             </button>
         </ak-forms-modal>
         <ak-dropdown class="pf-c-dropdown">
-            <button class="pf-m-secondary pf-c-dropdown__toggle" type="button">
+            <button class="pf-m-secondary pf-c-button pf-c-dropdown__toggle" type="button">
                 <span class="pf-c-dropdown__toggle-text">${t`Create Policy`}</span>
                 <i class="fas fa-caret-down pf-c-dropdown__toggle-icon" aria-hidden="true"></i>
             </button>