Add themed placeholder colors for raids

We don't have images for a lot of the new raid images. Here, we create themed placeholder colors and use those instead of images. The images can't react to the users theme as easily, so this is a better solution for now.

components/raids/RaidItem/index.module.scss

@@ -34,6 +34,14 @@
     height: auto;
   }
 
+  .placeholder {
+    aspect-ratio: 10 / 7;
+    background-color: var(--placeholder-bound-bg);
+    border-radius: $item-corner-small;
+    width: $unit-10x;
+    height: auto;
+  }
+
   &:hover {
     .extraIndicator {
       background: var(--extra-purple-secondary);
@@ -44,6 +52,10 @@
       background-color: var(--pill-bg-hover);
       color: var(--pill-text-hover);
     }
+
+    .placeholder {
+      background-color: var(--placeholder-bound-bg-hover);
+    }
   }
 
   &.selected .extraIndicator {

components/raids/RaidItem/index.tsx

@@ -18,6 +18,27 @@ interface Props extends ComponentProps<'div'> {
   onArrowKeyPressed?: (direction: 'Up' | 'Down') => void
   onEscapeKeyPressed?: () => void
 }
+
+const placeholderSlugs = [
+  'all',
+  'farming',
+  'three-gauge',
+  'five-gauge',
+  'ex-plus',
+  'nm90',
+  'nm95',
+  'nm100',
+  'nm150',
+  'nm200',
+  '1-star',
+  '2-star',
+  '3-star',
+  '4-star',
+  '5-star',
+  'db95',
+  'db135',
+  'db175',
+]
 const RaidItem = React.forwardRef<HTMLDivElement, PropsWithChildren<Props>>(
   function Item(
     {
@@ -69,7 +90,11 @@ const RaidItem = React.forwardRef<HTMLDivElement, PropsWithChildren<Props>>(
         onKeyDown={handleKeyDown}
         ref={forwardedRef}
       >
-        {icon && <img alt={icon.alt} src={icon.src} />}
+        {placeholderSlugs.includes(`${value}`) ? (
+          <div className={styles.placeholder} />
+        ) : (
+          icon && <img alt={icon.alt} src={icon.src} />
+        )}
         <span className={styles.text}>{children}</span>
         {selected && (
           <i className={styles.selected}>{t('combobox.selected')}</i>

styles/themes.scss

@@ -44,6 +44,10 @@
   --menu-bg-item-hover: #{$menu--item--bg--light--hover};
   --menu-text-hover: #{$menu--text--light--hover};
 
+  // Light - Placeholders
+  --placeholder-bound-bg: #{$placeholder--bound--bg--light};
+  --placeholder-bound-bg-hover: #{$placeholder--bound--bg--light--hover};
+
   // Light - Notices
   --notice-bg: #{$notice--bg--light};
   --notice-text: #{$notice--text--light};
@@ -217,6 +221,10 @@
   --menu-bg-item-hover: #{$menu--item--bg--dark--hover};
   --menu-text-hover: #{$menu--text--dark--hover};
 
+  // Dark - Placeholders
+  --placeholder-bound-bg: #{$placeholder--bound--bg--dark};
+  --placeholder-bound-bg-hover: #{$placeholder--bound--bg--dark--hover};
+
   // Dark - Notices
   --notice-bg: #{$notice--bg--dark};
   --notice-text: #{$notice--text--dark};

styles/variables.scss

@@ -196,6 +196,13 @@ $menu--item--bg--dark--hover: $grey-00;
 $menu--text--light--hover: $grey-100;
 $menu--text--dark--hover: $grey-15;
 
+// Color Definitions: Placeholders
+$placeholder--bound--bg--light: $grey-80;
+$placeholder--bound--bg--dark: $grey-30;
+
+$placeholder--bound--bg--light--hover: $grey-75;
+$placeholder--bound--bg--dark--hover: $grey-20;
+
 // Color Definitions: Notices
 $notice--bg--light: $accent--yellow--100;
 $notice--bg--dark: $accent--yellow--00;