[Single file editor] Fix mixed semantics for file content header

Problem to solve

This issue represents a finding from our work to audit features belonging to groupsource code. See the analysis in Figma for more information. See the overview video for guidance on how to review this analysis.

Screenshots

Proposal

• Address the following finding on the Single file editor page:
  • Fix mixed semantics for file content header
  • There is an existing Pajamas solution to address this
• Additional notes and guidance to resolve this finding:
  • This header is mixing section and subtle styles. It should probably be subtle background with a subtle border, or subtle background with a default border (also noted in the repository page).
• Finding yellow #4 (closed)

Implementation guide

Key file to change: app/assets/stylesheets/framework/files.scss

diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss
index 5292a761d634..d6d7895a070c 100644
--- a/app/assets/stylesheets/framework/files.scss
+++ b/app/assets/stylesheets/framework/files.scss
@@ -203,7 +203,7 @@ span.idiff {
     flex-wrap: wrap;
     align-items: center;
     justify-content: space-between;
-    @apply gl-bg-subtle gl-border-b gl-border-b-section;
+    @apply gl-bg-subtle gl-border-b gl-border-b-default;
     padding: $gl-padding-8 $gl-padding;
     margin: 0;
     min-height: px-to-rem($file-header-height);