Add dotted circle and checkmark icon svgs.

app/assets/javascripts/merge_request_widget/approvals/components/approvals_body.js.es6

@@ -47,9 +47,9 @@
         <div>
           <h4> Requires {{ approvalsRequiredStringified }} (from {{ approverNamesStringified }})</h4>
           <div v-if='showApproveButton' class='append-bottom-10'>
-            <button 
-              @click='approveMergeRequest' 
-              class='btn btn-primary approve-btn'> 
+            <button
+              @click='approveMergeRequest'
+              class='btn btn-primary approve-btn'>
               Approve Merge Request
             </button>
           </div>

app/assets/javascripts/merge_request_widget/approvals/components/approvals_footer.js.es6

@@ -9,11 +9,10 @@
 
   componentRegistry.approvalsFooter = {
     name: 'ApprovalsFooter',
-    props: ['userCanApprove', 'userHasApproved', 'approvedByUsers', 'approvalsLeft'],
+    props: ['userCanApprove', 'userHasApproved', 'approvedByUsers', 'approvalsLeft', 'pendingAvatarSvg', 'checkmarkSvg'],
     data() {
       return {
         loading: true,
-        pendingAvatar: '/assets/no_avatar.png'
       };
     },
     computed: {
@@ -23,6 +22,7 @@
       showUnapproveButton() {
         return this.userCanApprove && this.userHasApproved;
       },
+
     },
     methods: {
       removeApproval() {
@@ -35,26 +35,29 @@
       });
     },
     template: `
-      <div v-if='hasApprovers' class='mr-widget-footer approved-by-users approvals-footer'>
+      <div v-if='hasApprovers' class='mr-widget-footer approved-by-users approvals-footer clearfix'>
+        <span class='approvers-prefix'> Approved by </span>
         <span v-for='approver in approvedByUsers'>
           <link-to-member-avatar
             extra-link-class='approver-avatar'
             :avatar-url='approver.avatar.url'
             :display-name='approver.name'
             :username='approver.username'
+            :avatar-html='checkmarkSvg'
             :show-tooltip='true'>
           </link-to-member-avatar>
         </span>
         <span v-for='n in approvalsLeft'>
           <link-to-member-avatar
             :non-user='true'
-            :avatar-url='pendingAvatar'
-            :show-tooltip='false'>
+            :avatar-html='pendingAvatarSvg'
+            :show-tooltip='false'
+            extra-link-class='hide-asset'>
           </link-to-member-avatar>
         </span>
-        <span  v-if='showUnapproveButton'>
+        <span class='unapprove-btn-wrap' v-if='showUnapproveButton'>
           <i class='fa fa-close'></i>
-          <button @click='removeApproval'>Remove your approval</button>
+          <span @click='removeApproval'>Remove your approval</span>
         </span>
         <loading-icon v-if='loading'></loading-icon>
       </div>

app/assets/javascripts/vue_common_component/link_to_member_avatar.js.es6

@@ -35,7 +35,7 @@
       },
       size: {
         type: Number,
-        default: 48,
+        default: 32,
         required: false
       },
       nonUser: {
@@ -46,16 +46,27 @@
       tooltipContainer: {
         type: String,
         required: false,
+      },
+      avatarHtml: {
+        type: String,
+        required: false,
       }
     },
     data() {
       return {
-        noAvatarUrl: '/assets/no_avatar.png'
+        noAvatarUrl: '/assets/no_avatar.png',
+        defaultAvatarClass: 'avatar avatar-inline',
       };
     },
     computed: {
+      avatarSizeClass() {
+        return `s${this.size}`;
+      },
+      avatarHtmlClass() {
+        return `${this.avatarSizeClass} ${this.defaultAvatarClass}`;
+      },
       avatarElemId() {
-        return `${this.username}-avatar-link`;
+        return this.username ? `${this.username}-avatar-link` : 'non-user-avatar-link';
       },
       userProfileUrl() {
         return this.nonUser || !this.username ? '' : `/${this.username}`;
@@ -67,7 +78,7 @@
         return this.showTooltip ? 'has-tooltip' : '';
       },
       avatarClass() {
-        return `avatar avatar-inline s${this.size} ${this.extraAvatarClass}`
+        return `${this.defaultAvatarClass} ${this.avatarSizeClass} ${this.extraAvatarClass}`;
       },
       disabledClass() {
         return this.nonUser ? 'disabled' : '';
@@ -77,14 +88,20 @@
       },
       tooltipContainerAttr() {
         return this.tooltipContainer || `#${this.avatarElemId}`;
-      }
+      },
+    },
+    methods: {
+      pixelizeValue(size) {
+        return size + 'px';
+      },
     },
     template: `
-      <span :id='avatarElemId'>
+      <div class='link-to-member-avatar' :id='avatarElemId'>
         <a :href='userProfileUrl' :class='linkClass' :data-original-title='displayName' :data-container='tooltipContainerAttr'>
+          <svg v-if='avatarHtml' v-html='avatarHtml' :class='avatarHtmlClass' :width='size' :height='size' :alt='displayName'></svg>
           <img :class='avatarClass' :src='preppedAvatarUrl' :width='size' :height='size' :alt='displayName'/>
         </a>
-      </span>
+      </div>
     `
   });
 })();

app/assets/stylesheets/pages/merge_requests.scss

