fixed coloring of Select box in properties view for filters

1 files changed, 36 insertions, 1 deletions

diff --git a/src/client/views/FilterPanel.tsx b/src/client/views/FilterPanel.tsx
index b61ff35c7..0d4f4df5a 100644
--- a/src/client/views/FilterPanel.tsx
+++ b/src/client/views/FilterPanel.tsx
@@ -15,6 +15,7 @@ import { undoable } from '../util/UndoManager';
 import './FilterPanel.scss';
 import { FieldView } from './nodes/FieldView';
 import { Handle, Tick, TooltipRail, Track } from './nodes/SliderBox-components';
+import { SettingsManager } from '../util/SettingsManager';
 
 interface filterProps {
     rootDoc: Doc;
@@ -278,7 +279,41 @@ export class FilterPanel extends React.Component<filterProps> {
             <div className="filterBox-treeView">
                 <div className="filterBox-select">
                     <div style={{ width: '100%' }}>
-                        <Select placeholder="Add a filter..." options={options} isMulti={false} onChange={val => this.facetClick((val as UserOptions).value)} onKeyDown={e => e.stopPropagation()} value={null} closeMenuOnSelect={true} />
+                        <Select
+                            styles={{
+                                control: (baseStyles, state) => ({
+                                    ...baseStyles,
+                                    color: SettingsManager.userColor,
+                                    background: SettingsManager.userBackgroundColor,
+                                }),
+                                placeholder: (baseStyles, state) => ({
+                                    ...baseStyles,
+                                    color: SettingsManager.userColor,
+                                    background: SettingsManager.userBackgroundColor,
+                                }),
+                                input: (baseStyles, state) => ({
+                                    ...baseStyles,
+                                    color: SettingsManager.userColor,
+                                    background: SettingsManager.userBackgroundColor,
+                                }),
+                                option: (baseStyles, state) => ({
+                                    ...baseStyles,
+                                    color: SettingsManager.userColor,
+                                    background: !state.isFocused ? SettingsManager.userBackgroundColor : SettingsManager.userVariantColor,
+                                }),
+                                menuList: (baseStyles, state) => ({
+                                    ...baseStyles,
+                                    backgroundColor: SettingsManager.userBackgroundColor,
+                                }),
+                            }}
+                            placeholder="Add a filter..."
+                            options={options}
+                            isMulti={false}
+                            onChange={val => this.facetClick((val as UserOptions).value)}
+                            onKeyDown={e => e.stopPropagation()}
+                            value={null}
+                            closeMenuOnSelect={true}
+                        />
                     </div>
                     {/* THE FOLLOWING CODE SHOULD BE DEVELOPER FOR BOOLEAN EXPRESSION (AND / OR) */}
                     {/* <div className="filterBox-select-bool">