From 8c99713236a9381dd7c4c6f12c3cd673a4933298 Mon Sep 17 00:00:00 2001
From: Henriette Darge <h.darge@openproject.com>
Date: Mon, 16 Aug 2021 13:54:20 +0200
Subject: [PATCH] Change color of activity bubble to blue and make little
 refactoring of sass code

---
 .../entry/in-app-notification-entry.component.sass |  2 +-
 .../revision/revision-activity.component.html      |  2 +-
 .../wp-activity/user/user-activity.component.html  |  2 +-
 .../tabs/tab-badges/tab-count.component.sass       | 14 ++++----------
 .../src/global_styles/common/bubble/bubble.sass    |  4 +++-
 .../content/work_packages/tabs/_activities.sass    | 11 +++++------
 .../src/global_styles/openproject/_mixins.sass     |  2 ++
 7 files changed, 17 insertions(+), 20 deletions(-)

diff --git a/frontend/src/app/features/in-app-notifications/entry/in-app-notification-entry.component.sass b/frontend/src/app/features/in-app-notifications/entry/in-app-notification-entry.component.sass
index 5538acd73d..ea1662308d 100644
--- a/frontend/src/app/features/in-app-notifications/entry/in-app-notification-entry.component.sass
+++ b/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
diff --git a/frontend/src/app/features/work-packages/components/wp-activity/revision/revision-activity.component.html b/frontend/src/app/features/work-packages/components/wp-activity/revision/revision-activity.component.html
index 341cd3f54c..8078367090 100644
--- a/frontend/src/app/features/work-packages/components/wp-activity/revision/revision-activity.component.html
+++ b/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
diff --git a/frontend/src/app/features/work-packages/components/wp-activity/user/user-activity.component.html b/frontend/src/app/features/work-packages/components/wp-activity/user/user-activity.component.html
index 703a209315..6f260d7de0 100644
--- a/frontend/src/app/features/work-packages/components/wp-activity/user/user-activity.component.html
+++ b/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
diff --git a/frontend/src/app/shared/components/tabs/tab-badges/tab-count.component.sass b/frontend/src/app/shared/components/tabs/tab-badges/tab-count.component.sass
index a0a9e4d729..ab3b9d4119 100644
--- a/frontend/src/app/shared/components/tabs/tab-badges/tab-count.component.sass
+++ b/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
\ No newline at end of file
diff --git a/frontend/src/global_styles/common/bubble/bubble.sass b/frontend/src/global_styles/common/bubble/bubble.sass
index bedb146032..f80deb6fed 100644
--- a/frontend/src/global_styles/common/bubble/bubble.sass
+++ b/frontend/src/global_styles/common/bubble/bubble.sass
@@ -1,4 +1,6 @@
 .op-bubble
   @include indicator-bubble
-  background: darkred
 
+  &_mini
+    width: 12px
+    height: 12px
diff --git a/frontend/src/global_styles/content/work_packages/tabs/_activities.sass b/frontend/src/global_styles/content/work_packages/tabs/_activities.sass
index 6eada1288a..a5cfbc7f82 100644
--- a/frontend/src/global_styles/content/work_packages/tabs/_activities.sass
+++ b/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
diff --git a/frontend/src/global_styles/openproject/_mixins.sass b/frontend/src/global_styles/openproject/_mixins.sass
index 635fd2cbd3..32c55c5633 100644
--- a/frontend/src/global_styles/openproject/_mixins.sass
+++ b/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