Visually enhance code test coverage differences

app/assets/stylesheets/highlight/common.scss

@@ -36,11 +36,11 @@
   transition: border-left 0.1s ease-out;
 
   &.coverage {
-    border-left: 3px solid $coverage;
+    border-left: 4px solid $coverage;
   }
 
   &.no-coverage {
-    border-left: 3px solid $no-coverage;
+    border-left: 2px solid $no-coverage;
   }
 }
 

app/assets/stylesheets/highlight/themes/dark.scss

@@ -24,8 +24,8 @@ $dark-pre-hll-bg: #373b41;
 $dark-hll-bg: #373b41;
 $dark-over-bg: #9f9ab5;
 $dark-expanded-bg: #3e3e3e;
-$dark-coverage: #b5bd68;
-$dark-no-coverage: #de935f;
+$dark-coverage: #b3e841;
+$dark-no-coverage: #ff4f33;
 $dark-c: #969896;
 $dark-err: #c66;
 $dark-k: #b294bb;

app/assets/stylesheets/highlight/white_base.scss

@@ -214,7 +214,7 @@ pre.code,
   }
 
   .line-coverage {
-    @include line-coverage-border-color($green-500, $orange-500);
+    @include line-coverage-border-color($green-400, $red-400);
 
     &.old {
       background-color: $line-removed;

changelogs/unreleased/278469-docs-feedback-hard-to-understand-code-coverage-colouring.yml

+---
+title: Visually enhance the difference between code that has and does not have test
+  coverage
+merge_request: 49724
+author:
+type: other