From 0b34f7020551d76761a72a2d52599fb46e9f6582 Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Fri, 23 Jul 2021 21:27:56 +0200
Subject: [PATCH] web/admin: fix missing dark theme for notifications

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
---
 web/src/authentik.css                                | 8 ++++++++
 web/src/elements/notifications/NotificationDrawer.ts | 2 +-
 web/src/interfaces/AdminInterface.ts                 | 3 ++-
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/web/src/authentik.css b/web/src/authentik.css
index 486dac231..dc1e637c0 100644
--- a/web/src/authentik.css
+++ b/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);
diff --git a/web/src/elements/notifications/NotificationDrawer.ts b/web/src/elements/notifications/NotificationDrawer.ts
index 16b1f0043..74fd8df32 100644
--- a/web/src/elements/notifications/NotificationDrawer.ts
+++ b/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>
diff --git a/web/src/interfaces/AdminInterface.ts b/web/src/interfaces/AdminInterface.ts
index ebf3eb35f..62df74ed4 100644
--- a/web/src/interfaces/AdminInterface.ts
+++ b/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;
             }