[UI] Fix misalligned icons

- On the pull request page, two icons were misaligned vertically with
their text part.
- This patch adds the simple flexbox trick with `align-items: center` to
vertically center the children elements and adds `gt-ml-2` to the text,
to add space between icon and text that would otherwise be removed
because of `display: flex`.

(cherry picked from commit 5c991c1043)
(cherry picked from commit dced28df0a)

web_src/js/components/PullRequestMergeForm.vue

@@ -63,9 +63,9 @@
     <div v-if="!showActionForm" class="gt-df">
       <!-- the merge button -->
       <div class="ui buttons merge-button" :class="[mergeForm.emptyCommit ? 'grey' : mergeForm.allOverridableChecksOk ? 'green' : 'red']" @click="toggleActionForm(true)">
-        <button class="ui button">
+        <button class="ui button gt-df gt-ac">
           <svg-icon name="octicon-git-merge"/>
-          <span class="button-text">
+          <span class="button-text gt-ml-2">
             {{ mergeStyleDetail.textDoMerge }}
             <template v-if="autoMergeWhenSucceed">
               {{ mergeForm.textAutoMergeButtonWhenSucceed }}