Start adding Styles UI to pose picker

Add the tab UI, though the styles aren't in it yet; and add text label
to help make the whole UI more discoverable.

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

@@ -11,6 +11,11 @@ import {
   PopoverContent,
   PopoverTrigger,
   Portal,
+  Tab,
+  Tabs,
+  TabList,
+  TabPanel,
+  TabPanels,
   VisuallyHidden,
   useColorModeValue,
   useTheme,
@@ -63,7 +68,6 @@ function PosePicker({
   onUnlockFocus,
   ...props
 }) {
-  const theme = useTheme();
   const initialFocusRef = React.useRef();
   const { loading, error, poseInfos } = usePoses(speciesId, colorId, pose);
   const [isInSupportMode, setIsInSupportMode] = useLocalStorage(
@@ -164,35 +168,46 @@ function PosePicker({
           </PopoverTrigger>
           <Portal>
             <PopoverContent>
-              <Box p="4" position="relative">
+              <Tabs size="sm" variant="soft-rounded">
-                {isInSupportMode ? (
+                <TabPanels position="relative">
-                  <PosePickerSupport
+                  <TabPanel>
-                    speciesId={speciesId}
+                    {isInSupportMode ? (
-                    colorId={colorId}
+                      <PosePickerSupport
-                    pose={pose}
+                        speciesId={speciesId}
-                    appearanceId={appearanceId}
+                        colorId={colorId}
-                    initialFocusRef={initialFocusRef}
+                        pose={pose}
-                    dispatchToOutfit={dispatchToOutfit}
+                        appearanceId={appearanceId}
-                  />
+                        initialFocusRef={initialFocusRef}
-                ) : (
+                        dispatchToOutfit={dispatchToOutfit}
-                  <>
+                      />
-                    <PosePickerTable
+                    ) : (
-                      poseInfos={poseInfos}
+                      <>
-                      onChange={onChange}
+                        <PosePickerTable
-                      initialFocusRef={initialFocusRef}
+                          poseInfos={poseInfos}
-                    />
+                          onChange={onChange}
-                    {numStandardPoses == 0 && <PosePickerEmptyExplanation />}
+                          initialFocusRef={initialFocusRef}
-                  </>
+                        />
-                )}
+                        {numStandardPoses == 0 && (
-                <SupportOnly>
+                          <PosePickerEmptyExplanation />
-                  <Box position="absolute" top="5" left="3">
+                        )}
-                    <PosePickerSupportSwitch
+                      </>
-                      isChecked={isInSupportMode}
+                    )}
-                      onChange={(e) => setIsInSupportMode(e.target.checked)}
+                    <SupportOnly>
-                    />
+                      <Box position="absolute" top="5" left="3">
-                  </Box>
+                        <PosePickerSupportSwitch
-                </SupportOnly>
+                          isChecked={isInSupportMode}
-              </Box>
+                          onChange={(e) => setIsInSupportMode(e.target.checked)}
+                        />
+                      </Box>
+                    </SupportOnly>
+                  </TabPanel>
+                  <TabPanel>WIP: Styles go here!</TabPanel>
+                </TabPanels>
+                <TabList paddingX="2" paddingY="1">
+                  <Tab width="50%">Expressions</Tab>
+                  <Tab width="50%">Styles</Tab>
+                </TabList>
+              </Tabs>
               <PopoverArrow />
             </PopoverContent>
           </Portal>
@@ -217,10 +232,13 @@ function PosePickerButton({ pose, isOpen, ...props }, ref) {
           _focus={{ borderColor: "gray.50" }}
           _hover={{ borderColor: "gray.50" }}
           outline="initial"
+          fontSize="sm"
+          fontWeight="normal"
           className={cx(
             css`
               border: 1px solid transparent !important;
               transition: border-color 0.2s !important;
+              padding-inline: 0.75em;
 
               &:focus,
               &:hover,
@@ -237,7 +255,9 @@ function PosePickerButton({ pose, isOpen, ...props }, ref) {
           {...props}
           ref={ref}
         >
-          <EmojiImage src={getIcon(pose)} alt="Choose a pose" />
+          <EmojiImage src={getIcon(pose)} alt="" />
+          <Box width=".5em" />
+          {getLabel(pose)}
         </Button>
       )}
     </ClassNames>
@@ -514,7 +534,7 @@ function PosePickerEmptyExplanation() {
       marginTop="2"
     >
       We're still working on labeling these! For now, we're just giving you one
-      of the poses we have.
+      of the expressions we have.
     </Box>
   );
 }
@@ -654,7 +674,21 @@ function getIcon(pose) {
   } else if (pose === "UNCONVERTED") {
     return twemojiSunglasses;
   } else {
-    return twemojiQuestion;
+    return twemojiPaintbrush;
+  }
+}
+
+function getLabel(pose) {
+  if (pose === "HAPPY_MASC" || pose === "HAPPY_FEM") {
+    return "Happy";
+  } else if (pose === "SAD_MASC" || pose === "SAD_FEM") {
+    return "Sad";
+  } else if (pose === "SICK_MASC" || pose === "SICK_FEM") {
+    return "Sick";
+  } else if (pose === "UNCONVERTED") {
+    return "Classic UC";
+  } else {
+    return "Default";
   }
 }
 

app/javascript/wardrobe-2020/images/twemoji/paintbrush.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="#3B88C3" d="M14.57 27.673c2.814-1.692 6.635-3.807 9.899-7.071 7.03-7.029 12.729-16.97 11.314-18.385C34.369.803 24.428 6.502 17.398 13.531c-3.265 3.265-5.379 7.085-7.071 9.899l4.243 4.243z"/><path fill="#C1694F" d="M.428 34.744s7.071 1.414 12.021-3.536c2.121-2.121 2.121-4.949 2.121-4.949l-2.829-2.829s-3.535.708-4.95 2.122c-1.414 1.414-2.518 4.232-2.888 5.598-.676 2.502-3.475 3.594-3.475 3.594z"/><path fill="#CCD6DD" d="M17.882 25.328l-5.168-5.168c-.391-.391-.958-.326-1.27.145l-1.123 1.705c-.311.471-.271 1.142.087 1.501l4.122 4.123c.358.358 1.03.397 1.501.087l1.705-1.124c.472-.311.536-.878.146-1.269z"/><path fill="#A0041E" d="M11.229 32.26c-1.191.769-1.826.128-1.609-.609.221-.751-.12-1.648-1.237-1.414-1.117.233-1.856-.354-1.503-1.767.348-1.393-1.085-1.863-1.754-.435-.582 1.16-1.017 2.359-1.222 3.115-.677 2.503-3.476 3.595-3.476 3.595s5.988 1.184 10.801-2.485z"/></svg>