From fd50258f99cd606f672e4c5d93cf1041a518518a Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Tue, 4 Jul 2023 01:44:54 -0700
Subject: [PATCH] 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 | 12 +++++++++
 components/raids/RaidItem/index.tsx         | 27 ++++++++++++++++++++-
 styles/themes.scss                          |  8 ++++++
 styles/variables.scss                       |  7 ++++++
 4 files changed, 53 insertions(+), 1 deletion(-)

diff --git a/components/raids/RaidItem/index.module.scss b/components/raids/RaidItem/index.module.scss
index d89484c5..e5cc7b6a 100644
--- a/components/raids/RaidItem/index.module.scss
+++ b/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 {
diff --git a/components/raids/RaidItem/index.tsx b/components/raids/RaidItem/index.tsx
index d43f4266..3e79bc05 100644
--- a/components/raids/RaidItem/index.tsx
+++ b/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>
diff --git a/styles/themes.scss b/styles/themes.scss
index cf1441dc..4edee375 100644
--- a/styles/themes.scss
+++ b/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};
diff --git a/styles/variables.scss b/styles/variables.scss
index 099e48b5..fa7f7242 100644
--- a/styles/variables.scss
+++ b/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;