From e304199b6fb089e71593ee8c189d6bfce0140af8 Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Thu, 11 Jan 2024 11:59:49 +0800
Subject: [PATCH] :lipsticks: menu action

---
 app/src/assets/scss/component/_list.scss |  1 +
 app/src/assets/scss/component/_menu.scss | 18 +++++++++++++-----
 app/src/menus/Menu.ts                    |  2 +-
 3 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/app/src/assets/scss/component/_list.scss b/app/src/assets/scss/component/_list.scss
index 2c07bf97d..8b59871ec 100644
--- a/app/src/assets/scss/component/_list.scss
+++ b/app/src/assets/scss/component/_list.scss
@@ -226,6 +226,7 @@
       padding: 0 4px;
       margin-left: 4px;
       display: flex;
+      translate: var(--b3-transition);
 
       svg {
         height: 14px;
diff --git a/app/src/assets/scss/component/_menu.scss b/app/src/assets/scss/component/_menu.scss
index 419184c37..1480cdad3 100644
--- a/app/src/assets/scss/component/_menu.scss
+++ b/app/src/assets/scss/component/_menu.scss
@@ -214,7 +214,7 @@
       background-color: var(--b3-list-hover);
 
       & > .b3-menu__action {
-        opacity: .68;
+        opacity: 1;
       }
     }
 
@@ -236,15 +236,23 @@
 
   &__action {
     opacity: 0;
-    width: 16px;
-    height: 16px;
+    width: 22px;
+    height: 22px;
     align-self: center;
     margin-left: 8px;
-    color: var(--b3-theme-on-surface);
+    color: var(--b3-theme-on-surface-light);
+    border-radius: var(--b3-border-radius);
+    padding: 4px;
+    box-sizing: border-box;
+    translate: var(--b3-transition);
 
     &:hover {
-      opacity: 1;
       color: var(--b3-theme-on-background);
+      background-color: var(--b3-list-icon-hover);
+    }
+
+    &--close:hover {
+      background-color: transparent;
     }
   }
 
diff --git a/app/src/menus/Menu.ts b/app/src/menus/Menu.ts
index 27d92ec88..960730c61 100644
--- a/app/src/menus/Menu.ts
+++ b/app/src/menus/Menu.ts
@@ -222,7 +222,7 @@ export class MenuItem {
                 html += `<span class="b3-menu__accelerator">${updateHotkeyTip(options.accelerator)}</span>`;
             }
             if (options.action) {
-                html += `<svg class="b3-menu__action"><use xlink:href="#${options.action}"></use></svg>`;
+                html += `<svg class="b3-menu__action${options.action === "iconCloseRound" ? " b3-menu__action--close" : ""}"><use xlink:href="#${options.action}"></use></svg>`;
             }
             this.element.innerHTML = html;
         }