From be1afe01e99de4b88c24f4b82fee6f6e04cf10f1 Mon Sep 17 00:00:00 2001
From: Karina Kwiatek <kjk@kjk.dog>
Date: Fri, 6 Aug 2021 00:35:27 +0200
Subject: [PATCH 01/19] Fill horizontal space on medium-sized viewports

This removes the horrible side margins on portrait tablets
---
 app/assets/stylesheets/components/_container.scss | 4 ++++
 app/views/announcement/edit.haml                  | 2 +-
 app/views/announcement/index.haml                 | 2 +-
 app/views/announcement/new.haml                   | 2 +-
 app/views/answer/show.haml                        | 2 +-
 app/views/layouts/feed.haml                       | 2 +-
 app/views/layouts/inbox.haml                      | 2 +-
 app/views/layouts/moderation.haml                 | 2 +-
 app/views/layouts/notifications.haml              | 2 +-
 app/views/layouts/user/settings.haml              | 2 +-
 app/views/settings/security/recovery_keys.haml    | 2 +-
 app/views/static/privacy_policy.haml              | 2 +-
 app/views/static/terms.haml                       | 2 +-
 13 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/app/assets/stylesheets/components/_container.scss b/app/assets/stylesheets/components/_container.scss
index 08d9bf08..789beb24 100644
--- a/app/assets/stylesheets/components/_container.scss
+++ b/app/assets/stylesheets/components/_container.scss
@@ -1,4 +1,8 @@
 .container--main {
   padding-top: map-get($spacers, 3);
   padding-bottom: map-get($spacers, 3);
+  // Sass doesn't know about the safe-area-inset-* env vars and throws a syntax error
+  // We can get around this by using unquote()
+  padding-left: unquote('max(15px, env(safe-area-inset-left))');
+  padding-right: unquote('max(15px, env(safe-area-inset-right))');
 }
\ No newline at end of file
diff --git a/app/views/announcement/edit.haml b/app/views/announcement/edit.haml
index e0a4c43b..840877ed 100644
--- a/app/views/announcement/edit.haml
+++ b/app/views/announcement/edit.haml
@@ -1,5 +1,5 @@
 - provide(:title, generate_title('Edit announcement'))
-.container.container--main
+.container-lg.container--main
   .card
     .card-body
       = bootstrap_form_for(@announcement, url: { action: 'update' }, method: 'PATCH') do |f|
diff --git a/app/views/announcement/index.haml b/app/views/announcement/index.haml
index 1cf04dda..40aa7f8f 100644
--- a/app/views/announcement/index.haml
+++ b/app/views/announcement/index.haml
@@ -1,5 +1,5 @@
 - provide(:title, generate_title('Announcements'))
-.container.container--main
+.container-lg.container--main
   - @announcements.each do |announcement|
     .card
       .card-body
diff --git a/app/views/announcement/new.haml b/app/views/announcement/new.haml
index a4495bc7..3363c72b 100644
--- a/app/views/announcement/new.haml
+++ b/app/views/announcement/new.haml
@@ -1,5 +1,5 @@
 - provide(:title, generate_title('Add new announcement'))
-.container.container--main
+.container-lg.container--main
   .card
     .card-body
       = bootstrap_form_for(@announcement, url: { action: 'create' }) do |f|
diff --git a/app/views/answer/show.haml b/app/views/answer/show.haml
index 90888280..5f84d47d 100644
--- a/app/views/answer/show.haml
+++ b/app/views/answer/show.haml
@@ -1,4 +1,4 @@
 - provide(:title, answer_title(@answer))
 - provide(:og, answer_opengraph(@answer))
-.container.container--main
+.container-lg.container--main
   = render 'answerbox', a: @answer, display_all: @display_all
diff --git a/app/views/layouts/feed.haml b/app/views/layouts/feed.haml
index a62654f7..94434e16 100644
--- a/app/views/layouts/feed.haml
+++ b/app/views/layouts/feed.haml
@@ -1,4 +1,4 @@
-.container.container--main
+.container-lg.container--main
   .row
     .col-md-3.col-sm-4.d-none.d-sm-block
       = render 'shared/sidebar'
diff --git a/app/views/layouts/inbox.haml b/app/views/layouts/inbox.haml
index 8dcff72c..8b82f9d6 100644
--- a/app/views/layouts/inbox.haml
+++ b/app/views/layouts/inbox.haml
@@ -1,4 +1,4 @@
-.container.container--main
+.container-lg.container--main
   .row
     .col-md-3.col-xs-12.col-sm-4.order-2.order-sm-1
       = render 'inbox/sidebar', delete_id: @delete_id, disabled: @disabled, inbox_count: @inbox_count
diff --git a/app/views/layouts/moderation.haml b/app/views/layouts/moderation.haml
index 46954223..22a48339 100644
--- a/app/views/layouts/moderation.haml
+++ b/app/views/layouts/moderation.haml
@@ -1,5 +1,5 @@
 = render 'navigation/moderation'
-.container.container--main
+.container-lg.container--main
   .row
     .col-md-3.col-sm-4.col-xs-12
       = render 'tabs/moderation'
diff --git a/app/views/layouts/notifications.haml b/app/views/layouts/notifications.haml
index f495ae8e..37225c3e 100644
--- a/app/views/layouts/notifications.haml
+++ b/app/views/layouts/notifications.haml
@@ -1,5 +1,5 @@
 = render 'navigation/notification'
-.container.container--main
+.container-lg.container--main
   .row
     .col-md-3.col-xs-12.col-sm-4
       = render 'tabs/notifications'
diff --git a/app/views/layouts/user/settings.haml b/app/views/layouts/user/settings.haml
index 77e5a5f6..5f238bab 100644
--- a/app/views/layouts/user/settings.haml
+++ b/app/views/layouts/user/settings.haml
@@ -1,4 +1,4 @@
-.container.container--main
+.container-lg.container--main
   .row
     .col-md-3.col-xs-12.col-sm-4
       = render 'tabs/settings'
