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

use simpler nc/np tags in the list

Browse source
This commit is contained in:
Emi Matchu 2020-09-01 02:51:03 -07:00
parent 4a4f4f9c63
commit fd0edeca3d
1 changed files with 9 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
src/app/WardrobePage/Item.js
View file

@ -74,14 +74,18 @@ function Item({
<ItemThumbnail <ItemThumbnail
src={safeImageUrl(item.thumbnailUrl)} src={safeImageUrl(item.thumbnailUrl)}
isWorn={isWorn} isWorn={isWorn}
isNc={item.isNc}
/> />
</Box> </Box>
<Box flex="1 1 0" minWidth="0"> <Box flex="1 1 0" minWidth="0">
<ItemName id={itemNameId} isWorn={isWorn}> <ItemName id={itemNameId} isWorn={isWorn}>
{item.name} {item.name}
</ItemName> </ItemName>
<Wrap spacing="2" marginTop="1"> <Wrap spacing="2" marginTop="1" opacity="0.7">
{item.isNc ? (
<Badge colorScheme="purple">NC</Badge>
) : (
<Badge>NP</Badge>
)}
{shouldShowZones && {shouldShowZones &&
occupiedZoneLabels.map((zoneLabel) => ( occupiedZoneLabels.map((zoneLabel) => (
<Badge key={zoneLabel}>{getZoneShorthand(zoneLabel)}</Badge> <Badge key={zoneLabel}>{getZoneShorthand(zoneLabel)}</Badge>
@ -229,17 +233,17 @@ function ItemContainer({ children, isFocusable = true }) {
* ItemThumbnail shows a small preview image for the item, including some * ItemThumbnail shows a small preview image for the item, including some
* hover/focus and worn/unworn states. * hover/focus and worn/unworn states.
*/ */
function ItemThumbnail({ src, isWorn, isNc }) { function ItemThumbnail({ src, isWorn }) {
const theme = useTheme(); const theme = useTheme();
const colorMode = useColorMode(); const colorMode = useColorMode();
const borderColor = useColorModeValue( const borderColor = useColorModeValue(
isNc ? theme.colors.purple["700"] : theme.colors.green["700"], theme.colors.green["700"],
"transparent" "transparent"
); );
const focusBorderColor = useColorModeValue( const focusBorderColor = useColorModeValue(
isNc ? theme.colors.purple["600"] : theme.colors.green["600"], theme.colors.green["600"],
"transparent" "transparent"
); );
@ -286,21 +290,6 @@ function ItemThumbnail({ src, isWorn, isNc }) {
> >
<Image width="100%" height="100%" src={src} alt="" /> <Image width="100%" height="100%" src={src} alt="" />
</Box> </Box>
{isNc && (
<Badge
position="absolute"
top="-4px"
left="-6px"
colorScheme="purple"
boxShadow="sm"
fontSize="11px"
// Dark mode's default theme has a transparent background for badges.
// I want an opaque background!
backgroundColor={colorMode === "dark" ? "purple.700" : undefined}
>
NC
</Badge>
)}
</Box> </Box>
); );
} }