From 9cb6cc21207e01025bfafc76b50e880f76a98cad Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Thu, 10 Sep 2020 03:06:44 -0700
Subject: [PATCH] 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                          |  2 +-
 .../WardrobePage/support/PosePickerSupport.js |  2 +-
 src/app/components/HangerSpinner.js           | 10 +++++++--
 src/app/components/OutfitPreview.js           | 22 ++++++++++---------
 4 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/src/app/ItemsPage.js b/src/app/ItemsPage.js
index 906f9c3..3ce4912 100644
--- a/src/app/ItemsPage.js
+++ b/src/app/ItemsPage.js
@@ -33,7 +33,7 @@ function ItemsPage() {
   if (loading) {
     return (
       <Box display="flex" justifyContent="center">
-        <HangerSpinner boxSize="48px" />
+        <HangerSpinner />
       </Box>
     );
   }
diff --git a/src/app/WardrobePage/support/PosePickerSupport.js b/src/app/WardrobePage/support/PosePickerSupport.js
index 0604111..56435f3 100644
--- a/src/app/WardrobePage/support/PosePickerSupport.js
+++ b/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>
     );
   }
diff --git a/src/app/components/HangerSpinner.js b/src/app/components/HangerSpinner.js
index 0bae4a5..4505493 100644
--- a/src/app/components/HangerSpinner.js
+++ b/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>
     </>
   );
diff --git a/src/app/components/OutfitPreview.js b/src/app/components/OutfitPreview.js
index 5ed5b89..9ed1bfa 100644
--- a/src/app/components/OutfitPreview.js
+++ b/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>
   );