use better colors for light mode hanger spinner

Initially the spinner was only used in OutfitPreview, where the background was always pretty dark. Now that we use it in more general contexts, we need a light/dark distinction!

Also went and standardized out the `size` props

src/app/ItemsPage.js

@@ -33,7 +33,7 @@ function ItemsPage() {
   if (loading) {
     return (
       <Box display="flex" justifyContent="center">
-        <HangerSpinner boxSize="48px" />
+        <HangerSpinner />
       </Box>
     );
   }

src/app/WardrobePage/support/PosePickerSupport.js

@@ -61,7 +61,7 @@ function PosePickerSupport({
   if (loading) {
     return (
       <Box display="flex" justifyContent="center">
-        <HangerSpinner boxSize="32px" />
+        <HangerSpinner size="sm" />
       </Box>
     );
   }

src/app/components/HangerSpinner.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { css } from "emotion";
-import { Box } from "@chakra-ui/core";
+import { Box, useColorModeValue } from "@chakra-ui/core";
 import { createIcon } from "@chakra-ui/icons";
 
 const HangerIcon = createIcon({
@@ -18,6 +18,7 @@ const HangerIcon = createIcon({
 
 function HangerSpinner({ size = "md", ...props }) {
   const boxSize = { sm: "32px", md: "48px" }[size];
+  const color = useColorModeValue("green.500", "green.300");
 
   return (
     <>
@@ -85,7 +86,12 @@ function HangerSpinner({ size = "md", ...props }) {
         `}
         {...props}
       >
-        <HangerIcon color="green.300" boxSize={boxSize} {...props} />
+        <HangerIcon
+          boxSize={boxSize}
+          color={color}
+          transition="color 0.2s"
+          {...props}
+        />
       </Box>
     </>
   );

src/app/components/OutfitPreview.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { css, cx } from "emotion";
 import { CSSTransition, TransitionGroup } from "react-transition-group";
-import { Box, Flex, Text } from "@chakra-ui/core";
+import { Box, Flex, DarkMode, Text } from "@chakra-ui/core";
 import { WarningIcon } from "@chakra-ui/icons";
 
 import HangerSpinner from "./HangerSpinner";
@@ -45,7 +45,7 @@ function OutfitPreview({
   if (error || error2) {
     return (
       <FullScreenCenter>
-        <Text color="gray.50" d="flex" alignItems="center">
+        <Text color="green.50" d="flex" alignItems="center">
           <WarningIcon />
           <Box width={2} />
           Could not load preview. Try again?
@@ -55,13 +55,15 @@ function OutfitPreview({
   }
 
   return (
-    <OutfitLayers
-      loading={loading || loading2}
-      visibleLayers={loadedLayers}
-      placeholder={placeholder}
-      loadingDelay={loadingDelay}
-      doAnimations
-    />
+    <DarkMode>
+      <OutfitLayers
+        loading={loading || loading2}
+        visibleLayers={loadedLayers}
+        placeholder={placeholder}
+        loadingDelay={loadingDelay}
+        doAnimations
+      />
+    </DarkMode>
   );
 }
 
@@ -179,7 +181,7 @@ export function OutfitLayers({
           backgroundColor="gray.900"
           opacity="0.7"
         />
-        <HangerSpinner boxSize="48px" />
+        <HangerSpinner />
       </FullScreenCenter>
     </Box>
   );