@@ -430,21 +430,47 @@
 }
 
 .approvals-footer {
+  display: flex;
   a.disabled {
     pointer-events: none;
     cursor: default;
   }
+
+  > span {
+    align-self: center;
+  }
+
+  .hide-asset {
+    img {
+      display: none;
+    }
+    svg {
+      margin-bottom: -7px; // makes up for border removed
+      border: none;
+    }
+  }
+  .avatar {
+    margin-bottom: -2px;
+    margin-right: 3px;
+  }
+
+  .unapprove-btn-wrap {
+    cursor: pointer;
+    border-left: 1px solid $gl-gray-light;
+    padding-left: 15px;
+    margin-left: 10px;
+  }
+
   .approver-avatar {
     position: relative;
     display: inline-block;
-    &::before {
-      content:'\2713';
-      color: green;
-      background: white;
-      position: absolute;
-      top: 0;
-      right: 32%;
+
+    svg.avatar {
+      position:absolute;
+      top: 12%;
+      right: 4%;
+      height: 45%;
+      width: 45%;
     }
   }
-
 }

app/views/projects/merge_requests/widget/_open.html.haml

@@ -54,5 +54,5 @@
         = mr_assign_issues_link
 
   - if @merge_request.approvals.any?
-    %approvals-footer{':approved-by-users' => 'approvals.approvedByUsers', ':approver-names' => 'approvals.approverNames', ':approvals-left' => 'approvals.approvalsLeft', ':user-can-approve' => 'approvals.userCanApprove', ':user-has-approved' => 'approvals.userHasApproved'}
+    %approvals-footer{':approved-by-users' => 'approvals.approvedByUsers', ':approver-names' => 'approvals.approverNames', ':approvals-left' => 'approvals.approvalsLeft', ':user-can-approve' => 'approvals.userCanApprove', ':user-has-approved' => 'approvals.userHasApproved', 'pending-avatar-svg' => custom_icon('icon_dotted_circle'), 'checkmark-svg' => custom_icon('icon_checkmark') }
 

app/views/shared/icons/_icon_checkmark.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="0" d="m5.743 5.743h-2c-.556 0-1 .448-1 1 0 .556.448 1 1 1h3c.556 0 1-.448 1-1v-5.01c0-.54-.448-.991-1-.991-.556 0-1 .444-1 .991v4.01"/><mask id="1" width="6" height="8" x="-.5" y="-.5"><path fill="#fff" d="m2.243.243h6v8h-6z"/><use xlink:href="#0"/></mask></defs><g fill="none" fill-rule="evenodd" transform="matrix(.70711.70711-.70711.70711 4.536-2.465)"><use fill="#31af64" xlink:href="#0"/><use stroke="#fff" mask="url(#1)" xlink:href="#0"/></g></svg>
\ No newline at end of file

app/views/shared/icons/_icon_dotted_circle.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27"><path fill="#bfbfbf" fill-rule="evenodd" d="m13.5 26.5c1.412 0 2.794-.225 4.107-.662l-.316-.949c-1.212.403-2.487.611-3.792.611v1m6.06-1.495c1.234-.651 2.355-1.498 3.321-2.504l-.721-.692c-.892.929-1.928 1.711-3.067 2.312l.467.884m4.66-4.147c.79-1.149 1.391-2.418 1.777-3.762l-.961-.276c-.356 1.24-.911 2.411-1.64 3.471l.824.567m2.184-5.761c.063-.518.096-1.041.097-1.568 0-.896-.085-1.758-.255-2.603l-.98.197c.157.78.236 1.576.236 2.405-.001.486-.031.97-.09 1.448l.993.122m-.738-6.189c-.493-1.307-1.195-2.523-2.075-3.605l-.776.631c.812.999 1.46 2.122 1.916 3.327l.935-.353m-3.539-5.133c-1.043-.926-2.229-1.68-3.512-2.229l-.394.919c1.184.507 2.279 1.203 3.242 2.058l.664-.748m-5.463-2.886c-1.012-.253-2.058-.384-3.119-.388-.378 0-.717.013-1.059.039l.077.997c.316-.024.629-.036.98-.036.979.003 1.944.124 2.879.358l.243-.97m-6.238-.022c-1.361.33-2.653.878-3.832 1.619l.532.847c1.089-.684 2.281-1.189 3.536-1.494l-.236-.972m-5.517 2.878c-1.047.922-1.94 2.01-2.643 3.212l.864.504c.649-1.112 1.474-2.114 2.441-2.966l-.661-.75m-3.54 5.076c-.499 1.293-.789 2.664-.854 4.072l.999.046c.06-1.3.328-2.564.788-3.758l-.933-.36m-.78 6.202c.163 1.396.549 2.744 1.14 4l.905-.425c-.545-1.16-.902-2.404-1.052-3.692l-.993.116m2.177 5.814c.788 1.151 1.756 2.169 2.866 3.01l.606-.796c-1.025-.78-1.919-1.721-2.646-2.783l-.825.565m4.665 4.164c1.23.65 2.559 1.1 3.943 1.328l.162-.987c-1.278-.21-2.503-.625-3.638-1.225l-.468.884m6.02 1.501c.024 0 .024 0 .048 0v-1c-.022 0-.022 0-.044 0l-.004 1"/></svg>
\ No newline at end of file