From 1e16de13bcf86b6cd5fbc8078a3a85fb7c94d871 Mon Sep 17 00:00:00 2001
From: Domagoj Kriskovic <dom.kriskovic@overleaf.com>
Date: Mon, 21 Oct 2024 10:58:24 +0200
Subject: [PATCH] Fix change and insert range decorations background color
 (#21131)

GitOrigin-RevId: 4bbc7abdc4c52ea31e26ea3fd8cf43d8c9620d47
---
 .../source-editor/extensions/ranges.ts        | 46 ++++---------------
 1 file changed, 10 insertions(+), 36 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 7748a580c2..e66cd898b4 100644
--- a/services/web/frontend/js/features/source-editor/extensions/ranges.ts
+++ b/services/web/frontend/js/features/source-editor/extensions/ranges.ts
@@ -385,18 +385,17 @@ const createChangeRange = (change: Change, data: RangesData) => {
 }
 
 const trackChangesTheme = EditorView.baseTheme({
-  '&light .ol-cm-change-i': {
-    backgroundColor: '#2c8e304d',
-  },
-  '&dark .ol-cm-change-i': {
-    backgroundColor: 'rgba(37, 107, 41, 0.15)',
-  },
-  '&light .ol-cm-change-c': {
-    backgroundColor: '#f3b1114d',
-  },
-  '&dark .ol-cm-change-c': {
-    backgroundColor: 'rgba(194, 93, 11, 0.15)',
+  '.ol-cm-change-i, .ol-cm-change-highlight-i, .ol-cm-change-focus-i': {
+    backgroundColor: 'rgba(44, 142, 48, 0.30)',
   },
+  '&light .ol-cm-change-c, &light .ol-cm-change-highlight-c, &light .ol-cm-change-focus-c':
+    {
+      backgroundColor: 'rgba(243, 177, 17, 0.30)',
+    },
+  '&dark .ol-cm-change-c, &dark .ol-cm-change-highlight-c, &dark .ol-cm-change-focus-c':
+    {
+      backgroundColor: 'rgba(194, 93, 11, 0.15)',
+    },
   '.ol-cm-change': {
     padding: 'var(--half-leading, 0) 0',
   },
@@ -406,7 +405,6 @@ const trackChangesTheme = EditorView.baseTheme({
   '.ol-cm-change-focus': {
     padding: 'var(--half-leading, 0) 0',
   },
-  // TODO: fix dark mode colors
   '&light .ol-cm-change-d': {
     borderLeft: '2px dotted #c5060b',
     marginLeft: '-1px',
@@ -431,28 +429,4 @@ const trackChangesTheme = EditorView.baseTheme({
     borderLeft: '3px solid #B83A33',
     marginLeft: '-2px',
   },
-  '&light .ol-cm-change-highlight-i': {
-    backgroundColor: '#b8dbc899',
-  },
-  '&dark .ol-cm-change-highlight-i': {
-    backgroundColor: '#b8dbc899',
-  },
-  '&light .ol-cm-change-highlight-c': {
-    backgroundColor: '#fcc4837d',
-  },
-  '&dark .ol-cm-change-highlight-c': {
-    backgroundColor: '#fcc4837d',
-  },
-  '&light .ol-cm-change-focus-i': {
-    backgroundColor: '#B8DBC8',
-  },
-  '&dark .ol-cm-change-focus-i': {
-    backgroundColor: '#B8DBC8',
-  },
-  '&light .ol-cm-change-focus-c': {
-    backgroundColor: '#FCC483',
-  },
-  '&dark .ol-cm-change-focus-c': {
-    backgroundColor: '#FCC483',
-  },
 })