web: Adjust colors, padding.

web/src/admin/applications/ApplicationViewPage.ts

@@ -35,6 +35,7 @@ import PFContent from "@patternfly/patternfly/components/Content/content.css";
 import PFDescriptionList from "@patternfly/patternfly/components/DescriptionList/description-list.css";
 import PFList from "@patternfly/patternfly/components/List/list.css";
 import PFPage from "@patternfly/patternfly/components/Page/page.css";
+import PFFlex from "@patternfly/patternfly/layouts/Flex/flex.css";
 import PFGrid from "@patternfly/patternfly/layouts/Grid/grid.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
@@ -49,6 +50,7 @@ export class ApplicationViewPage extends AKElement {
         PFButton,
         PFDescriptionList,
         PFGrid,
+        PFFlex,
         PFCard,
     ];
 
@@ -129,9 +131,25 @@ export class ApplicationViewPage extends AKElement {
         return html`<main>
             <ak-tabs>
                 ${this.missingOutpost
-                    ? html`<div slot="header" class="pf-c-banner pf-m-warning">
-                          ${msg("Warning: Application is not used by any Outpost.")}
-                      </div>`
+                    ? html`
+                          <div
+                              slot="header"
+                              class="pf-c-banner pf-m-warning"
+                              role="status"
+                              aria-live="polite"
+                          >
+                              <div class="pf-l-flex pf-m-space-items-sm">
+                                  <div class="pf-l-flex__item">
+                                      <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
+                                  </div>
+                                  <div class="pf-l-flex__item">
+                                      ${msg("Warning: Application is not used by any Outpost.", {
+                                          id: "application.outpost.missing.warning",
+                                      })}
+                                  </div>
+                              </div>
+                          </div>
+                      `
                     : nothing}
                 <section
                     role="tabpanel"
@@ -326,11 +344,29 @@ export class ApplicationViewPage extends AKElement {
                     id="page-app-entitlements"
                     aria-label="${msg("Application entitlements")}"
                 >
-                    <div slot="header" class="pf-c-banner pf-m-info">
-                        ${msg("Application entitlements are in preview.")}
-                        <a href="mailto:hello+feature/app-ent@goauthentik.io"
-                            >${msg("Send us feedback!")}</a
-                        >
+                    <div
+                        slot="header"
+                        class="pf-c-banner pf-m-info"
+                        role="status"
+                        aria-live="polite"
+                    >
+                        <div class="pf-l-flex pf-m-space-items-sm">
+                            <div class="pf-l-flex__item">
+                                <i class="fas fa-info-circle" aria-hidden="true"></i>
+                            </div>
+                            <div class="pf-l-flex__item">
+                                ${msg("Application entitlements are in preview.", {
+                                    id: "application.entitlements.preview.info",
+                                })}
+                            </div>
+                            <div class="pf-l-flex__item">
+                                <a href="mailto:hello+feature/app-ent@goauthentik.io"
+                                    >${msg("Send us feedback!", {
+                                        id: "preview.send-us-feedback",
+                                    })}</a
+                                >
+                            </div>
+                        </div>
                     </div>
                     <div class="pf-c-page__main-section pf-m-no-padding-mobile">
                         <div class="pf-c-card">

web/src/elements/Label.ts

@@ -3,12 +3,11 @@ import type { SlottedTemplateResult, Spread } from "#elements/types";
 
 import { spread } from "@open-wc/lit-helpers";
 
-import { css, html, nothing } from "lit";
+import { html, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 
 import PFLabel from "@patternfly/patternfly/components/Label/label.css";
-import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
 export enum PFColor {
     Green = "pf-m-green",
@@ -47,18 +46,7 @@ export class Label extends AKElement implements ILabel {
     @property({ type: Boolean })
     compact = false;
 
-    static styles = [
-        PFBase,
-        PFLabel,
-        css`
-            :host([theme="dark"]) {
-                .pf-m-grey {
-                    --pf-c-label__icon--Color: var(--ak-dark-background);
-                    --pf-c-label__content--Color: var(--ak-dark-background);
-                }
-            }
-        `,
-    ];
+    static styles = [PFLabel];
 
     get classesAndIcon() {
         const chrome = chromeList.find(

web/src/elements/Tabs.css

@@ -59,8 +59,4 @@ ak-tabs[vertical] {
 
 .pf-c-tabs__link {
     --pf-c-tabs__link--Color: var(--pf-global--Color--100);
-
-    &::before {
-        border-color: transparent;
-    }
 }

web/src/styles/authentik/components/Banner/banner.css

@@ -1,3 +1,18 @@
+.pf-c-banner {
+    --pf-c-banner--PaddingTop: var(--pf-global--spacer--sm);
+    --pf-c-banner--PaddingBottom: var(--pf-global--spacer--sm);
+    --pf-c-banner--link--hover--FontWeight: var(--pf-global--FontWeight--normal);
+
+    font-family: var(--pf-global--FontFamily--heading--sans-serif);
+
+    a {
+        text-decoration-color: color-mix(in srgb, currentColor 30%, transparent 70%);
+    }
+    a:hover {
+        text-decoration-color: currentColor;
+    }
+}
+
 :host([theme="dark"]) .pf-c-banner {
     &.pf-m-info,
     &.pf-m-blue,
@@ -7,6 +22,8 @@
     &.pf-m-green,
     &.pf-m-warning,
     &.pf-m-gold {
+        --pf-c-banner--Color: var(--pf-global--palette--black-900);
+        --pf-c-banner--link--Color: var(--pf-global--palette--black-900);
         color: var(--pf-global--palette--black-900);
     }
 }