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

1 files changed, 17 insertions, 11 deletions

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"