Improved the diff comment button UX

It now shows the line will be commenting on my highlight the line number cells with a lighter color. The button has also been made smaller, it was previously way over the top & took over a lot more space than it should of done

Closes #27543

5 files changed, 53 insertions, 0 deletions

diff --git a/app/assets/stylesheets/highlight/dark.scss b/app/assets/stylesheets/highlight/dark.scss
index 6f2e746d4b0..c26edec8ee3 100644
--- a/app/assets/stylesheets/highlight/dark.scss
+++ b/app/assets/stylesheets/highlight/dark.scss
@@ -139,6 +139,17 @@ $dark-il: #de935f;
       }
     }
 
+    .diff-line-num {
+      &.is-over {
+        background-color: #ded7fc;
+        border-color: darken(#ded7fc, 5%);
+
+        a {
+          color: darken(#ded7fc, 15%);
+        }
+      }
+    }
+
     .line_content.match {
       @include dark-diff-match-line;
     }
diff --git a/app/assets/stylesheets/highlight/monokai.scss b/app/assets/stylesheets/highlight/monokai.scss
index 2144a5f7466..b311e1085c1 100644
--- a/app/assets/stylesheets/highlight/monokai.scss
+++ b/app/assets/stylesheets/highlight/monokai.scss
@@ -139,6 +139,17 @@ $monokai-gi: #a6e22e;
       }
     }
 
+    .diff-line-num {
+      &.is-over {
+        background-color: #9f9ab5;
+        border-color: darken(#9f9ab5, 5%);
+
+        a {
+          color: darken(#9f9ab5, 15%);
+        }
+      }
+    }
+
     .line_content.match {
       @include dark-diff-match-line;
     }
diff --git a/app/assets/stylesheets/highlight/solarized_dark.scss b/app/assets/stylesheets/highlight/solarized_dark.scss
index 2cb1d18f12f..b238b66c42d 100644
--- a/app/assets/stylesheets/highlight/solarized_dark.scss
+++ b/app/assets/stylesheets/highlight/solarized_dark.scss
@@ -143,6 +143,17 @@ $solarized-dark-il: #2aa198;
       }
     }
 
+    .diff-line-num {
+      &.is-over {
+        background-color: #9f9ab5;
+        border-color: darken(#9f9ab5, 5%);
+
+        a {
+          color: darken(#9f9ab5, 15%);
+        }
+      }
+    }
+
     .line_content.match {
       @include dark-diff-match-line;
     }
diff --git a/app/assets/stylesheets/highlight/solarized_light.scss b/app/assets/stylesheets/highlight/solarized_light.scss
index b72c4326730..0ac1e46a9f7 100644
--- a/app/assets/stylesheets/highlight/solarized_light.scss
+++ b/app/assets/stylesheets/highlight/solarized_light.scss
@@ -150,6 +150,17 @@ $solarized-light-il: #2aa198;
       }
     }
 
+    .diff-line-num {
+      &.is-over {
+        background-color: #ded7fc;
+        border-color: darken(#ded7fc, 5%);
+
+        a {
+          color: darken(#ded7fc, 15%);
+        }
+      }
+    }
+
     .line_content.match {
       @include matchLine;
     }
diff --git a/app/assets/stylesheets/highlight/white.scss b/app/assets/stylesheets/highlight/white.scss
index 398fbfd3b18..9b19282dd6f 100644
--- a/app/assets/stylesheets/highlight/white.scss
+++ b/app/assets/stylesheets/highlight/white.scss
@@ -123,6 +123,15 @@ $white-gc-bg: #eaf2f5;
         }
       }
 
+      &.is-over {
+        background-color: #ded7fc;
+        border-color: darken(#ded7fc, 5%);
+
+        a {
+          color: darken(#ded7fc, 15%);
+        }
+      }
+
       &.hll:not(.empty-cell) {
         background-color: $line-number-select;
         border-color: $line-select-yellow-dark;