fix(ui): Modal > Code Mirror Editor > Incorrect environment variable …

…highlighting in dark mode
flawiddsouza · Mar 6, 2024 · 104679b · 104679b
1 parent e6ec9fd
commit 104679b
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 36 deletions.
diff --git 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
@@ -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
@@ -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);
 }