Change color of activity bubble to blue and make little refactoring of sass code

frontend/src/app/features/in-app-notifications/entry/in-app-notification-entry.component.sass

@@ -74,9 +74,9 @@ $subject-font-size: 14px
     color: #7f7f7f
 
   &--reason-count
-    background: #7f7f7f
     color: white
     @include indicator-bubble
+    background: #7f7f7f
 
   &--title
     grid-area: title

frontend/src/app/features/work-packages/components/wp-activity/revision/revision-activity.component.html

@@ -5,7 +5,7 @@
   <div class="comments-number">
     <span
       *ngIf="hasUnreadNotification"
-      class="op-bubble"
+      class="comments-number--bubble op-bubble op-bubble_mini"
       data-qa-selector="revision-activity-bubble"
     ></span>
     <activity-link

frontend/src/app/features/work-packages/components/wp-activity/user/user-activity.component.html

@@ -23,7 +23,7 @@
   <div class="comments-number">
     <span
       *ngIf="hasUnreadNotification"
-      class="op-bubble"
+      class="comments-number--bubble op-bubble op-bubble_mini"
       data-qa-selector="user-activity-bubble"
     ></span>
     <activity-link

frontend/src/app/shared/components/tabs/tab-badges/tab-count.component.sass

@@ -1,13 +1,7 @@
+@import "src/assets/sass/helpers"
+
 .op-tab-count
+  @include indicator-bubble
   margin-left: 5px
-  border-radius: 0.5rem
-  min-width: 1rem
-  display: inline-block
-  font-size: 0.7rem
-  line-height: 1rem
-  min-height: 1rem
-  vertical-align: 0.1rem
+  vertical-align: text-bottom
   padding: 0 0.15rem 0 0.15rem
-  background: darkred
-  color: white
-  font-weight: bold

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

@@ -1,4 +1,6 @@
 .op-bubble
   @include indicator-bubble
-  background: darkred
 
+  &_mini
+    width: 12px
+    height: 12px

frontend/src/global_styles/content/work_packages/tabs/_activities.sass

@@ -52,13 +52,12 @@
   position: absolute
   right: 0
   top: 10px
-  line-height: 16px
-  text-align: right
+  display: flex
+  align-items: center
+  justify-content: flex-end
 
-  // These are dirty, hacky styles until we've a better understanding of what thsi should look like
-  .op-bubble
-    margin-right: 0.2rem
-    transform: scale(0.8)
+  &--bubble
+    margin-right: 5px
 
 .comments-icons
   padding: 0

frontend/src/global_styles/openproject/_mixins.sass

@@ -257,3 +257,5 @@ $scrollbar-size: 10px
   border-radius: 0.5rem
   font-size: 0.7rem
   font-weight: bold
+  background: #00A3FF
+  color: white