Merge branch 'master' of github.com:brown-dash/Dash-Web into master

1 files changed, 16 insertions, 10 deletions

diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx
index 5c1c836f7..a3d76591f 100644
--- a/src/client/util/SettingsManager.tsx
+++ b/src/client/util/SettingsManager.tsx
@@ -28,7 +28,7 @@ export enum ColorScheme {
 
 export enum freeformScrollMode {
     Pan = 'pan',
-    Zoom = 'zoom'
+    Zoom = 'zoom',
 }
 
 @observer
@@ -307,11 +307,9 @@ export class SettingsManager extends React.Component<{}> {
         );
     }
 
-
-
     setFreeformScrollMode = (mode: freeformScrollMode) => {
         Doc.UserDoc().freeformScrollMode = mode;
-    }
+    };
 
     @computed get modesContent() {
         return (
@@ -334,12 +332,20 @@ export class SettingsManager extends React.Component<{}> {
                             <div className="playground-text">Playground Mode</div>
                         </div>
                     </div>
-                    <div className="tab-column-title">Freeform scroll mode</div>
-                    <div>
-                        <button onClick={() => this.setFreeformScrollMode(freeformScrollMode.Pan)}>Scroll to pan</button>
-                        <div>Scrolling pans around the freeform, holding shift and scrolling zooms in and out.</div>
-                        <button onClick={() => this.setFreeformScrollMode(freeformScrollMode.Zoom)}>Scroll to zoom</button>
-                        <div>Scrolling zooms in and out of canvas</div>
+                    <div className="tab-column-title" style={{ marginTop: 10, marginBottom: 0 }}>
+                        Freeform scrolling
+                    </div>
+                    <div className="tab-column-content">
+                        <button style={{ backgroundColor: Doc.UserDoc().freeformScrollMode === freeformScrollMode.Pan ? 'blue' : '' }} onClick={() => this.setFreeformScrollMode(freeformScrollMode.Pan)}>
+                            Scroll to pan
+                        </button>
+                        <div>
+                            <div>Scrolling pans canvas, shift + scrolling zooms</div>
+                        </div>
+                        <button style={{ backgroundColor: Doc.UserDoc().freeformScrollMode === freeformScrollMode.Zoom ? 'blue' : '' }} onClick={() => this.setFreeformScrollMode(freeformScrollMode.Zoom)}>
+                            Scroll to zoom
+                        </button>
+                        <div>Scrolling zooms canvas</div>
                     </div>
                 </div>
                 <div className="tab-column">