From 463b24949ee341c5d387096c40004fa79f1c72b3 Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Tue, 24 Oct 2023 09:22:58 -0400
Subject: [PATCH] Tweak notification styles

---
 styles/src/style_tree/notification_panel.ts | 43 +++++++++------------
 1 file changed, 19 insertions(+), 24 deletions(-)

diff --git a/styles/src/style_tree/notification_panel.ts b/styles/src/style_tree/notification_panel.ts
index 3b6a87946a..ecafc3c8e6 100644
--- a/styles/src/style_tree/notification_panel.ts
+++ b/styles/src/style_tree/notification_panel.ts
@@ -1,12 +1,22 @@
 import { background, border, text } from "./components"
 import { icon_button } from "../component/icon_button"
-import { useTheme } from "../theme"
-import { interactive } from "../element"
+import { useTheme, with_opacity } from "../theme"
+import { text_button } from "../component"
 
 export default function (): any {
     const theme = useTheme()
     const layer = theme.middle
 
+    const notification_text = {
+        padding: { top: 4, bottom: 4 },
+        ...text(layer, "sans", "base"),
+    }
+
+    const notification_read_text_color = with_opacity(
+        theme.middle.base.default.foreground,
+        0.6
+    )
+
     return {
         background: background(layer),
         avatar: {
@@ -31,34 +41,19 @@ export default function (): any {
             },
         },
         read_text: {
-            padding: { top: 4, bottom: 4 },
-            ...text(layer, "sans", "disabled"),
+            ...notification_text,
+            color: notification_read_text_color,
         },
-        unread_text: {
-            padding: { top: 4, bottom: 4 },
-            ...text(layer, "sans", "base"),
-        },
-        button: interactive({
-            base: {
-                ...text(theme.lowest, "sans", "on", { size: "xs" }),
-                background: background(theme.lowest, "on"),
-                padding: 4,
-                corner_radius: 6,
-                margin: { left: 6 },
-            },
-
-            state: {
-                hovered: {
-                    background: background(theme.lowest, "on", "hovered"),
-                },
-            },
+        unread_text: notification_text,
+        button: text_button({
+            variant: "ghost",
         }),
         timestamp: text(layer, "sans", "base", "disabled"),
         avatar_container: {
             padding: {
-                right: 6,
+                right: 8,
                 left: 2,
-                top: 2,
+                top: 4,
                 bottom: 2,
             },
         },