UX: ensures new-topic badge renders consistently

UX: ensures new-topic badge renders consistently

We previously used the “●” Unicode character for this circle. Using Unicode for this means that it’s up to the browser / OS to determine how it renders.

This commit changes it to a CSS shape so that we always get the same rendering regardless of the user’s browser / OS.

diff --git a/app/assets/stylesheets/common/components/badges.scss b/app/assets/stylesheets/common/components/badges.scss
index dc0dab3..7b83871 100644
--- a/app/assets/stylesheets/common/components/badges.scss
+++ b/app/assets/stylesheets/common/components/badges.scss
@@ -189,14 +189,15 @@
 
   &.new-topic {
     background-color: transparent;
-    color: var(--tertiary-high);
-    font-weight: normal;
-    font-size: $font-down-1;
   }
 
   &.new-topic::before {
-    content: "●";
-    margin-right: 2px;
+    content: "";
+    background: var(--tertiary-high);
+    display: inline-block;
+    height: 0.4em;
+    width: 0.4em;
+    border-radius: 50%;
   }
 
   // Click count

GitHub sha: 061ab753

1 Like

This commit has been mentioned on Discourse Meta. There might be relevant details there:

https://meta.discourse.org/t/topic-activity-indicator-blue-dot-too-large-on-some-android-devices/164457/13

Niiiice :heart_eyes:

Also, great commit message :clap:

1 Like