nicer email badges on the profile gpg page

4 files changed, 32 insertions, 13 deletions

diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss
index 22672614e0d..14ad06b0ac2 100644
--- a/app/assets/stylesheets/pages/profile.scss
+++ b/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);
+    }
+  }
+}
diff --git a/app/helpers/badges_helper.rb b/app/helpers/badges_helper.rb
deleted file mode 100644
index e1c8927ab54..00000000000
--- a/app/helpers/badges_helper.rb
+++ /dev/null
@@ -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
diff --git a/app/views/profiles/gpg_keys/_email_with_badge.html.haml b/app/views/profiles/gpg_keys/_email_with_badge.html.haml
new file mode 100644
index 00000000000..5f7844584e1
--- /dev/null
+++ b/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
diff --git a/app/views/profiles/gpg_keys/_key.html.haml b/app/views/profiles/gpg_keys/_key.html.haml
index 86e2510d22f..b04981f90e3 100644
--- a/app/views/profiles/gpg_keys/_key.html.haml
+++ b/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