Fix evaluated pane scrollbar style (#1251)

fixes: #1182

app/client/src/components/editorComponents/CodeEditor/EvaluatedValuePopup.tsx

@@ -4,7 +4,7 @@ import _ from "lodash";
 import Popper from "pages/Editor/Popper";
 import ReactJson from "react-json-view";
 import { EditorTheme } from "components/editorComponents/CodeEditor/EditorConfig";
-import { theme } from "constants/DefaultTheme";
+import { theme, scrollbarDark, scrollbarLight } from "constants/DefaultTheme";
 import { Placement } from "popper.js";
 
 const Wrapper = styled.div`
@@ -52,37 +52,32 @@ const ContentWrapper = styled.div<{ colorTheme: EditorTheme }>`
   border-radius: 4px;
 `;
 
-const CurrentValueWrapper = styled.div`
+const CurrentValueWrapper = styled.div<{ colorTheme: EditorTheme }>`
+  ${props =>
+    props.colorTheme === EditorTheme.LIGHT ? scrollbarLight : scrollbarDark};
   max-height: 300px;
   overflow-y: auto;
-  ::-webkit-scrollbar {
-    display: none;
-  }
   -ms-overflow-style: none;
 `;
 
 const CodeWrapper = styled.pre<{ colorTheme: EditorTheme }>`
+  ${props =>
+    props.colorTheme === EditorTheme.LIGHT ? scrollbarLight : scrollbarDark};
   padding: 10px;
   margin: 0px 0px;
   background-color: ${props => THEMES[props.colorTheme].editorBackground};
   color: ${props => THEMES[props.colorTheme].editorColor};
-  scrollbar-width: none;
-  ::-webkit-scrollbar {
-    display: none;
-  }
   font-size: 14px;
   -ms-overflow-style: none;
   white-space: pre-wrap;
 `;
 
 const TypeText = styled.pre<{ colorTheme: EditorTheme }>`
+  ${props =>
+    props.colorTheme === EditorTheme.LIGHT ? scrollbarLight : scrollbarDark};
   padding: 5px;
   background-color: ${props => THEMES[props.colorTheme].editorBackground};
   color: ${props => THEMES[props.colorTheme].editorColor};
-  scrollbar-width: none;
-  ::-webkit-scrollbar {
-    display: none;
-  }
   font-size: 12px;
   margin: 5px 0;
   -ms-overflow-style: none;
@@ -156,7 +151,9 @@ export const CurrentValueViewer = (props: {
   return (
     <React.Fragment>
       {!props.hideLabel && <StyledTitle>Evaluated Value</StyledTitle>}
-      <CurrentValueWrapper>{content}</CurrentValueWrapper>
+      <CurrentValueWrapper colorTheme={props.theme}>
+        {content}
+      </CurrentValueWrapper>
     </React.Fragment>
   );
 };