1 files changed, 28 insertions, 24 deletions

diff --git a/app/assets/javascripts/diffs/components/diff_expansion_cell.vue b/app/assets/javascripts/diffs/components/diff_expansion_cell.vue
index e5e63bdcb43..0094b4f8707 100644
--- a/app/assets/javascripts/diffs/components/diff_expansion_cell.vue
+++ b/app/assets/javascripts/diffs/components/diff_expansion_cell.vue
@@ -1,8 +1,9 @@
 <script>
 import { mapState, mapActions } from 'vuex';
+import { GlIcon } from '@gitlab/ui';
 import { deprecatedCreateFlash as createFlash } from '~/flash';
-import { s__ } from '~/locale';
-import Icon from '~/vue_shared/components/icon.vue';
+import { s__, sprintf } from '~/locale';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { UNFOLD_COUNT, INLINE_DIFF_VIEW_TYPE, PARALLEL_DIFF_VIEW_TYPE } from '../constants';
 import * as utils from '../store/utils';
 import tooltip from '../../vue_shared/directives/tooltip';
@@ -17,17 +18,23 @@ const lineNumberByViewType = (viewType, diffLine) => {
     [PARALLEL_DIFF_VIEW_TYPE]: line => (line?.right || line?.left)?.new_line,
   };
   const numberGetter = numberGetters[viewType];
-
   return numberGetter && numberGetter(diffLine);
 };
 
+const i18n = {
+  showMore: sprintf(s__('Diffs|Show %{unfoldCount} lines'), { unfoldCount: UNFOLD_COUNT }),
+  showAll: s__('Diffs|Show all unchanged lines'),
+};
+
 export default {
+  i18n,
   directives: {
     tooltip,
   },
   components: {
-    Icon,
+    GlIcon,
   },
+  mixins: [glFeatureFlagsMixin()],
   props: {
     fileHash: {
       type: String,
@@ -59,7 +66,9 @@ export default {
   },
   computed: {
     ...mapState({
-      diffViewType: state => state.diffs.diffViewType,
+      diffViewType(state) {
+        return this.glFeatures.unifiedDiffLines ? INLINE_DIFF_VIEW_TYPE : state.diffs.diffViewType;
+      },
       diffFiles: state => state.diffs.diffFiles,
     }),
     canExpandUp() {
@@ -226,32 +235,27 @@ export default {
 </script>
 
 <template>
-  <td :colspan="colspan" class="text-center">
+  <td :colspan="colspan" class="text-center gl-font-regular">
     <div class="content js-line-expansion-content">
       <a
-        v-if="canExpandUp"
-        v-tooltip
-        class="cursor-pointer js-unfold unfold-icon d-inline-block pt-2 pb-2"
-        data-placement="top"
-        data-container="body"
-        :title="__('Expand up')"
-        @click="handleExpandLines(EXPAND_UP)"
+        v-if="canExpandDown"
+        class="gl-mx-2 gl-cursor-pointer js-unfold-down gl-display-inline-block gl-py-4"
+        @click="handleExpandLines(EXPAND_DOWN)"
       >
-        <icon :size="12" name="expand-up" aria-hidden="true" />
+        <gl-icon :size="12" name="expand-down" aria-hidden="true" />
+        <span>{{ $options.i18n.showMore }}</span>
       </a>
-      <a class="mx-2 cursor-pointer js-unfold-all" @click="handleExpandLines()">
-        <span>{{ s__('Diffs|Show unchanged lines') }}</span>
+      <a class="gl-mx-2 cursor-pointer js-unfold-all" @click="handleExpandLines()">
+        <gl-icon :size="12" name="expand" aria-hidden="true" />
+        <span>{{ $options.i18n.showAll }}</span>
       </a>
       <a
-        v-if="canExpandDown"
-        v-tooltip
-        class="cursor-pointer js-unfold-down has-tooltip unfold-icon d-inline-block pt-2 pb-2"
-        data-placement="top"
-        data-container="body"
-        :title="__('Expand down')"
-        @click="handleExpandLines(EXPAND_DOWN)"
+        v-if="canExpandUp"
+        class="gl-mx-2 gl-cursor-pointer js-unfold gl-display-inline-block gl-py-4"
+        @click="handleExpandLines(EXPAND_UP)"
       >
-        <icon :size="12" name="expand-down" aria-hidden="true" />
+        <gl-icon :size="12" name="expand-up" aria-hidden="true" />
+        <span>{{ $options.i18n.showMore }}</span>
       </a>
     </div>
   </td>