use the Delicious font for more character!

This commit is contained in:
Matt Dunn-Rankin 2020-04-22 01:29:07 -07:00
parent dcebc5c690
commit ff4c29f91e
2 changed files with 43 additions and 30 deletions

1
app/dev-todos.txt Normal file
View file

@ -0,0 +1 @@
* Embed Delicious font, right now it just uses the locally installed one!

View file

@ -63,8 +63,33 @@ function ItemsPanel() {
return ( return (
<Box color="green.800"> <Box color="green.800">
<OutfitHeading />
<Stack spacing="10">
{zonesAndItems.map(({ zoneName, items, wornItemId }) => (
<Box key={zoneName}>
<ItemsForZone
zoneName={zoneName}
items={items}
wornItemId={wornItemId}
onWearItem={wearItem}
/>
</Box>
))}
</Stack>
</Box>
);
}
function OutfitHeading() {
return (
<PseudoBox role="group" d="inline-block"> <PseudoBox role="group" d="inline-block">
<Heading size="xl" mb="6" wordBreak="break-word"> <Heading
size="2xl"
mb="6"
wordBreak="break-word"
fontFamily="Delicious"
fontWeight="800"
>
<Editable defaultValue="roopal27"> <Editable defaultValue="roopal27">
{({ isEditing, onRequestEdit }) => ( {({ isEditing, onRequestEdit }) => (
<> <>
@ -92,26 +117,13 @@ function ItemsPanel() {
</Editable> </Editable>
</Heading> </Heading>
</PseudoBox> </PseudoBox>
<Stack spacing="10">
{zonesAndItems.map(({ zoneName, items, wornItemId }) => (
<Box key={zoneName}>
<ItemsForZone
zoneName={zoneName}
items={items}
wornItemId={wornItemId}
onWearItem={wearItem}
/>
</Box>
))}
</Stack>
</Box>
); );
} }
function ItemsForZone({ zoneName, items, wornItemId, onWearItem }) { function ItemsForZone({ zoneName, items, wornItemId, onWearItem }) {
return ( return (
<Box> <Box>
<Heading size="lg" color="green.900" mb="3"> <Heading size="xl" color="green.800" mb="3" fontFamily="Delicious">
{zoneName} {zoneName}
</Heading> </Heading>
<Stack spacing="3"> <Stack spacing="3">