Use badges for the trace visibility labels

Our green is currently just on the side of triggering black text,
hence the override to make it look consistent with the other badges.

app/assets/stylesheets/_bootstrap-custom.scss

@@ -27,7 +27,7 @@
 @import "bootstrap/card";
 // @import "bootstrap/breadcrumb";
 // @import "bootstrap/pagination";
-// @import "bootstrap/badge";
+@import "bootstrap/badge";
 // @import "bootstrap/jumbotron";
 // @import "bootstrap/alert";
 // @import "bootstrap/progress";

app/assets/stylesheets/common.scss

@@ -1494,22 +1494,6 @@ tr.turn:hover {
     font-size: 12px;
     color: gray;
   }
-
-  .trace_public {
-    color: green;
-  }
-
-  .trace_identifiable {
-    color: green;
-  }
-
-  .trace_trackable {
-    color: red;
-  }
-
-  .trace_private {
-    color: red;
-  }
 }
 
 /* Rules for the trace view */

app/views/traces/_trace.html.erb

@@ -17,7 +17,13 @@
       ... <%= time_ago_in_words(trace.timestamp, :scope => :'datetime.distance_in_words_ago') %></span>
       <%= link_to_if trace.inserted?, t(".map"), { :controller => "site", :action => "index", :mlat => trace.latitude, :mlon => trace.longitude, :anchor => "map=14/#{trace.latitude}/#{trace.longitude}" }, { :title => t(".view_map") } %> /
       <%= link_to t(".edit"), { :controller => "site", :action => "edit", :gpx => trace.id }, { :title => t(".edit_map") } %>
-      <span class="trace_<%= trace.visibility %>"><%= t("." + trace.visibility) %></span>
+
+      <% badge_class = case trace.visibility
+                       when "public", "identifiable" then "success"
+                       else "danger"
+                       end %>
+      <span class="badge badge-<%= badge_class %> text-white"><%= t("." + trace.visibility) %></span>
+
       <br />
       <%= trace.description %>
     <br />