diff --git a/app/views/settings/security/recovery_keys.haml b/app/views/settings/security/recovery_keys.haml
index c09e9164..fe7174df 100644
--- a/app/views/settings/security/recovery_keys.haml
+++ b/app/views/settings/security/recovery_keys.haml
@@ -1,4 +1,4 @@
-.container.container--main
+.container-lg.container--main
   .row.justify-content-center
     .col-md-5.totp-setup__recovery-container
       .card
diff --git a/app/views/static/privacy_policy.haml b/app/views/static/privacy_policy.haml
index 5e99850c..0f51121d 100644
--- a/app/views/static/privacy_policy.haml
+++ b/app/views/static/privacy_policy.haml
@@ -1,5 +1,5 @@
 - provide(:title, generate_title('Privacy Policy'))
-.container.container--main
+.container-lg.container--main
   .card
     .card-body
       = raw_markdown_io 'service-docs/en/policy/privacy.md'
diff --git a/app/views/static/terms.haml b/app/views/static/terms.haml
index 6650c250..b72c1002 100644
--- a/app/views/static/terms.haml
+++ b/app/views/static/terms.haml
@@ -1,5 +1,5 @@
 - provide(:title, generate_title('Terms of Service'))
-.container.container--main
+.container-lg.container--main
   .card
     .card-body
       = raw_markdown_io 'service-docs/en/policy/terms.md'

From e213041d4788a53034f596d9eadef8ed2188ef6f Mon Sep 17 00:00:00 2001
From: Karina Kwiatek <kjk@kjk.dog>
Date: Fri, 6 Aug 2021 00:36:02 +0200
Subject: [PATCH 02/19] Add mobile navigation bar

---
 app/assets/stylesheets/application.scss       |  1 +
 .../stylesheets/components/_buttons.scss      |  2 +-
 .../stylesheets/components/_mobile-nav.scss   |  9 ++++++
 app/assets/stylesheets/elements/_body.scss    |  7 ++++-
 app/views/navigation/_desktop.haml            | 21 +++++++++++++
 app/views/navigation/_main.haml               | 25 ++-------------
 app/views/navigation/_mobile.haml             | 14 +++++++++
 app/views/navigation/mobile/_profile.haml     | 31 +++++++++++++++++++
 8 files changed, 85 insertions(+), 25 deletions(-)
 create mode 100644 app/assets/stylesheets/components/_mobile-nav.scss
 create mode 100644 app/views/navigation/_desktop.haml
 create mode 100644 app/views/navigation/_mobile.haml
 create mode 100644 app/views/navigation/mobile/_profile.haml

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index c9879935..ae985778 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -81,6 +81,7 @@
 "components/inbox-entry",
 "components/jumbotron",
 "components/locales",
+"components/mobile-nav",
 "components/notifications",
 "components/profile",
 "components/question",
diff --git a/app/assets/stylesheets/components/_buttons.scss b/app/assets/stylesheets/components/_buttons.scss
index 142b73fb..e025e64b 100644
--- a/app/assets/stylesheets/components/_buttons.scss
+++ b/app/assets/stylesheets/components/_buttons.scss
@@ -11,7 +11,7 @@
   text-transform: uppercase;
   text-decoration: none;
   position: fixed;
