From d76af263ceb4b3798fded30b32c2a3d1fc7251fe Mon Sep 17 00:00:00 2001
From: Karina Kwiatek <kjk@kjk.dog>
Date: Thu, 12 Aug 2021 21:56:28 +0200
Subject: [PATCH] Style and position badges on mobile nav

---
 app/assets/stylesheets/components/_mobile-nav.scss | 4 +++-
 app/helpers/application_helper.rb                  | 9 ++++-----
 app/views/navigation/_mobile.haml                  | 6 ++++--
 3 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/app/assets/stylesheets/components/_mobile-nav.scss b/app/assets/stylesheets/components/_mobile-nav.scss
index 436bcb07..e95b65c3 100644
--- a/app/assets/stylesheets/components/_mobile-nav.scss
+++ b/app/assets/stylesheets/components/_mobile-nav.scss
@@ -19,7 +19,9 @@
       }
 
       .badge {
-        float: right;
+        position: absolute;
+        top: 4px;
+        transform: translateX(16px);
       }
     }
   }
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index 1e530e2e..1405f6af 100644
--- a/app/helpers/application_helper.rb
+++ b/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)
diff --git a/app/views/navigation/_mobile.haml b/app/views/navigation/_mobile.haml
index 5f36417d..5dd42539 100644
--- a/app/views/navigation/_mobile.haml
+++ b/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' } }