Merge branch '249640-ux-debt-from-visually-emphasize-collapsed-mr-diff-files' into 'master'

Update UI for collapsed files body

Closes #249640

See merge request gitlab-org/gitlab!42465

app/assets/javascripts/diffs/components/diff_file.vue

@@ -209,15 +209,14 @@ export default {
           <div v-safe-html="errorMessage" class="nothing-here-block"></div>
         </div>
         <template v-else>
-          <div v-show="isCollapsed" class="gl-p-7 gl-text-center collapsed-file-warning">
+          <div
+            v-show="isCollapsed"
+            class="gl-p-7 gl-bg-gray-10 gl-text-center collapsed-file-warning"
+          >
             <p class="gl-mb-8 gl-mt-5">
               {{ $options.i18n.collapsed }}
             </p>
-            <gl-button
-              class="gl-alert-action gl-mb-5"
-              data-testid="expandButton"
-              @click="handleToggle"
-            >
+            <gl-button class="gl-mb-5" data-testid="expandButton" @click="handleToggle">
               {{ $options.i18n.expand }}
             </gl-button>
           </div>

changelogs/unreleased/maintenance-design-collapsed-files.yml

+---
+title: Color/position tweaks for collapsed diff files
+merge_request: 42465
+author:
+type: other