-  bottom: 0px;
+  bottom: calc(#{$navbar-height} + env(safe-area-inset-bottom));
   right: 0px;
   margin-right: 7px;
   margin-bottom: 7px;
diff --git a/app/assets/stylesheets/components/_mobile-nav.scss b/app/assets/stylesheets/components/_mobile-nav.scss
new file mode 100644
index 00000000..422a8c75
--- /dev/null
+++ b/app/assets/stylesheets/components/_mobile-nav.scss
@@ -0,0 +1,9 @@
+#rs-mobile-nav {
+  padding-bottom: calc(env(safe-area-inset-bottom) + 4px);
+
+  .navbar-nav {
+    flex-direction: row;
+    justify-content: space-between;
+    width: 100%;
+  }
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/elements/_body.scss b/app/assets/stylesheets/elements/_body.scss
index 92aa0578..8e4cfadb 100644
--- a/app/assets/stylesheets/elements/_body.scss
+++ b/app/assets/stylesheets/elements/_body.scss
@@ -3,5 +3,10 @@ body {
   word-wrap: break-word;
   color: RGB(var(--body-text));
   background-color: var(--background);
-  padding-top: $navbar-height;
+  @include media-breakpoint-up('lg') {
+    padding-top: $navbar-height;
+  }
+  @include media-breakpoint-down('md') {
+    padding-bottom: $navbar-height;
+  }
 }
\ No newline at end of file
diff --git a/app/views/navigation/_desktop.haml b/app/views/navigation/_desktop.haml
new file mode 100644
index 00000000..731a94e3
--- /dev/null
+++ b/app/views/navigation/_desktop.haml
@@ -0,0 +1,21 @@
+%nav.navbar.navbar-themed.navbar-expand-lg.bg-primary.fixed-top.d-lg-block.d-none{ role: :navigation }
+  .container{ class: ios_web_app? ? 'ios-web-app' : '' }
+    %a.navbar-brand{ href: '/' }
+      %i.fa.fa-comments
+      = APP_CONFIG['site_name']
+    %ul.nav.navbar-nav.mr-auto
+      = nav_entry t('views.navigation.timeline'), root_path, icon: 'home'
+      = nav_entry t('views.navigation.inbox'), '/inbox', icon: 'inbox', badge: inbox_count
+      - if APP_CONFIG.dig(:features, :discover, :enabled) || current_user.mod?
+        = nav_entry t('views.navigation.discover'), discover_path, icon: 'compass'
+    %ul.nav.navbar-nav
+      - if @user.present? && @user != current_user
+        %li.nav-item.d-none.d-sm-block{ data: { toggle: 'tooltip', placement: 'bottom' }, title: t('views.actions.list') }
+          %a.nav-link{ href: '#', data: { target: '#modal-list-memberships', toggle: :modal } }
+            %i.fa.fa-list.hidden-xs
+            %span.d-none.d-sm-inline.d-md-none= t('views.actions.list')
+      = render 'navigation/main/notifications'
+      %li.nav-item.d-none.d-sm-block{ data: { toggle: 'tooltip', placement: 'bottom' }, title: t('views.actions.ask_question') }
+        %a.nav-link{ href: '#', name: 'toggle-all-ask', data: { target: '#modal-ask-followers', toggle: :modal } }
+          %i.fa.fa-pencil-square-o
+      = render 'navigation/main/profile'
\ No newline at end of file
diff --git a/app/views/navigation/_main.haml b/app/views/navigation/_main.haml
index c08b1df9..3d6398fd 100644
--- a/app/views/navigation/_main.haml
+++ b/app/views/navigation/_main.haml
@@ -1,26 +1,5 @@
-%nav.navbar.navbar-themed.navbar-expand-lg.bg-primary.fixed-top{ role: :navigation }
-  .container{ class: ios_web_app? ? 'ios-web-app' : '' }
-    %a.navbar-brand{ href: '/' }= APP_CONFIG['site_name']
-    %button.navbar-toggler{ data: { target: '#j2-main-navbar-collapse', toggle: :collapse }, type: :button }
-      %span.sr-only Toggle navigation
-      %span.navbar-toggler-icon
-    .collapse.navbar-collapse#j2-main-navbar-collapse
-      %ul.nav.navbar-nav.mr-auto
-        = nav_entry t('views.navigation.timeline'), root_path
-        = nav_entry t('views.navigation.inbox'), '/inbox', badge: inbox_count
-        - if APP_CONFIG.dig(:features, :discover, :enabled) || current_user.mod?
-          = nav_entry t('views.navigation.discover'), discover_path
-      %ul.nav.navbar-nav
-        - if @user.present? && @user != current_user
-          %li.nav-item.d-none.d-sm-block{ data: { toggle: 'tooltip', placement: 'bottom' }, title: t('views.actions.list') }
-            %a.nav-link{ href: '#', data: { target: '#modal-list-memberships', toggle: :modal } }
-              %i.fa.fa-list.hidden-xs
-              %span.d-none.d-sm-inline.d-md-none= t('views.actions.list')
-        = render 'navigation/main/notifications'
-        %li.nav-item.d-none.d-sm-block{ data: { toggle: 'tooltip', placement: 'bottom' }, title: t('views.actions.ask_question') }
-          %a.nav-link{ href: '#', name: 'toggle-all-ask', data: { target: '#modal-ask-followers', toggle: :modal } }
-            %i.fa.fa-pencil-square-o
-        = render 'navigation/main/profile'
+= render 'navigation/desktop'
+= render 'navigation/mobile'
 
 = render 'modal/ask'
 %button.btn.btn-primary.btn-fab.d-block.d-sm-none{ data: { target: '#modal-ask-followers', toggle: :modal }, type: 'button' }
diff --git a/app/views/navigation/_mobile.haml b/app/views/navigation/_mobile.haml
new file mode 100644
index 00000000..4cae1e57
--- /dev/null
+++ b/app/views/navigation/_mobile.haml
@@ -0,0 +1,14 @@
+%nav.navbar.navbar-themed.bg-primary.fixed-bottom.d-lg-none.d-block#rs-mobile-nav{ role: :navigation }
+  .container{ class: ios_web_app? ? 'ios-web-app' : '' }
+    %ul.nav.navbar-nav.mr-auto
+      .collapse.navbar-collapse#j2-mobile-navbar-collapse
+        %ul.nav.navbar-nav
+          = render 'navigation/mobile/profile'
+      = 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
+      - 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'), '#', icon: 'bell-o', icon_only: true
+      %li.nav-item.profile--image-dropdown
+        %a{ data: { target: '#j2-mobile-navbar-collapse', toggle: :collapse } }
+          %img.avatar-md.d-inline{ src: current_user.profile_picture.url(:small) }
\ No newline at end of file
diff --git a/app/views/navigation/mobile/_profile.haml b/app/views/navigation/mobile/_profile.haml
new file mode 100644
index 00000000..094a3d07
--- /dev/null
+++ b/app/views/navigation/mobile/_profile.haml
@@ -0,0 +1,31 @@
+.dropdown-menu
+  %h6.dropdown-header.d-none.d-sm-block= current_user.screen_name
+  %a.dropdown-item{ href: show_user_profile_path(current_user.screen_name) }
+    %i.fa.fa-fw.fa-user
+    = t('views.navigation.show')
+  %a.dropdown-item{ href: edit_user_registration_path }
+    %i.fa.fa-fw.fa-cog
+    = t('views.navigation.settings')
+  .dropdown-divider
+  - if current_user.has_role?(:administrator)
+    %a.dropdown-item{ href: rails_admin_path }
+      %i.fa.fa-fw.fa-cogs
+      = t('views.navigation.admin')
+    %a.dropdown-item{ href: sidekiq_web_path }
+      %i.fa.fa-fw.fa-bar-chart
+      = t('views.navigation.sidekiq')
+    %a.dropdown-item{ href: pghero_path }
+      %i.fa.fa-fw.fa-database
+      Database Monitor
+    %a.dropdown-item{ href: announcement_index_path }
+      %i.fa.fa-fw.fa-info
+      Announcements
+    .dropdown-divider
+  - if current_user.mod?
+    %a.dropdown-item{ href: moderation_path }
+      %i.fa.fa-fw.fa-gavel
+      = t('views.navigation.moderation')
+    .dropdown-divider
+  %a.dropdown-item{ href: destroy_user_session_path, data: { method: :delete } }
+    %i.fa.fa-fw.fa-sign-out
+    = t 'views.sessions.destroy'

From d27ae910c2c088d70a5e5d7a53276cc849be2482 Mon Sep 17 00:00:00 2001
From: Karina Kwiatek <kjk@kjk.dog>
Date: Fri, 6 Aug 2021 00:36:20 +0200
Subject: [PATCH 03/19] Adjust theme-color for mobile layout

---
 app/helpers/application_helper.rb | 6 +++++-
 app/helpers/theme_helper.rb       | 9 +++++++++
 app/models/theme.rb               | 4 ++++
 app/views/layouts/base.haml       | 5 +++--
 4 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index cc354420..1e530e2e 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -16,7 +16,11 @@ module ApplicationHelper
     ].compact.join(" ")
 
     unless options[:icon].nil?
