From b06149cf220fe06042ca2acd0df720dacf1eb87c Mon Sep 17 00:00:00 2001
From: Emi Matchu <emi@matchu.dev>
Date: Thu, 1 Feb 2024 05:43:33 -0800
Subject: [PATCH] Make the "Incompatible" explainer more specific for Alt
 Styles

For Alt Style outfits, it's useful to call special attention to the Alt
Style feature as the likely cause of incompatibilities.

(Incompatibilities previously were most often caused by choosing a
species-specific item, then switching to another species. We generally
make it hard to enter this state, by hiding incompatible items during
search.)
---
 app/javascript/wardrobe-2020/WardrobePage/ItemsPanel.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/app/javascript/wardrobe-2020/WardrobePage/ItemsPanel.js b/app/javascript/wardrobe-2020/WardrobePage/ItemsPanel.js
index 856561e1..a8631188 100644
--- a/app/javascript/wardrobe-2020/WardrobePage/ItemsPanel.js
+++ b/app/javascript/wardrobe-2020/WardrobePage/ItemsPanel.js
@@ -58,7 +58,7 @@ import { useDeleteOutfitMutation } from "../loaders/outfits";
  * full width of the container, it doesn't look like it!
  */
 function ItemsPanel({ outfitState, outfitSaving, loading, dispatchToOutfit }) {
-  const { zonesAndItems, incompatibleItems } = outfitState;
+  const { altStyleId, zonesAndItems, incompatibleItems } = outfitState;
 
   return (
     <ClassNames>
@@ -98,7 +98,11 @@ function ItemsPanel({ outfitState, outfitSaving, loading, dispatchToOutfit }) {
                     zoneLabel="Incompatible"
                     afterHeader={
                       <Tooltip
-                        label="These items don't fit this pet"
+                        label={
+                          altStyleId != null
+                            ? "Many items don't fit Alt Style pets"
+                            : "These items don't fit this pet"
+                        }
                         placement="top"
                         openDelay={100}
                       >