From 42eea0017dd627ee34562aab87d89383b28ee089 Mon Sep 17 00:00:00 2001
From: Domagoj Kriskovic <dom.kriskovic@overleaf.com>
Date: Mon, 21 Oct 2024 10:57:13 +0200
Subject: [PATCH] Update track change decoration to be cursor-like (#21047)

* Update track change decoration to be cursor-like

* use red-50 color

GitOrigin-RevId: 8c8a2cb9c6abc99aa1d2dace705dba3feeda07fa
---
 .../source-editor/extensions/ranges.ts        | 21 +++++++++++--------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/services/web/frontend/js/features/source-editor/extensions/ranges.ts b/services/web/frontend/js/features/source-editor/extensions/ranges.ts
index c6b10abd19..7748a580c2 100644
--- a/services/web/frontend/js/features/source-editor/extensions/ranges.ts
+++ b/services/web/frontend/js/features/source-editor/extensions/ranges.ts
@@ -325,7 +325,6 @@ class ChangeDeletedWidget extends WidgetType {
     const widget = document.createElement('span')
     widget.classList.add('ol-cm-change')
     widget.classList.add('ol-cm-change-d')
-    widget.textContent = '[ — ]'
     if (this.highlightType) {
       widget.classList.add(`ol-cm-change-d-${this.highlightType}`)
     }
@@ -409,24 +408,28 @@ const trackChangesTheme = EditorView.baseTheme({
   },
   // TODO: fix dark mode colors
   '&light .ol-cm-change-d': {
-    color: '#c5060b',
-    backgroundColor: '#f5beba57',
+    borderLeft: '2px dotted #c5060b',
+    marginLeft: '-1px',
   },
   '&dark .ol-cm-change-d': {
-    color: '#c5060b',
-    backgroundColor: '#f5beba57',
+    borderLeft: '2px dotted #c5060b',
+    marginLeft: '-1px',
   },
   '&light .ol-cm-change-d-highlight': {
-    backgroundColor: '#f5bebaa4',
+    borderLeft: '3px solid #c5060b',
+    marginLeft: '-2px',
   },
   '&dark .ol-cm-change-d-highlight': {
-    backgroundColor: '#f5bebaa4',
+    borderLeft: '3px solid #c5060b',
+    marginLeft: '-2px',
   },
   '&light .ol-cm-change-d-focus': {
-    backgroundColor: '#F5BEBA',
+    borderLeft: '3px solid #B83A33',
+    marginLeft: '-2px',
   },
   '&dark .ol-cm-change-d-focus': {
-    backgroundColor: '#F5BEBA',
+    borderLeft: '3px solid #B83A33',
+    marginLeft: '-2px',
   },
   '&light .ol-cm-change-highlight-i': {
     backgroundColor: '#b8dbc899',