[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 ~"group::source code". See the [analysis in Figma](https://www.figma.com/design/7UQAtMGbZtEeqiaiBMqah5/Dark-mode-%3E-Source-Code-Group?node-id=19-667&p=f&t=FbNy3i0ybTtzHfDa-0) for more information. See the [overview video](https://youtu.be/0wEmZLcF_CU) 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.
<table>
<tr>
<th>Current</th>
<th>Proposed</th>
</tr>
<tr>
<td>
Dark mode
{width="2251" height="861"}
Light mode
{width="524" height="203"}
</td>
<td>
Dark mode
Light mode
</td>
</tr>
</table>
## 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
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>
```
issue