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