From 29a1fe16297c99ddbed7974b7c602294da9a311d Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Tue, 25 Mar 2025 22:40:30 -0400
Subject: fixes to components so that things highlight reasonably in different
 skins.  fixed color picker alternate selection.

---
 src/client/util/CalendarManager.tsx                |  2 +-
 src/client/util/GroupManager.tsx                   | 14 +++---
 src/client/util/SettingsManager.tsx                | 28 ++++++-----
 src/client/util/SharingManager.tsx                 |  4 +-
 src/client/util/SnappingManager.ts                 | 54 ++++++++++++----------
 src/client/views/StyleProvider.tsx                 |  4 +-
 src/client/views/collections/CollectionMenu.tsx    | 11 ++---
 src/client/views/nodes/FontIconBox/FontIconBox.tsx | 36 ++++++++-------
 src/client/views/pdf/GPTPopup/GPTPopup.scss        |  4 +-
 src/client/views/pdf/GPTPopup/GPTPopup.tsx         | 46 ++++++++++--------
 src/client/views/topbar/TopBar.tsx                 | 23 +++++----
 11 files changed, 129 insertions(+), 97 deletions(-)

(limited to 'src')

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;
 }
diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx
index 331ee1707..e25227c00 100644
--- a/src/client/views/StyleProvider.tsx
+++ b/src/client/views/StyleProvider.tsx
@@ -108,8 +108,6 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps &
         LayoutTemplateString,
         disableBrushing,
         NativeDimScaling,
-        PanelWidth,
-        PanelHeight,
         isSelected,
         isHovering,
     } = props || {}; // extract props that are not shared between fieldView and documentView props.
