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

add some DTI character! green text, circles -> squares

Browse source
This commit is contained in:
Matt Dunn-Rankin 2020-04-22 01:15:51 -07:00
parent 32b31c6596
commit dcebc5c690
1 changed files with 11 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
app/src/WardrobePage.js
View file

@ -62,7 +62,7 @@ function ItemsPanel() {
const [zonesAndItems, wearItem] = useOutfitState(); const [zonesAndItems, wearItem] = useOutfitState();
return ( return (
<> <Box color="green.800">
<PseudoBox role="group" d="inline-block"> <PseudoBox role="group" d="inline-block">
<Heading size="xl" mb="6" wordBreak="break-word"> <Heading size="xl" mb="6" wordBreak="break-word">
<Editable defaultValue="roopal27"> <Editable defaultValue="roopal27">
@ -81,7 +81,7 @@ function ItemsPanel() {
<IconButton <IconButton
icon="edit" icon="edit"
variant="link" variant="link"
color="gray.600" color="green.600"
aria-label="Edit outfit name" aria-label="Edit outfit name"
title="Edit outfit name" title="Edit outfit name"
/> />
@ -104,14 +104,14 @@ function ItemsPanel() {
</Box> </Box>
))} ))}
</Stack> </Stack>
</> </Box>
); );
} }
function ItemsForZone({ zoneName, items, wornItemId, onWearItem }) { function ItemsForZone({ zoneName, items, wornItemId, onWearItem }) {
return ( return (
<Box> <Box>
<Heading size="lg" mb="3"> <Heading size="lg" color="green.900" mb="3">
{zoneName} {zoneName}
</Heading> </Heading>
<Stack spacing="3"> <Stack spacing="3">
@ -139,10 +139,10 @@ function Item({ item, isWorn, onWear }) {
onClick={onWear} onClick={onWear}
> >
<PseudoBox <PseudoBox
rounded="full" rounded="lg"
boxShadow="md" boxShadow="md"
border="1px" border="1px"
borderColor={isWorn ? "green.700" : "gray.400"} borderColor={isWorn ? "green.700" : "green.700"}
opacity={isWorn ? 1 : 0.7} opacity={isWorn ? 1 : 0.7}
width="50px" width="50px"
height="50px" height="50px"
@ -154,7 +154,7 @@ function Item({ item, isWorn, onWear }) {
!isWorn && { !isWorn && {
opacity: 0.9, opacity: 0.9,
transform: "scale(0.9)", transform: "scale(0.9)",
borderColor: "gray.600", borderColor: "green.600",
} }
} }
> >
@ -164,12 +164,14 @@ function Item({ item, isWorn, onWear }) {
marginLeft="3" marginLeft="3"
fontSize="md" fontSize="md"
fontWeight={isWorn && "bold"} fontWeight={isWorn && "bold"}
color={isWorn ? "gray.800" : "gray.600"} color="green.800"
transition="all 0.15s" transition="all 0.15s"
opacity={isWorn ? 1 : 0.8}
_groupHover={ _groupHover={
!isWorn && { !isWorn && {
color: "gray.800", color: "green.800",
fontWeight: "medium", fontWeight: "medium",
opacity: 0.9,
} }
} }
> >