Add a warning that UCs are retired now

I'm keeping it in the same place for now rather than trying to fold it
into Styles, because I think that's net-less-confusing (since Styles
work pretty differently, e.g. different color requirements), and
certainly less work either way lol!

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

@@ -23,7 +23,7 @@ import {
   useToast,
   useToken,
 } from "@chakra-ui/react";
-import { ChevronDownIcon } from "@chakra-ui/icons";
+import { ChevronDownIcon, WarningTwoIcon } from "@chakra-ui/icons";
 import { loadable } from "../util";
 
 import { petAppearanceFragment } from "../components/useOutfitAppearance";
@@ -422,14 +422,22 @@ function PosePickerTable({ poseInfos, onChange, initialFocusRef }) {
         </tbody>
       </table>
       {poseInfos.unconverted.isAvailable && (
-        <PoseOption
-          poseInfo={poseInfos.unconverted}
-          onChange={onChange}
-          inputRef={poseInfos.unconverted.isSelected && initialFocusRef}
-          size="sm"
-          label="Unconverted"
+        <Flex
+          align="center"
+          justify="center"
+          gap="1"
           marginTop="2"
-        />
+          marginBottom="2"
+        >
+          <PoseOption
+            poseInfo={poseInfos.unconverted}
+            onChange={onChange}
+            inputRef={poseInfos.unconverted.isSelected && initialFocusRef}
+            size="sm"
+            label="Retired UC"
+          />
+          <RetiredUCWarning isSelected={poseInfos.unconverted.isSelected} />
+        </Flex>
       )}
     </Box>
   );
@@ -622,6 +630,40 @@ function PosePickerEmptyExplanation() {
   );
 }
 
+function RetiredUCWarning({ isSelected }) {
+  return (
+    <Popover placement="right" trigger="hover">
+      <PopoverTrigger>
+        <Box
+          as="button"
+          tabIndex="0"
+          aria-label="Warning"
+          cursor="help"
+          lineHeight="1"
+          opacity={isSelected ? "1" : "0.75"}
+          transform={isSelected ? "scale(1)" : "scale(0.8)"}
+          color={isSelected ? "yellow.500" : "inherit"}
+          transition="all 0.2s"
+          padding="1"
+        >
+          <WarningTwoIcon />
+        </Box>
+      </PopoverTrigger>
+      <PopoverContent
+        background="blackAlpha.800"
+        borderColor="blackAlpha.900"
+        color="white"
+        padding="2"
+        fontSize="sm"
+      >
+        "Unconverted" pets are no longer available on Neopets.com, and have been
+        replaced with the very similar Styles feature. We're just keeping this
+        as an archive!
+      </PopoverContent>
+    </Popover>
+  );
+}
+
 function StyleSelect({
   selectedStyleId,
   altStyles,
@@ -897,7 +939,7 @@ function getLabel(pose) {
   } else if (pose === "SICK_MASC" || pose === "SICK_FEM") {
     return "Sick";
   } else if (pose === "UNCONVERTED") {
-    return "Classic UC";
+    return "Retired UC";
   } else {
     return "Default";
   }