improve submenu and improve icon buttons hover effects

4 files changed, 29 insertions, 2 deletions

diff --git a/src/App.scss b/src/App.scss
index 1f7a2b28..665d52ff 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -130,6 +130,16 @@ i[class*=icon-],
   color: var(--icon, $fallback--icon);
 }
 
+.button-unstyled:hover,
+a:hover {
+  i[class*=icon-],
+  .svg-inline--fa,
+  .iconLetter {
+    color: $fallback--text;
+    color: var(--text, $fallback--text);
+  }
+}
+
 nav {
   z-index: var(--ZI_navbar);
   color: var(--topBarText);
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index bd59cade..623af8d2 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -126,6 +126,13 @@
       }
     }
 
+    &.-has-submenu {
+      .chevron-icon {
+        margin-right: 0.25rem;
+        margin-left: 2rem;
+      }
+    }
+
     &:active, &:hover {
       background-color: $fallback--lightBg;
       background-color: var(--selectedMenuPopover, $fallback--lightBg);
diff --git a/src/components/user_list_menu/user_list_menu.vue b/src/components/user_list_menu/user_list_menu.vue
index d8da16ea..06947ab7 100644
--- a/src/components/user_list_menu/user_list_menu.vue
+++ b/src/components/user_list_menu/user_list_menu.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="UserListMenu">
     <Popover
-      trigger="click"
+      trigger="hover"
       placement="left"
       remove-padding
     >
@@ -22,9 +22,10 @@
         </div>
       </template>
       <template #trigger>
-        <button class="btn button-default dropdown-item">
+        <button class="btn button-default dropdown-item -has-submenu">
           {{ $t('lists.manage_lists') }}
           <FAIcon
+            class="chevron-icon"
             size="lg"
             icon="chevron-right"
           />
diff --git a/src/panel.scss b/src/panel.scss
index 1022758a..2e769e27 100644
--- a/src/panel.scss
+++ b/src/panel.scss
@@ -147,6 +147,15 @@
     color: var(--panelLink, $fallback--link);
   }
 
+  .button-unstyled:hover,
+  a:hover {
+    i[class*=icon-],
+    .svg-inline--fa,
+    .iconLetter {
+      color: var(--panelText);
+    }
+  }
+
   .faint {
     background-color: transparent;
     color: $fallback--faint;