From 9e49b6ae3e19d09b7c27abd22ac73642204e8a1e Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Tue, 9 Feb 2021 22:36:50 -0800
Subject: [PATCH] Fix text color for OutfitPreview

Oops, I never actually saw the practically invisible text in light mode! Let's make it actually dark in light mode item pages, and still dark in all wardrobe pages!
---
 src/app/WardrobePage/WardrobeOutfitPreview.js | 23 +++++++++++--------
 src/app/components/OutfitPreview.js           |  6 +++--
 2 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/src/app/WardrobePage/WardrobeOutfitPreview.js b/src/app/WardrobePage/WardrobeOutfitPreview.js
index 9988652..5b1b36c 100644
--- a/src/app/WardrobePage/WardrobeOutfitPreview.js
+++ b/src/app/WardrobePage/WardrobeOutfitPreview.js
@@ -7,6 +7,7 @@ import OutfitThumbnail, {
   getOutfitThumbnailRenderSize,
 } from "../components/OutfitThumbnail";
 import OutfitPreview from "../components/OutfitPreview";
+import { DarkMode } from "@chakra-ui/react";
 
 function WardrobeOutfitPreview({
   isLoading,
@@ -14,16 +15,18 @@ function WardrobeOutfitPreview({
   onChangeHasAnimations,
 }) {
   return (
-    <OutfitPreview
-      isLoading={isLoading}
-      speciesId={outfitState.speciesId}
-      colorId={outfitState.colorId}
-      pose={outfitState.pose}
-      appearanceId={outfitState.appearanceId}
-      wornItemIds={outfitState.wornItemIds}
-      onChangeHasAnimations={onChangeHasAnimations}
-      backdrop={<OutfitThumbnailIfCached outfitId={outfitState.id} />}
-    />
+    <DarkMode>
+      <OutfitPreview
+        isLoading={isLoading}
+        speciesId={outfitState.speciesId}
+        colorId={outfitState.colorId}
+        pose={outfitState.pose}
+        appearanceId={outfitState.appearanceId}
+        wornItemIds={outfitState.wornItemIds}
+        onChangeHasAnimations={onChangeHasAnimations}
+        backdrop={<OutfitThumbnailIfCached outfitId={outfitState.id} />}
+      />
+    </DarkMode>
   );
 }
 
diff --git a/src/app/components/OutfitPreview.js b/src/app/components/OutfitPreview.js
index d13381f..d648393 100644
--- a/src/app/components/OutfitPreview.js
+++ b/src/app/components/OutfitPreview.js
@@ -1,5 +1,5 @@
 import React from "react";
-import { Box, DarkMode, Flex, Text } from "@chakra-ui/react";
+import { Box, DarkMode, Flex, Text, useColorModeValue } from "@chakra-ui/react";
 import { WarningIcon } from "@chakra-ui/icons";
 import { ClassNames } from "@emotion/react";
 import { CSSTransition, TransitionGroup } from "react-transition-group";
@@ -77,11 +77,13 @@ export function useOutfitPreview({
     }
   }, [layersHaveAnimations, onChangeHasAnimations]);
 
+  const textColor = useColorModeValue("green.700", "white");
+
   let preview;
   if (error || error2) {
     preview = (
       <FullScreenCenter>
-        <Text color="green.50" d="flex" alignItems="center">
+        <Text color={textColor} d="flex" alignItems="center">
           <WarningIcon />
           <Box width={2} />
           Could not load preview. Try again?