Merge branch 'master' of https://github.com/browngraphicslab/Dash-Web

18 files changed, 157 insertions, 115 deletions

diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts
index 60bb25272..d66bb3f09 100644
--- a/src/client/util/DocumentManager.ts
+++ b/src/client/util/DocumentManager.ts
@@ -208,7 +208,7 @@ export class DocumentManager {
     @action
     zoomIntoScale = (docDelegate: Doc, scale: number) => {
         const docView = DocumentManager.Instance.getDocumentView(Doc.GetProto(docDelegate));
-        docView && docView.props.zoomToScale(scale);
+        docView?.props.zoomToScale(scale);
     }
 
     getScaleOfDocView = (docDelegate: Doc) => {
diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx
index 2201fe710..ec1f879c2 100644
--- a/src/client/views/DocumentButtonBar.tsx
+++ b/src/client/views/DocumentButtonBar.tsx
@@ -242,7 +242,7 @@ export class DocumentButtonBar extends React.Component<{ views: (DocumentView |
         return !view0 ? (null) : <div title="Show metadata panel" className="documentButtonBar-linkFlyout">
             <Flyout anchorPoint={anchorPoints.LEFT_TOP}
                 content={<MetadataEntryMenu docs={() => this.props.views.filter(dv => dv).map(dv => dv!.props.Document)} suggestWithFunction />  /* tfs: @bcz This might need to be the data document? */}>
-                <div className={"documentButtonBar-linkButton-" + "empty"} >
+                <div className={"documentButtonBar-linkButton-" + "empty"} onPointerDown={e => e.stopPropagation()} >
                     {<FontAwesomeIcon className="documentdecorations-icon" icon="tag" size="sm" />}
                 </div>
             </Flyout>
diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss
index 455e53a79..c847dd4d0 100644
--- a/src/client/views/DocumentDecorations.scss
+++ b/src/client/views/DocumentDecorations.scss
@@ -259,6 +259,10 @@ $linkGap : 3px;
     }
 }
 
+.documentDecorations-darkScheme {
+    background: dimgray;
+}
+
 #template-list {
     position: absolute;
     top: 25px;
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 65c02591c..12427cdac 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -479,17 +479,29 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
         return <FontAwesomeIcon icon={button} className="documentView-minimizedIcon" />;
     }
     render() {
+        const darkScheme = Cast(Doc.UserDoc().activeWorkspace, Doc, null)?.darkScheme ? "dimgray" : undefined;
         const bounds = this.Bounds;
         const seldoc = SelectionManager.SelectedDocuments().length ? SelectionManager.SelectedDocuments()[0] : undefined;
         if (SelectionManager.GetIsDragging() || bounds.x === Number.MAX_VALUE || !seldoc || this._hidden || isNaN(bounds.r) || isNaN(bounds.b) || isNaN(bounds.x) || isNaN(bounds.y)) {
             return (null);
         }
         const minimizeIcon = (
-            <div className="documentDecorations-minimizeButton" onPointerDown={this.onMinimizeDown}>
+            <div className="documentDecorations-minimizeButton" style={{ background: darkScheme }} onPointerDown={this.onMinimizeDown}>
                 {/* Currently, this is set to be enabled if there is no ink selected. It might be interesting to think about minimizing ink if it's useful? -syip2*/}
-                {SelectionManager.SelectedDocuments().length === 1 ? DocumentDecorations.DocumentIcon(StrCast(SelectionManager.SelectedDocuments()[0].props.Document.layout, "...")) : "..."}
+                {SelectionManager.SelectedDocuments().length === 1 ? DocumentDecorations.DocumentIcon(StrCast(seldoc.props.Document.layout, "...")) : "..."}
             </div>);
 
+        const titleArea =  this._edtingTitle ?
+                <>
+                    <input ref={this._keyinput} className="title" type="text" name="dynbox" autoComplete="on" value={this._accumulatedTitle} style={{ width: "calc(100% - 20px)" }}
+                        onBlur={e => this.titleBlur(true)} onChange={this.titleChanged} onKeyPress={this.titleEntered} />
+                    <div className="publishBox" title="make document referenceable by its title"
+                        onPointerDown={e => DocUtils.Publish(seldoc.props.Document, this._accumulatedTitle, seldoc.props.addDocument, seldoc.props.removeDocument)}>
+                        <FontAwesomeIcon size="lg" color={SelectionManager.SelectedDocuments()[0].props.Document.title === SelectionManager.SelectedDocuments()[0].props.Document[Id] ? "green" : undefined} icon="sticky-note"></FontAwesomeIcon>
+                    </div>
+                </>:
+                <div className="title" style={{ background:darkScheme}} onPointerDown={this.onTitleDown} ><span>{`${this.selectionTitle}`}</span></div> ;
+
         bounds.x = Math.max(0, bounds.x - this._resizeBorderWidth / 2) + this._resizeBorderWidth / 2;
         bounds.y = Math.max(0, bounds.y - this._resizeBorderWidth / 2 - this._titleHeight) + this._resizeBorderWidth / 2 + this._titleHeight;
         const borderRadiusDraggerWidth = 15;
@@ -519,38 +531,36 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
                 opacity: this._opacity
             }}>
                 {minimizeIcon}
