3px for underlines

guardian · Feb 23, 2022 · ec4157a · ec4157a
1 parent eec0ef5
commit ec4157a
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 14 deletions.
diff --git 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,38 +40,39 @@ export const getSidebarMatchStyles = (
       return css`
         &:after {
           position: absolute;
-          width: 2px;
+          width: ${matchBorderWidth};
           content: "";
           left: 0px;
           top: 0px;
           height: 100%;
           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
@@ -0,0 +1 @@
+export const matchBorderWidth = '3px';
diff --git 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,19 +293,20 @@ 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)}');
     }
 
     .${DecorationClassMap.DEFAULT}.MatchDecoration--is-selected {
       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,