{{this.unreadCountLabel}}
diff --git a/plugins/chat/assets/stylesheets/common/base-common.scss b/plugins/chat/assets/stylesheets/common/base-common.scss
index ef7bfa3cd45..7f507e58b2c 100644
--- a/plugins/chat/assets/stylesheets/common/base-common.scss
+++ b/plugins/chat/assets/stylesheets/common/base-common.scss
@@ -79,67 +79,26 @@ html.ios-device.keyboard-visible body #main-outlet .full-page-chat {
}
}
-.chat-channel-unread-indicator {
- @include unselectable;
-
- width: 14px;
- height: 14px;
- border-radius: 100%;
- box-sizing: content-box;
- -webkit-touch-callout: none;
- background: var(--tertiary-med-or-tertiary);
- color: var(--secondary);
- font-size: var(--font-down-2);
- text-align: center;
-
- &.urgent {
- background: var(--success);
- color: var(--secondary);
-
- .number-wrap {
- position: relative;
- width: 100%;
- height: 100%;
-
- .number {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- }
- }
- }
-}
-
.header-dropdown-toggle.chat-header-icon {
.icon {
.chat-channel-unread-indicator {
- border-radius: 1em;
+ @include chat-unread-indicator;
border: 2px solid var(--header_background);
position: absolute;
+ top: 0;
right: 2px;
- bottom: 2px;
- transition: border-color linear 0.15s;
- &.urgent {
+ &.-urgent {
display: flex;
align-items: center;
justify-content: center;
width: auto;
- min-width: 14px;
- padding: 2px;
+ height: 1em;
+ min-width: 0.6em;
+ padding: 0.21em 0.42em;
+ top: -1px;
right: 0;
}
-
- &__number {
- font-size: 0.7rem;
- line-height: 15px;
- height: inherit;
-
- &.-too-high {
- font-size: 1.25rem;
- }
- }
}
}
diff --git a/plugins/chat/assets/stylesheets/common/chat-index.scss b/plugins/chat/assets/stylesheets/common/chat-index.scss
index ea5484bf790..05f890a4a95 100644
--- a/plugins/chat/assets/stylesheets/common/chat-index.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-index.scss
@@ -202,23 +202,14 @@
}
.chat-channel-unread-indicator {
+ @include chat-unread-indicator;
display: flex;
align-items: center;
justify-content: center;
width: auto;
- min-width: 14px;
- padding: 2px;
- font-size: var(--font-down-3);
- border-radius: 1em;
- background: var(--tertiary-med-or-tertiary);
-
- &.urgent {
- background: var(--success);
- }
-
- .number {
- line-height: 1rem;
- }
+ height: auto;
+ min-width: 0.6em;
+ padding: 0.3em 0.5em;
}
}
diff --git a/plugins/chat/assets/stylesheets/common/chat-thread-unread-indicator.scss b/plugins/chat/assets/stylesheets/common/chat-thread-unread-indicator.scss
index 2d53defad2e..eaf893aa528 100644
--- a/plugins/chat/assets/stylesheets/common/chat-thread-unread-indicator.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-thread-unread-indicator.scss
@@ -1,22 +1,12 @@
-@mixin chat-thread-unread-indicator {
+.chat-thread-header-unread-indicator,
+.chat-thread-list-item-unread-indicator {
+ @include chat-unread-indicator;
display: flex;
align-items: center;
justify-content: center;
width: auto;
- min-width: 14px;
- padding: 3px;
- font-size: 0.8rem;
+ height: auto;
+ padding: 0.21em 0.42em;
border-radius: 1em;
- background: var(--tertiary-med-or-tertiary);
-
- &__number {
- font-weight: bold;
- color: var(--secondary);
- line-height: 1;
- }
-}
-
-.chat-thread-header-unread-indicator,
-.chat-thread-list-item-unread-indicator {
- @include chat-thread-unread-indicator;
+ min-width: 0.6em;
}
diff --git a/plugins/chat/assets/stylesheets/common/chat-unread-indicator.scss b/plugins/chat/assets/stylesheets/common/chat-unread-indicator.scss
new file mode 100644
index 00000000000..9759542783b
--- /dev/null
+++ b/plugins/chat/assets/stylesheets/common/chat-unread-indicator.scss
@@ -0,0 +1,23 @@
+@mixin chat-unread-indicator {
+ @include unselectable;
+ width: 14px;
+ height: 14px;
+ border-radius: 1em;
+ box-sizing: content-box;
+ -webkit-touch-callout: none;
+ background: var(--tertiary-med-or-tertiary);
+ color: var(--secondary);
+ font-size: var(--font-down-2);
+ text-align: center;
+ transition: border-color linear 0.15s;
+
+ &.-urgent {
+ background: var(--success);
+ color: var(--secondary);
+ }
+
+ &__number {
+ color: var(--secondary);
+ line-height: var(--line-height-small);
+ }
+}
diff --git a/plugins/chat/assets/stylesheets/common/index.scss b/plugins/chat/assets/stylesheets/common/index.scss
index 615c965b58e..a315be7e605 100644
--- a/plugins/chat/assets/stylesheets/common/index.scss
+++ b/plugins/chat/assets/stylesheets/common/index.scss
@@ -1,3 +1,4 @@
+@import "chat-unread-indicator";
@import "chat-height-mixin";
@import "base-common";
@import "sidebar-extensions";
diff --git a/plugins/chat/assets/stylesheets/mobile/base-mobile.scss b/plugins/chat/assets/stylesheets/mobile/base-mobile.scss
index 06d1399a44d..56dd7f16174 100644
--- a/plugins/chat/assets/stylesheets/mobile/base-mobile.scss
+++ b/plugins/chat/assets/stylesheets/mobile/base-mobile.scss
@@ -102,5 +102,8 @@ html.has-full-page-chat {
color: var(--primary-medium);
}
}
+ .chat-channel-unread-indicator {
+ border-color: var(--primary-very-low);
+ }
}
}
diff --git a/plugins/chat/spec/system/message_notifications_with_sidebar_spec.rb b/plugins/chat/spec/system/message_notifications_with_sidebar_spec.rb
index e4680f39604..f10aa455ef9 100644
--- a/plugins/chat/spec/system/message_notifications_with_sidebar_spec.rb
+++ b/plugins/chat/spec/system/message_notifications_with_sidebar_spec.rb
@@ -129,7 +129,7 @@ RSpec.describe "Message notifications - with sidebar", type: :system do
end
expect(page).to have_no_css(
- ".chat-header-icon .chat-channel-unread-indicator.urgent",
+ ".chat-header-icon .chat-channel-unread-indicator.-urgent",
)
end
end
@@ -146,7 +146,7 @@ RSpec.describe "Message notifications - with sidebar", type: :system do
creator: user_1,
)
end
- expect(page).to have_css(".chat-header-icon .chat-channel-unread-indicator.urgent")
+ expect(page).to have_css(".chat-header-icon .chat-channel-unread-indicator.-urgent")
end
end
end
@@ -178,7 +178,7 @@ RSpec.describe "Message notifications - with sidebar", type: :system do
end
expect(page).to have_css(
- ".chat-header-icon .chat-channel-unread-indicator.urgent",
+ ".chat-header-icon .chat-channel-unread-indicator.-urgent",
text: "1",
)
expect(page).to have_css(".sidebar-row.channel-#{channel_1.id} .icon.urgent")