Fix select trigger styles

components/FilterBar/index.scss

@@ -78,7 +78,6 @@
     // background-position-x: 95%;
     // background-size: $unit * 1.5;
     background-color: var(--select-contained-bg);
-    color: $grey-55;
     font-size: $font-small;
     margin: 0;
     max-width: 200px;

components/common/Select/index.scss

@@ -21,9 +21,9 @@
 
   &:hover {
     background-color: var(--input-bg-hover);
-    color: var(--text-primary);
     cursor: pointer;
 
+    span:not(.SelectIcon),
     &[data-placeholder] > span:not(.SelectIcon) {
       color: var(--text-primary);
     }
@@ -70,6 +70,10 @@
       fill: var(--icon-secondary);
     }
   }
+
+  span:not(.SelectIcon) {
+    color: var(--text-secondary);
+  }
 }
 
 .Select {

components/raids/RaidCombobox/index.scss

@@ -185,7 +185,7 @@
   }
 }
 
-.SelectTrigger.Raid .Value.Empty {
+.SelectTrigger.Raid:not(.Highlighted) .Value.Empty {
   color: var(--text-tertiary);
 }
 

components/raids/RaidCombobox/index.tsx

@@ -542,10 +542,15 @@ const RaidCombobox = (props: Props) => {
       className="Flush"
       open={open}
       onOpenChange={toggleOpen}
-      trigger={{ className: 'Raid' }}
       placeholder={
         props.showAllRaidsOption ? t('raids.all') : t('raids.placeholder')
       }
+      trigger={{
+        className: classNames({
+          Raid: true,
+          Highlighted: props.showAllRaidsOption,
+        }),
+      }}
       triggerTabIndex={props.tabIndex}
       value={renderTriggerContent()}
     >