web/admin: fix missing dark theme for notifications

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

web/src/authentik.css

@@ -7,6 +7,7 @@
     --ak-dark-background: #18191a;
     --ak-dark-background-darker: #000000;
     --ak-dark-background-light: #1c1e21;
+    --ak-dark-background-light-ish: #212427;
     --ak-dark-background-lighter: #2b2e33;
 }
 
@@ -303,6 +304,9 @@ body {
         color: var(--ak-dark-foreground);
     }
     /* notifications */
+    .pf-c-drawer__panel {
+        background-color: var(--ak-dark-background);
+    }
     .pf-c-notification-drawer {
         --pf-c-notification-drawer--BackgroundColor: var(--ak-dark-background);
     }
@@ -310,6 +314,10 @@ body {
         background-color: var(--ak-dark-background-lighter);
         color: var(--ak-dark-foreground);
     }
+    .pf-c-notification-drawer__list-item {
+        background-color: var(--ak-dark-background-light-ish);
+        color: var(--ak-dark-foreground);
+    }
     /* data list */
     .pf-c-data-list__item {
         --pf-c-data-list__item--BackgroundColor: var(--ak-dark-background-light);

web/src/elements/notifications/NotificationDrawer.ts

@@ -64,7 +64,7 @@ export class NotificationDrawer extends LitElement {
         default:
             break;
         }
-        return html`<li class="pf-c-notification-drawer__list-item pf-m-read">
+        return html`<li class="pf-c-notification-drawer__list-item">
             <div class="pf-c-notification-drawer__list-item-header">
                 <span class="pf-c-notification-drawer__list-item-header-icon ${level}">
                     <i class="fas fa-info-circle" aria-hidden="true"></i>

web/src/interfaces/AdminInterface.ts

@@ -9,6 +9,7 @@ import PFBase from "@patternfly/patternfly/patternfly-base.css";
 import PFPage from "@patternfly/patternfly/components/Page/page.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFDrawer from "@patternfly/patternfly/components/Drawer/drawer.css";
+import AKGlobal from "../authentik.css";
 
 import "../elements/router/RouterOutlet";
 import "../elements/messages/MessageContainer";
@@ -33,7 +34,7 @@ export class AdminInterface extends LitElement {
     ws: WebsocketClient;
 
     static get styles(): CSSResult[] {
-        return [PFBase, PFPage, PFButton, PFDrawer, css`
+        return [PFBase, PFPage, PFButton, PFDrawer, AKGlobal, css`
             .pf-c-page__main, .pf-c-drawer__content, .pf-c-page__drawer {
                 z-index: auto !important;
             }