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 += ``;
}
if (options.action) {
- html += ``;
+ html += ``;
}
this.element.innerHTML = html;
}