From 19bffe58cf62fa4a413442b13993800b47991d39 Mon Sep 17 00:00:00 2001
From: Meru Patel <2017180@iiitdmj.ac.in>
Date: Mon, 8 Oct 2018 22:44:59 +0530
Subject: [PATCH] Fixes #712 (#718)

* added matchbrackets

* Added css for matching brackets
---
 client/modules/IDE/components/Editor.jsx                    | 2 ++
 client/styles/components/_p5-contrast-codemirror-theme.scss | 4 ++--
 client/styles/components/_p5-dark-codemirror-theme.scss     | 4 ++--
 client/styles/components/_p5-light-codemirror-theme.scss    | 6 +++---
 4 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/client/modules/IDE/components/Editor.jsx b/client/modules/IDE/components/Editor.jsx
index 5f056c50..2e0845e6 100644
--- a/client/modules/IDE/components/Editor.jsx
+++ b/client/modules/IDE/components/Editor.jsx
@@ -19,6 +19,7 @@ import 'codemirror/addon/search/searchcursor';
 import 'codemirror/addon/search/matchesonscrollbar';
 import 'codemirror/addon/search/match-highlighter';
 import 'codemirror/addon/search/jump-to-line';
+import 'codemirror/addon/edit/matchbrackets';
 
 import { JSHINT } from 'jshint';
 import { CSSLint } from 'csslint';
@@ -87,6 +88,7 @@ class Editor extends React.Component {
       gutters: ['CodeMirror-foldgutter', 'CodeMirror-lint-markers'],
       keyMap: 'sublime',
       highlightSelectionMatches: true, // highlight current search match
+      matchBrackets: true,
       lint: {
         onUpdateLinting: ((annotations) => {
           this.props.hideRuntimeErrorWarning();
diff --git a/client/styles/components/_p5-contrast-codemirror-theme.scss b/client/styles/components/_p5-contrast-codemirror-theme.scss
index 6ddef26a..7ac88b47 100644
--- a/client/styles/components/_p5-contrast-codemirror-theme.scss
+++ b/client/styles/components/_p5-contrast-codemirror-theme.scss
@@ -97,8 +97,8 @@ $p5-contrast-activeline: #999999;
 }
 
 .cm-s-p5-contrast .CodeMirror-matchingbracket {
-  outline: 1px solid $p5-contrast-darkgray;
-  color: black !important;
+  outline: 1px solid $p5-contrast-lightgray;
+  color: $p5-contrast-white !important;
 }
 
 .cm-s-p5-contrast .cm-qualifier {
diff --git a/client/styles/components/_p5-dark-codemirror-theme.scss b/client/styles/components/_p5-dark-codemirror-theme.scss
index 275d57ff..cbb4e174 100644
--- a/client/styles/components/_p5-dark-codemirror-theme.scss
+++ b/client/styles/components/_p5-dark-codemirror-theme.scss
@@ -100,8 +100,8 @@ $p5-dark-activeline: rgb(207, 207, 207);
 }
 
 .cm-s-p5-dark .CodeMirror-matchingbracket {
-  outline: 1px solid $p5-dark-darkgray;
-  color: black !important;
+  outline: 1px solid $p5-dark-gray;
+  color: $p5-dark-white !important;
 }
 
 .cm-s-p5-dark .cm-qualifier {
diff --git a/client/styles/components/_p5-light-codemirror-theme.scss b/client/styles/components/_p5-light-codemirror-theme.scss
index dbb72dbd..f785943d 100644
--- a/client/styles/components/_p5-light-codemirror-theme.scss
+++ b/client/styles/components/_p5-light-codemirror-theme.scss
@@ -21,7 +21,7 @@ $p5-light-white: #FDFDFD;
 $p5-light-orange: #EE9900;
 $p5-light-lightgray: #E0D7D1;
 $p5-light-darkgray: #666666;
-$p5-light-green: #58a10b; 
+$p5-light-green: #58a10b;
 
 $p5-light-gutter: #f4f4f4;
 $p5-light-number: #b5b5b5;
@@ -98,8 +98,8 @@ $p5-light-activeline: rgb(207, 207, 207);
 }
 
 .cm-s-p5-light .CodeMirror-matchingbracket {
-  outline: 1px solid $p5-light-number;
-  color: black !important;
+  outline: 1px solid $p5-light-gray;
+  color: $p5-light-black !important;
 }
 
 .cm-s-p5-light .cm-qualifier {