app/javascript/wardrobe-2020/WardrobePage/ItemsPanel.js

@@ -77,22 +77,20 @@ function ItemsPanel({ outfitState, outfitSaving, loading, dispatchToOutfit }) {
                 itemCount={outfitState.allItemIds.length}
               />
             ) : (
-              <>
-                <TransitionGroup component={null}>
-                  {zonesAndItems.map(({ zoneId, zoneLabel, items }) => (
-                    <CSSTransition
-                      key={zoneId}
-                      {...fadeOutAndRollUpTransition(css)}
-                    >
-                      <ItemZoneGroup
-                        zoneLabel={zoneLabel}
-                        items={items}
-                        outfitState={outfitState}
-                        dispatchToOutfit={dispatchToOutfit}
-                      />
-                    </CSSTransition>
-                  ))}
-                </TransitionGroup>
+              <TransitionGroup component={null}>
+                {zonesAndItems.map(({ zoneId, zoneLabel, items }) => (
+                  <CSSTransition
+                    key={zoneId}
+                    {...fadeOutAndRollUpTransition(css)}
+                  >
+                    <ItemZoneGroup
+                      zoneLabel={zoneLabel}
+                      items={items}
+                      outfitState={outfitState}
+                      dispatchToOutfit={dispatchToOutfit}
+                    />
+                  </CSSTransition>
+                ))}
                 {incompatibleItems.length > 0 && (
                   <ItemZoneGroup
                     zoneLabel="Incompatible"
@@ -111,7 +109,7 @@ function ItemsPanel({ outfitState, outfitSaving, loading, dispatchToOutfit }) {
                     isDisabled
                   />
                 )}
-              </>
+              </TransitionGroup>
             )}
           </Flex>
         </Box>

app/javascript/wardrobe-2020/WardrobePage/OutfitControls.js

@@ -24,7 +24,6 @@ import {
   Switch,
   Tooltip,
   UnorderedList,
-  useBreakpointValue,
   useClipboard,
   useToast,
 } from "@chakra-ui/react";
