Show mobile nav bar badges as pills

app/assets/stylesheets/application.scss

@@ -39,6 +39,7 @@
 
 @import
 "overrides/alerts",
+"overrides/badges",
 "overrides/bootstrap-datetimepicker",
 "overrides/buttons",
 "overrides/colors",

app/assets/stylesheets/components/_mobile-nav.scss

@@ -13,6 +13,10 @@
         padding-top: 8px;
         font-size: 20px;
       }
+
+      .badge {
+        float: right;
+      }
     }
   }
 }

app/assets/stylesheets/overrides/_badges.scss

@@ -0,0 +1,6 @@
+@each $color in $color-names {
+  .badge-#{$color} {
+    color: var(--#{$color});
+    background-color: RGB(var(--#{$color}-text));
+  }
+}

app/views/navigation/_mobile.haml

@@ -7,7 +7,9 @@
       = nav_entry t('views.navigation.inbox'), '/inbox', badge: inbox_count, icon: 'inbox', icon_only: true
       - if APP_CONFIG.dig(:features, :discover, :enabled) || current_user.mod?
         = nav_entry t('views.navigation.discover'), discover_path, icon: 'compass', icon_only: true
-      = nav_entry t('views.navigation.notifications'), '/notifications', badge: notification_count, icon: notifications_icon, icon_only: true
+      = nav_entry t('views.navigation.notifications'), '/notifications',
+        badge: notification_count, badge_color: 'light', badge_pill: true,
+        icon: notifications_icon, icon_only: true
       %li.nav-item.profile--image-dropdown
         %a.nav-link{ href: '#', data: { toggle: 'dropdown', target: '#rs-mobile-nav-profile' }, aria: { controls: 'rs-mobile-nav-profile', expanded: 'false' } }
           %img.avatar-md.d-inline{ src: current_user.profile_picture.url(:small) }