Tweak notification styles (#3161)

Nate Butler created 2 years ago

[[PR Description]]

Tweak notification visual styles

Release Notes:

- (Added|Fixed|Improved) ...
([#<public_issue_number_if_exists>](https://github.com/zed-industries/community/issues/<public_issue_number_if_exists>)).

Change summary

assets/settings/default.json                |  2 
styles/src/style_tree/notification_panel.ts | 43 ++++++++++------------
2 files changed, 20 insertions(+), 25 deletions(-)

Detailed changes

assets/settings/default.json

@@ -148,7 +148,7 @@
     // Where to dock channels panel. Can be 'left' or 'right'.
     "dock": "right",
     // Default width of the channels panel.
-    "default_width": 240
+    "default_width": 380
   },
   "assistant": {
     // Whether to show the assistant panel button in the status bar.

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,
             },
         },