From 07af9b357b82956d7de10bcdd8095986858c6e56 Mon Sep 17 00:00:00 2001
From: sanchi-t <ssharmas10662@gmail.com>
Date: Sun, 15 Sep 2024 19:06:25 +0530
Subject: [PATCH] css: Refactor theme colors for
 `.message_edit_history_content`.

This change moves the light and dark theme colors for
`.message_edit_history_content` to CSS variables.
---
 web/styles/app_variables.css        | 12 ++++++++++++
 web/styles/dark_theme.css           | 14 --------------
 web/styles/message_edit_history.css | 12 ++++++++----
 3 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/web/styles/app_variables.css b/web/styles/app_variables.css
index 4c74489770..f2dc554fcd 100644
--- a/web/styles/app_variables.css
+++ b/web/styles/app_variables.css
@@ -804,6 +804,12 @@
     --color-show-more-less-button-background-hover: hsl(240deg 44% 56% / 15%);
     --color-show-more-less-button-background-active: hsl(240deg 44% 56% / 20%);
 
+    /* Message edit history colors */
+    --color-message-edit-history-text-inserted: hsl(122deg 72% 30%);
+    --color-message-edit-history-background-inserted: hsl(120deg 64% 95%);
+    --color-message-edit-history-text-deleted: hsl(0deg 100% 50%);
+    --color-message-edit-history-background-deleted: hsl(7deg 90% 92%);
+
     /* Mention pill colors */
     --color-background-direct-mention: hsl(240deg 52% 95%);
     --color-background-group-mention: hsl(180deg 40% 94%);
@@ -1265,6 +1271,12 @@
     --color-show-more-less-button-background-hover: hsl(240deg 44% 56% / 25%);
     --color-show-more-less-button-background-active: hsl(240deg 44% 56% / 15%);
 
+    /* Message edit history colors */
+    --color-message-edit-history-text-inserted: hsl(122deg 100% 81%);
+    --color-message-edit-history-background-inserted: hsl(120deg 64% 95% / 30%);
+    --color-message-edit-history-text-deleted: hsl(0deg 90% 67%);
+    --color-message-edit-history-background-deleted: hsl(7deg 54% 62% / 38%);
+
     /* Mention pill colors */
     --color-background-direct-mention: hsl(240deg 13% 20%);
     --color-background-group-mention: hsl(180deg 13% 15%);
diff --git a/web/styles/dark_theme.css b/web/styles/dark_theme.css
index f383acd2ea..a9585b9d47 100644
--- a/web/styles/dark_theme.css
+++ b/web/styles/dark_theme.css
@@ -670,20 +670,6 @@
         color: inherit;
     }
 
-    #message-edit-history-overlay-container {
-        .message_edit_history_content {
-            .highlight_text_inserted {
-                color: hsl(122deg 100% 81%);
-                background-color: hsl(120deg 64% 95% / 30%);
-            }
-
-            .highlight_text_deleted {
-                color: hsl(0deg 90% 67%);
-                background-color: hsl(7deg 54% 62% / 38%);
-            }
-        }
-    }
-
     & time {
         background: hsl(0deg 0% 0% / 20%);
         box-shadow: 0 0 0 1px hsl(0deg 0% 0% / 40%);
diff --git a/web/styles/message_edit_history.css b/web/styles/message_edit_history.css
index 7d069e0efc..cf37a9dab0 100644
--- a/web/styles/message_edit_history.css
+++ b/web/styles/message_edit_history.css
@@ -25,13 +25,17 @@
 
     .message_edit_history_content {
         .highlight_text_inserted {
-            color: hsl(122deg 72% 30%);
-            background-color: hsl(120deg 64% 95%);
+            color: var(--color-message-edit-history-text-inserted);
+            background-color: var(
+                --color-message-edit-history-background-inserted
+            );
         }
 
         .highlight_text_deleted {
-            color: hsl(0deg 100% 50%);
-            background-color: hsl(7deg 90% 92%);
+            color: var(--color-message-edit-history-text-deleted);
+            background-color: var(
+                --color-message-edit-history-background-deleted
+            );
             text-decoration: line-through;
             word-break: break-all;
         }