Style and position badges on mobile nav

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

@@ -19,7 +19,9 @@
       }
 
       .badge {
-        float: right;
+        position: absolute;
+        top: 4px;
+        transform: translateX(16px);
       }
     }
   }

app/helpers/application_helper.rb

@@ -23,11 +23,10 @@ module ApplicationHelper
       end
     end
     unless options[:badge].nil?
-      # TODO: make this prettier?
-      body << " #{
-        content_tag(:span, options[:badge], class: ("badge#{
-          " badge-#{options[:badge_color]}" unless options[:badge_color].nil?
-        }"))}"
+      badge_class = "badge"
+      badge_class << " badge-#{options[:badge_color]}" unless options[:badge_color].nil?
+      badge_class << " badge-pill" if options[:badge_pill]
+      body << " #{content_tag(:span, options[:badge], class: badge_class)}"
     end
 
     content_tag(:li, link_to(body.html_safe, path, class: "nav-link"), class: classes)

app/views/navigation/_mobile.haml

@@ -4,11 +4,13 @@
   .container{ class: ios_web_app? ? 'ios-web-app' : '' }
     %ul.nav.navbar-nav.navbar-icon-row
       = nav_entry t('views.navigation.timeline'), root_path, icon: 'home', icon_only: true
-      = nav_entry t('views.navigation.inbox'), '/inbox', badge: inbox_count, icon: 'inbox', icon_only: true
+      = nav_entry t('views.navigation.inbox'), '/inbox',
+        badge: inbox_count, badge_color: 'primary', badge_pill: true,
+        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, badge_color: 'light', badge_pill: true,
+        badge: notification_count, badge_color: 'primary', 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' } }