From 580f1a4125cbaa99cf6865f395e72586835e9729 Mon Sep 17 00:00:00 2001
From: Antonio Scandurra <me@as-cii.com>
Date: Thu, 26 May 2022 10:40:53 +0200
Subject: [PATCH] Style context menu

---
 crates/context_menu/src/context_menu.rs       | 15 ++++++-----
 .../gpui/src/elements/mouse_event_handler.rs  |  2 +-
 styles/src/styleTree/contextMenu.ts           | 26 +++++++++++++------
 styles/src/styleTree/projectPanel.ts          |  2 +-
 4 files changed, 29 insertions(+), 16 deletions(-)

diff --git a/crates/context_menu/src/context_menu.rs b/crates/context_menu/src/context_menu.rs
index d12d8c0315655b0dd85da73157c9f5b0bcfb61a6..5a740a91b930904b098d002d5bc39d697d85188a 100644
--- a/crates/context_menu/src/context_menu.rs
+++ b/crates/context_menu/src/context_menu.rs
@@ -1,6 +1,6 @@
 use gpui::{
-    elements::*, geometry::vector::Vector2F, Action, Axis, Entity, RenderContext, SizeConstraint,
-    View, ViewContext,
+    elements::*, geometry::vector::Vector2F, platform::CursorStyle, Action, Axis, Entity,
+    RenderContext, SizeConstraint, View, ViewContext,
 };
 use settings::Settings;
 
@@ -138,10 +138,10 @@ impl ContextMenu {
                             }
                             ContextMenuItem::Separator => Empty::new()
                                 .collapsed()
-                                .contained()
-                                .with_style(style.separator)
                                 .constrained()
                                 .with_height(1.)
+                                .contained()
+                                .with_style(style.separator)
                                 .boxed(),
                         }
                     }))
@@ -175,16 +175,19 @@ impl ContextMenu {
                                     .flex_float()
                                     .boxed()
                                 })
+                                .contained()
+                                .with_style(style.container)
                                 .boxed()
                         })
+                        .with_cursor_style(CursorStyle::PointingHand)
                         .on_click(move |_, _, cx| cx.dispatch_any_action(action.boxed_clone()))
                         .boxed()
                     }
                     ContextMenuItem::Separator => Empty::new()
-                        .contained()
-                        .with_style(style.separator)
                         .constrained()
                         .with_height(1.)
+                        .contained()
+                        .with_style(style.separator)
                         .boxed(),
                 }
             }))
diff --git a/crates/gpui/src/elements/mouse_event_handler.rs b/crates/gpui/src/elements/mouse_event_handler.rs
index 65cb6ed61d8717ed69e636d5e17e1ab1e77b9509..7e0281bffe553c60bc9cf02f0ca39b7c617c8953 100644
--- a/crates/gpui/src/elements/mouse_event_handler.rs
+++ b/crates/gpui/src/elements/mouse_event_handler.rs
@@ -22,7 +22,7 @@ pub struct MouseEventHandler {
     padding: Padding,
 }
 
-#[derive(Default)]
+#[derive(Default, Debug)]
 pub struct MouseState {
     pub hovered: bool,
     pub clicked: bool,
diff --git a/styles/src/styleTree/contextMenu.ts b/styles/src/styleTree/contextMenu.ts
index e0a78cafe684b4e0bee893b645a4fd741547c3b6..e1677b066647c143e55a7876ea8610cf05ab08dd 100644
--- a/styles/src/styleTree/contextMenu.ts
+++ b/styles/src/styleTree/contextMenu.ts
@@ -1,26 +1,36 @@
 import Theme from "../themes/common/theme";
-import { backgroundColor, shadow, text } from "./components";
+import { backgroundColor, borderColor, shadow, text } from "./components";
 
 export default function contextMenu(theme: Theme) {
   return {
     background: backgroundColor(theme, 300, "base"),
     cornerRadius: 6,
-    padding: {
-      bottom: 2,
-      left: 6,
-      right: 6,
-      top: 2,
-    },
+    padding: 6,
     shadow: shadow(theme),
     item: {
+      padding: { left: 4, right: 4, top: 2, bottom: 2 },
+      cornerRadius: 6,
       label: text(theme, "sans", "secondary", { size: "sm" }),
       keystroke: {
         margin: { left: 60 },
         ...text(theme, "sans", "muted", { size: "sm", weight: "bold" })
       },
+      hover: {
+        background: backgroundColor(theme, 300, "hovered"),
+        text: text(theme, "sans", "primary", { size: "sm" }),
+      },
+      active: {
+        background: backgroundColor(theme, 300, "active"),
+        text: text(theme, "sans", "primary", { size: "sm" }),
+      },
+      activeHover: {
+        background: backgroundColor(theme, 300, "hovered"),
+        text: text(theme, "sans", "active", { size: "sm" }),
+      }
     },
     separator: {
-      background: "#00ff00"
+      background: borderColor(theme, "primary"),
+      margin: { top: 2, bottom: 2 }
     },
   }
 }
\ No newline at end of file
diff --git a/styles/src/styleTree/projectPanel.ts b/styles/src/styleTree/projectPanel.ts
index 547414afc885188ebac64ca7c1cacd2a14e88ebf..2f3e3eea72195e415a2a536bc959414f857b30b9 100644
--- a/styles/src/styleTree/projectPanel.ts
+++ b/styles/src/styleTree/projectPanel.ts
@@ -1,6 +1,6 @@
 import Theme from "../themes/common/theme";
 import { panel } from "./app";
-import { backgroundColor, iconColor, player, shadow, text } from "./components";
+import { backgroundColor, iconColor, player, text } from "./components";
 
 export default function projectPanel(theme: Theme) {
   return {