-      body = "#{content_tag(:i, '', class: "mdi-#{options[:icon]}")} #{body}"
+      if options[:icon_only]
+        body = "#{content_tag(:i, '', class: "fa fa-#{options[:icon]}", title: body)}"
+      else
+        body = "#{content_tag(:i, '', class: "fa fa-#{options[:icon]}")} #{body}"
+      end
     end
     unless options[:badge].nil?
       # TODO: make this prettier?
diff --git a/app/helpers/theme_helper.rb b/app/helpers/theme_helper.rb
index 61015cb2..02b36008 100644
--- a/app/helpers/theme_helper.rb
+++ b/app/helpers/theme_helper.rb
@@ -56,6 +56,15 @@ module ThemeHelper
     end
   end
 
+  def mobile_theme_color
+    theme = get_active_theme
+    if theme
+      "##{get_hex_color_from_theme_value(theme.background_color)}"
+    else
+      '#f0edf4'
+    end
+  end
+
   def get_active_theme
     if @user&.theme
       if user_signed_in?
diff --git a/app/models/theme.rb b/app/models/theme.rb
index bcdc5d05..b627fe97 100644
--- a/app/models/theme.rb
+++ b/app/models/theme.rb
@@ -20,4 +20,8 @@ class Theme < ApplicationRecord
   def theme_color
     ('#' + ('0000000' + primary_color.to_s(16))[-6, 6])
   end
+
+  def mobile_theme_color
+    ('#' + ('0000000' + background_color.to_s(16))[-6, 6])
+  end
 end
diff --git a/app/views/layouts/base.haml b/app/views/layouts/base.haml
index 85b623d0..aaaa6ecf 100644
--- a/app/views/layouts/base.haml
+++ b/app/views/layouts/base.haml
@@ -3,8 +3,9 @@
   %head
     %meta{ charset: 'utf-8' }
     %meta{ 'http-equiv': 'X-UA-Compatible', content: 'IE=edge' }
-    %meta{ name: 'viewport', content: 'width=device-width, initial-scale=1, user-scalable=no' }
-    %meta{ name: 'theme-color', content: theme_color }
+    %meta{ name: 'viewport', content: 'width=device-width, initial-scale=1, user-scalable=no, viewport-fit=cover' }
+    %meta{ name: 'theme-color', content: theme_color, media: '(min-width: 993px)' }
+    %meta{ name: 'theme-color', content: mobile_theme_color, media: '(max-width: 992px)' }
     %link{ rel: 'apple-touch-icon', href: '/apple-touch-icon-precomposed.png' }
     %link{ rel: 'icon', href: '/images/favicon/favicon-16.png', sizes: '16x16' }
     %link{ rel: 'icon', href: '/icon-152.png', sizes: '152x152' }

From b93d0402f840476c18881fd54b3866dfd870de75 Mon Sep 17 00:00:00 2001
From: Karina Kwiatek <kjk@kjk.dog>
Date: Fri, 6 Aug 2021 13:55:01 +0200
Subject: [PATCH 04/19] Use unquote to prevent sass from erroring on
 env(safe-area-inset-bottom)

---
 app/assets/stylesheets/components/_buttons.scss    | 2 +-
 app/assets/stylesheets/components/_mobile-nav.scss | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/components/_buttons.scss b/app/assets/stylesheets/components/_buttons.scss
index e025e64b..6550b4d8 100644
--- a/app/assets/stylesheets/components/_buttons.scss
+++ b/app/assets/stylesheets/components/_buttons.scss
@@ -11,7 +11,7 @@
   text-transform: uppercase;
   text-decoration: none;
   position: fixed;
-  bottom: calc(#{$navbar-height} + env(safe-area-inset-bottom));
+  bottom: unquote('calc(#{$navbar-height} + env(safe-area-inset-bottom))');
   right: 0px;
   margin-right: 7px;
   margin-bottom: 7px;
diff --git a/app/assets/stylesheets/components/_mobile-nav.scss b/app/assets/stylesheets/components/_mobile-nav.scss
index 422a8c75..ce62f3e4 100644
--- a/app/assets/stylesheets/components/_mobile-nav.scss
+++ b/app/assets/stylesheets/components/_mobile-nav.scss
@@ -1,5 +1,5 @@
 #rs-mobile-nav {
-  padding-bottom: calc(env(safe-area-inset-bottom) + 4px);
+  padding-bottom: unquote('calc(env(safe-area-inset-bottom) + 4px)');
 
   .navbar-nav {
     flex-direction: row;

From 0886daa62d2bc12fdec23935dff1dada99545436 Mon Sep 17 00:00:00 2001
From: Karina Kwiatek <kjk@kjk.dog>
Date: Fri, 6 Aug 2021 17:00:16 +0200
Subject: [PATCH 05/19] Remove icon from brand in desktop navbar

---
 app/views/navigation/_desktop.haml | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/views/navigation/_desktop.haml b/app/views/navigation/_desktop.haml
index 731a94e3..8e17bb3a 100644
--- a/app/views/navigation/_desktop.haml
+++ b/app/views/navigation/_desktop.haml
@@ -1,7 +1,6 @@
 %nav.navbar.navbar-themed.navbar-expand-lg.bg-primary.fixed-top.d-lg-block.d-none{ role: :navigation }
   .container{ class: ios_web_app? ? 'ios-web-app' : '' }
     %a.navbar-brand{ href: '/' }
-      %i.fa.fa-comments
       = APP_CONFIG['site_name']
     %ul.nav.navbar-nav.mr-auto
       = nav_entry t('views.navigation.timeline'), root_path, icon: 'home'

From e895dedd1483bf6bbde59b38561ce0844273f0b1 Mon Sep 17 00:00:00 2001
From: Karina Kwiatek <kjk@kjk.dog>
Date: Fri, 6 Aug 2021 23:19:50 +0200
Subject: [PATCH 06/19] Make navbar icons larger

---
 app/assets/stylesheets/components/_mobile-nav.scss | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/app/assets/stylesheets/components/_mobile-nav.scss b/app/assets/stylesheets/components/_mobile-nav.scss
index ce62f3e4..807ec3e9 100644
--- a/app/assets/stylesheets/components/_mobile-nav.scss
+++ b/app/assets/stylesheets/components/_mobile-nav.scss
@@ -5,5 +5,14 @@
     flex-direction: row;
     justify-content: space-between;
     width: 100%;
+
+    .nav-link {
+      padding: 0;
+
+      .fa {
+        padding-top: 8px;
+        font-size: 20px;
+      }
+    }
   }
 }
