Update icon styles for MR ready dropdownmr-widget-redesign-styling-updates

1 files changed, 14 insertions, 3 deletions

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js
index c2dad7166cf..a653b4820cf 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js
@@ -1,3 +1,6 @@
+import successSvg from 'icons/_icon_status_success.svg';
+import warningSvg from 'icons/_icon_status_warning.svg';
+
 import simplePoll from '~/lib/utils/simple_poll';
 import eventHub from '../../event_hub';
 
@@ -60,6 +63,12 @@ export default {
       const { commitMessage } = this;
       return !commitMessage.length || !this.isMergeAllowed() || this.isWorking;
     },
+    checkmarkSvg() {
+      return successSvg;
+    },
+    exclamationSvg() {
+      return warningSvg;
+    },
   },
   methods: {
     isMergeAllowed() {
@@ -178,14 +187,16 @@ export default {
             <a
               @click.prevent="handleMergeButtonClick(true)"
               class="merge_when_pipeline_succeeds" href="#">
-              <i class="fa fa-check fa-fw" aria-hidden="true"></i> Merge when pipeline succeeds
+              <span class="merge-opt-icon" v-html="checkmarkSvg" aria-hidden="true"></span>
+              <span class="merge-opt-title">Merge when pipeline succeeds</span>
             </a>
           </li>
           <li>
             <a
               @click.prevent="handleMergeButtonClick(false, true)"
               class="accept-merge-request" href="#">
-              <i class="fa fa-exclamation fa-fw" aria-hidden="true"></i> Merge immediately
+              <span class="merge-opt-icon" v-html="exclamationSvg" aria-hidden="true"></span>
+              <span class="merge-opt-title">Merge immediately</span>
             </a>
           </li>
         </ul>
@@ -195,7 +206,7 @@ export default {
           <input
             v-model="removeSourceBranch"
             :disabled="isMergeButtonDisabled"
-            type="checkbox"  /> Remove source branch
+            type="checkbox"/> Remove source branch
         </label>
         <a
           @click.prevent="toggleCommitMessageEditor"