Add syntax highlighting for line expansion66066-dark-theme-style-for-expansion-on-mr-diffs

- dark
- white
- monokai
- none
- solarized-dark
- solarized-light

9 files changed, 42 insertions, 21 deletions

diff --git a/app/assets/javascripts/diffs/components/diff_expansion_cell.vue b/app/assets/javascripts/diffs/components/diff_expansion_cell.vue
index 925385fa98a..79edec2b58e 100644
--- a/app/assets/javascripts/diffs/components/diff_expansion_cell.vue
+++ b/app/assets/javascripts/diffs/components/diff_expansion_cell.vue
@@ -212,12 +212,12 @@ export default {
 </script>
 
 <template>
-  <td :colspan="colspan">
+  <td :colspan="colspan" class="text-center">
     <div class="content js-line-expansion-content">
       <a
         v-if="canExpandUp"
         v-tooltip
-        class="cursor-pointer js-unfold unfold-icon"
+        class="cursor-pointer js-unfold unfold-icon d-inline-block pt-2 pb-2"
         data-placement="top"
         data-container="body"
         :title="__('Expand up')"
@@ -232,7 +232,7 @@ export default {
       <a
         v-if="canExpandDown"
         v-tooltip
-        class="cursor-pointer js-unfold-down has-tooltip unfold-icon"
+        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')"
diff --git a/app/assets/stylesheets/highlight/common.scss b/app/assets/stylesheets/highlight/common.scss
index ac3214a07d9..bdeac7e97c0 100644
--- a/app/assets/stylesheets/highlight/common.scss
+++ b/app/assets/stylesheets/highlight/common.scss
@@ -16,3 +16,16 @@
   color: $dark-diff-match-bg;
   background: $dark-diff-match-color;
 }
+
+@mixin diff-expansion($background, $border, $link) {
+  background-color: $background;
+
+  td {
+    border-top: 1px solid $border;
+    border-bottom: 1px solid $border;
+  }
+
+  a {
+    color: $link;
+  }
+}
diff --git a/app/assets/stylesheets/highlight/themes/dark.scss b/app/assets/stylesheets/highlight/themes/dark.scss
index 16893dd047e..cbce0ba3f1e 100644
--- a/app/assets/stylesheets/highlight/themes/dark.scss
+++ b/app/assets/stylesheets/highlight/themes/dark.scss
@@ -111,6 +111,10 @@ $dark-il: #de935f;
     color: $dark-line-color;
   }
 
+  .line_expansion {
+    @include diff-expansion($dark-main-bg, $dark-border, $dark-na);
+  }
+
   // Diff line
   .line_holder {
     &.match .line_content,
diff --git a/app/assets/stylesheets/highlight/themes/monokai.scss b/app/assets/stylesheets/highlight/themes/monokai.scss
index 37fe61b925c..1b61ffa37e3 100644
--- a/app/assets/stylesheets/highlight/themes/monokai.scss
+++ b/app/assets/stylesheets/highlight/themes/monokai.scss
@@ -111,6 +111,10 @@ $monokai-gi: #a6e22e;
     color: $monokai-text-color;
   }
 
+  .line_expansion {
+    @include diff-expansion($monokai-bg, $monokai-border, $monokai-k);
+  }
+
   // Diff line
   .line_holder {
     &.match .line_content,
diff --git a/app/assets/stylesheets/highlight/themes/none.scss b/app/assets/stylesheets/highlight/themes/none.scss
index b4217aac37a..a7ede266fb5 100644
--- a/app/assets/stylesheets/highlight/themes/none.scss
+++ b/app/assets/stylesheets/highlight/themes/none.scss
@@ -34,8 +34,11 @@
     color: $gl-text-color;
   }
 
-// Diff line
+  .line_expansion {
+    @include diff-expansion($gray-light, $white-normal, $gl-text-color);
+  }
 
+  // Diff line
   $none-over-bg: #ded7fc;
   $none-expanded-border: #e0e0e0;
   $none-expanded-bg: #e0e0e0;
diff --git a/app/assets/stylesheets/highlight/themes/solarized-dark.scss b/app/assets/stylesheets/highlight/themes/solarized-dark.scss
index a4e9eda22c9..6569f3abc8b 100644
--- a/app/assets/stylesheets/highlight/themes/solarized-dark.scss
+++ b/app/assets/stylesheets/highlight/themes/solarized-dark.scss
@@ -115,6 +115,10 @@ $solarized-dark-il: #2aa198;
     color: $solarized-dark-pre-color;
   }
 
+  .line_expansion {
+    @include diff-expansion($solarized-dark-line-bg, $solarized-dark-border, $solarized-dark-kd);
+  }
+
   // Diff line
   .line_holder {
     &.match .line_content,
diff --git a/app/assets/stylesheets/highlight/themes/solarized-light.scss b/app/assets/stylesheets/highlight/themes/solarized-light.scss
index b604d1ccb6c..4e74a9ea50a 100644
--- a/app/assets/stylesheets/highlight/themes/solarized-light.scss
+++ b/app/assets/stylesheets/highlight/themes/solarized-light.scss
@@ -122,6 +122,10 @@ $solarized-light-il: #2aa198;
     color: $solarized-light-pre-color;
   }
 
+  .line_expansion {
+    @include diff-expansion($solarized-light-line-bg, $solarized-light-border, $solarized-light-kd);
+  }
+
   // Diff line
   .line_holder {
     &.match .line_content,
diff --git a/app/assets/stylesheets/highlight/white_base.scss b/app/assets/stylesheets/highlight/white_base.scss
index b3974df8639..973f94c63aa 100644
--- a/app/assets/stylesheets/highlight/white_base.scss
+++ b/app/assets/stylesheets/highlight/white_base.scss
@@ -101,24 +101,8 @@ pre.code,
   color: $white-code-color;
 }
 
-// Expansion line
 .line_expansion {
-  background-color: $gray-light;
-
-  td {
-    border-top: 1px solid $border-color;
-    border-bottom: 1px solid $border-color;
-    text-align: center;
-  }
-
-  a {
-    color: $blue-600;
-  }
-
-  .unfold-icon {
-    display: inline-block;
-    padding: 8px 0;
-  }
+  @include diff-expansion($gray-light, $border-color, $blue-600);
 }
 
 // Diff line
diff --git a/changelogs/unreleased/66066-dark-theme-style-for-expansion-on-mr-diffs.yml b/changelogs/unreleased/66066-dark-theme-style-for-expansion-on-mr-diffs.yml
new file mode 100644
index 00000000000..13607ae938a
--- /dev/null
+++ b/changelogs/unreleased/66066-dark-theme-style-for-expansion-on-mr-diffs.yml
@@ -0,0 +1,5 @@
+---
+title: Add syntax highlighting for line expansion
+merge_request: 31821
+author:
+type: fixed