\ No newline at end of file

From 31a8bf6f00a941a3d64d9ab6128374f02f94ccdb Mon Sep 17 00:00:00 2001
From: Karina Kwiatek <kjk@kjk.dog>
Date: Sat, 7 Aug 2021 19:18:01 +0200
Subject: [PATCH 07/19] Add mobile user menu

---
 app/assets/stylesheets/components/_mobile-nav.scss | 12 ++++++++++--
 app/views/navigation/_mobile.haml                  | 10 ++++------
 app/views/navigation/mobile/_profile.haml          |  2 +-
 3 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/app/assets/stylesheets/components/_mobile-nav.scss b/app/assets/stylesheets/components/_mobile-nav.scss
index 807ec3e9..f39b33d3 100644
--- a/app/assets/stylesheets/components/_mobile-nav.scss
+++ b/app/assets/stylesheets/components/_mobile-nav.scss
@@ -1,7 +1,7 @@
 #rs-mobile-nav {
   padding-bottom: unquote('calc(env(safe-area-inset-bottom) + 4px)');
 
-  .navbar-nav {
+  .navbar-icon-row {
     flex-direction: row;
     justify-content: space-between;
     width: 100%;
@@ -15,4 +15,12 @@
       }
     }
   }
-}
\ No newline at end of file
+}
+
+#rs-mobile-nav-profile {
+  position: fixed;
+  bottom: unquote("calc(env(safe-area-inset-bottom) + #{$navbar-height + 2px})");
+  right: unquote("calc(env(safe-area-inset-right) + 15px)");
+  left: unset;
+  top: unset;
+}
diff --git a/app/views/navigation/_mobile.haml b/app/views/navigation/_mobile.haml
index 4cae1e57..59d8b7fd 100644
--- a/app/views/navigation/_mobile.haml
+++ b/app/views/navigation/_mobile.haml
@@ -1,14 +1,12 @@
+= render 'navigation/mobile/profile'
 %nav.navbar.navbar-themed.bg-primary.fixed-bottom.d-lg-none.d-block#rs-mobile-nav{ role: :navigation }
   .container{ class: ios_web_app? ? 'ios-web-app' : '' }
-    %ul.nav.navbar-nav.mr-auto
-      .collapse.navbar-collapse#j2-mobile-navbar-collapse
-        %ul.nav.navbar-nav
-          = render 'navigation/mobile/profile'
+    %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
       - 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'), '#', icon: 'bell-o', icon_only: true
       %li.nav-item.profile--image-dropdown
-        %a{ data: { target: '#j2-mobile-navbar-collapse', toggle: :collapse } }
-          %img.avatar-md.d-inline{ src: current_user.profile_picture.url(:small) }
\ No newline at end of file
+        %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) }
diff --git a/app/views/navigation/mobile/_profile.haml b/app/views/navigation/mobile/_profile.haml
index 094a3d07..f4177cde 100644
--- a/app/views/navigation/mobile/_profile.haml
+++ b/app/views/navigation/mobile/_profile.haml
@@ -1,4 +1,4 @@
-.dropdown-menu
+.dropdown-menu#rs-mobile-nav-profile
   %h6.dropdown-header.d-none.d-sm-block= current_user.screen_name
   %a.dropdown-item{ href: show_user_profile_path(current_user.screen_name) }
     %i.fa.fa-fw.fa-user

From 38bd282b381dbc840f18947fe4481a409473c26f Mon Sep 17 00:00:00 2001
From: Karina Kwiatek <kjk@kjk.dog>
Date: Sun, 8 Aug 2021 00:13:12 +0200
Subject: [PATCH 08/19] Make notification icon show notification count badge

---
 app/views/navigation/_mobile.haml | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/app/views/navigation/_mobile.haml b/app/views/navigation/_mobile.haml
index 59d8b7fd..715f5e8b 100644
--- a/app/views/navigation/_mobile.haml
+++ b/app/views/navigation/_mobile.haml
@@ -1,4 +1,8 @@
 = render 'navigation/mobile/profile'
+:ruby
+  notification_count = Notification.for(current_user).where(new: true).count
+  notification_count = nil if notification_count.zero?
+  notifications_icon = notification_count.nil? ? 'bell-o' : 'bell'
 %nav.navbar.navbar-themed.bg-primary.fixed-bottom.d-lg-none.d-block#rs-mobile-nav{ role: :navigation }
   .container{ class: ios_web_app? ? 'ios-web-app' : '' }
     %ul.nav.navbar-nav.navbar-icon-row
@@ -6,7 +10,7 @@
       = 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'), '#', icon: 'bell-o', icon_only: true
+      = nav_entry t('views.navigation.notifications'), '/notifications', badge: notification_count, 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) }

From d86bf2bf9dbb9b4d7980949a5a35af4888de053f Mon Sep 17 00:00:00 2001
From: Karina Kwiatek <kjk@kjk.dog>
Date: Sun, 8 Aug 2021 00:23:47 +0200
Subject: [PATCH 09/19] Use notification_count helper to get notification count
 for icon badge

---
 app/views/navigation/_mobile.haml | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/app/views/navigation/_mobile.haml b/app/views/navigation/_mobile.haml
