As a follow-up to changes made to the **<abbr title="merge request">MR</abbr> merge widget** in &5589+, we need to adapt it to the [new framework design guidelines](https://design.gitlab.com/regions/merge-request-reports). [**🖼 Design specs in Figma**](https://www.figma.com/file/omvNuR8nn90V8hjVN78OQO/Adapt-MR-merge-widget-to-framework-%23347128?node-id=845%3A1298) ### Summary of the changes <details> 1. [New status icons](https://design.gitlab.com/regions/merge-request-reports#status) 1. [Actions](https://design.gitlab.com/regions/merge-request-reports#actions) have a different alignment: 1. On `768px +` breakpoints, actions are right-aligned. 1. On `<768px` breakpoints, actions are grouped into an options dropdown. 1. An exception to this are the `merge blocked` states, where actions are always visible. On `<768px` breakpoints, actions are left-aligned, below the subject line, ordered from most to least important (top-down). 1. [Actions](https://design.gitlab.com/regions/merge-request-reports#actions) have a different style: 1. In the `merge blocked` states, the most important action uses the [button](https://design.gitlab.com/components/button) primary confirm variant, other actions use the secondary confirm variant. 1. In all other states, actions use the [button](https://design.gitlab.com/components/button) tertiary confirm variant. 1. Details section can now be auto-collapsed: 1. In the `ready to merge` state, details are always expanded on all viewports and cannot be collapsed. 1. In all other states: 1. On `768px +` breakpoints, details are always expanded and cannot be collapsed. 1. On `<768px` breakpoints, details are collapsed by default and can be expanded using the [expand/collapse button](https://design.gitlab.com/regions/merge-request-reports#actions). 1. Details section has different text styles: 1. The `Merge details` heading is only shown in the `merge blocked` states. 1. The details text uses a smaller font-size and some items are bolded. 1. Details section padding is responsive: 1. On `768px +` breakpoints, the padding is `16px` top, bottom, and right. 1. On `<768px` breakpoints, the padding is `8px` top, bottom, and right. 1. All links are now underlined. 1. The `merged` and `closed` states have a unique style: 1. Their background color is `blue-50` or `red-50` respectively. 1. The background color of the details section is white. 1. The `ready to merge` state contents are responsive: 1. On `768px +` breakpoints, the checkboxes are **inline** and all items have `16px` spacing between them. 1. On `<768px` breakpoints, the checkboxes are **stacked** and all items have `8px` spacing between them. </details>