feat: dark mode styles for env var info popup

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;
-      }
+    }
+
+    .CodeMirror-line {
+      color: ${(props) => props.theme.text};
+    }
   }
   
-  .tooltip {
-    position: absolute;
-    top: 0;
-    left: 0;
-    background: #fff;
-    border: 1px solid #ccc;
-    border-radius: 3px;
-    padding: 5px;
-    font-size: 12px;
-    z-index: 100;
-  }
-
-  .cm-variable-valid{color: green}
-  .cm-variable-invalid{color: red}
 `;
 
 export default StyledWrapper;

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;

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>;

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'
+      }
     }
   },
 

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)'
+      }
     }
   },
 

packages/bruno-app/src/utils/codemirror/brunoVarInfo.css

@@ -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;
-}