index 715f5e8b..d4df084d 100644
--- a/app/views/navigation/_mobile.haml
+++ b/app/views/navigation/_mobile.haml
@@ -1,8 +1,5 @@
 = render 'navigation/mobile/profile'
-:ruby
-  notification_count = Notification.for(current_user).where(new: true).count
-  notification_count = nil if notification_count.zero?
-  notifications_icon = notification_count.nil? ? 'bell-o' : 'bell'
+- notifications_icon = notification_count.nil? ? 'bell-o' : 'bell'
 %nav.navbar.navbar-themed.bg-primary.fixed-bottom.d-lg-none.d-block#rs-mobile-nav{ role: :navigation }
   .container{ class: ios_web_app? ? 'ios-web-app' : '' }
     %ul.nav.navbar-nav.navbar-icon-row

From aeb924cab94658d5432344ec5813891afeba9342 Mon Sep 17 00:00:00 2001
From: Karina Kwiatek <kjk@kjk.dog>
Date: Thu, 12 Aug 2021 00:33:43 +0200
Subject: [PATCH 10/19] Use correct body padding when not logged in to allow
 for top navigation bar

---
 app/assets/stylesheets/elements/_body.scss | 5 +++++
 app/views/layouts/base.haml                | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/elements/_body.scss b/app/assets/stylesheets/elements/_body.scss
index 8e4cfadb..9620b16d 100644
--- a/app/assets/stylesheets/elements/_body.scss
+++ b/app/assets/stylesheets/elements/_body.scss
@@ -9,4 +9,9 @@ body {
   @include media-breakpoint-down('md') {
     padding-bottom: $navbar-height;
   }
+
+  &.not-logged-in {
+    padding-top: $navbar-height;
+    padding-bottom: 0;
+  }
 }
\ No newline at end of file
diff --git a/app/views/layouts/base.haml b/app/views/layouts/base.haml
index aaaa6ecf..061f47b0 100644
--- a/app/views/layouts/base.haml
+++ b/app/views/layouts/base.haml
@@ -20,7 +20,7 @@
     = csrf_meta_tags
     = yield(:og)
     = yield(:meta)
-  %body
+  %body{ class: user_signed_in? ? '' : 'not-logged-in'}
     - if user_signed_in?
       = render 'navigation/main'
     - else

From 31bcc33850422863a201fbe14c722a6e4c4cb454 Mon Sep 17 00:00:00 2001
From: Karina Kwiatek <kjk@kjk.dog>
Date: Thu, 12 Aug 2021 00:34:30 +0200
Subject: [PATCH 11/19] Set the correct theme-color when top navigation is
 being used

---
 app/views/layouts/base.haml | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/app/views/layouts/base.haml b/app/views/layouts/base.haml
index 061f47b0..dab321da 100644
--- a/app/views/layouts/base.haml
+++ b/app/views/layouts/base.haml
@@ -4,8 +4,11 @@
     %meta{ charset: 'utf-8' }
     %meta{ 'http-equiv': 'X-UA-Compatible', content: 'IE=edge' }
     %meta{ name: 'viewport', content: 'width=device-width, initial-scale=1, user-scalable=no, viewport-fit=cover' }
-    %meta{ name: 'theme-color', content: theme_color, media: '(min-width: 993px)' }
-    %meta{ name: 'theme-color', content: mobile_theme_color, media: '(max-width: 992px)' }
+    - if user_signed_in?
+      %meta{ name: 'theme-color', content: theme_color, media: '(min-width: 993px)' }
+      %meta{ name: 'theme-color', content: mobile_theme_color, media: '(max-width: 992px)' }
+    - else
+      %meta{ name: 'theme-color', content: theme_color }
     %link{ rel: 'apple-touch-icon', href: '/apple-touch-icon-precomposed.png' }
     %link{ rel: 'icon', href: '/images/favicon/favicon-16.png', sizes: '16x16' }
     %link{ rel: 'icon', href: '/icon-152.png', sizes: '152x152' }

From 78d67d2f493da6245ebad934e80207734e67c402 Mon Sep 17 00:00:00 2001
From: Karina Kwiatek <kjk@kjk.dog>
Date: Thu, 12 Aug 2021 01:13:52 +0200
Subject: [PATCH 12/19] Tell Sass to use CSS `max()` function

---
 app/assets/stylesheets/components/_container.scss | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/components/_container.scss b/app/assets/stylesheets/components/_container.scss
index 789beb24..701a5517 100644
--- a/app/assets/stylesheets/components/_container.scss
+++ b/app/assets/stylesheets/components/_container.scss
@@ -3,6 +3,8 @@
   padding-bottom: map-get($spacers, 3);
   // Sass doesn't know about the safe-area-inset-* env vars and throws a syntax error
   // We can get around this by using unquote()
-  padding-left: unquote('max(15px, env(safe-area-inset-left))');
-  padding-right: unquote('max(15px, env(safe-area-inset-right))');
+  // Sass also has its own built-in max() function which is not the same as the CSS one
+  // In order to use the correct one we can write it as Max() instead
+  padding-left: unquote('Max(15px, env(safe-area-inset-left))');
+  padding-right: unquote('Max(15px, env(safe-area-inset-right))');
 }
\ No newline at end of file

From da70238667320a873b0ca3d728e74fccfadcff7d Mon Sep 17 00:00:00 2001
From: Karina Kwiatek <kjk@kjk.dog>
Date: Thu, 12 Aug 2021 01:18:10 +0200
Subject: [PATCH 13/19] Fix linter errors

---
 app/views/layouts/base.haml        | 2 +-
 app/views/navigation/_desktop.haml | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/views/layouts/base.haml b/app/views/layouts/base.haml
index dab321da..b7c0e155 100644
--- a/app/views/layouts/base.haml
+++ b/app/views/layouts/base.haml
@@ -23,7 +23,7 @@
     = csrf_meta_tags
     = yield(:og)
     = yield(:meta)
-  %body{ class: user_signed_in? ? '' : 'not-logged-in'}
+  %body{ class: user_signed_in? ? '' : 'not-logged-in' }
     - if user_signed_in?
       = render 'navigation/main'
     - else
