GPG signed commits

What does this MR do?

1. Shows gpg signed commits (excl. tags)
2. If the gpg key is verified (= the gpg was added to GitLab and the user's email matches the key's email) a "Verified" batch is displayed
3. If the gpg key is not verified or does not exist on GitLab an "Unverified" batch is displayed
4. If the commit is not signed, the behaviour is unchanged
5. Allows the user to add gpg keys to his profile

Are there points in the code the reviewer needs to double check?

Why was this MR needed?

Git allows to signed commits. This PR enables displaying those commits.

The development of this MR is sponsored by @siemens (/cc @bufferoverflow).

Screenshots (if relevant)

Commits list:

Commit details:

Badge popovers:

User settings > GPG key:

Does this MR meet the acceptance criteria?

• Changelog entry added
• Documentation created/updated
• API support added
• Tests
  • Added for this feature/bug
  • All builds are passing
• Conform by the merge request performance guides
• Conform by the style guides
• Branch has no merge conflicts with master (if it does - rebase it please)
• Squashed related commits together

What are the relevant issue numbers?

Closes https://gitlab.com/gitlab-org/gitlab-ce/issues/20268.

app/assets/stylesheets/pages/commits.scss

@@ -280,55 +280,62 @@
   }
 }
 
-.gpg-badge {
+.gpg-status-box {
   &.valid {
     color: $brand-success;
+    border: 1px solid $brand-success;
   }
 
   &.invalid {
     color: $gray;
+    border: 1px solid $common-gray-light;
   }
 }
 
-.gpg-badge-popover-title {
+.gpg-popover-status {
+  display: flex;
+  align-items: center;
   font-weight: normal;
+  line-height: 1.5;
 }
 
-.gpg-badge-popover-icon {
-  float: left;
-  font-size: 35px;
-  line-height: 35px;
-  width: 32px;
+.gpg-popover-icon {
+  // same margin as .s32.avatar
   margin-right: $btn-side-margin;
 
   &.valid {
-    color: $brand-success;
-  }
+    svg {
+      border: 1px solid $brand-success;
 
-  &.invalid {
-    color: $gray;
+      fill: $brand-success;
+    }
   }
-}
 
-.gpg-badge-popover-user-link {
-  text-decoration: none;
-  color: $gl-text-color;
-}
+  &.invalid {
+    svg {
+      border: 1px solid $common-gray-light;
 
-.gpg-badge-popover-avatar {
-  float: left;
-  margin-bottom: $gl-padding;
+      fill: $common-gray-light;
+    }
+  }
 
-  .avatar {
-    margin-left: 0;
+  svg {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    vertical-align: middle;
   }
 }
 
-.gpg-badge-popover-username {
-  font-weight: bold;
+.gpg-popover-user-link {
+  display: flex;
+  align-items: center;
+  margin-bottom: $gl-padding / 2;
+  text-decoration: none;
+  color: $gl-text-color;
 }
 
-.commit .gpg-badge-popover-help-link {
+.commit .gpg-popover-help-link {
   display: block;
   color: $link-color;
 }