From 6140b5349323af4cd3bb121e4ef38f415a77a02a Mon Sep 17 00:00:00 2001
From: Jakob Ackermann <jakob.ackermann@overleaf.com>
Date: Mon, 31 May 2021 10:27:14 +0200
Subject: [PATCH] Merge pull request #4081 from
 overleaf/msm-symbol-toggle-styling

Added 'active' styling to Symbol Palette toggle button

GitOrigin-RevId: a1a51e42a08cd3627d0bc4610e6895e111d951f9
---
 services/web/frontend/js/ide/editor/directives/aceEditor.js | 6 ++++++
 services/web/frontend/stylesheets/app/editor/toolbar.less   | 6 ++++++
 2 files changed, 12 insertions(+)

diff --git a/services/web/frontend/js/ide/editor/directives/aceEditor.js b/services/web/frontend/js/ide/editor/directives/aceEditor.js
index d3468f9a5f..8144f8f08d 100644
--- a/services/web/frontend/js/ide/editor/directives/aceEditor.js
+++ b/services/web/frontend/js/ide/editor/directives/aceEditor.js
@@ -142,6 +142,12 @@ App.directive(
           }
         })
 
+        ide.$scope.$on('symbol-palette-toggled', (event, isToggled) => {
+          if (!isToggled) {
+            editor.focus()
+          }
+        })
+
         scope.$watch('autoPairDelimiters', autoPairDelimiters => {
           if (autoPairDelimiters) {
             return editor.setOption('behavioursEnabled', true)
diff --git a/services/web/frontend/stylesheets/app/editor/toolbar.less b/services/web/frontend/stylesheets/app/editor/toolbar.less
index 03ea5e3529..7733273633 100644
--- a/services/web/frontend/stylesheets/app/editor/toolbar.less
+++ b/services/web/frontend/stylesheets/app/editor/toolbar.less
@@ -304,6 +304,12 @@
     color: @formatting-btn-color;
   }
 
+  &.active {
+    color: @toolbar-btn-active-color;
+    background-color: @toolbar-btn-active-bg-color;
+    box-shadow: @toolbar-btn-active-shadow;
+  }
+
   &:focus {
     color: @formatting-btn-color;
   }