Fix raid keyboard navigation

* We added a plain "raid" style that our keyboard navigation code can hook onto, so that you can navigate the RaidCombobox raid list with the up and down arrow keys
* Fixed the raid item background color when hovering or focused
* Removed unused code

components/raids/RaidCombobox/index.module.scss

@@ -214,21 +214,3 @@
 .raid.light {
   color: var(--light-text);
 }
-
-.SelectTrigger.Raid:not(.Highlighted) .Value.Empty {
-  color: var(--text-tertiary);
-}
-
-.Filters .SelectTrigger.Raid {
-  & > span {
-    overflow: hidden;
-  }
-
-  .Raid {
-    display: block;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-    width: 100%;
-  }
-}

components/raids/RaidCombobox/index.tsx

@@ -165,7 +165,7 @@ const RaidCombobox = (props: Props) => {
   const handleArrowKeyPressed = useCallback(
     (direction: 'Up' | 'Down') => {
       const current = listRef.current?.querySelector(
-        '.Raid:focus'
+        '.raid:focus'
       ) as HTMLElement | null
 
       if (current) {
@@ -174,11 +174,11 @@ const RaidCombobox = (props: Props) => {
         if (direction === 'Down' && !current.nextElementSibling) {
           const nextParent =
             current.parentElement?.parentElement?.nextElementSibling
-          next = nextParent?.querySelector('.Raid')
+          next = nextParent?.querySelector('.raid')
         } else if (direction === 'Up' && !current.previousElementSibling) {
           const previousParent =
             current.parentElement?.parentElement?.previousElementSibling
-          next = previousParent?.querySelector('.Raid:last-child')
+          next = previousParent?.querySelector('.raid:last-child')
         } else {
           next =
             direction === 'Up'
@@ -259,7 +259,7 @@ const RaidCombobox = (props: Props) => {
     else if (event.key === 'Enter') {
       event.preventDefault()
       if (listRef.current) {
-        const raid = listRef.current.querySelector('.Raid')
+        const raid = listRef.current.querySelector('.raid')
         if (raid) {
           ;(raid as HTMLElement).focus()
         }

components/raids/RaidItem/index.module.scss

@@ -10,7 +10,7 @@
 
   &:hover,
   &:focus {
-    background-color: var(--option-bg-hover);
+    background-color: var(--menu-bg-item-hover);
     color: var(--text-primary);
     cursor: pointer;
     outline: none;

components/raids/RaidItem/index.tsx

@@ -36,6 +36,7 @@ const RaidItem = React.forwardRef<HTMLDivElement, PropsWithChildren<Props>>(
     const { t } = useTranslation('common')
 
     const classes = classNames({
+      raid: true,
       [styles.item]: true,
     })