From ec4157a481c4a0678242668754a5454037f1cc2e Mon Sep 17 00:00:00 2001
From: Jonathon Herbert <jonathon.herbert@guardian.co.uk>
Date: Wed, 13 Oct 2021 16:08:41 +0100
Subject: [PATCH] 3px for underlines

---
 src/ts/components/SidebarMatch.tsx | 16 +++++++++-------
 src/ts/components/constants.ts     |  1 +
 src/ts/utils/decoration.ts         | 16 +++++++++-------
 3 files changed, 19 insertions(+), 14 deletions(-)
 create mode 100644 src/ts/components/constants.ts

diff --git a/src/ts/components/SidebarMatch.tsx b/src/ts/components/SidebarMatch.tsx
index bbf93e2b..d9acec93 100644
--- a/src/ts/components/SidebarMatch.tsx
+++ b/src/ts/components/SidebarMatch.tsx
@@ -13,6 +13,7 @@ import { createScrollToRangeHandler } from "../utils/component";
 import Markdown from "./Markdown";
 import { css, SerializedStyles } from "@emotion/react";
 import { getSquiggleAsUri } from "../utils/squiggle";
+import { matchBorderWidth } from "./constants";
 
 interface IProps {
   match: IMatch;
@@ -39,7 +40,7 @@ export const getSidebarMatchStyles = (
       return css`
         &:after {
           position: absolute;
-          width: 2px;
+          width: ${matchBorderWidth};
           content: "";
           left: 0px;
           top: 0px;
@@ -47,30 +48,31 @@ export const getSidebarMatchStyles = (
           background-image: repeating-linear-gradient(
             to top,
             ${color} 0,
-            ${color} 3px,
-            transparent 3px,
-            transparent 5px
+            ${color} 4px,
+            transparent 4px,
+            transparent 6px
           );
-          background-size: 2px 5px;
+          background-size: 3px 6px;
         }
       `;
     case MatchType.DEFAULT:
       return css`
         &:after {
           position: absolute;
-          width: 4px;
+          width: 5px;
           content: "";
           left: 0px;
           bottom: 0px;
           height: 100%;
           background-repeat: repeat-y;
           background-position: top;
+          background-size: 5px;
           background-image: url('${getSquiggleAsUri(color, 'VERTICAL')}');
         }
       `;
     case MatchType.HAS_REPLACEMENT:
       return css`
-        border-left: 2px solid ${color};
+        border-left: ${matchBorderWidth} solid ${color};
       `;
   }
 };
diff --git a/src/ts/components/constants.ts b/src/ts/components/constants.ts
new file mode 100644
index 00000000..1472f999
--- /dev/null
+++ b/src/ts/components/constants.ts
@@ -0,0 +1 @@
+export const matchBorderWidth = '3px';
diff --git a/src/ts/utils/decoration.ts b/src/ts/utils/decoration.ts
index 558d8d44..c9f47020 100644
--- a/src/ts/utils/decoration.ts
+++ b/src/ts/utils/decoration.ts
@@ -2,6 +2,7 @@ import { news, opinion, success } from "@guardian/src-foundations";
 import flatten from "lodash/flatten";
 import { Node } from "prosemirror-model";
 import { Decoration, DecorationSet } from "prosemirror-view";
+import { matchBorderWidth } from "../components/constants";
 import { IRange, IMatch } from "../interfaces/IMatch";
 import { getSquiggleAsUri } from "./squiggle";
 
@@ -276,7 +277,7 @@ export const createGlobalDecorationStyleTag = (
   const styleContent = `
     .${DecorationClassMap.HAS_REPLACEMENT} {
       background-color: ${hasReplacementColours.backgroundColour};
-      border-bottom: 2px solid ${hasReplacementColours.borderColour};
+      border-bottom: ${matchBorderWidth} solid ${hasReplacementColours.borderColour};
     }
 
     .${DecorationClassMap.HAS_REPLACEMENT}.MatchDecoration--is-selected {
@@ -292,11 +293,12 @@ export const createGlobalDecorationStyleTag = (
       position: absolute;
       width: 100%;
       content: "";
-      bottom: -3px;
+      bottom: -4px;
       left: 0px;
-      height: 4px;
+      height: 5px;
       background-repeat: repeat-x;
       background-position: top;
+      background-size: 20px;
       background-image: url('${getSquiggleAsUri(defaultColours.borderColour)}');
     }
 
@@ -304,7 +306,7 @@ export const createGlobalDecorationStyleTag = (
       background-color: ${defaultColours.backgroundColourSelected};
     }
     .${DecorationClassMap.DEFAULT}.MatchDecoration--is-selected:after {
-      background-image: linear-gradient(0deg, ${defaultColours.backgroundColourSelected} 3px, transparent 3px), url('${getSquiggleAsUri(defaultColours.borderColour)}');
+      background-image: linear-gradient(0deg, ${defaultColours.backgroundColourSelected} 4px, transparent 4px), url('${getSquiggleAsUri(defaultColours.borderColour)}');
     }
 
     .${DecorationClassMap.CORRECT} {
@@ -316,11 +318,11 @@ export const createGlobalDecorationStyleTag = (
       position: absolute;
       width: 100%;
       content: "";
-      bottom: -2px;
+      bottom: -3px;
       left: 0px;
-      height: 2px;
+      height: ${matchBorderWidth};
       background-image: repeating-linear-gradient(to right, ${correctColours.borderColour} 0, ${correctColours.borderColour} 3px, transparent 3px, transparent 5px);
-      background-size: 5px 2px;
+      background-size: 5px ${matchBorderWidth};
     }
 
     .${DecorationClassMap.CORRECT}.MatchDecoration--is-selected,