Apply GitLab UI to email status badge

app/assets/stylesheets/pages/profile.scss

@@ -378,19 +378,6 @@ table.u2f-registrations,
     display: inline;
     margin-right: $gl-padding / 4;
   }
-
-  .badge-verification-status {
-    border-width: 1px;
-    border-style: solid;
-
-    &.verified {
-      @include green-status-color;
-    }
-
-    &.unverified {
-      @include status-color($gray-dark, color('gray'), $common-gray-dark);
-    }
-  }
 }
 
 .edit-user {

app/views/shared/_email_with_badge.html.haml

-- css_classes = %w(badge badge-verification-status)
-- css_classes << (verified ? 'verified': 'unverified')
+- css_classes = %w(badge gl-badge)
+- css_classes << (verified ? 'badge-success': 'badge-danger')
 - text = verified ? _('Verified') : _('Unverified')
 
 .email-badge

changelogs/unreleased/yo-verified-gl-badge.yml

+---
+title: Apply GitLab UI to email status badge
+merge_request: 51916
+author: Yogi (@yo)
+type: other