Fix #37155: Simplify quick add menu icon and circle positioning (#9304)

* Fix #37155: Simplify quick add menu icon and circle positioning

* Improve for BEM

* Refactor: remove duplicate CSS class name

frontend/src/app/modules/common/header/quick-add-menu.sass

@@ -2,33 +2,19 @@
   @include breakpoint(680px down)
     display: none
 
-  &--button
+  &--icon::before
     display: flex
     justify-content: center
     align-items: center
-    position: relative
-    color: var(--button--alt-highlight-font-color)
-    font-size: 0.8rem
+    border: 2px solid var(--header-item-font-color)
+    border-radius: 50%
+    width: 26px
+    height: 26px
+    padding: 1px 8px 0 8px
+    background: var(--button--alt-highlight-background-color)
+    border-color: var(--button--alt-highlight-background-color)
 
-    > *
-      z-index: 1
-
-    &::after
-      display: block
-      background: var(--button--alt-highlight-background-color)
-      border-width: 2px
-      border-style: solid
-      border-color: var(--button--alt-highlight-background-color)
-      border-radius: 50%
-      padding: 0.25rem
-      width: 26px
-      height: 26px
-      content: ''
-      position: absolute
-
-    &:hover
-      > *
-        opacity: 0.9
-
-      &::after
-        opacity: 0.8
+  &:hover &
+    &--icon::before
+      background: var(--button--alt-highlight-background-hover-color)
+      border-color: var(--button--alt-highlight-background-hover-color)

lib/redmine/menu_manager/top_menu/quick_add_menu.rb

@@ -42,7 +42,7 @@ module Redmine::MenuManager::TopMenu::QuickAddMenu
       label: '',
       label_options: {
         title: I18n.t('menus.quick_add.label'),
-        icon: 'icon-add',
+        icon: 'icon-add op-quick-add-menu--icon',
         class: 'op-quick-add-menu--button'
       },
       items: first_level_menu_items_for(:quick_add_menu, @project),