diff --git a/app/views/navigation/_desktop.haml b/app/views/navigation/_desktop.haml
index 8e17bb3a..485634cd 100644
--- a/app/views/navigation/_desktop.haml
+++ b/app/views/navigation/_desktop.haml
@@ -17,4 +17,4 @@
       %li.nav-item.d-none.d-sm-block{ data: { toggle: 'tooltip', placement: 'bottom' }, title: t('views.actions.ask_question') }
         %a.nav-link{ href: '#', name: 'toggle-all-ask', data: { target: '#modal-ask-followers', toggle: :modal } }
           %i.fa.fa-pencil-square-o
-      = render 'navigation/main/profile'
\ No newline at end of file
+      = render 'navigation/main/profile'

From ec2332818cdbb26637b97130a11cd525e2a3cd94 Mon Sep 17 00:00:00 2001
From: Karina Kwiatek <kjk@kjk.dog>
Date: Thu, 12 Aug 2021 13:29:50 +0200
Subject: [PATCH 14/19] Show mobile nav bar badges as pills

---
 app/assets/stylesheets/application.scss            | 1 +
 app/assets/stylesheets/components/_mobile-nav.scss | 4 ++++
 app/assets/stylesheets/overrides/_badges.scss      | 6 ++++++
 app/views/navigation/_mobile.haml                  | 4 +++-
 4 files changed, 14 insertions(+), 1 deletion(-)
 create mode 100644 app/assets/stylesheets/overrides/_badges.scss

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index ae985778..af42847e 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -39,6 +39,7 @@
 
 @import
 "overrides/alerts",
+"overrides/badges",
 "overrides/bootstrap-datetimepicker",
 "overrides/buttons",
 "overrides/colors",
diff --git a/app/assets/stylesheets/components/_mobile-nav.scss b/app/assets/stylesheets/components/_mobile-nav.scss
index f39b33d3..777423e8 100644
--- a/app/assets/stylesheets/components/_mobile-nav.scss
+++ b/app/assets/stylesheets/components/_mobile-nav.scss
@@ -13,6 +13,10 @@
         padding-top: 8px;
         font-size: 20px;
       }
+
+      .badge {
+        float: right;
+      }
     }
   }
 }
diff --git a/app/assets/stylesheets/overrides/_badges.scss b/app/assets/stylesheets/overrides/_badges.scss
new file mode 100644
index 00000000..3fa32589
--- /dev/null
+++ b/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));
+  }
+}
\ No newline at end of file
diff --git a/app/views/navigation/_mobile.haml b/app/views/navigation/_mobile.haml
index d4df084d..5f36417d 100644
--- a/app/views/navigation/_mobile.haml
+++ b/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) }

From c33c4bb4ed54da884b0c131a466f5b3c87441be8 Mon Sep 17 00:00:00 2001
From: Karina Kwiatek <kjk@kjk.dog>
Date: Thu, 12 Aug 2021 13:30:19 +0200
Subject: [PATCH 15/19] Give the mobile nav icon row the full viewport width

---
 app/assets/stylesheets/components/_mobile-nav.scss | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/components/_mobile-nav.scss b/app/assets/stylesheets/components/_mobile-nav.scss
index 777423e8..436bcb07 100644
--- a/app/assets/stylesheets/components/_mobile-nav.scss
+++ b/app/assets/stylesheets/components/_mobile-nav.scss
@@ -1,9 +1,13 @@
 #rs-mobile-nav {
-  padding-bottom: unquote('calc(env(safe-area-inset-bottom) + 4px)');
+  .container {
+    padding: 0;
+  }
+
+  padding: 4px 0 unquote('calc(env(safe-area-inset-bottom) + 4px)') 0;
 
   .navbar-icon-row {
     flex-direction: row;
-    justify-content: space-between;
+    justify-content: space-around;
     width: 100%;
 
     .nav-link {

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 16/19] 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' } }

From bd5995ef65bef3dd2eecfbfd7812f0b197685cb8 Mon Sep 17 00:00:00 2001
From: Karina Kwiatek <kjk@kjk.dog>
Date: Fri, 13 Aug 2021 00:53:11 +0200
Subject: [PATCH 17/19] Add specs for `nav_entry` helper

---
 app/helpers/application_helper.rb       |  2 +-
 spec/helpers/application_helper_spec.rb | 34 +++++++++++++++++++++++++
 2 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index 1405f6af..75360767 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -26,7 +26,7 @@ module ApplicationHelper
       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)}"
+      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/spec/helpers/application_helper_spec.rb b/spec/helpers/application_helper_spec.rb
index 6bdc4702..fa6f8b4e 100644
--- a/spec/helpers/application_helper_spec.rb
+++ b/spec/helpers/application_helper_spec.rb
@@ -3,6 +3,40 @@
 require "rails_helper"
 
 describe ApplicationHelper, :type => :helper do
+  describe '#nav_entry' do
+    it 'should return a HTML navigation item which links to a given address' do
+      allow(self).to receive(:current_page?).and_return(false)
+      expect(nav_entry('Example', '/example')).to(
+        eq('<li class="nav-item "><a class="nav-link" href="/example">Example</a></li>')
+      )
+    end
+
+    it 'should return with an active attribute if the link matches the current URL' do
+      allow(self).to receive(:current_page?).and_return(true)
+      expect(nav_entry('Example', '/example')).to(
+        eq('<li class="nav-item active "><a class="nav-link" href="/example">Example</a></li>')
+      )
+    end
+
+    it 'should include an icon if given' do
+      allow(self).to receive(:current_page?).and_return(false)
+      expect(nav_entry('Example', '/example', icon: 'beaker')).to(
+        eq('<li class="nav-item "><a class="nav-link" href="/example"><i class="fa fa-beaker"></i> Example</a></li>')
+      )
+    end
+
+    it 'should include a badge if given' do
+      allow(self).to receive(:current_page?).and_return(false)
+      expect(nav_entry('Example', '/example', badge: 3)).to(
+        eq('<li class="nav-item "><a class="nav-link" href="/example">Example <span class="badge">3</span></a></li>')
+      )
+
+      expect(nav_entry('Example', '/example', badge: 3, badge_color: 'primary', badge_pill: true)).to(
+        eq('<li class="nav-item "><a class="nav-link" href="/example">Example <span class="badge badge-primary badge-pill">3</span></a></li>')
+      )
+    end
+  end
+
   describe "#bootstrap_color" do
     it 'should map error and alert to danger' do
       expect(bootstrap_color("error")).to eq("danger")

