OpenNeo/impress-2020
OpenNeo/impress-2020
1
0
Fork 0
Code Pull requests Activity

Fix text color for OutfitPreview

Browse source 
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!
This commit is contained in:
Emi Matchu 2021-02-09 22:36:50 -08:00
parent b0eeb84d63
commit 9e49b6ae3e
2 changed files with 17 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
src/app/WardrobePage/WardrobeOutfitPreview.js
View file

@ -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>
);
}

6
src/app/components/OutfitPreview.js
View file

@ -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?