@@ -259,7 +257,7 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps &
             switch (layoutDoc?.type) {
                 case DocumentType.PRESELEMENT: docColor = docColor || ""; break;
                 case DocumentType.PRES:        docColor = docColor || 'transparent'; break;
-                case DocumentType.FONTICON:    docColor = boxBackground ? undefined : docColor || Colors.DARK_GRAY; break;
+                case DocumentType.FONTICON:    docColor = boxBackground ? undefined : docColor || SnappingManager.userBackgroundColor; break;
                 case DocumentType.RTF:         docColor = docColor || StrCast(Doc.UserDoc().textBackgroundColor, Colors.LIGHT_GRAY); break;
                 case DocumentType.LINK:        docColor = (isAnchor ? docColor : undefined); break;
                 case DocumentType.INK:         docColor = doc?.stroke_isInkMask ? 'rgba(0,0,0,0.7)' : undefined; break;
diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx
index c79610595..1576a8e4a 100644
--- a/src/client/views/collections/CollectionMenu.tsx
+++ b/src/client/views/collections/CollectionMenu.tsx
@@ -23,6 +23,7 @@ import { DefaultStyleProvider, returnEmptyDocViewList } from '../StyleProvider';
 import { DocumentView, DocumentViewInternal } from '../nodes/DocumentView';
 import './CollectionMenu.scss';
 import { CollectionLinearView } from './collectionLinear';
+import { SettingsManager } from '../../util/SettingsManager';
 
 interface CollectionMenuProps {
     panelHeight: () => number;
@@ -118,7 +119,7 @@ export class CollectionMenu extends AntimodeMenu<CollectionMenuProps> {
             <div className="hardCodedButtons">
                 <Toggle
                     toggleType={ToggleType.BUTTON}
-                    type={Type.PRIM}
+                    type={Type.TERT}
                     color={SnappingManager.userColor}
                     onClick={this.props.toggleTopBar}
                     toggleStatus={this.props.topBarHeight() > 0}
@@ -127,7 +128,7 @@ export class CollectionMenu extends AntimodeMenu<CollectionMenuProps> {
                 />
                 <Toggle
                     toggleType={ToggleType.BUTTON}
-                    type={Type.PRIM}
+                    type={Type.TERT}
                     color={SnappingManager.userColor}
                     onClick={this._props.togglePropertiesFlyout}
                     toggleStatus={SnappingManager.PropertiesWidth > 0}
@@ -138,19 +139,17 @@ export class CollectionMenu extends AntimodeMenu<CollectionMenuProps> {
         );
 
         // dash col linear view buttons
-        const contMenuButtons = (
+        return (
             <div
                 className="collectionMenu-container"
                 style={{
-                    background: SnappingManager.userBackgroundColor,
+                    background: SettingsManager.userBackgroundColor,
                     // borderColor: SettingsManager.userColor
                 }}>
                 {this.contMenuButtons}
                 {hardCodedButtons}
             </div>
         );
-
-        return contMenuButtons;
     }
 }
 
diff --git a/src/client/views/nodes/FontIconBox/FontIconBox.tsx b/src/client/views/nodes/FontIconBox/FontIconBox.tsx
index f699568f1..966d8d7a0 100644
--- a/src/client/views/nodes/FontIconBox/FontIconBox.tsx
+++ b/src/client/views/nodes/FontIconBox/FontIconBox.tsx
@@ -4,7 +4,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { action, computed, makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { ClientUtils, DashColor, returnFalse, returnTrue, setupMoveUpEvents } from '../../../../ClientUtils';
+import { ClientUtils, returnFalse, returnTrue, setupMoveUpEvents } from '../../../../ClientUtils';
 import { Doc, DocListCast, StrListCast } from '../../../../fields/Doc';
 import { InkTool } from '../../../../fields/InkField';
 import { ScriptField } from '../../../../fields/ScriptField';
@@ -134,7 +134,7 @@ export class FontIconBox extends ViewBoxBaseComponent<ButtonProps>() {
                 min={NumCast(this.dataDoc.numBtnMin, 0)}
                 max={NumCast(this.dataDoc.numBtnMax, 100)}
                 number={checkResult}
-                size={Size.XSMALL}
+                size={Size.XXSMALL}
                 setNumber={undoable(value => numScript(value), `${this.Document.title} button set from list`)}
                 fillWidth
             />
@@ -252,7 +252,9 @@ export class FontIconBox extends ViewBoxBaseComponent<ButtonProps>() {
      * Color button
      */
     @computed get colorButton() {
-        const color = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Color) as string;
+        const color = SnappingManager.userColor;
+        const pickedColor = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Color) as string;
+        const background = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BackgroundColor) as string;
         const curColor = (this.colorScript?.script.run({ this: this.Document, value: undefined, _readOnly_: true }).result as string) ?? 'transparent';
         const tooltip: string = StrCast(this.Document.toolTip);
 
@@ -270,10 +272,10 @@ export class FontIconBox extends ViewBoxBaseComponent<ButtonProps>() {
                     }}
                     defaultPickerType="Classic"
                     selectedColor={curColor}
-                    type={Type.PRIM}
+                    type={Type.TERT}
                     color={color}
-                    background={SnappingManager.userBackgroundColor}
-                    icon={this.Icon(color) ?? undefined}
+                    background={background}
+                    icon={this.Icon(pickedColor) ?? undefined}
                     tooltip={tooltip}
                     label={this.label}
                 />
@@ -287,15 +289,16 @@ export class FontIconBox extends ViewBoxBaseComponent<ButtonProps>() {
         const toggleStatus = script?.run({ this: this.Document, value: undefined, _readOnly_: true }).result as boolean;
 
         const color = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Color) as string;
+        const background = this._props.styleProvider?.(this.Document, this._props, StyleProp.BackgroundColor) as string;
         const items = DocListCast(this.dataDoc.data);
         const selectedItems = items.filter(itemDoc => ScriptCast(itemDoc.onClick).script.run({ this: itemDoc, value: undefined, _readOnly_: true }).result).map(item => StrCast(item.toolType));
 
         return (
             <MultiToggle
                 tooltip={`Click to Toggle ${tooltip} or select new option`}
-                type={Type.PRIM}
+                type={Type.TERT}
                 color={color}
-                background={undefined}
+                background={background}
                 multiSelect={true}
                 onPointerDown={e => script && !toggleStatus && setupMoveUpEvents(this, e, returnFalse, emptyFunction, () => script.run({ this: this.Document, value: undefined, _readOnly_: false }))}
                 isToggle={false}
@@ -339,11 +342,12 @@ export class FontIconBox extends ViewBoxBaseComponent<ButtonProps>() {
             <Toggle
                 tooltip={`Toggle ${tooltip}`}
                 toggleType={ToggleType.BUTTON}
-                type={inkShapeHack ? Type.TERT : Type.PRIM}
+                type={Type.TERT}
                 toggleStatus={toggleStatus}
                 text={buttonText}
                 color={color}
-                background={inkShapeHack ? DashColor(SnappingManager.userBackgroundColor).darken(0.05).toString() : undefined}
+                triState={inkShapeHack}
+                background={color}
                 icon={this.Icon(color)!}
                 label={this.label}
                 onPointerDown={e =>
@@ -404,12 +408,12 @@ export class FontIconBox extends ViewBoxBaseComponent<ButtonProps>() {
             case ButtonType.ColorButton:        return this.colorButton; 
             case ButtonType.MultiToggleButton:  return this.multiToggleButton;
             case ButtonType.ToggleButton:       return this.toggleButton;
-            case ButtonType.ClickButton:return <IconButton {...btnProps} size={Size.MEDIUM} color={color} />;
-            case ButtonType.ToolButton: return <IconButton {...btnProps} size={Size.LARGE} color={color} />;
-            case ButtonType.TextButton: return <Button     {...btnProps} color={color} 
-                        background={SnappingManager.userBackgroundColor} text={StrCast(this.dataDoc.buttonText)}/>;
-            case ButtonType.MenuButton: return <IconButton {...btnProps} color={color} 
-                        background={SnappingManager.userBackgroundColor} size={Size.LARGE} tooltipPlacement='right' onPointerDown={scriptFunc} />; 
+            case ButtonType.ClickButton:        return <IconButton {...btnProps} size={Size.MEDIUM} color={color} background={color} />;
+            case ButtonType.ToolButton:         return <IconButton {...btnProps} size={Size.LARGE}  color={color} background={color} />;
+            case ButtonType.TextButton:         return <Button     {...btnProps}                    color={color} background={color} 
+                                                                   text={StrCast(this.dataDoc.buttonText)}/>;
+            case ButtonType.MenuButton:         return <IconButton size={Size.LARGE}  {...btnProps} color={color} background={color} 
+                                                                   tooltipPlacement='right' onPointerDown={scriptFunc} />; 
             default: 
         }
         return this.defaultButton;
diff --git a/src/client/views/pdf/GPTPopup/GPTPopup.scss b/src/client/views/pdf/GPTPopup/GPTPopup.scss
index 18441f76e..bb43291ee 100644
--- a/src/client/views/pdf/GPTPopup/GPTPopup.scss
+++ b/src/client/views/pdf/GPTPopup/GPTPopup.scss
@@ -9,6 +9,8 @@ $headingHeight: 32px;
 
 .gptPopup-summary-box {
     position: fixed;
+    padding-left: 10px;
+    padding-right: 10px;
     top: 115px;
     left: 75px;
     width: 100%;
@@ -48,7 +50,6 @@ $headingHeight: 32px;
     }
 
     label {
-        color: $textgrey;
         font-size: 12px;
         font-weight: 400;
         letter-spacing: 1px;
@@ -73,7 +74,6 @@ $headingHeight: 32px;
         justify-content: center;
         align-items: center;
         height: $inputHeight;
-        background-color: white;
         width: 100%;
         pointer-events: all;
 
diff --git a/src/client/views/pdf/GPTPopup/GPTPopup.tsx b/src/client/views/pdf/GPTPopup/GPTPopup.tsx
index 67213382d..e3ee51424 100644
--- a/src/client/views/pdf/GPTPopup/GPTPopup.tsx
+++ b/src/client/views/pdf/GPTPopup/GPTPopup.tsx
@@ -411,7 +411,8 @@ export class GPTPopup extends ObservableReactComponent<object> {
                 tooltip="Ask Firefly to create images"
                 text="Ask Firefly"
                 onClick={() => this.setMode(GPTPopupMode.FIREFLY)}
-                color={StrCast(Doc.UserDoc().userVariantColor)}
+                color={SettingsManager.userColor}
+                background={SettingsManager.userVariantColor}
                 type={Type.TERT}
                 style={{
                     width: '100%',
@@ -426,7 +427,8 @@ export class GPTPopup extends ObservableReactComponent<object> {
                 tooltip="Ask GPT to sort, tag, define, or filter your Docs!"
                 text="Ask GPT"
                 onClick={() => this.setMode(GPTPopupMode.USER_PROMPT)}
-                color={StrCast(Doc.UserDoc().userVariantColor)}
+                color={SettingsManager.userColor}
+                background={SettingsManager.userVariantColor}
                 type={Type.TERT}
                 style={{
                     width: '100%',
@@ -445,7 +447,8 @@ export class GPTPopup extends ObservableReactComponent<object> {
                     this.setMode(GPTPopupMode.QUIZ_RESPONSE);
                     this.onQuizRandom?.();
                 }}
-                color={StrCast(Doc.UserDoc().userVariantColor)}
+                color={SettingsManager.userColor}
+                background={SettingsManager.userVariantColor}
                 type={Type.TERT}
                 style={{
                     width: '100%',
@@ -517,6 +520,7 @@ export class GPTPopup extends ObservableReactComponent<object> {
                     onChange={e => onChange(e.target.value)}
                     onKeyDown={e => this.handleKeyPress(e, this._mode)}
                     type="text"
+                    style={{ color: SnappingManager.userColor }}
                     placeholder={placeholder}
                 />
                 <Button //
@@ -524,7 +528,8 @@ export class GPTPopup extends ObservableReactComponent<object> {
                     type={Type.TERT}
                     icon={<AiOutlineSend />}
                     iconPlacement="right"
-                    color={SnappingManager.userVariantColor}
+                    color={SettingsManager.userColor}
+                    background={SettingsManager.userVariantColor}
                     onClick={() => this.callGpt(this._mode)}
                 />
                 <DictationButton ref={r => (this._askDictation = r)} setInput={onChange} />
@@ -551,7 +556,7 @@ export class GPTPopup extends ObservableReactComponent<object> {
                             </div>
                         </div>
                         <div key={rawSrc[0] + i + 'btn'} className="btn-container">
-                            <Button text="Save Image" onClick={() => this.transferToImage(rawSrc[1])} color={StrCast(Doc.UserDoc().userColor)} type={Type.TERT} />
+                            <Button text="Save Image" onClick={() => this.transferToImage(rawSrc[1])} color={SettingsManager.userColor} background={SettingsManager.userVariantColor} type={Type.TERT} />
                         </div>
                     </>
                 ))}
@@ -561,7 +566,8 @@ export class GPTPopup extends ObservableReactComponent<object> {
                     tooltip="Generate Again"
                     onClick={() => this._imgTargetDoc && this.generateImage(this._imageDescription, this._imgTargetDoc, this._addToCollection)}
                     icon={<FontAwesomeIcon icon="redo-alt" size="lg" />}
-                    color={StrCast(Doc.UserDoc().userVariantColor)}
+                    color={SettingsManager.userColor}
+                    background={SettingsManager.userVariantColor}
                 />
             )}
         </div>
@@ -603,14 +609,16 @@ export class GPTPopup extends ObservableReactComponent<object> {
                                         tooltip="Show originally selected text" //
                                         text="Selection"
                                         onClick={action(() => (this._showOriginal = true))}
-                                        color={StrCast(SettingsManager.userVariantColor)}
+                                        color={SettingsManager.userColor}
+                                        background={SettingsManager.userVariantColor}
                                         type={Type.TERT}
                                     />
                                     <Button
                                         tooltip="Create a text Doc with this text and link to the text selection" //
                                         text="Transfer To Text"
                                         onClick={this.transferToText}
-                                        color={StrCast(SettingsManager.userVariantColor)}
+                                        color={SettingsManager.userColor}
+                                        background={SettingsManager.userVariantColor}
                                         type={Type.TERT}
                                     />
                                 </>
@@ -627,14 +635,16 @@ export class GPTPopup extends ObservableReactComponent<object> {
                                             }
                                             this.generateSummary(this._aiReferenceText);
                                         })}
-                                        color={StrCast(SettingsManager.userVariantColor)}
+                                        color={SettingsManager.userColor}
+                                        background={SettingsManager.userVariantColor}
                                         type={Type.TERT}
                                     />
                                     <Button
                                         tooltip="Create Flashcards" //
                                         text="Create Flashcards"
                                         onClick={this.createFlashcards}
-                                        color={StrCast(SettingsManager.userVariantColor)}
+                                        color={SettingsManager.userColor}
+                                        background={SettingsManager.userVariantColor}
                                         type={Type.TERT}
                                     />
                                 </>
@@ -644,7 +654,7 @@ export class GPTPopup extends ObservableReactComponent<object> {
                         <div className="summarizing">
                             <span>{this._showOriginal ? 'Creating Cards...' : 'Summarizing'}</span>
                             <ReactLoading type="bubbles" color="#bcbcbc" width={20} height={20} />
-                            <Button text="Stop Animation" onClick={() => this.setStopAnimatingResponse(true)} color={StrCast(SettingsManager.userVariantColor)} type={Type.TERT} />
+                            <Button text="Stop Animation" onClick={() => this.setStopAnimatingResponse(true)} color={SettingsManager.userColor} background={SettingsManager.userVariantColor} type={Type.TERT} />
                         </div>
                     )}
                 </div>
@@ -689,19 +699,19 @@ export class GPTPopup extends ObservableReactComponent<object> {
                                 placeholder="Ask GPT a question about the data..."
                                 id="search-input"
                                 className="searchBox-input"
-                                style={{ width: '100%' }}
+                                style={{ width: '100%', color: SnappingManager.userColor }}
                             />
                         ) : (
                             <>
-                                <Button tooltip="Transfer to text" text="Transfer To Text" onClick={this.transferToText} color={StrCast(SnappingManager.userVariantColor)} type={Type.TERT} />
-                                <Button tooltip="Chat with AI" text="Chat with AI" onClick={() => this.setChatEnabled(true)} color={StrCast(SnappingManager.userVariantColor)} type={Type.TERT} />
+                                <Button tooltip="Transfer to text" text="Transfer To Text" onClick={this.transferToText} color={SettingsManager.userColor} background={SettingsManager.userVariantColor} type={Type.TERT} />
+                                <Button tooltip="Chat with AI" text="Chat with AI" onClick={() => this.setChatEnabled(true)} color={SettingsManager.userColor} background={SettingsManager.userVariantColor} type={Type.TERT} />
                             </>
                         )
                     ) : (
                         <div className="summarizing">
                             <span>Summarizing</span>
                             <ReactLoading type="bubbles" color="#bcbcbc" width={20} height={20} />
-                            <Button text="Stop Animation" onClick={() => this.setStopAnimatingResponse(true)} color={StrCast(SnappingManager.userVariantColor)} type={Type.TERT} />
+                            <Button text="Stop Animation" onClick={() => this.setStopAnimatingResponse(true)} color={SettingsManager.userColor} background={SettingsManager.userVariantColor} type={Type.TERT} />
                         </div>
                     )}
                 </div>
@@ -718,7 +728,7 @@ export class GPTPopup extends ObservableReactComponent<object> {
         );
 
     heading = (headingText: string) => (
-        <div className="summary-heading">
+        <div className="summary-heading" style={{ color: SnappingManager.userBackgroundColor }}>
             <label className="summary-text">{headingText}</label>
             {this._gptProcessing ? (
                 <ReactLoading type="spin" color="#bcbcbc" width={14} height={14} />
@@ -734,7 +744,7 @@ export class GPTPopup extends ObservableReactComponent<object> {
                         onClick={() => this._collectionContext && Doc.setDocFilter(this._collectionContext, 'tags', GPTPopup.ChatTag, 'remove')}
                     />
                     {[GPTPopupMode.USER_PROMPT, GPTPopupMode.QUIZ_RESPONSE, GPTPopupMode.FIREFLY].includes(this._mode) && (
-                        <IconButton color={StrCast(SettingsManager.userVariantColor)} tooltip="back" icon={<CgCornerUpLeft size="16px" />} onClick={() => (this._mode = GPTPopupMode.GPT_MENU)} />
+                        <IconButton color={SettingsManager.userVariantColor} background={SettingsManager.userColor} tooltip="back" icon={<CgCornerUpLeft size="16px" />} onClick={() => (this._mode = GPTPopupMode.GPT_MENU)} />
                     )}
                 </>
             )}
@@ -743,7 +753,7 @@ export class GPTPopup extends ObservableReactComponent<object> {
 
     render() {
         return (
-            <div className="gptPopup-summary-box" style={{ display: SnappingManager.ChatVisible ? 'flex' : 'none', overflow: 'auto' }}>
+            <div className="gptPopup-summary-box" style={{ background: SnappingManager.userColor, color: SnappingManager.userBackgroundColor, display: SnappingManager.ChatVisible ? 'flex' : 'none', overflow: 'auto' }}>
                 {(() => {
                     //prettier-ignore
                     switch (this._mode) {
diff --git a/src/client/views/topbar/TopBar.tsx b/src/client/views/topbar/TopBar.tsx
index 00114a3f9..18e30b3c2 100644
--- a/src/client/views/topbar/TopBar.tsx
+++ b/src/client/views/topbar/TopBar.tsx
@@ -59,7 +59,7 @@ export class TopBar extends ObservableReactComponent<object> {
         return SettingsManager.userVariantColor;
     }
     @computed get backgroundColor() {
-        return PingManager.Instance.IsBeating ? SettingsManager.userBackgroundColor : Colors.MEDIUM_GRAY;
+        return SettingsManager.userBackgroundColor;
     }
 
     @observable happyHeart: boolean = PingManager.Instance.IsBeating;
@@ -86,6 +86,7 @@ export class TopBar extends ObservableReactComponent<object> {
                         onClick={this.navigateToHome}
                         icon={<FontAwesomeIcon icon={DocListCast(Doc.MySharedDocs.data_dashboards).some(dash => !DocListCast(Doc.MySharedDocs.viewed).includes(dash)) ? 'portrait' : 'home'} />}
                         color={this.color}
+                        background={this.backgroundColor}
                     />
                 ) : (
                     <div className="logo-container">
@@ -166,6 +167,7 @@ export class TopBar extends ObservableReactComponent<object> {
                     tooltip="Open Dashboards"
                     size={Size.SMALL}
                     color={this.color}
+                    background={this.backgroundColor}
                     style={{ fontWeight: 700, fontSize: '1rem' }}
                     onClick={(e: React.MouseEvent) => {
                         const dashView = Doc.ActiveDashboard && DocumentView.getDocumentView(Doc.ActiveDashboard);
@@ -191,22 +193,27 @@ export class TopBar extends ObservableReactComponent<object> {
                         type={Type.TERT}
                         color={SettingsManager.userColor}
                         background={this.variantColor}
-                        onClick={() => {
-                            SharingManager.Instance.open(undefined, Doc.ActiveDashboard);
-                        }}
+                        onClick={() => SharingManager.Instance.open(undefined, Doc.ActiveDashboard)}
                     />
                 ) : null}
-                <IconButton tooltip="Issue Reporter ⌘I" size={Size.SMALL} color={this.color} onClick={ReportManager.Instance.open} icon={<FaBug />} />
+                <IconButton tooltip="Issue Reporter ⌘I" size={Size.SMALL} color={this.color} background={this.backgroundColor} onClick={ReportManager.Instance.open} icon={<FaBug />} />
                 <Flip key={this._flipDocumentation}>
-                    <IconButton tooltip="Documentation ⌘D" size={Size.SMALL} color={this.color} onClick={() => window.open('https://brown-dash.github.io/Dash-Documentation/', '_blank')} icon={<FontAwesomeIcon icon="question-circle" />} />
+                    <IconButton
+                        tooltip="Documentation ⌘D"
+                        size={Size.SMALL}
+                        color={this.color}
+                        background={this.backgroundColor}
+                        onClick={() => window.open('https://brown-dash.github.io/Dash-Documentation/', '_blank')}
+                        icon={<FontAwesomeIcon icon="question-circle" />}
+                    />
                 </Flip>
-                <IconButton tooltip="Settings ⌘⇧S" size={Size.SMALL} color={this.color} onClick={SettingsManager.Instance.openMgr} icon={<FontAwesomeIcon icon="cog" />} />
+                <IconButton tooltip="Settings ⌘⇧S" size={Size.SMALL} color={this.color} background={this.backgroundColor} onClick={SettingsManager.Instance.openMgr} icon={<FontAwesomeIcon icon="cog" />} />
                 <IconButton
                     size={Size.SMALL}
                     onClick={ServerStats.Instance.open}
-                    type={Type.TERT}
                     tooltip={'Server is ' + (PingManager.Instance.IsBeating ? '' : 'NOT ') + 'running ' + (upToDate ? DashVersion : 'out of date version:' + DashVersion)}
                     color={this.happyHeart ? (upToDate ? Colors.LIGHT_BLUE : Colors.YELLOW) : Colors.ERROR_RED}
+                    background={PingManager.Instance.IsBeating ? SettingsManager.userBackgroundColor : Colors.MEDIUM_GRAY}
                     icon={<FontAwesomeIcon icon={this.happyHeart ? 'heart' : 'heart-broken'} />}
                 />
                 {/* <Button text={'Logout'} borderRadius={5} hoverStyle={'gray'} backgroundColor={Colors.DARK_GRAY} color={this.color} fontSize={FontSize.SECONDARY} onClick={() => window.location.assign(Utils.prepend('/logout'))} /> */}
-- 
cgit v1.2.3-70-g09d2