[Settings > Merge requests] Use design token background of security approval details

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 Settings > Merge requests page:
  • Unbox the
  • Use design token background of security approval details (background.color.subtle) or none at all.
  • There is an existing Pajamas solution to address this
• Additional notes and guidance to resolve this finding:
  • Background isn't using a design token.

Current	Proposed
Dark mode Light mode	Dark mode Light mode

Implementation Guide

The following are not mentioned implementation guide, but recommended for implementation:

• Right align "Edit policy" link with the "View details" link
• Top align "Edit policy" link with the first line of text in the section

diff --git a/ee/app/assets/javascripts/approvals/components/security_orchestration/policy_details.vue b/ee/app/assets/javascripts/approvals/components/security_orchestration/policy_details.vue
index 88a06b975ad8..8f470fbdd83f 100644
--- a/ee/app/assets/javascripts/approvals/components/security_orchestration/policy_details.vue
+++ b/ee/app/assets/javascripts/approvals/components/security_orchestration/policy_details.vue
@@ -38,28 +38,24 @@ export default {
 
 <template>
   <tr v-if="policy.isSelected">
-    <td colspan="4" class="!gl-border-t-0 !gl-pt-0">
+    <td colspan="4" class="!gl-border-t-0">
+      <policy-approvals :action="policyAction" :approvers="approvers" />
       <div
-        class="gl-rounded-base gl-border-1 gl-border-solid gl-border-default gl-bg-white gl-px-5 gl-py-4"
+        v-for="{ summary, criteriaList } in humanizedRules"
+        :key="summary"
+        class="gl-mb-1 gl-mt-5"
       >
-        <policy-approvals :action="policyAction" :approvers="approvers" />
-        <div
-          v-for="{ summary, criteriaList } in humanizedRules"
-          :key="summary"
-          class="gl-mb-1 gl-mt-5"
-        >
-          {{ summary }}
-          <ul class="gl-m-0">
-            <li v-for="criteria in criteriaList" :key="criteria">
-              {{ criteria }}
-            </li>
-          </ul>
-        </div>
-        <div v-if="showEditLink" class="gl-text-right">
-          <gl-link :href="policy.editPath" target="_blank">
-            {{ $options.i18n.policyDetails }}
-          </gl-link>
-        </div>
+        {{ summary }}
+        <ul class="gl-m-0">
+          <li v-for="criteria in criteriaList" :key="criteria">
+            {{ criteria }}
+          </li>
+        </ul>
+      </div>
+      <div v-if="showEditLink" class="gl-text-right">
+        <gl-link :href="policy.editPath" target="_blank">
+          {{ $options.i18n.policyDetails }}
+        </gl-link>
       </div>
     </td>
   </tr>