Overhaul pose picker button to have text now, for all users

This one isn't reserved just for Support users! I think this button
stands out a lot more with the text, and I want people to be able to
discover it!

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

@@ -215,12 +215,6 @@ function OutfitControls({
                  * We try to center the species/color picker, but the left spacer will
                  * shrink more than the pose picker container if we run out of space!
                  */}
-                <Flex
-                  flex="1 1 0"
-                  paddingRight="3"
-                  align="center"
-                  justify="flex-end"
-                />
                 <Box flex="0 0 auto">
                   <DarkMode>
                     <SpeciesColorPicker
@@ -234,7 +228,7 @@ function OutfitControls({
                     />
                   </DarkMode>
                 </Box>
-                <Flex flex="1 1 0" align="center" pl="2">
+                <Flex flex="0 0 auto" align="center" pl="2">
                   <PosePicker
                     speciesId={outfitState.speciesId}
                     colorId={outfitState.colorId}

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

@@ -23,6 +23,7 @@ import {
   useToast,
   useToken,
 } from "@chakra-ui/react";
+import { ChevronDownIcon } from "@chakra-ui/icons";
 import { loadable } from "../util";
 
 import { petAppearanceFragment } from "../components/useOutfitAppearance";
@@ -144,10 +145,6 @@ function PosePicker({
     dispatchToOutfit,
   ]);
 
-  if (loading) {
-    return null;
-  }
-
   // This is a low-stakes enough control, where enough pairs don't have data
   // anyway, that I think I want to just not draw attention to failures.
   if (error) {
@@ -175,7 +172,12 @@ function PosePicker({
       {({ isOpen }) => (
         <>
           <PopoverTrigger>
-            <PosePickerButton pose={pose} isOpen={isOpen} {...props} />
+            <PosePickerButton
+              pose={pose}
+              isOpen={isOpen}
+              loading={loading}
+              {...props}
+            />
           </PopoverTrigger>
           <Portal>
             <PopoverContent>
@@ -248,7 +250,7 @@ function PosePicker({
   );
 }
 
-function PosePickerButton({ pose, isOpen, ...props }, ref) {
+function PosePickerButton({ pose, isOpen, loading, ...props }, ref) {
   const theme = useTheme();
 
   return (
@@ -265,16 +267,28 @@ function PosePickerButton({ pose, isOpen, ...props }, ref) {
           outline="initial"
           fontSize="sm"
           fontWeight="normal"
+          minWidth="12ch"
+          disabled={loading}
           className={cx(
             css`
               border: 1px solid transparent !important;
-              transition: border-color 0.2s !important;
+              color: ${theme.colors.gray["300"]};
-              padding-inline: 0.75em;
+              cursor: ${loading ? "wait" : "pointer"} !important;
+              transition:
+                color 0.2s,
+                border-color 0.2s !important;
+              padding-left: 0.75em;
+              padding-right: 0.5em;
 
-              &:focus,
               &:hover,
               &.is-open {
                 border-color: ${theme.colors.gray["50"]} !important;
+                color: ${theme.colors.gray["50"]};
+              }
+
+              &:focus {
+                border-color: ${theme.colors.gray["50"]} !important;
+                box-shadow: ${theme.shadows.outline};
               }
 
               &.is-open {
@@ -286,11 +300,11 @@ function PosePickerButton({ pose, isOpen, ...props }, ref) {
           {...props}
           ref={ref}
         >
-          <EmojiImage src={getIcon(pose)} alt="" />
+          <EmojiImage src={getIcon(pose)} alt="Style" />
-          <SupportOnly>
           <Box width=".5em" />
           {getLabel(pose)}
-          </SupportOnly>
+          <Box width=".5em" />
+          <ChevronDownIcon />
         </Button>
       )}
     </ClassNames>