mod: use link color as searchable-dropdown's selected color

Odaimoko · Jul 12, 2024 · ade929c · ade929c
1 parent a1666da
commit ade929c
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 3 deletions.
diff --git a/src/ui/pure-react/style-def.tsx b/src/ui/pure-react/style-def.tsx
@@ -15,7 +15,7 @@ export const getStickyHeaderStyle = (zIndex = 1) => {
         background: varBackgroundSecondary,
     } as React.CSSProperties;
 }
-export const dropdownSelectedColor = "rgba(255,99,179,0.74)";
+export const dropdownSelectedColor = "var(--dropdown-selected)";
 export const varDropdownNonSelected = "var(--dropdown-non-selected)"
 export const centerChildren = {display: "flex", alignItems: "center"}
 export const centerChildrenVertStyle = {display: "flex", justifyContent: "center"}

diff --git a/src/ui/pure-react/view-template/searchable-dropdown.tsx b/src/ui/pure-react/view-template/searchable-dropdown.tsx
@@ -127,10 +127,11 @@ export const SearchableDropdown = (props: {
                 {filtered.map((option: OptionValueType) => {
                     const childId = `${dropdownId}_${option.name}`;
                     // @ts-ignore
-                    const has = !singleSelect ? props.currentOptionValues.includes(option) : false;
+                    const isSelected = !singleSelect ? props.currentOptionValues.includes(option) : false;
                     return (
                         <button className="dropdown-button"
-                                style={{background: has ? dropdownSelectedColor : varDropdownNonSelected}} id={childId}
+                                style={{background: isSelected ? dropdownSelectedColor : varDropdownNonSelected}}
+                                id={childId}
                                 onClick={(event) => {
                                     // console.log(event.target) // html element
                                     if (singleSelect) {

diff --git a/styles.css b/styles.css
@@ -20,5 +20,6 @@ If your plugin does not need CSS, delete this file.
 
 .dropdown-button {
     --dropdown-non-selected: none;
+    --dropdown-selected: var(--link-color);
     width: 100%;
 }