From c085fc778d6dce8feca4d5d8a33b3b23d02e9d46 Mon Sep 17 00:00:00 2001
From: Yash Joshi <jyash97@gmail.com>
Date: Mon, 19 Oct 2020 12:02:07 +0530
Subject: [PATCH] Fix evaluated pane scrollbar style (#1251)

fixes: #1182
---
 .../CodeEditor/EvaluatedValuePopup.tsx        | 25 ++++++++-----------
 1 file changed, 11 insertions(+), 14 deletions(-)

diff --git a/app/client/src/components/editorComponents/CodeEditor/EvaluatedValuePopup.tsx b/app/client/src/components/editorComponents/CodeEditor/EvaluatedValuePopup.tsx
index 912a264208..0d1a8433dd 100644
--- a/app/client/src/components/editorComponents/CodeEditor/EvaluatedValuePopup.tsx
+++ b/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>
   );
 };