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}