[OP-19459] Use Primer Counter in notifications menu

Switches from custom CSS implementation to `Primer::Beta::Counter` for
rendering counters in menu on Notifications page. Fixes clipping of
larger notification numbers (≥ 3 digits), including applying rounding
of very large numbers (e.g. `4k+`).

https://community.openproject.org/wp/OP-19459

app/components/open_project/common/submenu_component.html.erb

@@ -48,7 +48,13 @@
               </span>
 
               <% if menu_item.count %>
-                <span class="op-bubble op-bubble_alt_highlighting" data-test-selector="op-submenu--item-count"><%= menu_item.count %></span>
+                <%= render Primer::Beta::Counter.new(
+                      count: menu_item.count,
+                      scheme: :primary,
+                      hide_if_zero: true,
+                      round: true,
+                      test_selector: "op-submenu--item-count"
+                    ) %>
               <% end %>
             </a>
           </li>
@@ -90,7 +96,13 @@
                 </span>
 
                 <% if child_item.count %>
-                  <span class="op-bubble op-bubble_alt_highlighting" data-test-selector="op-submenu--item-count"><%= child_item.count %></span>
+                  <%= render Primer::Beta::Counter.new(
+                        count: child_item.count,
+                        scheme: :secondary,
+                        hide_if_zero: true,
+                        round: true,
+                        test_selector: "op-submenu--item-count"
+                      ) %>
                 <% end %>
               </a>
             </li>

frontend/src/global_styles/common/bubble/bubble.sass

@@ -1,9 +1,6 @@
 .op-bubble
   @include indicator-bubble
 
-  &_alt_highlighting
-    background: #878787
-
   &_squared
     padding: 0