Adjust MR approval rules: visual tweaks

What does this MR do and why?

• change action buttons into icons and add supportive text for screen readers
• use GlCard footer over a footer template within card body
• adjust alignment of the columns to match new designs
• refactor unit tests

The goal of the changes was the settings page for merge request. The approvals module is however designed in a way that some of these changes will affect approvals summary on merge request edit page. I tried to minimise them as much as possible, leaving only those that would be a win and won't necessitate further changes. For example, the Approvals required column for a user without edit rights is the last column and aligning it to the centre would create an illusion that something is missing. This can be addressed later with a conditional and doesn't need to make the scope of this MR bigger.

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

Screenshots are required for UI changes, and strongly recommended for all other merge requests.

Before	After

How to set up and validate locally

Numbered steps to set up and validate the change are strongly suggested.

1. Choose a project and go to Settings > Merge request
2. Scroll down to Merge request approvals.
3. To test changes in MR edit view select an existing MR and click Edit buttn
4. Scroll down, between Reviewers and Milestone, expand Approval rules. To test the footer of the card, I temporarily removed this condition form the code.

Related to #432719 (closed)