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

1 files changed, 8 insertions, 6 deletions

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>
         );