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 906f9c35..3ce49126 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 06041111..56435f35 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 0bae4a57..4505493a 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 5ed5b891..9ed1bfa6 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>
   );