fixes to components so that things highlight reasonably in different skins. fixed color picker alternate selection.

5 files changed, 58 insertions, 44 deletions

diff --git a/src/client/util/CalendarManager.tsx b/src/client/util/CalendarManager.tsx
index 1a5a5f889..4e321a893 100644
--- a/src/client/util/CalendarManager.tsx
+++ b/src/client/util/CalendarManager.tsx
@@ -236,7 +236,7 @@ export class CalendarManager extends ObservableReactComponent<object> {
                 className="calendar-interface"
                 style={{
                     background: SnappingManager.userBackgroundColor,
-                    color: StrCast(Doc.UserDoc().userColor),
+                    color: SnappingManager.userColor,
                 }}>
                 <p className="selected-doc-title" style={{ color: SnappingManager.userColor }}>
                     <b>{this.focusOn(docs.length < 2 ? StrCast(targetDoc?.title, 'this document') : '-multiple-')}</b>
diff --git a/src/client/util/GroupManager.tsx b/src/client/util/GroupManager.tsx
index 1ec85c9d9..79d009720 100644
--- a/src/client/util/GroupManager.tsx
+++ b/src/client/util/GroupManager.tsx
@@ -19,6 +19,7 @@ import './GroupManager.scss';
 import { GroupMemberView } from './GroupMemberView';
 import { SharingManager, User } from './SharingManager';
 import { SnappingManager } from './SnappingManager';
+import { SettingsManager } from './SettingsManager';
 
 /**
  * Interface for options for the react-select component
@@ -290,11 +291,12 @@ export class GroupManager extends ObservableReactComponent<object> {
                                 this.createGroupModalOpen = false;
                                 TaskCompletionBox.taskCompleted = false;
                             })}
-                            color={StrCast(Doc.UserDoc().userColor)}
+                            color={SettingsManager.userColor}
+                            background={SettingsManager.userBackgroundColor}
                         />
                     </div>
                 </div>
-                <div className="group-input" style={{ border: StrCast(Doc.UserDoc().userColor) }}>
+                <div className="group-input" style={{ border: SettingsManager.userColor }}>
                     <input
                         ref={this.inputRef}
                         onKeyDown={this.handleKeyDown}
@@ -306,7 +308,7 @@ export class GroupManager extends ObservableReactComponent<object> {
                         })}
                     />
                 </div>
-                <div style={{ border: StrCast(Doc.UserDoc().userColor) }}>
+                <div style={{ border: SettingsManager.userColor }}>
                     <Select
                         className="select-users"
                         isMulti
@@ -332,15 +334,15 @@ export class GroupManager extends ObservableReactComponent<object> {
                             }),
                             valueContainer: () => ({
                                 display: 'inline-flex',
-                                fontStyle: StrCast(Doc.UserDoc().userColor),
-                                color: StrCast(Doc.UserDoc().userColor),
+                                fontStyle: SettingsManager.userColor,
+                                color: SettingsManager.userColor,
                                 width: '100%',
                             }),
                         }}
                     />
                 </div>
                 <div className="create-button">
-                    <Button text="Create" type={Type.TERT} color={StrCast(Doc.UserDoc().userColor)} onClick={this.createGroup} />
+                    <Button text="Create" type={Type.TERT} color={SettingsManager.userColor} background={SettingsManager.userBackgroundColor} onClick={this.createGroup} />
                 </div>
             </div>
         );
diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx
index 6ea242fc3..89e3686b2 100644
--- a/src/client/util/SettingsManager.tsx
+++ b/src/client/util/SettingsManager.tsx
@@ -135,9 +135,9 @@ export class SettingsManager extends React.Component<object> {
         reaction(
             () => [SettingsManager.userBackgroundColor, SettingsManager.userColor, SettingsManager.userVariantColor],
             ([back, user, variant]) => {
-                SnappingManager.userBackgroundColor = back;
-                SnappingManager.userVariantColor = variant;
-                SnappingManager.userColor = user;
+                SnappingManager.SetUserBackgroundColor(back);
+                SnappingManager.SetUserVariantColor(variant);
+                SnappingManager.SetUserColor(user);
             },
             { fireImmediately: true }
         );
@@ -177,6 +177,7 @@ export class SettingsManager extends React.Component<object> {
                     }))}
                     dropdownType={DropdownType.SELECT}
                     color={SettingsManager.userColor}
+                    background={SettingsManager.userBackgroundColor}
                     fillWidth
                 />
                 <Toggle formLabel="Match System" toggleType={ToggleType.SWITCH} color={SettingsManager.userColor} toggleStatus={BoolCast(Doc.UserDoc().userThemeSystem)} onClick={this.userThemeSystemToggle} />
@@ -300,6 +301,7 @@ export class SettingsManager extends React.Component<object> {
                     <NumberDropdown
                         number={NumCast(Doc.UserDoc().headerHeight, 30)}
                         color={SettingsManager.userColor}
+                        background={SettingsManager.userBackgroundColor}
                         numberDropdownType="slider"
                         min={6}
                         max={60}
@@ -342,6 +344,7 @@ export class SettingsManager extends React.Component<object> {
                         <Group formLabel="Default Font">
                             <NumberDropdown
                                 color={SettingsManager.userColor}
+                                background={SettingsManager.userBackgroundColor}
                                 numberDropdownType="slider"
                                 min={0}
                                 max={50}
@@ -355,10 +358,10 @@ export class SettingsManager extends React.Component<object> {
                             />
                             <ColorPicker
                                 color={SettingsManager.userColor}
+                                background={SettingsManager.userBackgroundColor}
                                 type={Type.PRIM}
                                 defaultPickerType="Classic"
                                 selectedColor={StrCast(Doc.UserDoc().textBackgroundColor, Colors.LIGHT_GRAY)}
-                                background={SnappingManager.userBackgroundColor}
                                 icon={<FontAwesomeIcon icon="palette" size="lg" />}
                                 tooltip="default text background color"
                                 label="background"
@@ -390,6 +393,7 @@ export class SettingsManager extends React.Component<object> {
                                     this.changeFontFamily(val as string);
                                 }}
                                 color={SettingsManager.userColor}
+                                background={SettingsManager.userBackgroundColor}
                                 fillWidth
                             />
                         </Group>
@@ -402,12 +406,12 @@ export class SettingsManager extends React.Component<object> {
     @computed get passwordContent() {
         return (
             <div className="password-content">
-                <EditableText placeholder="Current password" type={Type.SEC} color={SettingsManager.userColor} val="" setVal={val => this.changeVal(val as string, 'curr')} fillWidth password />
-                <EditableText placeholder="New password" type={Type.SEC} color={SettingsManager.userColor} val="" setVal={val => this.changeVal(val as string, 'new')} fillWidth password />
-                <EditableText placeholder="Confirm new password" type={Type.SEC} color={SettingsManager.userColor} val="" setVal={val => this.changeVal(val as string, 'conf')} fillWidth password />
+                <EditableText placeholder="Current password" type={Type.SEC} color={SettingsManager.userColor} background={SettingsManager.userBackgroundColor} val="" setVal={val => this.changeVal(val as string, 'curr')} fillWidth password />
+                <EditableText placeholder="New password" type={Type.SEC} color={SettingsManager.userColor} background={SettingsManager.userBackgroundColor} val="" setVal={val => this.changeVal(val as string, 'new')} fillWidth password />
+                <EditableText placeholder="Confirm new password" type={Type.SEC} color={SettingsManager.userColor} background={SettingsManager.userBackgroundColor} val="" setVal={val => this.changeVal(val as string, 'conf')} fillWidth password />
                 {!this._passwordResultText ? null : <div className={`${this._passwordResultText.startsWith('Error') ? 'error' : 'success'}-text`}>{this._passwordResultText}</div>}
-                <Button type={Type.SEC} text="Forgot Password" color={SettingsManager.userColor} />
-                <Button type={Type.TERT} text="Submit" onClick={this.changePassword} color={SettingsManager.userColor} />
+                <Button type={Type.SEC} text="Forgot Password" color={SettingsManager.userColor} background={SettingsManager.userBackgroundColor} />
+                <Button type={Type.TERT} text="Submit" onClick={this.changePassword} color={SettingsManager.userColor} background={SettingsManager.userBackgroundColor} />
             </div>
         );
     }
@@ -415,7 +419,7 @@ export class SettingsManager extends React.Component<object> {
     @computed get accountOthersContent() {
         return (
             <div className="account-others-content">
-                <Button type={Type.TERT} text="Connect to Google" iconPlacement="left" icon={<BsGoogle />} onClick={() => this.googleAuthorize()} />
+                <Button type={Type.TERT} text="Connect to Google" color={SnappingManager.userColor} background={SnappingManager.userBackgroundColor} iconPlacement="left" icon={<BsGoogle />} onClick={() => this.googleAuthorize()} />
             </div>
         );
     }
@@ -465,6 +469,7 @@ export class SettingsManager extends React.Component<object> {
                             type={Type.TERT}
                             placement="bottom-start"
                             color={SettingsManager.userColor}
+                            background={SettingsManager.userBackgroundColor}
                             fillWidth
                         />
                         <Toggle formLabel="Playground Mode" toggleType={ToggleType.SWITCH} toggleStatus={this._playgroundMode} onClick={this.playgroundModeToggle} color={SettingsManager.userColor} />
@@ -494,13 +499,14 @@ export class SettingsManager extends React.Component<object> {
                             type={Type.TERT}
                             placement="bottom-start"
                             color={SettingsManager.userColor}
+                            background={SettingsManager.userBackgroundColor}
                         />
                     </div>
                 </div>
                 <div className="tab-column">
                     <div className="tab-column-title">Permissions</div>
                     <div className="tab-column-content">
-                        <Button text="Manage Groups" type={Type.TERT} onClick={() => GroupManager.Instance?.open()} color={SettingsManager.userColor} />
+                        <Button text="Manage Groups" type={Type.TERT} color={SnappingManager.userColor} background={SnappingManager.userBackgroundColor} onClick={() => GroupManager.Instance?.open()} />
                         <Toggle
                             toggleType={ToggleType.SWITCH}
                             formLabel="Default access private"
diff --git a/src/client/util/SharingManager.tsx b/src/client/util/SharingManager.tsx
index 962f51cd4..db8c6c5cb 100644
--- a/src/client/util/SharingManager.tsx
+++ b/src/client/util/SharingManager.tsx
@@ -286,7 +286,7 @@ export class SharingManager extends React.Component<object> {
                         {this.focusOn(docs.length < 2 ? StrCast(targetDoc?.title, 'this document') : '-multiple-')}
                     </p>
                     <div className="share-copy-link">
-                        <Button type={Type.TERT} color={SnappingManager.userColor} icon={<FontAwesomeIcon icon="copy" size="sm" />} iconPlacement="left" text="Copy Guest URL" onClick={this.copyURL} />
+                        <Button type={Type.TERT} color={SnappingManager.userColor} background={SnappingManager.userBackgroundColor} icon={<FontAwesomeIcon icon="copy" size="sm" />} iconPlacement="left" text="Copy Guest URL" onClick={this.copyURL} />
                     </div>
                     <div className="close-button">
                         <Button icon={<FontAwesomeIcon icon="times" size="lg" />} onClick={this.close} color={SnappingManager.userColor} />
@@ -331,7 +331,7 @@ export class SharingManager extends React.Component<object> {
                                     </select>
                                 </div>
                                 <div className="share-button">
-                                    <Button text="SHARE" type={Type.TERT} color={SnappingManager.userColor} onClick={this.share} />
+                                    <Button text="SHARE" type={Type.TERT} color={SnappingManager.userColor} background={SnappingManager.userBackgroundColor} onClick={this.share} />
                                 </div>
                             </div>
                             <div className="sort-checkboxes">
diff --git a/src/client/util/SnappingManager.ts b/src/client/util/SnappingManager.ts
index 3bbc297b8..54c91087f 100644
--- a/src/client/util/SnappingManager.ts
+++ b/src/client/util/SnappingManager.ts
@@ -1,4 +1,4 @@
-import { observable, action, runInAction, makeObservable } from 'mobx';
+import { observable, action, makeObservable } from 'mobx';
 import { Gestures } from '../../pen-gestures/GestureTypes';
 
 export enum freeformScrollMode {
@@ -34,6 +34,9 @@ export class SnappingManager {
     @observable _keepGestureMode: boolean = false; // for whether primitive selection enters a one-shot or persistent mode
     @observable _inkShape: Gestures | undefined = undefined;
     @observable _chatVisible: boolean = false;
+    @observable _userBackgroundColor: string | undefined = undefined;
+    @observable _userVariantColor: string | undefined = undefined;
+    @observable _userColor: string | undefined = undefined;
 
     private constructor() {
         SnappingManager._manager = this;
@@ -48,6 +51,9 @@ export class SnappingManager {
         this.Instance._vertSnapLines.push(...vertLines);
     };
 
+    public static get userBackgroundColor() { return this.Instance._userBackgroundColor; } // prettier-ignore
+    public static get userVariantColor() { return this.Instance._userVariantColor; } // prettier-ignore
+    public static get userColor()      { return this.Instance._userColor; } // prettier-ignore
     public static get HorizSnapLines() { return this.Instance._horizSnapLines; } // prettier-ignore
     public static get VertSnapLines()  { return this.Instance._vertSnapLines; } // prettier-ignore
     public static get LongPress()      { return this.Instance._longPress; } // prettier-ignore
@@ -71,29 +77,29 @@ export class SnappingManager {
     public static get InkShape()       { return this.Instance._inkShape; } // prettier-ignore
     public static get ChatVisible()    { return this.Instance._chatVisible; } // prettier-ignore
 
-    public static SetLongPress      = (press: boolean) => runInAction(() => {this.Instance._longPress = press}); // prettier-ignore
-    public static SetShiftKey       = (down: boolean) => runInAction(() => {this.Instance._shiftKey = down}); // prettier-ignore
-    public static SetCtrlKey        = (down: boolean) => runInAction(() => {this.Instance._ctrlKey = down}); // prettier-ignore
-    public static SetMetaKey        = (down: boolean) => runInAction(() => {this.Instance._metaKey = down}); // prettier-ignore
-    public static SetHideUI         = (vis: boolean) => runInAction(() => {this.Instance._hideUI = vis}); // prettier-ignore
-    public static SetShowPresPaths  = (paths:boolean) => runInAction(() => {this.Instance._showPresPaths = paths}); // prettier-ignore
-    public static SetIsLinkFollowing= (follow:boolean)=> runInAction(() => {this.Instance._isLinkFollowing = follow}); // prettier-ignore
-    public static SetIsDragging     = (drag: boolean) => runInAction(() => {this.Instance._isDragging = drag}); // prettier-ignore
-    public static SetIsResizing     = (docid?:string) => runInAction(() => {this.Instance._isResizing = docid}); // prettier-ignore
-    public static SetCanEmbed       = (embed:boolean) => runInAction(() => {this.Instance._canEmbed = embed}); // prettier-ignore
-    public static SetExploreMode    = (state:boolean) => runInAction(() => {this.Instance._exploreMode = state}); // prettier-ignore
-    public static TriggerUserPanned = ()              => runInAction(() => {this.Instance._userPanned = !this.Instance._userPanned}); // prettier-ignore
-    public static SetServerVersion  = (version:string) =>runInAction(() => {this.Instance._serverVersion = version}); // prettier-ignore
-    public static SetLastPressedBtn = (id:string)      =>runInAction(() => {this.Instance._lastBtnId = id}); // prettier-ignore
-    public static SetPropertiesWidth= (wid:number)     =>runInAction(() => {this.Instance._propertyWid = wid}); // prettier-ignore
-    public static SetPrintToConsole = (state:boolean)  =>runInAction(() => {this.Instance._printToConsole = state}); // prettier-ignore
-    public static SetHideDecorations= (state:boolean)  =>runInAction(() => {this.Instance._hideDecorations = state}); // prettier-ignore
-    public static SetKeepGestureMode= (state:boolean)  =>runInAction(() => {this.Instance._keepGestureMode = state}); // prettier-ignore
-    public static SetInkShape       = (shape?:Gestures)=>runInAction(() => {this.Instance._inkShape = shape}); // prettier-ignore
-    public static SetChatVisible    = (vis:boolean)    =>runInAction(() => {this.Instance._chatVisible = vis}); // prettier-ignore
+    public static SetUserBackgroundColor = action((color: string) => (this.Instance._userBackgroundColor = color)); // prettier-ignore
+    public static SetUserVariantColor    = action((color: string) => (this.Instance._userVariantColor = color)); // prettier-ignore
+    public static SetUserColor           = action((color: string) => (this.Instance._userColor = color)); // prettier-ignore
+    public static SetLongPress           = action((press: boolean)=> (this.Instance._longPress = press)); // prettier-ignore
+    public static SetShiftKey            = action((down: boolean) => (this.Instance._shiftKey = down)); // prettier-ignore
+    public static SetCtrlKey             = action((down: boolean) => (this.Instance._ctrlKey = down)); // prettier-ignore
+    public static SetMetaKey             = action((down: boolean) => (this.Instance._metaKey = down)); // prettier-ignore
+    public static SetHideUI              = action((vis: boolean)  => (this.Instance._hideUI = vis)); // prettier-ignore
+    public static SetShowPresPaths       = action((paths:boolean) => (this.Instance._showPresPaths = paths)); // prettier-ignore
+    public static SetIsLinkFollowing     = action((follow:boolean)=> (this.Instance._isLinkFollowing = follow)); // prettier-ignore
+    public static SetIsDragging          = action((drag: boolean) => (this.Instance._isDragging = drag)); // prettier-ignore
+    public static SetIsResizing          = action((docid?:string) => (this.Instance._isResizing = docid)); // prettier-ignore
+    public static SetCanEmbed            = action((embed:boolean) => (this.Instance._canEmbed = embed)); // prettier-ignore
+    public static SetExploreMode         = action((state:boolean) => (this.Instance._exploreMode = state)); // prettier-ignore
+    public static TriggerUserPanned      = action(()              => (this.Instance._userPanned = !this.Instance._userPanned)); // prettier-ignore
+    public static SetServerVersion       = action((version:string)=> (this.Instance._serverVersion = version)); // prettier-ignore
+    public static SetLastPressedBtn      = action((id:string)     => (this.Instance._lastBtnId = id)); // prettier-ignore
+    public static SetPropertiesWidth     = action((wid:number)    => (this.Instance._propertyWid = wid)); // prettier-ignore
+    public static SetPrintToConsole      = action((state:boolean) => (this.Instance._printToConsole = state)); // prettier-ignore
+    public static SetHideDecorations     = action((state:boolean) => (this.Instance._hideDecorations = state)); // prettier-ignore
+    public static SetKeepGestureMode     = action((state:boolean) => (this.Instance._keepGestureMode = state)); // prettier-ignore
+    public static SetInkShape            = action((shape?:Gestures)=>(this.Instance._inkShape = shape)); // prettier-ignore
+    public static SetChatVisible         = action((vis:boolean)   => (this.Instance._chatVisible = vis)); // prettier-ignore
 
-    public static userColor: string | undefined;
-    public static userVariantColor: string | undefined;
-    public static userBackgroundColor: string | undefined;
     public static SettingsStyle: CSSStyleSheet | null;
 }