From d81641ac18ae84446a4ecc8b296f2bec14d085e3 Mon Sep 17 00:00:00 2001
From: Karina Kwiatek <kjk@kjk.dog>
Date: Fri, 13 Aug 2021 01:23:07 +0200
Subject: [PATCH 18/19] Add theme model spec

---
 app/helpers/theme_helper.rb |  4 ++--
 spec/factories/theme.rb     | 27 +++++++++++++++++++++++++++
 spec/models/theme_spec.rb   | 26 ++++++++++++++++++++++++++
 3 files changed, 55 insertions(+), 2 deletions(-)
 create mode 100644 spec/factories/theme.rb
 create mode 100644 spec/models/theme_spec.rb

diff --git a/app/helpers/theme_helper.rb b/app/helpers/theme_helper.rb
index 02b36008..2ba9d186 100644
--- a/app/helpers/theme_helper.rb
+++ b/app/helpers/theme_helper.rb
@@ -50,7 +50,7 @@ module ThemeHelper
   def theme_color
     theme = get_active_theme
     if theme
-      "##{get_hex_color_from_theme_value(theme.primary_color)}"
+      theme.theme_color
     else
       '#5e35b1'
     end
@@ -59,7 +59,7 @@ module ThemeHelper
   def mobile_theme_color
     theme = get_active_theme
     if theme
-      "##{get_hex_color_from_theme_value(theme.background_color)}"
+      theme.mobile_theme_color
     else
       '#f0edf4'
     end
diff --git a/spec/factories/theme.rb b/spec/factories/theme.rb
new file mode 100644
index 00000000..4339377a
--- /dev/null
+++ b/spec/factories/theme.rb
@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+FactoryBot.define do
+  factory :theme do
+    primary_color { 9_342_168 }
+    primary_text { 16_777_215 }
+    danger_color { 14_257_035 }
+    danger_text { 16_777_215 }
+    success_color { 12_573_067 }
+    success_text { 16_777_215 }
+    warning_color { 14_261_899 }
+    warning_text { 16_777_215 }
+    info_color { 9_165_273 }
+    info_text { 16_777_215 }
+    dark_color { 6_710_886 }
+    dark_text { 15_658_734 }
+    raised_background { 16_777_215 }
+    background_color { 13_026_795 }
+    body_text { 3_355_443 }
+    muted_text { 3_355_443 }
+    input_color { 15_789_556 }
+    input_text { 6_710_886 }
+    raised_accent { 16_250_871 }
+    light_color { 16_316_922 }
+    light_text { 0 }
+  end
+end
diff --git a/spec/models/theme_spec.rb b/spec/models/theme_spec.rb
new file mode 100644
index 00000000..a170c1d9
--- /dev/null
+++ b/spec/models/theme_spec.rb
@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+require 'rails_helper'
+
+RSpec.describe(Theme, type: :model) do
+  context 'user-defined theme' do
+    let(:user) { FactoryBot.create(:user) }
+    let(:theme) { FactoryBot.create(:theme, user: user) }
+
+    describe '#theme_color' do
+      subject { theme.theme_color }
+
+      it 'should return the theme\'s primary colour as a hex triplet' do
+        expect(subject).to eq('#8e8cd8')
+      end
+    end
+
+    describe '#mobile_theme_color' do
+      subject { theme.mobile_theme_color }
+
+      it 'should return the theme\'s background colour as a hex triplet' do
+        expect(subject).to eq('#c6c5eb')
+      end
+    end
+  end
+end
\ No newline at end of file

From f65875ae7e852d4788bcaa743b6fd7e2c9faaa60 Mon Sep 17 00:00:00 2001
From: Karina Kwiatek <kjk@kjk.dog>
Date: Fri, 13 Aug 2021 01:45:00 +0200
Subject: [PATCH 19/19] Add specs for theme-color helpers

---
 spec/helpers/theme_helper_spec.rb | 50 +++++++++++++++++++++++++++++++
 1 file changed, 50 insertions(+)

diff --git a/spec/helpers/theme_helper_spec.rb b/spec/helpers/theme_helper_spec.rb
index 3776192d..663094d9 100644
--- a/spec/helpers/theme_helper_spec.rb
+++ b/spec/helpers/theme_helper_spec.rb
@@ -141,4 +141,54 @@ describe ThemeHelper, :type => :helper do
       end
     end
   end
+
+  describe '#theme_color' do
+    subject { helper.theme_color }
+
+    context 'when user is signed in' do
+      let(:user) { FactoryBot.create(:user) }
+      let(:theme) { FactoryBot.create(:theme, user: user) }
+
+      before(:each) do
+        user.theme = theme
+        user.save!
+        sign_in(user)
+      end
+
+      it 'should return the user theme\'s primary color' do
+        expect(subject).to eq('#8e8cd8')
+      end
+    end
+
+    context 'user is not signed in' do
+      it 'should return the default primary color' do
+        expect(subject).to eq('#5e35b1')
+      end
+    end
+  end
+
+  describe '#mobile_theme_color' do
+    subject { helper.mobile_theme_color }
+
+    context 'when user is signed in' do
+      let(:user) { FactoryBot.create(:user) }
+      let(:theme) { FactoryBot.create(:theme, user: user) }
+
+      before(:each) do
+        user.theme = theme
+        user.save!
+        sign_in(user)
+      end
+
+      it 'should return the user theme\'s background color' do
+        expect(subject).to eq('#c6c5eb')
+      end
+    end
+
+    context 'user is not signed in' do
+      it 'should return the default background color' do
+        expect(subject).to eq('#f0edf4')
+      end
+    end
+  end
 end