Fix alignment of avatars in MR and pipeline emails

What does this MR do and why?

1. Corrects a few styles that were being stripped out by email vendors and causing alignment problems (can't use negative margins for example)
2. Corrects a few instances where email vendor css was causing problems (for example, gmail applies a 15px left margin to all <li> by default, which is what causes the misalignment of avatars here)
3. Updates the MR, branch and commit icons used in these emails, as they are outdated and blurry

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

Email template	Before (as rendered in gmail)	After	GDK preview URL
MR was approved			http://gdk.test:3000/rails/mailers/notify/approved_merge_request_email
Pipeline passed			http://gdk.test:3000/rails/mailers/notify/pipeline_success_email
Pipeline failed			http://gdk.test:3000/rails/mailers/notify/pipeline_failed_email
Pipeline fixed			http://gdk.test:3000/rails/mailers/notify/pipeline_fixed_email
MR set to auto-merge			http://gdk.test:3000/rails/mailers/notify/merge_when_pipeline_succeeds_email

How to set up and validate locally

1. Check out this branch locally
2. For each of the examples listed in the screenshots above, visit the GDK url
   1. Note: you may need to visit the merge request linked to in the merge request examples and add an assignee and/or reviewer. The example emails are based on real data in your GDK.
3. Part of what was fixed in this MR is hardening against styles imposed by gmail. To simulate that, in the console, run this JavaScript:

   // negative pixel values get stripped out by gmail
   document.querySelectorAll('img').forEach(i => {
       const {style} = i;
       const rules = (Object.keys(style));
       rules.forEach(r => {
           const thisStyle = style[r];
           style[r] = thisStyle.replace(/-\d+px/gi, "0px");
       })
   });
   // gmail sets a default 15px left margin to all <li> elements
   const gmailStyles = document.createElement('style');
   gmailStyles.innerText = "li {margin-left: 15px;}";
   document.head.appendChild(gmailStyles); 

4. You should see that the layout and styling of the email examples match the screenshots on this MR (though note that the data may be different). The styles manually added to the page in step 3 should not impact the email template.

Related to #452083 (closed), #425467 (closed)