New file button on empty project has broken style

Summary

New file button on empty project has broken style.

Steps to reproduce

Create a project and visit its overview page.

Relevant logs and/or screenshots

Current	Proposed

Possible fixes

The .btn-new class in generated in new_file_anchor_data method in app/presenters/project_presenter.rb, but .btn-new has has been replaced by Bootstrap's .btn-success whenever possible. So this could be easily fixed by changing the class_modifier in the new_file_anchor_data method and removing the transparent bottom border property from the relevant selectors.

diff --git a/app/assets/stylesheets/framework/secondary_navigation_elements.scss b/app/assets/stylesheets/framework/secondary_navigation_elements.scss
index f47dfe1b563..de9e7c37695 100644
--- a/app/assets/stylesheets/framework/secondary_navigation_elements.scss
+++ b/app/assets/stylesheets/framework/secondary_navigation_elements.scss
@@ -1,6 +1,6 @@
 // For tabbed navigation links, scrolling tabs, etc. For all top/main navigation,
 // please check nav.scss
-.nav-links {
+.nav-links:not(.quick-links) {
   display: flex;
   padding: 0;
   margin: 0;
@@ -106,7 +106,7 @@
     display: inline-block;
     float: right;
     text-align: right;
-    padding: 11px 0;
+    padding: $gl-padding-8 0;
     margin-bottom: 0;
 
     > .btn,
diff --git a/app/presenters/project_presenter.rb b/app/presenters/project_presenter.rb
index 79cd3606aec..d61124fa787 100644
--- a/app/presenters/project_presenter.rb
+++ b/app/presenters/project_presenter.rb
@@ -176,7 +176,7 @@ class ProjectPresenter < Gitlab::View::Presenter::Delegated
       AnchorData.new(false,
                      _('New file'),
                      project_new_blob_path(project, default_branch || 'master'),
-                     'new')
+                     'success')
     end
   end
 
diff --git a/app/views/projects/empty.html.haml b/app/views/projects/empty.html.haml
index 75f35360e5e..936900a0087 100644
--- a/app/views/projects/empty.html.haml
+++ b/app/views/projects/empty.html.haml
@@ -36,7 +36,7 @@
   .scrolling-tabs-container.inner-page-scroll-tabs.is-smaller
     .fade-left= icon('angle-left')
     .fade-right= icon('angle-right')
-    .nav-links.scrolling-tabs
+    .nav-links.scrolling-tabs.quick-links
       = render 'stat_anchor_list', anchors: @project.empty_repo_statistics_anchors
       = render 'stat_anchor_list', anchors: @project.empty_repo_statistics_buttons
 
diff --git a/app/views/projects/show.html.haml b/app/views/projects/show.html.haml
index 283031b06da..f29ce4f5c06 100644
--- a/app/views/projects/show.html.haml
+++ b/app/views/projects/show.html.haml
@@ -22,7 +22,7 @@
     .scrolling-tabs-container.inner-page-scroll-tabs.is-smaller
       .fade-left= icon('angle-left')
       .fade-right= icon('angle-right')
-      .nav-links.scrolling-tabs
+      .nav-links.scrolling-tabs.quick-links
         = render 'stat_anchor_list', anchors: @project.statistics_anchors(show_auto_devops_callout: show_auto_devops_callout)
         = render 'stat_anchor_list', anchors: @project.statistics_buttons(show_auto_devops_callout: show_auto_devops_callout)
 

@annabeldunstone could you verify that these border-bottom properties are not required?

marked #52070 (closed) as a duplicate of this issue

marked this issue as related to #52070 (closed)

@gtsiolis the border-bottom properties are necessary for the tab hover states:

added Create [DEPRECATED] devopscreate frontend priority4 severity4 typebug web edit labels

mentioned in issue #52420 (closed)

changed the description

changed the description

mentioned in merge request !22657 (merged)

@annabeldunstone you are totally right, again! I've updated the description with a new approach. I was planning to suggest to add ~"Accepting merge requests" label here but this is more complicated than I thought. Could you take a look at !22657 (merged) when you're free?

assigned to @gtsiolis

mentioned in issue gitlab-org/quality/triage-ops#70 (closed)

mentioned in commit 95a87689

closed via merge request !22657 (merged)