From f699d867e549c5e04a3ad7e3fe9f88c0bd6e44bf Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Tue, 2 Feb 2021 16:45:28 -0800
Subject: [PATCH] Disable species picker for species-specific items

---
 src/app/ItemPage.js                      |  1 +
 src/app/components/SpeciesColorPicker.js | 10 +++++++++-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/app/ItemPage.js b/src/app/ItemPage.js
index 2006171..cbf7668 100644
--- a/src/app/ItemPage.js
+++ b/src/app/ItemPage.js
@@ -690,6 +690,7 @@ function ItemPageOutfitPreview({ itemId }) {
                 appearanceId: null,
               });
             }}
+            speciesIsDisabled={isProbablySpeciesSpecific}
             size="sm"
             showPlaceholders
             // This is just a UX affordance: while we could handle invalid states
diff --git a/src/app/components/SpeciesColorPicker.js b/src/app/components/SpeciesColorPicker.js
index cfe8fee..9bf801a 100644
--- a/src/app/components/SpeciesColorPicker.js
+++ b/src/app/components/SpeciesColorPicker.js
@@ -25,6 +25,7 @@ function SpeciesColorPicker({
   speciesPlaceholderText = "",
   stateMustAlwaysBeValid = false,
   isDisabled = false,
+  speciesIsDisabled = false,
   size = "md",
   onChange,
 }) {
@@ -217,7 +218,14 @@ function SpeciesColorPicker({
         // We also wait for the valid pairs before enabling, so users can't
         // trigger change events we're not ready for.
         isLoading={allSpecies.length === 0 || loadingValids}
-        isDisabled={isDisabled}
+        isDisabled={isDisabled || speciesIsDisabled}
+        // Don't fade out in the speciesIsDisabled case; it's more like a
+        // read-only state.
+        _disabled={
+          speciesIsDisabled
+            ? { opacity: "1", cursor: "not-allowed" }
+            : undefined
+        }
         onChange={onChangeSpecies}
         size={size}
         valids={valids}