From f8c2bd5d42a64fd772503cd211d25ed1ce782b9d Mon Sep 17 00:00:00 2001
From: Hetu Nandu <hetunandu@gmail.com>
Date: Fri, 31 Jul 2020 15:47:18 +0530
Subject: [PATCH] Update binding highlight styles (#136)

Co-authored-by: Nikhil Nandagopal <nikhil@appsmith.com>
---
 .../CodeEditor/EditorConfig.ts                |  4 +--
 .../editorComponents/CodeEditor/index.tsx     |  4 +--
 .../CodeEditor/markHelpers.ts                 | 28 ++++++++++++++++---
 .../CodeEditor/styledComponents.ts            | 22 ++++++++++++++-
 app/client/src/constants/Colors.tsx           |  2 ++
 app/client/src/constants/DefaultTheme.tsx     |  4 +--
 6 files changed, 53 insertions(+), 11 deletions(-)

diff --git a/app/client/src/components/editorComponents/CodeEditor/EditorConfig.ts b/app/client/src/components/editorComponents/CodeEditor/EditorConfig.ts
index a5c4cf70b8..e51e08c86b 100644
--- a/app/client/src/components/editorComponents/CodeEditor/EditorConfig.ts
+++ b/app/client/src/components/editorComponents/CodeEditor/EditorConfig.ts
@@ -34,8 +34,8 @@ export type EditorConfig = {
 };
 
 export const EditorThemes: Record<EditorTheme, string> = {
-  [EditorTheme.LIGHT]: "neat",
-  [EditorTheme.DARK]: "monokai",
+  [EditorTheme.LIGHT]: "duotone-light",
+  [EditorTheme.DARK]: "duotone-dark",
 };
 
 export type HintHelper = (editor: CodeMirror.Editor, data: DataTree) => Hinter;
diff --git a/app/client/src/components/editorComponents/CodeEditor/index.tsx b/app/client/src/components/editorComponents/CodeEditor/index.tsx
index 888de82f34..d806e27af5 100644
--- a/app/client/src/components/editorComponents/CodeEditor/index.tsx
+++ b/app/client/src/components/editorComponents/CodeEditor/index.tsx
@@ -3,8 +3,8 @@ import { connect } from "react-redux";
 import { AppState } from "reducers";
 import CodeMirror, { EditorConfiguration } from "codemirror";
 import "codemirror/lib/codemirror.css";
-import "codemirror/theme/monokai.css";
-import "codemirror/theme/neat.css";
+import "codemirror/theme/duotone-dark.css";
+import "codemirror/theme/duotone-light.css";
 import "codemirror/addon/hint/show-hint";
 import "codemirror/addon/display/placeholder";
 import "codemirror/addon/edit/closebrackets";
diff --git a/app/client/src/components/editorComponents/CodeEditor/markHelpers.ts b/app/client/src/components/editorComponents/CodeEditor/markHelpers.ts
index 7edc2eadf9..a8c4c64109 100644
--- a/app/client/src/components/editorComponents/CodeEditor/markHelpers.ts
+++ b/app/client/src/components/editorComponents/CodeEditor/markHelpers.ts
@@ -7,11 +7,31 @@ export const bindingMarker: MarkHelper = (editor: CodeMirror.Editor) => {
     const lineNo = editor.getLineNumber(line) || 0;
     let match;
     while ((match = AUTOCOMPLETE_MATCH_REGEX.exec(line.text)) != null) {
-      const start = match.index;
-      const end = AUTOCOMPLETE_MATCH_REGEX.lastIndex;
+      const opening = {
+        start: match.index,
+        end: match.index + 2,
+      };
+      const ending = {
+        start: AUTOCOMPLETE_MATCH_REGEX.lastIndex - 2,
+        end: AUTOCOMPLETE_MATCH_REGEX.lastIndex,
+      };
       editor.markText(
-        { ch: start, line: lineNo },
-        { ch: end, line: lineNo },
+        { ch: ending.start, line: lineNo },
+        { ch: ending.end, line: lineNo },
+        {
+          className: "binding-brackets",
+        },
+      );
+      editor.markText(
+        { ch: opening.start, line: lineNo },
+        { ch: opening.end, line: lineNo },
+        {
+          className: "binding-brackets",
+        },
+      );
+      editor.markText(
+        { ch: opening.start, line: lineNo },
+        { ch: ending.end, line: lineNo },
         {
           className: "binding-highlight",
         },
diff --git a/app/client/src/components/editorComponents/CodeEditor/styledComponents.ts b/app/client/src/components/editorComponents/CodeEditor/styledComponents.ts
index f3f13eab3d..a3e5adec58 100644
--- a/app/client/src/components/editorComponents/CodeEditor/styledComponents.ts
+++ b/app/client/src/components/editorComponents/CodeEditor/styledComponents.ts
@@ -133,7 +133,27 @@ export const EditorWrapper = styled.div<{
   flex-direction: row;
   text-transform: none;
   && {
-    .binding-highlight {
+    .CodeMirror-cursor {
+      border-right: none;
+      border-left-color: ${props =>
+        props.editorTheme === EditorTheme.DARK
+          ? props.theme.colors.textOnDarkBG
+          : props.theme.colors.textDefault} !important
+    }
+    .cm-s-duotone-light.CodeMirror {
+      background: #ffffff;
+      color: #000000 !important;
+      & {
+        span.cm-operator {
+          color: ${props => props.theme.colors.textDefault};
+        }
+      }
+     }
+    .cm-s-duotone-dark.CodeMirror {
+      background: #182026;
+      color: #FFFFFF;
+    }
+    .binding-brackets {
       color: ${props =>
         props.editorTheme === EditorTheme.DARK
           ? props.theme.colors.bindingTextDark
diff --git a/app/client/src/constants/Colors.tsx b/app/client/src/constants/Colors.tsx
index 66729099df..049fd35f9c 100644
--- a/app/client/src/constants/Colors.tsx
+++ b/app/client/src/constants/Colors.tsx
@@ -13,6 +13,8 @@ export const Colors: Record<string, string> = {
   LIGHT_GREYISH_BLUE: "#B0BFCB",
   SUNGLOW: "#FFCB33",
   SOFT_ORANGE: "#f7c75b",
+  BINDING_COLOR: "#ffcc99",
+  BINDING_COLOR_LT: "#063289",
   PURE_ORANGE: "#ffb100",
 
   BLACK: "#000000",
diff --git a/app/client/src/constants/DefaultTheme.tsx b/app/client/src/constants/DefaultTheme.tsx
index a3c316b48b..306a9d7a45 100644
--- a/app/client/src/constants/DefaultTheme.tsx
+++ b/app/client/src/constants/DefaultTheme.tsx
@@ -414,8 +414,8 @@ export const theme: Theme = {
     messageBG: Colors.CONCRETE,
     paneIcon: Colors.TROUT,
     notification: Colors.JAFFA,
-    bindingTextDark: Colors.SOFT_ORANGE,
-    bindingText: Colors.PURE_ORANGE,
+    bindingTextDark: Colors.BINDING_COLOR,
+    bindingText: Colors.BINDING_COLOR_LT,
     cmBacground: Colors.BLUE_CHARCOAL,
     lightningborder: Colors.ALABASTER,
   },