2 files changed, 42 insertions, 27 deletions

diff --git a/src/client/views/nodes/button/FontIconBox.scss b/src/client/views/nodes/button/FontIconBox.scss
index 6cd56f84e..a1ca777b3 100644
--- a/src/client/views/nodes/button/FontIconBox.scss
+++ b/src/client/views/nodes/button/FontIconBox.scss
@@ -1,4 +1,4 @@
-@import "../../global/globalCssVariables";
+@import '../../global/globalCssVariables';
 
 .menuButton {
     height: 100%;
@@ -31,8 +31,6 @@
         text-transform: uppercase;
         font-weight: bold;
         transition: 0.15s;
-
-
     }
 
     .fontIconBox-icon {
@@ -106,31 +104,31 @@
                 right: 0;
                 bottom: 0;
                 background-color: lightgrey;
-                -webkit-transition: .4s;
-                transition: .4s;
+                -webkit-transition: 0.4s;
+                transition: 0.4s;
             }
 
             .slider:before {
                 position: absolute;
-                content: "";
+                content: '';
                 height: 21px;
                 width: 21px;
                 left: 2px;
                 bottom: 2px;
                 background-color: $white;
-                -webkit-transition: .4s;
-                transition: .4s;
+                -webkit-transition: 0.4s;
+                transition: 0.4s;
             }
 
-            input:checked+.slider {
+            input:checked + .slider {
                 background-color: $medium-blue;
             }
 
-            input:focus+.slider {
+            input:focus + .slider {
                 box-shadow: 0 0 1px $medium-blue;
             }
 
-            input:checked+.slider:before {
+            input:checked + .slider:before {
                 -webkit-transform: translateX(26px);
                 -ms-transform: translateX(26px);
                 transform: translateX(26px);
@@ -197,8 +195,6 @@
         }
     }
 
-
-
     &.colorBtn,
     &.colorBtnLabel {
         color: black;
@@ -311,18 +307,21 @@
                 box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.3);
                 border-radius: $standard-border-radius;
 
-                input[type=range]::-webkit-slider-runnable-track {
+                .menu-slider {
+                    height: 10px;
+                }
+                input[type='range']::-webkit-slider-runnable-track {
                     background: gray;
                     height: 3px;
                 }
 
-                input[type=range]::-webkit-slider-thumb {
+                input[type='range']::-webkit-slider-thumb {
                     box-shadow: 1px 1px 1px #000000;
                     border: 1px solid #000000;
                     height: 10px;
                     width: 10px;
                     border-radius: 5px;
-                    background: #FFFFFF;
+                    background: #ffffff;
                     cursor: pointer;
                     -webkit-appearance: none;
                     margin-top: -4px;
@@ -456,5 +455,4 @@
         background: transparent;
         position: fixed;
     }
-
-}
\ No newline at end of file
+}
diff --git a/src/client/views/nodes/button/FontIconBox.tsx b/src/client/views/nodes/button/FontIconBox.tsx
index 1ce97979e..d3b95e25a 100644
--- a/src/client/views/nodes/button/FontIconBox.tsx
+++ b/src/client/views/nodes/button/FontIconBox.tsx
@@ -1,7 +1,7 @@
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Tooltip } from '@material-ui/core';
-import { action, computed, observable } from 'mobx';
+import { action, computed, observable, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { ColorState, SketchPicker } from 'react-color';
@@ -86,11 +86,21 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
     }
 
     // Determining UI Specs
-    @observable private label = StrCast(this.rootDoc.label, StrCast(this.rootDoc.title));
-    @observable private icon = StrCast(this.dataDoc.icon, 'user') as any;
-    @observable private dropdown: boolean = BoolCast(this.rootDoc.dropDownOpen);
-    @observable private buttonList: string[] = StrListCast(this.rootDoc.btnList);
-    @observable private type = StrCast(this.rootDoc.btnType);
+    @computed get label() {
+        return StrCast(this.rootDoc.label, StrCast(this.rootDoc.title));
+    }
+    @computed get icon() {
+        return StrCast(this.dataDoc.icon, 'user') as any;
+    }
+    @computed get dropdown() {
+        return BoolCast(this.rootDoc.dropDownOpen);
+    }
+    @computed get buttonList() {
+        return StrListCast(this.rootDoc.btnList);
+    }
+    @computed get type() {
+        return StrCast(this.rootDoc.btnType);
+    }
 
     /**
      * Types of buttons in dash:
@@ -569,11 +579,11 @@ ScriptingGlobals.add(function setView(view: string) {
 
 // toggle: Set overlay status of selected document
 ScriptingGlobals.add(function setBackgroundColor(color?: string, checkResult?: boolean) {
-    const selected = SelectionManager.Docs().lastElement();
+    const selected = SelectionManager.Views().lastElement();
     if (checkResult) {
-        return selected?._backgroundColor ?? 'transparent';
+        return selected?.props.Document._backgroundColor ?? 'transparent';
     }
-    if (selected) selected._backgroundColor = color;
+    if (selected) selected.props.Document._backgroundColor = color;
 });
 
 // toggle: Set overlay status of selected document
@@ -700,6 +710,13 @@ ScriptingGlobals.add(function toggleNoAutoLinkAnchor(checkResult?: boolean) {
     }
     if (editorView) RichTextMenu.Instance?.toggleNoAutoLinkAnchor();
 });
+ScriptingGlobals.add(function toggleDictation(checkResult?: boolean) {
+    const textView = RichTextMenu.Instance?.TextView;
+    if (checkResult) {
+        return textView?._recording ? Colors.MEDIUM_BLUE : 'transparent';
+    }
+    if (textView) runInAction(() => (textView._recording = !textView._recording));
+});
 
 ScriptingGlobals.add(function toggleBold(checkResult?: boolean) {
     const editorView = RichTextMenu.Instance?.TextView?.EditorView;