From ae9ec0179e556f44bb9404f319d326321e73cb1f Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Sun, 27 Aug 2023 22:15:27 -0400
Subject: fixed coloring of Select box in properties view for filters

---
 src/client/views/FilterPanel.tsx | 37 ++++++++++++++++++++++++++++++++++++-
 1 file changed, 36 insertions(+), 1 deletion(-)

(limited to 'src')

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"> 
-- 
cgit v1.2.3-70-g09d2