From 0b41cb84f03e503b0f26c2dd3a6103f1227fe5a9 Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Fri, 15 Jan 2021 12:16:35 +0100
Subject: [PATCH] web: update styling of notification drawer to match rest

---
 web/src/authentik.css                                |  7 +++++++
 web/src/elements/notifications/NotificationDrawer.ts | 12 +++++++-----
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/web/src/authentik.css b/web/src/authentik.css
index c9aab8a9f..d7142cc17 100644
--- a/web/src/authentik.css
+++ b/web/src/authentik.css
@@ -228,4 +228,11 @@ select[multiple] {
     .form-control-static {
         color: var(--ak-dark-foreground);
     }
+    /* notifications */
+    .pf-c-notification-drawer {
+        --pf-c-notification-drawer--BackgroundColor: var(--ak-dark-background);
+    }
+    .pf-c-notification-drawer__header {
+        background-color: var(--ak-dark-background-lighter);
+    }
 }
diff --git a/web/src/elements/notifications/NotificationDrawer.ts b/web/src/elements/notifications/NotificationDrawer.ts
index 9496125ba..8739162c5 100644
--- a/web/src/elements/notifications/NotificationDrawer.ts
+++ b/web/src/elements/notifications/NotificationDrawer.ts
@@ -17,8 +17,10 @@ export class NotificationDrawer extends LitElement {
         return COMMON_STYLES.concat(
             css`
                 .pf-c-notification-drawer__header {
-                    height: 82px;
+                    height: 114px;
                     padding: var(--pf-c-page__main-section--PaddingTop) var(--pf-c-page__main-section--PaddingRight) var(--pf-c-page__main-section--PaddingBottom) var(--pf-c-page__main-section--PaddingLeft);
+                    display: flex;
+                    flex-direction: column;
                 }
             `
         );
@@ -72,13 +74,13 @@ export class NotificationDrawer extends LitElement {
         }
         return html`<div class="pf-c-drawer__body pf-m-no-padding">
             <div class="pf-c-notification-drawer">
-                <div class="pf-c-notification-drawer__header">
-                    <h1 class="pf-c-notification-drawer__header-title">
+                <div class="pf-c-notification-drawer__header pf-c-content">
+                    <h1>
                         ${gettext("Notifications")}
                     </h1>
-                    <span class="pf-c-notification-drawer__header-status">
+                    <p>
                         ${gettext(`${this.unread} unread`)}
-                    </span>
+                    </p>
                 </div>
                 <div class="pf-c-notification-drawer__body">
                     <ul class="pf-c-notification-drawer__list">