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/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 +++++++----
 6 files changed, 71 insertions(+), 53 deletions(-)

(limited to 'src/client/views')

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