use the Delicious font for more character!
This commit is contained in:
parent
dcebc5c690
commit
ff4c29f91e
2 changed files with 43 additions and 30 deletions
1
app/dev-todos.txt
Normal file
1
app/dev-todos.txt
Normal file
|
@ -0,0 +1 @@
|
||||||
|
* Embed Delicious font, right now it just uses the locally installed one!
|
|
@ -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">
|
||||||
|
|
Loading…
Reference in a new issue