[Blame] Refine page 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.

• On the header for Blame page:
  • Icon is using text color instead of icon color.
  • The filename is a strong element, should the text use gl.text.color.strong?
  • The filesize would be a good place to use gl.text.color.subtle.
  • This header and the row below 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).

Proposal

• Refine page header for Blame page:
  • For icon color, Use design token icon.color.default
  • For filename color, use design token text.color.strong
  • For filesize color, use design token text.color.subtle
  • For the color of the bottom border below the filename, use design token border.color.default
    • Note that this change also affects the bottom border color in #510471 (closed), as the same component is being addressed

Implementation guide

diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss
index 5292a761d634..97cd978cd732 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;
     padding: $gl-padding-8 $gl-padding;
     margin: 0;
     min-height: px-to-rem($file-header-height);