@@ -79,8 +78,6 @@ function OutfitControls({
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const toast = React.useMemo(() => _toast, []);
 
-  const speciesColorPickerSize = useBreakpointValue({ base: "sm", md: "md" });
-
   const onSpeciesColorChange = React.useCallback(
     (species, color, isValid, closestPose) => {
       if (isValid) {
@@ -211,7 +208,6 @@ function OutfitControls({
             {outfitState.speciesId && outfitState.colorId && (
               <Flex
                 gridArea="picker"
-                align="center"
                 justify="center"
                 onClick={maybeUnlockFocus}
               >
@@ -227,7 +223,6 @@ function OutfitControls({
                       idealPose={outfitState.pose}
                       onChange={onSpeciesColorChange}
                       stateMustAlwaysBeValid
-                      size={speciesColorPickerSize}
                       speciesTestId="wardrobe-species-picker"
                       colorTestId="wardrobe-color-picker"
                     />

app/javascript/wardrobe-2020/WardrobePage/PosePicker.js

@@ -293,7 +293,7 @@ function PosePickerButton({ pose, altStyle, isOpen, loading, ...props }, ref) {
       {({ css, cx }) => (
         <Button
           variant="unstyled"
-          textShadow={`${theme.colors.blackAlpha["700"]} 0 1px 2px`}
+          boxShadow="md"
           d="flex"
           alignItems="center"
           justifyContent="center"
@@ -307,11 +307,10 @@ function PosePickerButton({ pose, altStyle, isOpen, loading, ...props }, ref) {
           className={cx(
             css`
               border: 1px solid transparent !important;
-              color: ${theme.colors.gray["100"]};
+              color: ${theme.colors.gray["300"]};
               cursor: ${loading ? "wait" : "pointer"} !important;
               transition:
                 color 0.2s,
-                background: 0.2s,
                 border-color 0.2s !important;
               padding-left: 0.75em;
               padding-right: 0.5em;
@@ -320,8 +319,6 @@ function PosePickerButton({ pose, altStyle, isOpen, loading, ...props }, ref) {
               &.is-open {
                 border-color: ${theme.colors.gray["50"]} !important;
                 color: ${theme.colors.gray["50"]};
-                background: ${theme.colors.blackAlpha["600"]};
-                text-shadow: transparent 0 1px 2px;
               }
 
               &:focus {

app/javascript/wardrobe-2020/WardrobePage/useOutfitState.js

@@ -129,7 +129,6 @@ function useOutfitState() {
         $allItemIds: [ID!]!
         $speciesId: ID!
         $colorId: ID!
-        $altStyleId: ID
       ) {
         items(ids: $allItemIds) {
           # TODO: De-dupe this from SearchPanel?
@@ -141,11 +140,7 @@ function useOutfitState() {
           currentUserOwnsThis
           currentUserWantsThis
 
-          appearanceOn(
-            speciesId: $speciesId
-            colorId: $colorId
-            altStyleId: $altStyleId
-          ) {
+          appearanceOn(speciesId: $speciesId, colorId: $colorId) {
             # This enables us to quickly show the item when the user clicks it!
             ...ItemAppearanceForOutfitPreview
 
@@ -171,7 +166,7 @@ function useOutfitState() {
       ${itemAppearanceFragment}
     `,
     {
-      variables: { allItemIds, speciesId, colorId, altStyleId },
+      variables: { allItemIds, speciesId, colorId },
       context: { sendAuth: true },
       // Skip if this outfit has no items, as an optimization; or if we don't
       // have the species/color ID loaded yet because we're waiting on the
@@ -453,7 +448,7 @@ function getOutfitStateFromOutfitData(outfit) {
 }
 
 function findItemConflicts(itemIdToAdd, state, apolloClient) {
-  const { wornItemIds, speciesId, colorId, altStyleId } = state;
+  const { wornItemIds, speciesId, colorId } = state;
 
   const { items } = apolloClient.readQuery({
     query: gql`
@@ -461,15 +456,10 @@ function findItemConflicts(itemIdToAdd, state, apolloClient) {
         $itemIds: [ID!]!
         $speciesId: ID!
         $colorId: ID!
-        $altStyleId: ID
       ) {
         items(ids: $itemIds) {
           id
-          appearanceOn(
-            speciesId: $speciesId
-            colorId: $colorId
-            altStyleId: $altStyleId
-          ) {
+          appearanceOn(speciesId: $speciesId, colorId: $colorId) {
             layers {
               zone {
                 id
@@ -487,7 +477,6 @@ function findItemConflicts(itemIdToAdd, state, apolloClient) {
       itemIds: [itemIdToAdd, ...wornItemIds],
       speciesId,
       colorId,
-      altStyleId,
     },
   });
   const itemToAdd = items.find((i) => i.id === itemIdToAdd);

app/javascript/wardrobe-2020/WardrobePage/useSearchResults.js

@@ -14,7 +14,7 @@ export function useSearchResults(
   currentPageNumber,
   { skip = false } = {},
 ) {
-  const { speciesId, colorId, altStyleId } = outfitState;
+  const { speciesId, colorId } = outfitState;
 
   // We debounce the search query, so that we don't resend a new query whenever
   // the user types anything.
@@ -56,7 +56,6 @@ export function useSearchResults(
         $zoneIds: [ID!]!
         $speciesId: ID!
         $colorId: ID!
-        $altStyleId: ID
         $offset: Int!
         $perPage: Int!
       ) {
@@ -79,11 +78,7 @@ export function useSearchResults(
             currentUserOwnsThis
             currentUserWantsThis
 
-            appearanceOn(
-              speciesId: $speciesId
-              colorId: $colorId
-              altStyleId: $altStyleId
-            ) {
+            appearanceOn(speciesId: $speciesId, colorId: $colorId) {
               # This enables us to quickly show the item when the user clicks it!
               ...ItemAppearanceForOutfitPreview
 
@@ -109,13 +104,12 @@ export function useSearchResults(
     {
       variables: {
         query: debouncedQuery.value,
-        fitsPet: { speciesId, colorId, altStyleId },
+        fitsPet: { speciesId, colorId },
         itemKind: debouncedQuery.filterToItemKind,
         currentUserOwnsOrWants: debouncedQuery.filterToCurrentUserOwnsOrWants,
         zoneIds: filterToZoneIds,
         speciesId,
         colorId,
-        altStyleId,
         offset,
         perPage: SEARCH_PER_PAGE,
       },

app/javascript/wardrobe-2020/apolloClient.js

@@ -53,26 +53,17 @@ const typePolicies = {
           return appearance;
         }
 
-        const { speciesId, colorId, altStyleId } = args;
-        console.debug(
-          "[appearanceOn] seeking cached appearance",
-          speciesId,
-          colorId,
-          altStyleId,
-          readField("id"),
-        );
-
-        // If this is an alt style, don't try to mess with clever caching.
-        // (Note that, if it's already in the cache, the first condition will
-        // catch that! This won't *always* force a fresh load!)
-        if (altStyleId != null) {
-          return undefined;
-        }
-
         // Otherwise, we're going to see if this is a standard color, in which
         // case we can reuse the standard color appearance if we already have
         // it! This helps for fast loading when switching between standard
         // colors.
+        const { speciesId, colorId } = args;
+        console.debug(
+          "[appearanceOn] seeking cached appearance",
+          speciesId,
+          colorId,
+          readField("id"),
+        );
         const speciesStandardBodyId = readField(
           "standardBodyId",
           toReference({ __typename: "Species", id: speciesId }),

app/javascript/wardrobe-2020/components/useOutfitAppearance.js

@@ -83,17 +83,12 @@ export default function useOutfitAppearance(outfitState) {
       query OutfitItemsAppearance(
         $speciesId: ID!
         $colorId: ID!
-        $altStyleId: ID
         $wornItemIds: [ID!]!
       ) {
         items(ids: $wornItemIds) {
           id
           name # HACK: This is for HTML5 detection UI in OutfitControls!
-          appearance: appearanceOn(
-            speciesId: $speciesId
-            colorId: $colorId
-            altStyleId: $altStyleId
-          ) {
+          appearance: appearanceOn(speciesId: $speciesId, colorId: $colorId) {
             ...ItemAppearanceForOutfitPreview
           }
         }
@@ -104,7 +99,6 @@ export default function useOutfitAppearance(outfitState) {
       variables: {
         speciesId,
         colorId,
-        altStyleId,
         wornItemIds,
       },
       skip: speciesId == null || colorId == null || wornItemIds.length === 0,