From 104679be2dfabf9ba51adfdcfe5f11f556945af7 Mon Sep 17 00:00:00 2001
From: Flawid DSouza <me@flawiddsouza.com>
Date: Wed, 6 Mar 2024 15:28:48 +0530
Subject: [PATCH] fix(ui): Modal > Code Mirror Editor > Incorrect environment
 variable highlighting in dark mode

---
 .../ui/src/components/CodeMirrorEditor.vue    | 22 ---------
 .../src/components/CodeMirrorSingleLine.vue   | 14 ------
 packages/ui/src/styles/main.css               | 48 +++++++++++++++++++
 3 files changed, 48 insertions(+), 36 deletions(-)

diff --git a/packages/ui/src/components/CodeMirrorEditor.vue b/packages/ui/src/components/CodeMirrorEditor.vue
index df775803..c24b022d 100644
--- a/packages/ui/src/components/CodeMirrorEditor.vue
+++ b/packages/ui/src/components/CodeMirrorEditor.vue
@@ -204,26 +204,4 @@ export default {
 .code-mirror-editor .cm-editor {
     height: 100%;
 }
-
-.code-mirror-editor .valid-env-var {
-    background-color: var(--valid-env-highlight-background-color);
-    border-radius: 3px;
-    padding: 2px 0;
-    color: var(--valid-env-highlight-color);
-}
-
-.code-mirror-editor .valid-env-var * {
-    color: var(--valid-env-highlight-color) !important;
-}
-
-.code-mirror-editor .invalid-env-var {
-    background-color: var(--invalid-env-highlight-background-color);
-    border-radius: 3px;
-    padding: 2px 0;
-    color: var(--invalid-env-highlight-color);
-}
-
-.code-mirror-editor .invalid-env-var * {
-    color: var(--invalid-env-highlight-color) !important;
-}
 </style>
diff --git a/packages/ui/src/components/CodeMirrorSingleLine.vue b/packages/ui/src/components/CodeMirrorSingleLine.vue
index ad03b9c4..ce2f9671 100644
--- a/packages/ui/src/components/CodeMirrorSingleLine.vue
+++ b/packages/ui/src/components/CodeMirrorSingleLine.vue
@@ -156,20 +156,6 @@ export default {
     padding: v-bind('inputTextCompatible ? "0" : "4px 0"');
 }
 
-.code-mirror-single-line .valid-env-var {
-    background-color: var(--valid-env-highlight-background-color);
-    border-radius: 3px;
-    padding: 2px 0;
-    color: var(--valid-env-highlight-color);
-}
-
-.code-mirror-single-line .invalid-env-var {
-    background-color: var(--invalid-env-highlight-background-color);
-    border-radius: 3px;
-    padding: 2px 0;
-    color: var(--invalid-env-highlight-color);
-}
-
 .code-mirror-single-line .cm-line {
     padding: v-bind('inputTextCompatible ? "0" : "0 2px 0 4px"');
 }
diff --git a/packages/ui/src/styles/main.css b/packages/ui/src/styles/main.css
index 28b19c21..1e44c461 100644
--- a/packages/ui/src/styles/main.css
+++ b/packages/ui/src/styles/main.css
@@ -71,6 +71,10 @@ html {
     --valid-env-highlight-background-color: #e8f5e9;
     --invalid-env-highlight-color: #d32f2f;
     --invalid-env-highlight-background-color: #ffebee;
+    --modal-valid-env-highlight-color: #2e7d32;
+    --modal-valid-env-highlight-background-color: #e8f5e9;
+    --modal-invalid-env-highlight-color: #d32f2f;
+    --modal-invalid-env-highlight-background-color: #ffebee;
 }
 
 html.theme-dark {
@@ -127,6 +131,10 @@ html.theme-dark {
     --valid-env-highlight-background-color: #1b5e20;
     --invalid-env-highlight-color: #ffcccb;
     --invalid-env-highlight-background-color: #7c0404;
+    --modal-valid-env-highlight-color: #2e7d32;
+    --modal-valid-env-highlight-background-color: #e8f5e9;
+    --modal-invalid-env-highlight-color: #d32f2f;
+    --modal-invalid-env-highlight-background-color: #ffebee;
 }
 
 * {
@@ -290,6 +298,46 @@ button.button:hover {
     color: var(--modal-cm-number);
 }
 
+.cm-editor .valid-env-var {
+    background-color: var(--valid-env-highlight-background-color);
+    border-radius: 3px;
+    padding: 2px 0;
+    color: var(--valid-env-highlight-color);
+}
+
+.cm-editor .valid-env-var * {
+    color: var(--valid-env-highlight-color) !important;
+}
+
+.cm-editor .invalid-env-var {
+    background-color: var(--invalid-env-highlight-background-color);
+    border-radius: 3px;
+    padding: 2px 0;
+    color: var(--invalid-env-highlight-color);
+}
+
+.cm-editor .invalid-env-var * {
+    color: var(--invalid-env-highlight-color) !important;
+}
+
+.modal .cm-editor .valid-env-var {
+    background-color: var(--modal-valid-env-highlight-background-color);
+    color: var(--modal-valid-env-highlight-color);
+}
+
+.modal .cm-editor .valid-env-var * {
+    color: var(--modal-valid-env-highlight-color) !important;
+}
+
+.modal .cm-editor .invalid-env-var {
+    background-color: var(--modal-invalid-env-highlight-background-color);
+    color: var(--modal-invalid-env-highlight-color);
+}
+
+.modal .cm-editor .invalid-env-var * {
+    color: var(--modal-invalid-env-highlight-color) !important;
+}
+
 a {
     color: var(--link-color);
 }