usercolor cleanup

13 files changed, 82 insertions, 105 deletions

diff --git a/src/client/util/RTFMarkup.tsx b/src/client/util/RTFMarkup.tsx
index 9dd14a3c3..c8940194c 100644
--- a/src/client/util/RTFMarkup.tsx
+++ b/src/client/util/RTFMarkup.tsx
@@ -137,7 +137,7 @@ export class RTFMarkup extends React.Component<{}> {
     render() {
         return (
             <MainViewModal
-                dialogueBoxStyle={{ backgroundColor: StrCast(Doc.UserDoc().userBackgroundColor), color: StrCast(Doc.UserDoc().userColor), padding: '16px' }}
+                dialogueBoxStyle={{ backgroundColor: SettingsManager.userBackgroundColor, color: SettingsManager.userColor, padding: '16px' }}
                 contents={this.cheatSheet}
                 isDisplayed={this.isOpen}
                 interactive={true}
diff --git a/src/client/views/AntimodeMenu.tsx b/src/client/views/AntimodeMenu.tsx
index c41ea7053..16e76694d 100644
--- a/src/client/views/AntimodeMenu.tsx
+++ b/src/client/views/AntimodeMenu.tsx
@@ -3,6 +3,7 @@ import { observable, action, runInAction } from 'mobx';
 import './AntimodeMenu.scss';
 import { StrCast } from '../../fields/Types';
 import { Doc } from '../../fields/Doc';
+import { SettingsManager } from '../util/SettingsManager';
 export interface AntimodeMenuProps {}
 
 /**
@@ -150,7 +151,7 @@ export abstract class AntimodeMenu<T extends AntimodeMenuProps> extends React.Co
                     left: this._left,
                     top: this._top,
                     opacity: this._opacity,
-                    background: StrCast(Doc.UserDoc().userBackgroundColor),
+                    background: SettingsManager.userBackgroundColor,
                     transitionProperty: this._transitionProperty,
                     transitionDuration: this._transitionDuration,
                     transitionDelay: this._transitionDelay,
@@ -176,7 +177,7 @@ export abstract class AntimodeMenu<T extends AntimodeMenuProps> extends React.Co
                     height: 'inherit',
                     width: 200,
                     opacity: this._opacity,
-                    background: StrCast(Doc.UserDoc().userBackgroundColor),
+                    background: SettingsManager.userBackgroundColor,
                     transitionProperty: this._transitionProperty,
                     transitionDuration: this._transitionDuration,
                     transitionDelay: this._transitionDelay,
@@ -199,7 +200,7 @@ export abstract class AntimodeMenu<T extends AntimodeMenuProps> extends React.Co
                     left: this._left,
                     top: this._top,
                     opacity: this._opacity,
-                    background: StrCast(Doc.UserDoc().userBackgroundColor),
+                    background: SettingsManager.userBackgroundColor,
                     transitionProperty: this._transitionProperty,
                     transitionDuration: this._transitionDuration,
                     transitionDelay: this._transitionDelay,
diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx
index 8412a9aae..adefc7e9c 100644
--- a/src/client/views/ContextMenu.tsx
+++ b/src/client/views/ContextMenu.tsx
@@ -7,6 +7,7 @@ import { ContextMenuItem, ContextMenuProps, OriginalMenuProps } from './ContextM
 import { Utils } from '../../Utils';
 import { StrCast } from '../../fields/Types';
 import { Doc } from '../../fields/Doc';
+import { SettingsManager } from '../util/SettingsManager';
 
 @observer
 export class ContextMenu extends React.Component {
@@ -195,7 +196,7 @@ export class ContextMenu extends React.Component {
                 <div
                     className="contextMenu-group"
                     style={{
-                        background: StrCast(Doc.UserDoc().userVariantColor),
+                        background: StrCast(SettingsManager.userVariantColor),
                     }}>
                     <div className="contextMenu-description">{value.join(' -> ')}</div>
                 </div>
@@ -222,8 +223,8 @@ export class ContextMenu extends React.Component {
                 style={{
                     left: this.pageX,
                     ...(this._yRelativeToTop ? { top: this.pageY } : { bottom: this.pageY }),
-                    background: StrCast(Doc.UserDoc().userBackgroundColor),
-                    color: StrCast(Doc.UserDoc().userColor),
+                    background: SettingsManager.userBackgroundColor,
+                    color: SettingsManager.userColor,
                 }}>
                 {!this.itemsNeedSearch ? null : (
                     <span className={'search-icon'}>
diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index 8b2b77aca..40d42a4de 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -32,6 +32,7 @@ import { TfiBarChart } from 'react-icons/tfi';
 import { CiGrid31 } from 'react-icons/ci';
 import { RxWidth } from 'react-icons/rx';
 import { Dropdown, DropdownType, IListItemProps, Toggle, ToggleType, Type } from 'browndash-components';
+import { SettingsManager } from '../util/SettingsManager';
 
 enum UtilityButtonState {
     Default,
@@ -57,7 +58,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
             <Toggle
                 toggleStatus={BoolCast(targetDoc[property])}
                 text={label(targetDoc?.[property])}
-                color={StrCast(Doc.UserDoc().userColor)}
+                color={SettingsManager.userColor}
                 icon={icon(targetDoc?.[property] as any)}
                 iconPlacement={'left'}
                 align={'flex-start'}
@@ -380,7 +381,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
                 selectedVal={this.onClickVal}
                 setSelectedVal={val => this.handleOptionChange(val as string)}
                 title={'Choose onClick behaviour'}
-                color={StrCast(Doc.UserDoc().userColor)}
+                color={SettingsManager.userColor}
                 dropdownType={DropdownType.SELECT}
                 type={Type.SEC}
                 fillWidth
diff --git a/src/client/views/PropertiesSection.tsx b/src/client/views/PropertiesSection.tsx
index 0e7cd7e92..bd586b2f9 100644
--- a/src/client/views/PropertiesSection.tsx
+++ b/src/client/views/PropertiesSection.tsx
@@ -5,6 +5,7 @@ import { observer } from 'mobx-react';
 import './PropertiesSection.scss';
 import { Doc } from '../../fields/Doc';
 import { StrCast } from '../../fields/Types';
+import { SettingsManager } from '../util/SettingsManager';
 
 export interface PropertiesSectionProps {
     title: string;
@@ -19,15 +20,15 @@ export interface PropertiesSectionProps {
 @observer
 export class PropertiesSection extends React.Component<PropertiesSectionProps> {
     @computed get color() {
-        return StrCast(Doc.UserDoc().userColor);
+        return SettingsManager.userColor;
     }
 
     @computed get backgroundColor() {
-        return StrCast(Doc.UserDoc().userBackgroundColor);
+        return SettingsManager.userBackgroundColor;
     }
 
     @computed get variantColor() {
-        return StrCast(Doc.UserDoc().userVariantColor);
+        return SettingsManager.userVariantColor;
     }
 
     @observable isDouble: boolean = false;
diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index b25ac7903..699aafe80 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -368,7 +368,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                 <IconButton
                     icon={<FontAwesomeIcon icon={'ellipsis-h'} />}
                     size={Size.XSMALL}
-                    color={StrCast(Doc.UserDoc().userColor)}
+                    color={SettingsManager.userColor}
                     onClick={action(() => {
                         if (this.selectedDocumentView || this.selectedDoc) {
                             SharingManager.Instance.open(this.selectedDocumentView?.props.Document === this.selectedDoc ? this.selectedDocumentView : undefined, this.selectedDoc);
@@ -518,7 +518,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                 <div>
                     <br></br> Individuals with Access to this Document
                 </div>
-                <div className="propertiesView-sharingTable" style={{ background: StrCast(Doc.UserDoc().userBackgroundColor), color: StrCast(Doc.UserDoc().userColor) }}>
+                <div className="propertiesView-sharingTable" style={{ background: SettingsManager.userBackgroundColor, color: SettingsManager.userColor }}>
                     {<div> {individualTableEntries}</div>}
                 </div>
                 {groupTableEntries.length > 0 ? (
@@ -526,7 +526,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                         <div>
                             <br></br> Groups with Access to this Document
                         </div>
-                        <div className="propertiesView-sharingTable" style={{ background: StrCast(Doc.UserDoc().userBackgroundColor), color: StrCast(Doc.UserDoc().userColor) }}>
+                        <div className="propertiesView-sharingTable" style={{ background: SettingsManager.userBackgroundColor, color: SettingsManager.userColor }}>
                             {<div> {groupTableEntries}</div>}
                         </div>
                     </div>
@@ -546,15 +546,15 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
     toggleCheckbox = () => (this.layoutFields = !this.layoutFields);
 
     @computed get color() {
-        return StrCast(Doc.UserDoc().userColor);
+        return SettingsManager.userColor;
     }
 
     @computed get backgroundColor() {
-        return StrCast(Doc.UserDoc().userBackgroundColor);
+        return SettingsManager.userBackgroundColor;
     }
 
     @computed get variantColor() {
-        return StrCast(Doc.UserDoc().userVariantColor);
+        return SettingsManager.userVariantColor;
     }
 
     @computed get editableTitle() {
@@ -585,8 +585,6 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
     }
 
     @computed get currentType() {
-        // console.log("current type " + this.selectedDoc?.type)
-
         const documentType = StrCast(this.selectedDoc?.type);
         var currentType: string = documentType;
         var capitalizedDocType = Utils.cleanDocumentType(currentType as DocumentType);
@@ -610,9 +608,8 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
         if (iconName) {
             const Icon = Icons[iconName as keyof typeof Icons];
             return <Icon />;
-        } else {
-            return <Icons.BsFillCollectionFill />;
         }
+        return <Icons.BsFillCollectionFill />;
     }
 
     @undoBatch
@@ -1683,8 +1680,8 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                     <div
                         className="propertiesView"
                         style={{
-                            background: StrCast(Doc.UserDoc().userBackgroundColor),
-                            color: StrCast(Doc.UserDoc().userColor),
+                            background: SettingsManager.userBackgroundColor,
+                            color: SettingsManager.userColor,
                             width: this.props.width,
                             minWidth: this.props.width,
                         }}>
diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx
index 8a5ad3139..85aa5ad83 100644
--- a/src/client/views/StyleProvider.tsx
+++ b/src/client/views/StyleProvider.tsx
@@ -162,8 +162,8 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<DocumentViewProps
             );
         case StyleProp.Color:
             if (DocumentView.LastPressedSidebarBtn === doc) return SettingsManager.userBackgroundColor;
-            if (Doc.IsSystem(doc!)) return StrCast(Doc.UserDoc().userColor)
-            if (doc?.type === DocumentType.FONTICON) return Doc.UserDoc().userColor;
+            if (Doc.IsSystem(doc!)) return SettingsManager.userColor;
+            if (doc?.type === DocumentType.FONTICON) return SettingsManager.userColor;
             const docColor: Opt<string> = StrCast(doc?.[fieldKey + 'color'], StrCast(doc?._color));
             if (docColor) return docColor;
             const docView = props?.DocumentView?.();
@@ -196,7 +196,7 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<DocumentViewProps
                 ? 15
                 : 0;
         case StyleProp.BackgroundColor: {
-            if (DocumentView.LastPressedSidebarBtn === doc) return StrCast(Doc.UserDoc().userColor); // hack to indicate active menu panel item
+            if (DocumentView.LastPressedSidebarBtn === doc) return SettingsManager.userColor; // hack to indicate active menu panel item
             let docColor: Opt<string> = StrCast(doc?.[fieldKey + '_backgroundColor'], StrCast(doc?._backgroundColor, isCaption ? 'rgba(0,0,0,0.4)' : ''));
             // prettier-ignore
             switch (doc?.type) {
@@ -350,7 +350,7 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<DocumentViewProps
 }
 
 export function DashboardToggleButton(doc: Doc, field: string, onIcon: IconProp, offIcon: IconProp, clickFunc?: () => void) {
-    const color = StrCast(Doc.UserDoc().userColor);
+    const color = SettingsManager.userColor;
     return (
         <IconButton
             size={Size.XSMALL}
diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx
index 78ab0797b..ec9d86c1a 100644
--- a/src/client/views/collections/CollectionMenu.tsx
+++ b/src/client/views/collections/CollectionMenu.tsx
@@ -158,7 +158,7 @@ export class CollectionMenu extends AntimodeMenu<CollectionMenuProps> {
                 <Toggle
                     toggleType={ToggleType.BUTTON}
                     type={Type.PRIM}
-                    color={StrCast(Doc.UserDoc().userColor)}
+                    color={SettingsManager.userColor}
                     onClick={this.toggleTopBar}
                     toggleStatus={SettingsManager.headerBarHeight > 0}
                     icon={<FontAwesomeIcon icon={headerIcon} size="lg" />}
@@ -167,7 +167,7 @@ export class CollectionMenu extends AntimodeMenu<CollectionMenuProps> {
                 <Toggle
                     toggleType={ToggleType.BUTTON}
                     type={Type.PRIM}
-                    color={StrCast(Doc.UserDoc().userColor)}
+                    color={SettingsManager.userColor}
                     onClick={this.toggleProperties}
                     toggleStatus={SettingsManager.propertiesWidth > 0}
                     icon={<FontAwesomeIcon icon={propIcon} size="lg" />}
@@ -183,7 +183,7 @@ export class CollectionMenu extends AntimodeMenu<CollectionMenuProps> {
                 className="collectionMenu-container"
                 style={{
                     background: SettingsManager.userBackgroundColor,
-                    // borderColor: StrCast(Doc.UserDoc().userColor)
+                    // borderColor: SettingsManager.userColor
                 }}>
                 {this.contMenuButtons}
                 {hardCodedButtons}
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index e4a0d6dad..9ba4cb6cf 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -31,6 +31,7 @@ import { CollectionMasonryViewFieldRow } from './CollectionMasonryViewFieldRow';
 import './CollectionStackingView.scss';
 import { CollectionStackingViewFieldColumn } from './CollectionStackingViewFieldColumn';
 import { CollectionSubView } from './CollectionSubView';
+import { SettingsManager } from '../../util/SettingsManager';
 const _global = (window /* browser */ || global) /* node */ as any;
 
 export type collectionStackingViewProps = {
@@ -426,7 +427,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
                 className="collectionStackingView-columnDragger"
                 onPointerDown={this.columnDividerDown}
                 ref={this._draggerRef}
-                style={{ cursor: this._cursor, color: StrCast(Doc.UserDoc().userColor), left: `${this.columnWidth + this.xMargin}px`, top: `${Math.max(0, this.yMargin - 9)}px` }}>
+                style={{ cursor: this._cursor, color: SettingsManager.userColor, left: `${this.columnWidth + this.xMargin}px`, top: `${Math.max(0, this.yMargin - 9)}px` }}>
                 <FontAwesomeIcon icon={'arrows-alt-h'} />
             </div>
         );
diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx
index f1268119e..71e9f4dfa 100644
--- a/src/client/views/collections/TreeView.tsx
+++ b/src/client/views/collections/TreeView.tsx
@@ -36,6 +36,7 @@ import './TreeView.scss';
 import React = require('react');
 import { IconButton, Size } from 'browndash-components';
 import { TreeSort } from './TreeSort';
+import { SettingsManager } from '../../util/SettingsManager';
 
 export interface TreeViewProps {
     treeView: CollectionTreeView;
@@ -736,7 +737,7 @@ export class TreeView extends React.Component<TreeViewProps> {
     @computed get renderBullet() {
         TraceMobx();
         const iconType = this.props.treeView.props.styleProvider?.(this.doc, this.props.treeView.props, StyleProp.TreeViewIcon + (this.treeViewOpen ? ':open' : !this.childDocs.length ? ':empty' : '')) || 'question';
-        const color = StrCast(Doc.UserDoc().userColor);
+        const color = SettingsManager.userColor;
         const checked = this.onCheckedClick ? this.doc.treeView_Checked ?? 'unchecked' : undefined;
         return (
             <div
@@ -796,7 +797,7 @@ export class TreeView extends React.Component<TreeViewProps> {
     @observable headerEleWidth = 0;
     @computed get titleButtons() {
         const customHeaderButtons = this.props.styleProvider?.(this.doc, this.props.treeView.props, StyleProp.Decorations);
-        const color = StrCast(Doc.UserDoc().userColor);
+        const color = SettingsManager.userColor;
         return this.props.treeViewHideHeaderFields() || this.doc.treeView_HideHeaderFields ? null : (
             <>
                 {customHeaderButtons} {/* e.g.,. hide button is set by dashboardStyleProvider */}
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx b/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx
index 71900c63f..607f9fb95 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx
@@ -8,6 +8,7 @@ import { IconButton } from 'browndash-components';
 import { StrCast } from '../../../../fields/Types';
 import { Doc } from '../../../../fields/Doc';
 import { computed } from 'mobx';
+import { SettingsManager } from '../../../util/SettingsManager';
 
 @observer
 export class MarqueeOptionsMenu extends AntimodeMenu<AntimodeMenuProps> {
@@ -27,43 +28,18 @@ export class MarqueeOptionsMenu extends AntimodeMenu<AntimodeMenuProps> {
     }
 
     @computed get userColor() {
-        return StrCast(Doc.UserDoc().userColor)
+        return SettingsManager.userColor;
     }
 
     render() {
         const presPinWithViewIcon = <img src="/assets/pinWithView.png" style={{ width: 19 }} />;
         const buttons = (
             <>
-                <IconButton 
-                    tooltip={"Create a Collection"}
-                    onPointerDown={this.createCollection}
-                    icon={<FontAwesomeIcon icon="object-group"/>}
-                    color={this.userColor}
-                />
-                <IconButton 
-                    tooltip={"Create a Grouping"}
-                    onPointerDown={e => this.createCollection(e, true)}
-                    icon={<FontAwesomeIcon icon="layer-group"/>}
-                    color={this.userColor}
-                />
-                <IconButton 
-                    tooltip={"Summarize Documents"}
-                    onPointerDown={this.summarize}
-                    icon={<FontAwesomeIcon icon="compress-arrows-alt"/>}
-                    color={this.userColor}
-                />
-                <IconButton 
-                    tooltip={"Delete Documents"}
-                    onPointerDown={this.delete}
-                    icon={<FontAwesomeIcon icon="trash-alt"/>}
-                    color={this.userColor}
-                />
-                <IconButton 
-                    tooltip={"Pin selected region"}
-                    onPointerDown={this.pinWithView}
-                    icon={<FontAwesomeIcon icon="map-pin"/>}
-                    color={this.userColor}
-                />
+                <IconButton tooltip={'Create a Collection'} onPointerDown={this.createCollection} icon={<FontAwesomeIcon icon="object-group" />} color={this.userColor} />
+                <IconButton tooltip={'Create a Grouping'} onPointerDown={e => this.createCollection(e, true)} icon={<FontAwesomeIcon icon="layer-group" />} color={this.userColor} />
+                <IconButton tooltip={'Summarize Documents'} onPointerDown={this.summarize} icon={<FontAwesomeIcon icon="compress-arrows-alt" />} color={this.userColor} />
+                <IconButton tooltip={'Delete Documents'} onPointerDown={this.delete} icon={<FontAwesomeIcon icon="trash-alt" />} color={this.userColor} />
+                <IconButton tooltip={'Pin selected region'} onPointerDown={this.pinWithView} icon={<FontAwesomeIcon icon="map-pin" />} color={this.userColor} />
             </>
         );
         return this.getElement(buttons);
diff --git a/src/client/views/nodes/MapBox/MapAnchorMenu.tsx b/src/client/views/nodes/MapBox/MapAnchorMenu.tsx
index f731763af..f0827936b 100644
--- a/src/client/views/nodes/MapBox/MapAnchorMenu.tsx
+++ b/src/client/views/nodes/MapBox/MapAnchorMenu.tsx
@@ -6,7 +6,7 @@ import { ColorState } from 'react-color';
 import { Doc, Opt } from '../../../../fields/Doc';
 import { returnFalse, setupMoveUpEvents, unimplementedFunction, Utils } from '../../../../Utils';
 import { SelectionManager } from '../../../util/SelectionManager';
-import { AntimodeMenu, AntimodeMenuProps } from "../../AntimodeMenu"
+import { AntimodeMenu, AntimodeMenuProps } from '../../AntimodeMenu';
 import { LinkPopup } from '../../linking/LinkPopup';
 import { gptAPICall, GPTCallType } from '../../../apis/gpt/GPT';
 // import { GPTPopup, GPTPopupMode } from './../../GPTPopup/GPTPopup';
@@ -15,6 +15,7 @@ import './MapAnchorMenu.scss';
 import { ColorPicker, Group, IconButton, Popup, Size, Toggle, ToggleType, Type } from 'browndash-components';
 import { StrCast } from '../../../../fields/Types';
 import { DocumentType } from '../../../documents/DocumentTypes';
+import { SettingsManager } from '../../../util/SettingsManager';
 
 @observer
 export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
@@ -24,9 +25,6 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
     private _disposer2: IReactionDisposer | undefined;
     private _commentCont = React.createRef<HTMLButtonElement>();
 
-
-
-
     public onMakeAnchor: () => Opt<Doc> = () => undefined; // Method to get anchor from text search
 
     public Center: () => void = unimplementedFunction;
@@ -90,41 +88,39 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
     //     );
     // };
 
-
     static top = React.createRef<HTMLDivElement>();
     // public get Top(){
     //     return this.top
     // }
 
-
     render() {
-        const buttons =(
-                <>
-                    {(
-                        <IconButton
-                            tooltip="Delete Pin" //
-                            onPointerDown={this.Delete}
-                            icon={<FontAwesomeIcon icon="trash-alt" />}
-                            color={StrCast(Doc.UserDoc().userColor)}
-                        />
-                    )}
-                    {(
-                        <IconButton
-                            tooltip="Link Note to Pin" //
-                            onPointerDown={this.LinkNote}
-                            icon={<FontAwesomeIcon icon="sticky-note" />}
-                            color={StrCast(Doc.UserDoc().userColor)}
-                        />
-                    )}
-                    {(
-                        <IconButton
-                            tooltip="Center on pin" //
-                            onPointerDown={this.Center}
-                            icon={<FontAwesomeIcon icon="compress-arrows-alt" />}
-                            color={StrCast(Doc.UserDoc().userColor)}
-                        />
-                    )}
-                    {/* {this.IsTargetToggler !== returnFalse && (
+        const buttons = (
+            <>
+                {
+                    <IconButton
+                        tooltip="Delete Pin" //
+                        onPointerDown={this.Delete}
+                        icon={<FontAwesomeIcon icon="trash-alt" />}
+                        color={SettingsManager.userColor}
+                    />
+                }
+                {
+                    <IconButton
+                        tooltip="Link Note to Pin" //
+                        onPointerDown={this.LinkNote}
+                        icon={<FontAwesomeIcon icon="sticky-note" />}
+                        color={SettingsManager.userColor}
+                    />
+                }
+                {
+                    <IconButton
+                        tooltip="Center on pin" //
+                        onPointerDown={this.Center}
+                        icon={<FontAwesomeIcon icon="compress-arrows-alt" />}
+                        color={SettingsManager.userColor}
+                    />
+                }
+                {/* {this.IsTargetToggler !== returnFalse && (
                         <Toggle
                             tooltip={'Make target visibility toggle on click'}
                             type={Type.PRIM}
@@ -132,15 +128,16 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
                             toggleStatus={this.IsTargetToggler()}
                             onClick={this.MakeTargetToggle}
                             icon={<FontAwesomeIcon icon="thumbtack" />}
-                            color={StrCast(Doc.UserDoc().userColor)}
+                            color={SettingsManager.userColor}
                         />
                     )} */}
-                </>
-            );
+            </>
+        );
 
-        return this.getElement(<div ref={MapAnchorMenu.top} style={{width:"100%", display:"flex"}}>
-        {buttons}
-        </div>
+        return this.getElement(
+            <div ref={MapAnchorMenu.top} style={{ width: '100%', display: 'flex' }}>
+                {buttons}
+            </div>
         );
     }
 }
diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx
index 01810fa00..81ca3ff36 100644
--- a/src/client/views/nodes/MapBox/MapBox.tsx
+++ b/src/client/views/nodes/MapBox/MapBox.tsx
@@ -760,8 +760,9 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                             ? null
                             : this.allAnnotations
                                   .filter(anno => !anno.layout_unrendered)
-                                  .map(pushpin => (
+                                  .map((pushpin, i) => (
                                       <DocumentView
+                                          key={i}
                                           {...this.props}
                                           renderDepth={this.props.renderDepth + 1}
                                           Document={pushpin}