web: fix minor styling issues

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

web/src/authentik.css

@@ -268,6 +268,10 @@ body {
     .pf-c-toggle-group__button:not(.pf-m-selected) {
         background-color: var(--ak-dark-background-light) !important;
     }
+    .pf-c-toggle-group__button.pf-m-selected {
+        color: var(--ak-dark-foreground) !important;
+        background-color: var(--pf-global--primary-color--100) !important;
+    }
     /* inputs help text */
     .pf-c-form__helper-text:not(.pf-m-error) {
         color: var(--ak-dark-foreground);

web/src/elements/buttons/ActionButton.ts

@@ -5,6 +5,7 @@ import { MessageLevel } from "../messages/Message";
 
 @customElement("ak-action-button")
 export class ActionButton extends SpinnerButton {
+
     @property({ attribute: false })
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     apiRequest: () => Promise<any> = () => {

web/src/elements/buttons/SpinnerButton.ts

@@ -16,6 +16,7 @@ import { ERROR_CLASS, PRIMARY_CLASS, PROGRESS_CLASS, SUCCESS_CLASS } from "../..
 
 @customElement("ak-spinner-button")
 export class SpinnerButton extends LitElement {
+
     @property({ type: Boolean })
     isRunning = false;
 
@@ -79,7 +80,7 @@ export class SpinnerButton extends LitElement {
             }}
         >
             ${this.isRunning
-                ? html` <span class="pf-c-button__progress">
+                ? html`<span class="pf-c-button__progress">
                       <ak-spinner size=${PFSize.Medium}></ak-spinner>
                   </span>`
                 : ""}

web/src/pages/events/RuleListPage.ts

@@ -80,7 +80,7 @@ export class RuleListPage extends TablePage<NotificationRule> {
             html`${item.name}`,
             html`${item.severity}`,
             html`${item.groupObj?.name || t`None (rule disabled)`}`,
-            html` <ak-forms-modal>
+            html`<ak-forms-modal>
                 <span slot="submit"> ${t`Update`} </span>
                 <span slot="header"> ${t`Update Notification Rule`} </span>
                 <ak-event-rule-form slot="form" .instancePk=${item.pk}> </ak-event-rule-form>
@@ -112,8 +112,6 @@ export class RuleListPage extends TablePage<NotificationRule> {
                     </p>
                     <ak-bound-policies-list .target=${item.pk}> </ak-bound-policies-list>
                 </div>
-            </td>
-            <td></td>
-            <td></td>`;
+            </td>`;
     }
 }

web/src/pages/events/TransportListPage.ts

@@ -87,6 +87,7 @@ export class TransportListPage extends TablePage<NotificationTransport> {
                     </button>
                 </ak-forms-modal>
                 <ak-action-button
+                    class="pf-m-plain"
                     .apiRequest=${() => {
                     return new EventsApi(DEFAULT_CONFIG).eventsTransportsTestCreate({
                         uuid: item.pk || "",