nicer email badges on the profile gpg page

app/assets/stylesheets/pages/profile.scss

@@ -391,3 +391,26 @@ table.u2f-registrations {
     margin-bottom: 0;
   }
 }
+
+.gpg-email-badge {
+  display: inline;
+  margin-right: $gl-padding / 2;
+
+  .gpg-email-badge-email {
+    display: inline;
+    margin-right: $gl-padding / 4;
+  }
+
+  .label-verification-status {
+    border-width: 1px;
+    border-style: solid;
+
+    &.verified {
+      @include green-status-color;
+    }
+
+    &.unverified {
+      @include status-color($gray-dark, $gray, $common-gray-dark);
+    }
+  }
+}

app/helpers/badges_helper.rb

@@ -1,11 +0,0 @@
-module BadgesHelper
-  def verified_email_badge(email, verified)
-    css_classes = %w(btn btn-xs disabled)
-
-    css_classes << 'btn-success' if verified
-
-    content_tag 'span', class: css_classes do
-      "#{email} #{verified ? 'Verified' : 'Unverified'}"
-    end
-  end
-end

app/views/profiles/gpg_keys/_email_with_badge.html.haml

@@ -0,0 +1,8 @@
+- css_classes = %w(label label-verification-status)
+- css_classes << (verified ? 'verified': 'unverified')
+- text = verified ? 'Verified' : 'Unverified'
+
+.gpg-email-badge
+  .gpg-email-badge-email= email
+  %div{ class: css_classes }
+    = text

app/views/profiles/gpg_keys/_key.html.haml

@@ -3,8 +3,7 @@
     = icon 'key', class: "settings-list-icon hidden-xs"
   .key-list-item-info
     - key.emails_with_verified_status.map do |email, verified|
-      = email
-      = verified_email_badge(email, verified)
+      = render partial: 'email_with_badge', locals: { email: email, verified: verified }
 
     .description
       %code= key.fingerprint