UX: Update 404 page category badge to use centralized helper and style

app/assets/stylesheets/desktop/discourse.scss

@@ -136,6 +136,10 @@ body {
     margin-bottom: 10px;
   }
 
+  .not-found-topic {
+    a[href] { margin-right: 10px; line-height: 2;}
+  }
+
   .page-not-found-topics .span8 {
     line-height: 1.5em;
     margin-right: 20px;

app/helpers/application_helper.rb

@@ -5,6 +5,7 @@ require_dependency 'unread'
 require_dependency 'age_words'
 require_dependency 'configurable_urls'
 require_dependency 'mobile_detection'
+require_dependency 'category_badge'
 
 module ApplicationHelper
   include CurrentUser
@@ -153,5 +154,8 @@ module ApplicationHelper
     controller.class.name.split("::").first == "Admin" || session[:disable_customization]
   end
 
+  def category_badge(category, opts=nil)
+    CategoryBadge.html_for(category, opts).html_safe
+  end
 
 end

app/helpers/user_notifications_helper.rb

@@ -1,5 +1,3 @@
-require_dependency 'category_badge'
-
 module UserNotificationsHelper
 
   def indent(text, by=2)
@@ -60,7 +58,4 @@ module UserNotificationsHelper
     PrettyText.format_for_email(html).html_safe
   end
 
-  def email_category(category, opts=nil)
-    CategoryBadge.html_for(category, opts).html_safe
-  end
 end

app/mailers/user_notifications.rb

@@ -3,6 +3,7 @@ require_dependency 'email/message_builder'
 require_dependency 'age_words'
 
 class UserNotifications < ActionMailer::Base
+  helper :application
   default charset: 'UTF-8'
 
   include Email::BuildEmailHelper

app/views/exceptions/not_found.html.erb

@@ -6,7 +6,9 @@
   <div class="span8 popular-topics">
     <h2 class="popular-topics-title"><%= t 'page_not_found.popular_topics' %></h2>
     <% @top_viewed.each do |t| %>
-      <span style="line-height:2;"><%= link_to t.title, t.relative_url %><% if !t.category.uncategorized? %>&nbsp;&nbsp;<a href="<%= t.category.url %>" class="badge badge-category" style="background-color: #<%= t.category.color %>; color: #<%= t.category.text_color %>"><%= t.category.name %></a><% end %></span><br/>
+      <div class='not-found-topic'>
+        <%= link_to t.title, t.relative_url %><%= category_badge(t.category) %>
+      </div>
     <% end %>
     <br/>
     <a href="/latest" class="btn"><%= t 'page_not_found.see_more' %>&hellip;</a>
@@ -14,7 +16,9 @@
   <div class="span8 recent-topics">
     <h2 class="recent-topics-title"><%= t 'page_not_found.recent_topics' %></h2>
     <% @recent.each do |t| %>
-      <span style="line-height:2;"><%= link_to t.title, t.relative_url %><% if !t.category.uncategorized? %>&nbsp;&nbsp;<a href="<%= t.category.url %>" class="badge badge-category" style="background-color: #<%= t.category.color %>; color: #<%= t.category.text_color %>"><%= t.category.name %></a><% end %></span><br/>
+      <div class='not-found-topic'>
+        <%= link_to t.title, t.relative_url %><%= category_badge(t.category) %>
+      </div>
     <% end %>
     <br/>
     <a href="/latest" class="btn"><%= t 'page_not_found.see_more' %>&hellip;</a>

app/views/user_notifications/digest.html.erb

@@ -22,7 +22,7 @@
         <div class='featured-topic'>
           <%= link_to t.title, "#{Discourse.base_url}#{t.relative_url}" %>
           <br/>
-          <%= email_category(t.category) %>
+          <%= category_badge(t.category) %>
         </div>
 
         <%- if t.best_post.present? %>
@@ -45,7 +45,7 @@
           <li>
             <%= link_to t.title, "#{Discourse.base_url}#{t.relative_url}" %>
             <span class='post-count'><%= t('user_notifications.digest.posts', count: t.posts_count) %></span>
-            <%= email_category(t.category) %>
+            <%= category_badge(t.category) %>
           </li>
         </ul>
       <%- end -%>