Fix styling issues with the download dropdown

3 files changed, 23 insertions, 26 deletions

diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index efcd35a2e0e..8fb4027bf97 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -287,7 +287,7 @@
     list-style: none;
     padding: 0 1px;
 
-    a:not(.btn),
+    a,
     button,
     .menu-item {
       @include dropdown-link;
diff --git a/app/views/projects/buttons/_download.html.haml b/app/views/projects/buttons/_download.html.haml
index df1cedba0e4..4762045ee96 100644
--- a/app/views/projects/buttons/_download.html.haml
+++ b/app/views/projects/buttons/_download.html.haml
@@ -7,21 +7,22 @@
       = sprite_icon('download')
       %span.sr-only=  _('Select Archive Format')
       = sprite_icon("arrow-down")
-    %ul.dropdown-menu.dropdown-menu-right{ role: 'menu' }
-      %li.dropdown-bold-header= _('Download source code')
-      %li.dropdown-menu-content
-        = render 'projects/buttons/download_links', project: project, ref: ref, archive_prefix: archive_prefix, path: nil
+    .dropdown-menu.dropdown-menu-right{ role: 'menu' }
+      %section
+        %h5.m-0.dropdown-bold-header= _('Download source code')
+        .dropdown-menu-content
+          = render 'projects/buttons/download_links', project: project, ref: ref, archive_prefix: archive_prefix, path: nil
       - if directory? && Feature.enabled?(:git_archive_path, default_enabled: true)
-        %li.separator
-        %li.dropdown-bold-header= _('Download this directory')
-        %li.dropdown-menu-content
-          = render 'projects/buttons/download_links', project: project, ref: ref, archive_prefix: archive_prefix, path: @path
+        %section.border-top.pt-1.mt-1
+          %h5.m-0.dropdown-bold-header= _('Download this directory')
+          .dropdown-menu-content
+            = render 'projects/buttons/download_links', project: project, ref: ref, archive_prefix: archive_prefix, path: @path
       - if pipeline && pipeline.latest_builds_with_artifacts.any?
-        %li.separator
-        %li.dropdown-bold-header= _('Download artifacts')
-        - unless pipeline.latest?
-          %span.unclickable= ci_status_for_statuseable(project.pipeline_for(ref))
-        %li.dropdown-header= _('Previous Artifacts')
-        - pipeline.latest_builds_with_artifacts.each do |job|
-          %li
-            = link_to job.name, latest_succeeded_project_artifacts_path(project, "#{ref}/download", job: job.name), rel: 'nofollow', download: ''
+        %section.border-top.pt-1.mt-1
+          %h5.m-0.dropdown-bold-header= _('Download artifacts')
+          - unless pipeline.latest?
+            %span.unclickable= ci_status_for_statuseable(project.pipeline_for(ref))
+          %h6.m-0.dropdown-header= _('Previous Artifacts')
+          %ul
+            - pipeline.latest_builds_with_artifacts.each do |job|
+              %li= link_to job.name, latest_succeeded_project_artifacts_path(project, "#{ref}/download", job: job.name), rel: 'nofollow', download: ''
diff --git a/app/views/projects/buttons/_download_links.html.haml b/app/views/projects/buttons/_download_links.html.haml
index 47a1704f946..7f2cd8e109e 100644
--- a/app/views/projects/buttons/_download_links.html.haml
+++ b/app/views/projects/buttons/_download_links.html.haml
@@ -1,9 +1,5 @@
-%ul
-  %li.d-inline-block.m-0.p-0
-    = link_to 'zip', project_archive_path(project, id: tree_join(ref, archive_prefix), path: path, format: 'zip'), rel: 'nofollow', download: '', class: 'btn btn-primary btn-xs'
-  %li.d-inline-block.m-0.p-0
-    = link_to 'tar.gz', project_archive_path(project, id: tree_join(ref, archive_prefix), path: path, format: 'tar.gz'), rel: 'nofollow', download: '', class: 'btn btn-xs'
-  %li.d-inline-block.m-0.p-0
-    = link_to 'tar.bz2', project_archive_path(project, id: tree_join(ref, archive_prefix), path: path, format: 'tar.bz2'), rel: 'nofollow', download: '', class: 'btn btn-xs'
-  %li.d-inline-block.m-0.p-0
-    = link_to 'tar', project_archive_path(project, id: tree_join(ref, archive_prefix), path: path, format: 'tar'), rel: 'nofollow', download: '', class: 'btn btn-xs'
+- formats = [['zip', 'btn-primary'], ['tar.gz'], ['tar.bz2'], ['tar']]
+
+.d-flex.justify-content-between
+  - formats.each do |(fmt, extra_class)|
+    = link_to fmt, project_archive_path(project, id: tree_join(ref, archive_prefix), path: path, format: fmt), rel: 'nofollow', download: '', class: "btn btn-xs #{extra_class}"