-
-                {this._edtingTitle ? <>
-                    <input ref={this._keyinput} className="title" type="text" name="dynbox" autoComplete="on" value={this._accumulatedTitle} style={{ width: "calc(100% - 20px)" }}
-                        onBlur={e => this.titleBlur(true)} onChange={this.titleChanged} onKeyPress={this.titleEntered} />
-                    <div className="publishBox" title="make document referenceable by its title"
-                        onPointerDown={e => {
-                            const promoteDoc = SelectionManager.SelectedDocuments()[0];
-                            DocUtils.Publish(promoteDoc.props.Document, this._accumulatedTitle, promoteDoc.props.addDocument, promoteDoc.props.removeDocument);
-                        }}>
-                        <FontAwesomeIcon size="lg" color={SelectionManager.SelectedDocuments()[0].props.Document.title === SelectionManager.SelectedDocuments()[0].props.Document[Id] ? "green" : undefined} icon="sticky-note"></FontAwesomeIcon>
-                    </div>
-                </> :
-                    <div className="title" onPointerDown={this.onTitleDown} ><span>{`${this.selectionTitle}`}</span></div>}
-                <div className="documentDecorations-closeButton" title="Close Document" onPointerDown={this.onCloseDown}>
+                {titleArea}
+                <div className="documentDecorations-closeButton" style={{ background: darkScheme }}
+                    title="Close Document" onPointerDown={this.onCloseDown}>
                     <FontAwesomeIcon className="documentdecorations-times" icon={faTimes} size="lg" />
                 </div>
-                <div id="documentDecorations-topLeftResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
-                <div id="documentDecorations-topResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
-                <div id="documentDecorations-topRightResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
-                <div id="documentDecorations-leftResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
+                <div id="documentDecorations-topLeftResizer" className="documentDecorations-resizer"
+                    style={{ background: darkScheme }} onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
+                <div id="documentDecorations-topResizer" className="documentDecorations-resizer"
+                    style={{ background: darkScheme}} onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
+                <div id="documentDecorations-topRightResizer" className="documentDecorations-resizer"
+                    style={{ background: darkScheme }} onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
+                <div id="documentDecorations-leftResizer" className="documentDecorations-resizer"
+                    style={{ background: darkScheme }} onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
                 <div id="documentDecorations-centerCont"></div>
-                <div id="documentDecorations-rightResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
-                <div id="documentDecorations-bottomLeftResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
-                <div id="documentDecorations-bottomResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
-                <div id="documentDecorations-bottomRightResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
-                <div id="documentDecorations-borderRadius" className="documentDecorations-radius" onPointerDown={this.onRadiusDown} onContextMenu={(e) => e.preventDefault()}><span className="borderRadiusTooltip" title="Drag Corner Radius"></span></div>
+                <div id="documentDecorations-rightResizer" className="documentDecorations-resizer"
+                    style={{ background: darkScheme }} onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
+                <div id="documentDecorations-bottomLeftResizer" className="documentDecorations-resizer"
+                    style={{ background: darkScheme }} onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
+                <div id="documentDecorations-bottomResizer" className="documentDecorations-resizer"
+                    style={{ background: darkScheme }} onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
+                <div id="documentDecorations-bottomRightResizer" className="documentDecorations-resizer"
+                    style={{ background: darkScheme }} onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
+                <div id="documentDecorations-borderRadius" className="documentDecorations-radius"
+                    style={{ background: darkScheme }} onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
 
             </div >
             <div className="link-button-container" style={{ left: bounds.x - this._resizeBorderWidth / 2, top: bounds.b + this._resizeBorderWidth / 2 }}>
                 <DocumentButtonBar views={SelectionManager.SelectedDocuments()} />
             </div>
-        </div>
+        </div >
         );
     }
 }
\ No newline at end of file
diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss
index d39c217ec..b8fd7be0b 100644
--- a/src/client/views/MainView.scss
+++ b/src/client/views/MainView.scss
@@ -21,7 +21,7 @@
     z-index: 1;
 }
 
-#mainView-container {
+.mainView-container, .mainView-container-dark {
     width: 100%;
     height: 100%;
     position: absolute;
@@ -31,6 +31,13 @@
     touch-action: none;
 }
 
