improve spacing / alignments in gpg popup

app/assets/stylesheets/pages/commits.scss

@@ -296,16 +296,16 @@
   }
 }
 
-.gpg-popover-title {
-  display: inline;
+.gpg-popover-status {
+  display: flex;
+  align-items: center;
   font-weight: normal;
+  line-height: 1.5;
 }
 
 .gpg-popover-icon {
-  float: left;
   font-size: 35px;
-  line-height: 35px;
-  width: 32px;
+  // same margin as .s32.avatar
   margin-right: $btn-side-margin;
 
   &.valid {
@@ -318,23 +318,13 @@
 }
 
 .gpg-popover-user-link {
+  display: flex;
+  align-items: center;
+  margin-bottom: $gl-padding / 2;
   text-decoration: none;
   color: $gl-text-color;
 }
 
-.gpg-popover-avatar {
-  float: left;
-  margin-bottom: $gl-padding;
-
-  .avatar {
-    margin-left: 0;
-  }
-}
-
-.gpg-popover-username {
-  font-weight: bold;
-}
-
 .commit .gpg-popover-help-link {
   display: block;
   color: $link-color;

app/views/projects/commit/_invalid_signature_badge.html.haml

@@ -1,6 +1,7 @@
 - title = capture do
   %i{ class: 'fa fa-question-circle gpg-popover-icon invalid', 'aria-hidden' => 'true' }
-  This commit was signed with an unverified signature.
+  %div
+    This commit was signed with an <strong>unverified</strong> signature.
 
 - locals = { signature: signature, title: title, label: 'Unverified', css_classes: ['invalid'] }
 

app/views/projects/commit/_signature_badge.html.haml

@@ -1,17 +1,17 @@
 - css_classes = %w(btn status-box gpg-status-box) + css_classes
 
 - title = capture do
-  .gpg-popover-title
+  .gpg-popover-status
     = title
 
 - content = capture do
   .clearfix
     = content
 
-  GPG key ID:
+  GPG Key ID:
   = signature.gpg_key_primary_keyid
 
-  = link_to('Learn about signing commits', help_page_path('workflow/gpg_signed_commits/index.md'), class: 'gpg-popover-help-link')
+  = link_to('Learn more about signing commits', help_page_path('workflow/gpg_signed_commits/index.md'), class: 'gpg-popover-help-link')
 
-%button{ class: css_classes, data: { toggle: 'popover', html: 'true', placement: 'auto bottom', title: title, content: content } }
+%button{ class: css_classes, data: { toggle: 'popover', html: 'true', placement: 'auto top', title: title, content: content } }
   = label

app/views/projects/commit/_valid_signature_badge.html.haml

@@ -1,18 +1,18 @@
 - title = capture do
   %i{ class: 'fa fa-check-circle gpg-popover-icon valid', 'aria-hidden' => 'true' }
-  This commit was signed with a verified signature.
+  %div
+    This commit was signed with a <strong>verified</strong> signature.
 
 - content = capture do
   - gpg_key = signature.gpg_key
 
   = link_to user_path(gpg_key.user), class: 'gpg-popover-user-link' do
-    .gpg-popover-avatar
+    %div
       = user_avatar_without_link(user: signature.gpg_key.user, size: 32)
 
-    .gpg-popover-username
-      = gpg_key.user.username
-
-    %div= gpg_key.user.name
+    %div
+      %strong= gpg_key.user.username
+      %div= gpg_key.user.name
 
 - locals = { signature: signature, title: title, content: content, label: 'Verified', css_classes: ['valid'] }
 

spec/features/commits_spec.rb

@@ -272,18 +272,18 @@ describe 'Commits' do
       sign_in(user)
       visit namespace_project_commits_path(project.namespace, project, :'signed-commits')
 
+      click_on 'Unverified', match: :first
+      within '.popover' do
+        expect(page).to have_content 'This commit was signed with an unverified signature.'
+        expect(page).to have_content "GPG Key ID: #{GpgHelpers::User2.primary_keyid}"
+      end
+
       click_on 'Verified'
       within '.popover' do
         expect(page).to have_content 'This commit was signed with a verified signature.'
         expect(page).to have_content 'nannie.bernhard'
         expect(page).to have_content 'Nannie Bernhard'
-        expect(page).to have_content "GPG key ID: #{GpgHelpers::User1.primary_keyid}"
-      end
-
-      click_on 'Unverified', match: :first
-      within '.popover' do
-        expect(page).to have_content 'This commit was signed with an unverified signature.'
-        expect(page).to have_content "GPG key ID: #{GpgHelpers::User2.primary_keyid}"
+        expect(page).to have_content "GPG Key ID: #{GpgHelpers::User1.primary_keyid}"
       end
     end
   end