From 095d7c6bcb3463f7c3137be5e17e6e9e82931f38 Mon Sep 17 00:00:00 2001
From: Anoop M D <anoop.md1421@gmail.com>
Date: Sat, 21 Jan 2023 19:07:58 +0530
Subject: [PATCH] feat: dark mode styles for env var info popup

---
 .../SingleLineEditor/StyledWrapper.js         | 21 +++-------
 packages/bruno-app/src/globalStyles.js        | 39 +++++++++++++++++++
 packages/bruno-app/src/pages/_app.js          |  1 -
 packages/bruno-app/src/themes/dark.js         |  9 +++++
 packages/bruno-app/src/themes/light.js        |  9 +++++
 .../src/utils/codemirror/brunoVarInfo.css     | 28 -------------
 6 files changed, 63 insertions(+), 44 deletions(-)
 delete mode 100644 packages/bruno-app/src/utils/codemirror/brunoVarInfo.css

diff --git a/packages/bruno-app/src/components/SingleLineEditor/StyledWrapper.js b/packages/bruno-app/src/components/SingleLineEditor/StyledWrapper.js
index 5ca8c019e..4810fa340 100644
--- a/packages/bruno-app/src/components/SingleLineEditor/StyledWrapper.js
+++ b/packages/bruno-app/src/components/SingleLineEditor/StyledWrapper.js
@@ -18,28 +18,19 @@ const StyledWrapper = styled.div`
     .CodeMirror-cursor {
       height: 20px !important;
       margin-top: 5px !important;
+      border-left: 1px solid ${(props) => props.theme.text} !important;
     }
 
     pre {
       font-family: Inter, sans-serif !important;
       font-weight: 400;
-      }
-  }
+    }
 
-  .tooltip {
-    position: absolute;
-    top: 0;
-    left: 0;
-    background: #fff;
-    border: 1px solid #ccc;
-    border-radius: 3px;
-    padding: 5px;
-    font-size: 12px;
-    z-index: 100;
+    .CodeMirror-line {
+      color: ${(props) => props.theme.text};
+    }
   }
-
-  .cm-variable-valid{color: green}
-  .cm-variable-invalid{color: red}
+  
 `;
 
 export default StyledWrapper;
diff --git a/packages/bruno-app/src/globalStyles.js b/packages/bruno-app/src/globalStyles.js
index 2e49f4a68..687db8c16 100644
--- a/packages/bruno-app/src/globalStyles.js
+++ b/packages/bruno-app/src/globalStyles.js
@@ -124,6 +124,45 @@ const GlobalStyle = createGlobalStyle`
               transform: translateY(-30px);
     }
   }
+
+  // codemirror
+  .CodeMirror {
+    .cm-variable-valid {
+      color: ${(props) => props.theme.codemirror.variable.valid};
+    }
+    .cm-variable-invalid {
+      color: ${(props) => props.theme.codemirror.variable.invalid};
+    }
+  }
+  .CodeMirror-brunoVarInfo {
+    color: ${(props) => props.theme.codemirror.variable.info.color};
+    background: ${(props) => props.theme.codemirror.variable.info.bg};
+    border-radius: 2px;
+    box-shadow: ${(props) => props.theme.codemirror.variable.info.boxShadow};
+    box-sizing: border-box;
+    font-size: 13px;
+    line-height: 16px;
+    margin: 8px -8px;
+    max-width: 800px;
+    opacity: 0;
+    overflow: hidden;
+    padding: 8px 8px;
+    position: fixed;
+    transition: opacity 0.15s;
+    z-index: 50;
+  }
+
+  .CodeMirror-brunoVarInfo :first-child {
+    margin-top: 0;
+  }
+
+  .CodeMirror-brunoVarInfo :last-child {
+    margin-bottom: 0;
+  }
+
+  .CodeMirror-brunoVarInfo p {
+    margin: 1em 0;
+  }
 `;
 
 export default GlobalStyle;
diff --git a/packages/bruno-app/src/pages/_app.js b/packages/bruno-app/src/pages/_app.js
index 7682c2c84..f0b5bbce5 100644
--- a/packages/bruno-app/src/pages/_app.js
+++ b/packages/bruno-app/src/pages/_app.js
@@ -12,7 +12,6 @@ import '../styles/globals.css';
 import 'tailwindcss/dist/tailwind.min.css';
 import 'codemirror/lib/codemirror.css';
 import 'graphiql/graphiql.min.css';
-import 'utils/codemirror/brunoVarInfo.css';
 
 function SafeHydrate({ children }) {
   return <div suppressHydrationWarning>{typeof window === 'undefined' ? null : children}</div>;
diff --git a/packages/bruno-app/src/themes/dark.js b/packages/bruno-app/src/themes/dark.js
index 2669f4557..917c8d4af 100644
--- a/packages/bruno-app/src/themes/dark.js
+++ b/packages/bruno-app/src/themes/dark.js
@@ -188,6 +188,15 @@ const darkTheme = {
     border: 'transparent',
     gutter: {
       bg: '#1e1e1e'
+    },
+    variable: {
+      valid: 'rgb(11 178 126)',
+      invalid: '#f06f57',
+      info: {
+        color: '#ce9178',
+        bg: 'rgb(48,48,49)',
+        boxShadow: 'rgb(0 0 0 / 36%) 0px 2px 8px'
+      }
     }
   },
 
diff --git a/packages/bruno-app/src/themes/light.js b/packages/bruno-app/src/themes/light.js
index 12c1eabbf..81d5ecd94 100644
--- a/packages/bruno-app/src/themes/light.js
+++ b/packages/bruno-app/src/themes/light.js
@@ -192,6 +192,15 @@ const lightTheme = {
     border: '#efefef',
     gutter: {
       bg: '#f3f3f3'
+    },
+    variable: {
+      valid: '#047857',
+      invalid: 'rgb(185, 28, 28)',
+      info: {
+        color: 'rgb(52, 52, 52)',
+        bg: 'white',
+        boxShadow: '0 1px 3px rgba(0, 0, 0, 0.45)'
+      }
     }
   },
 
diff --git a/packages/bruno-app/src/utils/codemirror/brunoVarInfo.css b/packages/bruno-app/src/utils/codemirror/brunoVarInfo.css
deleted file mode 100644
index ce116defc..000000000
--- a/packages/bruno-app/src/utils/codemirror/brunoVarInfo.css
+++ /dev/null
@@ -1,28 +0,0 @@
-.CodeMirror-brunoVarInfo {
-  background: white;
-  border-radius: 2px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
-  box-sizing: border-box;
-  font-size: 13px;
-  line-height: 16px;
-  margin: 8px -8px;
-  max-width: 800px;
-  opacity: 0;
-  overflow: hidden;
-  padding: 8px 8px;
-  position: fixed;
-  transition: opacity 0.15s;
-  z-index: 50;
-}
-
-.CodeMirror-brunoVarInfo :first-child {
-  margin-top: 0;
-}
-
-.CodeMirror-brunoVarInfo :last-child {
-  margin-bottom: 0;
-}
-
-.CodeMirror-brunoVarInfo p {
-  margin: 1em 0;
-}