+.mainView-container-dark {
+    .lm_splitter {
+        background: dimgray;
+        opacity: 0.5;
+    }
+}
+
 .mainView-mainContent {
     width: 100%;
     height: 100%;
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index ba49a2b53..5d739474e 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -276,7 +276,7 @@ export class MainView extends React.Component {
 
     childBackgroundColor = (doc: Doc) => {
         if (this.darkScheme) {
-            return doc.type === DocumentType.TEXT ? "#112423" : "black";
+            return doc.type === DocumentType.TEXT ? "#2d2d2d" : "black";
         }
         return doc.type === DocumentType.TEXT ? "#f1efeb" :
             doc.type === DocumentType.COL && doc._viewType === CollectionViewType.Tree ? "lightgray" : "white";
@@ -448,10 +448,10 @@ export class MainView extends React.Component {
     @computed get mainContent() {
         const sidebar = this.userDoc && this.userDoc.sidebarContainer;
         return !this.userDoc || !(sidebar instanceof Doc) ? (null) : (
-            <div className="mainView-mainContent" style={{ color: this.darkScheme ? "lightGray" : "black" }} >
+            <div className="mainView-mainContent" style={{ color: this.darkScheme ? "dimGray" : "black" }} >
                 <div className="mainView-flyoutContainer" onPointerLeave={this.pointerLeaveDragger} style={{ width: this.flyoutWidth }}>
                     <div className="mainView-libraryHandle" onPointerDown={this.onPointerDown} onPointerOver={this.pointerOverDragger}
-                        style={{ backgroundColor: `${StrCast(sidebar.backgroundColor, "lightGray")}` }} >
+                        style={{ backgroundColor: `${StrCast(sidebar.backgroundColor, this.darkScheme ? "dimGray" : "black")}` }} >
                         <span title="library View Dragger" style={{
                             width: (this.flyoutWidth !== 0 && this._flyoutTranslate) ? "100%" : "3vw",
                             //height: (this.flyoutWidth !== 0 && this._flyoutTranslate) ? "100%" : "100vh",
@@ -529,7 +529,7 @@ export class MainView extends React.Component {
     }
 
     render() {
-        return (<div id="mainView-container">
+        return (<div className={"mainView-container" + (this.darkScheme ? "-dark" : "")}>
             <DictationOverlay />
             <SharingManager />
             <SettingsManager />
diff --git a/src/client/views/MetadataEntryMenu.scss b/src/client/views/MetadataEntryMenu.scss
index 5f4a52c0c..5776cf070 100644
--- a/src/client/views/MetadataEntryMenu.scss
+++ b/src/client/views/MetadataEntryMenu.scss
@@ -8,6 +8,12 @@
     }
 }
 
+.metadataEntry-autoSuggester {
+    width: 100%;
+    height: 100%;
+    padding-right: 10px;
+}
+
 #metadataEntry-outer {
     overflow: auto !important;
 }
diff --git a/src/client/views/MetadataEntryMenu.tsx b/src/client/views/MetadataEntryMenu.tsx
index 23b21ae0c..8bc80ed06 100644
--- a/src/client/views/MetadataEntryMenu.tsx
+++ b/src/client/views/MetadataEntryMenu.tsx
@@ -195,10 +195,10 @@ export class MetadataEntryMenu extends React.Component<MetadataEntryProps>{
 
     _ref = React.createRef<HTMLInputElement>();
     render() {
-        return (
-            <div className="metadataEntry-outerDiv" id="metadataEntry-outer">
-                <div className="metadataEntry-inputArea">
-                    Key:
+        return (<div className="metadataEntry-outerDiv" id="metadataEntry-outer" onPointerDown={e => e.stopPropagation()}>
+            <div className="metadataEntry-inputArea">
+                Key:
+                <div className="metadataEntry-autoSuggester" onClick={e => this.autosuggestRef.current!.input?.focus()}  >
                     <Autosuggest inputProps={{ value: this._currentKey, onChange: this.onKeyChange }}
                         getSuggestionValue={this.getSuggestionValue}
                         suggestions={emptyPath}
@@ -207,16 +207,17 @@ export class MetadataEntryMenu extends React.Component<MetadataEntryProps>{
                         onSuggestionsFetchRequested={emptyFunction}
                         onSuggestionsClearRequested={emptyFunction}
                         ref={this.autosuggestRef} />
-                    Value:
-                    <input className="metadataEntry-input" ref={this._ref} value={this._currentValue} onClick={e => this._ref.current!.focus()} onChange={this.onValueChange} onKeyDown={this.onValueKeyDown} />
-                    {this.considerChildOptions}
-                </div>
-                <div className="metadataEntry-keys" >
-                    <ul>
-                        {this._allSuggestions.slice().sort().map(s => <li key={s} onClick={action(() => { this._currentKey = s; this.previewValue(); })} >{s}</li>)}
-                    </ul>
                 </div>
+                Value:
+                    <input className="metadataEntry-input" ref={this._ref} value={this._currentValue} onClick={e => this._ref.current!.focus()} onChange={this.onValueChange} onKeyDown={this.onValueKeyDown} />
+                {this.considerChildOptions}
+            </div>
+            <div className="metadataEntry-keys" >
+                <ul>
+                    {this._allSuggestions.slice().sort().map(s => <li key={s} onClick={action(() => { this._currentKey = s; this.previewValue(); })} >{s}</li>)}
+                </ul>
             </div>
+        </div>
         );
     }
 }
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionDockingView.scss b/src/client/views/collections/CollectionDockingView.scss
index f518ef8fb..819332d86 100644
--- a/src/client/views/collections/CollectionDockingView.scss
+++ b/src/client/views/collections/CollectionDockingView.scss
@@ -4,6 +4,18 @@
     color: white;
     background: #999999;
 }
+.lm_header .lm_tab .lm_close_tab {
+    position: absolute;
+    text-align: center;
+}
+
+.lm_header .lm_tab {
+    padding-right : 20px;
+}
+
+.lm_popout {
+    display:none;
+}
 
 .messageCounter {
     width: 18px;
@@ -26,9 +38,20 @@
     top: 0;
     left: 0;
     // overflow: hidden;  // bcz: menus don't show up when this is on (e.g., the parentSelectorMenu)
-
+    .collectionDockingView-gear {
+        padding-left: 5px;
+        height: 15px;
+        width: 18px;
+        display: inline-block;
+        margin: auto;
+    }
     .collectionDockingView-dragAsDocument {
         touch-action: none;
+        position: absolute;
+        padding-left: 5px;
+        display: inline-block;
+        width: 100%;
+        height: 100%;
     }
 
     .lm_content {
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 0b7dbea7c..67a7577eb 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -1,9 +1,8 @@
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { faFile } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import 'golden-layout/src/css/goldenlayout-base.css';
 import 'golden-layout/src/css/goldenlayout-dark-theme.css';
-import { action, Lambda, observable, reaction, computed, runInAction, trace } from "mobx";
+import { action, computed, Lambda, observable, reaction, runInAction } from "mobx";
 import { observer } from "mobx-react";
 import * as ReactDOM from 'react-dom';
 import Measure from "react-measure";
@@ -13,14 +12,16 @@ import { Doc, DocListCast, Field, Opt } from "../../../new_fields/Doc";
 import { Id } from '../../../new_fields/FieldSymbols';
 import { List } from '../../../new_fields/List';
 import { FieldId } from "../../../new_fields/RefField";
-import { listSpec } from "../../../new_fields/Schema";
-import { BoolCast, Cast, NumCast, StrCast } from "../../../new_fields/Types";
+import { Cast, NumCast, StrCast } from "../../../new_fields/Types";
+import { TraceMobx } from '../../../new_fields/util';
 import { CurrentUserUtils } from '../../../server/authentication/models/current_user_utils';
-import { emptyFunction, returnEmptyString, returnFalse, returnOne, returnTrue, Utils } from "../../../Utils";
+import { emptyFunction, returnOne, returnTrue, Utils } from "../../../Utils";
 import { DocServer } from "../../DocServer";
 import { Docs } from '../../documents/Documents';
+import { DocumentType } from '../../documents/DocumentTypes';
 import { DocumentManager } from '../../util/DocumentManager';
 import { DragManager } from "../../util/DragManager";
+import { Scripting } from '../../util/Scripting';
 import { SelectionManager } from '../../util/SelectionManager';
 import { Transform } from '../../util/Transform';
 import { undoBatch } from "../../util/UndoManager";
@@ -28,14 +29,8 @@ import { MainView } from '../MainView';
 import { DocumentView } from "../nodes/DocumentView";
 import "./CollectionDockingView.scss";
 import { SubCollectionViewProps } from "./CollectionSubView";
+import { DockingViewButtonSelector } from './ParentDocumentSelector';
 import React = require("react");
-import { ButtonSelector } from './ParentDocumentSelector';
-import { DocumentType } from '../../documents/DocumentTypes';
-import { ComputedField } from '../../../new_fields/ScriptField';
-import { InteractionUtils } from '../../util/InteractionUtils';
-import { TraceMobx } from '../../../new_fields/util';
-import { Scripting } from '../../util/Scripting';
-import { PresElementBox } from '../presentationview/PresElementBox';
 library.add(faFile);
 const _global = (window /* browser */ || global /* node */) as any;
 
@@ -443,16 +438,11 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
             const doc = await DocServer.GetRefField(tab.contentItem.config.props.documentId) as Doc;
             const dataDoc = await DocServer.GetRefField(tab.contentItem.config.props.dataDocumentId) as Doc;
             if (doc instanceof Doc) {
-                const dragSpan = document.createElement("span");
-                dragSpan.style.position = "relative";
-                dragSpan.style.bottom = "6px";
-                dragSpan.style.paddingLeft = "4px";
-                dragSpan.style.paddingRight = "2px";
                 const gearSpan = document.createElement("span");
+                gearSpan.className = "collectionDockingView-gear";
                 gearSpan.style.position = "relative";
                 gearSpan.style.paddingLeft = "0px";
                 gearSpan.style.paddingRight = "12px";
-                const upDiv = document.createElement("span");
                 const stack = tab.contentItem.parent;
                 // shifts the focus to this tab when another tab is dragged over it
                 tab.element[0].onmouseenter = (e: any) => {
@@ -470,15 +460,10 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
                         e.stopPropagation();
                         const dragData = new DragManager.DocumentDragData([doc]);
                         dragData.dropAction = doc.dropAction === "alias" ? "alias" : doc.dropAction === "copy" ? "copy" : undefined;
-                        DragManager.StartDocumentDrag([dragSpan], dragData, e.clientX, e.clientY);
-                    }}>
-                    <FontAwesomeIcon icon="file" size="lg" />
-                </span>, dragSpan);
-                ReactDOM.render(<ButtonSelector Document={doc} Stack={stack} />, gearSpan);
-                tab.reactComponents = [dragSpan, gearSpan, upDiv];
-                tab.element.append(dragSpan);
+                        DragManager.StartDocumentDrag([gearSpan], dragData, e.clientX, e.clientY);
+                    }}><DockingViewButtonSelector Document={doc} Stack={stack} /></span>, gearSpan);
+                tab.reactComponents = [gearSpan];
                 tab.element.append(gearSpan);
-                tab.element.append(upDiv);
                 tab.reactionDisposer = reaction(() => [doc.title, Doc.IsBrushedDegree(doc)], () => {
                     tab.titleElement[0].textContent = doc.title, { fireImmediately: true };
                     tab.titleElement[0].style.outline = `${["transparent", "white", "white"][Doc.IsBrushedDegreeUnmemoized(doc)]} ${["none", "dashed", "solid"][Doc.IsBrushedDegreeUnmemoized(doc)]} 1px`;
@@ -599,7 +584,7 @@ interface DockedFrameProps {
     dataDocumentId: FieldId;
     glContainer: any;
     libraryPath: (FieldId[]);
-    backgroundColor?: (doc:Doc) => string| undefined;
+    backgroundColor?: (doc: Doc) => string | undefined;
     //collectionDockingView: CollectionDockingView
 }
 @observer
diff --git a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
index 3fc05c6b7..2ff477c57 100644
--- a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
+++ b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
@@ -360,7 +360,7 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC
                         `Documents that don't have a ${key} value will go here. This column cannot be removed.` : ""}
                     style={{
                         width: "100%",
-                        background: evContents !== `NO ${key.toUpperCase()} VALUE` ? this._color : "lightgrey",
+                        background: evContents !== `NO ${key.toUpperCase()} VALUE` ? this._color : "inherit",
                         color: "grey"
                     }}>
                     <EditableView {...headerEditableViewProps} />
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index e2b3cc425..8720ce002 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -210,7 +210,8 @@ class TreeView extends React.Component<TreeViewProps> {
             } else {
                 ContextMenu.Instance.addItem({ description: "Delete Workspace", event: () => this.props.deleteDoc(this.props.document), icon: "trash-alt" });
                 ContextMenu.Instance.addItem({ description: "Create New Workspace", event: () => MainView.Instance.createNewWorkspace(), icon: "plus" });
-            }
+            }    
+            ContextMenu.Instance.addItem({ description: "Toggle Theme Colors", event: () => this.props.document.darkScheme = !this.props.document.darkScheme, icon: "minus" });
             ContextMenu.Instance.addItem({ description: "Open Fields", event: () => { const kvp = Docs.Create.KVPDocument(this.props.document, { _width: 300, _height: 300 }); this.props.addDocTab(kvp, this.props.dataDoc ? this.props.dataDoc : kvp, "onRight"); }, icon: "layer-group" });
             ContextMenu.Instance.addItem({ description: "Publish", event: () => DocUtils.Publish(this.props.document, StrCast(this.props.document.title), () => { }, () => { }), icon: "file" });
             ContextMenu.Instance.displayMenu(e.pageX > 156 ? e.pageX - 156 : 0, e.pageY - 15);
diff --git a/src/client/views/collections/ParentDocumentSelector.scss b/src/client/views/collections/ParentDocumentSelector.scss
index a266861bd..4e704b58f 100644
--- a/src/client/views/collections/ParentDocumentSelector.scss
+++ b/src/client/views/collections/ParentDocumentSelector.scss
@@ -35,6 +35,10 @@
     pointer-events: all; 
     position: relative;
     display: inline-block;
+    svg {
+        width:20px !important;
+        height:20px;
+    }
 }
 .parentDocumentSelector-metadata {
     pointer-events: auto;
@@ -46,8 +50,7 @@
     div {
         overflow: visible !important;
     }
-    position: absolute; 
     display: inline-block; 
-    padding-left: 5px; 
-    padding-right: 5px;
+    width:100%;
+    height:100%;
 }
\ No newline at end of file
diff --git a/src/client/views/collections/ParentDocumentSelector.tsx b/src/client/views/collections/ParentDocumentSelector.tsx
index 115f8d633..41b9e821c 100644
--- a/src/client/views/collections/ParentDocumentSelector.tsx
+++ b/src/client/views/collections/ParentDocumentSelector.tsx
@@ -11,15 +11,14 @@ import { CollectionViewType } from "./CollectionView";
 import { DocumentButtonBar } from "../DocumentButtonBar";
 import { DocumentManager } from "../../util/DocumentManager";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faEdit, faChevronCircleUp } from "@fortawesome/free-solid-svg-icons";
+import { faCog, faChevronCircleUp } from "@fortawesome/free-solid-svg-icons";
 import { library } from "@fortawesome/fontawesome-svg-core";
-import { MetadataEntryMenu } from "../MetadataEntryMenu";
 import { DocumentView } from "../nodes/DocumentView";
 const higflyout = require("@hig/flyout");
 export const { anchorPoints } = higflyout;
 export const Flyout = higflyout.default;
 
-library.add(faEdit);
+library.add(faCog);
 
 type SelectorProps = {
     Document: Doc,
@@ -79,13 +78,12 @@ export class SelectorContextMenu extends React.Component<SelectorProps> {
 export class ParentDocSelector extends React.Component<SelectorProps> {
     render() {
         const flyout = (
-            <div className="parentDocumentSelector-flyout" style={{}} title=" ">
+            <div className="parentDocumentSelector-flyout" title=" ">
                 <SelectorContextMenu {...this.props} />
             </div>
         );
         return <div title="Tap to View Contexts/Metadata" onPointerDown={e => e.stopPropagation()} className="parentDocumentSelector-linkFlyout">
-            <Flyout anchorPoint={anchorPoints.LEFT_TOP}
-                content={flyout}>
+            <Flyout anchorPoint={anchorPoints.LEFT_TOP} content={flyout}>
                 <span className="parentDocumentSelector-button" >
                     <FontAwesomeIcon icon={faChevronCircleUp} size={"lg"} />
                 </span>
@@ -95,14 +93,9 @@ export class ParentDocSelector extends React.Component<SelectorProps> {
 }
 
 @observer
-export class ButtonSelector extends React.Component<{ Document: Doc, Stack: any }> {
+export class DockingViewButtonSelector extends React.Component<{ Document: Doc, Stack: any }> {
     @observable hover = false;
 
-    @action
-    onPointerDown = (e: React.PointerEvent) => {
-        this.hover = !this.hover;
-        e.stopPropagation();
-    }
     customStylesheet(styles: any) {
         return {
             ...styles,
@@ -120,9 +113,9 @@ export class ButtonSelector extends React.Component<{ Document: Doc, Stack: any
                 <DocumentButtonBar views={[view]} stack={this.props.Stack} />
             </div>
         );
-        return <span title="Tap for menu" onPointerDown={e => e.stopPropagation()} className="buttonSelector">
+        return <span title="Tap for menu, drag tab as document" onPointerDown={e => !this.props.Stack && e.stopPropagation()} className="buttonSelector">
             <Flyout anchorPoint={anchorPoints.LEFT_TOP} content={flyout} stylesheet={this.customStylesheet}>
-                <FontAwesomeIcon icon={faEdit} size={"sm"} />
+                <FontAwesomeIcon icon={"cog"} size={"sm"} />
             </Flyout>
         </span>;
     }
diff --git a/src/client/views/nodes/ButtonBox.tsx b/src/client/views/nodes/ButtonBox.tsx
index ee48b47b7..de0b509eb 100644
--- a/src/client/views/nodes/ButtonBox.tsx
+++ b/src/client/views/nodes/ButtonBox.tsx
@@ -81,7 +81,7 @@ export class ButtonBox extends DocComponent<FieldViewProps, ButtonDocument>(Butt
             <div className="buttonBox-outerDiv" ref={this.createDropTarget} onContextMenu={this.specificContextMenu}
                 style={{ boxShadow: this.Document.opacity === 0 ? undefined : StrCast(this.Document.boxShadow, "") }}>
                 <div className="buttonBox-mainButton" style={{
-                    background: this.Document.backgroundColor, color: this.Document.color || "black",
+                    background: this.Document.backgroundColor, color: this.Document.color || "inherit",
                     fontSize: this.Document.fontSize, letterSpacing: this.Document.letterSpacing || "", textTransform: this.Document.textTransform || ""
                 }} >
                     <div className="buttonBox-mainButtonCenter">
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index 3c64b3974..30be64040 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -88,6 +88,7 @@ export class FormattedTextBox extends DocAnnotatableComponent<(FieldViewProps &
     private _pullReactionDisposer: Opt<IReactionDisposer>;
     private _pushReactionDisposer: Opt<IReactionDisposer>;
     private _buttonBarReactionDisposer: Opt<IReactionDisposer>;
+    private _scrollDisposer: Opt<IReactionDisposer>;
     private dropDisposer?: DragManager.DragDropDisposer;
 
     @observable private _entered = false;
@@ -578,6 +579,10 @@ export class FormattedTextBox extends DocAnnotatableComponent<(FieldViewProps &
             { fireImmediately: true }
         );
 
+        this._scrollDisposer = reaction(() => NumCast(this.props.Document.scrollPos),
+            pos => this._scrollRef.current && this._scrollRef.current.scrollTo({ top: pos }), { fireImmediately: true }
+        );
+
         setTimeout(() => this.tryUpdateHeight(NumCast(this.layoutDoc.limitHeight, 0)));
     }
 
@@ -788,15 +793,16 @@ export class FormattedTextBox extends DocAnnotatableComponent<(FieldViewProps &
     }
 
     componentWillUnmount() {
-        this._scrollToRegionReactionDisposer && this._scrollToRegionReactionDisposer();
-        this._reactionDisposer && this._reactionDisposer();
-        this._proxyReactionDisposer && this._proxyReactionDisposer();
-        this._pushReactionDisposer && this._pushReactionDisposer();
-        this._pullReactionDisposer && this._pullReactionDisposer();
-        this._heightReactionDisposer && this._heightReactionDisposer();
-        this._searchReactionDisposer && this._searchReactionDisposer();
-        this._buttonBarReactionDisposer && this._buttonBarReactionDisposer();
-        this._editorView && this._editorView.destroy();
+        this._scrollDisposer?.();
+        this._scrollToRegionReactionDisposer?.();
+        this._reactionDisposer?.();
+        this._proxyReactionDisposer?.();
+        this._pushReactionDisposer?.();
+        this._pullReactionDisposer?.();
+        this._heightReactionDisposer?.();
+        this._searchReactionDisposer?.();
+        this._buttonBarReactionDisposer?.();
+        this._editorView?.destroy();
     }
 
     static _downEvent: any;
@@ -1037,6 +1043,9 @@ export class FormattedTextBox extends DocAnnotatableComponent<(FieldViewProps &
         }
     }
 
+    onscrolled = (ev: React.UIEvent) => {
+        this.props.Document.scrollPos = this._scrollRef.current!.scrollTop;
+    }
     @action
     tryUpdateHeight(limitHeight?: number) {
         let scrollHeight = this._ref.current?.scrollHeight;
@@ -1094,7 +1103,7 @@ export class FormattedTextBox extends DocAnnotatableComponent<(FieldViewProps &
                 onPointerEnter={action(() => this._entered = true)}
                 onPointerLeave={action(() => this._entered = false)}
             >
-                <div className={`formattedTextBox-outer`} style={{ width: `calc(100% - ${this.sidebarWidthPercent})`, }} ref={this._scrollRef}>
+                <div className={`formattedTextBox-outer`} style={{ width: `calc(100% - ${this.sidebarWidthPercent})`, }} onScroll={this.onscrolled} ref={this._scrollRef}>
                     <div className={`formattedTextBox-inner${rounded}`} style={{ whiteSpace: "pre-wrap", pointerEvents: ((this.Document.isButton || this.props.onClick) && !this.props.isSelected()) ? "none" : undefined }} ref={this.createDropTarget} />
                 </div>
                 {!this.props.Document._showSidebar ? (null) : this.sidebarWidthPercent === "0%" ?
diff --git a/src/client/views/search/SearchItem.tsx b/src/client/views/search/SearchItem.tsx
index 8aea737f0..827cb80c6 100644
--- a/src/client/views/search/SearchItem.tsx
+++ b/src/client/views/search/SearchItem.tsx
@@ -4,24 +4,24 @@ import { faCaretUp, faChartBar, faFile, faFilePdf, faFilm, faFingerprint, faGlob
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { action, computed, observable, runInAction } from "mobx";
 import { observer } from "mobx-react";
-import { Doc, DocListCast } from "../../../new_fields/Doc";
+import { Doc } from "../../../new_fields/Doc";
 import { Id } from "../../../new_fields/FieldSymbols";
 import { Cast, NumCast, StrCast } from "../../../new_fields/Types";
-import { emptyFunction, returnEmptyString, returnFalse, returnOne, Utils, emptyPath } from "../../../Utils";
+import { emptyFunction, emptyPath, returnFalse, Utils } from "../../../Utils";
 import { DocumentType } from "../../documents/DocumentTypes";
 import { DocumentManager } from "../../util/DocumentManager";
 import { DragManager, SetupDrag } from "../../util/DragManager";
 import { SearchUtil } from "../../util/SearchUtil";
 import { Transform } from "../../util/Transform";
 import { SEARCH_THUMBNAIL_SIZE } from "../../views/globalCssVariables.scss";
-import { CollectionViewType } from "../collections/CollectionView";
 import { CollectionDockingView } from "../collections/CollectionDockingView";
+import { CollectionViewType } from "../collections/CollectionView";
+import { ParentDocSelector } from "../collections/ParentDocumentSelector";
 import { ContextMenu } from "../ContextMenu";
+import { ContentFittingDocumentView } from "../nodes/ContentFittingDocumentView";
 import { SearchBox } from "./SearchBox";
 import "./SearchItem.scss";
 import "./SelectorContextMenu.scss";
-import { ContentFittingDocumentView } from "../nodes/ContentFittingDocumentView";
-import { ButtonSelector, ParentDocSelector } from "../collections/ParentDocumentSelector";
 
 export interface SearchItemProps {
     doc: Doc;
diff --git a/src/server/authentication/models/current_user_utils.ts b/src/server/authentication/models/current_user_utils.ts
index 32c375bd7..d09837d96 100644
--- a/src/server/authentication/models/current_user_utils.ts
+++ b/src/server/authentication/models/current_user_utils.ts
@@ -164,7 +164,7 @@ export class CurrentUserUtils {
         });
 
         return Docs.Create.ButtonDocument({
-            _width: 35, _height: 25, backgroundColor: "lightgrey", color: "rgb(34, 34, 34)", title: "Tools", fontSize: 10, targetContainer: sidebarContainer,
+            _width: 35, _height: 25, title: "Tools", fontSize: 10, targetContainer: sidebarContainer,
             letterSpacing: "0px", textTransform: "unset", borderRounding: "5px 5px 0px 0px", boxShadow: "3px 3px 0px rgb(34, 34, 34)",
             sourcePanel: Docs.Create.StackingDocument([dragCreators, color], {
                 _width: 500, lockedPosition: true, _chromeStatus: "disabled", title: "tools stack"
@@ -177,20 +177,20 @@ export class CurrentUserUtils {
     static setupLibraryPanel(sidebarContainer: Doc, doc: Doc) {
         // setup workspaces library item
         doc.workspaces = Docs.Create.TreeDocument([], {
-            title: "WORKSPACES", _height: 100, forceActive: true, boxShadow: "0 0", lockedPosition: true, backgroundColor: "#eeeeee"
+            title: "WORKSPACES", _height: 100, forceActive: true, boxShadow: "0 0", lockedPosition: true,
         });
 
         doc.documents = Docs.Create.TreeDocument([], {
-            title: "DOCUMENTS", _height: 42, forceActive: true, boxShadow: "0 0", treeViewPreventOpen: true, lockedPosition: true, backgroundColor: "#eeeeee"
+            title: "DOCUMENTS", _height: 42, forceActive: true, boxShadow: "0 0", treeViewPreventOpen: true, lockedPosition: true,
         });
 
         // setup Recently Closed library item
         doc.recentlyClosed = Docs.Create.TreeDocument([], {
-            title: "RECENTLY CLOSED", _height: 75, forceActive: true, boxShadow: "0 0", treeViewPreventOpen: true, lockedPosition: true, backgroundColor: "#eeeeee"
+            title: "RECENTLY CLOSED", _height: 75, forceActive: true, boxShadow: "0 0", treeViewPreventOpen: true, lockedPosition: true,
         });
 
         return Docs.Create.ButtonDocument({
-            _width: 50, _height: 25, backgroundColor: "lightgrey", color: "rgb(34, 34, 34)", title: "Library", fontSize: 10,
+            _width: 50, _height: 25, title: "Library", fontSize: 10,
             letterSpacing: "0px", textTransform: "unset", borderRounding: "5px 5px 0px 0px", boxShadow: "3px 3px 0px rgb(34, 34, 34)",
             sourcePanel: Docs.Create.TreeDocument([doc.workspaces as Doc, doc.documents as Doc, doc.recentlyClosed as Doc], {
                 title: "Library", _xMargin: 5, _yMargin: 5, _gridGap: 5, forceActive: true, dropAction: "alias", lockedPosition: true, boxShadow: "0 0",
@@ -203,7 +203,7 @@ export class CurrentUserUtils {
     // setup the Search button which will display the search panel.  
     static setupSearchPanel(sidebarContainer: Doc) {
         return Docs.Create.ButtonDocument({
-            _width: 50, _height: 25, backgroundColor: "lightgrey", color: "rgb(34, 34, 34)", title: "Search", fontSize: 10,
+            _width: 50, _height: 25, title: "Search", fontSize: 10,
             letterSpacing: "0px", textTransform: "unset", borderRounding: "5px 5px 0px 0px", boxShadow: "3px 3px 0px rgb(34, 34, 34)",
             sourcePanel: Docs.Create.QueryDocument({
                 title: "search stack", ignoreClick: true
@@ -239,7 +239,7 @@ export class CurrentUserUtils {
                 Docs.Create.MulticolumnDocument([], { title: "images", _height: 200 }),
                 Docs.Create.TextDocument("", { title: "contents", _height: 100 })
             ],
-            { _width: 400, _height: 300, title: "slideView", _chromeStatus: "disabled", _xMargin: 3, _yMargin: 3, backgroundColor: "lightGray", _autoHeight: true });
+            { _width: 400, _height: 300, title: "slideView", _chromeStatus: "disabled", _xMargin: 3, _yMargin: 3, _autoHeight: true });
         slideTemplate.isTemplateDoc = makeTemplate(slideTemplate);
 
         const iconDoc = Docs.Create.TextDocument("", { title: "icon", _width: 150, _height: 30, isTemplateDoc: true, onClick: ScriptField.MakeScript("setNativeView(this)") });