1 files changed, 18 insertions, 17 deletions
diff --git a/app/assets/javascripts/diffs/components/compare_versions.vue b/app/assets/javascripts/diffs/components/compare_versions.vue
index 35e4527af69..b94874c5644 100644
--- a/app/assets/javascripts/diffs/components/compare_versions.vue
+++ b/app/assets/javascripts/diffs/components/compare_versions.vue
@@ -1,9 +1,8 @@
 <script>
 import { mapActions, mapGetters, mapState } from 'vuex';
-import { GlTooltipDirective, GlLink, GlDeprecatedButton, GlSprintf } from '@gitlab/ui';
+import { GlTooltipDirective, GlLink, GlButton, GlSprintf } from '@gitlab/ui';
 import { __ } from '~/locale';
 import { polyfillSticky } from '~/lib/utils/sticky';
-import Icon from '~/vue_shared/components/icon.vue';
 import CompareDropdownLayout from './compare_dropdown_layout.vue';
 import SettingsDropdown from './settings_dropdown.vue';
 import DiffStats from './diff_stats.vue';
@@ -12,9 +11,8 @@ import { CENTERED_LIMITED_CONTAINER_CLASSES } from '../constants';
 export default {
   components: {
     CompareDropdownLayout,
-    Icon,
     GlLink,
-    GlDeprecatedButton,
+    GlButton,
     GlSprintf,
     SettingsDropdown,
     DiffStats,
@@ -84,18 +82,15 @@ export default {
         [CENTERED_LIMITED_CONTAINER_CLASSES]: isLimitedContainer,
       }"
     >
-      <button
+      <gl-button
         v-gl-tooltip.hover
-        type="button"
-        class="btn btn-default gl-mr-3 js-toggle-tree-list"
-        :class="{
-          active: showTreeList,
-        }"
+        variant="default"
+        icon="file-tree"
+        class="gl-mr-3 js-toggle-tree-list"
         :title="toggleFileBrowserTitle"
+        :selected="showTreeList"
         @click="toggleShowTreeList"
-      >
-        <icon name="file-tree" />
-      </button>
+      />
       <gl-sprintf
         v-if="showDropdowns"
         class="d-flex align-items-center compare-versions-container"
@@ -124,16 +119,22 @@ export default {
           :added-lines="addedLines"
           :removed-lines="removedLines"
         />
-        <gl-deprecated-button
+        <gl-button
           v-if="commit || startVersion"
           :href="latestVersionPath"
+          variant="default"
           class="gl-mr-3 js-latest-version"
         >
           {{ __('Show latest version') }}
-        </gl-deprecated-button>
-        <gl-deprecated-button v-show="hasCollapsedFile" class="gl-mr-3" @click="expandAllFiles">
+        </gl-button>
+        <gl-button
+          v-show="hasCollapsedFile"
+          variant="default"
+          class="gl-mr-3"
+          @click="expandAllFiles"
+        >
           {{ __('Expand all') }}
-        </gl-deprecated-button>
+        </gl-button>
         <settings-dropdown />
       </div>
     </div>