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

@@ -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)

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;
   }